feat(deployed-form): added deployed form input (#2679)

* feat(deployed-form): added deployed form input

* styling consolidation, finishing touches on form

* updated docs

* remove unused files with knip

* added more form fields

* consolidated more test utils

* remove unused/unneeded zustand stores, refactored stores for consistency

* improvement(files): uncolorized plan name

* feat(emcn): button-group

* feat(emcn): tag input, tooltip shortcut

* improvement(emcn): modal padding, api, chat, form

* fix: deleted migrations

* feat(form): added migrations

* fix(emcn): tag input

* fix: failing tests on build

* add suplementary hover and fix bg color in date picker

* fix: build errors

---------

Co-authored-by: Emir Karabeg <[email protected]>

Author: waleedlatif1

.cursor/rules/sim-testing.mdc

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

CLAUDE.md

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

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

@@ -0,0 +1,136 @@
+---
+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: `[email protected]`
+- 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": "[email protected]"
+    }
+  }'
+```
+  </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: '[email protected]'
+    }
+  })
+});
+
+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": "[email protected]", "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", "logging", "costs"]
+  "pages": ["index", "basics", "api", "form", "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']}>
+<Tabs items={['Editor run', 'Deploy to API', 'Deploy to chat', 'Deploy to form']}>
   <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,6 +64,13 @@ 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

@@ -0,0 +1,100 @@
+'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 || 'auth-button-gradient',
+    primaryClassName || 'branded-button-gradient',
     'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
   )