greptile comments resolved

.cursor/rules/sim-testing.mdc

@@ -1,57 +1,60 @@
 ---
-description: Testing patterns with Vitest and @sim/testing
+description: Testing patterns with Vitest
 globs: ["apps/sim/**/*.test.ts", "apps/sim/**/*.test.tsx"]
 ---
 
 # Testing Patterns
 
-Use Vitest. Test files: `feature.ts` → `feature.test.ts`
+Use Vitest. Test files live next to source: `feature.ts` → `feature.test.ts`
 
 ## Structure
 
 ```typescript
 /**
+ * Tests for [feature name]
+ *
  * @vitest-environment node
  */
-import { databaseMock, loggerMock } from '@sim/testing'
-import { describe, expect, it, vi } from 'vitest'
 
-vi.mock('@sim/db', () => databaseMock)
+// 1. Mocks BEFORE imports
+vi.mock('@sim/db', () => ({ db: { select: vi.fn() } }))
 vi.mock('@sim/logger', () => loggerMock)
 
+// 2. Imports AFTER mocks
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { createSession, loggerMock } from '@sim/testing'
 import { myFunction } from '@/lib/feature'
 
 describe('myFunction', () => {
   beforeEach(() => vi.clearAllMocks())
-  it.concurrent('isolated tests run in parallel', () => { ... })
+
+  it('should do something', () => {
+    expect(myFunction()).toBe(expected)
+  })
+
+  it.concurrent('runs in parallel', () => { ... })
 })
 ```
 
 ## @sim/testing Package
 
-Always prefer over local mocks.
+```typescript
+// Factories - create test data
+import { createBlock, createWorkflow, createSession } from '@sim/testing'
 
-| Category | Utilities |
-|----------|-----------|
-| **Mocks** | `loggerMock`, `databaseMock`, `setupGlobalFetchMock()` |
-| **Factories** | `createSession()`, `createWorkflowRecord()`, `createBlock()`, `createExecutorContext()` |
-| **Builders** | `WorkflowBuilder`, `ExecutionContextBuilder` |
-| **Assertions** | `expectWorkflowAccessGranted()`, `expectBlockExecuted()` |
+// Mocks - pre-configured mocks
+import { loggerMock, databaseMock, fetchMock } from '@sim/testing'
+
+// Builders - fluent API for complex objects
+import { ExecutionBuilder, WorkflowBuilder } from '@sim/testing'
+```
 
 ## Rules
 
 1. `@vitest-environment node` directive at file top
-2. `vi.mock()` calls before importing mocked modules
-3. `@sim/testing` utilities over local mocks
-4. `it.concurrent` for isolated tests (no shared mutable state)
+2. **Mocks before imports** - `vi.mock()` calls must come first
+3. Use `@sim/testing` factories over manual test data
+4. `it.concurrent` for independent tests (faster)
 5. `beforeEach(() => vi.clearAllMocks())` to reset state
-
-## Hoisted Mocks
-
-For mutable mock references:
-
-```typescript
-const mockFn = vi.hoisted(() => vi.fn())
-vi.mock('@/lib/module', () => ({ myFunction: mockFn }))
-mockFn.mockResolvedValue({ data: 'test' })
-```
+6. Group related tests with nested `describe` blocks
+7. Test file naming: `*.test.ts` (not `*.spec.ts`)

CLAUDE.md

@@ -173,13 +173,13 @@ Use Vitest. Test files: `feature.ts` → `feature.test.ts`
 /**
  * @vitest-environment node
  */
-import { databaseMock, loggerMock } from '@sim/testing'
+
+// Mocks BEFORE imports
+vi.mock('@sim/db', () => ({ db: { select: vi.fn() } }))
+
+// Imports AFTER mocks
 import { describe, expect, it, vi } from 'vitest'
-
-vi.mock('@sim/db', () => databaseMock)
-vi.mock('@sim/logger', () => loggerMock)
-
-import { myFunction } from '@/lib/feature'
+import { createSession, loggerMock } from '@sim/testing'
 
 describe('feature', () => {
   beforeEach(() => vi.clearAllMocks())
@@ -187,7 +187,7 @@ describe('feature', () => {
 })
 ```
 
-Use `@sim/testing` mocks/factories over local test data. See `.cursor/rules/sim-testing.mdc` for details.
+Use `@sim/testing` factories over manual test data.
 
 ## Utils Rules
 

apps/docs/content/docs/en/blocks/router.mdx

@@ -2,6 +2,7 @@
 title: Router
 ---
 
+import { Callout } from 'fumadocs-ui/components/callout'
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 import { Image } from '@/components/ui/image'
 
@@ -101,18 +102,11 @@ Input (Lead) → Router
                 └── [Self-serve] → Workflow (Automated Onboarding)
 ```
 
-## Error Handling
-
-When the Router cannot determine an appropriate route for the given context, it will route to the **error path** instead of arbitrarily selecting a route. This happens when:
-
-- The context doesn't clearly match any of the defined route descriptions
-- The AI determines that none of the available routes are appropriate
-
 ## Best Practices
 
 - **Write clear route descriptions**: Each route description should clearly explain when that route should be selected. Be specific about the criteria.
 - **Make routes mutually exclusive**: When possible, ensure route descriptions don't overlap to prevent ambiguous routing decisions.
-- **Connect an error path**: Handle cases where no route matches by connecting an error handler for graceful fallback behavior.
+- **Include an error/fallback route**: Add a catch-all route for unexpected inputs that don't match other routes.
 - **Use descriptive route titles**: Route titles appear in the workflow canvas, so make them meaningful for readability.
 - **Test with diverse inputs**: Ensure the Router handles various input types, edge cases, and unexpected content.
 - **Monitor routing performance**: Review routing decisions regularly and refine route descriptions based on actual usage patterns.

apps/docs/content/docs/en/enterprise/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Enterprise
-description: Enterprise features for business organizations
+description: Enterprise features for organizations with advanced security and compliance requirements
 ---
 
 import { Callout } from 'fumadocs-ui/components/callout'
@@ -9,28 +9,6 @@ Sim Studio Enterprise provides advanced features for organizations with enhanced
 
 ---
 
-## Access Control
-
-Define permission groups to control what features and integrations team members can use.
-
-### Features
-
-- **Allowed Model Providers** - Restrict which AI providers users can access (OpenAI, Anthropic, Google, etc.)
-- **Allowed Blocks** - Control which workflow blocks are available
-- **Platform Settings** - Hide Knowledge Base, disable MCP tools, or disable custom tools
-
-### Setup
-
-1. Navigate to **Settings** → **Access Control** in your workspace
-2. Create a permission group with your desired restrictions
-3. Add team members to the permission group
-
-<Callout type="info">
-  Users not assigned to any permission group have full access. Permission restrictions are enforced at both UI and execution time.
-</Callout>
-
----
-
 ## Bring Your Own Key (BYOK)
 
 Use your own API keys for AI model providers instead of Sim Studio's hosted keys.
@@ -83,38 +61,15 @@ Enterprise authentication with SAML 2.0 and OIDC support for centralized identit
 
 ---
 
-## Self-Hosted Configuration
+## Self-Hosted
 
-For self-hosted deployments, enterprise features can be enabled via environment variables without requiring billing.
-
-### Environment Variables
+For self-hosted deployments, enterprise features can be enabled via environment variables:
 
 | Variable | Description |
 |----------|-------------|
-| `ORGANIZATIONS_ENABLED`, `NEXT_PUBLIC_ORGANIZATIONS_ENABLED` | Enable team/organization management |
-| `ACCESS_CONTROL_ENABLED`, `NEXT_PUBLIC_ACCESS_CONTROL_ENABLED` | Permission groups for access restrictions |
 | `SSO_ENABLED`, `NEXT_PUBLIC_SSO_ENABLED` | Single Sign-On with SAML/OIDC |
 | `CREDENTIAL_SETS_ENABLED`, `NEXT_PUBLIC_CREDENTIAL_SETS_ENABLED` | Polling Groups for email triggers |
 
-### Organization Management
-
-When billing is disabled, use the Admin API to manage organizations:
-
-```bash
-# Create an organization
-curl -X POST https://your-instance/api/v1/admin/organizations \
-  -H "x-admin-key: YOUR_ADMIN_API_KEY" \
-  -H "Content-Type: application/json" \
-  -d '{"name": "My Organization", "ownerId": "user-id-here"}'
-
-# Add a member
-curl -X POST https://your-instance/api/v1/admin/organizations/{orgId}/members \
-  -H "x-admin-key: YOUR_ADMIN_API_KEY" \
-  -H "Content-Type: application/json" \
-  -d '{"userId": "user-id-here", "role": "admin"}'
-```
-
-### Notes
-
-- Enabling `ACCESS_CONTROL_ENABLED` automatically enables organizations, as access control requires organization membership.
-- BYOK is only available on hosted Sim Studio. Self-hosted deployments configure AI provider keys directly via environment variables.
+<Callout type="warn">
+  BYOK is only available on hosted Sim Studio. Self-hosted deployments configure AI provider keys directly via environment variables.
+</Callout>

apps/docs/content/docs/en/execution/form.mdx

@@ -1,136 +0,0 @@
----
-title: Form Deployment
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-
-Deploy your workflow as an embeddable form that users can fill out on your website or share via link. Form submissions trigger your workflow with the `form` trigger type.
-
-## Overview
-
-Form deployment turns your workflow's Input Format into a responsive form that can be:
-- Shared via a direct link (e.g., `https://sim.ai/form/my-survey`)
-- Embedded in any website using an iframe
-
-When a user submits the form, it triggers your workflow with the form data.
-
-<Callout type="info">
-Forms derive their fields from your workflow's Start block Input Format. Each field becomes a form input with the appropriate type.
-</Callout>
-
-## Creating a Form
-
-1. Open your workflow and click **Deploy**
-2. Select the **Form** tab
-3. Configure:
-   - **URL**: Unique identifier (e.g., `contact-form` → `sim.ai/form/contact-form`)
-   - **Title**: Form heading
-   - **Description**: Optional subtitle
-   - **Form Fields**: Customize labels and descriptions for each field
-   - **Authentication**: Public, password-protected, or email whitelist
-   - **Thank You Message**: Shown after submission
-4. Click **Launch**
-
-## Field Type Mapping
-
-| Input Format Type | Form Field |
-|------------------|------------|
-| `string` | Text input |
-| `number` | Number input |
-| `boolean` | Toggle switch |
-| `object` | JSON editor |
-| `array` | JSON array editor |
-| `files` | File upload |
-
-## Access Control
-
-| Mode | Description |
-|------|-------------|
-| **Public** | Anyone with the link can submit |
-| **Password** | Users must enter a password |
-| **Email Whitelist** | Only specified emails/domains can submit |
-
-For email whitelist:
-- Exact: `user@example.com`
-- Domain: `@example.com` (all emails from domain)
-
-## Embedding
-
-### Direct Link
-
-```
-https://sim.ai/form/your-identifier
-```
-
-### Iframe
-
-```html
-<iframe
-  src="https://sim.ai/form/your-identifier"
-  width="100%"
-  height="600"
-  frameborder="0"
-  title="Form"
-></iframe>
-```
-
-## API Submission
-
-Submit forms programmatically:
-
-<Tabs items={['cURL', 'TypeScript']}>
-  <Tab value="cURL">
-```bash
-curl -X POST https://sim.ai/api/form/your-identifier \
-  -H "Content-Type: application/json" \
-  -d '{
-    "formData": {
-      "name": "John Doe",
-      "email": "john@example.com"
-    }
-  }'
-```
-  </Tab>
-  <Tab value="TypeScript">
-```typescript
-const response = await fetch('https://sim.ai/api/form/your-identifier', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    formData: {
-      name: 'John Doe',
-      email: 'john@example.com'
-    }
-  })
-});
-
-const result = await response.json();
-// { success: true, data: { executionId: '...' } }
-```
-  </Tab>
-</Tabs>
-
-### Protected Forms
-
-For password-protected forms:
-```bash
-curl -X POST https://sim.ai/api/form/your-identifier \
-  -H "Content-Type: application/json" \
-  -d '{ "password": "secret", "formData": { "name": "John" } }'
-```
-
-For email-protected forms:
-```bash
-curl -X POST https://sim.ai/api/form/your-identifier \
-  -H "Content-Type: application/json" \
-  -d '{ "email": "allowed@example.com", "formData": { "name": "John" } }'
-```
-
-## Troubleshooting
-
-**"No input fields configured"** - Add Input Format fields to your Start block.
-
-**Form not loading in iframe** - Check your site's CSP allows iframes from `sim.ai`.
-
-**Submissions failing** - Verify the identifier is correct and required fields are filled.

apps/docs/content/docs/en/execution/meta.json

@@ -1,3 +1,3 @@
 {
-  "pages": ["index", "basics", "api", "form", "logging", "costs"]
+  "pages": ["index", "basics", "api", "logging", "costs"]
 }

apps/docs/content/docs/en/triggers/start.mdx

@@ -44,7 +44,7 @@ Reference structured values downstream with expressions such as <code>&lt;start.
 
 ## How it behaves per entry point
 
-<Tabs items={['Editor run', 'Deploy to API', 'Deploy to chat', 'Deploy to form']}>
+<Tabs items={['Editor run', 'Deploy to API', 'Deploy to chat']}>
   <Tab>
     When you click <strong>Run</strong> in the editor, the Start block renders the Input Format as a form. Default values make it easy to retest without retyping data. Submitting the form triggers the workflow immediately and the values become available on <code>&lt;start.fieldName&gt;</code> (for example <code>&lt;start.sampleField&gt;</code>).
 
@@ -64,13 +64,6 @@ Reference structured values downstream with expressions such as <code>&lt;start.
 
     If you launch chat with additional structured context (for example from an embed), it merges into the corresponding <code>&lt;start.fieldName&gt;</code> outputs, keeping downstream blocks consistent with API and manual runs.
   </Tab>
-  <Tab>
-    Form deployments render the Input Format as a standalone, embeddable form page. Each field becomes a form input with appropriate UI controls—text inputs for strings, number inputs for numbers, toggle switches for booleans, and file upload zones for files.
-
-    When a user submits the form, values become available on <code>&lt;start.fieldName&gt;</code> just like other entry points. The workflow executes with trigger type <code>form</code>, and submitters see a customizable thank-you message upon completion.
-
-    Forms can be embedded via iframe or shared as direct links, making them ideal for surveys, contact forms, and data collection workflows.
-  </Tab>
 </Tabs>
 
 ## Referencing Start data downstream

apps/sim/app/(auth)/components/branded-button.tsx

@@ -1,100 +0,0 @@
-'use client'
-
-import { forwardRef, useState } from 'react'
-import { ArrowRight, ChevronRight, Loader2 } from 'lucide-react'
-import { Button, type ButtonProps as EmcnButtonProps } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
-
-export interface BrandedButtonProps extends Omit<EmcnButtonProps, 'variant' | 'size'> {
-  /** Shows loading spinner and disables button */
-  loading?: boolean
-  /** Text to show when loading (appends "..." automatically) */
-  loadingText?: string
-  /** Show arrow animation on hover (default: true) */
-  showArrow?: boolean
-  /** Make button full width (default: true) */
-  fullWidth?: boolean
-}
-
-/**
- * Branded button for auth and status pages.
- * Automatically detects whitelabel customization and applies appropriate styling.
- *
- * @example
- * ```tsx
- * // Primary branded button with arrow
- * <BrandedButton onClick={handleSubmit}>Sign In</BrandedButton>
- *
- * // Loading state
- * <BrandedButton loading loadingText="Signing in">Sign In</BrandedButton>
- *
- * // Without arrow animation
- * <BrandedButton showArrow={false}>Continue</BrandedButton>
- * ```
- */
-export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
-  (
-    {
-      children,
-      loading = false,
-      loadingText,
-      showArrow = true,
-      fullWidth = true,
-      className,
-      disabled,
-      onMouseEnter,
-      onMouseLeave,
-      ...props
-    },
-    ref
-  ) => {
-    const buttonClass = useBrandedButtonClass()
-    const [isHovered, setIsHovered] = useState(false)
-
-    const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
-      setIsHovered(true)
-      onMouseEnter?.(e)
-    }
-
-    const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
-      setIsHovered(false)
-      onMouseLeave?.(e)
-    }
-
-    return (
-      <Button
-        ref={ref}
-        variant='branded'
-        size='branded'
-        disabled={disabled || loading}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        className={cn(buttonClass, 'group', fullWidth && 'w-full', className)}
-        {...props}
-      >
-        {loading ? (
-          <span className='flex items-center gap-2'>
-            <Loader2 className='h-4 w-4 animate-spin' />
-            {loadingText ? `${loadingText}...` : children}
-          </span>
-        ) : showArrow ? (
-          <span className='flex items-center gap-1'>
-            {children}
-            <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-              {isHovered ? (
-                <ArrowRight className='h-4 w-4' aria-hidden='true' />
-              ) : (
-                <ChevronRight className='h-4 w-4' aria-hidden='true' />
-              )}
-            </span>
-          </span>
-        ) : (
-          children
-        )}
-      </Button>
-    )
-  }
-)
-
-BrandedButton.displayName = 'BrandedButton'

apps/sim/app/(auth)/components/sso-login-button.tsx

@@ -34,7 +34,7 @@ export function SSOLoginButton({
   }
 
   const primaryBtnClasses = cn(
-    primaryClassName || 'branded-button-gradient',
+    primaryClassName || 'auth-button-gradient',
     'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
   )
 

apps/sim/app/(auth)/components/status-page-layout.tsx

@@ -1,74 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import Nav from '@/app/(landing)/components/nav/nav'
-import { SupportFooter } from './support-footer'
-
-export interface StatusPageLayoutProps {
-  /** Page title displayed prominently */
-  title: string
-  /** Description text below the title */
-  description: string | ReactNode
-  /** Content to render below the title/description (usually buttons) */
-  children?: ReactNode
-  /** Whether to show the support footer (default: true) */
-  showSupportFooter?: boolean
-  /** Whether to hide the nav bar (useful for embedded forms) */
-  hideNav?: boolean
-}
-
-/**
- * Unified layout for status/error pages (404, form unavailable, chat error, etc.).
- * Uses AuthBackground and Nav for consistent styling with auth pages.
- *
- * @example
- * ```tsx
- * <StatusPageLayout
- *   title="Page Not Found"
- *   description="The page you're looking for doesn't exist."
- * >
- *   <BrandedButton onClick={() => router.push('/')}>Return to Home</BrandedButton>
- * </StatusPageLayout>
- * ```
- */
-export function StatusPageLayout({
-  title,
-  description,
-  children,
-  showSupportFooter = true,
-  hideNav = false,
-}: StatusPageLayoutProps) {
-  return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        {!hideNav && <Nav hideAuthButtons={true} variant='auth' />}
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>
-            <div className='flex flex-col items-center justify-center'>
-              <div className='space-y-1 text-center'>
-                <h1
-                  className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
-                >
-                  {title}
-                </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
-                  {description}
-                </p>
-              </div>
-
-              {children && (
-                <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
-                  {children}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        {showSupportFooter && <SupportFooter position='absolute' />}
-      </main>
-    </AuthBackground>
-  )
-}

apps/sim/app/(auth)/components/support-footer.tsx

@@ -1,40 +0,0 @@
-'use client'
-
-import { useBrandConfig } from '@/lib/branding/branding'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-
-export interface SupportFooterProps {
-  /** Position style - 'fixed' for pages without AuthLayout, 'absolute' for pages with AuthLayout */
-  position?: 'fixed' | 'absolute'
-}
-
-/**
- * Support footer component for auth and status pages.
- * Displays a "Need help? Contact support" link using branded support email.
- *
- * @example
- * ```tsx
- * // Fixed position (for standalone pages)
- * <SupportFooter />
- *
- * // Absolute position (for pages using AuthLayout)
- * <SupportFooter position="absolute" />
- * ```
- */
-export function SupportFooter({ position = 'fixed' }: SupportFooterProps) {
-  const brandConfig = useBrandConfig()
-
-  return (
-    <div
-      className={`${inter.className} auth-text-muted right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed ${position}`}
-    >
-      Need help?{' '}
-      <a
-        href={`mailto:${brandConfig.supportEmail}`}
-        className='auth-link underline-offset-4 transition hover:underline'
-      >
-        Contact support
-      </a>
-    </div>
-  )
-}

apps/sim/app/(auth)/login/login-form.tsx

@@ -105,7 +105,7 @@ export default function LoginPage({
   const [password, setPassword] = useState('')
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
-  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [callbackUrl, setCallbackUrl] = useState('/workspace')
@@ -146,9 +146,9 @@ export default function LoginPage({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('branded-button-custom')
+        setButtonClass('auth-button-custom')
       } else {
-        setButtonClass('branded-button-gradient')
+        setButtonClass('auth-button-gradient')
       }
     }
 

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -27,7 +27,7 @@ export function RequestResetForm({
   statusMessage,
   className,
 }: RequestResetFormProps) {
-  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   useEffect(() => {
@@ -36,9 +36,9 @@ export function RequestResetForm({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('branded-button-custom')
+        setButtonClass('auth-button-custom')
       } else {
-        setButtonClass('branded-button-gradient')
+        setButtonClass('auth-button-gradient')
       }
     }
 
@@ -138,7 +138,7 @@ export function SetNewPasswordForm({
   const [validationMessage, setValidationMessage] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   useEffect(() => {
@@ -147,9 +147,9 @@ export function SetNewPasswordForm({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('branded-button-custom')
+        setButtonClass('auth-button-custom')
       } else {
-        setButtonClass('branded-button-gradient')
+        setButtonClass('auth-button-gradient')
       }
     }
 

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -95,7 +95,7 @@ function SignupFormContent({
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
   const [redirectUrl, setRedirectUrl] = useState('')
   const [isInviteFlow, setIsInviteFlow] = useState(false)
-  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [name, setName] = useState('')
@@ -132,9 +132,9 @@ function SignupFormContent({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('branded-button-custom')
+        setButtonClass('auth-button-custom')
       } else {
-        setButtonClass('branded-button-gradient')
+        setButtonClass('auth-button-gradient')
       }
     }
 

apps/sim/app/(auth)/sso/sso-form.tsx

@@ -57,7 +57,7 @@ export default function SSOForm() {
   const [email, setEmail] = useState('')
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
-  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const [callbackUrl, setCallbackUrl] = useState('/workspace')
 
   useEffect(() => {
@@ -96,9 +96,9 @@ export default function SSOForm() {
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('branded-button-custom')
+        setButtonClass('auth-button-custom')
       } else {
-        setButtonClass('branded-button-gradient')
+        setButtonClass('auth-button-gradient')
       }
     }
 

apps/sim/app/(auth)/verify/verify-content.tsx

@@ -58,7 +58,7 @@ function VerificationForm({
     setCountdown(30)
   }
 
-  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
 
   useEffect(() => {
     const checkCustomBrand = () => {
@@ -66,9 +66,9 @@ function VerificationForm({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('branded-button-custom')
+        setButtonClass('auth-button-custom')
       } else {
-        setButtonClass('branded-button-gradient')
+        setButtonClass('auth-button-gradient')
       }
     }
 

apps/sim/app/(landing)/studio/head.tsx

@@ -0,0 +1,13 @@
+export default function Head() {
+  return (
+    <>
+      <link rel='canonical' href='https://sim.ai/studio' />
+      <link
+        rel='alternate'
+        type='application/rss+xml'
+        title='Sim Studio'
+        href='https://sim.ai/studio/rss.xml'
+      />
+    </>
+  )
+}

apps/sim/app/_shell/providers/theme-provider.tsx

@@ -22,13 +22,12 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     pathname.startsWith('/changelog') ||
     pathname.startsWith('/chat') ||
     pathname.startsWith('/studio') ||
-    pathname.startsWith('/resume') ||
-    pathname.startsWith('/form')
+    pathname.startsWith('/resume')
 
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='dark'
+      defaultTheme='system'
       enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'

apps/sim/app/_styles/globals.css

@@ -587,25 +587,27 @@ input[type="search"]::-ms-clear {
     animation: placeholder-pulse 1.5s ease-in-out infinite;
   }
 
-  .branded-button-gradient {
-    background: linear-gradient(to bottom, #8357ff, #6f3dfa) !important;
-    border-color: #6f3dfa !important;
-    box-shadow: inset 0 2px 4px 0 #9b77ff !important;
+  .auth-button-gradient {
+    background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
+    border-color: var(--brand-400) !important;
+    box-shadow: inset 0 2px 4px 0 var(--brand-400) !important;
   }
 
-  .branded-button-gradient:hover {
-    background: linear-gradient(to bottom, #8357ff, #6f3dfa) !important;
+  .auth-button-gradient:hover {
+    background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
     opacity: 0.9;
   }
 
-  .branded-button-custom {
+  .auth-button-custom {
     background: var(--brand-primary-hex) !important;
     border-color: var(--brand-primary-hex) !important;
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
   }
 
-  .branded-button-custom:hover {
+  .auth-button-custom:hover {
     background: var(--brand-primary-hover-hex) !important;
     border-color: var(--brand-primary-hover-hex) !important;
+    opacity: 1;
   }
 
   /**

apps/sim/app/api/chat/[identifier]/otp/route.ts

@@ -7,11 +7,10 @@ import type { NextRequest } from 'next/server'
 import { z } from 'zod'
 import { renderOTPEmail } from '@/components/emails'
 import { getRedisClient } from '@/lib/core/config/redis'
-import { addCorsHeaders } from '@/lib/core/security/deployment'
 import { getStorageMethod } from '@/lib/core/storage'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { sendEmail } from '@/lib/messaging/email/mailer'
-import { setChatAuthCookie } from '@/app/api/chat/utils'
+import { addCorsHeaders, setChatAuthCookie } from '@/app/api/chat/utils'
 import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
 
 const logger = createLogger('ChatOtpAPI')

apps/sim/app/api/chat/[identifier]/route.test.ts

@@ -3,7 +3,6 @@
  *
  * @vitest-environment node
  */
-import { loggerMock } from '@sim/testing'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMockRequest } from '@/app/api/__test-utils__/utils'
 
@@ -121,8 +120,14 @@ describe('Chat Identifier API Route', () => {
       validateAuthToken: vi.fn().mockReturnValue(true),
     }))
 
-    // Mock logger - use loggerMock from @sim/testing
-    vi.doMock('@sim/logger', () => loggerMock)
+    vi.doMock('@sim/logger', () => ({
+      createLogger: vi.fn().mockReturnValue({
+        debug: vi.fn(),
+        info: vi.fn(),
+        warn: vi.fn(),
+        error: vi.fn(),
+      }),
+    }))
 
     vi.doMock('@sim/db', () => {
       const mockSelect = vi.fn().mockImplementation((fields) => {

apps/sim/app/api/chat/[identifier]/route.ts

@@ -5,12 +5,16 @@ import { createLogger } from '@sim/logger'
 import { eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
-import { addCorsHeaders, validateAuthToken } from '@/lib/core/security/deployment'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { preprocessExecution } from '@/lib/execution/preprocessing'
 import { LoggingSession } from '@/lib/logs/execution/logging-session'
 import { ChatFiles } from '@/lib/uploads'
-import { setChatAuthCookie, validateChatAuth } from '@/app/api/chat/utils'
+import {
+  addCorsHeaders,
+  setChatAuthCookie,
+  validateAuthToken,
+  validateChatAuth,
+} from '@/app/api/chat/utils'
 import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
 
 const logger = createLogger('ChatIdentifierAPI')

apps/sim/app/api/chat/manage/[id]/route.test.ts

@@ -1,10 +1,9 @@
+import { NextRequest } from 'next/server'
 /**
  * Tests for chat edit API route
  *
  * @vitest-environment node
  */
-import { loggerMock } from '@sim/testing'
-import { NextRequest } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 vi.mock('@/lib/core/config/feature-flags', () => ({
@@ -51,8 +50,14 @@ describe('Chat Edit API Route', () => {
       chat: { id: 'id', identifier: 'identifier', userId: 'userId' },
     }))
 
-    // Mock logger - use loggerMock from @sim/testing
-    vi.doMock('@sim/logger', () => loggerMock)
+    vi.doMock('@sim/logger', () => ({
+      createLogger: vi.fn().mockReturnValue({
+        info: vi.fn(),
+        error: vi.fn(),
+        warn: vi.fn(),
+        debug: vi.fn(),
+      }),
+    }))
 
     vi.doMock('@/app/api/workflows/utils', () => ({
       createSuccessResponse: mockCreateSuccessResponse.mockImplementation((data) => {

apps/sim/app/api/chat/utils.test.ts

@@ -1,4 +1,3 @@
-import { databaseMock, loggerMock } from '@sim/testing'
 import type { NextResponse } from 'next/server'
 /**
  * Tests for chat API utils
@@ -6,9 +5,14 @@ import type { NextResponse } from 'next/server'
  * @vitest-environment node
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { env } from '@/lib/core/config/env'
 
-vi.mock('@sim/db', () => databaseMock)
-vi.mock('@sim/logger', () => loggerMock)
+vi.mock('@sim/db', () => ({
+  db: {
+    select: vi.fn(),
+    update: vi.fn(),
+  },
+}))
 
 vi.mock('@/lib/logs/execution/logging-session', () => ({
   LoggingSession: vi.fn().mockImplementation(() => ({
@@ -48,10 +52,19 @@ vi.mock('@/lib/core/config/feature-flags', () => ({
 
 describe('Chat API Utils', () => {
   beforeEach(() => {
+    vi.doMock('@sim/logger', () => ({
+      createLogger: vi.fn().mockReturnValue({
+        info: vi.fn(),
+        error: vi.fn(),
+        warn: vi.fn(),
+        debug: vi.fn(),
+      }),
+    }))
+
     vi.stubGlobal('process', {
       ...process,
       env: {
-        ...process.env,
+        ...env,
         NODE_ENV: 'development',
       },
     })
@@ -62,8 +75,8 @@ describe('Chat API Utils', () => {
   })
 
   describe('Auth token utils', () => {
-    it.concurrent('should validate auth tokens', async () => {
-      const { validateAuthToken } = await import('@/lib/core/security/deployment')
+    it('should validate auth tokens', async () => {
+      const { validateAuthToken } = await import('@/app/api/chat/utils')
 
       const chatId = 'test-chat-id'
       const type = 'password'
@@ -79,8 +92,8 @@ describe('Chat API Utils', () => {
       expect(isInvalidChat).toBe(false)
     })
 
-    it.concurrent('should reject expired tokens', async () => {
-      const { validateAuthToken } = await import('@/lib/core/security/deployment')
+    it('should reject expired tokens', async () => {
+      const { validateAuthToken } = await import('@/app/api/chat/utils')
 
       const chatId = 'test-chat-id'
       const expiredToken = Buffer.from(
@@ -123,7 +136,7 @@ describe('Chat API Utils', () => {
 
   describe('CORS handling', () => {
     it('should add CORS headers for localhost in development', async () => {
-      const { addCorsHeaders } = await import('@/lib/core/security/deployment')
+      const { addCorsHeaders } = await import('@/app/api/chat/utils')
 
       const mockRequest = {
         headers: {
@@ -330,7 +343,7 @@ describe('Chat API Utils', () => {
   })
 
   describe('Execution Result Processing', () => {
-    it.concurrent('should process logs regardless of overall success status', () => {
+    it('should process logs regardless of overall success status', () => {
       const executionResult = {
         success: false,
         output: {},
@@ -368,7 +381,7 @@ describe('Chat API Utils', () => {
       expect(executionResult.logs[1].error).toBe('Agent 2 failed')
     })
 
-    it.concurrent('should handle ExecutionResult vs StreamingExecution types correctly', () => {
+    it('should handle ExecutionResult vs StreamingExecution types correctly', () => {
       const executionResult = {
         success: true,
         output: { content: 'test' },

apps/sim/app/api/chat/utils.ts

@@ -1,25 +1,17 @@
+import { createHash } from 'crypto'
 import { db } from '@sim/db'
 import { chat, workflow } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { eq } from 'drizzle-orm'
 import type { NextRequest, NextResponse } from 'next/server'
-import {
-  isEmailAllowed,
-  setDeploymentAuthCookie,
-  validateAuthToken,
-} from '@/lib/core/security/deployment'
+import { isDev } from '@/lib/core/config/feature-flags'
 import { decryptSecret } from '@/lib/core/security/encryption'
 import { hasAdminPermission } from '@/lib/workspaces/permissions/utils'
 
 const logger = createLogger('ChatAuthUtils')
 
-export function setChatAuthCookie(
-  response: NextResponse,
-  chatId: string,
-  type: string,
-  encryptedPassword?: string | null
-): void {
-  setDeploymentAuthCookie(response, 'chat', chatId, type, encryptedPassword)
+function hashPassword(encryptedPassword: string): string {
+  return createHash('sha256').update(encryptedPassword).digest('hex').substring(0, 8)
 }
 
 /**
@@ -90,6 +82,77 @@ export async function checkChatAccess(
   return { hasAccess: false }
 }
 
+function encryptAuthToken(chatId: string, type: string, encryptedPassword?: string | null): string {
+  const pwHash = encryptedPassword ? hashPassword(encryptedPassword) : ''
+  return Buffer.from(`${chatId}:${type}:${Date.now()}:${pwHash}`).toString('base64')
+}
+
+export function validateAuthToken(
+  token: string,
+  chatId: string,
+  encryptedPassword?: string | null
+): boolean {
+  try {
+    const decoded = Buffer.from(token, 'base64').toString()
+    const parts = decoded.split(':')
+    const [storedId, _type, timestamp, storedPwHash] = parts
+
+    if (storedId !== chatId) {
+      return false
+    }
+
+    const createdAt = Number.parseInt(timestamp)
+    const now = Date.now()
+    const expireTime = 24 * 60 * 60 * 1000
+
+    if (now - createdAt > expireTime) {
+      return false
+    }
+
+    if (encryptedPassword) {
+      const currentPwHash = hashPassword(encryptedPassword)
+      if (storedPwHash !== currentPwHash) {
+        return false
+      }
+    }
+
+    return true
+  } catch (_e) {
+    return false
+  }
+}
+
+export function setChatAuthCookie(
+  response: NextResponse,
+  chatId: string,
+  type: string,
+  encryptedPassword?: string | null
+): void {
+  const token = encryptAuthToken(chatId, type, encryptedPassword)
+  response.cookies.set({
+    name: `chat_auth_${chatId}`,
+    value: token,
+    httpOnly: true,
+    secure: !isDev,
+    sameSite: 'lax',
+    path: '/',
+    maxAge: 60 * 60 * 24,
+  })
+}
+
+export function addCorsHeaders(response: NextResponse, request: NextRequest) {
+  const origin = request.headers.get('origin') || ''
+
+  if (isDev && origin.includes('localhost')) {
+    response.headers.set('Access-Control-Allow-Origin', origin)
+    response.headers.set('Access-Control-Allow-Credentials', 'true')
+    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With')
+  }
+
+  return response
+}
+
 export async function validateChatAuth(
   requestId: string,
   deployment: any,
@@ -168,7 +231,12 @@ export async function validateChatAuth(
 
       const allowedEmails = deployment.allowedEmails || []
 
-      if (isEmailAllowed(email, allowedEmails)) {
+      if (allowedEmails.includes(email)) {
+        return { authorized: false, error: 'otp_required' }
+      }
+
+      const domain = email.split('@')[1]
+      if (domain && allowedEmails.some((allowed: string) => allowed === `@${domain}`)) {
         return { authorized: false, error: 'otp_required' }
       }
 
@@ -202,7 +270,12 @@ export async function validateChatAuth(
 
         const allowedEmails = deployment.allowedEmails || []
 
-        if (isEmailAllowed(email, allowedEmails)) {
+        if (allowedEmails.includes(email)) {
+          return { authorized: true }
+        }
+
+        const domain = email.split('@')[1]
+        if (domain && allowedEmails.some((allowed: string) => allowed === `@${domain}`)) {
           return { authorized: true }
         }
 
@@ -223,7 +296,12 @@ export async function validateChatAuth(
 
       const allowedEmails = deployment.allowedEmails || []
 
-      if (isEmailAllowed(userEmail, allowedEmails)) {
+      if (allowedEmails.includes(userEmail)) {
+        return { authorized: true }
+      }
+
+      const domain = userEmail.split('@')[1]
+      if (domain && allowedEmails.some((allowed: string) => allowed === `@${domain}`)) {
         return { authorized: true }
       }
 

apps/sim/app/api/copilot/chat/route.ts

@@ -802,29 +802,49 @@ export async function POST(req: NextRequest) {
               toolNames: toolCalls.map((tc) => tc?.name).filter(Boolean),
             })
 
-            // NOTE: Messages are saved by the client via update-messages endpoint with full contentBlocks.
-            // Server only updates conversationId here to avoid overwriting client's richer save.
+            // Save messages to database after streaming completes (including aborted messages)
             if (currentChat) {
+              const updatedMessages = [...conversationHistory, userMessage]
+
+              // Save assistant message if there's any content or tool calls (even partial from abort)
+              if (assistantContent.trim() || toolCalls.length > 0) {
+                const assistantMessage = {
+                  id: crypto.randomUUID(),
+                  role: 'assistant',
+                  content: assistantContent,
+                  timestamp: new Date().toISOString(),
+                  ...(toolCalls.length > 0 && { toolCalls }),
+                }
+                updatedMessages.push(assistantMessage)
+                logger.info(
+                  `[${tracker.requestId}] Saving assistant message with content (${assistantContent.length} chars) and ${toolCalls.length} tool calls`
+                )
+              } else {
+                logger.info(
+                  `[${tracker.requestId}] No assistant content or tool calls to save (aborted before response)`
+                )
+              }
+
               // Persist only a safe conversationId to avoid continuing from a state that expects tool outputs
               const previousConversationId = currentChat?.conversationId as string | undefined
               const responseId = lastSafeDoneResponseId || previousConversationId || undefined
 
-              if (responseId) {
-                await db
-                  .update(copilotChats)
-                  .set({
-                    updatedAt: new Date(),
-                    conversationId: responseId,
-                  })
-                  .where(eq(copilotChats.id, actualChatId!))
+              // Update chat in database immediately (without title)
+              await db
+                .update(copilotChats)
+                .set({
+                  messages: updatedMessages,
+                  updatedAt: new Date(),
+                  ...(responseId ? { conversationId: responseId } : {}),
+                })
+                .where(eq(copilotChats.id, actualChatId!))
 
-                logger.info(
-                  `[${tracker.requestId}] Updated conversationId for chat ${actualChatId}`,
-                  {
-                    updatedConversationId: responseId,
-                  }
-                )
-              }
+              logger.info(`[${tracker.requestId}] Updated chat ${actualChatId} with new messages`, {
+                messageCount: updatedMessages.length,
+                savedUserMessage: true,
+                savedAssistantMessage: assistantContent.trim().length > 0,
+                updatedConversationId: responseId || null,
+              })
             }
           } catch (error) {
             logger.error(`[${tracker.requestId}] Error processing stream:`, error)

apps/sim/app/api/copilot/chat/update-messages/route.ts

@@ -17,30 +17,25 @@ const logger = createLogger('CopilotChatUpdateAPI')
 const UpdateMessagesSchema = z.object({
   chatId: z.string(),
   messages: z.array(
-    z
-      .object({
-        id: z.string(),
-        role: z.enum(['user', 'assistant', 'system']),
-        content: z.string(),
-        timestamp: z.string(),
-        toolCalls: z.array(z.any()).optional(),
-        contentBlocks: z.array(z.any()).optional(),
-        fileAttachments: z
-          .array(
-            z.object({
-              id: z.string(),
-              key: z.string(),
-              filename: z.string(),
-              media_type: z.string(),
-              size: z.number(),
-            })
-          )
-          .optional(),
-        contexts: z.array(z.any()).optional(),
-        citations: z.array(z.any()).optional(),
-        errorType: z.string().optional(),
-      })
-      .passthrough() // Preserve any additional fields for future compatibility
+    z.object({
+      id: z.string(),
+      role: z.enum(['user', 'assistant']),
+      content: z.string(),
+      timestamp: z.string(),
+      toolCalls: z.array(z.any()).optional(),
+      contentBlocks: z.array(z.any()).optional(),
+      fileAttachments: z
+        .array(
+          z.object({
+            id: z.string(),
+            key: z.string(),
+            filename: z.string(),
+            media_type: z.string(),
+            size: z.number(),
+          })
+        )
+        .optional(),
+    })
   ),
   planArtifact: z.string().nullable().optional(),
   config: z
@@ -62,33 +57,8 @@ export async function POST(req: NextRequest) {
     }
 
     const body = await req.json()
-
-    // Debug: Log what we received
-    const lastMsg = body.messages?.[body.messages.length - 1]
-    if (lastMsg?.role === 'assistant') {
-      logger.info(`[${tracker.requestId}] Received messages to save`, {
-        messageCount: body.messages?.length,
-        lastMsgId: lastMsg.id,
-        lastMsgContentLength: lastMsg.content?.length || 0,
-        lastMsgContentBlockCount: lastMsg.contentBlocks?.length || 0,
-        lastMsgContentBlockTypes: lastMsg.contentBlocks?.map((b: any) => b?.type) || [],
-      })
-    }
-
     const { chatId, messages, planArtifact, config } = UpdateMessagesSchema.parse(body)
 
-    // Debug: Log what we're about to save
-    const lastMsgParsed = messages[messages.length - 1]
-    if (lastMsgParsed?.role === 'assistant') {
-      logger.info(`[${tracker.requestId}] Parsed messages to save`, {
-        messageCount: messages.length,
-        lastMsgId: lastMsgParsed.id,
-        lastMsgContentLength: lastMsgParsed.content?.length || 0,
-        lastMsgContentBlockCount: lastMsgParsed.contentBlocks?.length || 0,
-        lastMsgContentBlockTypes: lastMsgParsed.contentBlocks?.map((b: any) => b?.type) || [],
-      })
-    }
-
     // Verify that the chat belongs to the user
     const [chat] = await db
       .select()

apps/sim/app/api/copilot/context-usage/route.ts

@@ -0,0 +1,134 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { getCopilotModel } from '@/lib/copilot/config'
+import { SIM_AGENT_API_URL_DEFAULT } from '@/lib/copilot/constants'
+import type { CopilotProviderConfig } from '@/lib/copilot/types'
+import { env } from '@/lib/core/config/env'
+
+const logger = createLogger('ContextUsageAPI')
+
+const SIM_AGENT_API_URL = env.SIM_AGENT_API_URL || SIM_AGENT_API_URL_DEFAULT
+
+const ContextUsageRequestSchema = z.object({
+  chatId: z.string(),
+  model: z.string(),
+  workflowId: z.string(),
+  provider: z.any().optional(),
+})
+
+/**
+ * POST /api/copilot/context-usage
+ * Fetch context usage from sim-agent API
+ */
+export async function POST(req: NextRequest) {
+  try {
+    logger.info('[Context Usage API] Request received')
+
+    const session = await getSession()
+    if (!session?.user?.id) {
+      logger.warn('[Context Usage API] No session/user ID')
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await req.json()
+    logger.info('[Context Usage API] Request body', body)
+
+    const parsed = ContextUsageRequestSchema.safeParse(body)
+
+    if (!parsed.success) {
+      logger.warn('[Context Usage API] Invalid request body', parsed.error.errors)
+      return NextResponse.json(
+        { error: 'Invalid request body', details: parsed.error.errors },
+        { status: 400 }
+      )
+    }
+
+    const { chatId, model, workflowId, provider } = parsed.data
+    const userId = session.user.id // Get userId from session, not from request
+
+    logger.info('[Context Usage API] Request validated', { chatId, model, userId, workflowId })
+
+    // Build provider config similar to chat route
+    let providerConfig: CopilotProviderConfig | undefined = provider
+    if (!providerConfig) {
+      const defaults = getCopilotModel('chat')
+      const modelToUse = env.COPILOT_MODEL || defaults.model
+      const providerEnv = env.COPILOT_PROVIDER as any
+
+      if (providerEnv) {
+        if (providerEnv === 'azure-openai') {
+          providerConfig = {
+            provider: 'azure-openai',
+            model: modelToUse,
+            apiKey: env.AZURE_OPENAI_API_KEY,
+            apiVersion: env.AZURE_OPENAI_API_VERSION,
+            endpoint: env.AZURE_OPENAI_ENDPOINT,
+          }
+        } else if (providerEnv === 'vertex') {
+          providerConfig = {
+            provider: 'vertex',
+            model: modelToUse,
+            apiKey: env.COPILOT_API_KEY,
+            vertexProject: env.VERTEX_PROJECT,
+            vertexLocation: env.VERTEX_LOCATION,
+          }
+        } else {
+          providerConfig = {
+            provider: providerEnv,
+            model: modelToUse,
+            apiKey: env.COPILOT_API_KEY,
+          }
+        }
+      }
+    }
+
+    // Call sim-agent API
+    const requestPayload = {
+      chatId,
+      model,
+      userId,
+      workflowId,
+      ...(providerConfig ? { provider: providerConfig } : {}),
+    }
+
+    logger.info('[Context Usage API] Calling sim-agent', {
+      url: `${SIM_AGENT_API_URL}/api/get-context-usage`,
+      payload: requestPayload,
+    })
+
+    const simAgentResponse = await fetch(`${SIM_AGENT_API_URL}/api/get-context-usage`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(env.COPILOT_API_KEY ? { 'x-api-key': env.COPILOT_API_KEY } : {}),
+      },
+      body: JSON.stringify(requestPayload),
+    })
+
+    logger.info('[Context Usage API] Sim-agent response', {
+      status: simAgentResponse.status,
+      ok: simAgentResponse.ok,
+    })
+
+    if (!simAgentResponse.ok) {
+      const errorText = await simAgentResponse.text().catch(() => '')
+      logger.warn('[Context Usage API] Sim agent request failed', {
+        status: simAgentResponse.status,
+        error: errorText,
+      })
+      return NextResponse.json(
+        { error: 'Failed to fetch context usage from sim-agent' },
+        { status: simAgentResponse.status }
+      )
+    }
+
+    const data = await simAgentResponse.json()
+    logger.info('[Context Usage API] Sim-agent data received', data)
+    return NextResponse.json(data)
+  } catch (error) {
+    logger.error('Error fetching context usage:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}

apps/sim/app/api/environment/route.ts

@@ -7,7 +7,7 @@ import { z } from 'zod'
 import { getSession } from '@/lib/auth'
 import { decryptSecret, encryptSecret } from '@/lib/core/security/encryption'
 import { generateRequestId } from '@/lib/core/utils/request'
-import type { EnvironmentVariable } from '@/stores/settings/environment'
+import type { EnvironmentVariable } from '@/stores/settings/environment/types'
 
 const logger = createLogger('EnvironmentAPI')
 

apps/sim/app/api/form/[identifier]/route.ts

@@ -1,414 +0,0 @@
-import { randomUUID } from 'crypto'
-import { db } from '@sim/db'
-import { form, workflow, workflowBlocks } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { addCorsHeaders, validateAuthToken } from '@/lib/core/security/deployment'
-import { generateRequestId } from '@/lib/core/utils/request'
-import { preprocessExecution } from '@/lib/execution/preprocessing'
-import { LoggingSession } from '@/lib/logs/execution/logging-session'
-import { createStreamingResponse } from '@/lib/workflows/streaming/streaming'
-import { setFormAuthCookie, validateFormAuth } from '@/app/api/form/utils'
-import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
-
-const logger = createLogger('FormIdentifierAPI')
-
-const formPostBodySchema = z.object({
-  formData: z.record(z.unknown()).optional(),
-  password: z.string().optional(),
-  email: z.string().email('Invalid email format').optional().or(z.literal('')),
-})
-
-export const dynamic = 'force-dynamic'
-export const runtime = 'nodejs'
-
-/**
- * Get the input format schema from the workflow's start block
- */
-async function getWorkflowInputSchema(workflowId: string): Promise<any[]> {
-  try {
-    const blocks = await db
-      .select()
-      .from(workflowBlocks)
-      .where(eq(workflowBlocks.workflowId, workflowId))
-
-    // Find the start block (starter or start_trigger type)
-    const startBlock = blocks.find(
-      (block) => block.type === 'starter' || block.type === 'start_trigger'
-    )
-
-    if (!startBlock) {
-      return []
-    }
-
-    // Extract inputFormat from subBlocks
-    const subBlocks = startBlock.subBlocks as Record<string, any> | null
-    if (!subBlocks?.inputFormat?.value) {
-      return []
-    }
-
-    return Array.isArray(subBlocks.inputFormat.value) ? subBlocks.inputFormat.value : []
-  } catch (error) {
-    logger.error('Error fetching workflow input schema:', error)
-    return []
-  }
-}
-
-export async function POST(
-  request: NextRequest,
-  { params }: { params: Promise<{ identifier: string }> }
-) {
-  const { identifier } = await params
-  const requestId = generateRequestId()
-
-  try {
-    logger.debug(`[${requestId}] Processing form submission for identifier: ${identifier}`)
-
-    let parsedBody
-    try {
-      const rawBody = await request.json()
-      const validation = formPostBodySchema.safeParse(rawBody)
-
-      if (!validation.success) {
-        const errorMessage = validation.error.errors
-          .map((err) => `${err.path.join('.')}: ${err.message}`)
-          .join(', ')
-        logger.warn(`[${requestId}] Validation error: ${errorMessage}`)
-        return addCorsHeaders(
-          createErrorResponse(`Invalid request body: ${errorMessage}`, 400),
-          request
-        )
-      }
-
-      parsedBody = validation.data
-    } catch (_error) {
-      return addCorsHeaders(createErrorResponse('Invalid request body', 400), request)
-    }
-
-    const deploymentResult = await db
-      .select({
-        id: form.id,
-        workflowId: form.workflowId,
-        userId: form.userId,
-        isActive: form.isActive,
-        authType: form.authType,
-        password: form.password,
-        allowedEmails: form.allowedEmails,
-        customizations: form.customizations,
-      })
-      .from(form)
-      .where(eq(form.identifier, identifier))
-      .limit(1)
-
-    if (deploymentResult.length === 0) {
-      logger.warn(`[${requestId}] Form not found for identifier: ${identifier}`)
-      return addCorsHeaders(createErrorResponse('Form not found', 404), request)
-    }
-
-    const deployment = deploymentResult[0]
-
-    if (!deployment.isActive) {
-      logger.warn(`[${requestId}] Form is not active: ${identifier}`)
-
-      const [workflowRecord] = await db
-        .select({ workspaceId: workflow.workspaceId })
-        .from(workflow)
-        .where(eq(workflow.id, deployment.workflowId))
-        .limit(1)
-
-      const workspaceId = workflowRecord?.workspaceId
-      if (!workspaceId) {
-        logger.warn(`[${requestId}] Cannot log: workflow ${deployment.workflowId} has no workspace`)
-        return addCorsHeaders(
-          createErrorResponse('This form is currently unavailable', 403),
-          request
-        )
-      }
-
-      const executionId = randomUUID()
-      const loggingSession = new LoggingSession(
-        deployment.workflowId,
-        executionId,
-        'form',
-        requestId
-      )
-
-      await loggingSession.safeStart({
-        userId: deployment.userId,
-        workspaceId,
-        variables: {},
-      })
-
-      await loggingSession.safeCompleteWithError({
-        error: {
-          message: 'This form is currently unavailable. The form has been disabled.',
-          stackTrace: undefined,
-        },
-        traceSpans: [],
-      })
-
-      return addCorsHeaders(createErrorResponse('This form is currently unavailable', 403), request)
-    }
-
-    const authResult = await validateFormAuth(requestId, deployment, request, parsedBody)
-    if (!authResult.authorized) {
-      return addCorsHeaders(
-        createErrorResponse(authResult.error || 'Authentication required', 401),
-        request
-      )
-    }
-
-    const { formData, password, email } = parsedBody
-
-    // If only authentication credentials provided (no form data), just return authenticated
-    if ((password || email) && !formData) {
-      const response = addCorsHeaders(createSuccessResponse({ authenticated: true }), request)
-      setFormAuthCookie(response, deployment.id, deployment.authType, deployment.password)
-      return response
-    }
-
-    if (!formData || Object.keys(formData).length === 0) {
-      return addCorsHeaders(createErrorResponse('No form data provided', 400), request)
-    }
-
-    const executionId = randomUUID()
-    const loggingSession = new LoggingSession(deployment.workflowId, executionId, 'form', requestId)
-
-    const preprocessResult = await preprocessExecution({
-      workflowId: deployment.workflowId,
-      userId: deployment.userId,
-      triggerType: 'form',
-      executionId,
-      requestId,
-      checkRateLimit: true,
-      checkDeployment: true,
-      loggingSession,
-    })
-
-    if (!preprocessResult.success) {
-      logger.warn(`[${requestId}] Preprocessing failed: ${preprocessResult.error?.message}`)
-      return addCorsHeaders(
-        createErrorResponse(
-          preprocessResult.error?.message || 'Failed to process request',
-          preprocessResult.error?.statusCode || 500
-        ),
-        request
-      )
-    }
-
-    const { actorUserId, workflowRecord } = preprocessResult
-    const workspaceOwnerId = actorUserId!
-    const workspaceId = workflowRecord?.workspaceId
-    if (!workspaceId) {
-      logger.error(`[${requestId}] Workflow ${deployment.workflowId} has no workspaceId`)
-      return addCorsHeaders(
-        createErrorResponse('Workflow has no associated workspace', 500),
-        request
-      )
-    }
-
-    try {
-      const workflowForExecution = {
-        id: deployment.workflowId,
-        userId: deployment.userId,
-        workspaceId,
-        isDeployed: workflowRecord?.isDeployed ?? false,
-        variables: (workflowRecord?.variables ?? {}) as Record<string, unknown>,
-      }
-
-      // Pass form data as the workflow input
-      const workflowInput = {
-        input: formData,
-        ...formData, // Spread form fields at top level for convenience
-      }
-
-      // Execute workflow using streaming (for consistency with chat)
-      const stream = await createStreamingResponse({
-        requestId,
-        workflow: workflowForExecution,
-        input: workflowInput,
-        executingUserId: workspaceOwnerId,
-        streamConfig: {
-          selectedOutputs: [],
-          isSecureMode: true,
-          workflowTriggerType: 'api', // Use 'api' type since form is similar
-        },
-        executionId,
-      })
-
-      // For forms, we don't stream back - we wait for completion and return success
-      // Consume the stream to wait for completion
-      const reader = stream.getReader()
-      let lastOutput: any = null
-
-      try {
-        while (true) {
-          const { done, value } = await reader.read()
-          if (done) break
-
-          // Parse SSE data if present
-          const text = new TextDecoder().decode(value)
-          const lines = text.split('\n')
-          for (const line of lines) {
-            if (line.startsWith('data: ')) {
-              try {
-                const data = JSON.parse(line.slice(6))
-                if (data.type === 'complete' || data.output) {
-                  lastOutput = data.output || data
-                }
-              } catch {
-                // Ignore parse errors
-              }
-            }
-          }
-        }
-      } finally {
-        reader.releaseLock()
-      }
-
-      logger.info(`[${requestId}] Form submission successful for ${identifier}`)
-
-      // Return success with customizations for thank you screen
-      const customizations = deployment.customizations as Record<string, any> | null
-      return addCorsHeaders(
-        createSuccessResponse({
-          success: true,
-          executionId,
-          thankYouTitle: customizations?.thankYouTitle || 'Thank you!',
-          thankYouMessage:
-            customizations?.thankYouMessage || 'Your response has been submitted successfully.',
-        }),
-        request
-      )
-    } catch (error: any) {
-      logger.error(`[${requestId}] Error processing form submission:`, error)
-      return addCorsHeaders(
-        createErrorResponse(error.message || 'Failed to process form submission', 500),
-        request
-      )
-    }
-  } catch (error: any) {
-    logger.error(`[${requestId}] Error processing form submission:`, error)
-    return addCorsHeaders(
-      createErrorResponse(error.message || 'Failed to process form submission', 500),
-      request
-    )
-  }
-}
-
-export async function GET(
-  request: NextRequest,
-  { params }: { params: Promise<{ identifier: string }> }
-) {
-  const { identifier } = await params
-  const requestId = generateRequestId()
-
-  try {
-    logger.debug(`[${requestId}] Fetching form info for identifier: ${identifier}`)
-
-    const deploymentResult = await db
-      .select({
-        id: form.id,
-        title: form.title,
-        description: form.description,
-        customizations: form.customizations,
-        isActive: form.isActive,
-        workflowId: form.workflowId,
-        authType: form.authType,
-        password: form.password,
-        allowedEmails: form.allowedEmails,
-        showBranding: form.showBranding,
-      })
-      .from(form)
-      .where(eq(form.identifier, identifier))
-      .limit(1)
-
-    if (deploymentResult.length === 0) {
-      logger.warn(`[${requestId}] Form not found for identifier: ${identifier}`)
-      return addCorsHeaders(createErrorResponse('Form not found', 404), request)
-    }
-
-    const deployment = deploymentResult[0]
-
-    if (!deployment.isActive) {
-      logger.warn(`[${requestId}] Form is not active: ${identifier}`)
-      return addCorsHeaders(createErrorResponse('This form is currently unavailable', 403), request)
-    }
-
-    // Get the workflow's input schema
-    const inputSchema = await getWorkflowInputSchema(deployment.workflowId)
-
-    const cookieName = `form_auth_${deployment.id}`
-    const authCookie = request.cookies.get(cookieName)
-
-    // If authenticated (via cookie), return full form config
-    if (
-      deployment.authType !== 'public' &&
-      authCookie &&
-      validateAuthToken(authCookie.value, deployment.id, deployment.password)
-    ) {
-      return addCorsHeaders(
-        createSuccessResponse({
-          id: deployment.id,
-          title: deployment.title,
-          description: deployment.description,
-          customizations: deployment.customizations,
-          authType: deployment.authType,
-          showBranding: deployment.showBranding,
-          inputSchema,
-        }),
-        request
-      )
-    }
-
-    // Check authentication requirement
-    const authResult = await validateFormAuth(requestId, deployment, request)
-    if (!authResult.authorized) {
-      // Return limited info for auth required forms
-      logger.info(
-        `[${requestId}] Authentication required for form: ${identifier}, type: ${deployment.authType}`
-      )
-      return addCorsHeaders(
-        NextResponse.json(
-          {
-            success: false,
-            error: authResult.error || 'Authentication required',
-            authType: deployment.authType,
-            title: deployment.title,
-            customizations: {
-              primaryColor: (deployment.customizations as any)?.primaryColor,
-              logoUrl: (deployment.customizations as any)?.logoUrl,
-            },
-          },
-          { status: 401 }
-        ),
-        request
-      )
-    }
-
-    return addCorsHeaders(
-      createSuccessResponse({
-        id: deployment.id,
-        title: deployment.title,
-        description: deployment.description,
-        customizations: deployment.customizations,
-        authType: deployment.authType,
-        showBranding: deployment.showBranding,
-        inputSchema,
-      }),
-      request
-    )
-  } catch (error: any) {
-    logger.error(`[${requestId}] Error fetching form info:`, error)
-    return addCorsHeaders(
-      createErrorResponse(error.message || 'Failed to fetch form information', 500),
-      request
-    )
-  }
-}
-
-export async function OPTIONS(request: NextRequest) {
-  return addCorsHeaders(new NextResponse(null, { status: 204 }), request)
-}

apps/sim/app/api/form/manage/[id]/route.ts

@@ -1,233 +0,0 @@
-import { db } from '@sim/db'
-import { form } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
-import type { NextRequest } from 'next/server'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { encryptSecret } from '@/lib/core/security/encryption'
-import { checkFormAccess, DEFAULT_FORM_CUSTOMIZATIONS } from '@/app/api/form/utils'
-import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
-
-const logger = createLogger('FormManageAPI')
-
-const fieldConfigSchema = z.object({
-  name: z.string(),
-  type: z.string(),
-  label: z.string(),
-  description: z.string().optional(),
-  required: z.boolean().optional(),
-})
-
-const updateFormSchema = z.object({
-  identifier: z
-    .string()
-    .min(1, 'Identifier is required')
-    .max(100, 'Identifier must be 100 characters or less')
-    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens')
-    .optional(),
-  title: z
-    .string()
-    .min(1, 'Title is required')
-    .max(200, 'Title must be 200 characters or less')
-    .optional(),
-  description: z.string().max(1000, 'Description must be 1000 characters or less').optional(),
-  customizations: z
-    .object({
-      primaryColor: z.string().optional(),
-      welcomeMessage: z
-        .string()
-        .max(500, 'Welcome message must be 500 characters or less')
-        .optional(),
-      thankYouTitle: z
-        .string()
-        .max(100, 'Thank you title must be 100 characters or less')
-        .optional(),
-      thankYouMessage: z
-        .string()
-        .max(500, 'Thank you message must be 500 characters or less')
-        .optional(),
-      logoUrl: z.string().url('Logo URL must be a valid URL').optional().or(z.literal('')),
-      fieldConfigs: z.array(fieldConfigSchema).optional(),
-    })
-    .optional(),
-  authType: z.enum(['public', 'password', 'email']).optional(),
-  password: z
-    .string()
-    .min(6, 'Password must be at least 6 characters')
-    .optional()
-    .or(z.literal('')),
-  allowedEmails: z.array(z.string()).optional(),
-  showBranding: z.boolean().optional(),
-  isActive: z.boolean().optional(),
-})
-
-export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  try {
-    const session = await getSession()
-
-    if (!session) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-
-    const { id } = await params
-
-    const { hasAccess, form: formRecord } = await checkFormAccess(id, session.user.id)
-
-    if (!hasAccess || !formRecord) {
-      return createErrorResponse('Form not found or access denied', 404)
-    }
-
-    const { password: _password, ...formWithoutPassword } = formRecord
-
-    return createSuccessResponse({
-      form: {
-        ...formWithoutPassword,
-        hasPassword: !!formRecord.password,
-      },
-    })
-  } catch (error: any) {
-    logger.error('Error fetching form:', error)
-    return createErrorResponse(error.message || 'Failed to fetch form', 500)
-  }
-}
-
-export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  try {
-    const session = await getSession()
-
-    if (!session) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-
-    const { id } = await params
-
-    const { hasAccess, form: formRecord } = await checkFormAccess(id, session.user.id)
-
-    if (!hasAccess || !formRecord) {
-      return createErrorResponse('Form not found or access denied', 404)
-    }
-
-    const body = await request.json()
-
-    try {
-      const validatedData = updateFormSchema.parse(body)
-
-      const {
-        identifier,
-        title,
-        description,
-        customizations,
-        authType,
-        password,
-        allowedEmails,
-        showBranding,
-        isActive,
-      } = validatedData
-
-      if (identifier && identifier !== formRecord.identifier) {
-        const existingIdentifier = await db
-          .select()
-          .from(form)
-          .where(eq(form.identifier, identifier))
-          .limit(1)
-
-        if (existingIdentifier.length > 0) {
-          return createErrorResponse('Identifier already in use', 400)
-        }
-      }
-
-      if (authType === 'password' && !password && !formRecord.password) {
-        return createErrorResponse('Password is required when using password protection', 400)
-      }
-
-      if (
-        authType === 'email' &&
-        (!allowedEmails || allowedEmails.length === 0) &&
-        (!formRecord.allowedEmails || (formRecord.allowedEmails as string[]).length === 0)
-      ) {
-        return createErrorResponse(
-          'At least one email or domain is required when using email access control',
-          400
-        )
-      }
-
-      const updateData: Record<string, any> = {
-        updatedAt: new Date(),
-      }
-
-      if (identifier !== undefined) updateData.identifier = identifier
-      if (title !== undefined) updateData.title = title
-      if (description !== undefined) updateData.description = description
-      if (showBranding !== undefined) updateData.showBranding = showBranding
-      if (isActive !== undefined) updateData.isActive = isActive
-      if (authType !== undefined) updateData.authType = authType
-      if (allowedEmails !== undefined) updateData.allowedEmails = allowedEmails
-
-      if (customizations !== undefined) {
-        const existingCustomizations = (formRecord.customizations as Record<string, any>) || {}
-        updateData.customizations = {
-          ...DEFAULT_FORM_CUSTOMIZATIONS,
-          ...existingCustomizations,
-          ...customizations,
-        }
-      }
-
-      if (password) {
-        const { encrypted } = await encryptSecret(password)
-        updateData.password = encrypted
-      } else if (authType && authType !== 'password') {
-        updateData.password = null
-      }
-
-      await db.update(form).set(updateData).where(eq(form.id, id))
-
-      logger.info(`Form ${id} updated successfully`)
-
-      return createSuccessResponse({
-        message: 'Form updated successfully',
-      })
-    } catch (validationError) {
-      if (validationError instanceof z.ZodError) {
-        const errorMessage = validationError.errors[0]?.message || 'Invalid request data'
-        return createErrorResponse(errorMessage, 400, 'VALIDATION_ERROR')
-      }
-      throw validationError
-    }
-  } catch (error: any) {
-    logger.error('Error updating form:', error)
-    return createErrorResponse(error.message || 'Failed to update form', 500)
-  }
-}
-
-export async function DELETE(
-  request: NextRequest,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await getSession()
-
-    if (!session) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-
-    const { id } = await params
-
-    const { hasAccess, form: formRecord } = await checkFormAccess(id, session.user.id)
-
-    if (!hasAccess || !formRecord) {
-      return createErrorResponse('Form not found or access denied', 404)
-    }
-
-    await db.update(form).set({ isActive: false, updatedAt: new Date() }).where(eq(form.id, id))
-
-    logger.info(`Form ${id} deleted (soft delete)`)
-
-    return createSuccessResponse({
-      message: 'Form deleted successfully',
-    })
-  } catch (error: any) {
-    logger.error('Error deleting form:', error)
-    return createErrorResponse(error.message || 'Failed to delete form', 500)
-  }
-}

apps/sim/app/api/form/route.ts

@@ -1,214 +0,0 @@
-import { db } from '@sim/db'
-import { form } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
-import type { NextRequest } from 'next/server'
-import { v4 as uuidv4 } from 'uuid'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { isDev } from '@/lib/core/config/feature-flags'
-import { encryptSecret } from '@/lib/core/security/encryption'
-import { getEmailDomain } from '@/lib/core/utils/urls'
-import { deployWorkflow } from '@/lib/workflows/persistence/utils'
-import {
-  checkWorkflowAccessForFormCreation,
-  DEFAULT_FORM_CUSTOMIZATIONS,
-} from '@/app/api/form/utils'
-import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
-
-const logger = createLogger('FormAPI')
-
-const fieldConfigSchema = z.object({
-  name: z.string(),
-  type: z.string(),
-  label: z.string(),
-  description: z.string().optional(),
-  required: z.boolean().optional(),
-})
-
-const formSchema = z.object({
-  workflowId: z.string().min(1, 'Workflow ID is required'),
-  identifier: z
-    .string()
-    .min(1, 'Identifier is required')
-    .max(100, 'Identifier must be 100 characters or less')
-    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens'),
-  title: z.string().min(1, 'Title is required').max(200, 'Title must be 200 characters or less'),
-  description: z.string().max(1000, 'Description must be 1000 characters or less').optional(),
-  customizations: z
-    .object({
-      primaryColor: z.string().optional(),
-      welcomeMessage: z
-        .string()
-        .max(500, 'Welcome message must be 500 characters or less')
-        .optional(),
-      thankYouTitle: z
-        .string()
-        .max(100, 'Thank you title must be 100 characters or less')
-        .optional(),
-      thankYouMessage: z
-        .string()
-        .max(500, 'Thank you message must be 500 characters or less')
-        .optional(),
-      logoUrl: z.string().url('Logo URL must be a valid URL').optional().or(z.literal('')),
-      fieldConfigs: z.array(fieldConfigSchema).optional(),
-    })
-    .optional(),
-  authType: z.enum(['public', 'password', 'email']).default('public'),
-  password: z
-    .string()
-    .min(6, 'Password must be at least 6 characters')
-    .optional()
-    .or(z.literal('')),
-  allowedEmails: z.array(z.string()).optional().default([]),
-  showBranding: z.boolean().optional().default(true),
-})
-
-export async function GET(request: NextRequest) {
-  try {
-    const session = await getSession()
-
-    if (!session) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-
-    const deployments = await db.select().from(form).where(eq(form.userId, session.user.id))
-
-    return createSuccessResponse({ deployments })
-  } catch (error: any) {
-    logger.error('Error fetching form deployments:', error)
-    return createErrorResponse(error.message || 'Failed to fetch form deployments', 500)
-  }
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    const session = await getSession()
-
-    if (!session) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-
-    const body = await request.json()
-
-    try {
-      const validatedData = formSchema.parse(body)
-
-      const {
-        workflowId,
-        identifier,
-        title,
-        description = '',
-        customizations,
-        authType = 'public',
-        password,
-        allowedEmails = [],
-        showBranding = true,
-      } = validatedData
-
-      if (authType === 'password' && !password) {
-        return createErrorResponse('Password is required when using password protection', 400)
-      }
-
-      if (authType === 'email' && (!Array.isArray(allowedEmails) || allowedEmails.length === 0)) {
-        return createErrorResponse(
-          'At least one email or domain is required when using email access control',
-          400
-        )
-      }
-
-      const existingIdentifier = await db
-        .select()
-        .from(form)
-        .where(eq(form.identifier, identifier))
-        .limit(1)
-
-      if (existingIdentifier.length > 0) {
-        return createErrorResponse('Identifier already in use', 400)
-      }
-
-      const { hasAccess, workflow: workflowRecord } = await checkWorkflowAccessForFormCreation(
-        workflowId,
-        session.user.id
-      )
-
-      if (!hasAccess || !workflowRecord) {
-        return createErrorResponse('Workflow not found or access denied', 404)
-      }
-
-      const result = await deployWorkflow({
-        workflowId,
-        deployedBy: session.user.id,
-      })
-
-      if (!result.success) {
-        return createErrorResponse(result.error || 'Failed to deploy workflow', 500)
-      }
-
-      logger.info(
-        `${workflowRecord.isDeployed ? 'Redeployed' : 'Auto-deployed'} workflow ${workflowId} for form (v${result.version})`
-      )
-
-      let encryptedPassword = null
-      if (authType === 'password' && password) {
-        const { encrypted } = await encryptSecret(password)
-        encryptedPassword = encrypted
-      }
-
-      const id = uuidv4()
-
-      logger.info('Creating form deployment with values:', {
-        workflowId,
-        identifier,
-        title,
-        authType,
-        hasPassword: !!encryptedPassword,
-        emailCount: allowedEmails?.length || 0,
-        showBranding,
-      })
-
-      const mergedCustomizations = {
-        ...DEFAULT_FORM_CUSTOMIZATIONS,
-        ...(customizations || {}),
-      }
-
-      await db.insert(form).values({
-        id,
-        workflowId,
-        userId: session.user.id,
-        identifier,
-        title,
-        description: description || '',
-        customizations: mergedCustomizations,
-        isActive: true,
-        authType,
-        password: encryptedPassword,
-        allowedEmails: authType === 'email' ? allowedEmails : [],
-        showBranding,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      })
-
-      const baseDomain = getEmailDomain()
-      const protocol = isDev ? 'http' : 'https'
-      const formUrl = `${protocol}://${baseDomain}/form/${identifier}`
-
-      logger.info(`Form "${title}" deployed successfully at ${formUrl}`)
-
-      return createSuccessResponse({
-        id,
-        formUrl,
-        message: 'Form deployment created successfully',
-      })
-    } catch (validationError) {
-      if (validationError instanceof z.ZodError) {
-        const errorMessage = validationError.errors[0]?.message || 'Invalid request data'
-        return createErrorResponse(errorMessage, 400, 'VALIDATION_ERROR')
-      }
-      throw validationError
-    }
-  } catch (error: any) {
-    logger.error('Error creating form deployment:', error)
-    return createErrorResponse(error.message || 'Failed to create form deployment', 500)
-  }
-}

apps/sim/app/api/form/utils.test.ts

@@ -1,367 +0,0 @@
-import { databaseMock, loggerMock } from '@sim/testing'
-import type { NextResponse } from 'next/server'
-/**
- * Tests for form API utils
- *
- * @vitest-environment node
- */
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-vi.mock('@sim/db', () => databaseMock)
-vi.mock('@sim/logger', () => loggerMock)
-
-const mockDecryptSecret = vi.fn()
-
-vi.mock('@/lib/core/security/encryption', () => ({
-  decryptSecret: mockDecryptSecret,
-}))
-
-vi.mock('@/lib/core/config/feature-flags', () => ({
-  isDev: true,
-  isHosted: false,
-  isProd: false,
-}))
-
-vi.mock('@/lib/workspaces/permissions/utils', () => ({
-  hasAdminPermission: vi.fn(),
-}))
-
-describe('Form API Utils', () => {
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Auth token utils', () => {
-    it.concurrent('should validate auth tokens', async () => {
-      const { validateAuthToken } = await import('@/lib/core/security/deployment')
-
-      const formId = 'test-form-id'
-      const type = 'password'
-
-      const token = Buffer.from(`${formId}:${type}:${Date.now()}`).toString('base64')
-      expect(typeof token).toBe('string')
-      expect(token.length).toBeGreaterThan(0)
-
-      const isValid = validateAuthToken(token, formId)
-      expect(isValid).toBe(true)
-
-      const isInvalidForm = validateAuthToken(token, 'wrong-form-id')
-      expect(isInvalidForm).toBe(false)
-    })
-
-    it.concurrent('should reject expired tokens', async () => {
-      const { validateAuthToken } = await import('@/lib/core/security/deployment')
-
-      const formId = 'test-form-id'
-      const expiredToken = Buffer.from(
-        `${formId}:password:${Date.now() - 25 * 60 * 60 * 1000}`
-      ).toString('base64')
-
-      const isValid = validateAuthToken(expiredToken, formId)
-      expect(isValid).toBe(false)
-    })
-
-    it.concurrent('should validate tokens with password hash', async () => {
-      const { validateAuthToken } = await import('@/lib/core/security/deployment')
-      const crypto = await import('crypto')
-
-      const formId = 'test-form-id'
-      const encryptedPassword = 'encrypted-password-value'
-      const pwHash = crypto
-        .createHash('sha256')
-        .update(encryptedPassword)
-        .digest('hex')
-        .substring(0, 8)
-
-      const token = Buffer.from(`${formId}:password:${Date.now()}:${pwHash}`).toString('base64')
-
-      const isValid = validateAuthToken(token, formId, encryptedPassword)
-      expect(isValid).toBe(true)
-
-      const isInvalidPassword = validateAuthToken(token, formId, 'different-password')
-      expect(isInvalidPassword).toBe(false)
-    })
-  })
-
-  describe('Cookie handling', () => {
-    it('should set auth cookie correctly', async () => {
-      const { setFormAuthCookie } = await import('@/app/api/form/utils')
-
-      const mockSet = vi.fn()
-      const mockResponse = {
-        cookies: {
-          set: mockSet,
-        },
-      } as unknown as NextResponse
-
-      const formId = 'test-form-id'
-      const type = 'password'
-
-      setFormAuthCookie(mockResponse, formId, type)
-
-      expect(mockSet).toHaveBeenCalledWith({
-        name: `form_auth_${formId}`,
-        value: expect.any(String),
-        httpOnly: true,
-        secure: false, // Development mode
-        sameSite: 'lax',
-        path: '/',
-        maxAge: 60 * 60 * 24,
-      })
-    })
-  })
-
-  describe('CORS handling', () => {
-    it.concurrent('should add CORS headers for any origin', async () => {
-      const { addCorsHeaders } = await import('@/lib/core/security/deployment')
-
-      const mockRequest = {
-        headers: {
-          get: vi.fn().mockReturnValue('http://localhost:3000'),
-        },
-      } as any
-
-      const mockResponse = {
-        headers: {
-          set: vi.fn(),
-        },
-      } as unknown as NextResponse
-
-      addCorsHeaders(mockResponse, mockRequest)
-
-      expect(mockResponse.headers.set).toHaveBeenCalledWith(
-        'Access-Control-Allow-Origin',
-        'http://localhost:3000'
-      )
-      expect(mockResponse.headers.set).toHaveBeenCalledWith(
-        'Access-Control-Allow-Credentials',
-        'true'
-      )
-      expect(mockResponse.headers.set).toHaveBeenCalledWith(
-        'Access-Control-Allow-Methods',
-        'GET, POST, OPTIONS'
-      )
-      expect(mockResponse.headers.set).toHaveBeenCalledWith(
-        'Access-Control-Allow-Headers',
-        'Content-Type, X-Requested-With'
-      )
-    })
-
-    it.concurrent('should not set CORS headers when no origin', async () => {
-      const { addCorsHeaders } = await import('@/lib/core/security/deployment')
-
-      const mockRequest = {
-        headers: {
-          get: vi.fn().mockReturnValue(''),
-        },
-      } as any
-
-      const mockResponse = {
-        headers: {
-          set: vi.fn(),
-        },
-      } as unknown as NextResponse
-
-      addCorsHeaders(mockResponse, mockRequest)
-
-      expect(mockResponse.headers.set).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Form auth validation', () => {
-    beforeEach(async () => {
-      vi.clearAllMocks()
-      mockDecryptSecret.mockResolvedValue({ decrypted: 'correct-password' })
-    })
-
-    it('should allow access to public forms', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'public',
-      }
-
-      const mockRequest = {
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      const result = await validateFormAuth('request-id', deployment, mockRequest)
-
-      expect(result.authorized).toBe(true)
-    })
-
-    it('should request password auth for GET requests', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'password',
-      }
-
-      const mockRequest = {
-        method: 'GET',
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      const result = await validateFormAuth('request-id', deployment, mockRequest)
-
-      expect(result.authorized).toBe(false)
-      expect(result.error).toBe('auth_required_password')
-    })
-
-    it('should validate password for POST requests', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-      const { decryptSecret } = await import('@/lib/core/security/encryption')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'password',
-        password: 'encrypted-password',
-      }
-
-      const mockRequest = {
-        method: 'POST',
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      const parsedBody = {
-        password: 'correct-password',
-      }
-
-      const result = await validateFormAuth('request-id', deployment, mockRequest, parsedBody)
-
-      expect(decryptSecret).toHaveBeenCalledWith('encrypted-password')
-      expect(result.authorized).toBe(true)
-    })
-
-    it('should reject incorrect password', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'password',
-        password: 'encrypted-password',
-      }
-
-      const mockRequest = {
-        method: 'POST',
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      const parsedBody = {
-        password: 'wrong-password',
-      }
-
-      const result = await validateFormAuth('request-id', deployment, mockRequest, parsedBody)
-
-      expect(result.authorized).toBe(false)
-      expect(result.error).toBe('Invalid password')
-    })
-
-    it('should request email auth for email-protected forms', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'email',
-        allowedEmails: ['user@example.com', '@company.com'],
-      }
-
-      const mockRequest = {
-        method: 'GET',
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      const result = await validateFormAuth('request-id', deployment, mockRequest)
-
-      expect(result.authorized).toBe(false)
-      expect(result.error).toBe('auth_required_email')
-    })
-
-    it('should check allowed emails for email auth', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'email',
-        allowedEmails: ['user@example.com', '@company.com'],
-      }
-
-      const mockRequest = {
-        method: 'POST',
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      // Exact email match should authorize
-      const result1 = await validateFormAuth('request-id', deployment, mockRequest, {
-        email: 'user@example.com',
-      })
-      expect(result1.authorized).toBe(true)
-
-      // Domain match should authorize
-      const result2 = await validateFormAuth('request-id', deployment, mockRequest, {
-        email: 'other@company.com',
-      })
-      expect(result2.authorized).toBe(true)
-
-      // Unknown email should not authorize
-      const result3 = await validateFormAuth('request-id', deployment, mockRequest, {
-        email: 'user@unknown.com',
-      })
-      expect(result3.authorized).toBe(false)
-      expect(result3.error).toBe('Email not authorized for this form')
-    })
-
-    it('should require password when formData is present without password', async () => {
-      const { validateFormAuth } = await import('@/app/api/form/utils')
-
-      const deployment = {
-        id: 'form-id',
-        authType: 'password',
-        password: 'encrypted-password',
-      }
-
-      const mockRequest = {
-        method: 'POST',
-        cookies: {
-          get: vi.fn().mockReturnValue(null),
-        },
-      } as any
-
-      const parsedBody = {
-        formData: { field1: 'value1' },
-        // No password provided
-      }
-
-      const result = await validateFormAuth('request-id', deployment, mockRequest, parsedBody)
-
-      expect(result.authorized).toBe(false)
-      expect(result.error).toBe('auth_required_password')
-    })
-  })
-
-  describe('Default customizations', () => {
-    it.concurrent('should have correct default values', async () => {
-      const { DEFAULT_FORM_CUSTOMIZATIONS } = await import('@/app/api/form/utils')
-
-      expect(DEFAULT_FORM_CUSTOMIZATIONS).toEqual({
-        welcomeMessage: '',
-        thankYouTitle: 'Thank you!',
-        thankYouMessage: 'Your response has been submitted successfully.',
-      })
-    })
-  })
-})

apps/sim/app/api/form/utils.ts

@@ -1,204 +0,0 @@
-import { db } from '@sim/db'
-import { form, workflow } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
-import type { NextRequest, NextResponse } from 'next/server'
-import {
-  isEmailAllowed,
-  setDeploymentAuthCookie,
-  validateAuthToken,
-} from '@/lib/core/security/deployment'
-import { decryptSecret } from '@/lib/core/security/encryption'
-import { hasAdminPermission } from '@/lib/workspaces/permissions/utils'
-
-const logger = createLogger('FormAuthUtils')
-
-export function setFormAuthCookie(
-  response: NextResponse,
-  formId: string,
-  type: string,
-  encryptedPassword?: string | null
-): void {
-  setDeploymentAuthCookie(response, 'form', formId, type, encryptedPassword)
-}
-
-/**
- * Check if user has permission to create a form for a specific workflow
- * Either the user owns the workflow directly OR has admin permission for the workflow's workspace
- */
-export async function checkWorkflowAccessForFormCreation(
-  workflowId: string,
-  userId: string
-): Promise<{ hasAccess: boolean; workflow?: any }> {
-  const workflowData = await db.select().from(workflow).where(eq(workflow.id, workflowId)).limit(1)
-
-  if (workflowData.length === 0) {
-    return { hasAccess: false }
-  }
-
-  const workflowRecord = workflowData[0]
-
-  if (workflowRecord.userId === userId) {
-    return { hasAccess: true, workflow: workflowRecord }
-  }
-
-  if (workflowRecord.workspaceId) {
-    const hasAdmin = await hasAdminPermission(userId, workflowRecord.workspaceId)
-    if (hasAdmin) {
-      return { hasAccess: true, workflow: workflowRecord }
-    }
-  }
-
-  return { hasAccess: false }
-}
-
-/**
- * Check if user has access to view/edit/delete a specific form
- * Either the user owns the form directly OR has admin permission for the workflow's workspace
- */
-export async function checkFormAccess(
-  formId: string,
-  userId: string
-): Promise<{ hasAccess: boolean; form?: any }> {
-  const formData = await db
-    .select({
-      form: form,
-      workflowWorkspaceId: workflow.workspaceId,
-    })
-    .from(form)
-    .innerJoin(workflow, eq(form.workflowId, workflow.id))
-    .where(eq(form.id, formId))
-    .limit(1)
-
-  if (formData.length === 0) {
-    return { hasAccess: false }
-  }
-
-  const { form: formRecord, workflowWorkspaceId } = formData[0]
-
-  if (formRecord.userId === userId) {
-    return { hasAccess: true, form: formRecord }
-  }
-
-  if (workflowWorkspaceId) {
-    const hasAdmin = await hasAdminPermission(userId, workflowWorkspaceId)
-    if (hasAdmin) {
-      return { hasAccess: true, form: formRecord }
-    }
-  }
-
-  return { hasAccess: false }
-}
-
-export async function validateFormAuth(
-  requestId: string,
-  deployment: any,
-  request: NextRequest,
-  parsedBody?: any
-): Promise<{ authorized: boolean; error?: string }> {
-  const authType = deployment.authType || 'public'
-
-  if (authType === 'public') {
-    return { authorized: true }
-  }
-
-  const cookieName = `form_auth_${deployment.id}`
-  const authCookie = request.cookies.get(cookieName)
-
-  if (authCookie && validateAuthToken(authCookie.value, deployment.id, deployment.password)) {
-    return { authorized: true }
-  }
-
-  if (authType === 'password') {
-    if (request.method === 'GET') {
-      return { authorized: false, error: 'auth_required_password' }
-    }
-
-    try {
-      if (!parsedBody) {
-        return { authorized: false, error: 'Password is required' }
-      }
-
-      const { password, formData } = parsedBody
-
-      if (formData && !password) {
-        return { authorized: false, error: 'auth_required_password' }
-      }
-
-      if (!password) {
-        return { authorized: false, error: 'Password is required' }
-      }
-
-      if (!deployment.password) {
-        logger.error(`[${requestId}] No password set for password-protected form: ${deployment.id}`)
-        return { authorized: false, error: 'Authentication configuration error' }
-      }
-
-      const { decrypted } = await decryptSecret(deployment.password)
-      if (password !== decrypted) {
-        return { authorized: false, error: 'Invalid password' }
-      }
-
-      return { authorized: true }
-    } catch (error) {
-      logger.error(`[${requestId}] Error validating password:`, error)
-      return { authorized: false, error: 'Authentication error' }
-    }
-  }
-
-  if (authType === 'email') {
-    if (request.method === 'GET') {
-      return { authorized: false, error: 'auth_required_email' }
-    }
-
-    try {
-      if (!parsedBody) {
-        return { authorized: false, error: 'Email is required' }
-      }
-
-      const { email, formData } = parsedBody
-
-      if (formData && !email) {
-        return { authorized: false, error: 'auth_required_email' }
-      }
-
-      if (!email) {
-        return { authorized: false, error: 'Email is required' }
-      }
-
-      const allowedEmails: string[] = deployment.allowedEmails || []
-
-      if (isEmailAllowed(email, allowedEmails)) {
-        return { authorized: true }
-      }
-
-      return { authorized: false, error: 'Email not authorized for this form' }
-    } catch (error) {
-      logger.error(`[${requestId}] Error validating email:`, error)
-      return { authorized: false, error: 'Authentication error' }
-    }
-  }
-
-  return { authorized: false, error: 'Unsupported authentication type' }
-}
-
-/**
- * Form customizations interface
- */
-export interface FormCustomizations {
-  primaryColor?: string
-  welcomeMessage?: string
-  thankYouTitle?: string
-  thankYouMessage?: string
-  logoUrl?: string
-}
-
-/**
- * Default form customizations
- * Note: primaryColor is intentionally undefined to allow thank you screen to use its green default
- */
-export const DEFAULT_FORM_CUSTOMIZATIONS: FormCustomizations = {
-  welcomeMessage: '',
-  thankYouTitle: 'Thank you!',
-  thankYouMessage: 'Your response has been submitted successfully.',
-}

apps/sim/app/api/form/validate/route.ts

@@ -1,71 +0,0 @@
-import { db } from '@sim/db'
-import { form } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
-import type { NextRequest } from 'next/server'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
-
-const logger = createLogger('FormValidateAPI')
-
-const validateQuerySchema = z.object({
-  identifier: z
-    .string()
-    .min(1, 'Identifier is required')
-    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens')
-    .max(100, 'Identifier must be 100 characters or less'),
-})
-
-/**
- * GET endpoint to validate form identifier availability
- */
-export async function GET(request: NextRequest) {
-  try {
-    const session = await getSession()
-    if (!session?.user?.id) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-    const { searchParams } = new URL(request.url)
-    const identifier = searchParams.get('identifier')
-
-    const validation = validateQuerySchema.safeParse({ identifier })
-
-    if (!validation.success) {
-      const errorMessage = validation.error.errors[0]?.message || 'Invalid identifier'
-      logger.warn(`Validation error: ${errorMessage}`)
-
-      if (identifier && !/^[a-z0-9-]+$/.test(identifier)) {
-        return createSuccessResponse({
-          available: false,
-          error: errorMessage,
-        })
-      }
-
-      return createErrorResponse(errorMessage, 400)
-    }
-
-    const { identifier: validatedIdentifier } = validation.data
-
-    const existingForm = await db
-      .select({ id: form.id })
-      .from(form)
-      .where(eq(form.identifier, validatedIdentifier))
-      .limit(1)
-
-    const isAvailable = existingForm.length === 0
-
-    logger.debug(
-      `Identifier "${validatedIdentifier}" availability check: ${isAvailable ? 'available' : 'taken'}`
-    )
-
-    return createSuccessResponse({
-      available: isAvailable,
-      error: isAvailable ? null : 'This identifier is already in use',
-    })
-  } catch (error: unknown) {
-    const message = error instanceof Error ? error.message : 'Failed to validate identifier'
-    logger.error('Error validating form identifier:', error)
-    return createErrorResponse(message, 500)
-  }
-}

apps/sim/app/api/function/execute/route.test.ts

@@ -3,7 +3,6 @@
  *
  * @vitest-environment node
  */
-import { loggerMock } from '@sim/testing'
 import { NextRequest } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMockRequest } from '@/app/api/__test-utils__/utils'
@@ -83,7 +82,14 @@ vi.mock('@/lib/execution/isolated-vm', () => ({
   }),
 }))
 
-vi.mock('@sim/logger', () => loggerMock)
+vi.mock('@sim/logger', () => ({
+  createLogger: vi.fn(() => ({
+    info: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn(),
+    debug: vi.fn(),
+  })),
+}))
 
 vi.mock('@/lib/execution/e2b', () => ({
   executeInE2B: vi.fn(),

apps/sim/app/api/knowledge/search/utils.test.ts

@@ -4,15 +4,18 @@
  *
  * @vitest-environment node
  */
-import { createEnvMock, createMockLogger } from '@sim/testing'
+import { createEnvMock } from '@sim/testing'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-const loggerMock = vi.hoisted(() => ({
-  createLogger: () => createMockLogger(),
-}))
-
 vi.mock('drizzle-orm')
-vi.mock('@sim/logger', () => loggerMock)
+vi.mock('@sim/logger', () => ({
+  createLogger: vi.fn(() => ({
+    info: vi.fn(),
+    debug: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  })),
+}))
 vi.mock('@sim/db')
 vi.mock('@/lib/knowledge/documents/utils', () => ({
   retryWithExponentialBackoff: (fn: any) => fn(),

apps/sim/app/api/mcp/workflow-servers/validate/route.ts

@@ -0,0 +1,44 @@
+import { createLogger } from '@sim/logger'
+import { NextResponse } from 'next/server'
+import { getSession } from '@/lib/auth'
+import { loadWorkflowFromNormalizedTables } from '@/lib/workflows/persistence/utils'
+import { hasValidStartBlockInState } from '@/lib/workflows/triggers/trigger-utils'
+
+const logger = createLogger('ValidateMcpWorkflowsAPI')
+
+/**
+ * POST /api/mcp/workflow-servers/validate
+ * Validates if workflows have valid start blocks for MCP usage
+ */
+export async function POST(request: Request) {
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { workflowIds } = body
+
+    if (!Array.isArray(workflowIds) || workflowIds.length === 0) {
+      return NextResponse.json({ error: 'workflowIds must be a non-empty array' }, { status: 400 })
+    }
+
+    const results: Record<string, boolean> = {}
+
+    for (const workflowId of workflowIds) {
+      try {
+        const state = await loadWorkflowFromNormalizedTables(workflowId)
+        results[workflowId] = hasValidStartBlockInState(state)
+      } catch (error) {
+        logger.warn(`Failed to validate workflow ${workflowId}:`, error)
+        results[workflowId] = false
+      }
+    }
+
+    return NextResponse.json({ data: results })
+  } catch (error) {
+    logger.error('Failed to validate workflows for MCP:', error)
+    return NextResponse.json({ error: 'Failed to validate workflows' }, { status: 500 })
+  }
+}

apps/sim/app/api/permission-groups/[id]/members/bulk/route.ts

@@ -1,166 +0,0 @@
-import { db } from '@sim/db'
-import { member, permissionGroup, permissionGroupMember } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq, inArray } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { hasAccessControlAccess } from '@/lib/billing'
-
-const logger = createLogger('PermissionGroupBulkMembers')
-
-async function getPermissionGroupWithAccess(groupId: string, userId: string) {
-  const [group] = await db
-    .select({
-      id: permissionGroup.id,
-      organizationId: permissionGroup.organizationId,
-    })
-    .from(permissionGroup)
-    .where(eq(permissionGroup.id, groupId))
-    .limit(1)
-
-  if (!group) return null
-
-  const [membership] = await db
-    .select({ role: member.role })
-    .from(member)
-    .where(and(eq(member.userId, userId), eq(member.organizationId, group.organizationId)))
-    .limit(1)
-
-  if (!membership) return null
-
-  return { group, role: membership.role }
-}
-
-const bulkAddSchema = z.object({
-  userIds: z.array(z.string()).optional(),
-  addAllOrgMembers: z.boolean().optional(),
-})
-
-export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-
-  try {
-    const hasAccess = await hasAccessControlAccess(session.user.id)
-    if (!hasAccess) {
-      return NextResponse.json(
-        { error: 'Access Control is an Enterprise feature' },
-        { status: 403 }
-      )
-    }
-
-    const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-    if (!result) {
-      return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-    }
-
-    if (result.role !== 'admin' && result.role !== 'owner') {
-      return NextResponse.json({ error: 'Admin or owner permissions required' }, { status: 403 })
-    }
-
-    const body = await req.json()
-    const { userIds, addAllOrgMembers } = bulkAddSchema.parse(body)
-
-    let targetUserIds: string[] = []
-
-    if (addAllOrgMembers) {
-      const orgMembers = await db
-        .select({ userId: member.userId })
-        .from(member)
-        .where(eq(member.organizationId, result.group.organizationId))
-
-      targetUserIds = orgMembers.map((m) => m.userId)
-    } else if (userIds && userIds.length > 0) {
-      const validMembers = await db
-        .select({ userId: member.userId })
-        .from(member)
-        .where(
-          and(
-            eq(member.organizationId, result.group.organizationId),
-            inArray(member.userId, userIds)
-          )
-        )
-
-      targetUserIds = validMembers.map((m) => m.userId)
-    }
-
-    if (targetUserIds.length === 0) {
-      return NextResponse.json({ added: 0, moved: 0 })
-    }
-
-    const existingMemberships = await db
-      .select({
-        id: permissionGroupMember.id,
-        userId: permissionGroupMember.userId,
-        permissionGroupId: permissionGroupMember.permissionGroupId,
-      })
-      .from(permissionGroupMember)
-      .where(inArray(permissionGroupMember.userId, targetUserIds))
-
-    const alreadyInThisGroup = new Set(
-      existingMemberships.filter((m) => m.permissionGroupId === id).map((m) => m.userId)
-    )
-    const usersToAdd = targetUserIds.filter((uid) => !alreadyInThisGroup.has(uid))
-
-    if (usersToAdd.length === 0) {
-      return NextResponse.json({ added: 0, moved: 0 })
-    }
-
-    const membershipsToDelete = existingMemberships.filter(
-      (m) => m.permissionGroupId !== id && usersToAdd.includes(m.userId)
-    )
-    const movedCount = membershipsToDelete.length
-
-    await db.transaction(async (tx) => {
-      if (membershipsToDelete.length > 0) {
-        await tx.delete(permissionGroupMember).where(
-          inArray(
-            permissionGroupMember.id,
-            membershipsToDelete.map((m) => m.id)
-          )
-        )
-      }
-
-      const newMembers = usersToAdd.map((userId) => ({
-        id: crypto.randomUUID(),
-        permissionGroupId: id,
-        userId,
-        assignedBy: session.user.id,
-        assignedAt: new Date(),
-      }))
-
-      await tx.insert(permissionGroupMember).values(newMembers)
-    })
-
-    logger.info('Bulk added members to permission group', {
-      permissionGroupId: id,
-      addedCount: usersToAdd.length,
-      movedCount,
-      assignedBy: session.user.id,
-    })
-
-    return NextResponse.json({ added: usersToAdd.length, moved: movedCount })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json({ error: error.errors[0].message }, { status: 400 })
-    }
-    if (
-      error instanceof Error &&
-      error.message.includes('permission_group_member_user_id_unique')
-    ) {
-      return NextResponse.json(
-        { error: 'One or more users are already in a permission group' },
-        { status: 409 }
-      )
-    }
-    logger.error('Error bulk adding members to permission group', error)
-    return NextResponse.json({ error: 'Failed to add members' }, { status: 500 })
-  }
-}

apps/sim/app/api/permission-groups/[id]/members/route.ts

@@ -1,229 +0,0 @@
-import { db } from '@sim/db'
-import { member, permissionGroup, permissionGroupMember, user } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { hasAccessControlAccess } from '@/lib/billing'
-
-const logger = createLogger('PermissionGroupMembers')
-
-async function getPermissionGroupWithAccess(groupId: string, userId: string) {
-  const [group] = await db
-    .select({
-      id: permissionGroup.id,
-      organizationId: permissionGroup.organizationId,
-    })
-    .from(permissionGroup)
-    .where(eq(permissionGroup.id, groupId))
-    .limit(1)
-
-  if (!group) return null
-
-  const [membership] = await db
-    .select({ role: member.role })
-    .from(member)
-    .where(and(eq(member.userId, userId), eq(member.organizationId, group.organizationId)))
-    .limit(1)
-
-  if (!membership) return null
-
-  return { group, role: membership.role }
-}
-
-export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-  const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-  if (!result) {
-    return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-  }
-
-  const members = await db
-    .select({
-      id: permissionGroupMember.id,
-      userId: permissionGroupMember.userId,
-      assignedAt: permissionGroupMember.assignedAt,
-      userName: user.name,
-      userEmail: user.email,
-      userImage: user.image,
-    })
-    .from(permissionGroupMember)
-    .leftJoin(user, eq(permissionGroupMember.userId, user.id))
-    .where(eq(permissionGroupMember.permissionGroupId, id))
-
-  return NextResponse.json({ members })
-}
-
-const addMemberSchema = z.object({
-  userId: z.string().min(1),
-})
-
-export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-
-  try {
-    const hasAccess = await hasAccessControlAccess(session.user.id)
-    if (!hasAccess) {
-      return NextResponse.json(
-        { error: 'Access Control is an Enterprise feature' },
-        { status: 403 }
-      )
-    }
-
-    const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-    if (!result) {
-      return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-    }
-
-    if (result.role !== 'admin' && result.role !== 'owner') {
-      return NextResponse.json({ error: 'Admin or owner permissions required' }, { status: 403 })
-    }
-
-    const body = await req.json()
-    const { userId } = addMemberSchema.parse(body)
-
-    const [orgMember] = await db
-      .select({ id: member.id })
-      .from(member)
-      .where(and(eq(member.userId, userId), eq(member.organizationId, result.group.organizationId)))
-      .limit(1)
-
-    if (!orgMember) {
-      return NextResponse.json(
-        { error: 'User is not a member of this organization' },
-        { status: 400 }
-      )
-    }
-
-    const [existingMembership] = await db
-      .select({
-        id: permissionGroupMember.id,
-        permissionGroupId: permissionGroupMember.permissionGroupId,
-      })
-      .from(permissionGroupMember)
-      .where(eq(permissionGroupMember.userId, userId))
-      .limit(1)
-
-    if (existingMembership?.permissionGroupId === id) {
-      return NextResponse.json(
-        { error: 'User is already in this permission group' },
-        { status: 409 }
-      )
-    }
-
-    const newMember = await db.transaction(async (tx) => {
-      if (existingMembership) {
-        await tx
-          .delete(permissionGroupMember)
-          .where(eq(permissionGroupMember.id, existingMembership.id))
-      }
-
-      const memberData = {
-        id: crypto.randomUUID(),
-        permissionGroupId: id,
-        userId,
-        assignedBy: session.user.id,
-        assignedAt: new Date(),
-      }
-
-      await tx.insert(permissionGroupMember).values(memberData)
-      return memberData
-    })
-
-    logger.info('Added member to permission group', {
-      permissionGroupId: id,
-      userId,
-      assignedBy: session.user.id,
-    })
-
-    return NextResponse.json({ member: newMember }, { status: 201 })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json({ error: error.errors[0].message }, { status: 400 })
-    }
-    if (
-      error instanceof Error &&
-      error.message.includes('permission_group_member_user_id_unique')
-    ) {
-      return NextResponse.json({ error: 'User is already in a permission group' }, { status: 409 })
-    }
-    logger.error('Error adding member to permission group', error)
-    return NextResponse.json({ error: 'Failed to add member' }, { status: 500 })
-  }
-}
-
-export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-  const { searchParams } = new URL(req.url)
-  const memberId = searchParams.get('memberId')
-
-  if (!memberId) {
-    return NextResponse.json({ error: 'memberId is required' }, { status: 400 })
-  }
-
-  try {
-    const hasAccess = await hasAccessControlAccess(session.user.id)
-    if (!hasAccess) {
-      return NextResponse.json(
-        { error: 'Access Control is an Enterprise feature' },
-        { status: 403 }
-      )
-    }
-
-    const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-    if (!result) {
-      return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-    }
-
-    if (result.role !== 'admin' && result.role !== 'owner') {
-      return NextResponse.json({ error: 'Admin or owner permissions required' }, { status: 403 })
-    }
-
-    const [memberToRemove] = await db
-      .select()
-      .from(permissionGroupMember)
-      .where(
-        and(eq(permissionGroupMember.id, memberId), eq(permissionGroupMember.permissionGroupId, id))
-      )
-      .limit(1)
-
-    if (!memberToRemove) {
-      return NextResponse.json({ error: 'Member not found' }, { status: 404 })
-    }
-
-    await db.delete(permissionGroupMember).where(eq(permissionGroupMember.id, memberId))
-
-    logger.info('Removed member from permission group', {
-      permissionGroupId: id,
-      memberId,
-      userId: session.user.id,
-    })
-
-    return NextResponse.json({ success: true })
-  } catch (error) {
-    logger.error('Error removing member from permission group', error)
-    return NextResponse.json({ error: 'Failed to remove member' }, { status: 500 })
-  }
-}

apps/sim/app/api/permission-groups/[id]/route.ts

@@ -1,212 +0,0 @@
-import { db } from '@sim/db'
-import { member, permissionGroup, permissionGroupMember } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { hasAccessControlAccess } from '@/lib/billing'
-import {
-  type PermissionGroupConfig,
-  parsePermissionGroupConfig,
-} from '@/lib/permission-groups/types'
-
-const logger = createLogger('PermissionGroup')
-
-const configSchema = z.object({
-  allowedIntegrations: z.array(z.string()).nullable().optional(),
-  allowedModelProviders: z.array(z.string()).nullable().optional(),
-  hideTraceSpans: z.boolean().optional(),
-  hideKnowledgeBaseTab: z.boolean().optional(),
-  hideCopilot: z.boolean().optional(),
-  hideApiKeysTab: z.boolean().optional(),
-  hideEnvironmentTab: z.boolean().optional(),
-  hideFilesTab: z.boolean().optional(),
-  disableMcpTools: z.boolean().optional(),
-  disableCustomTools: z.boolean().optional(),
-  hideTemplates: z.boolean().optional(),
-})
-
-const updateSchema = z.object({
-  name: z.string().trim().min(1).max(100).optional(),
-  description: z.string().max(500).nullable().optional(),
-  config: configSchema.optional(),
-})
-
-async function getPermissionGroupWithAccess(groupId: string, userId: string) {
-  const [group] = await db
-    .select({
-      id: permissionGroup.id,
-      organizationId: permissionGroup.organizationId,
-      name: permissionGroup.name,
-      description: permissionGroup.description,
-      config: permissionGroup.config,
-      createdBy: permissionGroup.createdBy,
-      createdAt: permissionGroup.createdAt,
-      updatedAt: permissionGroup.updatedAt,
-    })
-    .from(permissionGroup)
-    .where(eq(permissionGroup.id, groupId))
-    .limit(1)
-
-  if (!group) return null
-
-  const [membership] = await db
-    .select({ role: member.role })
-    .from(member)
-    .where(and(eq(member.userId, userId), eq(member.organizationId, group.organizationId)))
-    .limit(1)
-
-  if (!membership) return null
-
-  return { group, role: membership.role }
-}
-
-export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-  const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-  if (!result) {
-    return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-  }
-
-  return NextResponse.json({
-    permissionGroup: {
-      ...result.group,
-      config: parsePermissionGroupConfig(result.group.config),
-    },
-  })
-}
-
-export async function PUT(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-
-  try {
-    const hasAccess = await hasAccessControlAccess(session.user.id)
-    if (!hasAccess) {
-      return NextResponse.json(
-        { error: 'Access Control is an Enterprise feature' },
-        { status: 403 }
-      )
-    }
-
-    const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-    if (!result) {
-      return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-    }
-
-    if (result.role !== 'admin' && result.role !== 'owner') {
-      return NextResponse.json({ error: 'Admin or owner permissions required' }, { status: 403 })
-    }
-
-    const body = await req.json()
-    const updates = updateSchema.parse(body)
-
-    if (updates.name) {
-      const existingGroup = await db
-        .select({ id: permissionGroup.id })
-        .from(permissionGroup)
-        .where(
-          and(
-            eq(permissionGroup.organizationId, result.group.organizationId),
-            eq(permissionGroup.name, updates.name)
-          )
-        )
-        .limit(1)
-
-      if (existingGroup.length > 0 && existingGroup[0].id !== id) {
-        return NextResponse.json(
-          { error: 'A permission group with this name already exists' },
-          { status: 409 }
-        )
-      }
-    }
-
-    const currentConfig = parsePermissionGroupConfig(result.group.config)
-    const newConfig: PermissionGroupConfig = updates.config
-      ? { ...currentConfig, ...updates.config }
-      : currentConfig
-
-    await db
-      .update(permissionGroup)
-      .set({
-        ...(updates.name !== undefined && { name: updates.name }),
-        ...(updates.description !== undefined && { description: updates.description }),
-        config: newConfig,
-        updatedAt: new Date(),
-      })
-      .where(eq(permissionGroup.id, id))
-
-    const [updated] = await db
-      .select()
-      .from(permissionGroup)
-      .where(eq(permissionGroup.id, id))
-      .limit(1)
-
-    return NextResponse.json({
-      permissionGroup: {
-        ...updated,
-        config: parsePermissionGroupConfig(updated.config),
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json({ error: error.errors[0].message }, { status: 400 })
-    }
-    logger.error('Error updating permission group', error)
-    return NextResponse.json({ error: 'Failed to update permission group' }, { status: 500 })
-  }
-}
-
-export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id } = await params
-
-  try {
-    const hasAccess = await hasAccessControlAccess(session.user.id)
-    if (!hasAccess) {
-      return NextResponse.json(
-        { error: 'Access Control is an Enterprise feature' },
-        { status: 403 }
-      )
-    }
-
-    const result = await getPermissionGroupWithAccess(id, session.user.id)
-
-    if (!result) {
-      return NextResponse.json({ error: 'Permission group not found' }, { status: 404 })
-    }
-
-    if (result.role !== 'admin' && result.role !== 'owner') {
-      return NextResponse.json({ error: 'Admin or owner permissions required' }, { status: 403 })
-    }
-
-    await db.delete(permissionGroupMember).where(eq(permissionGroupMember.permissionGroupId, id))
-    await db.delete(permissionGroup).where(eq(permissionGroup.id, id))
-
-    logger.info('Deleted permission group', { permissionGroupId: id, userId: session.user.id })
-
-    return NextResponse.json({ success: true })
-  } catch (error) {
-    logger.error('Error deleting permission group', error)
-    return NextResponse.json({ error: 'Failed to delete permission group' }, { status: 500 })
-  }
-}

apps/sim/app/api/permission-groups/route.ts

@@ -1,185 +0,0 @@
-import { db } from '@sim/db'
-import { member, organization, permissionGroup, permissionGroupMember, user } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, count, desc, eq } from 'drizzle-orm'
-import { NextResponse } from 'next/server'
-import { z } from 'zod'
-import { getSession } from '@/lib/auth'
-import { hasAccessControlAccess } from '@/lib/billing'
-import {
-  DEFAULT_PERMISSION_GROUP_CONFIG,
-  type PermissionGroupConfig,
-  parsePermissionGroupConfig,
-} from '@/lib/permission-groups/types'
-
-const logger = createLogger('PermissionGroups')
-
-const configSchema = z.object({
-  allowedIntegrations: z.array(z.string()).nullable().optional(),
-  allowedModelProviders: z.array(z.string()).nullable().optional(),
-  hideTraceSpans: z.boolean().optional(),
-  hideKnowledgeBaseTab: z.boolean().optional(),
-  hideCopilot: z.boolean().optional(),
-  hideApiKeysTab: z.boolean().optional(),
-  hideEnvironmentTab: z.boolean().optional(),
-  hideFilesTab: z.boolean().optional(),
-  disableMcpTools: z.boolean().optional(),
-  disableCustomTools: z.boolean().optional(),
-  hideTemplates: z.boolean().optional(),
-})
-
-const createSchema = z.object({
-  organizationId: z.string().min(1),
-  name: z.string().trim().min(1).max(100),
-  description: z.string().max(500).optional(),
-  config: configSchema.optional(),
-})
-
-export async function GET(req: Request) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { searchParams } = new URL(req.url)
-  const organizationId = searchParams.get('organizationId')
-
-  if (!organizationId) {
-    return NextResponse.json({ error: 'organizationId is required' }, { status: 400 })
-  }
-
-  const membership = await db
-    .select({ id: member.id, role: member.role })
-    .from(member)
-    .where(and(eq(member.userId, session.user.id), eq(member.organizationId, organizationId)))
-    .limit(1)
-
-  if (membership.length === 0) {
-    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
-  }
-
-  const groups = await db
-    .select({
-      id: permissionGroup.id,
-      name: permissionGroup.name,
-      description: permissionGroup.description,
-      config: permissionGroup.config,
-      createdBy: permissionGroup.createdBy,
-      createdAt: permissionGroup.createdAt,
-      updatedAt: permissionGroup.updatedAt,
-      creatorName: user.name,
-      creatorEmail: user.email,
-    })
-    .from(permissionGroup)
-    .leftJoin(user, eq(permissionGroup.createdBy, user.id))
-    .where(eq(permissionGroup.organizationId, organizationId))
-    .orderBy(desc(permissionGroup.createdAt))
-
-  const groupsWithCounts = await Promise.all(
-    groups.map(async (group) => {
-      const [memberCount] = await db
-        .select({ count: count() })
-        .from(permissionGroupMember)
-        .where(eq(permissionGroupMember.permissionGroupId, group.id))
-
-      return {
-        ...group,
-        config: parsePermissionGroupConfig(group.config),
-        memberCount: memberCount?.count ?? 0,
-      }
-    })
-  )
-
-  return NextResponse.json({ permissionGroups: groupsWithCounts })
-}
-
-export async function POST(req: Request) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  try {
-    const hasAccess = await hasAccessControlAccess(session.user.id)
-    if (!hasAccess) {
-      return NextResponse.json(
-        { error: 'Access Control is an Enterprise feature' },
-        { status: 403 }
-      )
-    }
-
-    const body = await req.json()
-    const { organizationId, name, description, config } = createSchema.parse(body)
-
-    const membership = await db
-      .select({ id: member.id, role: member.role })
-      .from(member)
-      .where(and(eq(member.userId, session.user.id), eq(member.organizationId, organizationId)))
-      .limit(1)
-
-    const role = membership[0]?.role
-    if (membership.length === 0 || (role !== 'admin' && role !== 'owner')) {
-      return NextResponse.json({ error: 'Admin or owner permissions required' }, { status: 403 })
-    }
-
-    const orgExists = await db
-      .select({ id: organization.id })
-      .from(organization)
-      .where(eq(organization.id, organizationId))
-      .limit(1)
-
-    if (orgExists.length === 0) {
-      return NextResponse.json({ error: 'Organization not found' }, { status: 404 })
-    }
-
-    const existingGroup = await db
-      .select({ id: permissionGroup.id })
-      .from(permissionGroup)
-      .where(
-        and(eq(permissionGroup.organizationId, organizationId), eq(permissionGroup.name, name))
-      )
-      .limit(1)
-
-    if (existingGroup.length > 0) {
-      return NextResponse.json(
-        { error: 'A permission group with this name already exists' },
-        { status: 409 }
-      )
-    }
-
-    const groupConfig: PermissionGroupConfig = {
-      ...DEFAULT_PERMISSION_GROUP_CONFIG,
-      ...config,
-    }
-
-    const now = new Date()
-    const newGroup = {
-      id: crypto.randomUUID(),
-      organizationId,
-      name,
-      description: description || null,
-      config: groupConfig,
-      createdBy: session.user.id,
-      createdAt: now,
-      updatedAt: now,
-    }
-
-    await db.insert(permissionGroup).values(newGroup)
-
-    logger.info('Created permission group', {
-      permissionGroupId: newGroup.id,
-      organizationId,
-      userId: session.user.id,
-    })
-
-    return NextResponse.json({ permissionGroup: newGroup }, { status: 201 })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json({ error: error.errors[0].message }, { status: 400 })
-    }
-    logger.error('Error creating permission group', error)
-    return NextResponse.json({ error: 'Failed to create permission group' }, { status: 500 })
-  }
-}

apps/sim/app/api/permission-groups/user/route.ts

@@ -1,72 +0,0 @@
-import { db } from '@sim/db'
-import { member, permissionGroup, permissionGroupMember } from '@sim/db/schema'
-import { and, eq } from 'drizzle-orm'
-import { NextResponse } from 'next/server'
-import { getSession } from '@/lib/auth'
-import { isOrganizationOnEnterprisePlan } from '@/lib/billing'
-import { parsePermissionGroupConfig } from '@/lib/permission-groups/types'
-
-export async function GET(req: Request) {
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { searchParams } = new URL(req.url)
-  const organizationId = searchParams.get('organizationId')
-
-  if (!organizationId) {
-    return NextResponse.json({ error: 'organizationId is required' }, { status: 400 })
-  }
-
-  const [membership] = await db
-    .select({ id: member.id })
-    .from(member)
-    .where(and(eq(member.userId, session.user.id), eq(member.organizationId, organizationId)))
-    .limit(1)
-
-  if (!membership) {
-    return NextResponse.json({ error: 'Not a member of this organization' }, { status: 403 })
-  }
-
-  // Short-circuit: if org is not on enterprise plan, ignore permission configs
-  const isEnterprise = await isOrganizationOnEnterprisePlan(organizationId)
-  if (!isEnterprise) {
-    return NextResponse.json({
-      permissionGroupId: null,
-      groupName: null,
-      config: null,
-    })
-  }
-
-  const [groupMembership] = await db
-    .select({
-      permissionGroupId: permissionGroupMember.permissionGroupId,
-      config: permissionGroup.config,
-      groupName: permissionGroup.name,
-    })
-    .from(permissionGroupMember)
-    .innerJoin(permissionGroup, eq(permissionGroupMember.permissionGroupId, permissionGroup.id))
-    .where(
-      and(
-        eq(permissionGroupMember.userId, session.user.id),
-        eq(permissionGroup.organizationId, organizationId)
-      )
-    )
-    .limit(1)
-
-  if (!groupMembership) {
-    return NextResponse.json({
-      permissionGroupId: null,
-      groupName: null,
-      config: null,
-    })
-  }
-
-  return NextResponse.json({
-    permissionGroupId: groupMembership.permissionGroupId,
-    groupName: groupMembership.groupName,
-    config: parsePermissionGroupConfig(groupMembership.config),
-  })
-}

apps/sim/app/api/proxy/tts/stream/route.ts

@@ -4,8 +4,8 @@ import { createLogger } from '@sim/logger'
 import { eq } from 'drizzle-orm'
 import type { NextRequest } from 'next/server'
 import { env } from '@/lib/core/config/env'
-import { validateAuthToken } from '@/lib/core/security/deployment'
 import { validateAlphanumericId } from '@/lib/core/security/input-validation'
+import { validateAuthToken } from '@/app/api/chat/utils'
 
 const logger = createLogger('ProxyTTSStreamAPI')
 

apps/sim/app/api/schedules/[id]/route.test.ts

@@ -3,7 +3,6 @@
  *
  * @vitest-environment node
  */
-import { loggerMock } from '@sim/testing'
 import { NextRequest } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -44,7 +43,14 @@ vi.mock('@/lib/core/utils/request', () => ({
   generateRequestId: () => 'test-request-id',
 }))
 
-vi.mock('@sim/logger', () => loggerMock)
+vi.mock('@sim/logger', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+}))
 
 import { PUT } from './route'
 

apps/sim/app/api/schedules/route.test.ts

@@ -3,7 +3,6 @@
  *
  * @vitest-environment node
  */
-import { loggerMock } from '@sim/testing'
 import { NextRequest } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -41,7 +40,13 @@ vi.mock('@/lib/core/utils/request', () => ({
   generateRequestId: () => 'test-request-id',
 }))
 
-vi.mock('@sim/logger', () => loggerMock)
+vi.mock('@sim/logger', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}))
 
 import { GET } from '@/app/api/schedules/route'
 

apps/sim/app/api/tools/custom/route.test.ts

@@ -1,14 +1,14 @@
+import { NextRequest } from 'next/server'
 /**
  * Tests for custom tools API routes
  *
  * @vitest-environment node
  */
-import { loggerMock } from '@sim/testing'
-import { NextRequest } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMockRequest } from '@/app/api/__test-utils__/utils'
 
 describe('Custom Tools API Routes', () => {
+  // Sample data for testing
   const sampleTools = [
     {
       id: 'tool-1',
@@ -66,6 +66,7 @@ describe('Custom Tools API Routes', () => {
     },
   ]
 
+  // Mock implementation stubs
   const mockSelect = vi.fn()
   const mockFrom = vi.fn()
   const mockWhere = vi.fn()
@@ -81,9 +82,13 @@ describe('Custom Tools API Routes', () => {
   beforeEach(() => {
     vi.resetModules()
 
+    // Reset all mock implementations
     mockSelect.mockReturnValue({ from: mockFrom })
     mockFrom.mockReturnValue({ where: mockWhere })
+    // where() can be called with orderBy(), limit(), or directly awaited
+    // Create a mock query builder that supports all patterns
     mockWhere.mockImplementation((condition) => {
+      // Return an object that is both awaitable and has orderBy() and limit() methods
       const queryBuilder = {
         orderBy: mockOrderBy,
         limit: mockLimit,
@@ -96,6 +101,7 @@ describe('Custom Tools API Routes', () => {
       return queryBuilder
     })
     mockOrderBy.mockImplementation(() => {
+      // orderBy returns an awaitable query builder
       const queryBuilder = {
         limit: mockLimit,
         then: (resolve: (value: typeof sampleTools) => void) => {
@@ -113,6 +119,7 @@ describe('Custom Tools API Routes', () => {
     mockSet.mockReturnValue({ where: mockWhere })
     mockDelete.mockReturnValue({ where: mockWhere })
 
+    // Mock database
     vi.doMock('@sim/db', () => ({
       db: {
         select: mockSelect,
@@ -120,11 +127,14 @@ describe('Custom Tools API Routes', () => {
         update: mockUpdate,
         delete: mockDelete,
         transaction: vi.fn().mockImplementation(async (callback) => {
+          // Execute the callback with a transaction object that has the same methods
+          // Create transaction-specific mocks that follow the same pattern
           const txMockSelect = vi.fn().mockReturnValue({ from: mockFrom })
           const txMockInsert = vi.fn().mockReturnValue({ values: mockValues })
           const txMockUpdate = vi.fn().mockReturnValue({ set: mockSet })
           const txMockDelete = vi.fn().mockReturnValue({ where: mockWhere })
 
+          // Transaction where() should also support the query builder pattern with orderBy
           const txMockOrderBy = vi.fn().mockImplementation(() => {
             const queryBuilder = {
               limit: mockLimit,
@@ -150,6 +160,7 @@ describe('Custom Tools API Routes', () => {
             return queryBuilder
           })
 
+          // Update mockFrom to return txMockWhere for transaction queries
           const txMockFrom = vi.fn().mockReturnValue({ where: txMockWhere })
           txMockSelect.mockReturnValue({ from: txMockFrom })
 
@@ -163,6 +174,7 @@ describe('Custom Tools API Routes', () => {
       },
     }))
 
+    // Mock schema
     vi.doMock('@sim/db/schema', () => ({
       customTools: {
         id: 'id',
@@ -177,10 +189,12 @@ describe('Custom Tools API Routes', () => {
       },
     }))
 
+    // Mock authentication
     vi.doMock('@/lib/auth', () => ({
       getSession: vi.fn().mockResolvedValue(mockSession),
     }))
 
+    // Mock hybrid auth
     vi.doMock('@/lib/auth/hybrid', () => ({
       checkHybridAuth: vi.fn().mockResolvedValue({
         success: true,
@@ -189,12 +203,22 @@ describe('Custom Tools API Routes', () => {
       }),
     }))
 
+    // Mock permissions
     vi.doMock('@/lib/workspaces/permissions/utils', () => ({
       getUserEntityPermissions: vi.fn().mockResolvedValue('admin'),
     }))
 
-    vi.doMock('@sim/logger', () => loggerMock)
+    // Mock logger
+    vi.doMock('@sim/logger', () => ({
+      createLogger: vi.fn().mockReturnValue({
+        info: vi.fn(),
+        error: vi.fn(),
+        warn: vi.fn(),
+        debug: vi.fn(),
+      }),
+    }))
 
+    // Mock drizzle-orm functions
     vi.doMock('drizzle-orm', async () => {
       const actual = await vi.importActual('drizzle-orm')
       return {
@@ -208,10 +232,12 @@ describe('Custom Tools API Routes', () => {
       }
     })
 
+    // Mock utils
     vi.doMock('@/lib/core/utils/request', () => ({
       generateRequestId: vi.fn().mockReturnValue('test-request-id'),
     }))
 
+    // Mock custom tools operations
     vi.doMock('@/lib/workflows/custom-tools/operations', () => ({
       upsertCustomTools: vi.fn().mockResolvedValue(sampleTools),
     }))
@@ -226,23 +252,29 @@ describe('Custom Tools API Routes', () => {
    */
   describe('GET /api/tools/custom', () => {
     it('should return tools for authenticated user with workspaceId', async () => {
+      // Create mock request with workspaceId
       const req = new NextRequest(
         'http://localhost:3000/api/tools/custom?workspaceId=workspace-123'
       )
 
+      // Simulate DB returning tools with orderBy chain
       mockWhere.mockReturnValueOnce({
         orderBy: mockOrderBy.mockReturnValueOnce(Promise.resolve(sampleTools)),
       })
 
+      // Import handler after mocks are set up
       const { GET } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await GET(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(200)
       expect(data).toHaveProperty('data')
       expect(data.data).toEqual(sampleTools)
 
+      // Verify DB query
       expect(mockSelect).toHaveBeenCalled()
       expect(mockFrom).toHaveBeenCalled()
       expect(mockWhere).toHaveBeenCalled()
@@ -250,10 +282,12 @@ describe('Custom Tools API Routes', () => {
     })
 
     it('should handle unauthorized access', async () => {
+      // Create mock request
       const req = new NextRequest(
         'http://localhost:3000/api/tools/custom?workspaceId=workspace-123'
       )
 
+      // Mock hybrid auth to return unauthorized
       vi.doMock('@/lib/auth/hybrid', () => ({
         checkHybridAuth: vi.fn().mockResolvedValue({
           success: false,
@@ -261,20 +295,26 @@ describe('Custom Tools API Routes', () => {
         }),
       }))
 
+      // Import handler after mocks are set up
       const { GET } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await GET(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(401)
       expect(data).toHaveProperty('error', 'Unauthorized')
     })
 
     it('should handle workflowId parameter', async () => {
+      // Create mock request with workflowId parameter
       const req = new NextRequest('http://localhost:3000/api/tools/custom?workflowId=workflow-123')
 
+      // Mock workflow lookup to return workspaceId (for limit(1) call)
       mockLimit.mockResolvedValueOnce([{ workspaceId: 'workspace-123' }])
 
+      // Mock the where() call for fetching tools (returns awaitable query builder)
       mockWhere.mockImplementationOnce((condition) => {
         const queryBuilder = {
           limit: mockLimit,
@@ -287,14 +327,18 @@ describe('Custom Tools API Routes', () => {
         return queryBuilder
       })
 
+      // Import handler after mocks are set up
       const { GET } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await GET(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(200)
       expect(data).toHaveProperty('data')
 
+      // Verify DB query was called
       expect(mockWhere).toHaveBeenCalled()
     })
   })
@@ -304,6 +348,7 @@ describe('Custom Tools API Routes', () => {
    */
   describe('POST /api/tools/custom', () => {
     it('should reject unauthorized requests', async () => {
+      // Mock hybrid auth to return unauthorized
       vi.doMock('@/lib/auth/hybrid', () => ({
         checkHybridAuth: vi.fn().mockResolvedValue({
           success: false,
@@ -311,29 +356,39 @@ describe('Custom Tools API Routes', () => {
         }),
       }))
 
+      // Create mock request
       const req = createMockRequest('POST', { tools: [], workspaceId: 'workspace-123' })
 
+      // Import handler after mocks are set up
       const { POST } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await POST(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(401)
       expect(data).toHaveProperty('error', 'Unauthorized')
     })
 
     it('should validate request data', async () => {
+      // Create invalid tool data (missing required fields)
       const invalidTool = {
+        // Missing title, schema
         code: 'return "invalid";',
       }
 
+      // Create mock request with invalid tool and workspaceId
       const req = createMockRequest('POST', { tools: [invalidTool], workspaceId: 'workspace-123' })
 
+      // Import handler after mocks are set up
       const { POST } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await POST(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(400)
       expect(data).toHaveProperty('error', 'Invalid request data')
       expect(data).toHaveProperty('details')
@@ -345,74 +400,96 @@ describe('Custom Tools API Routes', () => {
    */
   describe('DELETE /api/tools/custom', () => {
     it('should delete a workspace-scoped tool by ID', async () => {
+      // Mock finding existing workspace-scoped tool
       mockLimit.mockResolvedValueOnce([sampleTools[0]])
 
+      // Create mock request with ID and workspaceId parameters
       const req = new NextRequest(
         'http://localhost:3000/api/tools/custom?id=tool-1&workspaceId=workspace-123'
       )
 
+      // Import handler after mocks are set up
       const { DELETE } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await DELETE(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(200)
       expect(data).toHaveProperty('success', true)
 
+      // Verify delete was called with correct parameters
       expect(mockDelete).toHaveBeenCalled()
       expect(mockWhere).toHaveBeenCalled()
     })
 
     it('should reject requests missing tool ID', async () => {
+      // Create mock request without ID parameter
       const req = createMockRequest('DELETE')
 
+      // Import handler after mocks are set up
       const { DELETE } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await DELETE(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(400)
       expect(data).toHaveProperty('error', 'Tool ID is required')
     })
 
     it('should handle tool not found', async () => {
+      // Mock tool not found
       mockLimit.mockResolvedValueOnce([])
 
+      // Create mock request with non-existent ID
       const req = new NextRequest('http://localhost:3000/api/tools/custom?id=non-existent')
 
+      // Import handler after mocks are set up
       const { DELETE } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await DELETE(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(404)
       expect(data).toHaveProperty('error', 'Tool not found')
     })
 
     it('should prevent unauthorized deletion of user-scoped tool', async () => {
+      // Mock hybrid auth for the DELETE request
       vi.doMock('@/lib/auth/hybrid', () => ({
         checkHybridAuth: vi.fn().mockResolvedValue({
           success: true,
-          userId: 'user-456',
+          userId: 'user-456', // Different user
           authType: 'session',
         }),
       }))
 
+      // Mock finding user-scoped tool (no workspaceId) that belongs to user-123
       const userScopedTool = { ...sampleTools[0], workspaceId: null, userId: 'user-123' }
       mockLimit.mockResolvedValueOnce([userScopedTool])
 
+      // Create mock request (no workspaceId for user-scoped tool)
       const req = new NextRequest('http://localhost:3000/api/tools/custom?id=tool-1')
 
+      // Import handler after mocks are set up
       const { DELETE } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await DELETE(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(403)
       expect(data).toHaveProperty('error', 'Access denied')
     })
 
     it('should reject unauthorized requests', async () => {
+      // Mock hybrid auth to return unauthorized
       vi.doMock('@/lib/auth/hybrid', () => ({
         checkHybridAuth: vi.fn().mockResolvedValue({
           success: false,
@@ -420,13 +497,17 @@ describe('Custom Tools API Routes', () => {
         }),
       }))
 
+      // Create mock request
       const req = new NextRequest('http://localhost:3000/api/tools/custom?id=tool-1')
 
+      // Import handler after mocks are set up
       const { DELETE } = await import('@/app/api/tools/custom/route')
 
+      // Call the handler
       const response = await DELETE(req)
       const data = await response.json()
 
+      // Verify response
       expect(response.status).toBe(401)
       expect(data).toHaveProperty('error', 'Unauthorized')
     })

apps/sim/app/api/v1/admin/access-control/route.ts

@@ -1,169 +0,0 @@
-/**
- * Admin Access Control (Permission Groups) API
- *
- * GET /api/v1/admin/access-control
- *   List all permission groups with optional filtering.
- *
- *   Query Parameters:
- *     - organizationId?: string - Filter by organization ID
- *
- *   Response: { data: AdminPermissionGroup[], pagination: PaginationMeta }
- *
- * DELETE /api/v1/admin/access-control
- *   Delete permission groups for an organization.
- *   Used when an enterprise plan churns to clean up access control data.
- *
- *   Query Parameters:
- *     - organizationId: string - Delete all permission groups for this organization
- *
- *   Response: { success: true, deletedCount: number, membersRemoved: number }
- */
-
-import { db } from '@sim/db'
-import { organization, permissionGroup, permissionGroupMember, user } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { count, eq, inArray, sql } from 'drizzle-orm'
-import { withAdminAuth } from '@/app/api/v1/admin/middleware'
-import {
-  badRequestResponse,
-  internalErrorResponse,
-  singleResponse,
-} from '@/app/api/v1/admin/responses'
-
-const logger = createLogger('AdminAccessControlAPI')
-
-export interface AdminPermissionGroup {
-  id: string
-  organizationId: string
-  organizationName: string | null
-  name: string
-  description: string | null
-  memberCount: number
-  createdAt: string
-  createdByUserId: string
-  createdByEmail: string | null
-}
-
-export const GET = withAdminAuth(async (request) => {
-  const url = new URL(request.url)
-  const organizationId = url.searchParams.get('organizationId')
-
-  try {
-    const baseQuery = db
-      .select({
-        id: permissionGroup.id,
-        organizationId: permissionGroup.organizationId,
-        organizationName: organization.name,
-        name: permissionGroup.name,
-        description: permissionGroup.description,
-        createdAt: permissionGroup.createdAt,
-        createdByUserId: permissionGroup.createdBy,
-        createdByEmail: user.email,
-      })
-      .from(permissionGroup)
-      .leftJoin(organization, eq(permissionGroup.organizationId, organization.id))
-      .leftJoin(user, eq(permissionGroup.createdBy, user.id))
-
-    let groups
-    if (organizationId) {
-      groups = await baseQuery.where(eq(permissionGroup.organizationId, organizationId))
-    } else {
-      groups = await baseQuery
-    }
-
-    const groupsWithCounts = await Promise.all(
-      groups.map(async (group) => {
-        const [memberCount] = await db
-          .select({ count: count() })
-          .from(permissionGroupMember)
-          .where(eq(permissionGroupMember.permissionGroupId, group.id))
-
-        return {
-          id: group.id,
-          organizationId: group.organizationId,
-          organizationName: group.organizationName,
-          name: group.name,
-          description: group.description,
-          memberCount: memberCount?.count ?? 0,
-          createdAt: group.createdAt.toISOString(),
-          createdByUserId: group.createdByUserId,
-          createdByEmail: group.createdByEmail,
-        } as AdminPermissionGroup
-      })
-    )
-
-    logger.info('Admin API: Listed permission groups', {
-      organizationId,
-      count: groupsWithCounts.length,
-    })
-
-    return singleResponse({
-      data: groupsWithCounts,
-      pagination: {
-        total: groupsWithCounts.length,
-        limit: groupsWithCounts.length,
-        offset: 0,
-        hasMore: false,
-      },
-    })
-  } catch (error) {
-    logger.error('Admin API: Failed to list permission groups', { error, organizationId })
-    return internalErrorResponse('Failed to list permission groups')
-  }
-})
-
-export const DELETE = withAdminAuth(async (request) => {
-  const url = new URL(request.url)
-  const organizationId = url.searchParams.get('organizationId')
-  const reason = url.searchParams.get('reason') || 'Enterprise plan churn cleanup'
-
-  if (!organizationId) {
-    return badRequestResponse('organizationId is required')
-  }
-
-  try {
-    const existingGroups = await db
-      .select({ id: permissionGroup.id })
-      .from(permissionGroup)
-      .where(eq(permissionGroup.organizationId, organizationId))
-
-    if (existingGroups.length === 0) {
-      logger.info('Admin API: No permission groups to delete', { organizationId })
-      return singleResponse({
-        success: true,
-        deletedCount: 0,
-        membersRemoved: 0,
-        message: 'No permission groups found for the given organization',
-      })
-    }
-
-    const groupIds = existingGroups.map((g) => g.id)
-
-    const [memberCountResult] = await db
-      .select({ count: sql<number>`count(*)` })
-      .from(permissionGroupMember)
-      .where(inArray(permissionGroupMember.permissionGroupId, groupIds))
-
-    const membersToRemove = Number(memberCountResult?.count ?? 0)
-
-    // Members are deleted via cascade when permission groups are deleted
-    await db.delete(permissionGroup).where(eq(permissionGroup.organizationId, organizationId))
-
-    logger.info('Admin API: Deleted permission groups', {
-      organizationId,
-      deletedCount: existingGroups.length,
-      membersRemoved: membersToRemove,
-      reason,
-    })
-
-    return singleResponse({
-      success: true,
-      deletedCount: existingGroups.length,
-      membersRemoved: membersToRemove,
-      reason,
-    })
-  } catch (error) {
-    logger.error('Admin API: Failed to delete permission groups', { error, organizationId })
-    return internalErrorResponse('Failed to delete permission groups')
-  }
-})

apps/sim/app/api/v1/admin/index.ts

@@ -36,7 +36,6 @@
  *
  *   Organizations:
  *   GET    /api/v1/admin/organizations                      - List all organizations
- *   POST   /api/v1/admin/organizations                      - Create organization (requires ownerId)
  *   GET    /api/v1/admin/organizations/:id                  - Get organization details
  *   PATCH  /api/v1/admin/organizations/:id                  - Update organization
  *   GET    /api/v1/admin/organizations/:id/members          - List organization members
@@ -56,10 +55,6 @@
  *   BYOK Keys:
  *   GET    /api/v1/admin/byok                               - List BYOK keys (?organizationId=X or ?workspaceId=X)
  *   DELETE /api/v1/admin/byok                               - Delete BYOK keys for org/workspace
- *
- *   Access Control (Permission Groups):
- *   GET    /api/v1/admin/access-control                     - List permission groups (?organizationId=X)
- *   DELETE /api/v1/admin/access-control                     - Delete permission groups for org (?organizationId=X)
  */
 
 export type { AdminAuthFailure, AdminAuthResult, AdminAuthSuccess } from '@/app/api/v1/admin/auth'

apps/sim/app/api/v1/admin/organizations/[id]/billing/route.ts

@@ -16,11 +16,10 @@
  */
 
 import { db } from '@sim/db'
-import { member, organization } from '@sim/db/schema'
+import { organization } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { count, eq } from 'drizzle-orm'
+import { eq } from 'drizzle-orm'
 import { getOrganizationBillingData } from '@/lib/billing/core/organization'
-import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { withAdminAuthParams } from '@/app/api/v1/admin/middleware'
 import {
   badRequestResponse,
@@ -40,42 +39,6 @@ export const GET = withAdminAuthParams<RouteParams>(async (_, context) => {
   const { id: organizationId } = await context.params
 
   try {
-    if (!isBillingEnabled) {
-      const [[orgData], [memberCount]] = await Promise.all([
-        db.select().from(organization).where(eq(organization.id, organizationId)).limit(1),
-        db.select({ count: count() }).from(member).where(eq(member.organizationId, organizationId)),
-      ])
-
-      if (!orgData) {
-        return notFoundResponse('Organization')
-      }
-
-      const data: AdminOrganizationBillingSummary = {
-        organizationId: orgData.id,
-        organizationName: orgData.name,
-        subscriptionPlan: 'none',
-        subscriptionStatus: 'none',
-        totalSeats: Number.MAX_SAFE_INTEGER,
-        usedSeats: memberCount?.count || 0,
-        availableSeats: Number.MAX_SAFE_INTEGER,
-        totalCurrentUsage: 0,
-        totalUsageLimit: Number.MAX_SAFE_INTEGER,
-        minimumBillingAmount: 0,
-        averageUsagePerMember: 0,
-        usagePercentage: 0,
-        billingPeriodStart: null,
-        billingPeriodEnd: null,
-        membersOverLimit: 0,
-        membersNearLimit: 0,
-      }
-
-      logger.info(
-        `Admin API: Retrieved billing summary for organization ${organizationId} (billing disabled)`
-      )
-
-      return singleResponse(data)
-    }
-
     const billingData = await getOrganizationBillingData(organizationId)
 
     if (!billingData) {

apps/sim/app/api/v1/admin/organizations/[id]/members/[memberId]/route.ts

@@ -30,7 +30,6 @@ import { member, organization, user, userStats } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { and, eq } from 'drizzle-orm'
 import { removeUserFromOrganization } from '@/lib/billing/organizations/membership'
-import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { withAdminAuthParams } from '@/app/api/v1/admin/middleware'
 import {
   badRequestResponse,
@@ -183,7 +182,7 @@ export const PATCH = withAdminAuthParams<RouteParams>(async (request, context) =
 export const DELETE = withAdminAuthParams<RouteParams>(async (request, context) => {
   const { id: organizationId, memberId } = await context.params
   const url = new URL(request.url)
-  const skipBillingLogic = !isBillingEnabled || url.searchParams.get('skipBillingLogic') === 'true'
+  const skipBillingLogic = url.searchParams.get('skipBillingLogic') === 'true'
 
   try {
     const [orgData] = await db

apps/sim/app/api/v1/admin/organizations/[id]/members/route.ts

@@ -34,7 +34,6 @@ import { createLogger } from '@sim/logger'
 import { count, eq } from 'drizzle-orm'
 import { addUserToOrganization } from '@/lib/billing/organizations/membership'
 import { requireStripeClient } from '@/lib/billing/stripe-client'
-import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { withAdminAuthParams } from '@/app/api/v1/admin/middleware'
 import {
   badRequestResponse,
@@ -222,14 +221,14 @@ export const POST = withAdminAuthParams<RouteParams>(async (request, context) =>
       userId: body.userId,
       organizationId,
       role: body.role,
-      skipBillingLogic: !isBillingEnabled,
     })
 
     if (!result.success) {
       return badRequestResponse(result.error || 'Failed to add member')
     }
 
-    if (isBillingEnabled && result.billingActions.proSubscriptionToCancel?.stripeSubscriptionId) {
+    // Sync Pro subscription cancellation with Stripe (same as invitation flow)
+    if (result.billingActions.proSubscriptionToCancel?.stripeSubscriptionId) {
       try {
         const stripe = requireStripeClient()
         await stripe.subscriptions.update(

apps/sim/app/api/v1/admin/organizations/route.ts

@@ -8,32 +8,14 @@
  *   - offset: number (default: 0)
  *
  * Response: AdminListResponse<AdminOrganization>
- *
- * POST /api/v1/admin/organizations
- *
- * Create a new organization.
- *
- * Body:
- *   - name: string - Organization name (required)
- *   - slug: string - Organization slug (optional, auto-generated from name if not provided)
- *   - ownerId: string - User ID of the organization owner (required)
- *
- * Response: AdminSingleResponse<AdminOrganization & { memberId: string }>
  */
 
-import { randomUUID } from 'crypto'
 import { db } from '@sim/db'
-import { member, organization, user } from '@sim/db/schema'
+import { organization } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { count, eq } from 'drizzle-orm'
+import { count } from 'drizzle-orm'
 import { withAdminAuth } from '@/app/api/v1/admin/middleware'
-import {
-  badRequestResponse,
-  internalErrorResponse,
-  listResponse,
-  notFoundResponse,
-  singleResponse,
-} from '@/app/api/v1/admin/responses'
+import { internalErrorResponse, listResponse } from '@/app/api/v1/admin/responses'
 import {
   type AdminOrganization,
   createPaginationMeta,
@@ -65,90 +47,3 @@ export const GET = withAdminAuth(async (request) => {
     return internalErrorResponse('Failed to list organizations')
   }
 })
-
-export const POST = withAdminAuth(async (request) => {
-  try {
-    const body = await request.json()
-
-    if (!body.name || typeof body.name !== 'string' || body.name.trim().length === 0) {
-      return badRequestResponse('name is required')
-    }
-
-    if (!body.ownerId || typeof body.ownerId !== 'string') {
-      return badRequestResponse('ownerId is required')
-    }
-
-    const [ownerData] = await db
-      .select({ id: user.id, name: user.name })
-      .from(user)
-      .where(eq(user.id, body.ownerId))
-      .limit(1)
-
-    if (!ownerData) {
-      return notFoundResponse('Owner user')
-    }
-
-    const [existingMembership] = await db
-      .select({ organizationId: member.organizationId })
-      .from(member)
-      .where(eq(member.userId, body.ownerId))
-      .limit(1)
-
-    if (existingMembership) {
-      return badRequestResponse(
-        'User is already a member of another organization. Users can only belong to one organization at a time.'
-      )
-    }
-
-    const name = body.name.trim()
-    const slug =
-      body.slug?.trim() ||
-      name
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-|-$/g, '')
-
-    const organizationId = randomUUID()
-    const memberId = randomUUID()
-    const now = new Date()
-
-    await db.transaction(async (tx) => {
-      await tx.insert(organization).values({
-        id: organizationId,
-        name,
-        slug,
-        createdAt: now,
-        updatedAt: now,
-      })
-
-      await tx.insert(member).values({
-        id: memberId,
-        userId: body.ownerId,
-        organizationId,
-        role: 'owner',
-        createdAt: now,
-      })
-    })
-
-    const [createdOrg] = await db
-      .select()
-      .from(organization)
-      .where(eq(organization.id, organizationId))
-      .limit(1)
-
-    logger.info(`Admin API: Created organization ${organizationId}`, {
-      name,
-      slug,
-      ownerId: body.ownerId,
-      memberId,
-    })
-
-    return singleResponse({
-      ...toAdminOrganization(createdOrg),
-      memberId,
-    })
-  } catch (error) {
-    logger.error('Admin API: Failed to create organization', { error })
-    return internalErrorResponse('Failed to create organization')
-  }
-})

apps/sim/app/api/v1/admin/workflows/import/route.ts

@@ -19,7 +19,6 @@ import { workflow, workspace } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { eq } from 'drizzle-orm'
 import { NextResponse } from 'next/server'
-import { parseWorkflowJson } from '@/lib/workflows/operations/import-export'
 import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
 import { withAdminAuth } from '@/app/api/v1/admin/middleware'
 import {
@@ -32,6 +31,7 @@ import {
   type WorkflowImportRequest,
   type WorkflowVariable,
 } from '@/app/api/v1/admin/types'
+import { parseWorkflowJson } from '@/stores/workflows/json/importer'
 
 const logger = createLogger('AdminWorkflowImportAPI')
 

apps/sim/app/api/v1/admin/workspaces/[id]/import/route.ts

@@ -31,7 +31,6 @@ import { NextResponse } from 'next/server'
 import {
   extractWorkflowName,
   extractWorkflowsFromZip,
-  parseWorkflowJson,
 } from '@/lib/workflows/operations/import-export'
 import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
 import { withAdminAuthParams } from '@/app/api/v1/admin/middleware'
@@ -47,6 +46,7 @@ import {
   type WorkspaceImportRequest,
   type WorkspaceImportResponse,
 } from '@/app/api/v1/admin/types'
+import { parseWorkflowJson } from '@/stores/workflows/json/importer'
 
 const logger = createLogger('AdminWorkspaceImportAPI')
 

apps/sim/app/api/workflows/[id]/form/status/route.ts

@@ -1,47 +0,0 @@
-import { db } from '@sim/db'
-import { form } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq } from 'drizzle-orm'
-import type { NextRequest } from 'next/server'
-import { getSession } from '@/lib/auth'
-import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
-
-const logger = createLogger('FormStatusAPI')
-
-export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  try {
-    const session = await getSession()
-
-    if (!session) {
-      return createErrorResponse('Unauthorized', 401)
-    }
-
-    const { id: workflowId } = await params
-
-    const formResult = await db
-      .select({
-        id: form.id,
-        identifier: form.identifier,
-        title: form.title,
-        isActive: form.isActive,
-      })
-      .from(form)
-      .where(and(eq(form.workflowId, workflowId), eq(form.isActive, true)))
-      .limit(1)
-
-    if (formResult.length === 0) {
-      return createSuccessResponse({
-        isDeployed: false,
-        form: null,
-      })
-    }
-
-    return createSuccessResponse({
-      isDeployed: true,
-      form: formResult[0],
-    })
-  } catch (error: any) {
-    logger.error('Error fetching form status:', error)
-    return createErrorResponse(error.message || 'Failed to fetch form status', 500)
-  }
-}

apps/sim/app/api/workflows/[id]/route.test.ts

@@ -5,7 +5,6 @@
  * @vitest-environment node
  */
 
-import { loggerMock } from '@sim/testing'
 import { NextRequest } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -21,7 +20,14 @@ vi.mock('@/lib/auth', () => ({
   getSession: () => mockGetSession(),
 }))
 
-vi.mock('@sim/logger', () => loggerMock)
+vi.mock('@sim/logger', () => ({
+  createLogger: vi.fn(() => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  })),
+}))
 
 vi.mock('@/lib/workflows/persistence/utils', () => ({
   loadWorkflowFromNormalizedTables: (workflowId: string) =>

apps/sim/app/chat/[identifier]/chat.tsx

@@ -460,22 +460,43 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   )
 
   if (error) {
-    return <ChatErrorState error={error} />
+    return <ChatErrorState error={error} starCount={starCount} />
   }
 
   if (authRequired) {
-    // const title = new URLSearchParams(window.location.search).get('title') || 'chat'
-    // const primaryColor =
-    //   new URLSearchParams(window.location.search).get('color') || 'var(--brand-primary-hover-hex)'
+    const title = new URLSearchParams(window.location.search).get('title') || 'chat'
+    const primaryColor =
+      new URLSearchParams(window.location.search).get('color') || 'var(--brand-primary-hover-hex)'
 
     if (authRequired === 'password') {
-      return <PasswordAuth identifier={identifier} onAuthSuccess={handleAuthSuccess} />
+      return (
+        <PasswordAuth
+          identifier={identifier}
+          onAuthSuccess={handleAuthSuccess}
+          title={title}
+          primaryColor={primaryColor}
+        />
+      )
     }
     if (authRequired === 'email') {
-      return <EmailAuth identifier={identifier} onAuthSuccess={handleAuthSuccess} />
+      return (
+        <EmailAuth
+          identifier={identifier}
+          onAuthSuccess={handleAuthSuccess}
+          title={title}
+          primaryColor={primaryColor}
+        />
+      )
     }
     if (authRequired === 'sso') {
-      return <SSOAuth identifier={identifier} />
+      return (
+        <SSOAuth
+          identifier={identifier}
+          onAuthSuccess={handleAuthSuccess}
+          title={title}
+          primaryColor={primaryColor}
+        />
+      )
     }
   }
 

apps/sim/app/chat/components/auth/email/email-auth.tsx

@@ -2,16 +2,14 @@
 
 import { type KeyboardEvent, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Input } from '@/components/emcn'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import Nav from '@/app/(landing)/components/nav/nav'
 
 const logger = createLogger('EmailAuth')
@@ -19,6 +17,8 @@ const logger = createLogger('EmailAuth')
 interface EmailAuthProps {
   identifier: string
   onAuthSuccess: () => void
+  title?: string
+  primaryColor?: string
 }
 
 const validateEmailField = (emailValue: string): string[] => {
@@ -37,19 +37,57 @@ const validateEmailField = (emailValue: string): string[] => {
   return errors
 }
 
-export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps) {
+export default function EmailAuth({
+  identifier,
+  onAuthSuccess,
+  title = 'chat',
+  primaryColor = 'var(--brand-primary-hover-hex)',
+}: EmailAuthProps) {
+  // Email auth state
   const [email, setEmail] = useState('')
   const [authError, setAuthError] = useState<string | null>(null)
   const [isSendingOtp, setIsSendingOtp] = useState(false)
   const [isVerifyingOtp, setIsVerifyingOtp] = useState(false)
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
 
+  // OTP verification state
   const [showOtpVerification, setShowOtpVerification] = useState(false)
   const [otpValue, setOtpValue] = useState('')
   const [countdown, setCountdown] = useState(0)
   const [isResendDisabled, setIsResendDisabled] = useState(false)
 
+  useEffect(() => {
+    // Check if CSS variable has been customized
+    const checkCustomBrand = () => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+
+      // Check if the CSS variable exists and is different from the default
+      if (brandAccent && brandAccent !== '#6f3dfa') {
+        setButtonClass('auth-button-custom')
+      } else {
+        setButtonClass('auth-button-gradient')
+      }
+    }
+
+    checkCustomBrand()
+
+    // Also check on window resize or theme changes
+    window.addEventListener('resize', checkCustomBrand)
+    const observer = new MutationObserver(checkCustomBrand)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+
+    return () => {
+      window.removeEventListener('resize', checkCustomBrand)
+      observer.disconnect()
+    }
+  }, [])
+
   useEffect(() => {
     if (countdown > 0) {
       const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
@@ -60,6 +98,7 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
     }
   }, [countdown, isResendDisabled])
 
+  // Handle email input key down
   const handleEmailKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault()
@@ -70,16 +109,21 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newEmail = e.target.value
     setEmail(newEmail)
+
+    // Silently validate but don't show errors until submit
     const errors = validateEmailField(newEmail)
     setEmailErrors(errors)
     setShowEmailValidationError(false)
   }
 
+  // Handle sending OTP
   const handleSendOtp = async () => {
+    // Validate email on submit
     const emailValidationErrors = validateEmailField(email)
     setEmailErrors(emailValidationErrors)
     setShowEmailValidationError(emailValidationErrors.length > 0)
 
+    // If there are validation errors, stop submission
     if (emailValidationErrors.length > 0) {
       return
     }
@@ -173,6 +217,7 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
         return
       }
 
+      // Don't show success message in error state, just reset OTP
       setOtpValue('')
     } catch (error) {
       logger.error('Error resending OTP:', error)
@@ -185,34 +230,36 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
   }
 
   return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <Nav hideAuthButtons={true} variant='auth' />
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>
-            <div className='flex flex-col items-center justify-center'>
-              <div className='space-y-1 text-center'>
-                <h1
-                  className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
-                >
-                  {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
-                </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
-                  {showOtpVerification
-                    ? `A verification code has been sent to ${email}`
-                    : 'This chat requires email verification'}
-                </p>
-              </div>
+    <div className='bg-white'>
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            {/* Header */}
+            <div className='space-y-1 text-center'>
+              <h1
+                className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
+              >
+                {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
+              </h1>
+              <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                {showOtpVerification
+                  ? `A verification code has been sent to ${email}`
+                  : 'This chat requires email verification'}
+              </p>
+            </div>
 
-              <div className={`${inter.className} mt-8 w-full max-w-[410px]`}>
-                {!showOtpVerification ? (
-                  <form
-                    onSubmit={(e) => {
-                      e.preventDefault()
-                      handleSendOtp()
-                    }}
-                    className='space-y-6'
-                  >
+            {/* Form */}
+            <div className={`${inter.className} mt-8 w-full`}>
+              {!showOtpVerification ? (
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault()
+                    handleSendOtp()
+                  }}
+                  className='space-y-8'
+                >
+                  <div className='space-y-6'>
                     <div className='space-y-2'>
                       <div className='flex items-center justify-between'>
                         <Label htmlFor='email'>Email</Label>
@@ -244,12 +291,18 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                         </div>
                       )}
                     </div>
+                  </div>
 
-                    <BrandedButton type='submit' loading={isSendingOtp} loadingText='Sending Code'>
-                      Continue
-                    </BrandedButton>
-                  </form>
-                ) : (
+                  <Button
+                    type='submit'
+                    className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+                    disabled={isSendingOtp}
+                  >
+                    {isSendingOtp ? 'Sending Code...' : 'Continue'}
+                  </Button>
+                </form>
+              ) : (
+                <div className='space-y-8'>
                   <div className='space-y-6'>
                     <p className='text-center text-muted-foreground text-sm'>
                       Enter the 6-digit code to verify your account. If you don't see it in your
@@ -287,61 +340,60 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                       </InputOTP>
                     </div>
 
+                    {/* Error message */}
                     {authError && (
                       <div className='mt-1 space-y-1 text-center text-red-400 text-xs'>
                         <p>{authError}</p>
                       </div>
                     )}
-
-                    <BrandedButton
-                      onClick={() => handleVerifyOtp()}
-                      disabled={otpValue.length !== 6}
-                      loading={isVerifyingOtp}
-                      loadingText='Verifying'
-                    >
-                      Verify Email
-                    </BrandedButton>
-
-                    <div className='text-center'>
-                      <p className='text-muted-foreground text-sm'>
-                        Didn't receive a code?{' '}
-                        {countdown > 0 ? (
-                          <span>
-                            Resend in{' '}
-                            <span className='font-medium text-foreground'>{countdown}s</span>
-                          </span>
-                        ) : (
-                          <button
-                            className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
-                            onClick={handleResendOtp}
-                            disabled={isVerifyingOtp || isResendDisabled}
-                          >
-                            Resend
-                          </button>
-                        )}
-                      </p>
-                    </div>
-
-                    <div className='text-center font-light text-[14px]'>
-                      <button
-                        onClick={() => {
-                          setShowOtpVerification(false)
-                          setOtpValue('')
-                          setAuthError(null)
-                        }}
-                        className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
-                      >
-                        Change email
-                      </button>
-                    </div>
                   </div>
-                )}
-              </div>
+
+                  <Button
+                    onClick={() => handleVerifyOtp()}
+                    className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+                    disabled={otpValue.length !== 6 || isVerifyingOtp}
+                  >
+                    {isVerifyingOtp ? 'Verifying...' : 'Verify Email'}
+                  </Button>
+
+                  <div className='text-center'>
+                    <p className='text-muted-foreground text-sm'>
+                      Didn't receive a code?{' '}
+                      {countdown > 0 ? (
+                        <span>
+                          Resend in{' '}
+                          <span className='font-medium text-foreground'>{countdown}s</span>
+                        </span>
+                      ) : (
+                        <button
+                          className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+                          onClick={handleResendOtp}
+                          disabled={isVerifyingOtp || isResendDisabled}
+                        >
+                          Resend
+                        </button>
+                      )}
+                    </p>
+                  </div>
+
+                  <div className='text-center font-light text-[14px]'>
+                    <button
+                      onClick={() => {
+                        setShowOtpVerification(false)
+                        setOtpValue('')
+                        setAuthError(null)
+                      }}
+                      className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+                    >
+                      Change email
+                    </button>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
-        <SupportFooter position='absolute' />
-      </main>
-    </AuthBackground>
+      </div>
+    </div>
   )
 }

apps/sim/app/chat/components/auth/password/password-auth.tsx

@@ -1,16 +1,14 @@
 'use client'
 
-import { type KeyboardEvent, useState } from 'react'
+import { type KeyboardEvent, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Eye, EyeOff } from 'lucide-react'
-import { Input } from '@/components/emcn'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import Nav from '@/app/(landing)/components/nav/nav'
 
 const logger = createLogger('PasswordAuth')
@@ -18,15 +16,56 @@ const logger = createLogger('PasswordAuth')
 interface PasswordAuthProps {
   identifier: string
   onAuthSuccess: () => void
+  title?: string
+  primaryColor?: string
 }
 
-export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuthProps) {
+export default function PasswordAuth({
+  identifier,
+  onAuthSuccess,
+  title = 'chat',
+  primaryColor = 'var(--brand-primary-hover-hex)',
+}: PasswordAuthProps) {
+  // Password auth state
   const [password, setPassword] = useState('')
+  const [authError, setAuthError] = useState<string | null>(null)
+  const [isAuthenticating, setIsAuthenticating] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [showValidationError, setShowValidationError] = useState(false)
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
-  const [isAuthenticating, setIsAuthenticating] = useState(false)
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
 
+  useEffect(() => {
+    // Check if CSS variable has been customized
+    const checkCustomBrand = () => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+
+      // Check if the CSS variable exists and is different from the default
+      if (brandAccent && brandAccent !== '#6f3dfa') {
+        setButtonClass('auth-button-custom')
+      } else {
+        setButtonClass('auth-button-gradient')
+      }
+    }
+
+    checkCustomBrand()
+
+    // Also check on window resize or theme changes
+    window.addEventListener('resize', checkCustomBrand)
+    const observer = new MutationObserver(checkCustomBrand)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+
+    return () => {
+      window.removeEventListener('resize', checkCustomBrand)
+      observer.disconnect()
+    }
+  }, [])
+
+  // Handle keyboard input for auth forms
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault()
@@ -41,6 +80,7 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
     setPasswordErrors([])
   }
 
+  // Handle authentication
   const handleAuthenticate = async () => {
     if (!password.trim()) {
       setPasswordErrors(['Password is required'])
@@ -48,6 +88,7 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
       return
     }
 
+    setAuthError(null)
     setIsAuthenticating(true)
 
     try {
@@ -70,7 +111,10 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
         return
       }
 
+      // Authentication successful, notify parent
       onAuthSuccess()
+
+      // Reset auth state
       setPassword('')
     } catch (error) {
       logger.error('Authentication error:', error)
@@ -82,30 +126,32 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
   }
 
   return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <Nav hideAuthButtons={true} variant='auth' />
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>
-            <div className='flex flex-col items-center justify-center'>
-              <div className='space-y-1 text-center'>
-                <h1
-                  className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
-                >
-                  Password Required
-                </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
-                  This chat is password-protected
-                </p>
-              </div>
-
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault()
-                  handleAuthenticate()
-                }}
-                className={`${inter.className} mt-8 w-full max-w-[410px] space-y-6`}
+    <div className='bg-white'>
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            {/* Header */}
+            <div className='space-y-1 text-center'>
+              <h1
+                className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
               >
+                Password Required
+              </h1>
+              <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                This chat is password-protected
+              </p>
+            </div>
+
+            {/* Form */}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                handleAuthenticate()
+              }}
+              className={`${inter.className} mt-8 w-full space-y-8`}
+            >
+              <div className='space-y-6'>
                 <div className='space-y-2'>
                   <div className='flex items-center justify-between'>
                     <Label htmlFor='password'>Password</Label>
@@ -148,21 +194,19 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
                     </div>
                   )}
                 </div>
+              </div>
 
-                <BrandedButton
-                  type='submit'
-                  disabled={!password.trim()}
-                  loading={isAuthenticating}
-                  loadingText='Authenticating'
-                >
-                  Continue
-                </BrandedButton>
-              </form>
-            </div>
+              <Button
+                type='submit'
+                className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+                disabled={isAuthenticating}
+              >
+                {isAuthenticating ? 'Authenticating...' : 'Continue'}
+              </Button>
+            </form>
           </div>
         </div>
-        <SupportFooter position='absolute' />
-      </main>
-    </AuthBackground>
+      </div>
+    </div>
   )
 }

apps/sim/app/chat/components/auth/sso/sso-auth.tsx

@@ -1,23 +1,24 @@
 'use client'
 
-import { type KeyboardEvent, useState } from 'react'
+import { type KeyboardEvent, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
-import { Input } from '@/components/emcn'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import Nav from '@/app/(landing)/components/nav/nav'
 
 const logger = createLogger('SSOAuth')
 
 interface SSOAuthProps {
   identifier: string
+  onAuthSuccess: () => void
+  title?: string
+  primaryColor?: string
 }
 
 const validateEmailField = (emailValue: string): string[] => {
@@ -36,13 +37,46 @@ const validateEmailField = (emailValue: string): string[] => {
   return errors
 }
 
-export default function SSOAuth({ identifier }: SSOAuthProps) {
+export default function SSOAuth({
+  identifier,
+  onAuthSuccess,
+  title = 'chat',
+  primaryColor = 'var(--brand-primary-hover-hex)',
+}: SSOAuthProps) {
   const router = useRouter()
   const [email, setEmail] = useState('')
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const [isLoading, setIsLoading] = useState(false)
 
+  useEffect(() => {
+    const checkCustomBrand = () => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+
+      if (brandAccent && brandAccent !== '#6f3dfa') {
+        setButtonClass('auth-button-custom')
+      } else {
+        setButtonClass('auth-button-gradient')
+      }
+    }
+
+    checkCustomBrand()
+
+    window.addEventListener('resize', checkCustomBrand)
+    const observer = new MutationObserver(checkCustomBrand)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+
+    return () => {
+      window.removeEventListener('resize', checkCustomBrand)
+      observer.disconnect()
+    }
+  }, [])
+
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault()
@@ -99,30 +133,32 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
   }
 
   return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <Nav hideAuthButtons={true} variant='auth' />
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>
-            <div className='flex flex-col items-center justify-center'>
-              <div className='space-y-1 text-center'>
-                <h1
-                  className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
-                >
-                  SSO Authentication
-                </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
-                  This chat requires SSO authentication
-                </p>
-              </div>
-
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault()
-                  handleAuthenticate()
-                }}
-                className={`${inter.className} mt-8 w-full max-w-[410px] space-y-6`}
+    <div className='bg-white'>
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            {/* Header */}
+            <div className='space-y-1 text-center'>
+              <h1
+                className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
               >
+                SSO Authentication
+              </h1>
+              <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                This chat requires SSO authentication
+              </p>
+            </div>
+
+            {/* Form */}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                handleAuthenticate()
+              }}
+              className={`${inter.className} mt-8 w-full space-y-8`}
+            >
+              <div className='space-y-6'>
                 <div className='space-y-2'>
                   <div className='flex items-center justify-between'>
                     <Label htmlFor='email'>Work Email</Label>
@@ -155,16 +191,19 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
                     </div>
                   )}
                 </div>
+              </div>
 
-                <BrandedButton type='submit' loading={isLoading} loadingText='Redirecting to SSO'>
-                  Continue with SSO
-                </BrandedButton>
-              </form>
-            </div>
+              <Button
+                type='submit'
+                className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+                disabled={isLoading}
+              >
+                {isLoading ? 'Redirecting to SSO...' : 'Continue with SSO'}
+              </Button>
+            </form>
           </div>
         </div>
-        <SupportFooter position='absolute' />
-      </main>
-    </AuthBackground>
+      </div>
+    </div>
   )
 }

apps/sim/app/chat/components/components/markdown-renderer/markdown-renderer.tsx

@@ -0,0 +1,153 @@
+import ReactMarkdown from 'react-markdown'
+
+export default function MarkdownRenderer({ content }: { content: string }) {
+  const customComponents = {
+    // Paragraph
+    p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
+      <p className='mt-0.5 mb-1 text-base leading-normal'>{children}</p>
+    ),
+
+    // Headings
+    h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+      <h1 className='mt-3 mb-1 font-semibold text-xl'>{children}</h1>
+    ),
+    h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+      <h2 className='mt-3 mb-1 font-semibold text-lg'>{children}</h2>
+    ),
+    h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+      <h3 className='mt-3 mb-1 font-semibold text-base'>{children}</h3>
+    ),
+    h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+      <h4 className='mt-3 mb-1 font-semibold text-sm'>{children}</h4>
+    ),
+
+    // Lists
+    ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
+      <ul className='my-1 list-disc space-y-0.5 pl-5'>{children}</ul>
+    ),
+    ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
+      <ol className='my-1 list-decimal space-y-0.5 pl-5'>{children}</ol>
+    ),
+    li: ({ children }: React.HTMLAttributes<HTMLLIElement>) => (
+      <li className='text-base'>{children}</li>
+    ),
+
+    // Code blocks
+    pre: ({ children }: React.HTMLAttributes<HTMLPreElement>) => (
+      <pre className='my-2 overflow-x-auto rounded-md bg-gray-100 p-3 font-mono text-sm dark:bg-gray-800'>
+        {children}
+      </pre>
+    ),
+
+    // Inline code
+    code: ({
+      inline,
+      className,
+      children,
+      ...props
+    }: React.HTMLAttributes<HTMLElement> & { className?: string; inline?: boolean }) => {
+      if (inline) {
+        return (
+          <code
+            className='rounded-md bg-gray-100 px-1 py-0.5 font-mono text-[0.9em] dark:bg-gray-800'
+            {...props}
+          >
+            {children}
+          </code>
+        )
+      }
+
+      // Extract language from className (format: language-xxx)
+      const match = /language-(\w+)/.exec(className || '')
+      const language = match ? match[1] : ''
+
+      return (
+        <div className='relative'>
+          {language && (
+            <div className='absolute top-1 right-2 text-gray-500 text-xs dark:text-gray-400'>
+              {language}
+            </div>
+          )}
+          <code className={className} {...props}>
+            {children}
+          </code>
+        </div>
+      )
+    },
+
+    // Blockquotes
+    blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
+      <blockquote className='my-2 border-gray-200 border-l-4 py-0 pl-4 text-gray-700 italic dark:border-gray-700 dark:text-gray-300'>
+        <div className='flex items-center py-0'>{children}</div>
+      </blockquote>
+    ),
+
+    // Horizontal rule
+    hr: () => <hr className='my-3 border-gray-200 dark:border-gray-700' />,
+
+    // Links
+    a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+      <a
+        href={href}
+        className='text-blue-600 hover:underline dark:text-blue-400'
+        target='_blank'
+        rel='noopener noreferrer'
+        {...props}
+      >
+        {children}
+      </a>
+    ),
+
+    // Tables
+    table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
+      <div className='my-2 overflow-x-auto rounded-md border border-gray-200 dark:border-gray-700'>
+        <table className='w-full border-collapse'>{children}</table>
+      </div>
+    ),
+    thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+      <thead className='border-gray-200 border-b bg-gray-50 dark:border-gray-700 dark:bg-gray-800'>
+        {children}
+      </thead>
+    ),
+    tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+      <tbody className='divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900'>
+        {children}
+      </tbody>
+    ),
+    tr: ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+      <tr className='transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60' {...props}>
+        {children}
+      </tr>
+    ),
+    th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+      <th className='px-4 py-3 text-left font-medium text-gray-500 text-xs uppercase tracking-wider dark:text-gray-300'>
+        {children}
+      </th>
+    ),
+    td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+      <td className='border-0 px-4 py-3 text-sm'>{children}</td>
+    ),
+
+    // Images
+    img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+      <img
+        src={src}
+        alt={alt || 'Image'}
+        className='my-2 h-auto max-w-full rounded-md'
+        {...props}
+      />
+    ),
+  }
+
+  // Process text to clean up unnecessary whitespace and formatting issues
+  const processedContent = content
+    .replace(/\n{2,}/g, '\n\n') // Replace multiple newlines with exactly double newlines
+    .replace(/^(#{1,6})\s+(.+?)\n{2,}/gm, '$1 $2\n') // Reduce space after headings to single newline
+    .trim()
+
+  return (
+    <div className='text-[#0D0D0D] text-base leading-normal dark:text-gray-100'>
+      <ReactMarkdown components={customComponents}>{processedContent}</ReactMarkdown>
+    </div>
+  )
+}

apps/sim/app/chat/components/error-state/error-state.tsx

@@ -1,19 +1,95 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { StatusPageLayout } from '@/app/(auth)/components/status-page-layout'
+import { Button } from '@/components/ui/button'
+import { useBrandConfig } from '@/lib/branding/branding'
+import { inter } from '@/app/_styles/fonts/inter/inter'
+import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import Nav from '@/app/(landing)/components/nav/nav'
 
 interface ChatErrorStateProps {
   error: string
+  starCount: string
 }
 
-export function ChatErrorState({ error }: ChatErrorStateProps) {
+export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
   const router = useRouter()
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
+  const brandConfig = useBrandConfig()
+
+  useEffect(() => {
+    // Check if CSS variable has been customized
+    const checkCustomBrand = () => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+
+      // Check if the CSS variable exists and is different from the default
+      if (brandAccent && brandAccent !== '#6f3dfa') {
+        setButtonClass('auth-button-custom')
+      } else {
+        setButtonClass('auth-button-gradient')
+      }
+    }
+
+    checkCustomBrand()
+
+    // Also check on window resize or theme changes
+    window.addEventListener('resize', checkCustomBrand)
+    const observer = new MutationObserver(checkCustomBrand)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+
+    return () => {
+      window.removeEventListener('resize', checkCustomBrand)
+      observer.disconnect()
+    }
+  }, [])
 
   return (
-    <StatusPageLayout title='Chat Unavailable' description={error}>
-      <BrandedButton onClick={() => router.push('/workspace')}>Return to Workspace</BrandedButton>
-    </StatusPageLayout>
+    <div className='min-h-screen bg-white'>
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            {/* Error content */}
+            <div className='space-y-1 text-center'>
+              <h1
+                className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
+              >
+                Chat Unavailable
+              </h1>
+              <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                {error}
+              </p>
+            </div>
+
+            {/* Action button - matching login form */}
+            <div className='mt-8 w-full'>
+              <Button
+                type='button'
+                onClick={() => router.push('/workspace')}
+                className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+              >
+                Return to Workspace
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className={`${inter.className} auth-text-muted fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed`}
+      >
+        Need help?{' '}
+        <a
+          href={`mailto:${brandConfig.supportEmail}`}
+          className='auth-link underline-offset-4 transition hover:underline'
+        >
+          Contact support
+        </a>
+      </div>
+    </div>
   )
 }

apps/sim/app/credential-account/[token]/page.tsx

@@ -221,10 +221,12 @@ export default function CredentialAccountInvitePage() {
               label: 'Create an account',
               onClick: () =>
                 router.push(`/signup?callbackUrl=${callbackUrl}&invite_flow=true&new=true`),
+              variant: 'outline' as const,
             },
             {
               label: 'Return to Home',
               onClick: () => router.push('/'),
+              variant: 'ghost' as const,
             },
           ]}
         />
@@ -258,6 +260,7 @@ export default function CredentialAccountInvitePage() {
           {
             label: 'Return to Home',
             onClick: () => router.push('/'),
+            variant: 'ghost' as const,
           },
         ]}
       />

apps/sim/app/form/[identifier]/components/error-state.tsx

@@ -1,19 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { StatusPageLayout } from '@/app/(auth)/components/status-page-layout'
-
-interface FormErrorStateProps {
-  error: string
-}
-
-export function FormErrorState({ error }: FormErrorStateProps) {
-  const router = useRouter()
-
-  return (
-    <StatusPageLayout title='Form Unavailable' description={error} hideNav>
-      <BrandedButton onClick={() => router.push('/workspace')}>Return to Workspace</BrandedButton>
-    </StatusPageLayout>
-  )
-}

apps/sim/app/form/[identifier]/components/form-field.tsx

@@ -1,227 +0,0 @@
-'use client'
-
-import { useCallback, useRef, useState } from 'react'
-import { Upload, X } from 'lucide-react'
-import { Input, Label, Switch, Textarea } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-
-interface InputField {
-  name: string
-  type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'files'
-  description?: string
-  value?: unknown
-  required?: boolean
-}
-
-interface FormFieldProps {
-  field: InputField
-  value: unknown
-  onChange: (value: unknown) => void
-  primaryColor?: string
-  label?: string
-  description?: string
-  required?: boolean
-}
-
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
-export function FormField({
-  field,
-  value,
-  onChange,
-  primaryColor,
-  label,
-  description,
-  required,
-}: FormFieldProps) {
-  const [isDragging, setIsDragging] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const formatLabel = (name: string) => {
-    return name
-      .replace(/([A-Z])/g, ' $1')
-      .replace(/_/g, ' ')
-      .replace(/^./, (str) => str.toUpperCase())
-      .trim()
-  }
-
-  const displayLabel = label || formatLabel(field.name)
-  const placeholder = description || field.description || ''
-  const isRequired = required ?? field.required
-
-  const handleFileDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault()
-      setIsDragging(false)
-      const files = Array.from(e.dataTransfer.files)
-      if (files.length > 0) {
-        onChange(files)
-      }
-    },
-    [onChange]
-  )
-
-  const handleFileChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const files = Array.from(e.target.files || [])
-      if (files.length > 0) {
-        onChange(files)
-      }
-    },
-    [onChange]
-  )
-
-  const removeFile = useCallback(
-    (index: number) => {
-      if (Array.isArray(value)) {
-        const newFiles = value.filter((_, i) => i !== index)
-        onChange(newFiles.length > 0 ? newFiles : undefined)
-      }
-    },
-    [value, onChange]
-  )
-
-  const renderInput = () => {
-    switch (field.type) {
-      case 'boolean':
-        return (
-          <div className='flex items-center gap-3'>
-            <Switch
-              checked={Boolean(value)}
-              onCheckedChange={onChange}
-              style={value ? { backgroundColor: primaryColor } : undefined}
-            />
-            <span className={`${inter.className} text-[14px] text-muted-foreground`}>
-              {value ? 'Yes' : 'No'}
-            </span>
-          </div>
-        )
-
-      case 'number':
-        return (
-          <Input
-            type='number'
-            value={(value as string) ?? ''}
-            onChange={(e) => {
-              const val = e.target.value
-              onChange(val === '' ? '' : Number(val))
-            }}
-            placeholder={placeholder || 'Enter a number'}
-            className='rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
-          />
-        )
-
-      case 'object':
-      case 'array':
-        return (
-          <Textarea
-            value={(value as string) ?? ''}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
-            placeholder={
-              placeholder || (field.type === 'array' ? '["item1", "item2"]' : '{"key": "value"}')
-            }
-            className='min-h-[100px] rounded-[10px] font-mono text-[13px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
-          />
-        )
-
-      case 'files': {
-        const files = Array.isArray(value) ? (value as File[]) : []
-        return (
-          <div className='space-y-3'>
-            <div
-              onDragOver={(e) => {
-                e.preventDefault()
-                setIsDragging(true)
-              }}
-              onDragLeave={() => setIsDragging(false)}
-              onDrop={handleFileDrop}
-              onClick={() => fileInputRef.current?.click()}
-              className={cn(
-                'flex cursor-pointer flex-col items-center justify-center rounded-[10px] border-2 border-dashed px-6 py-8 transition-colors',
-                isDragging
-                  ? 'border-[var(--brand-primary-hex)] bg-[var(--brand-primary-hex)]/5'
-                  : 'border-border hover:border-muted-foreground/50'
-              )}
-            >
-              <input
-                ref={fileInputRef}
-                type='file'
-                multiple
-                onChange={handleFileChange}
-                className='hidden'
-              />
-              <Upload
-                className='mb-2 h-6 w-6 text-muted-foreground'
-                style={isDragging ? { color: primaryColor } : undefined}
-              />
-              <p className={`${inter.className} text-center text-[14px] text-muted-foreground`}>
-                <span style={{ color: primaryColor }} className='font-medium'>
-                  Click to upload
-                </span>{' '}
-                or drag and drop
-              </p>
-            </div>
-
-            {files.length > 0 && (
-              <div className='space-y-2'>
-                {files.map((file, idx) => (
-                  <div
-                    key={idx}
-                    className='flex items-center justify-between rounded-[8px] border border-border bg-muted/30 px-3 py-2'
-                  >
-                    <div className='min-w-0 flex-1'>
-                      <p
-                        className={`${inter.className} truncate font-medium text-[13px] text-foreground`}
-                      >
-                        {file.name}
-                      </p>
-                      <p className={`${inter.className} text-[12px] text-muted-foreground`}>
-                        {formatFileSize(file.size)}
-                      </p>
-                    </div>
-                    <button
-                      type='button'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        removeFile(idx)
-                      }}
-                      className='ml-2 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground'
-                    >
-                      <X className='h-4 w-4' />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )
-      }
-
-      default:
-        return (
-          <Input
-            type='text'
-            value={(value as string) ?? ''}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder || 'Enter text'}
-            className='rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
-          />
-        )
-    }
-  }
-
-  return (
-    <div className='space-y-2'>
-      <Label className={`${inter.className} font-medium text-[14px] text-foreground`}>
-        {displayLabel}
-        {isRequired && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
-      </Label>
-      {renderInput()}
-    </div>
-  )
-}

apps/sim/app/form/[identifier]/components/index.ts

@@ -1,6 +0,0 @@
-export { FormErrorState } from './error-state'
-export { FormField } from './form-field'
-export { FormLoadingState } from './loading-state'
-export { PasswordAuth } from './password-auth'
-export { PoweredBySim } from './powered-by-sim'
-export { ThankYouScreen } from './thank-you-screen'

apps/sim/app/form/[identifier]/components/loading-state.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-import { Skeleton } from '@/components/ui/skeleton'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-
-export function FormLoadingState() {
-  return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-[410px]'>
-            <div className='flex flex-col items-center justify-center'>
-              {/* Title skeleton */}
-              <div className='space-y-2 text-center'>
-                <Skeleton className='mx-auto h-8 w-32' />
-                <Skeleton className='mx-auto h-4 w-48' />
-              </div>
-
-              {/* Form skeleton */}
-              <div className='mt-8 w-full space-y-8'>
-                <div className='space-y-2'>
-                  <Skeleton className='h-4 w-16' />
-                  <Skeleton className='h-10 w-full rounded-[10px]' />
-                </div>
-                <div className='space-y-2'>
-                  <Skeleton className='h-4 w-20' />
-                  <Skeleton className='h-10 w-full rounded-[10px]' />
-                </div>
-                <Skeleton className='h-10 w-full rounded-[10px]' />
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </AuthBackground>
-  )
-}

apps/sim/app/form/[identifier]/components/password-auth.tsx

@@ -1,105 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
-import { Input } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
-import Nav from '@/app/(landing)/components/nav/nav'
-
-interface PasswordAuthProps {
-  onSubmit: (password: string) => void
-  error?: string | null
-}
-
-export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
-  const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!password.trim()) return
-
-    setIsSubmitting(true)
-    try {
-      await onSubmit(password)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <Nav hideAuthButtons={true} variant='auth' />
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>
-            <div className='flex flex-col items-center justify-center'>
-              <div className='space-y-1 text-center'>
-                <h1
-                  className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
-                >
-                  Password Required
-                </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
-                  Enter the password to access this form.
-                </p>
-              </div>
-
-              <form
-                onSubmit={handleSubmit}
-                className={`${inter.className} mt-8 w-full max-w-[410px] space-y-6`}
-              >
-                <div className='space-y-2'>
-                  <label
-                    htmlFor='form-password'
-                    className='font-medium text-[14px] text-foreground'
-                  >
-                    Password
-                  </label>
-                  <div className='relative'>
-                    <Input
-                      id='form-password'
-                      type={showPassword ? 'text' : 'password'}
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      placeholder='Enter password'
-                      className={cn(
-                        'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                        error && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                      )}
-                      autoFocus
-                    />
-                    <button
-                      type='button'
-                      onClick={() => setShowPassword(!showPassword)}
-                      className='-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground hover:text-foreground'
-                    >
-                      {showPassword ? <EyeOff className='h-4 w-4' /> : <Eye className='h-4 w-4' />}
-                    </button>
-                  </div>
-                  {error && <p className='text-[14px] text-red-500'>{error}</p>}
-                </div>
-
-                <BrandedButton
-                  type='submit'
-                  disabled={!password.trim()}
-                  loading={isSubmitting}
-                  loadingText='Verifying'
-                >
-                  Continue
-                </BrandedButton>
-              </form>
-            </div>
-          </div>
-        </div>
-        <SupportFooter position='absolute' />
-      </main>
-    </AuthBackground>
-  )
-}

apps/sim/app/form/[identifier]/components/powered-by-sim.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { useBrandConfig } from '@/lib/branding/branding'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-
-export function PoweredBySim() {
-  const brandConfig = useBrandConfig()
-
-  return (
-    <div
-      className={`${inter.className} auth-text-muted fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed`}
-    >
-      <a
-        href='https://sim.ai'
-        target='_blank'
-        rel='noopener noreferrer'
-        className='inline-flex items-center gap-1.5 transition hover:opacity-80'
-      >
-        <span>Powered by</span>
-        <Image
-          src='/logo/b&w/text/small.png'
-          alt='Sim'
-          width={30}
-          height={15}
-          className='h-[14px] w-auto'
-        />
-      </a>
-    </div>
-  )
-}

apps/sim/app/form/[identifier]/components/thank-you-screen.tsx

@@ -1,47 +0,0 @@
-'use client'
-
-import { CheckCircle2 } from 'lucide-react'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-
-interface ThankYouScreenProps {
-  title: string
-  message: string
-  primaryColor?: string
-}
-
-/** Default green color matching --brand-tertiary-2 */
-const DEFAULT_THANK_YOU_COLOR = '#32bd7e'
-
-/** Legacy blue default that should be treated as "no custom color" */
-const LEGACY_BLUE_DEFAULT = '#3972F6'
-
-export function ThankYouScreen({ title, message, primaryColor }: ThankYouScreenProps) {
-  // Treat legacy blue default as no custom color, fall back to green
-  const thankYouColor =
-    primaryColor && primaryColor !== LEGACY_BLUE_DEFAULT ? primaryColor : DEFAULT_THANK_YOU_COLOR
-
-  return (
-    <main className='flex flex-1 flex-col items-center justify-center p-4'>
-      <div className='flex flex-col items-center text-center'>
-        <div
-          className='flex h-20 w-20 items-center justify-center rounded-full'
-          style={{ backgroundColor: `${thankYouColor}15` }}
-        >
-          <CheckCircle2 className='h-10 w-10' style={{ color: thankYouColor }} />
-        </div>
-        <h2
-          className={`${soehne.className} mt-6 font-medium text-[32px] tracking-tight`}
-          style={{ color: thankYouColor }}
-        >
-          {title}
-        </h2>
-        <p
-          className={`${inter.className} mt-3 max-w-md font-[380] text-[16px] text-muted-foreground`}
-        >
-          {message}
-        </p>
-      </div>
-    </main>
-  )
-}

apps/sim/app/form/[identifier]/error.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { createLogger } from '@sim/logger'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { StatusPageLayout } from '@/app/(auth)/components/status-page-layout'
-
-const logger = createLogger('FormError')
-
-interface FormErrorProps {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
-export default function FormError({ error, reset }: FormErrorProps) {
-  useEffect(() => {
-    logger.error('Form page error:', { error: error.message, digest: error.digest })
-  }, [error])
-
-  return (
-    <StatusPageLayout
-      title='Something went wrong'
-      description='We encountered an error loading this form. Please try again.'
-      hideNav
-    >
-      <BrandedButton onClick={reset}>Try again</BrandedButton>
-    </StatusPageLayout>
-  )
-}

apps/sim/app/form/[identifier]/form.tsx

@@ -1,343 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
-import {
-  FormErrorState,
-  FormField,
-  FormLoadingState,
-  PasswordAuth,
-  PoweredBySim,
-  ThankYouScreen,
-} from '@/app/form/[identifier]/components'
-
-const logger = createLogger('Form')
-
-interface FieldConfig {
-  name: string
-  type: string
-  label: string
-  description?: string
-  required?: boolean
-}
-
-interface FormConfig {
-  id: string
-  title: string
-  description?: string
-  customizations: {
-    primaryColor?: string
-    thankYouMessage?: string
-    logoUrl?: string
-    fieldConfigs?: FieldConfig[]
-  }
-  authType?: 'public' | 'password' | 'email'
-  showBranding?: boolean
-  inputSchema?: InputField[]
-}
-
-interface InputField {
-  name: string
-  type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'files'
-  description?: string
-  value?: unknown
-  required?: boolean
-}
-
-export default function Form({ identifier }: { identifier: string }) {
-  const [formConfig, setFormConfig] = useState<FormConfig | null>(null)
-  const [formData, setFormData] = useState<Record<string, unknown>>({})
-  const [isLoading, setIsLoading] = useState(true)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [isSubmitted, setIsSubmitted] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [authRequired, setAuthRequired] = useState<'password' | 'email' | null>(null)
-  const [thankYouData, setThankYouData] = useState<{
-    title: string
-    message: string
-  } | null>(null)
-
-  const abortControllerRef = useRef<AbortController | null>(null)
-
-  const fetchFormConfig = useCallback(
-    async (signal?: AbortSignal) => {
-      try {
-        setIsLoading(true)
-        setError(null)
-
-        const response = await fetch(`/api/form/${identifier}`, { signal })
-        if (signal?.aborted) return
-
-        const data = await response.json()
-
-        if (!response.ok) {
-          if (response.status === 401) {
-            const authError = data.error
-            if (authError === 'auth_required_password') {
-              setAuthRequired('password')
-              setFormConfig({
-                id: '',
-                title: data.title || 'Form',
-                customizations: data.customizations || {},
-              })
-              return
-            }
-            if (authError === 'auth_required_email') {
-              setAuthRequired('email')
-              setFormConfig({
-                id: '',
-                title: data.title || 'Form',
-                customizations: data.customizations || {},
-              })
-              return
-            }
-          }
-          throw new Error(data.error || 'Failed to load form')
-        }
-
-        setFormConfig(data)
-        setAuthRequired(null)
-
-        // Initialize form data from input schema
-        const fields = data.inputSchema || []
-        if (fields.length > 0) {
-          const initialData: Record<string, unknown> = {}
-          for (const field of fields) {
-            if (field.value !== undefined) {
-              initialData[field.name] = field.value
-            } else {
-              switch (field.type) {
-                case 'boolean':
-                  initialData[field.name] = false
-                  break
-                case 'number':
-                  initialData[field.name] = ''
-                  break
-                case 'array':
-                case 'files':
-                  initialData[field.name] = []
-                  break
-                case 'object':
-                  initialData[field.name] = {}
-                  break
-                default:
-                  initialData[field.name] = ''
-              }
-            }
-          }
-          setFormData(initialData)
-        }
-      } catch (err: unknown) {
-        if (err instanceof Error && err.name === 'AbortError') return
-        logger.error('Error fetching form config:', err)
-        setError(err instanceof Error ? err.message : 'Failed to load form')
-      } finally {
-        setIsLoading(false)
-      }
-    },
-    [identifier]
-  )
-
-  useEffect(() => {
-    abortControllerRef.current?.abort()
-    const controller = new AbortController()
-    abortControllerRef.current = controller
-    fetchFormConfig(controller.signal)
-    return () => controller.abort()
-  }, [fetchFormConfig])
-
-  const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
-    setFormData((prev) => ({ ...prev, [fieldName]: value }))
-  }, [])
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!formConfig) return
-
-      try {
-        setIsSubmitting(true)
-        setError(null)
-
-        const response = await fetch(`/api/form/${identifier}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ formData }),
-        })
-
-        const data = await response.json()
-
-        if (!response.ok) {
-          throw new Error(data.error || 'Failed to submit form')
-        }
-
-        setThankYouData({
-          title: data.thankYouTitle || 'Thank you!',
-          message:
-            data.thankYouMessage ||
-            formConfig.customizations.thankYouMessage ||
-            'Your response has been submitted successfully.',
-        })
-        setIsSubmitted(true)
-      } catch (err: unknown) {
-        logger.error('Error submitting form:', err)
-        setError(err instanceof Error ? err.message : 'Failed to submit form')
-      } finally {
-        setIsSubmitting(false)
-      }
-    },
-    [identifier, formConfig, formData]
-  )
-
-  const handlePasswordAuth = useCallback(
-    async (password: string) => {
-      try {
-        setIsLoading(true)
-        setError(null)
-
-        const response = await fetch(`/api/form/${identifier}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ password }),
-        })
-
-        const data = await response.json()
-
-        if (!response.ok) {
-          throw new Error(data.error || 'Invalid password')
-        }
-
-        await fetchFormConfig()
-      } catch (err: unknown) {
-        logger.error('Error authenticating:', err)
-        setError(err instanceof Error ? err.message : 'Invalid password')
-        setIsLoading(false)
-      }
-    },
-    [identifier, fetchFormConfig]
-  )
-
-  const primaryColor = formConfig?.customizations?.primaryColor || 'var(--brand-primary-hex)'
-
-  if (isLoading && !authRequired) {
-    return <FormLoadingState />
-  }
-
-  if (error && !authRequired) {
-    return <FormErrorState error={error} />
-  }
-
-  if (authRequired === 'password') {
-    return <PasswordAuth onSubmit={handlePasswordAuth} error={error} />
-  }
-
-  if (isSubmitted && thankYouData) {
-    return (
-      <AuthBackground>
-        <main className='relative flex min-h-screen flex-col text-foreground'>
-          <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-            <ThankYouScreen
-              title={thankYouData.title}
-              message={thankYouData.message}
-              primaryColor={formConfig?.customizations?.primaryColor}
-            />
-          </div>
-          {formConfig?.showBranding !== false ? (
-            <PoweredBySim />
-          ) : (
-            <SupportFooter position='absolute' />
-          )}
-        </main>
-      </AuthBackground>
-    )
-  }
-
-  if (!formConfig) {
-    return <FormErrorState error='Form not found' />
-  }
-
-  // Get fields from input schema
-  const fields = formConfig.inputSchema || []
-
-  // Create a map of field configs for quick lookup
-  const fieldConfigMap = new Map(
-    (formConfig.customizations?.fieldConfigs || []).map((fc) => [fc.name, fc])
-  )
-
-  return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <div className='relative z-30 flex flex-1 justify-center px-4 pt-16 pb-24'>
-          <div className='w-full max-w-[410px]'>
-            {/* Form title */}
-            <div className='mb-8 text-center'>
-              <h1
-                className={`${soehne.className} font-medium text-[28px] text-foreground tracking-tight`}
-              >
-                {formConfig.title}
-              </h1>
-              {formConfig.description && (
-                <p
-                  className={`${inter.className} mt-2 font-[380] text-[15px] text-muted-foreground`}
-                >
-                  {formConfig.description}
-                </p>
-              )}
-            </div>
-
-            <form onSubmit={handleSubmit} className={`${inter.className} space-y-6`}>
-              {fields.length === 0 ? (
-                <div className='rounded-[10px] border border-border bg-muted/50 p-6 text-center text-muted-foreground'>
-                  This form has no fields configured.
-                </div>
-              ) : (
-                fields.map((field) => {
-                  const config = fieldConfigMap.get(field.name)
-                  return (
-                    <FormField
-                      key={field.name}
-                      field={field}
-                      value={formData[field.name]}
-                      onChange={(value) => handleFieldChange(field.name, value)}
-                      primaryColor={primaryColor}
-                      label={config?.label}
-                      description={config?.description}
-                      required={config?.required}
-                    />
-                  )
-                })
-              )}
-
-              {error && (
-                <div className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] p-3 text-red-500 text-sm'>
-                  {error}
-                </div>
-              )}
-
-              {fields.length > 0 && (
-                <BrandedButton
-                  type='submit'
-                  loading={isSubmitting}
-                  loadingText='Submitting...'
-                  fullWidth
-                >
-                  Submit
-                </BrandedButton>
-              )}
-            </form>
-          </div>
-        </div>
-        {formConfig.showBranding !== false ? (
-          <PoweredBySim />
-        ) : (
-          <SupportFooter position='absolute' />
-        )}
-      </main>
-    </AuthBackground>
-  )
-}

apps/sim/app/form/[identifier]/page.tsx

@@ -1,6 +0,0 @@
-import Form from '@/app/form/[identifier]/form'
-
-export default async function FormPage({ params }: { params: Promise<{ identifier: string }> }) {
-  const { identifier } = await params
-  return <Form identifier={identifier} />
-}

apps/sim/app/invite/[id]/invite.tsx

@@ -400,6 +400,7 @@ export default function Invite() {
                     label: 'I already have an account',
                     onClick: () =>
                       router.push(`/login?callbackUrl=${callbackUrl}&invite_flow=true`),
+                    variant: 'outline' as const,
                   },
                 ]
               : [
@@ -412,6 +413,7 @@ export default function Invite() {
                     label: 'Create an account',
                     onClick: () =>
                       router.push(`/signup?callbackUrl=${callbackUrl}&invite_flow=true&new=true`),
+                    variant: 'outline' as const,
                   },
                 ]),
             {
@@ -452,10 +454,12 @@ export default function Invite() {
               {
                 label: 'Manage Team Settings',
                 onClick: () => router.push('/workspace'),
+                variant: 'default' as const,
               },
               {
                 label: 'Return to Home',
                 onClick: () => router.push('/'),
+                variant: 'ghost' as const,
               },
             ]}
           />
@@ -479,10 +483,12 @@ export default function Invite() {
                   await client.signOut()
                   router.push(`/login?callbackUrl=${callbackUrl}&invite_flow=true`)
                 },
+                variant: 'default' as const,
               },
               {
                 label: 'Return to Home',
                 onClick: () => router.push('/'),
+                variant: 'ghost' as const,
               },
             ]}
           />
@@ -503,14 +509,17 @@ export default function Invite() {
               {
                 label: 'Sign in to continue',
                 onClick: () => router.push(`/login?callbackUrl=${callbackUrl}&invite_flow=true`),
+                variant: 'default' as const,
               },
               {
                 label: 'Create an account',
                 onClick: () => router.push(`/signup?callbackUrl=${callbackUrl}&invite_flow=true`),
+                variant: 'outline' as const,
               },
               {
                 label: 'Return to Home',
                 onClick: () => router.push('/'),
+                variant: 'ghost' as const,
               },
             ]}
           />
@@ -522,18 +531,21 @@ export default function Invite() {
     const actions: Array<{
       label: string
       onClick: () => void
+      variant?: 'default' | 'outline' | 'ghost'
     }> = []
 
     if (error.canRetry) {
       actions.push({
         label: 'Try Again',
         onClick: () => window.location.reload(),
+        variant: 'default' as const,
       })
     }
 
     actions.push({
       label: 'Return to Home',
       onClick: () => router.push('/'),
+      variant: error.canRetry ? ('ghost' as const) : ('default' as const),
     })
 
     return (
@@ -589,6 +601,7 @@ export default function Invite() {
           {
             label: 'Return to Home',
             onClick: () => router.push('/'),
+            variant: 'ghost',
           },
         ]}
       />

apps/sim/app/invite/components/layout.tsx

@@ -13,9 +13,7 @@ export default function InviteLayout({ children }: InviteLayoutProps) {
       <main className='relative flex min-h-screen flex-col text-foreground'>
         <Nav hideAuthButtons={true} variant='auth' />
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>
-            <div className='flex flex-col items-center justify-center'>{children}</div>
-          </div>
+          <div className='w-full max-w-lg px-4'>{children}</div>
         </div>
       </main>
     </AuthBackground>

apps/sim/app/invite/components/status-card.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { Loader2 } from 'lucide-react'
+import { useState } from 'react'
+import { ArrowRight, ChevronRight, Loader2, RotateCcw } from 'lucide-react'
 import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { useBrandConfig } from '@/lib/branding/branding'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
 
 interface InviteStatusCardProps {
   type: 'login' | 'loading' | 'error' | 'success' | 'invitation' | 'warning'
@@ -15,6 +16,7 @@ interface InviteStatusCardProps {
   actions?: Array<{
     label: string
     onClick: () => void
+    variant?: 'default' | 'outline' | 'ghost'
     disabled?: boolean
     loading?: boolean
   }>
@@ -30,6 +32,8 @@ export function InviteStatusCard({
   isExpiredError = false,
 }: InviteStatusCardProps) {
   const router = useRouter()
+  const [hoveredButtonIndex, setHoveredButtonIndex] = useState<number | null>(null)
+  const brandConfig = useBrandConfig()
 
   if (type === 'loading') {
     return (
@@ -45,7 +49,17 @@ export function InviteStatusCard({
         <div className={`${inter.className} mt-8 flex w-full items-center justify-center py-8`}>
           <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
         </div>
-        <SupportFooter position='absolute' />
+        <div
+          className={`${inter.className} auth-text-muted absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[13px] leading-relaxed sm:px-8 md:px-[44px]`}
+        >
+          Need help?{' '}
+          <a
+            href={`mailto:${brandConfig.supportEmail}`}
+            className='auth-link underline-offset-4 transition hover:underline'
+          >
+            Contact support
+          </a>
+        </div>
       </>
     )
   }
@@ -61,25 +75,77 @@ export function InviteStatusCard({
         </p>
       </div>
 
-      <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
-        {isExpiredError && (
-          <BrandedButton onClick={() => router.push('/')}>Request New Invitation</BrandedButton>
-        )}
+      <div className={`${inter.className} mt-8 space-y-8`}>
+        <div className='flex w-full flex-col gap-3'>
+          {isExpiredError && (
+            <Button
+              variant='outline'
+              className='w-full rounded-[10px] border-[var(--brand-primary-hex)] font-medium text-[15px] text-[var(--brand-primary-hex)] transition-colors duration-200 hover:bg-[var(--brand-primary-hex)] hover:text-white'
+              onClick={() => router.push('/')}
+            >
+              <RotateCcw className='mr-2 h-4 w-4' />
+              Request New Invitation
+            </Button>
+          )}
 
-        {actions.map((action, index) => (
-          <BrandedButton
-            key={index}
-            onClick={action.onClick}
-            disabled={action.disabled}
-            loading={action.loading}
-            loadingText={action.label}
-          >
-            {action.label}
-          </BrandedButton>
-        ))}
+          {actions.map((action, index) => {
+            const isPrimary = (action.variant || 'default') === 'default'
+            const isHovered = hoveredButtonIndex === index
+
+            if (isPrimary) {
+              return (
+                <Button
+                  key={index}
+                  onMouseEnter={() => setHoveredButtonIndex(index)}
+                  onMouseLeave={() => setHoveredButtonIndex(null)}
+                  className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
+                  onClick={action.onClick}
+                  disabled={action.disabled || action.loading}
+                >
+                  <span className='flex items-center gap-1'>
+                    {action.loading ? `${action.label}...` : action.label}
+                    <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
+                      {isHovered ? (
+                        <ArrowRight className='h-4 w-4' aria-hidden='true' />
+                      ) : (
+                        <ChevronRight className='h-4 w-4' aria-hidden='true' />
+                      )}
+                    </span>
+                  </span>
+                </Button>
+              )
+            }
+
+            return (
+              <Button
+                key={index}
+                variant={action.variant}
+                className={
+                  action.variant === 'outline'
+                    ? 'w-full rounded-[10px] border-[var(--brand-primary-hex)] font-medium text-[15px] text-[var(--brand-primary-hex)] transition-colors duration-200 hover:bg-[var(--brand-primary-hex)] hover:text-white'
+                    : 'w-full rounded-[10px] text-muted-foreground hover:bg-secondary hover:text-foreground'
+                }
+                onClick={action.onClick}
+                disabled={action.disabled || action.loading}
+              >
+                {action.loading ? `${action.label}...` : action.label}
+              </Button>
+            )
+          })}
+        </div>
       </div>
 
-      <SupportFooter position='absolute' />
+      <div
+        className={`${inter.className} auth-text-muted absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[13px] leading-relaxed sm:px-8 md:px-[44px]`}
+      >
+        Need help?{' '}
+        <a
+          href={`mailto:${brandConfig.supportEmail}`}
+          className='auth-link underline-offset-4 transition hover:underline'
+        >
+          Contact support
+        </a>
+      </div>
     </>
   )
 }

apps/sim/app/not-found.tsx

@@ -1,18 +1,95 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
-import { StatusPageLayout } from '@/app/(auth)/components/status-page-layout'
+import { Button } from '@/components/ui/button'
+import { useBrandConfig } from '@/lib/branding/branding'
+import { inter } from '@/app/_styles/fonts/inter/inter'
+import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import Nav from '@/app/(landing)/components/nav/nav'
 
 export default function NotFound() {
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
+  const brandConfig = useBrandConfig()
   const router = useRouter()
 
+  useEffect(() => {
+    const root = document.documentElement
+    const hadDark = root.classList.contains('dark')
+    const hadLight = root.classList.contains('light')
+    root.classList.add('light')
+    root.classList.remove('dark')
+    return () => {
+      if (!hadLight) root.classList.remove('light')
+      if (hadDark) root.classList.add('dark')
+    }
+  }, [])
+
+  useEffect(() => {
+    const checkCustomBrand = () => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+      if (brandAccent && brandAccent !== '#6f3dfa') {
+        setButtonClass('auth-button-custom')
+      } else {
+        setButtonClass('auth-button-gradient')
+      }
+    }
+    checkCustomBrand()
+    window.addEventListener('resize', checkCustomBrand)
+    const observer = new MutationObserver(checkCustomBrand)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+    return () => {
+      window.removeEventListener('resize', checkCustomBrand)
+      observer.disconnect()
+    }
+  }, [])
+
   return (
-    <StatusPageLayout
-      title='Page Not Found'
-      description="The page you're looking for doesn't exist or has been moved."
-    >
-      <BrandedButton onClick={() => router.push('/')}>Return to Home</BrandedButton>
-    </StatusPageLayout>
+    <div className='relative min-h-screen'>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            <div className='space-y-1 text-center'>
+              <h1
+                className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
+              >
+                Page Not Found
+              </h1>
+              <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                The page you’re looking for doesn’t exist or has been moved.
+              </p>
+            </div>
+
+            <div className='mt-8 w-full space-y-3'>
+              <Button
+                type='button'
+                onClick={() => router.push('/')}
+                className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+              >
+                Return to Home
+              </Button>
+            </div>
+
+            <div
+              className={`${inter.className} auth-text-muted fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed`}
+            >
+              Need help?{' '}
+              <a
+                href={`mailto:${brandConfig.supportEmail}`}
+                className='auth-link underline-offset-4 transition hover:underline'
+              >
+                Contact support
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }

apps/sim/app/playground/page.tsx

@@ -9,11 +9,8 @@ import {
   AvatarImage,
   Badge,
   Breadcrumb,
-  BubbleChatClose,
   BubbleChatPreview,
   Button,
-  ButtonGroup,
-  ButtonGroupItem,
   Card as CardIcon,
   Checkbox,
   ChevronDown,
@@ -21,7 +18,6 @@ import {
   Combobox,
   Connections,
   Copy,
-  DatePicker,
   DocumentAttachment,
   Duplicate,
   Eye,
@@ -33,7 +29,6 @@ import {
   Label,
   Layout,
   Library,
-  Loader,
   Modal,
   ModalBody,
   ModalContent,
@@ -74,15 +69,10 @@ import {
   Switch,
   Table,
   TableBody,
-  TableCaption,
   TableCell,
-  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
-  Tag,
-  TagInput,
-  type TagItem,
   Textarea,
   TimePicker,
   Tooltip,
@@ -139,14 +129,6 @@ export default function PlaygroundPage() {
   const [timeValue, setTimeValue] = useState('09:30')
   const [activeTab, setActiveTab] = useState('profile')
   const [isDarkMode, setIsDarkMode] = useState(false)
-  const [buttonGroupValue, setButtonGroupValue] = useState('curl')
-  const [dateValue, setDateValue] = useState('')
-  const [dateRangeStart, setDateRangeStart] = useState('')
-  const [dateRangeEnd, setDateRangeEnd] = useState('')
-  const [tagItems, setTagItems] = useState<TagItem[]>([
-    { value: 'user@example.com', isValid: true },
-    { value: 'invalid-email', isValid: false },
-  ])
 
   const toggleDarkMode = () => {
     setIsDarkMode(!isDarkMode)
@@ -226,57 +208,6 @@ export default function PlaygroundPage() {
             <VariantRow label='disabled'>
               <Button disabled>Disabled</Button>
             </VariantRow>
-            <VariantRow label='size sm'>
-              <Button size='sm'>Small</Button>
-              <Button size='sm' variant='primary'>
-                Small Primary
-              </Button>
-            </VariantRow>
-            <VariantRow label='size md'>
-              <Button size='md'>Medium</Button>
-              <Button size='md' variant='primary'>
-                Medium Primary
-              </Button>
-            </VariantRow>
-            <VariantRow label='size branded'>
-              <Button size='branded' variant='branded' className='branded-button-gradient'>
-                Branded
-              </Button>
-            </VariantRow>
-          </Section>
-
-          {/* ButtonGroup */}
-          <Section title='ButtonGroup'>
-            <VariantRow label='default'>
-              <ButtonGroup value={buttonGroupValue} onValueChange={setButtonGroupValue}>
-                <ButtonGroupItem value='curl'>cURL</ButtonGroupItem>
-                <ButtonGroupItem value='python'>Python</ButtonGroupItem>
-                <ButtonGroupItem value='javascript'>JavaScript</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='gap none'>
-              <ButtonGroup value='opt1' gap='none'>
-                <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
-                <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='gap sm'>
-              <ButtonGroup value='opt1' gap='sm'>
-                <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
-                <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <ButtonGroup value='opt1' disabled>
-                <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
-                <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='single item'>
-              <ButtonGroup value='only'>
-                <ButtonGroupItem value='only'>Only Option</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
           </Section>
 
           {/* Badge */}
@@ -343,46 +274,6 @@ export default function PlaygroundPage() {
             </VariantRow>
           </Section>
 
-          {/* TagInput */}
-          <Section title='TagInput'>
-            <VariantRow label='default'>
-              <div className='w-80'>
-                <TagInput
-                  items={tagItems}
-                  onAdd={(value) => {
-                    const isValid = value.includes('@') && value.includes('.')
-                    setTagItems((prev) => [...prev, { value, isValid }])
-                    return isValid
-                  }}
-                  onRemove={(_, index) => {
-                    setTagItems((prev) => prev.filter((_, i) => i !== index))
-                  }}
-                  placeholder='Enter emails...'
-                  placeholderWithTags='Add another'
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='tag variants'>
-              <Tag value='valid@email.com' variant='default' />
-              <Tag value='invalid-email' variant='invalid' />
-            </VariantRow>
-            <VariantRow label='tag with remove'>
-              <Tag value='removable@tag.com' variant='default' onRemove={() => {}} />
-              <Tag value='invalid-removable' variant='invalid' onRemove={() => {}} />
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <div className='w-80'>
-                <TagInput
-                  items={[{ value: 'disabled@email.com', isValid: true }]}
-                  onAdd={() => false}
-                  onRemove={() => {}}
-                  placeholder='Disabled input'
-                  disabled
-                />
-              </div>
-            </VariantRow>
-          </Section>
-
           {/* Textarea */}
           <Section title='Textarea'>
             <Textarea placeholder='Enter your message...' className='max-w-md' rows={4} />
@@ -462,6 +353,9 @@ export default function PlaygroundPage() {
               <Avatar size='lg'>
                 <AvatarFallback>LG</AvatarFallback>
               </Avatar>
+              <Avatar size='xl'>
+                <AvatarFallback>XL</AvatarFallback>
+              </Avatar>
             </VariantRow>
             <VariantRow label='with image'>
               <Avatar size='md'>
@@ -502,6 +396,9 @@ export default function PlaygroundPage() {
               <Avatar size='lg' status='online'>
                 <AvatarFallback>LG</AvatarFallback>
               </Avatar>
+              <Avatar size='xl' status='online'>
+                <AvatarFallback>XL</AvatarFallback>
+              </Avatar>
             </VariantRow>
           </Section>
 
@@ -535,53 +432,6 @@ export default function PlaygroundPage() {
                 </TableBody>
               </Table>
             </VariantRow>
-            <VariantRow label='with footer'>
-              <Table className='max-w-md'>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Item</TableHead>
-                    <TableHead className='text-right'>Price</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>Product A</TableCell>
-                    <TableCell className='text-right'>$10.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>Product B</TableCell>
-                    <TableCell className='text-right'>$20.00</TableCell>
-                  </TableRow>
-                </TableBody>
-                <TableFooter>
-                  <TableRow>
-                    <TableCell>Total</TableCell>
-                    <TableCell className='text-right'>$30.00</TableCell>
-                  </TableRow>
-                </TableFooter>
-              </Table>
-            </VariantRow>
-            <VariantRow label='with caption'>
-              <Table className='max-w-md'>
-                <TableCaption>A list of team members</TableCaption>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Name</TableHead>
-                    <TableHead>Department</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>Alice</TableCell>
-                    <TableCell>Engineering</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>Bob</TableCell>
-                    <TableCell>Design</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </VariantRow>
           </Section>
 
           {/* Combobox */}
@@ -668,43 +518,6 @@ export default function PlaygroundPage() {
             </VariantRow>
           </Section>
 
-          {/* DatePicker */}
-          <Section title='DatePicker'>
-            <VariantRow label='single date'>
-              <div className='w-56'>
-                <DatePicker value={dateValue} onChange={setDateValue} placeholder='Select date' />
-              </div>
-              <span className='text-[var(--text-secondary)] text-sm'>{dateValue || 'No date'}</span>
-            </VariantRow>
-            <VariantRow label='size sm'>
-              <div className='w-56'>
-                <DatePicker placeholder='Small size' size='sm' onChange={() => {}} />
-              </div>
-            </VariantRow>
-            <VariantRow label='range mode'>
-              <div className='w-72'>
-                <DatePicker
-                  mode='range'
-                  startDate={dateRangeStart}
-                  endDate={dateRangeEnd}
-                  onRangeChange={(start, end) => {
-                    setDateRangeStart(start)
-                    setDateRangeEnd(end)
-                  }}
-                  placeholder='Select date range'
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <div className='w-56'>
-                <DatePicker value='2025-01-15' disabled />
-              </div>
-            </VariantRow>
-            <VariantRow label='inline'>
-              <DatePicker inline value={dateValue} onChange={setDateValue} />
-            </VariantRow>
-          </Section>
-
           {/* Breadcrumb */}
           <Section title='Breadcrumb'>
             <Breadcrumb
@@ -726,26 +539,6 @@ export default function PlaygroundPage() {
                 <Tooltip.Content>Tooltip content</Tooltip.Content>
               </Tooltip.Root>
             </VariantRow>
-            <VariantRow label='with shortcut'>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button variant='default'>Clear console</Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <Tooltip.Shortcut keys='⌘D'>Clear console</Tooltip.Shortcut>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </VariantRow>
-            <VariantRow label='shortcut only'>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button variant='default'>Save</Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <Tooltip.Shortcut keys='⌘S' />
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </VariantRow>
           </Section>
 
           {/* Popover */}
@@ -967,7 +760,6 @@ export default function PlaygroundPage() {
           <Section title='Icons'>
             <div className='grid grid-cols-6 gap-4 sm:grid-cols-8 md:grid-cols-10'>
               {[
-                { Icon: BubbleChatClose, name: 'BubbleChatClose' },
                 { Icon: BubbleChatPreview, name: 'BubbleChatPreview' },
                 { Icon: CardIcon, name: 'Card' },
                 { Icon: ChevronDown, name: 'ChevronDown' },
@@ -982,7 +774,6 @@ export default function PlaygroundPage() {
                 { Icon: KeyIcon, name: 'Key' },
                 { Icon: Layout, name: 'Layout' },
                 { Icon: Library, name: 'Library' },
-                { Icon: Loader, name: 'Loader' },
                 { Icon: MoreHorizontal, name: 'MoreHorizontal' },
                 { Icon: NoWrap, name: 'NoWrap' },
                 { Icon: PanelLeft, name: 'PanelLeft' },

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx

@@ -123,7 +123,7 @@ export function CreateChunkModal({
           <ModalHeader>Create Chunk</ModalHeader>
 
           <form>
-            <ModalBody>
+            <ModalBody className='!pb-[16px]'>
               <div className='flex flex-col gap-[8px]'>
                 {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -22,9 +22,9 @@ import type { DocumentData } from '@/lib/knowledge/types'
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
-} from '@/hooks/kb/use-knowledge-base-tag-definitions'
-import { useNextAvailableSlot } from '@/hooks/kb/use-next-available-slot'
-import { type TagDefinitionInput, useTagDefinitions } from '@/hooks/kb/use-tag-definitions'
+} from '@/hooks/use-knowledge-base-tag-definitions'
+import { useNextAvailableSlot } from '@/hooks/use-next-available-slot'
+import { type TagDefinitionInput, useTagDefinitions } from '@/hooks/use-tag-definitions'
 
 const logger = createLogger('DocumentTagsModal')
 
@@ -399,7 +399,7 @@ export function DocumentTagsModal({
           </div>
         </ModalHeader>
 
-        <ModalBody>
+        <ModalBody className='!pb-[16px]'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[8px]'>
               <Label>Tags</Label>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx

@@ -260,7 +260,7 @@ export function EditChunkModal({
           </ModalHeader>
 
           <form>
-            <ModalBody>
+            <ModalBody className='!pb-[16px]'>
               <div className='flex flex-col gap-[8px]'>
                 {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -47,8 +47,8 @@ import {
 import { ActionBar } from '@/app/workspace/[workspaceId]/knowledge/[id]/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { useDocument, useDocumentChunks, useKnowledgeBase } from '@/hooks/kb/use-knowledge'
 import { knowledgeKeys } from '@/hooks/queries/knowledge'
+import { useDocument, useDocumentChunks, useKnowledgeBase } from '@/hooks/use-knowledge'
 
 const logger = createLogger('Document')
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -53,16 +53,16 @@ import {
 import { getDocumentIcon } from '@/app/workspace/[workspaceId]/knowledge/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { knowledgeKeys } from '@/hooks/queries/knowledge'
 import {
   useKnowledgeBase,
   useKnowledgeBaseDocuments,
   useKnowledgeBasesList,
-} from '@/hooks/kb/use-knowledge'
+} from '@/hooks/use-knowledge'
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
-} from '@/hooks/kb/use-knowledge-base-tag-definitions'
-import { knowledgeKeys } from '@/hooks/queries/knowledge'
+} from '@/hooks/use-knowledge-base-tag-definitions'
 
 const logger = createLogger('KnowledgeBase')
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx

@@ -224,7 +224,7 @@ export function AddDocumentsModal({
       <ModalContent>
         <ModalHeader>Add Documents</ModalHeader>
 
-        <ModalBody>
+        <ModalBody className='!pb-[16px]'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[12px]'>
               {fileError && (
@@ -242,8 +242,8 @@ export function AddDocumentsModal({
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
                   className={cn(
-                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
-                    isDragging && 'border-[var(--surface-7)]'
+                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--c-575757)] border-dashed py-[10px]',
+                    isDragging && 'border-[var(--brand-primary-hex)]'
                   )}
                 >
                   <input

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -21,7 +21,7 @@ import { getDocumentIcon } from '@/app/workspace/[workspaceId]/knowledge/compone
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
-} from '@/hooks/kb/use-knowledge-base-tag-definitions'
+} from '@/hooks/use-knowledge-base-tag-definitions'
 
 const logger = createLogger('BaseTagsModal')
 
@@ -313,7 +313,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
             </div>
           </ModalHeader>
 
-          <ModalBody>
+          <ModalBody className='!pb-[16px]'>
             <div className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[8px]'>
                 <Label>
@@ -458,7 +458,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       <Modal open={deleteTagDialogOpen} onOpenChange={setDeleteTagDialogOpen}>
         <ModalContent size='sm'>
           <ModalHeader>Delete Tag</ModalHeader>
-          <ModalBody>
+          <ModalBody className='!pb-[16px]'>
             <div className='space-y-[8px]'>
               <p className='text-[12px] text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
@@ -497,7 +497,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       <Modal open={viewDocumentsDialogOpen} onOpenChange={setViewDocumentsDialogOpen}>
         <ModalContent size='sm'>
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
-          <ModalBody>
+          <ModalBody className='!pb-[16px]'>
             <div className='space-y-[8px]'>
               <p className='text-[12px] text-[var(--text-tertiary)]'>
                 {selectedTagUsage?.documentCount || 0} document

apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx

@@ -336,7 +336,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
         <ModalHeader>Create Knowledge Base</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody>
+          <ModalBody className='!pb-[16px]'>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[12px]'>
                 <div className='flex flex-col gap-[8px]'>
@@ -436,8 +436,8 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
-                      isDragging && 'border-[var(--surface-7)]'
+                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--c-575757)] border-dashed py-[10px]',
+                      isDragging && 'border-[var(--brand-primary-hex)]'
                     )}
                   >
                     <input

apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx

@@ -102,7 +102,7 @@ export function EditKnowledgeBaseModal({
         <ModalHeader>Edit Knowledge Base</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody>
+          <ModalBody className='!pb-[16px]'>
             <div className='space-y-[12px]'>
               <div className='flex flex-col gap-[8px]'>
                 <Label htmlFor='kb-name'>Name</Label>

apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx

@@ -31,8 +31,8 @@ import {
 } from '@/app/workspace/[workspaceId]/knowledge/utils/sort'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { useKnowledgeBasesList } from '@/hooks/kb/use-knowledge'
 import { useDebounce } from '@/hooks/use-debounce'
+import { useKnowledgeBasesList } from '@/hooks/use-knowledge'
 
 const logger = createLogger('Knowledge')
 

apps/sim/app/workspace/[workspaceId]/knowledge/page.tsx

@@ -1,33 +1 @@
-import { redirect } from 'next/navigation'
-import { getSession } from '@/lib/auth'
-import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
-import { getUserPermissionConfig } from '@/executor/utils/permission-check'
-import { Knowledge } from './knowledge'
-
-interface KnowledgePageProps {
-  params: Promise<{
-    workspaceId: string
-  }>
-}
-
-export default async function KnowledgePage({ params }: KnowledgePageProps) {
-  const { workspaceId } = await params
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    redirect('/')
-  }
-
-  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
-  if (!hasPermission) {
-    redirect('/')
-  }
-
-  // Check permission group restrictions
-  const permissionConfig = await getUserPermissionConfig(session.user.id)
-  if (permissionConfig?.hideKnowledgeBaseTab) {
-    redirect(`/workspace/${workspaceId}`)
-  }
-
-  return <Knowledge />
-}
+export { Knowledge as default } from './knowledge'

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx

@@ -63,13 +63,13 @@ export function StatusBar({
             hoverBrightness = 'hover:brightness-200'
           } else if (segment.successRate === 100) {
             color = 'bg-emerald-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover:brightness-110'
           } else if (segment.successRate >= 95) {
             color = 'bg-amber-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover:brightness-110'
           } else {
             color = 'bg-red-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover:brightness-110'
           }
 
           return (

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -17,7 +17,6 @@ import {
   StatusBadge,
   TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
-import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { formatCost } from '@/providers/utils'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
@@ -58,7 +57,6 @@ export const LogDetails = memo(function LogDetails({
   const scrollAreaRef = useRef<HTMLDivElement>(null)
   const panelWidth = useLogDetailsUIStore((state) => state.panelWidth)
   const { handleMouseDown } = useLogDetailsResize()
-  const { config: permissionConfig } = usePermissionConfig()
 
   useEffect(() => {
     if (scrollAreaRef.current) {
@@ -266,7 +264,7 @@ export const LogDetails = memo(function LogDetails({
                 </div>
 
                 {/* Workflow State */}
-                {isWorkflowExecutionLog && log.executionId && !permissionConfig.hideTraceSpans && (
+                {isWorkflowExecutionLog && log.executionId && (
                   <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Workflow State
@@ -284,14 +282,12 @@ export const LogDetails = memo(function LogDetails({
                 )}
 
                 {/* Workflow Execution - Trace Spans */}
-                {isWorkflowExecutionLog &&
-                  log.executionData?.traceSpans &&
-                  !permissionConfig.hideTraceSpans && (
-                    <TraceSpans
-                      traceSpans={log.executionData.traceSpans}
-                      totalDuration={log.executionData.totalDuration}
-                    />
-                  )}
+                {isWorkflowExecutionLog && log.executionData?.traceSpans && (
+                  <TraceSpans
+                    traceSpans={log.executionData.traceSpans}
+                    totalDuration={log.executionData.totalDuration}
+                  />
+                )}
 
                 {/* Files */}
                 {log.files && log.files.length > 0 && (

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx

@@ -18,11 +18,10 @@ import {
   ModalTabsContent,
   ModalTabsList,
   ModalTabsTrigger,
-  TagInput,
-  type TagItem,
 } from '@/components/emcn'
 import { SlackIcon } from '@/components/icons'
 import { Skeleton } from '@/components/ui'
+import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import {
   type NotificationSubscription,
@@ -157,7 +156,8 @@ export function NotificationSettings({
     errorCountThreshold: 10,
   })
 
-  const [emailItems, setEmailItems] = useState<TagItem[]>([])
+  const [emailInputValue, setEmailInputValue] = useState('')
+  const [invalidEmails, setInvalidEmails] = useState<string[]>([])
 
   const [formErrors, setFormErrors] = useState<Record<string, string>>({})
 
@@ -225,7 +225,8 @@ export function NotificationSettings({
     })
     setFormErrors({})
     setEditingId(null)
-    setEmailItems([])
+    setEmailInputValue('')
+    setInvalidEmails([])
   }, [])
 
   const handleClose = useCallback(() => {
@@ -242,37 +243,81 @@ export function NotificationSettings({
       const normalized = email.trim().toLowerCase()
       const validation = quickValidateEmail(normalized)
 
-      if (emailItems.some((item) => item.value === normalized)) {
+      if (formData.emailRecipients.includes(normalized) || invalidEmails.includes(normalized)) {
         return false
       }
 
-      setEmailItems((prev) => [...prev, { value: normalized, isValid: validation.isValid }])
-
-      if (validation.isValid) {
-        setFormErrors((prev) => ({ ...prev, emailRecipients: '' }))
-        setFormData((prev) => ({
-          ...prev,
-          emailRecipients: [...prev.emailRecipients, normalized],
-        }))
+      if (!validation.isValid) {
+        setInvalidEmails((prev) => [...prev, normalized])
+        setEmailInputValue('')
+        return false
       }
 
-      return validation.isValid
+      setFormErrors((prev) => ({ ...prev, emailRecipients: '' }))
+      setFormData((prev) => ({
+        ...prev,
+        emailRecipients: [...prev.emailRecipients, normalized],
+      }))
+      setEmailInputValue('')
+      return true
     },
-    [emailItems]
+    [formData.emailRecipients, invalidEmails]
   )
 
-  const handleRemoveEmailItem = useCallback(
-    (_value: string, index: number, isValid: boolean) => {
-      const itemToRemove = emailItems[index]
-      setEmailItems((prev) => prev.filter((_, i) => i !== index))
-      if (isValid && itemToRemove) {
-        setFormData((prev) => ({
-          ...prev,
-          emailRecipients: prev.emailRecipients.filter((e) => e !== itemToRemove.value),
-        }))
+  const handleRemoveEmail = useCallback((emailToRemove: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      emailRecipients: prev.emailRecipients.filter((e) => e !== emailToRemove),
+    }))
+  }, [])
+
+  const handleRemoveInvalidEmail = useCallback((index: number) => {
+    setInvalidEmails((prev) => prev.filter((_, i) => i !== index))
+  }, [])
+
+  const handleEmailKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (['Enter', ',', ' '].includes(e.key) && emailInputValue.trim()) {
+        e.preventDefault()
+        addEmail(emailInputValue)
+      }
+
+      if (e.key === 'Backspace' && !emailInputValue) {
+        if (invalidEmails.length > 0) {
+          handleRemoveInvalidEmail(invalidEmails.length - 1)
+        } else if (formData.emailRecipients.length > 0) {
+          handleRemoveEmail(formData.emailRecipients[formData.emailRecipients.length - 1])
+        }
       }
     },
-    [emailItems]
+    [
+      emailInputValue,
+      addEmail,
+      invalidEmails,
+      formData.emailRecipients,
+      handleRemoveInvalidEmail,
+      handleRemoveEmail,
+    ]
+  )
+
+  const handleEmailPaste = useCallback(
+    (e: React.ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault()
+      const pastedText = e.clipboardData.getData('text')
+      const pastedEmails = pastedText.split(/[\s,;]+/).filter(Boolean)
+
+      let addedCount = 0
+      pastedEmails.forEach((email) => {
+        if (addEmail(email)) {
+          addedCount++
+        }
+      })
+
+      if (addedCount === 0 && pastedEmails.length === 1) {
+        setEmailInputValue(emailInputValue + pastedEmails[0])
+      }
+    },
+    [addEmail, emailInputValue]
   )
 
   const validateForm = (): boolean => {
@@ -311,11 +356,8 @@ export function NotificationSettings({
       } else if (formData.emailRecipients.length > 10) {
         errors.emailRecipients = 'Maximum 10 email recipients allowed'
       }
-      const invalidEmailValues = emailItems
-        .filter((item) => !item.isValid)
-        .map((item) => item.value)
-      if (invalidEmailValues.length > 0) {
-        errors.emailRecipients = `Invalid email addresses: ${invalidEmailValues.join(', ')}`
+      if (invalidEmails.length > 0) {
+        errors.emailRecipients = `Invalid email addresses: ${invalidEmails.join(', ')}`
       }
     }
 
@@ -494,9 +536,8 @@ export function NotificationSettings({
       inactivityHours: subscription.alertConfig?.inactivityHours || 24,
       errorCountThreshold: subscription.alertConfig?.errorCountThreshold || 10,
     })
-    setEmailItems(
-      (subscription.emailRecipients || []).map((email) => ({ value: email, isValid: true }))
-    )
+    setEmailInputValue('')
+    setInvalidEmails([])
     setShowForm(true)
   }
 
@@ -651,13 +692,37 @@ export function NotificationSettings({
           {activeTab === 'email' && (
             <div className='flex flex-col gap-[8px]'>
               <Label className='text-[var(--text-secondary)]'>Email Recipients</Label>
-              <TagInput
-                items={emailItems}
-                onAdd={(value) => addEmail(value)}
-                onRemove={handleRemoveEmailItem}
-                placeholder='Enter emails'
-                placeholderWithTags='Add email'
-              />
+              <div className='scrollbar-hide flex max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-5)]'>
+                {invalidEmails.map((email, index) => (
+                  <EmailTag
+                    key={`invalid-${index}`}
+                    email={email}
+                    onRemove={() => handleRemoveInvalidEmail(index)}
+                    isInvalid={true}
+                  />
+                ))}
+                {formData.emailRecipients.map((email, index) => (
+                  <EmailTag
+                    key={`valid-${index}`}
+                    email={email}
+                    onRemove={() => handleRemoveEmail(email)}
+                  />
+                ))}
+                <input
+                  type='text'
+                  value={emailInputValue}
+                  onChange={(e) => setEmailInputValue(e.target.value)}
+                  onKeyDown={handleEmailKeyDown}
+                  onPaste={handleEmailPaste}
+                  onBlur={() => emailInputValue.trim() && addEmail(emailInputValue)}
+                  placeholder={
+                    formData.emailRecipients.length > 0 || invalidEmails.length > 0
+                      ? 'Add another email'
+                      : 'Enter emails'
+                  }
+                  className='min-w-[180px] flex-1 border-none bg-transparent p-0 font-medium font-sans text-foreground text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
+                />
+              </div>
               {formErrors.emailRecipients && (
                 <p className='text-[11px] text-[var(--text-error)]'>{formErrors.emailRecipients}</p>
               )}
@@ -1286,3 +1351,37 @@ export function NotificationSettings({
     </>
   )
 }
+
+interface EmailTagProps {
+  email: string
+  onRemove: () => void
+  isInvalid?: boolean
+}
+
+function EmailTag({ email, onRemove, isInvalid }: EmailTagProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
+        isInvalid
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)]'
+          : 'border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+      )}
+    >
+      <span className='max-w-[200px] truncate'>{email}</span>
+      <button
+        type='button'
+        onClick={onRemove}
+        className={cn(
+          'flex-shrink-0 transition-colors focus:outline-none',
+          isInvalid
+            ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+            : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
+        )}
+        aria-label={`Remove ${email}`}
+      >
+        <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
+      </button>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/logs/hooks/use-log-details-resize.ts

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useLogDetailsUIStore } from '@/stores/logs/store'
-import { MIN_LOG_DETAILS_WIDTH } from '@/stores/logs/utils'
+import { MIN_LOG_DETAILS_WIDTH, useLogDetailsUIStore } from '@/stores/logs/store'
 
 /**
  * Hook for handling log details panel resize via mouse drag.

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -69,7 +69,7 @@ const STATUS_VARIANT_MAP: Record<
 const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['variant']> = {
   manual: 'gray-secondary',
   api: 'blue',
-  schedule: 'green',
+  schedule: 'teal',
   chat: 'purple',
   webhook: 'orange',
 }

apps/sim/app/workspace/[workspaceId]/providers/provider-models-loader.tsx

@@ -8,7 +8,8 @@ import {
   updateOpenRouterProviderModels,
   updateVLLMProviderModels,
 } from '@/providers/utils'
-import { type ProviderName, useProvidersStore } from '@/stores/providers'
+import { useProvidersStore } from '@/stores/providers/store'
+import type { ProviderName } from '@/stores/providers/types'
 
 const logger = createLogger('ProviderModelsLoader')
 

apps/sim/app/workspace/[workspaceId]/templates/components/navigation-tabs.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/core/utils/cn'
+
+interface NavigationTab {
+  id: string
+  label: string
+  count?: number
+}
+
+interface NavigationTabsProps {
+  tabs: NavigationTab[]
+  activeTab?: string
+  onTabClick?: (tabId: string) => void
+  className?: string
+}
+
+export function NavigationTabs({ tabs, activeTab, onTabClick, className }: NavigationTabsProps) {
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      {tabs.map((tab, index) => (
+        <button
+          key={tab.id}
+          onClick={() => onTabClick?.(tab.id)}
+          className={cn(
+            'flex h-[38px] items-center gap-1 rounded-[14px] px-3 font-[440] font-sans text-muted-foreground text-sm transition-all duration-200',
+            activeTab === tab.id ? 'bg-secondary' : 'bg-transparent hover:bg-secondary/50'
+          )}
+        >
+          <span>{tab.label}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/templates/page.tsx

@@ -6,7 +6,6 @@ import { getSession } from '@/lib/auth'
 import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
 import type { Template as WorkspaceTemplate } from '@/app/workspace/[workspaceId]/templates/templates'
 import Templates from '@/app/workspace/[workspaceId]/templates/templates'
-import { getUserPermissionConfig } from '@/executor/utils/permission-check'
 
 interface TemplatesPageProps {
   params: Promise<{
@@ -33,12 +32,6 @@ export default async function TemplatesPage({ params }: TemplatesPageProps) {
     redirect('/')
   }
 
-  // Check permission group restrictions
-  const permissionConfig = await getUserPermissionConfig(session.user.id)
-  if (permissionConfig?.hideTemplates) {
-    redirect(`/workspace/${workspaceId}`)
-  }
-
   // Determine effective super user (DB flag AND UI mode enabled)
   const currentUser = await db
     .select({ isSuperUser: user.isSuperUser })

apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts

@@ -7,7 +7,6 @@ import type { GlobalCommand } from '@/app/workspace/[workspaceId]/providers/glob
  * ad-hoc ids or shortcuts to ensure a single source of truth.
  */
 export type CommandId =
-  | 'accept-diff-changes'
   | 'add-agent'
   | 'goto-templates'
   | 'goto-logs'
@@ -44,11 +43,6 @@ export interface CommandDefinition {
  * All global commands must be declared here to be usable.
  */
 export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
-  'accept-diff-changes': {
-    id: 'accept-diff-changes',
-    shortcut: 'Mod+Shift+Enter',
-    allowInEditable: true,
-  },
   'add-agent': {
     id: 'add-agent',
     shortcut: 'Mod+Shift+A',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx

@@ -48,9 +48,8 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/float'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import type { BlockLog, ExecutionResult } from '@/executor/types'
-import { useChatStore } from '@/stores/chat/store'
-import { getChatPosition } from '@/stores/chat/utils'
-import { useExecutionStore } from '@/stores/execution'
+import { getChatPosition, useChatStore } from '@/stores/chat/store'
+import { useExecutionStore } from '@/stores/execution/store'
 import { useOperationQueue } from '@/stores/operation-queue/store'
 import { useTerminalConsoleStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'