v0.6.4: subflows, docusign, ashby new tools, box, workday, billing bug fixes

* feat(box): add Box and Box Sign integrations

Add complete Box integration with file management (upload, download, get info, list folders, create/delete folders, copy, search, update metadata) and Box Sign e-signature support (create/get/list/cancel/resend sign requests). Includes OAuth provider setup, internal upload API route following the Dropbox pattern, block configurations, icon, and generated docs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): address PR review comments

- Fix docsLink for Box Sign: use underscore (box_sign) to match docs URL
- Move normalizeFileInput from tool() to params() in Box block config to match Dropbox pattern
- Throw error on invalid additionalSigners JSON instead of silently dropping signers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): remove unsupported reason param from cancel sign request

The Box Sign cancel endpoint (POST /sign_requests/{id}/cancel) does not
accept a request body per the API specification. Remove the misleading
reason parameter from the tool, types, block config, and docs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): use canonical param ID for file normalization in params()

The params function must reference canonical IDs (params.file), not raw
subBlock IDs (uploadFile/fileRef) which are deleted after canonical
transformation. Matches the Dropbox block pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): use generic output descriptions for shared file properties

Rename "Uploaded file ID/name" to "File ID/name" in
UPLOAD_FILE_OUTPUT_PROPERTIES since the constant is shared by both
upload and copy operations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): rename items output to entries for list_folder_items

Rename the output field from "items" to "entries" to match Box API
naming and avoid collision with JSON schema "items" keyword that
prevented the docs generator from rendering the nested array structure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): filter empty file IDs from sourceFileIds input

Add .filter(Boolean) after splitting sourceFileIds to prevent empty
strings from trailing/double commas being sent as invalid file IDs
to the Box Sign API.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor(box): merge Box Sign into single Box block

Combine Box and Box Sign into one unified block with all 15 operations
accessible via a single dropdown, removing the separate box_sign block.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): filter empty strings from tags array in update_file

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style(docs): apply lint formatting to icon-mapping and meta.json

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style(box): format chained method calls per linter rules

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style(box,docusign): set block bgColor to white and regenerate docs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style(docs): apply lint formatting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): populate OAuth scopes for Box since token response omits them

Box's OAuth2 token endpoint does not return a scope field in the
response, so Better Auth stores nothing in the DB. This causes the
credential selector to always show "Additional permissions required".
Fix by populating the scope from the requested scopes in the
account.create.before hook.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(box): add sign_requests.readwrite scope for Box Sign operations

Box Sign API requires the sign_requests.readwrite scope in addition
to root_readwrite. Without it, sign requests fail with "The request
requires higher privileges than provided by the access token."

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* update docs

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

.claude/commands/validate-connector.md

@@ -0,0 +1,316 @@
+---
+description: Validate an existing knowledge base connector against its service's API docs
+argument-hint: <service-name> [api-docs-url]
+---
+
+# Validate Connector Skill
+
+You are an expert auditor for Sim knowledge base connectors. Your job is to thoroughly validate that an existing connector is correct, complete, and follows all conventions.
+
+## Your Task
+
+When the user asks you to validate a connector:
+1. Read the service's API documentation (via Context7 or WebFetch)
+2. Read the connector implementation, OAuth config, and registry entries
+3. Cross-reference everything against the API docs and Sim conventions
+4. Report all issues found, grouped by severity (critical, warning, suggestion)
+5. Fix all issues after reporting them
+
+## Step 1: Gather All Files
+
+Read **every** file for the connector — do not skip any:
+
+```
+apps/sim/connectors/{service}/{service}.ts   # Connector implementation
+apps/sim/connectors/{service}/index.ts       # Barrel export
+apps/sim/connectors/registry.ts              # Connector registry entry
+apps/sim/connectors/types.ts                 # ConnectorConfig interface, ExternalDocument, etc.
+apps/sim/connectors/utils.ts                 # Shared utilities (computeContentHash, htmlToPlainText, etc.)
+apps/sim/lib/oauth/oauth.ts                  # OAUTH_PROVIDERS — single source of truth for scopes
+apps/sim/lib/oauth/utils.ts                  # getCanonicalScopesForProvider, getScopesForService, SCOPE_DESCRIPTIONS
+apps/sim/lib/oauth/types.ts                  # OAuthService union type
+apps/sim/components/icons.tsx                 # Icon definition for the service
+```
+
+If the connector uses selectors, also read:
+```
+apps/sim/hooks/selectors/registry.ts         # Selector key definitions
+apps/sim/hooks/selectors/types.ts            # SelectorKey union type
+apps/sim/lib/workflows/subblocks/context.ts  # SELECTOR_CONTEXT_FIELDS
+```
+
+## Step 2: Pull API Documentation
+
+Fetch the official API docs for the service. This is the **source of truth** for:
+- Endpoint URLs, HTTP methods, and auth headers
+- Required vs optional parameters
+- Parameter types and allowed values
+- Response shapes and field names
+- Pagination patterns (cursor, offset, next token)
+- Rate limits and error formats
+- OAuth scopes and their meanings
+
+Use Context7 (resolve-library-id → query-docs) or WebFetch to retrieve documentation. If both fail, note which claims are based on training knowledge vs verified docs.
+
+## Step 3: Validate API Endpoints
+
+For **every** API call in the connector (`listDocuments`, `getDocument`, `validateConfig`, and any helper functions), verify against the API docs:
+
+### URLs and Methods
+- [ ] Base URL is correct for the service's API version
+- [ ] Endpoint paths match the API docs exactly
+- [ ] HTTP method is correct (GET, POST, PUT, PATCH, DELETE)
+- [ ] Path parameters are correctly interpolated and URI-encoded where needed
+- [ ] Query parameters use correct names and formats per the API docs
+
+### Headers
+- [ ] Authorization header uses the correct format:
+  - OAuth: `Authorization: Bearer ${accessToken}`
+  - API Key: correct header name per the service's docs
+- [ ] `Content-Type` is set for POST/PUT/PATCH requests
+- [ ] Any service-specific headers are present (e.g., `Notion-Version`, `Dropbox-API-Arg`)
+- [ ] No headers are sent that the API doesn't support or silently ignores
+
+### Request Bodies
+- [ ] POST/PUT body fields match API parameter names exactly
+- [ ] Required fields are always sent
+- [ ] Optional fields are conditionally included (not sent as `null` or empty unless the API expects that)
+- [ ] Field value types match API expectations (string vs number vs boolean)
+
+### Input Sanitization
+- [ ] User-controlled values interpolated into query strings are properly escaped:
+  - OData `$filter`: single quotes escaped with `''` (e.g., `externalId.replace(/'/g, "''")`)
+  - SOQL: single quotes escaped with `\'`
+  - GraphQL variables: passed as variables, not interpolated into query strings
+  - URL path segments: `encodeURIComponent()` applied
+- [ ] URL-type config fields (e.g., `siteUrl`, `instanceUrl`) are normalized:
+  - Strip `https://` / `http://` prefix if the API expects bare domains
+  - Strip trailing `/`
+  - Apply `.trim()` before validation
+
+### Response Parsing
+- [ ] Response structure is correctly traversed (e.g., `data.results` vs `data.items` vs `data`)
+- [ ] Field names extracted match what the API actually returns
+- [ ] Nullable fields are handled with `?? null` or `|| undefined`
+- [ ] Error responses are checked before accessing data fields
+
+## Step 4: Validate OAuth Scopes (if OAuth connector)
+
+Scopes must be correctly declared and sufficient for all API calls the connector makes.
+
+### Connector requiredScopes
+- [ ] `requiredScopes` in the connector's `auth` config lists all scopes needed by the connector
+- [ ] Each scope in `requiredScopes` is a real, valid scope recognized by the service's API
+- [ ] No invalid, deprecated, or made-up scopes are listed
+- [ ] No unnecessary excess scopes beyond what the connector actually needs
+
+### Scope Subset Validation (CRITICAL)
+- [ ] Every scope in `requiredScopes` exists in the OAuth provider's `scopes` array in `lib/oauth/oauth.ts`
+- [ ] Find the provider in `OAUTH_PROVIDERS[providerGroup].services[serviceId].scopes`
+- [ ] Verify: `requiredScopes` ⊆ `OAUTH_PROVIDERS scopes` (every required scope is present in the provider config)
+- [ ] If a required scope is NOT in the provider config, flag as **critical** — the connector will fail at runtime
+
+### Scope Sufficiency
+For each API endpoint the connector calls:
+- [ ] Identify which scopes are required per the API docs
+- [ ] Verify those scopes are included in the connector's `requiredScopes`
+- [ ] If the connector calls endpoints requiring scopes not in `requiredScopes`, flag as **warning**
+
+### Token Refresh Config
+- [ ] Check the `getOAuthTokenRefreshConfig` function in `lib/oauth/oauth.ts` for this provider
+- [ ] `useBasicAuth` matches the service's token exchange requirements
+- [ ] `supportsRefreshTokenRotation` matches whether the service issues rotating refresh tokens
+- [ ] Token endpoint URL is correct
+
+## Step 5: Validate Pagination
+
+### listDocuments Pagination
+- [ ] Cursor/pagination parameter name matches the API docs
+- [ ] Response pagination field is correctly extracted (e.g., `next_cursor`, `nextPageToken`, `@odata.nextLink`, `offset`)
+- [ ] `hasMore` is correctly determined from the response
+- [ ] `nextCursor` is correctly passed back for the next page
+- [ ] `maxItems` / `maxRecords` cap is correctly applied across pages using `syncContext.totalDocsFetched`
+- [ ] Page size is within the API's allowed range (not exceeding max page size)
+- [ ] Last page precision: when a `maxItems` cap exists, the final page request uses `Math.min(PAGE_SIZE, remaining)` to avoid fetching more records than needed
+- [ ] No off-by-one errors in pagination tracking
+- [ ] The connector does NOT hit known API pagination limits silently (e.g., HubSpot search 10k cap)
+
+### Pagination State Across Pages
+- [ ] `syncContext` is used to cache state across pages (user names, field maps, instance URLs, portal IDs, etc.)
+- [ ] Cached state in `syncContext` is correctly initialized on first page and reused on subsequent pages
+
+## Step 6: Validate Data Transformation
+
+### ExternalDocument Construction
+- [ ] `externalId` is a stable, unique identifier from the source API
+- [ ] `title` is extracted from the correct field and has a sensible fallback (e.g., `'Untitled'`)
+- [ ] `content` is plain text — HTML content is stripped using `htmlToPlainText` from `@/connectors/utils`
+- [ ] `mimeType` is `'text/plain'`
+- [ ] `contentHash` is computed using `computeContentHash` from `@/connectors/utils`
+- [ ] `sourceUrl` is a valid, complete URL back to the original resource (not relative)
+- [ ] `metadata` contains all fields referenced by `mapTags` and `tagDefinitions`
+
+### Content Extraction
+- [ ] Rich text / HTML fields are converted to plain text before indexing
+- [ ] Important content is not silently dropped (e.g., nested blocks, table cells, code blocks)
+- [ ] Content is not silently truncated without logging a warning
+- [ ] Empty/blank documents are properly filtered out
+- [ ] Size checks use `Buffer.byteLength(text, 'utf8')` not `text.length` when comparing against byte-based limits (e.g., `MAX_FILE_SIZE` in bytes)
+
+## Step 7: Validate Tag Definitions and mapTags
+
+### tagDefinitions
+- [ ] Each `tagDefinition` has an `id`, `displayName`, and `fieldType`
+- [ ] `fieldType` matches the actual data type: `'text'` for strings, `'number'` for numbers, `'date'` for dates, `'boolean'` for booleans
+- [ ] Every `id` in `tagDefinitions` is returned by `mapTags`
+- [ ] No `tagDefinition` references a field that `mapTags` never produces
+
+### mapTags
+- [ ] Return keys match `tagDefinition` `id` values exactly
+- [ ] Date values are properly parsed using `parseTagDate` from `@/connectors/utils`
+- [ ] Array values are properly joined using `joinTagArray` from `@/connectors/utils`
+- [ ] Number values are validated (not `NaN`)
+- [ ] Metadata field names accessed in `mapTags` match what `listDocuments`/`getDocument` store in `metadata`
+
+## Step 8: Validate Config Fields and Validation
+
+### configFields
+- [ ] Every field has `id`, `title`, `type`
+- [ ] `required` is set explicitly (not omitted)
+- [ ] Dropdown fields have `options` with `label` and `id` for each option
+- [ ] Selector fields follow the canonical pair pattern:
+  - A `type: 'selector'` field with `selectorKey`, `canonicalParamId`, `mode: 'basic'`
+  - A `type: 'short-input'` field with the same `canonicalParamId`, `mode: 'advanced'`
+  - `required` is identical on both fields in the pair
+- [ ] `selectorKey` values exist in the selector registry
+- [ ] `dependsOn` references selector field `id` values, not `canonicalParamId`
+
+### validateConfig
+- [ ] Validates all required fields are present before making API calls
+- [ ] Validates optional numeric fields (checks `Number.isNaN`, positive values)
+- [ ] Makes a lightweight API call to verify access (e.g., fetch 1 record, get profile)
+- [ ] Uses `VALIDATE_RETRY_OPTIONS` for retry budget
+- [ ] Returns `{ valid: true }` on success
+- [ ] Returns `{ valid: false, error: 'descriptive message' }` on failure
+- [ ] Catches exceptions and returns user-friendly error messages
+- [ ] Does NOT make expensive calls (full data listing, large queries)
+
+## Step 9: Validate getDocument
+
+- [ ] Fetches a single document by `externalId`
+- [ ] Returns `null` for 404 / not found (does not throw)
+- [ ] Returns the same `ExternalDocument` shape as `listDocuments`
+- [ ] Handles all content types that `listDocuments` can produce (e.g., if `listDocuments` returns both pages and blogposts, `getDocument` must handle both — not hardcode one endpoint)
+- [ ] Forwards `syncContext` if it needs cached state (user names, field maps, etc.)
+- [ ] Error handling is graceful (catches, logs, returns null or throws with context)
+- [ ] Does not redundantly re-fetch data already included in the initial API response (e.g., if comments come back with the post, don't fetch them again separately)
+
+## Step 10: Validate General Quality
+
+### fetchWithRetry Usage
+- [ ] All external API calls use `fetchWithRetry` from `@/lib/knowledge/documents/utils`
+- [ ] No raw `fetch()` calls to external APIs
+- [ ] `VALIDATE_RETRY_OPTIONS` used in `validateConfig`
+- [ ] If `validateConfig` calls a shared helper (e.g., `linearGraphQL`, `resolveId`), that helper must accept and forward `retryOptions` to `fetchWithRetry`
+- [ ] Default retry options used in `listDocuments`/`getDocument`
+
+### API Efficiency
+- [ ] APIs that support field selection (e.g., `$select`, `sysparm_fields`, `fields`) should request only the fields the connector needs — in both `listDocuments` AND `getDocument`
+- [ ] No redundant API calls: if a helper already fetches data (e.g., site metadata), callers should reuse the result instead of making a second call for the same information
+- [ ] Sequential per-item API calls (fetching details for each document in a loop) should be batched with `Promise.all` and a concurrency limit of 3-5
+
+### Error Handling
+- [ ] Individual document failures are caught and logged without aborting the sync
+- [ ] API error responses include status codes in error messages
+- [ ] No unhandled promise rejections in concurrent operations
+
+### Concurrency
+- [ ] Concurrent API calls use reasonable batch sizes (3-5 is typical)
+- [ ] No unbounded `Promise.all` over large arrays
+
+### Logging
+- [ ] Uses `createLogger` from `@sim/logger` (not `console.log`)
+- [ ] Logs sync progress at `info` level
+- [ ] Logs errors at `warn` or `error` level with context
+
+### Registry
+- [ ] Connector is exported from `connectors/{service}/index.ts`
+- [ ] Connector is registered in `connectors/registry.ts`
+- [ ] Registry key matches the connector's `id` field
+
+## Step 11: Report and Fix
+
+### Report Format
+
+Group findings by severity:
+
+**Critical** (will cause runtime errors, data loss, or auth failures):
+- Wrong API endpoint URL or HTTP method
+- Invalid or missing OAuth scopes (not in provider config)
+- Incorrect response field mapping (accessing wrong path)
+- SOQL/query fields that don't exist on the target object
+- Pagination that silently hits undocumented API limits
+- Missing error handling that would crash the sync
+- `requiredScopes` not a subset of OAuth provider scopes
+- Query/filter injection: user-controlled values interpolated into OData `$filter`, SOQL, or query strings without escaping
+
+**Warning** (incorrect behavior, data quality issues, or convention violations):
+- HTML content not stripped via `htmlToPlainText`
+- `getDocument` not forwarding `syncContext`
+- `getDocument` hardcoded to one content type when `listDocuments` returns multiple (e.g., only pages but not blogposts)
+- Missing `tagDefinition` for metadata fields returned by `mapTags`
+- Incorrect `useBasicAuth` or `supportsRefreshTokenRotation` in token refresh config
+- Invalid scope names that the API doesn't recognize (even if silently ignored)
+- Private resources excluded from name-based lookup despite scopes being available
+- Silent data truncation without logging
+- Size checks using `text.length` (character count) instead of `Buffer.byteLength` (byte count) for byte-based limits
+- URL-type config fields not normalized (protocol prefix, trailing slashes cause API failures)
+- `VALIDATE_RETRY_OPTIONS` not threaded through helper functions called by `validateConfig`
+
+**Suggestion** (minor improvements):
+- Missing incremental sync support despite API supporting it
+- Overly broad scopes that could be narrowed (not wrong, but could be tighter)
+- Source URL format could be more specific
+- Missing `orderBy` for deterministic pagination
+- Redundant API calls that could be cached in `syncContext`
+- Sequential per-item API calls that could be batched with `Promise.all` (concurrency 3-5)
+- API supports field selection but connector fetches all fields (e.g., missing `$select`, `sysparm_fields`, `fields`)
+- `getDocument` re-fetches data already included in the initial API response (e.g., comments returned with post)
+- Last page of pagination requests full `PAGE_SIZE` when fewer records remain (`Math.min(PAGE_SIZE, remaining)`)
+
+### Fix All Issues
+
+After reporting, fix every **critical** and **warning** issue. Apply **suggestions** where they don't add unnecessary complexity.
+
+### Validation Output
+
+After fixing, confirm:
+1. `bun run lint` passes
+2. TypeScript compiles clean
+3. Re-read all modified files to verify fixes are correct
+
+## Checklist Summary
+
+- [ ] Read connector implementation, types, utils, registry, and OAuth config
+- [ ] Pulled and read official API documentation for the service
+- [ ] Validated every API endpoint URL, method, headers, and body against API docs
+- [ ] Validated input sanitization: no query/filter injection, URL fields normalized
+- [ ] Validated OAuth scopes: `requiredScopes` ⊆ OAuth provider `scopes` in `oauth.ts`
+- [ ] Validated each scope is real and recognized by the service's API
+- [ ] Validated scopes are sufficient for all API endpoints the connector calls
+- [ ] Validated token refresh config (`useBasicAuth`, `supportsRefreshTokenRotation`)
+- [ ] Validated pagination: cursor names, page sizes, hasMore logic, no silent caps
+- [ ] Validated data transformation: plain text extraction, HTML stripping, content hashing
+- [ ] Validated tag definitions match mapTags output, correct fieldTypes
+- [ ] Validated config fields: canonical pairs, selector keys, required flags
+- [ ] Validated validateConfig: lightweight check, error messages, retry options
+- [ ] Validated getDocument: null on 404, all content types handled, no redundant re-fetches, syncContext forwarding
+- [ ] Validated fetchWithRetry used for all external calls (no raw fetch), VALIDATE_RETRY_OPTIONS threaded through helpers
+- [ ] Validated API efficiency: field selection used, no redundant calls, sequential fetches batched
+- [ ] Validated error handling: graceful failures, no unhandled rejections
+- [ ] Validated logging: createLogger, no console.log
+- [ ] Validated registry: correct export, correct key
+- [ ] Reported all issues grouped by severity
+- [ ] Fixed all critical and warning issues
+- [ ] Ran `bun run lint` after fixes
+- [ ] Verified TypeScript compiles clean

apps/docs/app/layout.tsx

@@ -1,9 +1,21 @@
 import type { ReactNode } from 'react'
+import type { Viewport } from 'next'
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return children
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
+  ],
+}
+
 export const metadata = {
   metadataBase: new URL('https://docs.sim.ai'),
   title: {
@@ -12,6 +24,9 @@ export const metadata = {
   },
   description:
     'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
+  applicationName: 'Sim Docs',
+  generator: 'Next.js',
+  referrer: 'origin-when-cross-origin' as const,
   keywords: [
     'AI agents',
     'agentic workforce',
@@ -37,17 +52,28 @@ export const metadata = {
   manifest: '/favicon/site.webmanifest',
   icons: {
     icon: [
+      { url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
       { url: '/favicon/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
       { url: '/favicon/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/favicon/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/favicon/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
     ],
     apple: '/favicon/apple-touch-icon.png',
-    shortcut: '/favicon/favicon.ico',
+    shortcut: '/icon.svg',
   },
   appleWebApp: {
     capable: true,
     statusBarStyle: 'default',
     title: 'Sim Docs',
   },
+  formatDetection: {
+    telephone: false,
+  },
+  other: {
+    'apple-mobile-web-app-capable': 'yes',
+    'mobile-web-app-capable': 'yes',
+    'msapplication-TileColor': '#33C482',
+  },
   openGraph: {
     type: 'website',
     locale: 'en_US',

apps/docs/components/icons.tsx

@@ -1146,6 +1146,25 @@ export function DevinIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function DocuSignIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox='0 0 1547 1549' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='m1113.4 1114.9v395.6c0 20.8-16.7 37.6-37.5 37.6h-1038.4c-20.7 0-37.5-16.8-37.5-37.6v-1039c0-20.7 16.8-37.5 37.5-37.5h394.3v643.4c0 20.7 16.8 37.5 37.5 37.5z'
+        fill='#4c00ff'
+      />
+      <path
+        d='m1546 557.1c0 332.4-193.9 557-432.6 557.8v-418.8c0-12-4.8-24-13.5-31.9l-217.1-217.4c-8.8-8.8-20-13.6-32-13.6h-418.2v-394.8c0-20.8 16.8-37.6 37.5-37.6h585.1c277.7-0.8 490.8 223 490.8 556.3z'
+        fill='#ff5252'
+      />
+      <path
+        d='m1099.9 663.4c8.7 8.7 13.5 19.9 13.5 31.9v418.8h-643.3c-20.7 0-37.5-16.8-37.5-37.5v-643.4h418.2c12 0 24 4.8 32 13.6z'
+        fill='#000000'
+      />
+    </svg>
+  )
+}
+
 export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
@@ -1390,7 +1409,7 @@ export function AmplitudeIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49'>
       <path
-        fill='#FFFFFF'
+        fill='currentColor'
         d='M23.4,15.3c0.6,1.8,1.2,4.1,1.9,6.7c-2.6,0-5.3-0.1-7.8-0.1h-1.3c1.5-5.7,3.2-10.1,4.6-11.1 c0.1-0.1,0.2-0.1,0.4-0.1c0.2,0,0.3,0.1,0.5,0.3C21.9,11.5,22.5,12.7,23.4,15.3z M49,24.5C49,38,38,49,24.5,49S0,38,0,24.5 S11,0,24.5,0S49,11,49,24.5z M42.7,23.9c0-0.6-0.4-1.2-1-1.3l0,0l0,0l0,0c-0.1,0-0.1,0-0.2,0h-0.2c-4.1-0.3-8.4-0.4-12.4-0.5l0,0 C27,14.8,24.5,7.4,21.3,7.4c-3,0-5.8,4.9-8.2,14.5c-1.7,0-3.2,0-4.6-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0-0.5,0 c-0.8,0.1-1.4,0.9-1.4,1.7c0,0.8,0.6,1.6,1.5,1.7l0,0h4.6c-0.4,1.9-0.8,3.8-1.1,5.6l-0.1,0.8l0,0c0,0.6,0.5,1.1,1.1,1.1 c0.4,0,0.8-0.2,1-0.5l0,0l2.2-7.1h10.7c0.8,3.1,1.7,6.3,2.8,9.3c0.6,1.6,2,5.4,4.4,5.4l0,0c3.6,0,5-5.8,5.9-9.6 c0.2-0.8,0.4-1.5,0.5-2.1l0.1-0.2l0,0c0-0.1,0-0.2,0-0.3c-0.1-0.2-0.2-0.3-0.4-0.4c-0.3-0.1-0.5,0.1-0.6,0.4l0,0l-0.1,0.2 c-0.3,0.8-0.6,1.6-0.8,2.3v0.1c-1.6,4.4-2.3,6.4-3.7,6.4l0,0l0,0l0,0c-1.8,0-3.5-7.3-4.1-10.1c-0.1-0.5-0.2-0.9-0.3-1.3h11.7 c0.2,0,0.4-0.1,0.6-0.1l0,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0l0,0c0,0,0.1,0,0.1-0.1l0,0C42.5,24.6,42.7,24.3,42.7,23.9z'
       />
     </svg>
@@ -4569,11 +4588,17 @@ export function ShopifyIcon(props: SVGProps<SVGSVGElement>) {
 
 export function BoxCompanyIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 22'>
-      <path
-        d='M39.7 19.2c.5.7.4 1.6-.2 2.1-.7.5-1.7.4-2.2-.2l-3.5-4.5-3.4 4.4c-.5.7-1.5.7-2.2.2-.7-.5-.8-1.4-.3-2.1l4-5.2-4-5.2c-.5-.7-.3-1.7.3-2.2.7-.5 1.7-.3 2.2.3l3.4 4.5L37.3 7c.5-.7 1.4-.8 2.2-.3.7.5.7 1.5.2 2.2L35.8 14l3.9 5.2zm-18.2-.6c-2.6 0-4.7-2-4.7-4.6 0-2.5 2.1-4.6 4.7-4.6s4.7 2.1 4.7 4.6c-.1 2.6-2.2 4.6-4.7 4.6zm-13.8 0c-2.6 0-4.7-2-4.7-4.6 0-2.5 2.1-4.6 4.7-4.6s4.7 2.1 4.7 4.6c0 2.6-2.1 4.6-4.7 4.6zM21.5 6.4c-2.9 0-5.5 1.6-6.8 4-1.3-2.4-3.9-4-6.9-4-1.8 0-3.4.6-4.7 1.5V1.5C3.1.7 2.4 0 1.6 0 .7 0 0 .7 0 1.5v12.6c.1 4.2 3.5 7.5 7.7 7.5 3 0 5.6-1.7 6.9-4.1 1.3 2.4 3.9 4.1 6.8 4.1 4.3 0 7.8-3.4 7.8-7.7.1-4.1-3.4-7.5-7.7-7.5z'
-        fill='currentColor'
-      />
+    <svg
+      {...props}
+      xmlns='http://www.w3.org/2000/svg'
+      width='2500'
+      height='1379'
+      viewBox='0 0 444.893 245.414'
+    >
+      <g fill='#0075C9'>
+        <path d='M239.038 72.43c-33.081 0-61.806 18.6-76.322 45.904-14.516-27.305-43.24-45.902-76.32-45.902-19.443 0-37.385 6.424-51.821 17.266V16.925h-.008C34.365 7.547 26.713 0 17.286 0 7.858 0 .208 7.547.008 16.925H0v143.333h.036c.768 47.051 39.125 84.967 86.359 84.967 33.08 0 61.805-18.603 76.32-45.908 14.517 27.307 43.241 45.906 76.321 45.906 47.715 0 86.396-38.684 86.396-86.396.001-47.718-38.682-86.397-86.394-86.397zM86.395 210.648c-28.621 0-51.821-23.201-51.821-51.82 0-28.623 23.201-51.823 51.821-51.823 28.621 0 51.822 23.2 51.822 51.823 0 28.619-23.201 51.82-51.822 51.82zm152.643 0c-28.622 0-51.821-23.201-51.821-51.822 0-28.623 23.2-51.821 51.821-51.821 28.619 0 51.822 23.198 51.822 51.821-.001 28.621-23.203 51.822-51.822 51.822z' />
+        <path d='M441.651 218.033l-44.246-59.143 44.246-59.144-.008-.007c5.473-7.62 3.887-18.249-3.652-23.913-7.537-5.658-18.187-4.221-23.98 3.157l-.004-.002-38.188 51.047-38.188-51.047-.006.009c-5.793-7.385-16.441-8.822-23.981-3.16-7.539 5.664-9.125 16.293-3.649 23.911l-.008.005 44.245 59.144-44.245 59.143.008.005c-5.477 7.62-3.89 18.247 3.649 23.909 7.54 5.664 18.188 4.225 23.981-3.155l.006.007 38.188-51.049 38.188 51.049.004-.002c5.794 7.377 16.443 8.814 23.98 3.154 7.539-5.662 9.125-16.291 3.652-23.91l.008-.008z' />
+      </g>
     </svg>
   )
 }

apps/docs/components/ui/icon-mapping.ts

@@ -16,6 +16,7 @@ import {
   AsanaIcon,
   AshbyIcon,
   AttioIcon,
+  BoxCompanyIcon,
   BrainIcon,
   BrandfetchIcon,
   BrowserUseIcon,
@@ -32,6 +33,7 @@ import {
   DevinIcon,
   DiscordIcon,
   DocumentIcon,
+  DocuSignIcon,
   DropboxIcon,
   DsPyIcon,
   DubIcon,
@@ -184,6 +186,7 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   asana: AsanaIcon,
   ashby: AshbyIcon,
   attio: AttioIcon,
+  box: BoxCompanyIcon,
   brandfetch: BrandfetchIcon,
   browser_use: BrowserUseIcon,
   calcom: CalComIcon,
@@ -198,6 +201,7 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   datadog: DatadogIcon,
   devin: DevinIcon,
   discord: DiscordIcon,
+  docusign: DocuSignIcon,
   dropbox: DropboxIcon,
   dspy: DsPyIcon,
   dub: DubIcon,

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

@@ -13,6 +13,7 @@
     "mailer",
     "skills",
     "knowledgebase",
+    "tables",
     "variables",
     "credentials",
     "execution",

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

@@ -0,0 +1,158 @@
+---
+title: Tables
+description: Store, query, and manage structured data directly within your workspace
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
+import { FAQ } from '@/components/ui/faq'
+
+Tables let you store and manage structured data directly in your workspace. Use them to maintain reference data, collect workflow outputs, or build lightweight databases — all without leaving Sim.
+
+<Image src="/static/tables/tables-overview.png" alt="Tables view showing structured data with typed columns for name, title, company, role, and more" width={800} height={500} />
+
+Each table has a schema of typed columns, supports filtering and sorting, and is fully accessible through the [Tables API](/docs/en/api-reference/(generated)/tables).
+
+## Creating a Table
+
+1. Open the **Tables** section from your workspace sidebar
+2. Click **New table**
+3. Name your table and start adding columns
+
+Tables start with a single text column. Add more columns by clicking **New column** in the column header area.
+
+## Column Types
+
+Each column has a type that determines how values are stored and validated.
+
+| Type | Description | Example Values |
+|------|-------------|----------------|
+| **Text** | Free-form string | `"Acme Corp"`, `"hello@example.com"` |
+| **Number** | Numeric value | `42`, `3.14`, `-100` |
+| **Boolean** | True or false | `true`, `false` |
+| **Date** | Date value | `2026-03-16` |
+| **JSON** | Structured object or array | `{"key": "value"}`, `[1, 2, 3]` |
+
+<Callout type="info">
+Column types are enforced on input. For example, typing into a Number column is restricted to digits, dots, and minus signs. Non-numeric values entered via paste are coerced to `0`.
+</Callout>
+
+## Working with Rows
+
+### Adding Rows
+
+- Click **New row** below the last row to append a new row
+- Press **Shift + Enter** while a cell is selected to insert a row below
+- Paste tabular data (from a spreadsheet or TSV) to bulk-create rows
+
+### Editing Cells
+
+Click a cell to select it, then press **Enter**, **F2**, or start typing to edit. Press **Escape** to cancel, or **Tab** to save and move to the next cell.
+
+### Selecting Rows
+
+Click a row's checkbox to select it. Selecting additional checkboxes adds to the selection without clearing previous selections.
+
+| Action | Behavior |
+|--------|----------|
+| Click checkbox | Toggle that row's selection |
+| Shift + click checkbox | Select range from last clicked to current |
+| Click header checkbox | Select all / deselect all |
+| Shift + Space | Toggle row selection from keyboard |
+
+### Deleting Rows
+
+Right-click a selected row (or group of selected rows) and choose **Delete row** from the context menu.
+
+## Filtering and Sorting
+
+Use the toolbar above the table to filter and sort your data.
+
+- **Filter**: Set conditions on any column (e.g., "Name contains Acme"). Multiple filters are combined with AND logic.
+- **Sort**: Order rows by any column, ascending or descending.
+
+Filters and sorts are applied in real time and do not modify the underlying data.
+
+## Keyboard Shortcuts
+
+All shortcuts work when the table is focused and no cell is being edited.
+
+<Callout type="info">
+**Mod** refers to `Cmd` on macOS and `Ctrl` on Windows/Linux.
+</Callout>
+
+### Navigation
+
+| Shortcut | Action |
+|----------|--------|
+| Arrow keys | Move one cell |
+| `Mod` + Arrow keys | Jump to edge of table |
+| `Tab` / `Shift` + `Tab` | Move to next / previous cell |
+| `Escape` | Clear selection |
+
+### Selection
+
+| Shortcut | Action |
+|----------|--------|
+| `Shift` + Arrow keys | Extend selection by one cell |
+| `Mod` + `Shift` + Arrow keys | Extend selection to edge |
+| `Mod` + `A` | Select all rows |
+| `Shift` + `Space` | Toggle current row selection |
+
+### Editing
+
+| Shortcut | Action |
+|----------|--------|
+| `Enter` or `F2` | Start editing selected cell |
+| `Escape` | Cancel editing |
+| Type any character | Start editing with that character |
+| `Shift` + `Enter` | Insert new row below |
+| `Space` | Expand row details |
+
+### Clipboard
+
+| Shortcut | Action |
+|----------|--------|
+| `Mod` + `C` | Copy selected cells |
+| `Mod` + `X` | Cut selected cells |
+| `Mod` + `V` | Paste |
+| `Delete` / `Backspace` | Clear selected cells (all columns when using checkbox selection) |
+
+### History
+
+| Shortcut | Action |
+|----------|--------|
+| `Mod` + `Z` | Undo |
+| `Mod` + `Shift` + `Z` | Redo |
+| `Mod` + `Y` | Redo (alternative) |
+
+## Using Tables in Workflows
+
+Tables can be read from and written to within your workflows using the **Table** block. Common patterns include:
+
+- **Lookup**: Query a table for reference data (e.g., pricing rules, customer metadata)
+- **Write-back**: Store workflow outputs in a table for later review or reporting
+- **Iteration**: Process each row in a table as part of a batch workflow
+
+## API Access
+
+Tables are fully accessible through the REST API. You can create, read, update, and delete both tables and rows programmatically.
+
+See the [Tables API Reference](/docs/en/api-reference/(generated)/tables) for endpoints, parameters, and examples.
+
+## Best Practices
+
+- **Use typed columns** to enforce data integrity — prefer Number and Boolean over storing everything as Text
+- **Name columns descriptively** so they are self-documenting when referenced in workflows
+- **Use JSON columns sparingly** — they are flexible but harder to filter and sort against
+- **Leverage the API** for bulk imports rather than manually entering large datasets
+
+<FAQ items={[
+  { question: "Is there a row limit per table?", answer: "Tables are designed for working datasets. For very large datasets (100k+ rows), consider paginating API reads or splitting data across multiple tables." },
+  { question: "Can I import data from a spreadsheet?", answer: "Yes. Copy rows from any spreadsheet application and paste them directly into the table. Column values will be validated against the column types." },
+  { question: "Do tables support formulas?", answer: "Tables store raw data and do not support computed formulas. Use workflow logic (Function block or Agent block) to derive computed values and write them back to the table." },
+  { question: "Can multiple workflows write to the same table?", answer: "Yes. Table writes are atomic at the row level, so multiple workflows can safely write to the same table concurrently." },
+  { question: "How do I reference a table from a workflow?", answer: "Use the Table block in your workflow. Select the target table from the dropdown, choose an operation (read, write, update), and configure the parameters." },
+  { question: "Are tables shared across workspace members?", answer: "Yes. Tables are workspace-scoped and accessible to all members with appropriate permissions." },
+  { question: "Can I undo changes?", answer: "In the table editor, Cmd/Ctrl+Z undoes recent cell edits, row insertions, and row deletions. API-driven changes are not covered by the editor's undo history." },
+]} />

apps/docs/content/docs/en/tools/box.mdx

@@ -0,0 +1,440 @@
+---
+title: Box
+description: Manage files, folders, and e-signatures with Box
+---
+
+import { BlockInfoCard } from "@/components/ui/block-info-card"
+
+<BlockInfoCard 
+  type="box"
+  color="#FFFFFF"
+/>
+
+{/* MANUAL-CONTENT-START:intro */}
+[Box](https://www.box.com/) is a leading cloud content management and file sharing platform trusted by enterprises worldwide to securely store, manage, and collaborate on files. Box provides robust APIs for automating file operations and integrating with business workflows, including [Box Sign](https://www.box.com/esignature) for native e-signatures.
+
+With the Box integration in Sim, you can:
+
+- **Upload files**: Upload documents, images, and other files to any Box folder
+- **Download files**: Retrieve file content from Box for processing in your workflows
+- **Get file info**: Access detailed metadata including size, owner, timestamps, tags, and shared links
+- **List folder contents**: Browse files and folders with sorting and pagination support
+- **Create folders**: Organize your Box storage by creating new folders programmatically
+- **Delete files and folders**: Remove content with optional recursive deletion for folders
+- **Copy files**: Duplicate files across folders with optional renaming
+- **Search**: Find files and folders by name, content, extension, or location
+- **Update file metadata**: Rename, move, add descriptions, or tag files
+- **Create sign requests**: Send documents for e-signature with one or more signers
+- **Track signing status**: Monitor the progress of sign requests
+- **List sign requests**: View all sign requests with marker-based pagination
+- **Cancel sign requests**: Cancel pending sign requests that are no longer needed
+- **Resend sign reminders**: Send reminder notifications to signers who haven't completed signing
+
+These capabilities allow your Sim agents to automate Box operations directly within your workflows — from organizing documents and distributing content to processing uploaded files, managing e-signature workflows for offer letters and contracts, and maintaining structured cloud storage as part of your business processes.
+{/* MANUAL-CONTENT-END */}
+
+
+## Usage Instructions
+
+Integrate Box into your workflow to manage files, folders, and e-signatures. Upload and download files, search content, create folders, send documents for e-signature, track signing status, and more.
+
+
+
+## Tools
+
+### `box_upload_file`
+
+Upload a file to a Box folder
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `parentFolderId` | string | Yes | The ID of the folder to upload the file to \(use "0" for root\) |
+| `file` | file | No | The file to upload \(UserFile object\) |
+| `fileContent` | string | No | Legacy: base64 encoded file content |
+| `fileName` | string | No | Optional filename override |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | File ID |
+| `name` | string | File name |
+| `size` | number | File size in bytes |
+| `sha1` | string | SHA1 hash of file content |
+| `createdAt` | string | Creation timestamp |
+| `modifiedAt` | string | Last modified timestamp |
+| `parentId` | string | Parent folder ID |
+| `parentName` | string | Parent folder name |
+
+### `box_download_file`
+
+Download a file from Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `fileId` | string | Yes | The ID of the file to download |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `file` | file | Downloaded file stored in execution files |
+| `content` | string | Base64 encoded file content |
+
+### `box_get_file_info`
+
+Get detailed information about a file in Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `fileId` | string | Yes | The ID of the file to get information about |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | File ID |
+| `name` | string | File name |
+| `description` | string | File description |
+| `size` | number | File size in bytes |
+| `sha1` | string | SHA1 hash of file content |
+| `createdAt` | string | Creation timestamp |
+| `modifiedAt` | string | Last modified timestamp |
+| `createdBy` | object | User who created the file |
+| `modifiedBy` | object | User who last modified the file |
+| `ownedBy` | object | User who owns the file |
+| `parentId` | string | Parent folder ID |
+| `parentName` | string | Parent folder name |
+| `sharedLink` | json | Shared link details |
+| `tags` | array | File tags |
+| `commentCount` | number | Number of comments |
+
+### `box_list_folder_items`
+
+List files and folders in a Box folder
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `folderId` | string | Yes | The ID of the folder to list items from \(use "0" for root\) |
+| `limit` | number | No | Maximum number of items to return per page |
+| `offset` | number | No | The offset for pagination |
+| `sort` | string | No | Sort field: id, name, date, or size |
+| `direction` | string | No | Sort direction: ASC or DESC |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `entries` | array | List of items in the folder |
+|   ↳ `type` | string | Item type \(file, folder, web_link\) |
+|   ↳ `id` | string | Item ID |
+|   ↳ `name` | string | Item name |
+|   ↳ `size` | number | Item size in bytes |
+|   ↳ `createdAt` | string | Creation timestamp |
+|   ↳ `modifiedAt` | string | Last modified timestamp |
+| `totalCount` | number | Total number of items in the folder |
+| `offset` | number | Current pagination offset |
+| `limit` | number | Current pagination limit |
+
+### `box_create_folder`
+
+Create a new folder in Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `name` | string | Yes | Name for the new folder |
+| `parentFolderId` | string | Yes | The ID of the parent folder \(use "0" for root\) |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | Folder ID |
+| `name` | string | Folder name |
+| `createdAt` | string | Creation timestamp |
+| `modifiedAt` | string | Last modified timestamp |
+| `parentId` | string | Parent folder ID |
+| `parentName` | string | Parent folder name |
+
+### `box_delete_file`
+
+Delete a file from Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `fileId` | string | Yes | The ID of the file to delete |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `deleted` | boolean | Whether the file was successfully deleted |
+| `message` | string | Success confirmation message |
+
+### `box_delete_folder`
+
+Delete a folder from Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `folderId` | string | Yes | The ID of the folder to delete |
+| `recursive` | boolean | No | Delete folder and all its contents recursively |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `deleted` | boolean | Whether the folder was successfully deleted |
+| `message` | string | Success confirmation message |
+
+### `box_copy_file`
+
+Copy a file to another folder in Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `fileId` | string | Yes | The ID of the file to copy |
+| `parentFolderId` | string | Yes | The ID of the destination folder |
+| `name` | string | No | Optional new name for the copied file |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | File ID |
+| `name` | string | File name |
+| `size` | number | File size in bytes |
+| `sha1` | string | SHA1 hash of file content |
+| `createdAt` | string | Creation timestamp |
+| `modifiedAt` | string | Last modified timestamp |
+| `parentId` | string | Parent folder ID |
+| `parentName` | string | Parent folder name |
+
+### `box_search`
+
+Search for files and folders in Box
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `query` | string | Yes | The search query string |
+| `limit` | number | No | Maximum number of results to return |
+| `offset` | number | No | The offset for pagination |
+| `ancestorFolderId` | string | No | Restrict search to a specific folder and its subfolders |
+| `fileExtensions` | string | No | Comma-separated file extensions to filter by \(e.g., pdf,docx\) |
+| `type` | string | No | Restrict to a specific content type: file, folder, or web_link |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `results` | array | Search results |
+|   ↳ `type` | string | Item type \(file, folder, web_link\) |
+|   ↳ `id` | string | Item ID |
+|   ↳ `name` | string | Item name |
+|   ↳ `size` | number | Item size in bytes |
+|   ↳ `createdAt` | string | Creation timestamp |
+|   ↳ `modifiedAt` | string | Last modified timestamp |
+|   ↳ `parentId` | string | Parent folder ID |
+|   ↳ `parentName` | string | Parent folder name |
+| `totalCount` | number | Total number of matching results |
+
+### `box_update_file`
+
+Update file info in Box (rename, move, change description, add tags)
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `fileId` | string | Yes | The ID of the file to update |
+| `name` | string | No | New name for the file |
+| `description` | string | No | New description for the file \(max 256 characters\) |
+| `parentFolderId` | string | No | Move the file to a different folder by specifying the folder ID |
+| `tags` | string | No | Comma-separated tags to set on the file |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | File ID |
+| `name` | string | File name |
+| `description` | string | File description |
+| `size` | number | File size in bytes |
+| `sha1` | string | SHA1 hash of file content |
+| `createdAt` | string | Creation timestamp |
+| `modifiedAt` | string | Last modified timestamp |
+| `createdBy` | object | User who created the file |
+| `modifiedBy` | object | User who last modified the file |
+| `ownedBy` | object | User who owns the file |
+| `parentId` | string | Parent folder ID |
+| `parentName` | string | Parent folder name |
+| `sharedLink` | json | Shared link details |
+| `tags` | array | File tags |
+| `commentCount` | number | Number of comments |
+
+### `box_sign_create_request`
+
+Create a new Box Sign request to send documents for e-signature
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `sourceFileIds` | string | Yes | Comma-separated Box file IDs to send for signing |
+| `signerEmail` | string | Yes | Primary signer email address |
+| `signerRole` | string | No | Primary signer role: signer, approver, or final_copy_reader \(default: signer\) |
+| `additionalSigners` | string | No | JSON array of additional signers, e.g. \[\{"email":"user@example.com","role":"signer"\}\] |
+| `parentFolderId` | string | No | Box folder ID where signed documents will be stored \(default: user root\) |
+| `emailSubject` | string | No | Custom subject line for the signing email |
+| `emailMessage` | string | No | Custom message in the signing email body |
+| `name` | string | No | Name for the sign request |
+| `daysValid` | number | No | Number of days before the request expires \(0-730\) |
+| `areRemindersEnabled` | boolean | No | Whether to send automatic signing reminders |
+| `areTextSignaturesEnabled` | boolean | No | Whether to allow typed \(text\) signatures |
+| `signatureColor` | string | No | Signature color: blue, black, or red |
+| `redirectUrl` | string | No | URL to redirect signers to after signing |
+| `declinedRedirectUrl` | string | No | URL to redirect signers to after declining |
+| `isDocumentPreparationNeeded` | boolean | No | Whether document preparation is needed before sending |
+| `externalId` | string | No | External system reference ID |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | Sign request ID |
+| `status` | string | Request status \(converting, created, sent, viewed, signed, cancelled, declined, expired, error_converting, error_sending, finalizing, error_finalizing\) |
+| `name` | string | Sign request name |
+| `shortId` | string | Human-readable short ID |
+| `signers` | array | List of signers |
+| `sourceFiles` | array | Source files for signing |
+| `emailSubject` | string | Custom email subject line |
+| `emailMessage` | string | Custom email message body |
+| `daysValid` | number | Number of days the request is valid |
+| `createdAt` | string | Creation timestamp |
+| `autoExpireAt` | string | Auto-expiration timestamp |
+| `prepareUrl` | string | URL for document preparation \(if preparation is needed\) |
+| `senderEmail` | string | Email of the sender |
+
+### `box_sign_get_request`
+
+Get the details and status of a Box Sign request
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `signRequestId` | string | Yes | The ID of the sign request to retrieve |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | Sign request ID |
+| `status` | string | Request status \(converting, created, sent, viewed, signed, cancelled, declined, expired, error_converting, error_sending, finalizing, error_finalizing\) |
+| `name` | string | Sign request name |
+| `shortId` | string | Human-readable short ID |
+| `signers` | array | List of signers |
+| `sourceFiles` | array | Source files for signing |
+| `emailSubject` | string | Custom email subject line |
+| `emailMessage` | string | Custom email message body |
+| `daysValid` | number | Number of days the request is valid |
+| `createdAt` | string | Creation timestamp |
+| `autoExpireAt` | string | Auto-expiration timestamp |
+| `prepareUrl` | string | URL for document preparation \(if preparation is needed\) |
+| `senderEmail` | string | Email of the sender |
+
+### `box_sign_list_requests`
+
+List all Box Sign requests
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `limit` | number | No | Maximum number of sign requests to return \(max 1000\) |
+| `marker` | string | No | Pagination marker from a previous response |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `signRequests` | array | List of sign requests |
+|   ↳ `id` | string | Sign request ID |
+|   ↳ `status` | string | Request status \(converting, created, sent, viewed, signed, cancelled, declined, expired, error_converting, error_sending, finalizing, error_finalizing\) |
+|   ↳ `name` | string | Sign request name |
+|   ↳ `shortId` | string | Human-readable short ID |
+|   ↳ `signers` | array | List of signers |
+|   ↳ `sourceFiles` | array | Source files for signing |
+|   ↳ `emailSubject` | string | Custom email subject line |
+|   ↳ `emailMessage` | string | Custom email message body |
+|   ↳ `daysValid` | number | Number of days the request is valid |
+|   ↳ `createdAt` | string | Creation timestamp |
+|   ↳ `autoExpireAt` | string | Auto-expiration timestamp |
+|   ↳ `prepareUrl` | string | URL for document preparation \(if preparation is needed\) |
+|   ↳ `senderEmail` | string | Email of the sender |
+| `count` | number | Number of sign requests returned in this page |
+| `nextMarker` | string | Marker for next page of results |
+
+### `box_sign_cancel_request`
+
+Cancel a pending Box Sign request
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `signRequestId` | string | Yes | The ID of the sign request to cancel |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `id` | string | Sign request ID |
+| `status` | string | Request status \(converting, created, sent, viewed, signed, cancelled, declined, expired, error_converting, error_sending, finalizing, error_finalizing\) |
+| `name` | string | Sign request name |
+| `shortId` | string | Human-readable short ID |
+| `signers` | array | List of signers |
+| `sourceFiles` | array | Source files for signing |
+| `emailSubject` | string | Custom email subject line |
+| `emailMessage` | string | Custom email message body |
+| `daysValid` | number | Number of days the request is valid |
+| `createdAt` | string | Creation timestamp |
+| `autoExpireAt` | string | Auto-expiration timestamp |
+| `prepareUrl` | string | URL for document preparation \(if preparation is needed\) |
+| `senderEmail` | string | Email of the sender |
+
+### `box_sign_resend_request`
+
+Resend a Box Sign request to signers who have not yet signed
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `signRequestId` | string | Yes | The ID of the sign request to resend |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `message` | string | Success confirmation message |
+
+

apps/docs/content/docs/en/tools/docusign.mdx

@@ -0,0 +1,230 @@
+---
+title: DocuSign
+description: Send documents for e-signature via DocuSign
+---
+
+import { BlockInfoCard } from "@/components/ui/block-info-card"
+
+<BlockInfoCard 
+  type="docusign"
+  color="#FFFFFF"
+/>
+
+{/* MANUAL-CONTENT-START:intro */}
+[DocuSign](https://www.docusign.com) is the world's leading e-signature platform, enabling businesses to send, sign, and manage agreements digitally. With its powerful eSignature REST API, DocuSign supports the full document lifecycle from creation through completion.
+
+With the DocuSign integration in Sim, you can:
+
+- **Send envelopes**: Create and send documents for e-signature with custom recipients and signing tabs
+- **Use templates**: Send envelopes from pre-configured DocuSign templates with role assignments
+- **Track status**: Get envelope details including signing progress, timestamps, and recipient status
+- **List envelopes**: Search and filter envelopes by date range, status, and text
+- **Download documents**: Retrieve signed documents as base64-encoded files
+- **Manage recipients**: View signer and CC recipient details and signing status
+- **Void envelopes**: Cancel in-progress envelopes with a reason
+
+In Sim, the DocuSign integration enables your agents to automate document workflows end-to-end. Agents can generate agreements, send them for signature, monitor completion, and retrieve signed copies—powering contract management, HR onboarding, sales closings, and compliance processes.
+{/* MANUAL-CONTENT-END */}
+
+
+## Usage Instructions
+
+Create and send envelopes for e-signature, use templates, check signing status, download signed documents, and manage recipients with DocuSign.
+
+
+
+## Tools
+
+### `docusign_send_envelope`
+
+Create and send a DocuSign envelope with a document for e-signature
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `emailSubject` | string | Yes | Email subject for the envelope |
+| `emailBody` | string | No | Email body message |
+| `signerEmail` | string | Yes | Email address of the signer |
+| `signerName` | string | Yes | Full name of the signer |
+| `ccEmail` | string | No | Email address of carbon copy recipient |
+| `ccName` | string | No | Full name of carbon copy recipient |
+| `file` | file | No | Document file to send for signature |
+| `status` | string | No | Envelope status: "sent" to send immediately, "created" for draft \(default: "sent"\) |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `envelopeId` | string | Created envelope ID |
+| `status` | string | Envelope status |
+| `statusDateTime` | string | Status change datetime |
+| `uri` | string | Envelope URI |
+
+### `docusign_create_from_template`
+
+Create and send a DocuSign envelope using a pre-built template
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `templateId` | string | Yes | DocuSign template ID to use |
+| `emailSubject` | string | No | Override email subject \(uses template default if not set\) |
+| `emailBody` | string | No | Override email body message |
+| `templateRoles` | string | Yes | JSON array of template roles, e.g. \[\{"roleName":"Signer","name":"John","email":"john@example.com"\}\] |
+| `status` | string | No | Envelope status: "sent" to send immediately, "created" for draft \(default: "sent"\) |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `envelopeId` | string | Created envelope ID |
+| `status` | string | Envelope status |
+| `statusDateTime` | string | Status change datetime |
+| `uri` | string | Envelope URI |
+
+### `docusign_get_envelope`
+
+Get the details and status of a DocuSign envelope
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `envelopeId` | string | Yes | The envelope ID to retrieve |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `envelopeId` | string | Envelope ID |
+| `status` | string | Envelope status \(created, sent, delivered, completed, declined, voided\) |
+| `emailSubject` | string | Email subject line |
+| `sentDateTime` | string | When the envelope was sent |
+| `completedDateTime` | string | When all recipients completed signing |
+| `createdDateTime` | string | When the envelope was created |
+| `statusChangedDateTime` | string | When the status last changed |
+| `voidedReason` | string | Reason the envelope was voided |
+| `signerCount` | number | Number of signers |
+| `documentCount` | number | Number of documents |
+
+### `docusign_list_envelopes`
+
+List envelopes from your DocuSign account with optional filters
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `fromDate` | string | No | Start date filter \(ISO 8601\). Defaults to 30 days ago |
+| `toDate` | string | No | End date filter \(ISO 8601\) |
+| `envelopeStatus` | string | No | Filter by status: created, sent, delivered, completed, declined, voided |
+| `searchText` | string | No | Search text to filter envelopes |
+| `count` | string | No | Maximum number of envelopes to return \(default: 25\) |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `envelopes` | array | Array of DocuSign envelopes |
+|   ↳ `envelopeId` | string | Unique envelope identifier |
+|   ↳ `status` | string | Envelope status \(created, sent, delivered, completed, declined, voided\) |
+|   ↳ `emailSubject` | string | Email subject line |
+|   ↳ `sentDateTime` | string | ISO 8601 datetime when envelope was sent |
+|   ↳ `completedDateTime` | string | ISO 8601 datetime when envelope was completed |
+|   ↳ `createdDateTime` | string | ISO 8601 datetime when envelope was created |
+|   ↳ `statusChangedDateTime` | string | ISO 8601 datetime of last status change |
+| `totalSetSize` | number | Total number of matching envelopes |
+| `resultSetSize` | number | Number of envelopes returned in this response |
+
+### `docusign_void_envelope`
+
+Void (cancel) a sent DocuSign envelope that has not yet been completed
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `envelopeId` | string | Yes | The envelope ID to void |
+| `voidedReason` | string | Yes | Reason for voiding the envelope |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `envelopeId` | string | Voided envelope ID |
+| `status` | string | Envelope status \(voided\) |
+
+### `docusign_download_document`
+
+Download a signed document from a completed DocuSign envelope
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `envelopeId` | string | Yes | The envelope ID containing the document |
+| `documentId` | string | No | Specific document ID to download, or "combined" for all documents merged \(default: "combined"\) |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `base64Content` | string | Base64-encoded document content |
+| `mimeType` | string | MIME type of the document |
+| `fileName` | string | Original file name |
+
+### `docusign_list_templates`
+
+List available templates in your DocuSign account
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `searchText` | string | No | Search text to filter templates by name |
+| `count` | string | No | Maximum number of templates to return |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `templates` | array | Array of DocuSign templates |
+|   ↳ `templateId` | string | Template identifier |
+|   ↳ `name` | string | Template name |
+|   ↳ `description` | string | Template description |
+|   ↳ `shared` | boolean | Whether template is shared |
+|   ↳ `created` | string | ISO 8601 creation date |
+|   ↳ `lastModified` | string | ISO 8601 last modified date |
+| `totalSetSize` | number | Total number of matching templates |
+| `resultSetSize` | number | Number of templates returned in this response |
+
+### `docusign_list_recipients`
+
+Get the recipient status details for a DocuSign envelope
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `envelopeId` | string | Yes | The envelope ID to get recipients for |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `signers` | array | Array of DocuSign recipients |
+|   ↳ `recipientId` | string | Recipient identifier |
+|   ↳ `name` | string | Recipient name |
+|   ↳ `email` | string | Recipient email address |
+|   ↳ `status` | string | Recipient signing status \(sent, delivered, completed, declined\) |
+|   ↳ `signedDateTime` | string | ISO 8601 datetime when recipient signed |
+|   ↳ `deliveredDateTime` | string | ISO 8601 datetime when delivered to recipient |
+| `carbonCopies` | array | Array of carbon copy recipients |
+|   ↳ `recipientId` | string | Recipient ID |
+|   ↳ `name` | string | Recipient name |
+|   ↳ `email` | string | Recipient email |
+|   ↳ `status` | string | Recipient status |
+
+

apps/docs/content/docs/en/tools/firecrawl.mdx

@@ -53,6 +53,9 @@ Extract structured content from web pages with comprehensive metadata support. C
 | `url` | string | Yes | The URL to scrape content from \(e.g., "https://example.com/page"\) |
 | `scrapeOptions` | json | No | Options for content scraping |
 | `apiKey` | string | Yes | Firecrawl API key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -86,6 +89,9 @@ Search for information on the web using Firecrawl
 | --------- | ---- | -------- | ----------- |
 | `query` | string | Yes | The search query to use |
 | `apiKey` | string | Yes | Firecrawl API key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -123,6 +129,9 @@ Crawl entire websites and extract structured content from all accessible pages
 | `includePaths` | json | No | URL paths to include in crawling \(e.g., \["/docs/*", "/api/*"\]\). Only these paths will be crawled |
 | `onlyMainContent` | boolean | No | Extract only main content from pages |
 | `apiKey` | string | Yes | Firecrawl API Key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -142,7 +151,6 @@ Crawl entire websites and extract structured content from all accessible pages
 |     ↳ `statusCode` | number | HTTP status code |
 |     ↳ `ogLocaleAlternate` | array | Alternate locale versions |
 | `total` | number | Total number of pages found during crawl |
-| `creditsUsed` | number | Number of credits consumed by the crawl operation |
 
 ### `firecrawl_map`
 
@@ -161,6 +169,9 @@ Get a complete list of URLs from any website quickly and reliably. Useful for di
 | `timeout` | number | No | Request timeout in milliseconds |
 | `location` | json | No | Geographic context for proxying \(country, languages\) |
 | `apiKey` | string | Yes | Firecrawl API key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -187,6 +198,9 @@ Extract structured data from entire webpages using natural language prompts and
 | `ignoreInvalidURLs` | boolean | No | Skip invalid URLs in the array \(default: true\) |
 | `scrapeOptions` | json | No | Advanced scraping configuration options |
 | `apiKey` | string | Yes | Firecrawl API key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -217,7 +231,6 @@ Autonomous web data extraction agent. Searches and gathers information based on
 | `success` | boolean | Whether the agent operation was successful |
 | `status` | string | Current status of the agent job \(processing, completed, failed\) |
 | `data` | object | Extracted data from the agent |
-| `creditsUsed` | number | Number of credits consumed by this agent task |
 | `expiresAt` | string | Timestamp when the results expire \(24 hours\) |
 | `sources` | object | Array of source URLs used by the agent |
 

apps/docs/content/docs/en/tools/google_books.mdx

@@ -46,6 +46,8 @@ Search for books using the Google Books API
 | `startIndex` | number | No | Index of the first result to return \(for pagination\) |
 | `maxResults` | number | No | Maximum number of results to return \(1-40\) |
 | `langRestrict` | string | No | Restrict results to a specific language \(ISO 639-1 code\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -82,6 +84,8 @@ Get detailed information about a specific book volume
 | `apiKey` | string | Yes | Google Books API key |
 | `volumeId` | string | Yes | The ID of the volume to retrieve |
 | `projection` | string | No | Projection level \(full, lite\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

apps/docs/content/docs/en/tools/google_maps.mdx

@@ -50,6 +50,8 @@ Get current air quality data for a location
 | `lat` | number | Yes | Latitude coordinate |
 | `lng` | number | Yes | Longitude coordinate |
 | `languageCode` | string | No | Language code for the response \(e.g., "en", "es"\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -91,6 +93,8 @@ Get directions and route information between two locations
 | `waypoints` | json | No | Array of intermediate waypoints |
 | `units` | string | No | Unit system: metric or imperial |
 | `language` | string | No | Language code for results \(e.g., en, es, fr\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -135,6 +139,8 @@ Calculate travel distance and time between multiple origins and destinations
 | `avoid` | string | No | Features to avoid: tolls, highways, or ferries |
 | `units` | string | No | Unit system: metric or imperial |
 | `language` | string | No | Language code for results \(e.g., en, es, fr\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -163,6 +169,8 @@ Get elevation data for a location
 | `apiKey` | string | Yes | Google Maps API key |
 | `lat` | number | Yes | Latitude coordinate |
 | `lng` | number | Yes | Longitude coordinate |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -185,6 +193,8 @@ Convert an address into geographic coordinates (latitude and longitude)
 | `address` | string | Yes | The address to geocode |
 | `language` | string | No | Language code for results \(e.g., en, es, fr\) |
 | `region` | string | No | Region bias as a ccTLD code \(e.g., us, uk\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -217,6 +227,8 @@ Geolocate a device using WiFi access points, cell towers, or IP address
 | `considerIp` | boolean | No | Whether to use IP address for geolocation \(default: true\) |
 | `cellTowers` | array | No | Array of cell tower objects with cellId, locationAreaCode, mobileCountryCode, mobileNetworkCode |
 | `wifiAccessPoints` | array | No | Array of WiFi access point objects with macAddress \(required\), signalStrength, etc. |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -238,6 +250,8 @@ Get detailed information about a specific place
 | `placeId` | string | Yes | Google Place ID |
 | `fields` | string | No | Comma-separated list of fields to return |
 | `language` | string | No | Language code for results \(e.g., en, es, fr\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -290,6 +304,8 @@ Search for places using a text query
 | `type` | string | No | Place type filter \(e.g., restaurant, cafe, hotel\) |
 | `language` | string | No | Language code for results \(e.g., en, es, fr\) |
 | `region` | string | No | Region bias as a ccTLD code \(e.g., us, uk\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -322,6 +338,8 @@ Convert geographic coordinates (latitude and longitude) into a human-readable ad
 | `lat` | number | Yes | Latitude coordinate |
 | `lng` | number | Yes | Longitude coordinate |
 | `language` | string | No | Language code for results \(e.g., en, es, fr\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -346,6 +364,8 @@ Snap GPS coordinates to the nearest road segment
 | `apiKey` | string | Yes | Google Maps API key with Roads API enabled |
 | `path` | string | Yes | Pipe-separated list of lat,lng coordinates \(e.g., "60.170880,24.942795\|60.170879,24.942796"\) |
 | `interpolate` | boolean | No | Whether to interpolate additional points along the road |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -399,6 +419,8 @@ Get timezone information for a location
 | `lng` | number | Yes | Longitude coordinate |
 | `timestamp` | number | No | Unix timestamp to determine DST offset \(defaults to current time\) |
 | `language` | string | No | Language code for timezone name \(e.g., en, es, fr\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -424,6 +446,8 @@ Validate and standardize a postal address
 | `regionCode` | string | No | ISO 3166-1 alpha-2 country code \(e.g., "US", "CA"\) |
 | `locality` | string | No | City or locality name |
 | `enableUspsCass` | boolean | No | Enable USPS CASS validation for US addresses |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

apps/docs/content/docs/en/tools/google_pagespeed.mdx

@@ -55,6 +55,8 @@ Analyze a webpage for performance, accessibility, SEO, and best practices using
 | `category` | string | No | Lighthouse categories to analyze \(comma-separated\): performance, accessibility, best-practices, seo |
 | `strategy` | string | No | Analysis strategy: desktop or mobile |
 | `locale` | string | No | Locale for results \(e.g., en, fr, de\) |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

apps/docs/content/docs/en/tools/google_translate.mdx

@@ -43,6 +43,9 @@ Translate text between languages using the Google Cloud Translation API. Support
 | `target` | string | Yes | Target language code \(e.g., "es", "fr", "de", "ja"\) |
 | `source` | string | No | Source language code. If omitted, the API will auto-detect the source language. |
 | `format` | string | No | Format of the text: "text" for plain text, "html" for HTML content |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -61,6 +64,9 @@ Detect the language of text using the Google Cloud Translation API.
 | --------- | ---- | -------- | ----------- |
 | `apiKey` | string | Yes | Google Cloud API key with Cloud Translation API enabled |
 | `text` | string | Yes | The text to detect the language of |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

apps/docs/content/docs/en/tools/grain.mdx

@@ -138,6 +138,26 @@ Get the full transcript of a recording
 |   ↳ `end` | number | End timestamp in ms |
 |   ↳ `text` | string | Transcript text |
 
+### `grain_list_views`
+
+List available Grain views for webhook subscriptions
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `apiKey` | string | Yes | Grain API key \(Personal Access Token\) |
+| `typeFilter` | string | No | Optional view type filter: recordings, highlights, or stories |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `views` | array | Array of Grain views |
+|   ↳ `id` | string | View UUID |
+|   ↳ `name` | string | View name |
+|   ↳ `type` | string | View type: recordings, highlights, or stories |
+
 ### `grain_list_teams`
 
 List all teams in the workspace
@@ -185,15 +205,9 @@ Create a webhook to receive recording events
 | --------- | ---- | -------- | ----------- |
 | `apiKey` | string | Yes | Grain API key \(Personal Access Token\) |
 | `hookUrl` | string | Yes | Webhook endpoint URL \(e.g., "https://example.com/webhooks/grain"\) |
-| `hookType` | string | Yes | Type of webhook: "recording_added" or "upload_status" |
-| `filterBeforeDatetime` | string | No | Filter: recordings before this ISO8601 date \(e.g., "2024-01-15T00:00:00Z"\) |
-| `filterAfterDatetime` | string | No | Filter: recordings after this ISO8601 date \(e.g., "2024-01-01T00:00:00Z"\) |
-| `filterParticipantScope` | string | No | Filter: "internal" or "external" |
-| `filterTeamId` | string | No | Filter: specific team UUID \(e.g., "a1b2c3d4-e5f6-7890-abcd-ef1234567890"\) |
-| `filterMeetingTypeId` | string | No | Filter: specific meeting type UUID \(e.g., "a1b2c3d4-e5f6-7890-abcd-ef1234567890"\) |
-| `includeHighlights` | boolean | No | Include highlights in webhook payload |
-| `includeParticipants` | boolean | No | Include participants in webhook payload |
-| `includeAiSummary` | boolean | No | Include AI summary in webhook payload |
+| `viewId` | string | Yes | Grain view ID from GET /_/public-api/views |
+| `actions` | array | No | Optional list of actions to subscribe to: added, updated, removed |
+| `items` | string | No | No description |
 
 #### Output
 
@@ -202,9 +216,8 @@ Create a webhook to receive recording events
 | `id` | string | Hook UUID |
 | `enabled` | boolean | Whether hook is active |
 | `hook_url` | string | The webhook URL |
-| `hook_type` | string | Type of hook: recording_added or upload_status |
-| `filter` | object | Applied filters |
-| `include` | object | Included fields |
+| `view_id` | string | Grain view ID for the webhook |
+| `actions` | array | Configured actions for the webhook |
 | `inserted_at` | string | ISO8601 creation timestamp |
 
 ### `grain_list_hooks`
@@ -225,9 +238,8 @@ List all webhooks for the account
 |   ↳ `id` | string | Hook UUID |
 |   ↳ `enabled` | boolean | Whether hook is active |
 |   ↳ `hook_url` | string | Webhook URL |
-|   ↳ `hook_type` | string | Type: recording_added or upload_status |
-|   ↳ `filter` | object | Applied filters |
-|   ↳ `include` | object | Included fields |
+|   ↳ `view_id` | string | Grain view ID |
+|   ↳ `actions` | array | Configured actions |
 |   ↳ `inserted_at` | string | Creation timestamp |
 
 ### `grain_delete_hook`

apps/docs/content/docs/en/tools/jina.mdx

@@ -64,6 +64,7 @@ Extract and process web content into clean, LLM-friendly text using Jina AI Read
 | Parameter | Type | Description |
 | --------- | ---- | ----------- |
 | `content` | string | The extracted content from the URL, processed into clean, LLM-friendly text |
+| `tokensUsed` | number | Number of Jina tokens consumed by this request |
 
 ### `jina_search`
 
@@ -97,5 +98,6 @@ Search the web and return top 5 results with LLM-friendly content. Each result i
 |   ↳ `content` | string | LLM-friendly extracted content |
 |   ↳ `usage` | object | Token usage information |
 |     ↳ `tokens` | number | Number of tokens consumed by this request |
+| `tokensUsed` | number | Number of Jina tokens consumed by this request |
 
 

apps/docs/content/docs/en/tools/knowledge.mdx

@@ -122,6 +122,37 @@ Create a new document in a knowledge base
 | `message` | string | Success or error message describing the operation result |
 | `documentId` | string | ID of the created document |
 
+### `knowledge_upsert_document`
+
+Create or update a document in a knowledge base. If a document with the given ID or filename already exists, it will be replaced with the new content.
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `knowledgeBaseId` | string | Yes | ID of the knowledge base containing the document |
+| `documentId` | string | No | Optional ID of an existing document to update. If not provided, lookup is done by filename. |
+| `name` | string | Yes | Name of the document |
+| `content` | string | Yes | Content of the document |
+| `documentTags` | json | No | Document tags |
+| `documentTags` | string | No | No description |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `data` | object | Information about the upserted document |
+|   ↳ `documentId` | string | Document ID |
+|   ↳ `documentName` | string | Document name |
+|   ↳ `type` | string | Document type |
+|   ↳ `enabled` | boolean | Whether the document is enabled |
+|   ↳ `isUpdate` | boolean | Whether an existing document was replaced |
+|   ↳ `previousDocumentId` | string | ID of the document that was replaced, if any |
+|   ↳ `createdAt` | string | Creation timestamp |
+|   ↳ `updatedAt` | string | Last update timestamp |
+| `message` | string | Success or error message describing the operation result |
+| `documentId` | string | ID of the upserted document |
+
 ### `knowledge_list_tags`
 
 List all tag definitions for a knowledge base

apps/docs/content/docs/en/tools/linkup.mdx

@@ -51,6 +51,9 @@ Search the web for information using Linkup
 | `includeDomains` | string | No | Comma-separated list of domain names to restrict search results to |
 | `includeInlineCitations` | boolean | No | Add inline citations to answers \(only applies when outputType is "sourcedAnswer"\) |
 | `includeSources` | boolean | No | Include sources in response |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

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

@@ -13,6 +13,7 @@
     "asana",
     "ashby",
     "attio",
+    "box",
     "brandfetch",
     "browser_use",
     "calcom",
@@ -27,6 +28,7 @@
     "datadog",
     "devin",
     "discord",
+    "docusign",
     "dropbox",
     "dspy",
     "dub",

apps/docs/content/docs/en/tools/perplexity.mdx

@@ -49,6 +49,9 @@ Generate completions using Perplexity AI chat models
 | `max_tokens` | number | No | Maximum number of tokens to generate \(e.g., 1024, 2048, 4096\) |
 | `temperature` | number | No | Sampling temperature between 0 and 1 \(e.g., 0.0 for deterministic, 0.7 for creative\) |
 | `apiKey` | string | Yes | Perplexity API key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 
@@ -78,6 +81,8 @@ Get ranked search results from Perplexity
 | `search_after_date` | string | No | Include only content published after this date \(format: MM/DD/YYYY\) |
 | `search_before_date` | string | No | Include only content published before this date \(format: MM/DD/YYYY\) |
 | `apiKey` | string | Yes | Perplexity API key |
+| `pricing` | per_request | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

apps/docs/content/docs/en/tools/serper.mdx

@@ -47,6 +47,9 @@ A powerful web search tool that provides access to Google search results through
 | `hl` | string | No | Language code for search results \(e.g., "en", "es", "de", "fr"\) |
 | `type` | string | No | Type of search to perform \(e.g., "search", "news", "images", "videos", "places", "shopping"\) |
 | `apiKey` | string | Yes | Serper API Key |
+| `pricing` | custom | No | No description |
+| `metadata` | string | No | No description |
+| `rateLimit` | string | No | No description |
 
 #### Output
 

apps/docs/public/favicon/site.webmanifest

@@ -1,21 +1,42 @@
 {
-  "name": "MyWebSite",
-  "short_name": "MySite",
+  "name": "Sim Documentation — Build AI Agents & Run Your Agentic Workforce",
+  "short_name": "Sim Docs",
+  "description": "Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.",
+  "start_url": "/",
+  "scope": "/",
   "icons": [
     {
-      "src": "/web-app-manifest-192x192.png",
+      "src": "/favicon/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/web-app-manifest-512x512.png",
+      "src": "/favicon/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
     }
   ],
-  "theme_color": "#ffffff",
+  "theme_color": "#33C482",
   "background_color": "#ffffff",
-  "display": "standalone"
+  "display": "standalone",
+  "categories": ["productivity", "developer", "business"],
+  "lang": "en-US",
+  "dir": "ltr"
 }

apps/docs/public/icon.svg

@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="16" height="16" rx="3" fill="#0B0B0B"/>
+  <g transform="translate(2.75,2.75) scale(0.0473)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.822 93.7612C107.822 97.3481 106.403 100.792 103.884 103.328L103.523 103.692C101.006 106.236 97.5855 107.658 94.0236 107.658H13.4455C6.02456 107.658 0 113.718 0 121.191V208.332C0 215.806 6.02456 221.866 13.4455 221.866H99.9622C107.383 221.866 113.4 215.806 113.4 208.332V126.745C113.4 123.419 114.71 120.228 117.047 117.874C119.377 115.527 122.546 114.207 125.849 114.207H207.777C215.198 114.207 221.214 108.148 221.214 100.674V13.5333C221.214 6.05956 215.198 0 207.777 0H121.26C113.839 0 107.822 6.05956 107.822 13.5333V93.7612ZM134.078 18.55H194.952C199.289 18.55 202.796 22.0893 202.796 26.4503V87.7574C202.796 92.1178 199.289 95.6577 194.952 95.6577H134.078C129.748 95.6577 126.233 92.1178 126.233 87.7574V26.4503C126.233 22.0893 129.748 18.55 134.078 18.55Z" fill="#33C482"/>
+    <path d="M207.878 129.57H143.554C135.756 129.57 129.434 135.937 129.434 143.791V207.784C129.434 215.638 135.756 222.005 143.554 222.005H207.878C215.677 222.005 221.999 215.638 221.999 207.784V143.791C221.999 135.937 215.677 129.57 207.878 129.57Z" fill="#33C482"/>
+    <path d="M207.878 129.266H143.554C135.756 129.266 129.434 135.632 129.434 143.487V207.479C129.434 215.333 135.756 221.699 143.554 221.699H207.878C215.677 221.699 221.999 215.333 221.999 207.479V143.487C221.999 135.632 215.677 129.266 207.878 129.266Z" fill="url(#paint0_linear)" fill-opacity="0.2"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear" x1="129.434" y1="129.266" x2="185.629" y2="185.33" gradientUnits="userSpaceOnUse">
+      <stop/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>

apps/sim/app/(auth)/auth-layout-client.tsx

@@ -2,32 +2,22 @@
 
 import { useEffect } from 'react'
 import AuthBackground from '@/app/(auth)/components/auth-background'
-import Nav from '@/app/(landing)/components/nav/nav'
-
-function isColorDark(hexColor: string): boolean {
-  const hex = hexColor.replace('#', '')
-  const r = Number.parseInt(hex.substr(0, 2), 16)
-  const g = Number.parseInt(hex.substr(2, 2), 16)
-  const b = Number.parseInt(hex.substr(4, 2), 16)
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-  return luminance < 0.5
-}
+import Navbar from '@/app/(home)/components/navbar/navbar'
 
 export default function AuthLayoutClient({ children }: { children: React.ReactNode }) {
   useEffect(() => {
-    const rootStyle = getComputedStyle(document.documentElement)
-    const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
-
-    if (brandBackground && isColorDark(brandBackground)) {
-      document.body.classList.add('auth-dark-bg')
-    } else {
-      document.body.classList.remove('auth-dark-bg')
+    document.documentElement.classList.add('dark')
+    return () => {
+      document.documentElement.classList.remove('dark')
     }
   }, [])
+
   return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col text-foreground'>
-        <Nav hideAuthButtons={true} variant='auth' />
+    <AuthBackground className='dark font-[430] font-season'>
+      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
+        <header className='shrink-0 bg-[#1C1C1C]'>
+          <Navbar logoOnly />
+        </header>
         <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'>{children}</div>
         </div>

apps/sim/app/(auth)/components/auth-background-svg.tsx

@@ -1,44 +1,93 @@
 export default function AuthBackgroundSVG() {
   return (
-    <svg
-      aria-hidden='true'
-      className='pointer-events-none fixed inset-0 h-full w-full'
-      style={{ zIndex: 5 }}
-      viewBox='0 0 1880 960'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      preserveAspectRatio='xMidYMid slice'
-    >
-      {/* Right side paths - extended to connect */}
-      <path
-        d='M1393.53 42.8889C1545.99 173.087 1688.28 339.75 1878.44 817.6'
-        stroke='#E7E4EF'
-        strokeWidth='2'
-      />
-      <path d='M1624.21 960L1625.78 0' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M1832.67 715.81L1880 716.031' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M1393.4 40V0' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='1393.03' cy='40.0186' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='1625.28' cy='303.147' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='1837.37' cy='715.81' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+    <>
+      {/* Top-left card outline */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-[-3vw] left-[-10vw] z-[5] aspect-[344/328] w-[38vw]'
+      >
+        <svg
+          viewBox='0 0 344 328'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          preserveAspectRatio='xMidYMid meet'
+          className='h-full w-full'
+        >
+          <path
+            d='M322.641 326.586L335.508 326.586C339.926 326.586 343.508 323.004 343.508 318.586V153.613C343.508 149.195 339.926 145.613 335.508 145.613H228.282C223.864 145.613 220.282 142.031 220.282 137.613V-50H190.282V137.613C190.282 142.031 186.7 145.613 182.282 145.613H-157V318.586C-157 323.004 -153.418 326.586 -149 326.586H322.641Z'
+            fill='#1C1C1C'
+            stroke='#323232'
+            strokeOpacity='0.4'
+            strokeWidth='1'
+          />
+        </svg>
+      </div>
 
-      {/* Left side paths - extended to connect */}
-      <path
-        d='M160 157.764C319.811 136.451 417.278 102.619 552.39 0'
-        stroke='#E7E4EF'
-        strokeWidth='2'
-      />
-      <path d='M310.22 803.025V0' stroke='#E7E4EF' strokeWidth='2' />
-      <path
-        d='M160 530.184C256.142 655.353 308.338 749.141 348.382 960'
-        stroke='#E7E4EF'
-        strokeWidth='2'
-      />
-      <path d='M160 157.764V960' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M-50 157.764L160 157.764' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='160' cy='157.764' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='310.22' cy='803.025' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='160' cy='530.184' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-    </svg>
+      {/* Top-right card outline */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-[-4vw] right-[-14vw] z-[5] aspect-[471/470] w-[42vw]'
+      >
+        <svg
+          viewBox='0 0 471 470'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          preserveAspectRatio='xMidYMid meet'
+          className='h-full w-full'
+        >
+          <path
+            d='M471 94.274L471 124.274L365.88 124.274C361.462 124.274 357.88 127.856 357.88 132.274L357.88 225.495C357.88 229.913 354.298 233.495 349.88 233.495L219.5 233.495C215.082 233.495 211.5 237.077 211.5 241.495L211.5 461.5C211.5 465.918 207.918 469.5 203.5 469.5L8.5 469.5C4.082 469.5 0.5 465.918 0.5 461.5L0.5 157.274C0.5 152.856 4.082 149.274 8.5 149.274L184 149.274C188.418 149.274 192 145.692 192 141.274L192 102.274C192 97.856 195.582 94.274 200 94.274L471 94.274Z'
+            fill='#1C1C1C'
+            stroke='#323232'
+            strokeOpacity='0.4'
+            strokeWidth='1'
+          />
+        </svg>
+      </div>
+
+      {/* Bottom-left card outline (mirrored) */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute bottom-[-6vw] left-[-12vw] z-[5] aspect-[471/470] w-[36vw] rotate-180'
+      >
+        <svg
+          viewBox='0 0 471 470'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          preserveAspectRatio='xMidYMid meet'
+          className='h-full w-full'
+        >
+          <path
+            d='M471 94.274L471 124.274L365.88 124.274C361.462 124.274 357.88 127.856 357.88 132.274L357.88 225.495C357.88 229.913 354.298 233.495 349.88 233.495L219.5 233.495C215.082 233.495 211.5 237.077 211.5 241.495L211.5 461.5C211.5 465.918 207.918 469.5 203.5 469.5L8.5 469.5C4.082 469.5 0.5 465.918 0.5 461.5L0.5 157.274C0.5 152.856 4.082 149.274 8.5 149.274L184 149.274C188.418 149.274 192 145.692 192 141.274L192 102.274C192 97.856 195.582 94.274 200 94.274L471 94.274Z'
+            fill='#1C1C1C'
+            stroke='#323232'
+            strokeOpacity='0.4'
+            strokeWidth='1'
+          />
+        </svg>
+      </div>
+
+      {/* Bottom-right card outline (mirrored) */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute right-[-12vw] bottom-[-5vw] z-[5] aspect-[344/328] w-[34vw] rotate-180'
+      >
+        <svg
+          viewBox='0 0 344 328'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          preserveAspectRatio='xMidYMid meet'
+          className='h-full w-full'
+        >
+          <path
+            d='M322.641 326.586L335.508 326.586C339.926 326.586 343.508 323.004 343.508 318.586V153.613C343.508 149.195 339.926 145.613 335.508 145.613H228.282C223.864 145.613 220.282 142.031 220.282 137.613V-50H190.282V137.613C190.282 142.031 186.7 145.613 182.282 145.613H-157V318.586C-157 323.004 -153.418 326.586 -149 326.586H322.641Z'
+            fill='#1C1C1C'
+            stroke='#323232'
+            strokeOpacity='0.4'
+            strokeWidth='1'
+          />
+        </svg>
+      </div>
+    </>
   )
 }

apps/sim/app/(auth)/components/auth-background.tsx

@@ -8,10 +8,10 @@ type AuthBackgroundProps = {
 
 export default function AuthBackground({ className, children }: AuthBackgroundProps) {
   return (
-    <div className={cn('relative min-h-screen w-full overflow-hidden', className)}>
-      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+    <div className={cn('fixed inset-0 overflow-hidden', className)}>
+      <div className='-z-50 pointer-events-none absolute inset-0 bg-[#1C1C1C]' />
       <AuthBackgroundSVG />
-      <div className='relative z-20'>{children}</div>
+      <div className='relative z-20 h-full overflow-auto'>{children}</div>
     </div>
   )
 }

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

@@ -2,36 +2,20 @@
 
 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'
+import { useBrandConfig } from '@/ee/whitelabeling'
 
-export interface BrandedButtonProps extends Omit<EmcnButtonProps, 'variant' | 'size'> {
-  /** Shows loading spinner and disables button */
+export interface BrandedButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   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>
- * ```
+ * Default: white button matching the landing page "Get started" style.
+ * Whitelabel: uses the brand's primary color as background with white text.
  */
 export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
   (
@@ -49,7 +33,8 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
     },
     ref
   ) => {
-    const buttonClass = useBrandedButtonClass()
+    const brand = useBrandConfig()
+    const hasCustomColor = brand.isWhitelabeled && Boolean(brand.theme?.primaryColor)
     const [isHovered, setIsHovered] = useState(false)
 
     const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -63,15 +48,32 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
     }
 
     return (
-      <Button
+      <button
         ref={ref}
-        variant='branded'
-        size='branded'
+        {...props}
         disabled={disabled || loading}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        className={cn(buttonClass, 'group', fullWidth && 'w-full', className)}
-        {...props}
+        className={cn(
+          'group inline-flex h-[32px] items-center justify-center gap-[8px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          !hasCustomColor &&
+            'border-[#FFFFFF] bg-[#FFFFFF] text-black hover:border-[#E0E0E0] hover:bg-[#E0E0E0]',
+          fullWidth && 'w-full',
+          className
+        )}
+        style={
+          hasCustomColor
+            ? {
+                backgroundColor: isHovered
+                  ? (brand.theme?.primaryHoverColor ?? brand.theme?.primaryColor)
+                  : brand.theme?.primaryColor,
+                borderColor: isHovered
+                  ? (brand.theme?.primaryHoverColor ?? brand.theme?.primaryColor)
+                  : brand.theme?.primaryColor,
+                color: '#FFFFFF',
+              }
+            : undefined
+        }
       >
         {loading ? (
           <span className='flex items-center gap-2'>
@@ -92,7 +94,7 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
         ) : (
           children
         )}
-      </Button>
+      </button>
     )
   }
 )

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import { type ReactNode, useEffect, useState } from 'react'
+import { Button } from '@/components/emcn'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
-import { Button } from '@/components/ui/button'
 import { client } from '@/lib/auth/auth-client'
-import { inter } from '@/app/_styles/fonts/inter/inter'
 
 interface SocialLoginButtonsProps {
   githubAvailable: boolean
@@ -82,7 +81,7 @@ export function SocialLoginButtons({
   const githubButton = (
     <Button
       variant='outline'
-      className='w-full rounded-[10px] shadow-sm hover:bg-gray-50'
+      className='w-full rounded-[10px]'
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
@@ -94,7 +93,7 @@ export function SocialLoginButtons({
   const googleButton = (
     <Button
       variant='outline'
-      className='w-full rounded-[10px] shadow-sm hover:bg-gray-50'
+      className='w-full rounded-[10px]'
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
@@ -110,7 +109,7 @@ export function SocialLoginButtons({
   }
 
   return (
-    <div className={`${inter.className} grid gap-3 font-light`}>
+    <div className='grid gap-3 font-light'>
       {googleAvailable && googleButton}
       {githubAvailable && githubButton}
       {children}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/emcn'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -38,7 +38,7 @@ export function SSOLoginButton({
     'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
   )
 
-  const outlineBtnClasses = cn('w-full rounded-[10px] shadow-sm hover:bg-gray-50')
+  const outlineBtnClasses = cn('w-full rounded-[10px]')
 
   return (
     <Button

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

@@ -1,69 +1,41 @@
 '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 Navbar from '@/app/(home)/components/navbar/navbar'
 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' />}
+    <AuthBackground className='dark font-[430] font-season'>
+      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
+        <header className='shrink-0 bg-[#1C1C1C]'>
+          <Navbar logoOnly />
+        </header>
         <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`}
-                >
+                <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
                   {title}
                 </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
                   {description}
                 </p>
               </div>
-
-              {children && (
-                <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
-                  {children}
-                </div>
-              )}
+              {children && <div className='mt-8 w-full max-w-[410px] space-y-3'>{children}</div>}
             </div>
           </div>
         </div>

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

@@ -1,37 +1,22 @@
 'use client'
 
-import { inter } from '@/app/_styles/fonts/inter/inter'
 import { useBrandConfig } from '@/ee/whitelabeling'
 
 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}`}
+      className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed ${position}`}
     >
       Need help?{' '}
       <a
         href={`mailto:${brandConfig.supportEmail}`}
-        className='auth-link underline-offset-4 transition hover:underline'
+        className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
       >
         Contact support
       </a>

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

@@ -6,21 +6,19 @@ import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+  Input,
+  Label,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalHeader,
+} from '@/components/emcn'
 import { client } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-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 { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
 import { SSOLoginButton } from '@/app/(auth)/components/sso-login-button'
@@ -385,17 +383,17 @@ export default function LoginPage({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Sign in
         </h1>
-        <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
           Enter your details
         </p>
       </div>
 
       {/* SSO Login Button (primary top-only when it is the only method) */}
       {showTopSSO && (
-        <div className={`${inter.className} mt-8`}>
+        <div className='mt-8'>
           <SSOLoginButton
             callbackURL={callbackUrl}
             variant='primary'
@@ -406,14 +404,14 @@ export default function LoginPage({
 
       {/* Password reset success message */}
       {resetSuccessMessage && (
-        <div className={`${inter.className} mt-1 space-y-1 text-[#4CAF50] text-xs`}>
+        <div className='mt-1 space-y-1 text-[#4CAF50] text-xs'>
           <p>{resetSuccessMessage}</p>
         </div>
       )}
 
       {/* Email/Password Form - show unless explicitly disabled */}
       {!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
-        <form onSubmit={onSubmit} className={`${inter.className} mt-8 space-y-8`}>
+        <form onSubmit={onSubmit} className='mt-8 space-y-8'>
           <div className='space-y-6'>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
@@ -430,10 +428,9 @@ export default function LoginPage({
                 value={email}
                 onChange={handleEmailChange}
                 className={cn(
-                  'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
                   showEmailValidationError &&
                     emailErrors.length > 0 &&
-                    'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                    'border-red-500 focus:border-red-500'
                 )}
               />
               {showEmailValidationError && emailErrors.length > 0 && (
@@ -450,7 +447,7 @@ export default function LoginPage({
                 <button
                   type='button'
                   onClick={() => setForgotPasswordOpen(true)}
-                  className='font-medium text-muted-foreground text-xs transition hover:text-foreground'
+                  className='font-medium text-[#999] text-xs transition hover:text-[#ECECEC]'
                 >
                   Forgot password?
                 </button>
@@ -468,16 +465,16 @@ export default function LoginPage({
                   value={password}
                   onChange={handlePasswordChange}
                   className={cn(
-                    'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
+                    'pr-10',
                     showValidationError &&
                       passwordErrors.length > 0 &&
-                      'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                      'border-red-500 focus:border-red-500'
                   )}
                 />
                 <button
                   type='button'
                   onClick={() => setShowPassword(!showPassword)}
-                  className='-translate-y-1/2 absolute top-1/2 right-3 text-gray-500 transition hover:text-gray-700'
+                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
                   aria-label={showPassword ? 'Hide password' : 'Show password'}
                 >
                   {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -506,18 +503,18 @@ export default function LoginPage({
 
       {/* Divider - show when we have multiple auth methods */}
       {showDivider && (
-        <div className={`${inter.className} relative my-6 font-light`}>
+        <div className='relative my-6 font-light'>
           <div className='absolute inset-0 flex items-center'>
-            <div className='auth-divider w-full border-t' />
+            <div className='w-full border-[#2A2A2A] border-t' />
           </div>
           <div className='relative flex justify-center text-sm'>
-            <span className='bg-white px-4 font-[340] text-muted-foreground'>Or continue with</span>
+            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
           </div>
         </div>
       )}
 
       {showBottomSection && (
-        <div className={cn(inter.className, !emailEnabled ? 'mt-8' : undefined)}>
+        <div className={cn(!emailEnabled ? 'mt-8' : undefined)}>
           <SocialLoginButtons
             googleAvailable={googleAvailable}
             githubAvailable={githubAvailable}
@@ -537,26 +534,24 @@ export default function LoginPage({
 
       {/* Only show signup link if email/password signup is enabled */}
       {!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
-        <div className={`${inter.className} pt-6 text-center font-light text-[14px]`}>
+        <div className='pt-6 text-center font-light text-[14px]'>
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={isInviteFlow ? `/signup?invite_flow=true&callbackUrl=${callbackUrl}` : '/signup'}
-            className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+            className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
           >
             Sign up
           </Link>
         </div>
       )}
 
-      <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]`}
-      >
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
         By signing in, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='auth-link underline-offset-4 transition hover:underline'
+          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -565,64 +560,58 @@ export default function LoginPage({
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='auth-link underline-offset-4 transition hover:underline'
+          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
         >
           Privacy Policy
         </Link>
       </div>
 
-      <Dialog open={forgotPasswordOpen} onOpenChange={setForgotPasswordOpen}>
-        <DialogContent className='auth-card auth-card-shadow max-w-[540px] rounded-[10px] border backdrop-blur-sm'>
-          <DialogHeader>
-            <DialogTitle className='font-semibold text-black text-xl tracking-tight'>
-              Reset Password
-            </DialogTitle>
-            <DialogDescription className='text-muted-foreground text-sm'>
+      <Modal open={forgotPasswordOpen} onOpenChange={setForgotPasswordOpen}>
+        <ModalContent className='dark' size='sm'>
+          <ModalHeader>Reset Password</ModalHeader>
+          <ModalBody>
+            <ModalDescription className='mb-4 text-[var(--text-muted)] text-sm'>
               Enter your email address and we'll send you a link to reset your password if your
               account exists.
-            </DialogDescription>
-          </DialogHeader>
-          <div className='space-y-4'>
-            <div className='space-y-2'>
-              <div className='flex items-center justify-between'>
+            </ModalDescription>
+            <div className='space-y-4'>
+              <div className='space-y-2'>
                 <Label htmlFor='reset-email'>Email</Label>
-              </div>
-              <Input
-                id='reset-email'
-                value={forgotPasswordEmail}
-                onChange={(e) => setForgotPasswordEmail(e.target.value)}
-                placeholder='Enter your email'
-                required
-                type='email'
-                className={cn(
-                  'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                  resetStatus.type === 'error' &&
-                    'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                <Input
+                  id='reset-email'
+                  value={forgotPasswordEmail}
+                  onChange={(e) => setForgotPasswordEmail(e.target.value)}
+                  placeholder='Enter your email'
+                  required
+                  type='email'
+                  className={cn(
+                    resetStatus.type === 'error' && 'border-red-500 focus:border-red-500'
+                  )}
+                />
+                {resetStatus.type === 'error' && (
+                  <div className='mt-1 text-red-400 text-xs'>
+                    <p>{resetStatus.message}</p>
+                  </div>
                 )}
-              />
-              {resetStatus.type === 'error' && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
+              </div>
+              {resetStatus.type === 'success' && (
+                <div className='mt-1 text-[#4CAF50] text-xs'>
                   <p>{resetStatus.message}</p>
                 </div>
               )}
+              <BrandedButton
+                type='button'
+                onClick={handleForgotPassword}
+                disabled={isSubmittingReset}
+                loading={isSubmittingReset}
+                loadingText='Sending'
+              >
+                Send Reset Link
+              </BrandedButton>
             </div>
-            {resetStatus.type === 'success' && (
-              <div className='mt-1 space-y-1 text-[#4CAF50] text-xs'>
-                <p>{resetStatus.message}</p>
-              </div>
-            )}
-            <BrandedButton
-              type='button'
-              onClick={handleForgotPassword}
-              disabled={isSubmittingReset}
-              loading={isSubmittingReset}
-              loadingText='Sending'
-            >
-              Send Reset Link
-            </BrandedButton>
-          </div>
-        </DialogContent>
-      </Dialog>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </>
   )
 }

apps/sim/app/(auth)/oauth/consent/page.tsx

@@ -6,8 +6,6 @@ import Image from 'next/image'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/emcn'
 import { signOut, useSession } from '@/lib/auth/auth-client'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import { BrandedButton } from '@/app/(auth)/components/branded-button'
 
 const SCOPE_DESCRIPTIONS: Record<string, string> = {
@@ -129,10 +127,10 @@ export default function OAuthConsentPage() {
     return (
       <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`}>
+          <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorize Application
           </h1>
-          <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
             Loading application details...
           </p>
         </div>
@@ -144,14 +142,14 @@ export default function OAuthConsentPage() {
     return (
       <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`}>
+          <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorization Error
           </h1>
-          <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
             {error}
           </p>
         </div>
-        <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
+        <div className='mt-8 w-full max-w-[410px] space-y-3'>
           <BrandedButton onClick={() => router.push('/')}>Return to Home</BrandedButton>
         </div>
       </div>
@@ -172,11 +170,11 @@ export default function OAuthConsentPage() {
             className='rounded-[10px]'
           />
         ) : (
-          <div className='flex h-12 w-12 items-center justify-center rounded-[10px] bg-muted font-medium text-[18px] text-muted-foreground'>
+          <div className='flex h-12 w-12 items-center justify-center rounded-[10px] bg-[#2A2A2A] font-medium text-[#999] text-[18px]'>
             {(clientName ?? '?').charAt(0).toUpperCase()}
           </div>
         )}
-        <ArrowLeftRight className='h-5 w-5 text-muted-foreground' />
+        <ArrowLeftRight className='h-5 w-5 text-[#999]' />
         <Image
           src='/new/logo/colorized-bg.svg'
           alt='Sim'
@@ -187,19 +185,17 @@ export default function OAuthConsentPage() {
       </div>
 
       <div className='space-y-1 text-center'>
-        <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Authorize Application
         </h1>
-        <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
-          <span className='font-medium text-foreground'>{clientName}</span> is requesting access to
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          <span className='font-medium text-[#ECECEC]'>{clientName}</span> is requesting access to
           your account
         </p>
       </div>
 
       {session?.user && (
-        <div
-          className={`${inter.className} mt-5 flex items-center gap-3 rounded-lg border px-4 py-3`}
-        >
+        <div className='mt-5 flex items-center gap-3 rounded-lg border border-[#2A2A2A] px-4 py-3'>
           {session.user.image ? (
             <Image
               src={session.user.image}
@@ -210,7 +206,7 @@ export default function OAuthConsentPage() {
               unoptimized
             />
           ) : (
-            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-muted font-medium text-[13px] text-muted-foreground'>
+            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-[#2A2A2A] font-medium text-[#999] text-[13px]'>
               {(session.user.name ?? session.user.email ?? '?').charAt(0).toUpperCase()}
             </div>
           )}
@@ -218,12 +214,12 @@ export default function OAuthConsentPage() {
             {session.user.name && (
               <p className='truncate font-medium text-[14px]'>{session.user.name}</p>
             )}
-            <p className='truncate text-[13px] text-muted-foreground'>{session.user.email}</p>
+            <p className='truncate text-[#999] text-[13px]'>{session.user.email}</p>
           </div>
           <button
             type='button'
             onClick={handleSwitchAccount}
-            className='ml-auto text-[13px] text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline'
+            className='ml-auto text-[#999] text-[13px] underline-offset-2 transition-colors hover:text-[#ECECEC] hover:underline'
           >
             Switch
           </button>
@@ -231,15 +227,12 @@ export default function OAuthConsentPage() {
       )}
 
       {scopes.length > 0 && (
-        <div className={`${inter.className} mt-5 w-full max-w-[410px]`}>
+        <div className='mt-5 w-full max-w-[410px]'>
           <div className='rounded-lg border p-4'>
             <p className='mb-3 font-medium text-[14px]'>This will allow the application to:</p>
             <ul className='space-y-2'>
               {scopes.map((s) => (
-                <li
-                  key={s}
-                  className='flex items-start gap-2 font-normal text-[13px] text-muted-foreground'
-                >
+                <li key={s} className='flex items-start gap-2 font-normal text-[#999] text-[13px]'>
                   <span className='mt-0.5 text-green-500'>&#10003;</span>
                   <span>{SCOPE_DESCRIPTIONS[s] ?? s}</span>
                 </li>
@@ -249,7 +242,7 @@ export default function OAuthConsentPage() {
         </div>
       )}
 
-      <div className={`${inter.className} mt-6 flex w-full max-w-[410px] gap-3`}>
+      <div className='mt-6 flex w-full max-w-[410px] gap-3'>
         <Button
           variant='outline'
           size='md'

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

@@ -4,8 +4,6 @@ import { Suspense, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import { SetNewPasswordForm } from '@/app/(auth)/reset-password/reset-password-form'
 
 const logger = createLogger('ResetPasswordPage')
@@ -76,15 +74,15 @@ function ResetPasswordContent() {
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Reset your password
         </h1>
-        <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
           Enter a new password for your account
         </p>
       </div>
 
-      <div className={`${inter.className} mt-8`}>
+      <div className='mt-8'>
         <SetNewPasswordForm
           token={token}
           onSubmit={handleResetPassword}
@@ -94,10 +92,10 @@ function ResetPasswordContent() {
         />
       </div>
 
-      <div className={`${inter.className} pt-6 text-center font-light text-[14px]`}>
+      <div className='pt-6 text-center font-light text-[14px]'>
         <Link
           href='/login'
-          className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+          className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
         >
           Back to login
         </Link>

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

@@ -2,10 +2,8 @@
 
 import { useState } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input, Label } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
-import { inter } from '@/app/_styles/fonts/inter/inter'
 import { BrandedButton } from '@/app/(auth)/components/branded-button'
 
 interface RequestResetFormProps {
@@ -33,7 +31,7 @@ export function RequestResetForm({
   }
 
   return (
-    <form onSubmit={handleSubmit} className={cn(`${inter.className} space-y-8`, className)}>
+    <form onSubmit={handleSubmit} className={cn('space-y-8', className)}>
       <div className='space-y-6'>
         <div className='space-y-2'>
           <div className='flex items-center justify-between'>
@@ -47,9 +45,8 @@ export function RequestResetForm({
             type='email'
             disabled={isSubmitting}
             required
-            className='rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
           />
-          <p className='text-muted-foreground text-sm'>
+          <p className='text-[#999] text-sm'>
             We'll send a password reset link to this email address.
           </p>
         </div>
@@ -142,7 +139,7 @@ export function SetNewPasswordForm({
   }
 
   return (
-    <form onSubmit={handleSubmit} className={cn(`${inter.className} space-y-8`, className)}>
+    <form onSubmit={handleSubmit} className={cn('space-y-8', className)}>
       <div className='space-y-6'>
         <div className='space-y-2'>
           <div className='flex items-center justify-between'>
@@ -160,16 +157,12 @@ export function SetNewPasswordForm({
               onChange={(e) => setPassword(e.target.value)}
               required
               placeholder='Enter new password'
-              className={cn(
-                'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                validationMessage &&
-                  'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-              )}
+              className={cn('pr-10', validationMessage && 'border-red-500 focus:border-red-500')}
             />
             <button
               type='button'
               onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-gray-500 transition hover:text-gray-700'
+              className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
               aria-label={showPassword ? 'Hide password' : 'Show password'}
             >
               {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -192,16 +185,12 @@ export function SetNewPasswordForm({
               onChange={(e) => setConfirmPassword(e.target.value)}
               required
               placeholder='Confirm new password'
-              className={cn(
-                'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                validationMessage &&
-                  'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-              )}
+              className={cn('pr-10', validationMessage && 'border-red-500 focus:border-red-500')}
             />
             <button
               type='button'
               onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-gray-500 transition hover:text-gray-700'
+              className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
               aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
             >
               {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}

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

@@ -5,14 +5,11 @@ import { createLogger } from '@sim/logger'
 import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input, Label } from '@/components/emcn'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
 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 { BrandedButton } from '@/app/(auth)/components/branded-button'
 import { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
 import { SSOLoginButton } from '@/app/(auth)/components/sso-login-button'
@@ -344,10 +341,10 @@ function SignupFormContent({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Create an account
         </h1>
-        <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
           Create an account or log in
         </p>
       </div>
@@ -360,7 +357,7 @@ function SignupFormContent({
         const hasOnlySSO = ssoEnabled && !emailEnabled && !hasSocial
         return hasOnlySSO
       })() && (
-        <div className={`${inter.className} mt-8`}>
+        <div className='mt-8'>
           <SSOLoginButton
             callbackURL={redirectUrl || '/workspace'}
             variant='primary'
@@ -371,7 +368,7 @@ function SignupFormContent({
 
       {/* Email/Password Form - show unless explicitly disabled */}
       {!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
-        <form onSubmit={onSubmit} className={`${inter.className} mt-8 space-y-8`}>
+        <form onSubmit={onSubmit} className='mt-8 space-y-8'>
           <div className='space-y-6'>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
@@ -388,10 +385,9 @@ function SignupFormContent({
                 value={name}
                 onChange={handleNameChange}
                 className={cn(
-                  'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
                   showNameValidationError &&
                     nameErrors.length > 0 &&
-                    'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                    'border-red-500 focus:border-red-500'
                 )}
               />
               {showNameValidationError && nameErrors.length > 0 && (
@@ -416,9 +412,8 @@ function SignupFormContent({
                 value={email}
                 onChange={handleEmailChange}
                 className={cn(
-                  'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
                   (emailError || (showEmailValidationError && emailErrors.length > 0)) &&
-                    'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                    'border-red-500 focus:border-red-500'
                 )}
               />
               {showEmailValidationError && emailErrors.length > 0 && (
@@ -450,16 +445,16 @@ function SignupFormContent({
                   value={password}
                   onChange={handlePasswordChange}
                   className={cn(
-                    'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
+                    'pr-10',
                     showValidationError &&
                       passwordErrors.length > 0 &&
-                      'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                      'border-red-500 focus:border-red-500'
                   )}
                 />
                 <button
                   type='button'
                   onClick={() => setShowPassword(!showPassword)}
-                  className='-translate-y-1/2 absolute top-1/2 right-3 text-gray-500 transition hover:text-gray-700'
+                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
                   aria-label={showPassword ? 'Hide password' : 'Show password'}
                 >
                   {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -496,12 +491,12 @@ function SignupFormContent({
         const showDivider = (emailEnabled || hasOnlySSO) && showBottomSection
         return showDivider
       })() && (
-        <div className={`${inter.className} relative my-6 font-light`}>
+        <div className='relative my-6 font-light'>
           <div className='absolute inset-0 flex items-center'>
-            <div className='auth-divider w-full border-t' />
+            <div className='w-full border-[#2A2A2A] border-t' />
           </div>
           <div className='relative flex justify-center text-sm'>
-            <span className='bg-white px-4 font-[340] text-muted-foreground'>Or continue with</span>
+            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
           </div>
         </div>
       )}
@@ -516,7 +511,6 @@ function SignupFormContent({
       })() && (
         <div
           className={cn(
-            inter.className,
             isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) ? 'mt-8' : undefined
           )}
         >
@@ -537,25 +531,23 @@ function SignupFormContent({
         </div>
       )}
 
-      <div className={`${inter.className} pt-6 text-center font-light text-[14px]`}>
+      <div className='pt-6 text-center font-light text-[14px]'>
         <span className='font-normal'>Already have an account? </span>
         <Link
           href={isInviteFlow ? `/login?invite_flow=true&callbackUrl=${redirectUrl}` : '/login'}
-          className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+          className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
         >
           Sign in
         </Link>
       </div>
 
-      <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]`}
-      >
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
         By creating an account, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='auth-link underline-offset-4 transition hover:underline'
+          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -564,7 +556,7 @@ function SignupFormContent({
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='auth-link underline-offset-4 transition hover:underline'
+          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
         >
           Privacy Policy
         </Link>

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

@@ -2,13 +2,10 @@
 
 import { Suspense, useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { Button } from '@/components/ui/button'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
+import { InputOTP, InputOTPGroup, InputOTPSlot } 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 { BrandedButton } from '@/app/(auth)/components/branded-button'
 import { useVerification } from '@/app/(auth)/verify/use-verification'
-import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
 
 interface VerifyContentProps {
   hasEmailService: boolean
@@ -59,15 +56,13 @@ function VerificationForm({
     setCountdown(30)
   }
 
-  const buttonClass = useBrandedButtonClass()
-
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           {isVerified ? 'Email Verified!' : 'Verify Your Email'}
         </h1>
-        <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
           {isVerified
             ? 'Your email has been verified. Redirecting to dashboard...'
             : !isEmailVerificationEnabled
@@ -81,9 +76,9 @@ function VerificationForm({
       </div>
 
       {!isVerified && isEmailVerificationEnabled && (
-        <div className={`${inter.className} mt-8 space-y-8`}>
+        <div className='mt-8 space-y-8'>
           <div className='space-y-6'>
-            <p className='text-center text-muted-foreground text-sm'>
+            <p className='text-center text-[#999] text-sm'>
               Enter the 6-digit code to verify your account.
               {hasEmailService ? " If you don't see it in your inbox, check your spam folder." : ''}
             </p>
@@ -96,61 +91,13 @@ function VerificationForm({
                 disabled={isLoading}
                 className={cn('gap-2', isInvalidOtp && 'otp-error')}
               >
-                <InputOTPGroup className='[&>div]:!rounded-[10px] gap-2'>
-                  <InputOTPSlot
-                    index={0}
-                    className={cn(
-                      '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
-                      'border-gray-300 hover:border-gray-400',
-                      'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
-                      isInvalidOtp && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                    )}
-                  />
-                  <InputOTPSlot
-                    index={1}
-                    className={cn(
-                      '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
-                      'border-gray-300 hover:border-gray-400',
-                      'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
-                      isInvalidOtp && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                    )}
-                  />
-                  <InputOTPSlot
-                    index={2}
-                    className={cn(
-                      '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
-                      'border-gray-300 hover:border-gray-400',
-                      'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
-                      isInvalidOtp && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                    )}
-                  />
-                  <InputOTPSlot
-                    index={3}
-                    className={cn(
-                      '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
-                      'border-gray-300 hover:border-gray-400',
-                      'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
-                      isInvalidOtp && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                    )}
-                  />
-                  <InputOTPSlot
-                    index={4}
-                    className={cn(
-                      '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
-                      'border-gray-300 hover:border-gray-400',
-                      'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
-                      isInvalidOtp && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                    )}
-                  />
-                  <InputOTPSlot
-                    index={5}
-                    className={cn(
-                      '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
-                      'border-gray-300 hover:border-gray-400',
-                      'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
-                      isInvalidOtp && 'border-red-500 focus:border-red-500 focus:ring-red-100'
-                    )}
-                  />
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} className={cn(isInvalidOtp && 'border-red-500')} />
+                  <InputOTPSlot index={1} className={cn(isInvalidOtp && 'border-red-500')} />
+                  <InputOTPSlot index={2} className={cn(isInvalidOtp && 'border-red-500')} />
+                  <InputOTPSlot index={3} className={cn(isInvalidOtp && 'border-red-500')} />
+                  <InputOTPSlot index={4} className={cn(isInvalidOtp && 'border-red-500')} />
+                  <InputOTPSlot index={5} className={cn(isInvalidOtp && 'border-red-500')} />
                 </InputOTPGroup>
               </InputOTP>
             </div>
@@ -163,25 +110,27 @@ function VerificationForm({
             )}
           </div>
 
-          <Button
+          <BrandedButton
             onClick={verifyCode}
-            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={!isOtpComplete || isLoading}
+            loading={isLoading}
+            loadingText='Verifying'
+            showArrow={false}
           >
-            {isLoading ? 'Verifying...' : 'Verify Email'}
-          </Button>
+            Verify Email
+          </BrandedButton>
 
           {hasEmailService && (
             <div className='text-center'>
-              <p className='text-muted-foreground text-sm'>
+              <p className='text-[#999] text-sm'>
                 Didn't receive a code?{' '}
                 {countdown > 0 ? (
                   <span>
-                    Resend in <span className='font-medium text-foreground'>{countdown}s</span>
+                    Resend in <span className='font-medium text-[#ECECEC]'>{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'
+                    className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
                     onClick={handleResend}
                     disabled={isLoading || isResendDisabled}
                   >
@@ -202,7 +151,7 @@ function VerificationForm({
                 }
                 router.push('/signup')
               }}
-              className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+              className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
             >
               Back to signup
             </button>
@@ -217,8 +166,8 @@ function VerificationFormFallback() {
   return (
     <div className='text-center'>
       <div className='animate-pulse'>
-        <div className='mx-auto mb-4 h-8 w-48 rounded bg-gray-200' />
-        <div className='mx-auto h-4 w-64 rounded bg-gray-200' />
+        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[#2A2A2A]' />
+        <div className='mx-auto h-4 w-64 rounded bg-[#2A2A2A]' />
       </div>
     </div>
   )

apps/sim/app/(home)/components/collaboration/collaboration.tsx

@@ -25,7 +25,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[2px] w-[2px] rounded-full bg-[#2A2A2A]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#2A2A2A]' />
       ))}
     </div>
   )
@@ -222,34 +222,15 @@ export default function Collaboration() {
       <style dangerouslySetInnerHTML={{ __html: CURSOR_KEYFRAMES }} />
 
       <DotGrid
-        className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
         cols={120}
         rows={1}
         gap={6}
       />
 
       <div className='relative overflow-hidden'>
-        <Link
-          href='/studio/multiplayer'
-          target='_blank'
-          rel='noopener noreferrer'
-          className='absolute bottom-10 left-4 z-20 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:left-8 md:left-[80px]'
-        >
-          <div className='relative h-7 w-11 shrink-0'>
-            <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
-          </div>
-          <div className='flex flex-col gap-[2px]'>
-            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
-              Blog
-            </span>
-            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
-              How we built realtime collaboration
-            </span>
-          </div>
-        </Link>
-
-        <div className='grid grid-cols-[auto_1fr]'>
-          <div className='flex flex-col items-start gap-3 px-4 pt-[100px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px]'>
+        <div className='grid grid-cols-1 md:grid-cols-[auto_1fr]'>
+          <div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px] md:pt-[100px]'>
             <Badge
               variant='blue'
               size='md'
@@ -268,13 +249,14 @@ export default function Collaboration() {
               collaboration
             </h2>
 
-            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[14px] leading-[125%] tracking-[0.02em] sm:text-[16px]'>
-              Grab your team. Build agents together <br /> in real-time inside your workspace.
+            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] md:text-[18px]'>
+              Grab your team. Build agents together <br className='hidden md:block' />
+              in real-time inside your workspace.
             </p>
 
             <Link
               href='/signup'
-              className='group/cta mt-[12px] inline-flex h-[32px] cursor-none items-center gap-[6px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-black transition-[filter] hover:brightness-110'
+              className='group/cta mt-[12px] inline-flex h-[32px] cursor-none items-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
             >
               Build together
               <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -298,14 +280,14 @@ export default function Collaboration() {
             </Link>
           </div>
 
-          <figure className='pointer-events-none relative h-[600px] w-full'>
-            <div className='-left-[18%] absolute inset-y-0 min-w-full'>
+          <figure className='pointer-events-none relative h-[220px] w-full md:h-[600px]'>
+            <div className='md:-left-[18%] -top-[10%] absolute inset-y-0 left-[7%] min-w-full md:top-0'>
               <Image
                 src='/landing/collaboration-visual.svg'
                 alt='Collaboration visual showing team workflows with real-time editing, shared cursors, and version control interface'
                 width={876}
                 height={480}
-                className='h-full w-auto min-w-[100vw] object-left'
+                className='h-full w-auto object-left md:min-w-[100vw]'
                 priority
               />
             </div>
@@ -319,10 +301,29 @@ export default function Collaboration() {
             </figcaption>
           </figure>
         </div>
+
+        <Link
+          href='/studio/multiplayer'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='relative mx-4 mb-6 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
+        >
+          <div className='relative h-7 w-11 shrink-0'>
+            <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
+          </div>
+          <div className='flex flex-col gap-[2px]'>
+            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
+              Blog
+            </span>
+            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
+              How we built realtime collaboration
+            </span>
+          </div>
+        </Link>
       </div>
 
       <DotGrid
-        className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
         cols={120}
         rows={1}
         gap={6}

apps/sim/app/(home)/components/enterprise/enterprise.tsx

@@ -4,14 +4,484 @@
  * SEO:
  * - `<section id="enterprise" aria-labelledby="enterprise-heading">`.
  * - `<h2 id="enterprise-heading">` for the section title.
- * - Compliance certs (SOC2, HIPAA) as visible `<strong>` text.
+ * - Compliance certs (SOC 2, HIPAA) as visible `<strong>` text.
  * - Enterprise CTA links to contact form via `<a>` with `rel="noopener noreferrer"`.
  *
  * GEO:
- * - Entity-rich: "Sim is SOC2 and HIPAA compliant" — not "We are compliant."
+ * - Entity-rich: "Sim is SOC 2 and HIPAA compliant" — not "We are compliant."
  * - `<ul>` checklist of features (SSO, RBAC, audit logs, SLA, on-premise deployment)
  *   as an atomic answer block for "What enterprise features does Sim offer?".
  */
-export default function Enterprise() {
-  return null
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Badge, ChevronDown } from '@/components/emcn'
+import { Lock } from '@/components/emcn/icons'
+import { GithubIcon } from '@/components/icons'
+
+/** Consistent color per actor — same pattern as Collaboration section cursors. */
+const ACTOR_COLORS: Record<string, string> = {
+  'Sarah K.': '#2ABBF8',
+  'Sid G.': '#33C482',
+  'Theo L.': '#FA4EDF',
+  'Abhay K.': '#FFCC02',
+  'Danny S.': '#FF6B35',
+}
+
+/** Left accent bar opacity by recency — newest is brightest. */
+const ACCENT_OPACITIES = [0.75, 0.45, 0.28, 0.15, 0.07] as const
+
+/** Human-readable label per resource type. */
+const RESOURCE_TYPE_LABEL: Record<string, string> = {
+  workflow: 'Workflow',
+  member: 'Member',
+  byok_key: 'BYOK Key',
+  api_key: 'API Key',
+  permission_group: 'Permission Group',
+  credential_set: 'Credential Set',
+  knowledge_base: 'Knowledge Base',
+  environment: 'Environment',
+  mcp_server: 'MCP Server',
+  file: 'File',
+  webhook: 'Webhook',
+  chat: 'Chat',
+  table: 'Table',
+  folder: 'Folder',
+  document: 'Document',
+}
+
+interface LogEntry {
+  id: number
+  actor: string
+  /** Matches the `description` field stored by recordAudit() */
+  description: string
+  resourceType: string
+  /** Unix ms timestamp of when this entry was "received" */
+  insertedAt: number
+}
+
+function formatTimeAgo(insertedAt: number): string {
+  const elapsed = Date.now() - insertedAt
+  if (elapsed < 8_000) return 'just now'
+  if (elapsed < 60_000) return `${Math.floor(elapsed / 1000)}s ago`
+  return `${Math.floor(elapsed / 60_000)}m ago`
+}
+
+/**
+ * Entry templates using real description strings from the actual recordAudit()
+ * calls across the codebase (e.g. `Added BYOK key for openai`,
+ * `Invited alex@acme.com to workspace as member`).
+ */
+const ENTRY_TEMPLATES: Omit<LogEntry, 'id' | 'insertedAt'>[] = [
+  { actor: 'Sarah K.', description: 'Deployed workflow "Email Triage"', resourceType: 'workflow' },
+  {
+    actor: 'Sid G.',
+    description: 'Invited alex@acme.com to workspace as member',
+    resourceType: 'member',
+  },
+  { actor: 'Theo L.', description: 'Added BYOK key for openai', resourceType: 'byok_key' },
+  { actor: 'Sarah K.', description: 'Created workflow "Invoice Parser"', resourceType: 'workflow' },
+  {
+    actor: 'Abhay K.',
+    description: 'Created permission group "Engineering"',
+    resourceType: 'permission_group',
+  },
+  { actor: 'Danny S.', description: 'Created API key "Production Key"', resourceType: 'api_key' },
+  {
+    actor: 'Theo L.',
+    description: 'Changed permissions for sam@acme.com to editor',
+    resourceType: 'member',
+  },
+  { actor: 'Sarah K.', description: 'Uploaded file "Q3_Report.pdf"', resourceType: 'file' },
+  {
+    actor: 'Sid G.',
+    description: 'Created credential set "Prod Keys"',
+    resourceType: 'credential_set',
+  },
+  {
+    actor: 'Abhay K.',
+    description: 'Created knowledge base "Internal Docs"',
+    resourceType: 'knowledge_base',
+  },
+  { actor: 'Danny S.', description: 'Updated environment variables', resourceType: 'environment' },
+  {
+    actor: 'Sarah K.',
+    description: 'Added tool "search_web" to MCP server',
+    resourceType: 'mcp_server',
+  },
+  { actor: 'Sid G.', description: 'Created webhook "Stripe Payment"', resourceType: 'webhook' },
+  { actor: 'Theo L.', description: 'Deployed chat "Support Assistant"', resourceType: 'chat' },
+  { actor: 'Abhay K.', description: 'Created table "Lead Tracker"', resourceType: 'table' },
+  { actor: 'Danny S.', description: 'Revoked API key "Staging Key"', resourceType: 'api_key' },
+  {
+    actor: 'Sarah K.',
+    description: 'Duplicated workflow "Data Enrichment"',
+    resourceType: 'workflow',
+  },
+  {
+    actor: 'Sid G.',
+    description: 'Removed member theo@acme.com from workspace',
+    resourceType: 'member',
+  },
+  {
+    actor: 'Theo L.',
+    description: 'Updated knowledge base "Product Docs"',
+    resourceType: 'knowledge_base',
+  },
+  { actor: 'Abhay K.', description: 'Created folder "Finance Workflows"', resourceType: 'folder' },
+  {
+    actor: 'Danny S.',
+    description: 'Uploaded document "onboarding-guide.pdf"',
+    resourceType: 'document',
+  },
+  {
+    actor: 'Sarah K.',
+    description: 'Updated credential set "Prod Keys"',
+    resourceType: 'credential_set',
+  },
+  {
+    actor: 'Sid G.',
+    description: 'Added member abhay@acme.com to permission group "Engineering"',
+    resourceType: 'permission_group',
+  },
+  { actor: 'Theo L.', description: 'Locked workflow "Customer Sync"', resourceType: 'workflow' },
+]
+
+const INITIAL_OFFSETS_MS = [0, 20_000, 75_000, 240_000, 540_000]
+
+const MARQUEE_KEYFRAMES = `
+  @keyframes marquee {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-25%); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    @keyframes marquee { 0%, 100% { transform: none; } }
+  }
+`
+
+const FEATURE_TAGS = [
+  'Access Control',
+  'Self-Hosting',
+  'Bring Your Own Key',
+  'Credential Sharing',
+  'Custom Limits',
+  'Admin API',
+  'White Labeling',
+  'Dedicated Support',
+  '99.99% Uptime SLA',
+  'Workflow Versioning',
+  'On-Premise',
+  'Organizations',
+  'Workspace Export',
+  'Audit Logs',
+] as const
+
+interface AuditRowProps {
+  entry: LogEntry
+  index: number
+}
+
+function AuditRow({ entry, index }: AuditRowProps) {
+  const color = ACTOR_COLORS[entry.actor] ?? '#F6F6F6'
+  const accentOpacity = ACCENT_OPACITIES[index] ?? 0.04
+  const timeAgo = formatTimeAgo(entry.insertedAt)
+  const resourceLabel = RESOURCE_TYPE_LABEL[entry.resourceType]
+
+  return (
+    <div className='group relative overflow-hidden border-[#2A2A2A] border-b bg-[#191919] transition-colors duration-150 last:border-b-0 hover:bg-[#212121]'>
+      {/* Left accent bar — brightness encodes recency */}
+      <div
+        aria-hidden='true'
+        className='absolute top-0 bottom-0 left-0 w-[2px] transition-opacity duration-150 group-hover:opacity-100'
+        style={{ backgroundColor: color, opacity: accentOpacity }}
+      />
+
+      {/* Row content */}
+      <div className='flex min-w-0 items-center gap-3 py-[10px] pr-4 pl-5'>
+        {/* Actor avatar */}
+        <div
+          className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full'
+          style={{ backgroundColor: `${color}20` }}
+        >
+          <span className='font-[500] font-season text-[9px] leading-none' style={{ color }}>
+            {entry.actor[0]}
+          </span>
+        </div>
+
+        {/* Time */}
+        <span className='w-[56px] shrink-0 font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em]'>
+          {timeAgo}
+        </span>
+
+        {/* Description — description hidden on mobile to avoid truncation */}
+        <span className='min-w-0 truncate font-[430] font-season text-[12px] leading-none tracking-[0.02em]'>
+          <span className='text-[#F6F6F6]/80'>{entry.actor}</span>
+          <span className='hidden sm:inline'>
+            <span className='text-[#F6F6F6]/40'> · </span>
+            <span className='text-[#F6F6F6]/55'>{entry.description}</span>
+          </span>
+        </span>
+
+        {/* Resource type label — formatted name, neutral so it doesn't compete with actor colors */}
+        {resourceLabel && (
+          <span className='ml-auto shrink-0 rounded border border-[#2A2A2A] px-[7px] py-[3px] font-[430] font-season text-[#F6F6F6]/25 text-[10px] leading-none tracking-[0.04em]'>
+            {resourceLabel}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function AuditLogPreview() {
+  const counterRef = useRef(ENTRY_TEMPLATES.length)
+  const templateIndexRef = useRef(5 % ENTRY_TEMPLATES.length)
+
+  const now = Date.now()
+  const [entries, setEntries] = useState<LogEntry[]>(() =>
+    ENTRY_TEMPLATES.slice(0, 5).map((t, i) => ({
+      ...t,
+      id: i,
+      insertedAt: now - INITIAL_OFFSETS_MS[i],
+    }))
+  )
+  const [, tick] = useState(0)
+
+  useEffect(() => {
+    const addInterval = setInterval(() => {
+      const template = ENTRY_TEMPLATES[templateIndexRef.current]
+      templateIndexRef.current = (templateIndexRef.current + 1) % ENTRY_TEMPLATES.length
+
+      setEntries((prev) => [
+        { ...template, id: counterRef.current++, insertedAt: Date.now() },
+        ...prev.slice(0, 4),
+      ])
+    }, 2600)
+
+    // Refresh time labels every 5s so "just now" ages to "Xs ago"
+    const tickInterval = setInterval(() => tick((n) => n + 1), 5_000)
+
+    return () => {
+      clearInterval(addInterval)
+      clearInterval(tickInterval)
+    }
+  }, [])
+
+  return (
+    <div className='mx-6 mt-6 overflow-hidden rounded-[8px] border border-[#2A2A2A] md:mx-8 md:mt-8'>
+      {/* Header */}
+      <div className='flex items-center justify-between border-[#2A2A2A] border-b bg-[#161616] px-4 py-[10px]'>
+        <div className='flex items-center gap-2'>
+          {/* Pulsing live indicator */}
+          <span className='relative flex h-[8px] w-[8px]'>
+            <span
+              className='absolute inline-flex h-full w-full animate-ping rounded-full opacity-50'
+              style={{ backgroundColor: '#33C482' }}
+            />
+            <span
+              className='relative inline-flex h-[8px] w-[8px] rounded-full'
+              style={{ backgroundColor: '#33C482' }}
+            />
+          </span>
+          <span className='font-[430] font-season text-[#F6F6F6]/40 text-[11px] uppercase tracking-[0.08em]'>
+            Audit Log
+          </span>
+        </div>
+        <div className='flex items-center gap-2'>
+          <span className='rounded border border-[#2A2A2A] px-[8px] py-[3px] font-[430] font-season text-[#F6F6F6]/20 text-[11px] tracking-[0.02em]'>
+            Export
+          </span>
+          <span className='rounded border border-[#2A2A2A] px-[8px] py-[3px] font-[430] font-season text-[#F6F6F6]/20 text-[11px] tracking-[0.02em]'>
+            Filter
+          </span>
+        </div>
+      </div>
+
+      {/* Log entries — new items push existing ones down */}
+      <div className='overflow-hidden'>
+        <AnimatePresence mode='popLayout' initial={false}>
+          {entries.map((entry, index) => (
+            <motion.div
+              key={entry.id}
+              layout
+              initial={{ y: -48, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{
+                layout: {
+                  type: 'spring',
+                  stiffness: 380,
+                  damping: 38,
+                  mass: 0.8,
+                },
+                y: { duration: 0.32, ease: [0.25, 0.46, 0.45, 0.94] },
+                opacity: { duration: 0.25 },
+              }}
+            >
+              <AuditRow entry={entry} index={index} />
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}
+
+function TrustStrip() {
+  return (
+    <div className='mx-6 mt-4 grid grid-cols-1 overflow-hidden rounded-[8px] border border-[#2A2A2A] sm:grid-cols-3 md:mx-8'>
+      {/* SOC 2 + HIPAA combined */}
+      <Link
+        href='https://trust.delve.co/sim-studio'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='group flex items-center gap-3 border-[#2A2A2A] border-b px-4 py-[14px] transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
+      >
+        <Image
+          src='/footer/soc2.png'
+          alt='SOC 2 Type II'
+          width={22}
+          height={22}
+          className='shrink-0 object-contain'
+        />
+        <div className='flex flex-col gap-[3px]'>
+          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+            SOC 2 & HIPAA
+          </strong>
+          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em] transition-colors group-hover:text-[#F6F6F6]/55'>
+            Type II · PHI protected →
+          </span>
+        </div>
+      </Link>
+
+      {/* Open Source — center */}
+      <Link
+        href='https://github.com/simstudioai/sim'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='group flex items-center gap-3 border-[#2A2A2A] border-b px-4 py-[14px] transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
+      >
+        <div className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[#FFCC02]/10'>
+          <GithubIcon width={11} height={11} className='text-[#FFCC02]/75' />
+        </div>
+        <div className='flex flex-col gap-[3px]'>
+          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+            Open Source
+          </strong>
+          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em] transition-colors group-hover:text-[#F6F6F6]/55'>
+            View on GitHub →
+          </span>
+        </div>
+      </Link>
+
+      {/* SSO */}
+      <div className='flex items-center gap-3 px-4 py-[14px]'>
+        <div className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[#2ABBF8]/10'>
+          <Lock className='h-[14px] w-[14px] text-[#2ABBF8]/75' />
+        </div>
+        <div className='flex flex-col gap-[3px]'>
+          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+            SSO & SCIM
+          </strong>
+          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em]'>
+            Okta, Azure AD, Google
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function Enterprise() {
+  return (
+    <section id='enterprise' aria-labelledby='enterprise-heading' className='bg-[#F6F6F6]'>
+      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
+        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
+          <Badge
+            variant='blue'
+            size='md'
+            dot
+            className='bg-[#FFCC02]/10 font-season text-[#FFCC02] uppercase tracking-[0.02em]'
+          >
+            Enterprise
+          </Badge>
+
+          <h2
+            id='enterprise-heading'
+            className='max-w-[600px] font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+          >
+            Enterprise features for
+            <br />
+            fast, scalable workflows
+          </h2>
+        </div>
+
+        <div className='mt-8 overflow-hidden rounded-[12px] bg-[#1C1C1C] sm:mt-10 md:mt-12'>
+          <AuditLogPreview />
+          <TrustStrip />
+
+          {/* Scrolling feature ticker */}
+          <div className='relative mt-6 overflow-hidden border-[#2A2A2A] border-t'>
+            <style dangerouslySetInnerHTML={{ __html: MARQUEE_KEYFRAMES }} />
+            {/* Fade edges */}
+            <div
+              aria-hidden='true'
+              className='pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-16'
+              style={{ background: 'linear-gradient(to right, #1C1C1C, transparent)' }}
+            />
+            <div
+              aria-hidden='true'
+              className='pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-16'
+              style={{ background: 'linear-gradient(to left, #1C1C1C, transparent)' }}
+            />
+            {/* Duplicate tags for seamless loop */}
+            <div className='flex w-max' style={{ animation: 'marquee 30s linear infinite' }}>
+              {[...FEATURE_TAGS, ...FEATURE_TAGS, ...FEATURE_TAGS, ...FEATURE_TAGS].map(
+                (tag, i) => (
+                  <span
+                    key={i}
+                    className='whitespace-nowrap border-[#2A2A2A] border-r px-5 py-4 font-[430] font-season text-[#F6F6F6]/40 text-[13px] leading-none tracking-[0.02em]'
+                  >
+                    {tag}
+                  </span>
+                )
+              )}
+            </div>
+          </div>
+
+          <div className='flex items-center justify-between border-[#2A2A2A] border-t px-6 py-5 md:px-8 md:py-6'>
+            <p className='font-[430] font-season text-[#F6F6F6]/40 text-[15px] leading-[150%] tracking-[0.02em]'>
+              Ready for growth?
+            </p>
+            <Link
+              href='/contact'
+              className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-white bg-white px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+            >
+              Book a demo
+              <span className='relative h-[10px] w-[10px] shrink-0'>
+                <ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
+                <svg
+                  className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
+                  viewBox='0 0 10 10'
+                  fill='none'
+                >
+                  <path
+                    d='M1 5H8M5.5 2L8.5 5L5.5 8'
+                    stroke='currentColor'
+                    strokeWidth='1.33'
+                    strokeLinecap='square'
+                    strokeLinejoin='miter'
+                    fill='none'
+                  />
+                </svg>
+              </span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
 }

apps/sim/app/(home)/components/features/features.tsx

@@ -1,8 +1,11 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
 import Image from 'next/image'
-import { Badge } from '@/components/emcn'
+import Link from 'next/link'
+import { Badge, ChevronDown } from '@/components/emcn'
+import { FeaturesPreview } from '@/app/(home)/components/features/components/features-preview'
 
 function hexToRgba(hex: string, alpha: number): string {
   const r = Number.parseInt(hex.slice(1, 3), 16)
@@ -13,8 +16,12 @@ function hexToRgba(hex: string, alpha: number): string {
 
 const FEATURE_TABS = [
   {
-    label: 'Integrations',
+    label: 'Mothership',
     color: '#FA4EDF',
+    title: 'Your AI command center',
+    description:
+      'Direct your entire AI workforce from one place. Build agents, spin up workflows, query tables, and manage every resource across your workspace — in natural language.',
+    cta: 'Explore mothership',
     segments: [
       [0.3, 8],
       [0.25, 10],
@@ -29,8 +36,12 @@ const FEATURE_TABS = [
     ],
   },
   {
-    label: 'Copilot',
+    label: 'Tables',
     color: '#2ABBF8',
+    title: 'A database, built in',
+    description:
+      'Filter, sort, and edit data inline, then wire it directly into your workflows. Agents query, insert, and update rows on every run — no external database needed.',
+    cta: 'Explore tables',
     segments: [
       [0.25, 12],
       [0.4, 10],
@@ -44,59 +55,34 @@ const FEATURE_TABS = [
     ],
   },
   {
-    label: 'Models',
-    color: '#00F701',
-    badgeColor: '#22C55E',
-    segments: [
-      [0.2, 6],
-      [0.35, 10],
-      [0.3, 8],
-      [0.5, 10],
-      [0.6, 8],
-      [0.75, 12],
-      [0.85, 10],
-      [1, 8],
-      [0.9, 12],
-      [1, 10],
-      [0.95, 6],
-    ],
-  },
-  {
-    label: 'Deploy',
+    label: 'Files',
     color: '#FFCC02',
     badgeColor: '#EAB308',
-    segments: [
-      [0.3, 12],
-      [0.25, 8],
-      [0.4, 10],
-      [0.55, 10],
-      [0.7, 8],
-      [0.6, 10],
-      [0.85, 12],
-      [1, 10],
-      [0.9, 10],
-      [1, 10],
-    ],
-  },
-  {
-    label: 'Logs',
-    color: '#FF6B35',
+    title: 'Upload, create, and share',
+    description:
+      'Create or upload documents, spreadsheets, and media that agents can read, write, and reference across workflows. One shared store your entire team and every agent can pull from.',
+    cta: 'Explore files',
     segments: [
       [0.25, 10],
-      [0.35, 8],
-      [0.3, 10],
+      [0.4, 8],
+      [0.35, 12],
       [0.5, 10],
       [0.65, 8],
-      [0.8, 12],
-      [0.9, 10],
+      [0.75, 10],
+      [0.9, 12],
       [1, 10],
-      [0.85, 12],
+      [0.85, 10],
       [1, 10],
     ],
   },
   {
     label: 'Knowledge Base',
+    mobileLabel: 'Knowledge',
     color: '#8B5CF6',
+    title: 'Your context engine',
+    description:
+      'Sync institutional knowledge from 30+ live connectors — Notion, Drive, Slack, Confluence, and more — so every agent draws from the same truth across your entire organization.',
+    cta: 'Explore knowledge base',
     segments: [
       [0.3, 10],
       [0.25, 8],
@@ -110,8 +96,48 @@ const FEATURE_TABS = [
       [1, 10],
     ],
   },
+  {
+    label: 'Logs',
+    hideOnMobile: true,
+    color: '#FF6B35',
+    title: 'Full visibility, every run',
+    description:
+      'Trace every execution block by block — inputs, outputs, cost, and duration. Filter by status or workflow, replay snapshots, and export reports to keep your team accountable.',
+    cta: 'Explore logs',
+    segments: [
+      [0.25, 10],
+      [0.35, 8],
+      [0.3, 10],
+      [0.5, 10],
+      [0.65, 8],
+      [0.8, 12],
+      [0.9, 10],
+      [1, 10],
+      [0.85, 12],
+      [1, 10],
+    ],
+  },
 ]
 
+const HEADING_TEXT = 'Everything you need to build, deploy, and manage AI agents. '
+const HEADING_LETTERS = HEADING_TEXT.split('')
+
+const LETTER_REVEAL_SPAN = 0.85
+const LETTER_FADE_IN = 0.04
+
+interface ScrollLetterProps {
+  scrollYProgress: MotionValue<number>
+  charIndex: number
+  children: string
+}
+
+function ScrollLetter({ scrollYProgress, charIndex, children }: ScrollLetterProps) {
+  const threshold = (charIndex / HEADING_LETTERS.length) * LETTER_REVEAL_SPAN
+  const opacity = useTransform(scrollYProgress, [threshold, threshold + LETTER_FADE_IN], [0.4, 1])
+
+  return <motion.span style={{ opacity }}>{children}</motion.span>
+}
+
 function DotGrid({
   cols,
   rows,
@@ -126,7 +152,7 @@ function DotGrid({
   return (
     <div
       aria-hidden='true'
-      className={`shrink-0 bg-[#FDFDFD] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
+      className={`h-full shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
       style={{
         width: width ? `${width}px` : undefined,
         display: 'grid',
@@ -136,20 +162,26 @@ function DotGrid({
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[2px] w-[2px] rounded-full bg-[#DEDEDE]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#DEDEDE]' />
       ))}
     </div>
   )
 }
 
 export default function Features() {
+  const sectionRef = useRef<HTMLDivElement>(null)
   const [activeTab, setActiveTab] = useState(0)
 
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ['start 0.9', 'start 0.2'],
+  })
+
   return (
     <section
       id='features'
       aria-labelledby='features-heading'
-      className='relative overflow-hidden bg-[#F6F6F6] pb-[144px]'
+      className='relative overflow-hidden bg-[#F6F6F6]'
     >
       <div aria-hidden='true' className='absolute top-0 left-0 w-full'>
         <Image
@@ -162,8 +194,11 @@ export default function Features() {
         />
       </div>
 
-      <div className='relative z-10 pt-[100px]'>
-        <div className='flex flex-col items-start gap-[20px] px-[80px]'>
+      <div className='relative z-10 pt-[60px] lg:pt-[100px]'>
+        <div
+          ref={sectionRef}
+          className='flex flex-col items-start gap-[20px] px-[24px] lg:px-[80px]'
+        >
           <Badge
             variant='blue'
             size='md'
@@ -177,51 +212,131 @@ export default function Features() {
               ),
             }}
           >
-            Features
+            Workspace
           </Badge>
           <h2
             id='features-heading'
-            className='font-[430] font-season text-[#1C1C1C] text-[40px] leading-[100%] tracking-[-0.02em]'
+            className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[28px] leading-[110%] tracking-[-0.02em] md:text-[40px]'
           >
-            Power your AI workforce
+            {HEADING_LETTERS.map((char, i) => (
+              <ScrollLetter key={i} scrollYProgress={scrollYProgress} charIndex={i}>
+                {char}
+              </ScrollLetter>
+            ))}
+            <span className='text-[#1C1C1C]/40'>
+              Design powerful workflows, connect your data, and monitor every run — all in one
+              platform.
+            </span>
           </h2>
         </div>
 
-        <div className='mt-[73px] flex h-[68px] overflow-hidden border border-[#E9E9E9]'>
-          <DotGrid cols={10} rows={8} width={80} />
+        <div className='relative mt-[40px] pb-[40px] lg:mt-[73px] lg:pb-[80px]'>
+          <div
+            aria-hidden='true'
+            className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[#E9E9E9] lg:block'
+          />
+          <div
+            aria-hidden='true'
+            className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[#E9E9E9] lg:block'
+          />
 
-          <div role='tablist' aria-label='Feature categories' className='flex flex-1'>
-            {FEATURE_TABS.map((tab, index) => (
-              <button
-                key={tab.label}
-                type='button'
-                role='tab'
-                aria-selected={index === activeTab}
-                onClick={() => setActiveTab(index)}
-                className='relative flex h-full flex-1 items-center justify-center border-[#E9E9E9] border-l font-medium font-season text-[#212121] text-[14px] uppercase'
-                style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
-              >
-                {tab.label}
-                {index === activeTab && (
-                  <div className='absolute right-0 bottom-0 left-0 flex h-[6px]'>
-                    {tab.segments.map(([opacity, width], i) => (
-                      <div
-                        key={i}
-                        className='h-full shrink-0'
-                        style={{
-                          width: `${width}%`,
-                          backgroundColor: tab.color,
-                          opacity,
-                        }}
-                      />
-                    ))}
-                  </div>
-                )}
-              </button>
-            ))}
+          <div className='flex h-[68px] border border-[#E9E9E9] lg:overflow-hidden'>
+            <div className='h-full shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid cols={3} rows={8} width={24} />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid cols={10} rows={8} width={80} />
+              </div>
+            </div>
+
+            <div role='tablist' aria-label='Feature categories' className='flex flex-1'>
+              {FEATURE_TABS.map((tab, index) => (
+                <button
+                  key={tab.label}
+                  type='button'
+                  role='tab'
+                  aria-selected={index === activeTab}
+                  onClick={() => setActiveTab(index)}
+                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
+                  style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
+                >
+                  {tab.mobileLabel ? (
+                    <>
+                      <span className='lg:hidden'>{tab.mobileLabel}</span>
+                      <span className='hidden lg:inline'>{tab.label}</span>
+                    </>
+                  ) : (
+                    tab.label
+                  )}
+                  {index === activeTab && (
+                    <div className='absolute right-0 bottom-0 left-0 flex h-[6px]'>
+                      {tab.segments.map(([opacity, width], i) => (
+                        <div
+                          key={i}
+                          className='h-full shrink-0'
+                          style={{
+                            width: `${width}%`,
+                            backgroundColor: tab.color,
+                            opacity,
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+
+            <div className='h-full shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid cols={3} rows={8} width={24} />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid cols={10} rows={8} width={80} />
+              </div>
+            </div>
           </div>
 
-          <DotGrid cols={10} rows={8} width={80} borderLeft />
+          <div className='mt-[32px] flex flex-col gap-[24px] px-[24px] lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
+            <div className='flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
+              <div className='flex flex-col items-start gap-[16px]'>
+                <h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
+                  {FEATURE_TABS[activeTab].title}
+                </h3>
+                <p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+                  {FEATURE_TABS[activeTab].description}
+                </p>
+              </div>
+              <Link
+                href='/signup'
+                className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
+              >
+                {FEATURE_TABS[activeTab].cta}
+                <span className='relative h-[10px] w-[10px] shrink-0'>
+                  <ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
+                  <svg
+                    className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
+                    viewBox='0 0 10 10'
+                    fill='none'
+                  >
+                    <path
+                      d='M1 5H8M5.5 2L8.5 5L5.5 8'
+                      stroke='currentColor'
+                      strokeWidth='1.33'
+                      strokeLinecap='square'
+                      strokeLinejoin='miter'
+                      fill='none'
+                    />
+                  </svg>
+                </span>
+              </Link>
+            </div>
+
+            <FeaturesPreview activeTab={activeTab} />
+          </div>
+
+          <div aria-hidden='true' className='mt-[60px] hidden h-px bg-[#E9E9E9] lg:block' />
         </div>
       </div>
     </section>

apps/sim/app/(home)/components/footer/footer-cta.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { useCallback, useRef, useState } from 'react'
+import { ArrowUp } from 'lucide-react'
+import Link from 'next/link'
+import { useLandingSubmit } from '@/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
+import { useAnimatedPlaceholder } from '@/app/workspace/[workspaceId]/home/hooks/use-animated-placeholder'
+
+const MAX_HEIGHT = 120
+
+const CTA_BUTTON =
+  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+
+export function FooterCTA() {
+  const landingSubmit = useLandingSubmit()
+  const [inputValue, setInputValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const animatedPlaceholder = useAnimatedPlaceholder()
+
+  const isEmpty = inputValue.trim().length === 0
+
+  const handleSubmit = useCallback(() => {
+    if (isEmpty) return
+    landingSubmit(inputValue)
+  }, [isEmpty, inputValue, landingSubmit])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit]
+  )
+
+  const handleInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
+    const target = e.target as HTMLTextAreaElement
+    target.style.height = 'auto'
+    target.style.height = `${Math.min(target.scrollHeight, MAX_HEIGHT)}px`
+  }, [])
+
+  return (
+    <div className='flex flex-col items-center px-4 pt-[120px] pb-[100px] sm:px-8 md:px-[80px]'>
+      <h2 className='text-center font-[430] font-season text-[#1C1C1C] text-[28px] leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'>
+        What should we get done?
+      </h2>
+
+      <div className='mt-8 w-full max-w-[42rem]'>
+        <div
+          className='cursor-text rounded-[20px] border border-[#E5E5E5] bg-white px-[10px] py-[8px] shadow-sm'
+          onClick={() => textareaRef.current?.focus()}
+        >
+          <textarea
+            ref={textareaRef}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onInput={handleInput}
+            placeholder={animatedPlaceholder}
+            rows={2}
+            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-[4px] py-[4px] font-body text-[#1C1C1C] text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#999] focus-visible:ring-0'
+            style={{ caretColor: '#1C1C1C', maxHeight: `${MAX_HEIGHT}px` }}
+          />
+          <div className='flex items-center justify-end'>
+            <button
+              type='button'
+              onClick={handleSubmit}
+              disabled={isEmpty}
+              className='flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
+              style={{
+                background: isEmpty ? '#C0C0C0' : '#1C1C1C',
+                cursor: isEmpty ? 'not-allowed' : 'pointer',
+              }}
+            >
+              <ArrowUp size={16} strokeWidth={2.25} color='#FFFFFF' />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className='mt-8 flex gap-[8px]'>
+        <a
+          href='https://docs.sim.ai'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={`${CTA_BUTTON} border-[#D4D4D4] text-[#1C1C1C] transition-colors hover:bg-[#E8E8E8]`}
+        >
+          Docs
+        </a>
+        <Link
+          href='/signup'
+          className={`${CTA_BUTTON} gap-[8px] border-[#1C1C1C] bg-[#1C1C1C] text-white transition-colors hover:border-[#333] hover:bg-[#333]`}
+        >
+          Get started
+        </Link>
+      </div>
+    </div>
+  )
+}

apps/sim/app/(home)/components/footer/footer.tsx

@@ -1,18 +1,166 @@
-/**
- * Landing page footer — navigation, legal links, and entity reinforcement.
- *
- * SEO:
- * - `<footer role="contentinfo">` with `<nav aria-label="Footer navigation">`.
- * - Link groups under semantic headings (`<h3>`). All links are `<Link>` or `<a>` with `href`.
- * - External links include `rel="noopener noreferrer"`.
- * - Legal links (Privacy, Terms) must be crawlable (trust signals).
- *
- * GEO:
- * - Include "Sim — Build AI agents and run your agentic workforce" as visible text (entity reinforcement).
- * - Social links (X, GitHub, LinkedIn, Discord) must match `sameAs` in structured-data.tsx.
- * - Link to all major pages: Docs, Pricing, Enterprise, Careers, Changelog (internal link graph).
- * - Display compliance badges (SOC2, HIPAA) and status page link as visible trust signals.
- */
-export default function Footer() {
-  return null
+import Image from 'next/image'
+import Link from 'next/link'
+import { FooterCTA } from '@/app/(home)/components/footer/footer-cta'
+
+const LINK_CLASS = 'text-[14px] text-[#999] transition-colors hover:text-[#ECECEC]'
+
+interface FooterItem {
+  label: string
+  href: string
+  external?: boolean
+}
+
+const PRODUCT_LINKS: FooterItem[] = [
+  { label: 'Pricing', href: '#pricing' },
+  { label: 'Enterprise', href: 'https://form.typeform.com/to/jqCO12pF', external: true },
+  { label: 'Self Hosting', href: 'https://docs.sim.ai/self-hosting', external: true },
+  { label: 'MCP', href: 'https://docs.sim.ai/mcp', external: true },
+  { label: 'Status', href: 'https://status.sim.ai', external: true },
+]
+
+const RESOURCES_LINKS: FooterItem[] = [
+  { label: 'Blog', href: '/blog' },
+  { label: 'Docs', href: 'https://docs.sim.ai', external: true },
+  { label: 'Careers', href: 'https://jobs.ashbyhq.com/sim', external: true },
+  { label: 'Changelog', href: '/changelog' },
+]
+
+const BLOCK_LINKS: FooterItem[] = [
+  { label: 'Agent', href: 'https://docs.sim.ai/blocks/agent', external: true },
+  { label: 'Router', href: 'https://docs.sim.ai/blocks/router', external: true },
+  { label: 'Function', href: 'https://docs.sim.ai/blocks/function', external: true },
+  { label: 'Condition', href: 'https://docs.sim.ai/blocks/condition', external: true },
+  { label: 'API', href: 'https://docs.sim.ai/blocks/api', external: true },
+  { label: 'Workflow', href: 'https://docs.sim.ai/blocks/workflow', external: true },
+  { label: 'Parallel', href: 'https://docs.sim.ai/blocks/parallel', external: true },
+  { label: 'Guardrails', href: 'https://docs.sim.ai/blocks/guardrails', external: true },
+  { label: 'Evaluator', href: 'https://docs.sim.ai/blocks/evaluator', external: true },
+  { label: 'Loop', href: 'https://docs.sim.ai/blocks/loop', external: true },
+]
+
+const INTEGRATION_LINKS: FooterItem[] = [
+  { label: 'Confluence', href: 'https://docs.sim.ai/tools/confluence', external: true },
+  { label: 'Slack', href: 'https://docs.sim.ai/tools/slack', external: true },
+  { label: 'GitHub', href: 'https://docs.sim.ai/tools/github', external: true },
+  { label: 'Gmail', href: 'https://docs.sim.ai/tools/gmail', external: true },
+  { label: 'HubSpot', href: 'https://docs.sim.ai/tools/hubspot', external: true },
+  { label: 'Salesforce', href: 'https://docs.sim.ai/tools/salesforce', external: true },
+  { label: 'Notion', href: 'https://docs.sim.ai/tools/notion', external: true },
+  { label: 'Google Drive', href: 'https://docs.sim.ai/tools/google_drive', external: true },
+  { label: 'Google Sheets', href: 'https://docs.sim.ai/tools/google_sheets', external: true },
+  { label: 'Supabase', href: 'https://docs.sim.ai/tools/supabase', external: true },
+  { label: 'Stripe', href: 'https://docs.sim.ai/tools/stripe', external: true },
+  { label: 'Jira', href: 'https://docs.sim.ai/tools/jira', external: true },
+  { label: 'Linear', href: 'https://docs.sim.ai/tools/linear', external: true },
+  { label: 'Airtable', href: 'https://docs.sim.ai/tools/airtable', external: true },
+  { label: 'Firecrawl', href: 'https://docs.sim.ai/tools/firecrawl', external: true },
+  { label: 'Pinecone', href: 'https://docs.sim.ai/tools/pinecone', external: true },
+  { label: 'Discord', href: 'https://docs.sim.ai/tools/discord', external: true },
+  { label: 'Microsoft Teams', href: 'https://docs.sim.ai/tools/microsoft_teams', external: true },
+  { label: 'Outlook', href: 'https://docs.sim.ai/tools/outlook', external: true },
+  { label: 'Telegram', href: 'https://docs.sim.ai/tools/telegram', external: true },
+]
+
+const SOCIAL_LINKS: FooterItem[] = [
+  { label: 'X (Twitter)', href: 'https://x.com/simdotai', external: true },
+  { label: 'LinkedIn', href: 'https://www.linkedin.com/company/simstudioai/', external: true },
+  { label: 'Discord', href: 'https://discord.gg/Hr4UWYEcTT', external: true },
+  { label: 'GitHub', href: 'https://github.com/simstudioai/sim', external: true },
+]
+
+const LEGAL_LINKS: FooterItem[] = [
+  { label: 'Terms of Service', href: '/terms' },
+  { label: 'Privacy Policy', href: '/privacy' },
+]
+
+function FooterColumn({ title, items }: { title: string; items: FooterItem[] }) {
+  return (
+    <div>
+      <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>{title}</h3>
+      <div className='flex flex-col gap-[10px]'>
+        {items.map(({ label, href, external }) =>
+          external ? (
+            <a
+              key={label}
+              href={href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className={LINK_CLASS}
+            >
+              {label}
+            </a>
+          ) : (
+            <Link key={label} href={href} className={LINK_CLASS}>
+              {label}
+            </Link>
+          )
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface FooterProps {
+  hideCTA?: boolean
+}
+
+export default function Footer({ hideCTA }: FooterProps) {
+  return (
+    <footer
+      role='contentinfo'
+      className={`bg-[#F6F6F6] pb-[40px] font-[430] font-season text-[14px]${hideCTA ? ' pt-[40px]' : ''}`}
+    >
+      {!hideCTA && <FooterCTA />}
+      <div className='px-4 sm:px-8 md:px-[80px]'>
+        <div className='relative overflow-hidden rounded-lg bg-[#1C1C1C] px-6 pt-[40px] pb-[32px] sm:px-10 sm:pt-[48px] sm:pb-[40px]'>
+          <nav
+            aria-label='Footer navigation'
+            className='relative z-[1] grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-7'
+          >
+            <div className='col-span-2 flex flex-col gap-[24px] sm:col-span-1'>
+              <Link href='/' aria-label='Sim home'>
+                <Image
+                  src='/logo/sim-landing.svg'
+                  alt='Sim'
+                  width={85}
+                  height={26}
+                  className='h-[26.4px] w-auto'
+                />
+              </Link>
+            </div>
+
+            <FooterColumn title='Product' items={PRODUCT_LINKS} />
+            <FooterColumn title='Resources' items={RESOURCES_LINKS} />
+            <FooterColumn title='Blocks' items={BLOCK_LINKS} />
+            <FooterColumn title='Integrations' items={INTEGRATION_LINKS} />
+            <FooterColumn title='Socials' items={SOCIAL_LINKS} />
+            <FooterColumn title='Legal' items={LEGAL_LINKS} />
+          </nav>
+
+          {/* <svg
+            aria-hidden='true'
+            className='pointer-events-none absolute bottom-0 left-[-60px] hidden w-[85%] sm:block'
+            viewBox='0 0 1800 316'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path
+              d='M18.3562 305V48.95A30.594 30.594 0 0 1 48.95 18.356H917.05A30.594 30.594 0 0 1 947.644 48.95V273H1768C1777.11 273 1784.5 280.387 1784.5 289.5C1784.5 298.613 1777.11 306 1768 306H96.8603C78.635 306 63.8604 310 63.8604 305H18.3562'
+              stroke='#2A2A2A'
+              strokeWidth='2'
+            />
+            <rect
+              x='58'
+              y='58'
+              width='849.288'
+              height='199.288'
+              rx='14'
+              stroke='#2A2A2A'
+              strokeWidth='2'
+            />
+          </svg> */}
+        </div>
+      </div>
+    </footer>
+  )
 }

apps/sim/app/(home)/components/hero/hero.tsx

@@ -34,7 +34,7 @@ export default function Hero() {
     <section
       id='hero'
       aria-labelledby='hero-heading'
-      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[71px]'
+      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[60px] pb-[12px] lg:pt-[100px]'
     >
       <p className='sr-only'>
         Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
@@ -53,7 +53,7 @@ export default function Hero() {
 
       <div
         aria-hidden='true'
-        className='pointer-events-none absolute top-[-2.8vw] right-[0vw] z-0 aspect-[471/470] w-[32.7vw]'
+        className='pointer-events-none absolute top-[-2.8vw] right-[-4vw] z-0 aspect-[471/470] w-[32.7vw]'
       >
         <Image src='/landing/card-right.svg' alt='' fill className='object-contain' />
       </div>
@@ -61,25 +61,27 @@ export default function Hero() {
       <div className='relative z-10 flex flex-col items-center gap-[12px]'>
         <h1
           id='hero-heading'
-          className='font-[430] font-season text-[64px] text-white leading-[100%] tracking-[-0.02em]'
+          className='font-[430] font-season text-[36px] text-white leading-[100%] tracking-[-0.02em] sm:text-[48px] lg:text-[72px]'
         >
-          Build Agents
+          Build AI Agents
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[16px] leading-[125%] tracking-[0.02em]'>
-          Build and deploy agentic workflows
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[15px] leading-[125%] tracking-[0.02em] lg:text-[18px]'>
+          Sim is the AI Workspace for Agent Builders.
         </p>
 
         <div className='mt-[12px] flex items-center gap-[8px]'>
-          <Link
-            href='/login'
+          <a
+            href='https://form.typeform.com/to/jqCO12pF'
+            target='_blank'
+            rel='noopener noreferrer'
             className={`${CTA_BASE} border-[#3d3d3d] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]`}
-            aria-label='Log in'
+            aria-label='Get a demo'
           >
-            Log in
-          </Link>
+            Get a demo
+          </a>
           <Link
             href='/signup'
-            className={`${CTA_BASE} gap-[8px] border-[#33C482] bg-[#33C482] text-black transition-[filter] hover:brightness-110`}
+            className={`${CTA_BASE} gap-[8px] border-[#FFFFFF] bg-[#FFFFFF] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
             aria-label='Get started with Sim'
           >
             Get started
@@ -101,7 +103,7 @@ export default function Hero() {
         <BlocksTopLeftAnimated animState={blockStates.topLeft} />
       </div>
 
-      <div className='relative z-10 mx-auto mt-[2.4vw] w-[78.9vw] px-[1.4vw]'>
+      <div className='relative z-10 mx-auto mt-[3.2vw] w-[78.9vw] px-[1.4vw]'>
         <div
           aria-hidden='true'
           className='-translate-y-1/2 pointer-events-none absolute top-[50%] right-[calc(100%-1.41vw)] z-20 w-[calc(16px_+_1.25vw)] max-w-[34px]'

apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { memo, useCallback, useRef, useState } from 'react'
+import { ArrowUp } from 'lucide-react'
+import { useLandingSubmit } from '@/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
+import { useAnimatedPlaceholder } from '@/app/workspace/[workspaceId]/home/hooks/use-animated-placeholder'
+
+const C = {
+  SURFACE: '#292929',
+  BORDER: '#3d3d3d',
+  TEXT_PRIMARY: '#e6e6e6',
+} as const
+
+/**
+ * Landing preview replica of the workspace Home initial view.
+ * Shows a greeting heading and a minimal chat input (no + or mic).
+ * On submit, stores the prompt and redirects to /signup.
+ */
+export const LandingPreviewHome = memo(function LandingPreviewHome() {
+  const landingSubmit = useLandingSubmit()
+  const [inputValue, setInputValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const animatedPlaceholder = useAnimatedPlaceholder()
+
+  const isEmpty = inputValue.trim().length === 0
+
+  const handleSubmit = useCallback(() => {
+    if (isEmpty) return
+    landingSubmit(inputValue)
+  }, [isEmpty, inputValue, landingSubmit])
+
+  const MAX_HEIGHT = 200
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit]
+  )
+
+  const handleInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
+    const target = e.target as HTMLTextAreaElement
+    target.style.height = 'auto'
+    target.style.height = `${Math.min(target.scrollHeight, MAX_HEIGHT)}px`
+  }, [])
+
+  return (
+    <div className='flex min-w-0 flex-1 flex-col items-center justify-center px-[24px] pb-[2vh]'>
+      <h1
+        className='mb-[24px] max-w-[42rem] font-[430] font-season text-[32px] tracking-[-0.02em]'
+        style={{ color: C.TEXT_PRIMARY }}
+      >
+        What should we get done?
+      </h1>
+
+      <div className='w-full max-w-[32rem]'>
+        <div
+          className='cursor-text rounded-[20px] border px-[10px] py-[8px]'
+          style={{ borderColor: C.BORDER, backgroundColor: C.SURFACE }}
+          onClick={() => textareaRef.current?.focus()}
+        >
+          <textarea
+            ref={textareaRef}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onInput={handleInput}
+            placeholder={animatedPlaceholder}
+            rows={1}
+            className='m-0 box-border min-h-[24px] w-full resize-none overflow-y-auto border-0 bg-transparent px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#787878] focus-visible:ring-0'
+            style={{
+              color: C.TEXT_PRIMARY,
+              caretColor: C.TEXT_PRIMARY,
+              maxHeight: `${MAX_HEIGHT}px`,
+            }}
+          />
+          <div className='flex items-center justify-end'>
+            <button
+              type='button'
+              onClick={handleSubmit}
+              disabled={isEmpty}
+              className='flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
+              style={{
+                background: isEmpty ? '#808080' : '#e0e0e0',
+                cursor: isEmpty ? 'not-allowed' : 'pointer',
+              }}
+            >
+              <ArrowUp size={16} strokeWidth={2.25} color='#1b1b1b' />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})

apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx

@@ -8,6 +8,23 @@ import { createPortal } from 'react-dom'
 import { BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 
+/**
+ * Stores the prompt in browser storage and redirects to /signup.
+ * Shared by both the copilot panel and the landing home view.
+ */
+export function useLandingSubmit() {
+  const router = useRouter()
+  return useCallback(
+    (text: string) => {
+      const trimmed = text.trim()
+      if (!trimmed) return
+      LandingPromptStorage.store(trimmed)
+      router.push('/signup')
+    },
+    [router]
+  )
+}
+
 /**
  * Lightweight static panel replicating the real workspace panel styling.
  * The copilot tab is active with a functional user input.
@@ -18,7 +35,7 @@ import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
  *     inside Content > Copilot > header-bar(mx-[-1px]) > UserInput(p-8)
  */
 export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
-  const router = useRouter()
+  const landingSubmit = useLandingSubmit()
   const [inputValue, setInputValue] = useState('')
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
@@ -27,9 +44,8 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
 
   const handleSubmit = useCallback(() => {
     if (isEmpty) return
-    LandingPromptStorage.store(inputValue)
-    router.push('/signup')
-  }, [isEmpty, inputValue, router])
+    landingSubmit(inputValue)
+  }, [isEmpty, inputValue, landingSubmit])
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -60,10 +76,10 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
             onMouseMove={(e) => setCursorPos({ x: e.clientX, y: e.clientY })}
             onMouseLeave={() => setCursorPos(null)}
           >
-            <div className='flex h-[30px] items-center rounded-[5px] bg-[#32bd7e] px-[10px] transition-[filter] hover:brightness-110'>
+            <div className='flex h-[30px] items-center rounded-[5px] bg-[#33C482] px-[10px] transition-colors hover:bg-[#2DAC72]'>
               <span className='font-medium text-[#1b1b1b] text-[12px]'>Deploy</span>
             </div>
-            <div className='flex h-[30px] items-center gap-[8px] rounded-[5px] bg-[#32bd7e] px-[10px] transition-[filter] hover:brightness-110'>
+            <div className='flex h-[30px] items-center gap-[8px] rounded-[5px] bg-[#33C482] px-[10px] transition-colors hover:bg-[#2DAC72]'>
               <Play className='h-[11.5px] w-[11.5px] text-[#1b1b1b]' />
               <span className='font-medium text-[#1b1b1b] text-[12px]'>Run</span>
             </div>

apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx

@@ -1,141 +1,204 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Database, Layout, Search, Settings } from 'lucide-react'
-import { ChevronDown, Library } from '@/components/emcn'
+import { ChevronDown, Home, Library } from '@/components/emcn'
+import {
+  Calendar,
+  Database,
+  File,
+  HelpCircle,
+  Search,
+  Settings,
+  Table,
+} from '@/components/emcn/icons'
 import type { PreviewWorkflow } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
 
-/**
- * Props for the LandingPreviewSidebar component
- */
 interface LandingPreviewSidebarProps {
   workflows: PreviewWorkflow[]
   activeWorkflowId: string
+  activeView: 'home' | 'workflow'
   onSelectWorkflow: (id: string) => void
+  onSelectHome: () => void
 }
 
 /**
- * Static footer navigation items matching the real sidebar
+ * Hardcoded dark-theme equivalents of the real sidebar CSS variables.
+ * The preview lives inside a `dark` wrapper but CSS variable cascade
+ * isn't guaranteed, so we pin the hex values directly.
  */
-const FOOTER_NAV_ITEMS = [
-  { id: 'logs', label: 'Logs', icon: Library },
-  { id: 'templates', label: 'Templates', icon: Layout },
+const C = {
+  SURFACE_1: '#1e1e1e',
+  SURFACE_2: '#252525',
+  SURFACE_ACTIVE: '#363636',
+  BORDER: '#2c2c2c',
+  TEXT_PRIMARY: '#e6e6e6',
+  TEXT_BODY: '#cdcdcd',
+  TEXT_ICON: '#939393',
+  BRAND: '#33C482',
+} as const
+
+const WORKSPACE_NAV = [
+  { id: 'tables', label: 'Tables', icon: Table },
+  { id: 'files', label: 'Files', icon: File },
   { id: 'knowledge-base', label: 'Knowledge Base', icon: Database },
+  { id: 'scheduled-tasks', label: 'Scheduled Tasks', icon: Calendar },
+  { id: 'logs', label: 'Logs', icon: Library },
+] as const
+
+const FOOTER_NAV = [
+  { id: 'help', label: 'Help', icon: HelpCircle },
   { id: 'settings', label: 'Settings', icon: Settings },
 ] as const
 
+function StaticNavItem({
+  icon: Icon,
+  label,
+}: {
+  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
+  label: string
+}) {
+  return (
+    <div className='pointer-events-none mx-[2px] flex h-[28px] items-center gap-[8px] rounded-[8px] px-[8px]'>
+      <Icon className='h-[14px] w-[14px] flex-shrink-0' style={{ color: C.TEXT_ICON }} />
+      <span className='truncate text-[13px]' style={{ color: C.TEXT_BODY, fontWeight: 450 }}>
+        {label}
+      </span>
+    </div>
+  )
+}
+
 /**
- * Lightweight static sidebar replicating the real workspace sidebar styling.
+ * Lightweight sidebar replicating the real workspace sidebar layout and sizing.
+ * Starts from the workspace header (no logo/collapse row).
  * Only workflow items are interactive — everything else is pointer-events-none.
- *
- * Colors sourced from the dark theme CSS variables:
- * --surface-1: #1e1e1e, --surface-5: #363636, --border: #2c2c2c, --border-1: #3d3d3d
- * --text-primary: #e6e6e6, --text-tertiary: #b3b3b3, --text-muted: #787878
  */
 export function LandingPreviewSidebar({
   workflows,
   activeWorkflowId,
+  activeView,
   onSelectWorkflow,
+  onSelectHome,
 }: LandingPreviewSidebarProps) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const handleToggle = useCallback(() => {
-    setIsDropdownOpen((prev) => !prev)
-  }, [])
-
-  useEffect(() => {
-    if (!isDropdownOpen) return
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setIsDropdownOpen(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [isDropdownOpen])
+  const isHomeActive = activeView === 'home'
 
   return (
-    <div className='flex h-full w-[220px] flex-shrink-0 flex-col border-[#2c2c2c] border-r bg-[#1e1e1e]'>
-      {/* Header */}
-      <div className='relative flex-shrink-0 px-[14px] pt-[12px]' ref={dropdownRef}>
-        <div className='flex items-center justify-between'>
-          <button
-            type='button'
-            onClick={handleToggle}
-            className='group -mx-[6px] flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[#363636]'
+    <div
+      className='flex h-full w-[248px] flex-shrink-0 flex-col pt-[12px]'
+      style={{ backgroundColor: C.SURFACE_1 }}
+    >
+      {/* Workspace Header */}
+      <div className='flex-shrink-0 px-[10px]'>
+        <div
+          className='pointer-events-none flex h-[32px] w-full items-center gap-[8px] rounded-[8px] border pr-[8px] pl-[5px]'
+          style={{ borderColor: C.BORDER, backgroundColor: C.SURFACE_2 }}
+        >
+          <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] bg-white'>
+            <svg width='10' height='10' viewBox='0 0 10 10' fill='none'>
+              <path
+                d='M1 9C1 4.58 4.58 1 9 1'
+                stroke='#1e1e1e'
+                strokeWidth='1.8'
+                strokeLinecap='round'
+              />
+            </svg>
+          </div>
+          <span
+            className='min-w-0 flex-1 truncate text-left font-medium text-[13px]'
+            style={{ color: C.TEXT_PRIMARY }}
           >
-            <span className='truncate font-base text-[#e6e6e6] text-[14px]'>My Workspace</span>
-            <ChevronDown
-              className={`h-[8px] w-[10px] flex-shrink-0 text-[#787878] transition-all duration-100 group-hover:text-[#cccccc] ${isDropdownOpen ? 'rotate-180' : ''}`}
-            />
-          </button>
-          <div className='pointer-events-none flex flex-shrink-0 items-center'>
-            <Search className='h-[14px] w-[14px] text-[#787878]' />
+            Superark
+          </span>
+          <ChevronDown className='h-[8px] w-[10px] flex-shrink-0' style={{ color: C.TEXT_ICON }} />
+        </div>
+      </div>
+
+      {/* Top Navigation: Home (interactive), Search (static) */}
+      <div className='mt-[10px] flex flex-shrink-0 flex-col gap-[2px] px-[8px]'>
+        <button
+          type='button'
+          onClick={onSelectHome}
+          className='mx-[2px] flex h-[28px] items-center gap-[8px] rounded-[8px] px-[8px] transition-colors'
+          style={{ backgroundColor: isHomeActive ? C.SURFACE_ACTIVE : 'transparent' }}
+          onMouseEnter={(e) => {
+            if (!isHomeActive) e.currentTarget.style.backgroundColor = C.SURFACE_ACTIVE
+          }}
+          onMouseLeave={(e) => {
+            if (!isHomeActive) e.currentTarget.style.backgroundColor = 'transparent'
+          }}
+        >
+          <Home className='h-[14px] w-[14px] flex-shrink-0' style={{ color: C.TEXT_ICON }} />
+          <span className='truncate text-[13px]' style={{ color: C.TEXT_BODY, fontWeight: 450 }}>
+            Home
+          </span>
+        </button>
+        <StaticNavItem icon={Search} label='Search' />
+      </div>
+
+      {/* Workspace */}
+      <div className='mt-[14px] flex flex-shrink-0 flex-col'>
+        <div className='px-[16px] pb-[6px]'>
+          <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
+            Workspace
           </div>
         </div>
+        <div className='flex flex-col gap-[2px] px-[8px]'>
+          {WORKSPACE_NAV.map((item) => (
+            <StaticNavItem key={item.id} icon={item.icon} label={item.label} />
+          ))}
+        </div>
+      </div>
 
-        {/* Workspace switcher dropdown */}
-        {isDropdownOpen && (
-          <div className='absolute top-[42px] left-[8px] z-50 min-w-[160px] max-w-[160px] rounded-[6px] bg-[#242424] px-[6px] py-[6px] shadow-lg'>
-            <div
-              className='flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[6px] bg-[#3d3d3d] px-[6px] font-base text-[#e6e6e6] text-[13px]'
-              role='menuitem'
-              onClick={() => setIsDropdownOpen(false)}
-            >
-              <span className='min-w-0 flex-1 truncate'>My Workspace</span>
+      {/* Scrollable Tasks + Workflows */}
+      <div className='flex flex-1 flex-col overflow-y-auto overflow-x-hidden pt-[14px]'>
+        {/* Workflows */}
+        <div className='flex flex-col'>
+          <div className='px-[16px]'>
+            <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
+              Workflows
             </div>
           </div>
-        )}
-      </div>
-
-      {/* Workflow items */}
-      <div className='mt-[8px] space-y-[2px] overflow-x-hidden px-[8px]'>
-        {workflows.map((workflow) => {
-          const isActive = workflow.id === activeWorkflowId
-          return (
-            <button
-              key={workflow.id}
-              type='button'
-              onClick={() => onSelectWorkflow(workflow.id)}
-              className={`group flex h-[26px] w-full items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] transition-colors ${
-                isActive ? 'bg-[#363636]' : 'bg-transparent hover:bg-[#363636]'
-              }`}
-            >
-              <div
-                className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px]'
-                style={{ backgroundColor: workflow.color }}
-              />
-              <div className='min-w-0 flex-1'>
-                <div
-                  className={`min-w-0 truncate text-left font-medium ${
-                    isActive ? 'text-[#e6e6e6]' : 'text-[#b3b3b3] group-hover:text-[#e6e6e6]'
-                  }`}
+          <div className='mt-[6px] flex flex-col gap-[2px] px-[8px]'>
+            {workflows.map((workflow) => {
+              const isActive = activeView === 'workflow' && workflow.id === activeWorkflowId
+              return (
+                <button
+                  key={workflow.id}
+                  type='button'
+                  onClick={() => onSelectWorkflow(workflow.id)}
+                  className='group mx-[2px] flex h-[28px] w-full items-center gap-[8px] rounded-[8px] px-[8px] transition-colors'
+                  style={{ backgroundColor: isActive ? C.SURFACE_ACTIVE : 'transparent' }}
+                  onMouseEnter={(e) => {
+                    if (!isActive) e.currentTarget.style.backgroundColor = C.SURFACE_ACTIVE
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'
+                  }}
                 >
-                  {workflow.name}
-                </div>
-              </div>
-            </button>
-          )
-        })}
+                  <div
+                    className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px] border-[2.5px]'
+                    style={{
+                      backgroundColor: workflow.color,
+                      borderColor: `${workflow.color}60`,
+                      backgroundClip: 'padding-box',
+                    }}
+                  />
+                  <div
+                    className='min-w-0 flex-1 truncate text-left text-[13px]'
+                    style={{ color: C.TEXT_BODY, fontWeight: 450 }}
+                  >
+                    {workflow.name}
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        </div>
       </div>
 
-      {/* Footer navigation — static */}
-      <div className='pointer-events-none mt-auto flex flex-shrink-0 flex-col gap-[2px] border-[#2c2c2c] border-t px-[7.75px] pt-[8px] pb-[8px]'>
-        {FOOTER_NAV_ITEMS.map((item) => {
-          const Icon = item.icon
-          return (
-            <div
-              key={item.id}
-              className='flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]'
-            >
-              <Icon className='h-[14px] w-[14px] flex-shrink-0 text-[#b3b3b3]' />
-              <span className='truncate font-medium text-[#b3b3b3] text-[13px]'>{item.label}</span>
-            </div>
-          )
-        })}
+      {/* Footer */}
+      <div className='flex flex-shrink-0 flex-col gap-[2px] px-[8px] pt-[9px] pb-[8px]'>
+        {FOOTER_NAV.map((item) => (
+          <StaticNavItem key={item.id} icon={item.icon} label={item.label} />
+        ))}
       </div>
     </div>
   )

apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react'
 import { motion } from 'framer-motion'
 import { Database } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
+import { Blimp } from '@/components/emcn'
 import {
   AgentIcon,
   AnthropicIcon,
@@ -13,6 +14,7 @@ import {
   GmailIcon,
   GoogleCalendarIcon,
   GoogleSheetsIcon,
+  HubspotIcon,
   JiraIcon,
   LinearIcon,
   LinkedInIcon,
@@ -21,6 +23,7 @@ import {
   OpenAIIcon,
   RedditIcon,
   ReductoIcon,
+  SalesforceIcon,
   ScheduleIcon,
   SlackIcon,
   StartIcon,
@@ -56,13 +59,16 @@ const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   google_calendar: GoogleCalendarIcon,
   gmail: GmailIcon,
   google_sheets: GoogleSheetsIcon,
+  hubspot: HubspotIcon,
   linear: LinearIcon,
   firecrawl: FirecrawlIcon,
   reddit: RedditIcon,
   notion: NotionIcon,
   reducto: ReductoIcon,
+  salesforce: SalesforceIcon,
   textract: TextractIcon,
   linkedin: LinkedInIcon,
+  mothership: Blimp,
 }
 
 /** Model prefix → provider icon for the "Model" row in agent blocks. */

apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts

@@ -91,11 +91,11 @@ const IT_SERVICE_WORKFLOW: PreviewWorkflow = {
 }
 
 /**
- * Content pipeline workflow — Schedule -> Agent (X + YouTube tools)
+ * Self-healing CRM workflow — Schedule -> Mothership
  */
-const CONTENT_PIPELINE_WORKFLOW: PreviewWorkflow = {
-  id: 'wf-content-pipeline',
-  name: 'Content Pipeline',
+const SELF_HEALING_CRM_WORKFLOW: PreviewWorkflow = {
+  id: 'wf-self-healing-crm',
+  name: 'Self-healing CRM',
   color: '#33C482',
   blocks: [
     {
@@ -111,23 +111,20 @@ const CONTENT_PIPELINE_WORKFLOW: PreviewWorkflow = {
       hideTargetHandle: true,
     },
     {
-      id: 'agent-2',
-      name: 'Agent',
-      type: 'agent',
-      bgColor: '#701ffc',
-      rows: [
-        { title: 'Model', value: 'grok-4' },
-        { title: 'System Prompt', value: 'Repurpose trending...' },
-      ],
+      id: 'mothership-1',
+      name: 'CRM Agent',
+      type: 'mothership',
+      bgColor: '#33C482',
+      rows: [{ title: 'Prompt', value: 'Audit CRM records, fix...' }],
       tools: [
-        { name: 'X', type: 'x', bgColor: '#000000' },
-        { name: 'YouTube', type: 'youtube', bgColor: '#FF0000' },
+        { name: 'HubSpot', type: 'hubspot', bgColor: '#FF7A59' },
+        { name: 'Salesforce', type: 'salesforce', bgColor: '#E0E0E0' },
       ],
       position: { x: 420, y: 180 },
       hideSourceHandle: true,
     },
   ],
-  edges: [{ id: 'e-3', source: 'schedule-1', target: 'agent-2' }],
+  edges: [{ id: 'e-3', source: 'schedule-1', target: 'mothership-1' }],
 }
 
 /**
@@ -154,7 +151,7 @@ const NEW_AGENT_WORKFLOW: PreviewWorkflow = {
 }
 
 export const PREVIEW_WORKFLOWS: PreviewWorkflow[] = [
-  CONTENT_PIPELINE_WORKFLOW,
+  SELF_HEALING_CRM_WORKFLOW,
   IT_SERVICE_WORKFLOW,
   NEW_AGENT_WORKFLOW,
 ]

apps/sim/app/(home)/components/landing-preview/landing-preview.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { motion, type Variants } from 'framer-motion'
+import { LandingPreviewHome } from '@/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home'
 import { LandingPreviewPanel } from '@/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
 import { LandingPreviewSidebar } from '@/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar'
 import { LandingPreviewWorkflow } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow'
@@ -56,6 +57,7 @@ const panelVariants: Variants = {
  * load — workflow switches render instantly.
  */
 export function LandingPreview() {
+  const [activeView, setActiveView] = useState<'home' | 'workflow'>('workflow')
   const [activeWorkflowId, setActiveWorkflowId] = useState(PREVIEW_WORKFLOWS[0].id)
   const isInitialMount = useRef(true)
 
@@ -63,12 +65,23 @@ export function LandingPreview() {
     isInitialMount.current = false
   }, [])
 
+  const handleSelectWorkflow = useCallback((id: string) => {
+    setActiveWorkflowId(id)
+    setActiveView('workflow')
+  }, [])
+
+  const handleSelectHome = useCallback(() => {
+    setActiveView('home')
+  }, [])
+
   const activeWorkflow =
     PREVIEW_WORKFLOWS.find((w) => w.id === activeWorkflowId) ?? PREVIEW_WORKFLOWS[0]
 
+  const isWorkflowView = activeView === 'workflow'
+
   return (
     <motion.div
-      className='dark flex aspect-[1116/549] w-full overflow-hidden rounded bg-[#1b1b1b] antialiased'
+      className='dark flex aspect-[1116/549] w-full overflow-hidden rounded bg-[#1e1e1e] antialiased'
       initial='hidden'
       animate='visible'
       variants={containerVariants}
@@ -77,15 +90,34 @@ export function LandingPreview() {
         <LandingPreviewSidebar
           workflows={PREVIEW_WORKFLOWS}
           activeWorkflowId={activeWorkflowId}
-          onSelectWorkflow={setActiveWorkflowId}
+          activeView={activeView}
+          onSelectWorkflow={handleSelectWorkflow}
+          onSelectHome={handleSelectHome}
         />
       </motion.div>
-      <div className='relative flex-1 overflow-hidden'>
-        <LandingPreviewWorkflow workflow={activeWorkflow} animate={isInitialMount.current} />
+      <div className='flex min-w-0 flex-1 flex-col py-[8px] pr-[8px] pl-[8px] lg:pl-0'>
+        <div className='flex flex-1 overflow-hidden rounded-[8px] border border-[#2c2c2c] bg-[#1b1b1b]'>
+          <div
+            className={
+              isWorkflowView
+                ? 'relative min-w-0 flex-1 overflow-hidden'
+                : 'relative flex min-w-0 flex-1 flex-col overflow-hidden'
+            }
+          >
+            {isWorkflowView ? (
+              <LandingPreviewWorkflow workflow={activeWorkflow} animate={isInitialMount.current} />
+            ) : (
+              <LandingPreviewHome />
+            )}
+          </div>
+          <motion.div
+            className={isWorkflowView ? 'hidden lg:flex' : 'hidden'}
+            variants={panelVariants}
+          >
+            <LandingPreviewPanel />
+          </motion.div>
+        </div>
       </div>
-      <motion.div className='hidden lg:flex' variants={panelVariants}>
-        <LandingPreviewPanel />
-      </motion.div>
     </motion.div>
   )
 }

apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx

@@ -0,0 +1,101 @@
+import Link from 'next/link'
+import { cn } from '@/lib/core/utils/cn'
+
+const FEATURED_POST = {
+  title: 'Build with Sim for Enterprise',
+  slug: 'enterprise',
+  image: '/blog/thumbnails/enterprise.webp',
+} as const
+
+const POSTS = [
+  { title: 'Introducing Sim v0.5', slug: 'v0-5', image: '/blog/thumbnails/v0-5.webp' },
+  { title: '$7M Series A', slug: 'series-a', image: '/blog/thumbnails/series-a.webp' },
+  {
+    title: 'Realtime Collaboration',
+    slug: 'multiplayer',
+    image: '/blog/thumbnails/multiplayer.webp',
+  },
+  { title: 'Inside the Executor', slug: 'executor', image: '/blog/thumbnails/executor.webp' },
+  { title: 'Inside Sim Copilot', slug: 'copilot', image: '/blog/thumbnails/copilot.webp' },
+] as const
+
+function BlogCard({
+  slug,
+  image,
+  title,
+  imageHeight,
+  titleSize = '12px',
+  className,
+}: {
+  slug: string
+  image: string
+  title: string
+  imageHeight: string
+  titleSize?: string
+  className?: string
+}) {
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      className={cn(
+        'group/card flex flex-col overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]',
+        className
+      )}
+      prefetch={false}
+    >
+      <div className='w-full overflow-hidden bg-[#141414]' style={{ height: imageHeight }}>
+        <img
+          src={image}
+          alt={title}
+          decoding='async'
+          className='h-full w-full object-cover transition-transform duration-200 group-hover/card:scale-[1.02]'
+        />
+      </div>
+      <div className='flex-shrink-0 px-[10px] py-[6px]'>
+        <span
+          className='font-[430] font-season text-[#cdcdcd] leading-[140%]'
+          style={{ fontSize: titleSize }}
+        >
+          {title}
+        </span>
+      </div>
+    </Link>
+  )
+}
+
+export function BlogDropdown() {
+  return (
+    <div className='w-[560px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
+      <div className='grid grid-cols-3 gap-[8px]'>
+        <BlogCard
+          slug={FEATURED_POST.slug}
+          image={FEATURED_POST.image}
+          title={FEATURED_POST.title}
+          imageHeight='190px'
+          titleSize='13px'
+          className='col-span-2 row-span-2'
+        />
+
+        {POSTS.slice(0, 2).map((post) => (
+          <BlogCard
+            key={post.slug}
+            slug={post.slug}
+            image={post.image}
+            title={post.title}
+            imageHeight='72px'
+          />
+        ))}
+
+        {POSTS.slice(2).map((post) => (
+          <BlogCard
+            key={post.slug}
+            slug={post.slug}
+            image={post.image}
+            title={post.title}
+            imageHeight='72px'
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx

@@ -0,0 +1,92 @@
+import { AgentIcon, GithubOutlineIcon, McpIcon } from '@/components/icons'
+
+const PREVIEW_CARDS = [
+  {
+    title: 'Introduction',
+    href: 'https://docs.sim.ai',
+    image: '/landing/docs-getting-started.svg',
+  },
+  {
+    title: 'Getting Started',
+    href: 'https://docs.sim.ai/getting-started',
+    image: '/landing/docs-intro.svg',
+  },
+] as const
+
+const RESOURCE_CARDS = [
+  {
+    title: 'Agent',
+    description: 'Build AI agents',
+    href: 'https://docs.sim.ai/blocks/agent',
+    icon: AgentIcon,
+  },
+  {
+    title: 'MCP',
+    description: 'Connect tools',
+    href: 'https://docs.sim.ai/mcp',
+    icon: McpIcon,
+  },
+  {
+    title: 'Self-hosting',
+    description: 'Host on your infra',
+    href: 'https://docs.sim.ai/self-hosting',
+    icon: GithubOutlineIcon,
+  },
+] as const
+
+export function DocsDropdown() {
+  return (
+    <div className='w-[480px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
+      <div className='grid grid-cols-2 gap-[10px]'>
+        {PREVIEW_CARDS.map((card) => (
+          <a
+            key={card.title}
+            href={card.href}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='group/card overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]'
+          >
+            <div className='h-[120px] w-full overflow-hidden bg-[#141414]'>
+              <img
+                src={card.image}
+                alt={card.title}
+                decoding='async'
+                className='h-full w-full scale-[1.04] object-cover transition-transform duration-200 group-hover/card:scale-[1.06]'
+              />
+            </div>
+            <div className='px-[10px] py-[8px]'>
+              <span className='font-[430] font-season text-[#cdcdcd] text-[13px]'>
+                {card.title}
+              </span>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      <div className='mt-[8px] grid grid-cols-3 gap-[8px]'>
+        {RESOURCE_CARDS.map((card) => {
+          const Icon = card.icon
+          return (
+            <a
+              key={card.title}
+              href={card.href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='flex flex-col gap-[4px] rounded-[5px] border border-[#2A2A2A] px-[10px] py-[8px] transition-colors hover:border-[#3D3D3D] hover:bg-[#232323]'
+            >
+              <div className='flex items-center gap-[6px]'>
+                <Icon className='h-[13px] w-[13px] flex-shrink-0 text-[#939393]' />
+                <span className='font-[430] font-season text-[#cdcdcd] text-[12px]'>
+                  {card.title}
+                </span>
+              </div>
+              <span className='font-season text-[#939393] text-[11px] leading-[130%]'>
+                {card.description}
+              </span>
+            </a>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

apps/sim/app/(home)/components/navbar/navbar.tsx

@@ -1,97 +1,385 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { ChevronDown } from '@/components/emcn'
+import { GithubOutlineIcon } from '@/components/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { BlogDropdown } from '@/app/(home)/components/navbar/components/blog-dropdown'
+import { DocsDropdown } from '@/app/(home)/components/navbar/components/docs-dropdown'
 import { GitHubStars } from '@/app/(home)/components/navbar/components/github-stars'
+import { getBrandConfig } from '@/ee/whitelabeling'
+
+type DropdownId = 'docs' | 'blog' | null
 
 interface NavLink {
   label: string
   href: string
   external?: boolean
   icon?: 'chevron'
+  dropdown?: 'docs' | 'blog'
 }
 
 const NAV_LINKS: NavLink[] = [
-  { label: 'Docs', href: 'https://docs.sim.ai', external: true },
-  { label: 'Pricing', href: '/pricing' },
-  { label: 'Careers', href: '/careers' },
-  { label: 'Enterprise', href: '/enterprise' },
+  { label: 'Docs', href: 'https://docs.sim.ai', external: true, icon: 'chevron', dropdown: 'docs' },
+  { label: 'Blog', href: '/blog', icon: 'chevron', dropdown: 'blog' },
+  { label: 'Pricing', href: '#pricing' },
+  { label: 'Enterprise', href: 'https://form.typeform.com/to/jqCO12pF', external: true },
 ]
 
-/** Logo and nav edge: horizontal padding (px) for left/right symmetry. */
-const LOGO_CELL = 'flex items-center px-[20px]'
-
-/** Links: even spacing between items. */
+const LOGO_CELL = 'flex items-center pl-[20px] lg:pl-[80px] pr-[20px]'
 const LINK_CELL = 'flex items-center px-[14px]'
 
-export default function Navbar() {
+interface NavbarProps {
+  logoOnly?: boolean
+}
+
+export default function Navbar({ logoOnly = false }: NavbarProps) {
+  const brand = getBrandConfig()
+  const [activeDropdown, setActiveDropdown] = useState<DropdownId>(null)
+  const [hoveredLink, setHoveredLink] = useState<string | null>(null)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const openDropdown = useCallback((id: DropdownId) => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+    setActiveDropdown(id)
+  }, [])
+
+  const scheduleClose = useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+    closeTimerRef.current = setTimeout(() => {
+      setActiveDropdown(null)
+      closeTimerRef.current = null
+    }, 100)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    document.body.style.overflow = mobileMenuOpen ? 'hidden' : ''
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [mobileMenuOpen])
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1024px)')
+    const handler = () => {
+      if (mq.matches) setMobileMenuOpen(false)
+    }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  const anyHighlighted = activeDropdown !== null || hoveredLink !== null
+
   return (
     <nav
       aria-label='Primary navigation'
-      className='flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
+      className='relative flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
       itemScope
       itemType='https://schema.org/SiteNavigationElement'
     >
-      {/* Logo */}
-      <Link href='/' className={LOGO_CELL} aria-label='Sim home' itemProp='url'>
+      <Link href='/' className={LOGO_CELL} aria-label={`${brand.name} home`} itemProp='url'>
         <span itemProp='name' className='sr-only'>
-          Sim
+          {brand.name}
         </span>
-        <Image
-          src='/logo/sim-landing.svg'
-          alt='Sim'
-          width={71}
-          height={22}
-          className='h-[22px] w-auto'
-          priority
-        />
+        {brand.logoUrl ? (
+          <Image
+            src={brand.logoUrl}
+            alt={`${brand.name} Logo`}
+            width={71}
+            height={22}
+            className='h-[22px] w-auto object-contain'
+            priority
+            unoptimized
+          />
+        ) : (
+          <Image
+            src='/logo/sim-landing.svg'
+            alt='Sim'
+            width={71}
+            height={22}
+            className='h-[22px] w-auto'
+            priority
+          />
+        )}
       </Link>
 
-      {/* Links */}
-      <ul className='mt-[0.75px] flex'>
-        {NAV_LINKS.map(({ label, href, external, icon }) => (
-          <li key={label} className='flex'>
-            {external ? (
-              <a href={href} target='_blank' rel='noopener noreferrer' className={LINK_CELL}>
-                {label}
-              </a>
-            ) : (
-              <Link
-                href={href}
-                className={icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL}
-                aria-label={label}
-              >
-                {label}
-                {icon === 'chevron' && (
-                  <ChevronDown className='mt-[1.75px] h-[10px] w-[10px] flex-shrink-0 text-[#ECECEC]' />
-                )}
-              </Link>
+      {!logoOnly && (
+        <>
+          <ul className='mt-[0.75px] hidden lg:flex'>
+            {NAV_LINKS.map(({ label, href, external, icon, dropdown }) => {
+              const hasDropdown = !!dropdown
+              const isActive = hasDropdown && activeDropdown === dropdown
+              const isThisHovered = hoveredLink === label
+              const isHighlighted = isActive || isThisHovered
+              const isDimmed = anyHighlighted && !isHighlighted
+              const linkClass = cn(
+                icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL,
+                'transition-colors duration-200',
+                isDimmed && 'text-[#F6F6F6]/60'
+              )
+              const chevron = icon === 'chevron' && <NavChevron open={isActive} />
+
+              if (hasDropdown) {
+                return (
+                  <li
+                    key={label}
+                    className='relative flex'
+                    onMouseEnter={() => openDropdown(dropdown)}
+                    onMouseLeave={scheduleClose}
+                  >
+                    <button
+                      type='button'
+                      className={cn(linkClass, 'h-full cursor-pointer')}
+                      aria-expanded={isActive}
+                      aria-haspopup='true'
+                    >
+                      {label}
+                      {chevron}
+                    </button>
+
+                    <div
+                      className={cn(
+                        '-mt-[2px] absolute top-full left-0 z-50',
+                        isActive
+                          ? 'pointer-events-auto opacity-100'
+                          : 'pointer-events-none opacity-0'
+                      )}
+                      style={{
+                        transform: isActive ? 'translateY(0)' : 'translateY(-6px)',
+                        transition: 'opacity 200ms ease, transform 200ms ease',
+                      }}
+                    >
+                      {dropdown === 'docs' && <DocsDropdown />}
+                      {dropdown === 'blog' && <BlogDropdown />}
+                    </div>
+                  </li>
+                )
+              }
+
+              return (
+                <li
+                  key={label}
+                  className='flex'
+                  onMouseEnter={() => setHoveredLink(label)}
+                  onMouseLeave={() => setHoveredLink(null)}
+                >
+                  {external ? (
+                    <a href={href} target='_blank' rel='noopener noreferrer' className={linkClass}>
+                      {label}
+                      {chevron}
+                    </a>
+                  ) : (
+                    <Link href={href} className={linkClass} aria-label={label}>
+                      {label}
+                      {chevron}
+                    </Link>
+                  )}
+                </li>
+              )
+            })}
+            <li
+              className={cn(
+                'flex transition-opacity duration-200',
+                anyHighlighted && hoveredLink !== 'github' && 'opacity-60'
+              )}
+              onMouseEnter={() => setHoveredLink('github')}
+              onMouseLeave={() => setHoveredLink(null)}
+            >
+              <GitHubStars />
+            </li>
+          </ul>
+
+          <div className='hidden flex-1 lg:block' />
+
+          <div className='hidden items-center gap-[8px] pr-[80px] pl-[20px] lg:flex'>
+            <Link
+              href='/login'
+              className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+              aria-label='Log in'
+            >
+              Log in
+            </Link>
+            <Link
+              href='/signup'
+              className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+              aria-label='Get started with Sim'
+            >
+              Get started
+            </Link>
+          </div>
+
+          <div className='flex flex-1 items-center justify-end pr-[20px] lg:hidden'>
+            <button
+              type='button'
+              className='flex h-[32px] w-[32px] items-center justify-center rounded-[5px] transition-colors hover:bg-[#2A2A2A]'
+              onClick={() => setMobileMenuOpen((prev) => !prev)}
+              aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={mobileMenuOpen}
+            >
+              <MobileMenuIcon open={mobileMenuOpen} />
+            </button>
+          </div>
+
+          <div
+            className={cn(
+              'fixed inset-x-0 top-[52px] bottom-0 z-50 flex flex-col overflow-y-auto bg-[#1C1C1C] font-[430] font-season text-[14px] transition-all duration-200 lg:hidden',
+              mobileMenuOpen ? 'visible opacity-100' : 'invisible opacity-0'
             )}
-          </li>
-        ))}
-        <li className='flex'>
-          <GitHubStars />
-        </li>
-      </ul>
+          >
+            <ul className='flex flex-col'>
+              {NAV_LINKS.map(({ label, href, external }) => (
+                <li key={label} className='border-[#2A2A2A] border-b'>
+                  {external ? (
+                    <a
+                      href={href}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='flex items-center justify-between px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {label}
+                      <ExternalArrowIcon />
+                    </a>
+                  ) : (
+                    <Link
+                      href={href}
+                      className='flex items-center px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {label}
+                    </Link>
+                  )}
+                </li>
+              ))}
+              <li className='border-[#2A2A2A] border-b'>
+                <a
+                  href='https://github.com/simstudioai/sim'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='flex items-center gap-[8px] px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <GithubOutlineIcon className='h-[14px] w-[14px]' />
+                  GitHub
+                </a>
+              </li>
+            </ul>
 
-      <div className='flex-1' />
-
-      {/* CTAs */}
-      <div className='flex items-center gap-[8px] px-[20px]'>
-        <Link
-          href='/login'
-          className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
-          aria-label='Log in'
-        >
-          Log in
-        </Link>
-        <Link
-          href='/signup'
-          className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[9px] text-[13.5px] text-black transition-[filter] hover:brightness-110'
-          aria-label='Get started with Sim'
-        >
-          Get started
-        </Link>
-      </div>
+            <div className='mt-auto flex flex-col gap-[10px] p-[20px]'>
+              <Link
+                href='/login'
+                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[#ECECEC] text-[14px] transition-colors active:bg-[#2A2A2A]'
+                onClick={() => setMobileMenuOpen(false)}
+                aria-label='Log in'
+              >
+                Log in
+              </Link>
+              <Link
+                href='/signup'
+                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                onClick={() => setMobileMenuOpen(false)}
+                aria-label='Get started with Sim'
+              >
+                Get started
+              </Link>
+            </div>
+          </div>
+        </>
+      )}
     </nav>
   )
 }
+
+interface NavChevronProps {
+  open: boolean
+}
+
+/**
+ * Animated chevron matching the exact geometry of the emcn ChevronDown SVG.
+ * Each arm rotates around its midpoint so the center vertex travels up/down
+ * while the outer endpoints adjust — producing a Stripe-style morph.
+ */
+function NavChevron({ open }: NavChevronProps) {
+  return (
+    <svg width='9' height='6' viewBox='0 0 10 6' fill='none' className='mt-[1.5px] flex-shrink-0'>
+      <line
+        x1='1'
+        y1='1'
+        x2='5'
+        y2='5'
+        stroke='currentColor'
+        strokeWidth='1.33'
+        strokeLinecap='square'
+        style={{
+          transformOrigin: '3px 3px',
+          transform: open ? 'rotate(-90deg)' : 'rotate(0deg)',
+          transition: 'transform 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      />
+      <line
+        x1='5'
+        y1='5'
+        x2='9'
+        y2='1'
+        stroke='currentColor'
+        strokeWidth='1.33'
+        strokeLinecap='square'
+        style={{
+          transformOrigin: '7px 3px',
+          transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+          transition: 'transform 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      />
+    </svg>
+  )
+}
+
+function MobileMenuIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <svg width='14' height='14' viewBox='0 0 14 14' fill='none'>
+        <path
+          d='M1 1L13 13M13 1L1 13'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+        />
+      </svg>
+    )
+  }
+  return (
+    <svg width='16' height='12' viewBox='0 0 16 12' fill='none'>
+      <path
+        d='M0 1H16M0 6H16M0 11H16'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}
+
+function ExternalArrowIcon() {
+  return (
+    <svg width='12' height='12' viewBox='0 0 12 12' fill='none' className='text-[#666]'>
+      <path
+        d='M3.5 2.5H9.5V8.5M9 3L3 9'
+        stroke='currentColor'
+        strokeWidth='1.2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

apps/sim/app/(home)/components/pricing/pricing.tsx

@@ -22,9 +22,10 @@ const PRICING_TIERS: PricingTier[] = [
     features: [
       '1,000 credits (trial)',
       '5GB file storage',
+      '3 tables · 1,000 rows each',
       '5 min execution limit',
-      'Limited log retention',
-      'CLI/SDK Access',
+      '7-day log retention',
+      'CLI/SDK/MCP Access',
     ],
     cta: { label: 'Get started', href: '/signup' },
   },
@@ -36,11 +37,12 @@ const PRICING_TIERS: PricingTier[] = [
     billingPeriod: 'per month',
     color: '#00F701',
     features: [
-      '6,000 credits/mo',
-      '+50 daily refresh credits',
-      '150 runs/min (sync)',
-      '50 min sync execution limit',
+      '6,000 credits/mo · +50/day',
       '50GB file storage',
+      '25 tables · 5,000 rows each',
+      '50 min execution · 150 runs/min',
+      'Unlimited log retention',
+      'CLI/SDK/MCP Access',
     ],
     cta: { label: 'Get started', href: '/signup' },
   },
@@ -52,11 +54,12 @@ const PRICING_TIERS: PricingTier[] = [
     billingPeriod: 'per month',
     color: '#FA4EDF',
     features: [
-      '25,000 credits/mo',
-      '+200 daily refresh credits',
-      '300 runs/min (sync)',
-      '50 min sync execution limit',
+      '25,000 credits/mo · +200/day',
       '500GB file storage',
+      '25 tables · 5,000 rows each',
+      '50 min execution · 300 runs/min',
+      'Unlimited log retention',
+      'CLI/SDK/MCP Access',
     ],
     cta: { label: 'Get started', href: '/signup' },
   },
@@ -66,7 +69,15 @@ const PRICING_TIERS: PricingTier[] = [
     description: 'For organizations needing security and scale',
     price: 'Custom',
     color: '#FFCC02',
-    features: ['Custom infra limits', 'SSO', 'SOC2', 'Self hosting', 'Dedicated support'],
+    features: [
+      'Custom credits & infra limits',
+      'Custom file storage',
+      '10,000 tables · 1M rows each',
+      'Custom execution limits',
+      'Unlimited log retention',
+      'SSO & SCIM · SOC2 & HIPAA',
+      'Self hosting · Dedicated support',
+    ],
     cta: { label: 'Book a demo', href: '/contact' },
   },
 ]
@@ -114,16 +125,16 @@ function PricingCard({ tier }: PricingCardProps) {
           </p>
           <div className='mt-4'>
             {isEnterprise ? (
-              <a
+              <Link
                 href={tier.cta.href}
                 className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
               >
                 {tier.cta.label}
-              </a>
+              </Link>
             ) : isPro ? (
               <Link
                 href={tier.cta.href}
-                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-white transition-[filter] hover:brightness-110'
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
               >
                 {tier.cta.label}
               </Link>
@@ -174,7 +185,7 @@ function PricingCard({ tier }: PricingCardProps) {
 export default function Pricing() {
   return (
     <section id='pricing' aria-labelledby='pricing-heading' className='bg-[#F6F6F6]'>
-      <div className='px-4 pt-[100px] pb-8 sm:px-8 md:px-[80px]'>
+      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
         <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
           <Badge
             variant='blue'
@@ -193,7 +204,7 @@ export default function Pricing() {
           </h2>
         </div>
 
-        <div className='mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+        <div className='mt-8 grid grid-cols-1 gap-4 sm:mt-10 sm:grid-cols-2 md:mt-12 lg:grid-cols-4'>
           {PRICING_TIERS.map((tier) => (
             <PricingCard key={tier.id} tier={tier} />
           ))}

apps/sim/app/(home)/components/structured-data.tsx

@@ -74,6 +74,10 @@ export default function StructuredData() {
           'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
         breadcrumb: { '@id': 'https://sim.ai/#breadcrumb' },
         inLanguage: 'en-US',
+        speakable: {
+          '@type': 'SpeakableSpecification',
+          cssSelector: ['#hero-heading', '[id="hero"] p'],
+        },
         potentialAction: [{ '@type': 'ReadAction', target: ['https://sim.ai'] }],
       },
       {

apps/sim/app/(home)/components/templates/templates.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
+import { AnimatePresence, type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import { Badge, ChevronDown } from '@/components/emcn'
@@ -337,7 +337,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[2px] w-[2px] rounded-full bg-[#2A2A2A]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#2A2A2A]' />
       ))}
     </div>
   )
@@ -349,8 +349,17 @@ export default function Templates() {
   const sectionRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
   const [isPreparingTemplate, setIsPreparingTemplate] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
   const router = useRouter()
 
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 1023px)')
+    setIsMobile(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ['start 0.9', 'start 0.2'],
@@ -415,8 +424,8 @@ export default function Templates() {
 
       <div className='bg-[#1C1C1C]'>
         <DotGrid
-          className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
-          cols={120}
+          className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+          cols={160}
           rows={1}
           gap={6}
         />
@@ -440,7 +449,7 @@ export default function Templates() {
             </svg>
           </div>
 
-          <div className='px-[80px] pt-[100px]'>
+          <div className='px-[20px] pt-[60px] lg:px-[80px] lg:pt-[100px]'>
             <div className='flex flex-col items-start gap-[20px]'>
               <Badge
                 variant='blue'
@@ -457,84 +466,132 @@ export default function Templates() {
 
               <h2
                 id='templates-heading'
-                className='font-[430] font-season text-[40px] text-white leading-[100%] tracking-[-0.02em]'
+                className='font-[430] font-season text-[28px] text-white leading-[100%] tracking-[-0.02em] lg:text-[40px]'
               >
                 Ship your agent in minutes
               </h2>
 
-              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[16px] leading-[125%] tracking-[0.02em]'>
-                Pre-built templates for every use case—pick one, swap <br />
+              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+                Pre-built templates for every use case—pick one, swap{' '}
+                <br className='hidden lg:inline' />
                 models and tools to fit your stack, and deploy.
               </p>
             </div>
           </div>
 
-          <div className='mt-[73px] flex border-[#2A2A2A] border-y'>
-            <DotGrid
-              className='w-[80px] shrink-0 overflow-hidden border-[#2A2A2A] border-r p-[6px]'
-              cols={6}
-              rows={55}
-              gap={6}
-            />
+          <div className='mt-[40px] flex border-[#2A2A2A] border-y lg:mt-[73px]'>
+            <div className='shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid
+                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-r p-[4px]'
+                  cols={2}
+                  rows={55}
+                  gap={4}
+                />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid
+                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-r p-[6px]'
+                  cols={8}
+                  rows={55}
+                  gap={6}
+                />
+              </div>
+            </div>
 
-            <div className='flex min-w-0 flex-1'>
+            <div className='flex min-w-0 flex-1 flex-col lg:flex-row'>
               <div
                 role='tablist'
                 aria-label='Workflow templates'
-                className='flex w-[300px] shrink-0 flex-col border-[#2A2A2A] border-r'
+                className='flex w-full shrink-0 flex-col border-[#2A2A2A] lg:w-[300px] lg:border-r'
               >
                 {TEMPLATE_WORKFLOWS.map((workflow, index) => {
                   const isActive = index === activeIndex
                   return (
-                    <button
-                      key={workflow.id}
-                      id={`template-tab-${index}`}
-                      type='button'
-                      role='tab'
-                      aria-selected={isActive}
-                      aria-controls={TEMPLATES_PANEL_ID}
-                      onClick={() => setActiveIndex(index)}
-                      className={cn(
-                        'relative text-left',
-                        isActive
-                          ? 'z-10'
-                          : 'flex items-center px-[12px] py-[10px] shadow-[inset_0_-1px_0_0_#2A2A2A] last:shadow-none hover:bg-[#232323]/50'
-                      )}
-                    >
-                      {isActive ? (
-                        (() => {
-                          const depth = DEPTH_CONFIGS[workflow.id]
-                          return (
-                            <>
-                              <div
-                                className='absolute top-[-8px] bottom-0 left-0 w-2'
-                                style={{
-                                  clipPath: LEFT_WALL_CLIP,
-                                  backgroundColor: hexToRgba(depth.color, 0.63),
-                                }}
-                              />
-                              <div
-                                className='absolute right-[-8px] bottom-0 left-2 h-2'
-                                style={buildBottomWallStyle(depth)}
-                              />
-                              <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
-                                <span className='flex-1 font-[430] font-season text-[16px] text-white'>
-                                  {workflow.name}
-                                </span>
-                                <ChevronDown
-                                  className='-rotate-90 h-[11px] w-[11px] shrink-0'
-                                  style={{ color: depth.color }}
+                    <div key={workflow.id}>
+                      <button
+                        id={`template-tab-${index}`}
+                        type='button'
+                        role='tab'
+                        aria-selected={isActive}
+                        aria-controls={TEMPLATES_PANEL_ID}
+                        onClick={() => setActiveIndex(index)}
+                        className={cn(
+                          'relative w-full text-left',
+                          isActive
+                            ? 'z-10'
+                            : cn(
+                                'flex items-center px-[12px] py-[10px] hover:bg-[#232323]/50',
+                                index < TEMPLATE_WORKFLOWS.length - 1 &&
+                                  'shadow-[inset_0_-1px_0_0_#2A2A2A]'
+                              )
+                        )}
+                      >
+                        {isActive ? (
+                          (() => {
+                            const depth = DEPTH_CONFIGS[workflow.id]
+                            return (
+                              <>
+                                <div
+                                  className='absolute top-[-8px] bottom-0 left-0 w-2'
+                                  style={{
+                                    clipPath: LEFT_WALL_CLIP,
+                                    backgroundColor: hexToRgba(depth.color, 0.63),
+                                  }}
                                 />
-                              </div>
-                            </>
-                          )
-                        })()
-                      ) : (
-                        <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
-                          {workflow.name}
-                        </span>
-                      )}
-                    </button>
+                                <div
+                                  className='absolute right-[-8px] bottom-0 left-2 h-2'
+                                  style={buildBottomWallStyle(depth)}
+                                />
+                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
+                                  <span className='flex-1 font-[430] font-season text-[16px] text-white'>
+                                    {workflow.name}
+                                  </span>
+                                  <ChevronDown
+                                    className='-rotate-90 h-[11px] w-[11px] shrink-0'
+                                    style={{ color: depth.color }}
+                                  />
+                                </div>
+                              </>
+                            )
+                          })()
+                        ) : (
+                          <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
+                            {workflow.name}
+                          </span>
+                        )}
+                      </button>
+
+                      <AnimatePresence>
+                        {isActive && isMobile && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+                            className='overflow-hidden'
+                          >
+                            <div className='aspect-[16/10] w-full border-[#2A2A2A] border-y bg-[#1b1b1b]'>
+                              <LandingPreviewWorkflow
+                                workflow={workflow}
+                                animate
+                                fitViewOptions={{ padding: 0.15, maxZoom: 1.3 }}
+                              />
+                            </div>
+                            <div className='p-[12px]'>
+                              <button
+                                type='button'
+                                onClick={handleUseTemplate}
+                                disabled={isPreparingTemplate}
+                                className='inline-flex h-[32px] w-full cursor-pointer items-center justify-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] font-[430] font-season text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                              >
+                                {isPreparingTemplate ? 'Preparing...' : 'Use template'}
+                              </button>
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
                   )
                 })}
               </div>
@@ -557,7 +614,7 @@ export default function Templates() {
                   type='button'
                   onClick={handleUseTemplate}
                   disabled={isPreparingTemplate}
-                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-[6px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-black transition-[filter] hover:brightness-110'
+                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                 >
                   {isPreparingTemplate ? 'Preparing...' : 'Use template'}
                   <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -582,12 +639,24 @@ export default function Templates() {
               </div>
             </div>
 
-            <DotGrid
-              className='w-[80px] shrink-0 overflow-hidden border-[#2A2A2A] border-l p-[6px]'
-              cols={6}
-              rows={55}
-              gap={6}
-            />
+            <div className='shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid
+                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-l p-[4px]'
+                  cols={2}
+                  rows={55}
+                  gap={4}
+                />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid
+                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-l p-[6px]'
+                  cols={8}
+                  rows={55}
+                  gap={6}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>

apps/sim/app/(home)/landing.tsx

@@ -28,8 +28,8 @@ import {
  *   for immediate availability to AI crawlers.
  * - Section `id` attributes serve as fragment anchors for precise AI citations.
  * - Content ordering prioritizes answer-first patterns: definition (Hero) ->
- *   examples (Templates) -> capabilities (Features) -> social proof (Collaboration, Testimonials) ->
- *   pricing (Pricing) -> enterprise (Enterprise).
+ *   examples (Templates) -> capabilities (Features) -> social proof (Collaboration) ->
+ *   enterprise (Enterprise) -> pricing (Pricing) -> testimonials (Testimonials).
  */
 export default async function Landing() {
   return (
@@ -43,8 +43,8 @@ export default async function Landing() {
         <Templates />
         <Features />
         <Collaboration />
-        <Pricing />
         <Enterprise />
+        <Pricing />
         <Testimonials />
       </main>
       <Footer />

apps/sim/app/(landing)/blog/[slug]/back-link.tsx

@@ -9,8 +9,8 @@ export function BackLink() {
 
   return (
     <Link
-      href='/studio'
-      className='group flex items-center gap-1 text-gray-600 text-sm hover:text-gray-900'
+      href='/blog'
+      className='group flex items-center gap-1 text-[#999] text-sm hover:text-[#ECECEC]'
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -21,7 +21,7 @@ export function BackLink() {
           <ChevronLeft className='h-4 w-4' aria-hidden='true' />
         )}
       </span>
-      Back to Sim Studio
+      Back to Blog
     </Link>
   )
 }

apps/sim/app/(landing)/blog/[slug]/page.tsx

@@ -6,9 +6,8 @@ import { FAQ } from '@/lib/blog/faq'
 import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
 import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import { BackLink } from '@/app/(landing)/studio/[slug]/back-link'
-import { ShareButton } from '@/app/(landing)/studio/[slug]/share-button'
+import { BackLink } from '@/app/(landing)/blog/[slug]/back-link'
+import { ShareButton } from '@/app/(landing)/blog/[slug]/share-button'
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -36,11 +35,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
   const related = await getRelatedPosts(slug, 3)
 
   return (
-    <article
-      className={`${soehne.className} w-full`}
-      itemScope
-      itemType='https://schema.org/BlogPosting'
-    >
+    <article className='w-full' itemScope itemType='https://schema.org/BlogPosting'>
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
@@ -71,7 +66,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
           </div>
           <div className='flex flex-1 flex-col justify-between'>
             <h1
-              className='font-medium text-[36px] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'
+              className='font-[500] text-[#ECECEC] text-[36px] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'
               itemProp='headline'
             >
               {post.title}
@@ -90,7 +85,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                       href={a?.url || '#'}
                       target='_blank'
                       rel='noopener noreferrer author'
-                      className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
+                      className='text-[#999] text-[14px] leading-[1.5] hover:text-[#ECECEC] sm:text-[16px]'
                       itemProp='author'
                       itemScope
                       itemType='https://schema.org/Person'
@@ -100,15 +95,15 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                   </div>
                 ))}
               </div>
-              <ShareButton url={`${getBaseUrl()}/studio/${slug}`} title={post.title} />
+              <ShareButton url={`${getBaseUrl()}/blog/${slug}`} title={post.title} />
             </div>
           </div>
         </div>
-        <hr className='mt-8 border-gray-200 border-t sm:mt-12' />
+        <hr className='mt-8 border-[#2A2A2A] border-t sm:mt-12' />
         <div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
           <div className='flex flex-shrink-0 items-center gap-4'>
             <time
-              className='block text-[14px] text-gray-600 leading-[1.5] sm:text-[16px]'
+              className='block text-[#999] text-[14px] leading-[1.5] sm:text-[16px]'
               dateTime={post.date}
               itemProp='datePublished'
             >
@@ -121,7 +116,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             <meta itemProp='dateModified' content={post.updated ?? post.date} />
           </div>
           <div className='flex-1'>
-            <p className='m-0 block translate-y-[-4px] font-[400] text-[18px] leading-[1.5] sm:text-[20px] md:text-[26px]'>
+            <p className='m-0 block translate-y-[-4px] font-[400] text-[#999] text-[18px] leading-[1.5] sm:text-[20px] md:text-[26px]'>
               {post.description}
             </p>
           </div>
@@ -129,18 +124,18 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       </header>
 
       <div className='mx-auto max-w-[900px] px-6 pb-20 sm:px-8 md:px-12' itemProp='articleBody'>
-        <div className='prose prose-lg max-w-none'>
+        <div className='prose prose-lg prose-invert max-w-none prose-blockquote:border-[#3d3d3d] prose-hr:border-[#2A2A2A] prose-a:text-[#ECECEC] prose-blockquote:text-[#999] prose-code:text-[#ECECEC] prose-headings:text-[#ECECEC] prose-li:text-[#999] prose-p:text-[#999] prose-strong:text-[#ECECEC]'>
           <Article />
           {post.faq && post.faq.length > 0 ? <FAQ items={post.faq} /> : null}
         </div>
       </div>
       {related.length > 0 && (
         <div className='mx-auto max-w-[900px] px-6 pb-24 sm:px-8 md:px-12'>
-          <h2 className='mb-4 font-medium text-[24px]'>Related posts</h2>
+          <h2 className='mb-4 font-[500] text-[#ECECEC] text-[24px]'>Related posts</h2>
           <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
             {related.map((p) => (
-              <Link key={p.slug} href={`/studio/${p.slug}`} className='group'>
-                <div className='overflow-hidden rounded-lg border border-gray-200'>
+              <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
+                <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
                   <Image
                     src={p.ogImage}
                     alt={p.title}
@@ -152,14 +147,14 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                     unoptimized
                   />
                   <div className='p-3'>
-                    <div className='mb-1 text-gray-600 text-xs'>
+                    <div className='mb-1 text-[#999] text-xs'>
                       {new Date(p.date).toLocaleDateString('en-US', {
                         month: 'short',
                         day: 'numeric',
                         year: 'numeric',
                       })}
                     </div>
-                    <div className='font-medium text-sm leading-tight'>{p.title}</div>
+                    <div className='font-[500] text-[#ECECEC] text-sm leading-tight'>{p.title}</div>
                   </div>
                 </div>
               </Link>

apps/sim/app/(landing)/blog/[slug]/share-button.tsx

@@ -2,7 +2,12 @@
 
 import { useState } from 'react'
 import { Share2 } from 'lucide-react'
-import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/emcn'
 
 interface ShareButtonProps {
   url: string
@@ -10,56 +15,46 @@ interface ShareButtonProps {
 }
 
 export function ShareButton({ url, title }: ShareButtonProps) {
-  const [open, setOpen] = useState(false)
   const [copied, setCopied] = useState(false)
 
   const handleCopyLink = async () => {
     try {
       await navigator.clipboard.writeText(url)
       setCopied(true)
-      setTimeout(() => {
-        setCopied(false)
-        setOpen(false)
-      }, 1000)
+      setTimeout(() => setCopied(false), 1500)
     } catch {
-      setOpen(false)
+      /* clipboard unavailable */
     }
   }
 
   const handleShareTwitter = () => {
     const tweetUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`
     window.open(tweetUrl, '_blank', 'noopener,noreferrer')
-    setOpen(false)
   }
 
   const handleShareLinkedIn = () => {
     const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
     window.open(linkedInUrl, '_blank', 'noopener,noreferrer')
-    setOpen(false)
   }
 
   return (
-    <Popover
-      open={open}
-      onOpenChange={setOpen}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
-      <PopoverTrigger asChild>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <button
-          className='flex items-center gap-1.5 text-gray-600 text-sm hover:text-gray-900'
+          className='flex items-center gap-1.5 text-[#999] text-sm hover:text-[#ECECEC]'
           aria-label='Share this post'
         >
           <Share2 className='h-4 w-4' />
           <span>Share</span>
         </button>
-      </PopoverTrigger>
-      <PopoverContent align='end' minWidth={140}>
-        <PopoverItem onClick={handleCopyLink}>{copied ? 'Copied!' : 'Copy link'}</PopoverItem>
-        <PopoverItem onClick={handleShareTwitter}>Share on X</PopoverItem>
-        <PopoverItem onClick={handleShareLinkedIn}>Share on LinkedIn</PopoverItem>
-      </PopoverContent>
-    </Popover>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        <DropdownMenuItem onSelect={handleCopyLink}>
+          {copied ? 'Copied!' : 'Copy link'}
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={handleShareTwitter}>Share on X</DropdownMenuItem>
+        <DropdownMenuItem onSelect={handleShareLinkedIn}>Share on LinkedIn</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }

apps/sim/app/(landing)/blog/authors/[id]/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 import { getAllPostMeta } from '@/lib/blog/registry'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 
 export const revalidate = 3600
 
@@ -23,8 +22,8 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
   const author = posts[0]?.author
   if (!author) {
     return (
-      <main className={`${soehne.className} mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12`}>
-        <h1 className='font-medium text-[32px]'>Author not found</h1>
+      <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
+        <h1 className='font-[500] text-[#ECECEC] text-[32px]'>Author not found</h1>
       </main>
     )
   }
@@ -32,12 +31,12 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
     '@context': 'https://schema.org',
     '@type': 'Person',
     name: author.name,
-    url: `https://sim.ai/studio/authors/${author.id}`,
+    url: `https://sim.ai/blog/authors/${author.id}`,
     sameAs: author.url ? [author.url] : [],
     image: author.avatarUrl,
   }
   return (
-    <main className={`${soehne.className} mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12`}>
+    <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(personJsonLd) }}
@@ -53,12 +52,12 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
             unoptimized
           />
         ) : null}
-        <h1 className='font-medium text-[32px] leading-tight'>{author.name}</h1>
+        <h1 className='font-[500] text-[#ECECEC] text-[32px] leading-tight'>{author.name}</h1>
       </div>
       <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
         {posts.map((p) => (
-          <Link key={p.slug} href={`/studio/${p.slug}`} className='group'>
-            <div className='overflow-hidden rounded-lg border border-gray-200'>
+          <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
+            <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
               <Image
                 src={p.ogImage}
                 alt={p.title}
@@ -68,14 +67,14 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
                 unoptimized
               />
               <div className='p-3'>
-                <div className='mb-1 text-gray-600 text-xs'>
+                <div className='mb-1 text-[#999] text-xs'>
                   {new Date(p.date).toLocaleDateString('en-US', {
                     month: 'short',
                     day: 'numeric',
                     year: 'numeric',
                   })}
                 </div>
-                <div className='font-medium text-sm leading-tight'>{p.title}</div>
+                <div className='font-[500] text-[#ECECEC] text-sm leading-tight'>{p.title}</div>
               </div>
             </div>
           </Link>

apps/sim/app/(landing)/blog/layout.tsx

@@ -1,4 +1,5 @@
-import { Footer, Nav } from '@/app/(landing)/components'
+import Footer from '@/app/(home)/components/footer/footer'
+import Navbar from '@/app/(home)/components/navbar/navbar'
 
 export default function StudioLayout({ children }: { children: React.ReactNode }) {
   const orgJsonLd = {
@@ -23,7 +24,7 @@ export default function StudioLayout({ children }: { children: React.ReactNode }
   }
 
   return (
-    <div className='flex min-h-screen flex-col'>
+    <div className='flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}
@@ -32,9 +33,11 @@ export default function StudioLayout({ children }: { children: React.ReactNode }
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd) }}
       />
-      <Nav hideAuthButtons={false} variant='landing' />
+      <header>
+        <Navbar />
+      </header>
       <main className='relative flex-1'>{children}</main>
-      <Footer fullWidth={true} />
+      <Footer />
     </div>
   )
 }

apps/sim/app/(landing)/blog/page.tsx

@@ -1,17 +1,16 @@
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { getAllPostMeta } from '@/lib/blog/registry'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import { PostGrid } from '@/app/(landing)/studio/post-grid'
+import { PostGrid } from '@/app/(landing)/blog/post-grid'
 
 export const metadata: Metadata = {
-  title: 'Studio',
+  title: 'Blog',
   description: 'Announcements, insights, and guides from the Sim team.',
 }
 
 export const revalidate = 3600
 
-export default async function StudioIndex({
+export default async function BlogIndex({
   searchParams,
 }: {
   searchParams: Promise<{ page?: string; tag?: string }>
@@ -37,30 +36,32 @@ export default async function StudioIndex({
   const posts = sorted.slice(start, start + perPage)
   // Tag filter chips are intentionally disabled for now.
   // const tags = await getAllTags()
-  const studioJsonLd = {
+  const blogJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'Blog',
-    name: 'Sim Studio',
-    url: 'https://sim.ai/studio',
+    name: 'Sim Blog',
+    url: 'https://sim.ai/blog',
     description: 'Announcements, insights, and guides for building AI agent workflows.',
   }
 
   return (
-    <main className={`${soehne.className} mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12`}>
+    <main className='mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12'>
       <script
         type='application/ld+json'
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(studioJsonLd) }}
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(blogJsonLd) }}
       />
-      <h1 className='mb-3 font-medium text-[40px] leading-tight sm:text-[56px]'>Sim Studio</h1>
-      <p className='mb-10 text-[18px] text-gray-700'>
+      <h1 className='mb-3 font-[500] text-[#ECECEC] text-[40px] leading-tight sm:text-[56px]'>
+        Blog
+      </h1>
+      <p className='mb-10 text-[#999] text-[18px]'>
         Announcements, insights, and guides for building AI agent workflows.
       </p>
 
       {/* Tag filter chips hidden until we have more posts */}
       {/* <div className='mb-10 flex flex-wrap gap-3'>
-        <Link href='/studio' className={`rounded-full border px-3 py-1 text-sm ${!tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>All</Link>
+        <Link href='/blog' className={`rounded-full border px-3 py-1 text-sm ${!tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>All</Link>
         {tags.map((t) => (
-          <Link key={t.tag} href={`/studio?tag=${encodeURIComponent(t.tag)}`} className={`rounded-full border px-3 py-1 text-sm ${tag === t.tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>
+          <Link key={t.tag} href={`/blog?tag=${encodeURIComponent(t.tag)}`} className={`rounded-full border px-3 py-1 text-sm ${tag === t.tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>
             {t.tag} ({t.count})
           </Link>
         ))}
@@ -73,19 +74,19 @@ export default async function StudioIndex({
         <div className='mt-10 flex items-center justify-center gap-3'>
           {pageNum > 1 && (
             <Link
-              href={`/studio?page=${pageNum - 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
-              className='rounded border px-3 py-1 text-sm'
+              href={`/blog?page=${pageNum - 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
+              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
             >
               Previous
             </Link>
           )}
-          <span className='text-gray-600 text-sm'>
+          <span className='text-[#999] text-sm'>
             Page {pageNum} of {totalPages}
           </span>
           {pageNum < totalPages && (
             <Link
-              href={`/studio?page=${pageNum + 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
-              className='rounded border px-3 py-1 text-sm'
+              href={`/blog?page=${pageNum + 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
+              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
             >
               Next
             </Link>

apps/sim/app/(landing)/blog/post-grid.tsx

@@ -26,8 +26,8 @@ export function PostGrid({ posts }: { posts: Post[] }) {
   return (
     <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
       {posts.map((p, index) => (
-        <Link key={p.slug} href={`/studio/${p.slug}`} className='group flex flex-col'>
-          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 transition-colors duration-300 hover:border-gray-300'>
+        <Link key={p.slug} href={`/blog/${p.slug}`} className='group flex flex-col'>
+          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-[#2A2A2A] transition-colors duration-300 hover:border-[#3d3d3d]'>
             {/* Image container with fixed aspect ratio to prevent layout shift */}
             <div className='relative aspect-video w-full overflow-hidden'>
               <Image
@@ -42,29 +42,29 @@ export function PostGrid({ posts }: { posts: Post[] }) {
               />
             </div>
             <div className='flex flex-1 flex-col p-4'>
-              <div className='mb-2 text-gray-600 text-xs'>
+              <div className='mb-2 text-[#999] text-xs'>
                 {new Date(p.date).toLocaleDateString('en-US', {
                   month: 'short',
                   day: 'numeric',
                   year: 'numeric',
                 })}
               </div>
-              <h3 className='shine-text mb-1 font-medium text-lg leading-tight'>{p.title}</h3>
-              <p className='mb-3 line-clamp-3 flex-1 text-gray-700 text-sm'>{p.description}</p>
+              <h3 className='mb-1 font-[500] text-[#ECECEC] text-lg leading-tight'>{p.title}</h3>
+              <p className='mb-3 line-clamp-3 flex-1 text-[#999] text-sm'>{p.description}</p>
               <div className='flex items-center gap-2'>
                 <div className='-space-x-1.5 flex'>
                   {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
                     .slice(0, 3)
                     .map((author, idx) => (
-                      <Avatar key={idx} className='size-4 border border-white'>
+                      <Avatar key={idx} className='size-4 border border-[#1C1C1C]'>
                         <AvatarImage src={author?.avatarUrl} alt={author?.name} />
-                        <AvatarFallback className='border border-white bg-gray-100 text-[10px] text-gray-600'>
+                        <AvatarFallback className='border border-[#1C1C1C] bg-[#2A2A2A] text-[#999] text-[10px]'>
                           {author?.name.slice(0, 2)}
                         </AvatarFallback>
                       </Avatar>
                     ))}
                 </div>
-                <span className='text-gray-600 text-xs'>
+                <span className='text-[#999] text-xs'>
                   {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
                     .slice(0, 2)
                     .map((a) => a?.name)

apps/sim/app/(landing)/blog/rss.xml/route.ts

@@ -11,7 +11,7 @@ export async function GET() {
   const xml = `<?xml version="1.0" encoding="UTF-8" ?>
 <rss version="2.0">
   <channel>
-    <title>Sim Studio</title>
+    <title>Sim Blog</title>
     <link>${site}</link>
     <description>Announcements, insights, and guides for AI agent workflows.</description>
     ${items

apps/sim/app/(landing)/blog/tags/page.tsx

@@ -10,16 +10,19 @@ export default async function TagsIndex() {
   const tags = await getAllTags()
   return (
     <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
-      <h1 className='mb-6 font-medium text-[32px] leading-tight'>Browse by tag</h1>
+      <h1 className='mb-6 font-[500] text-[#ECECEC] text-[32px] leading-tight'>Browse by tag</h1>
       <div className='flex flex-wrap gap-3'>
-        <Link href='/studio' className='rounded-full border border-gray-300 px-3 py-1 text-sm'>
+        <Link
+          href='/blog'
+          className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+        >
           All
         </Link>
         {tags.map((t) => (
           <Link
             key={t.tag}
-            href={`/studio?tag=${encodeURIComponent(t.tag)}`}
-            className='rounded-full border border-gray-300 px-3 py-1 text-sm'
+            href={`/blog?tag=${encodeURIComponent(t.tag)}`}
+            className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
           >
             {t.tag} ({t.count})
           </Link>

apps/sim/app/(landing)/components/footer/footer.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { inter } from '@/app/_styles/fonts/inter/inter'
 import {
   ComplianceBadges,
   Logo,
@@ -14,7 +13,7 @@ interface FooterProps {
 
 export default function Footer({ fullWidth = false }: FooterProps) {
   return (
-    <footer className={`${inter.className} relative w-full overflow-hidden bg-white`}>
+    <footer className='relative w-full overflow-hidden bg-white'>
       <div
         className={
           fullWidth
@@ -58,10 +57,10 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 Enterprise
               </Link>
               <Link
-                href='/studio'
+                href='/blog'
                 className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
               >
-                Sim Studio
+                Blog
               </Link>
               <Link
                 href='/changelog'

apps/sim/app/(landing)/components/hero/hero.tsx

@@ -23,7 +23,6 @@ import {
   SupabaseIcon,
 } from '@/components/icons'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import {
   CARD_WIDTH,
   IconButton,
@@ -364,7 +363,7 @@ export default function Hero() {
   return (
     <section
       id='hero'
-      className={`${soehne.className} flex w-full flex-col items-center justify-center pt-[36px] sm:pt-[80px]`}
+      className='flex w-full flex-col items-center justify-center pt-[36px] sm:pt-[80px]'
       aria-labelledby='hero-heading'
     >
       <h1

apps/sim/app/(landing)/components/integrations/integrations.tsx

@@ -1,5 +1,4 @@
 import * as Icons from '@/components/icons'
-import { inter } from '@/app/_styles/fonts/inter/inter'
 
 const modelProviderIcons = [
   { icon: Icons.OpenAIIcon, label: 'OpenAI' },
@@ -122,7 +121,7 @@ export default function Integrations() {
   return (
     <section
       id='integrations'
-      className={`${inter.className} flex flex-col pt-[40px] pb-[27px] sm:pt-[24px]`}
+      className='flex flex-col pt-[40px] pb-[27px] sm:pt-[24px]'
       aria-labelledby='integrations-heading'
     >
       <h2

apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx

@@ -17,7 +17,6 @@ import {
 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
-import { inter } from '@/app/_styles/fonts/inter/inter'
 import { ENTERPRISE_PLAN_FEATURES } from '@/app/workspace/[workspaceId]/settings/components/subscription/plan-configs'
 
 const logger = createLogger('LandingPricing')
@@ -117,7 +116,6 @@ function PricingCard({
   return (
     <div
       className={cn(
-        `${inter.className}`,
         'relative flex h-full flex-col justify-between bg-[#FEFEFE]',
         tier.featured ? 'p-0' : 'px-0 py-0',
         'sm:px-5 sm:pt-4 sm:pb-4',

apps/sim/app/(landing)/components/landing-templates/components/landing-template-preview.tsx

@@ -1,5 +1,3 @@
-import { inter } from '@/app/_styles/fonts/inter/inter'
-
 interface LandingTemplatePreviewProps {
   previewImage: string
   avatarImage: string
@@ -37,14 +35,8 @@ export default function LandingTemplatePreview({
 
         {/* Title and Author Info */}
         <div className='min-w-0 flex-1'>
-          <h4
-            className={`${inter.className} truncate font-medium text-foreground text-sm leading-none`}
-          >
-            {title}
-          </h4>
-          <p
-            className={`${inter.className} mt-1 flex items-center gap-2 text-muted-foreground text-xs`}
-          >
+          <h4 className='truncate font-medium text-foreground text-sm leading-none'>{title}</h4>
+          <p className='mt-1 flex items-center gap-2 text-muted-foreground text-xs'>
             <span>{authorName}</span>
             <span>{usageCount.toLocaleString()} copies</span>
           </p>

apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx

@@ -1,4 +1,3 @@
-import { inter } from '@/app/_styles/fonts/inter/inter'
 import LandingTemplatePreview from '@/app/(landing)/components/landing-templates/components/landing-template-preview'
 
 const templates = [
@@ -80,7 +79,7 @@ export default function LandingTemplates() {
   return (
     <section
       id='templates'
-      className={`${inter.className} flex flex-col px-4 pt-[40px] sm:px-[50px] sm:pt-[34px]`}
+      className='flex flex-col px-4 pt-[40px] sm:px-[50px] sm:pt-[34px]'
       aria-labelledby='templates-heading'
     >
       <h2

apps/sim/app/(landing)/components/legal-layout.tsx

@@ -1,36 +1,29 @@
-'use client'
-
 import { isHosted } from '@/lib/core/config/feature-flags'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import Footer from '@/app/(landing)/components/footer/footer'
-import Nav from '@/app/(landing)/components/nav/nav'
+import Footer from '@/app/(home)/components/footer/footer'
+import Navbar from '@/app/(home)/components/navbar/navbar'
 
 interface LegalLayoutProps {
   title: string
   children: React.ReactNode
-  navVariant?: 'landing' | 'auth' | 'legal'
 }
 
-export default function LegalLayout({ title, children, navVariant = 'legal' }: LegalLayoutProps) {
+export default function LegalLayout({ title, children }: LegalLayoutProps) {
   return (
-    <main className={`${soehne.className} min-h-screen bg-white text-gray-900`}>
-      {/* Header - Nav handles all conditional logic */}
-      <Nav variant={navVariant} />
+    <main className='min-h-screen bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+      <header>
+        <Navbar />
+      </header>
 
-      {/* Content */}
-      <div className='px-12 pt-[40px] pb-[40px]'>
-        <h1 className='mb-12 text-center font-bold text-4xl text-gray-900 md:text-5xl'>{title}</h1>
-        <div className='prose prose-gray mx-auto prose-h2:mt-12 prose-h3:mt-8 prose-h2:mb-6 prose-h3:mb-4 space-y-8 text-gray-700'>
+      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
+        <h1 className='mb-12 text-center font-[500] text-4xl text-[#ECECEC] md:text-5xl'>
+          {title}
+        </h1>
+        <div className='space-y-8 text-[#999] text-[15px] leading-[1.7] [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:text-[#ECECEC] [&_h3]:mt-8 [&_h3]:mb-4 [&_h3]:text-[#ECECEC] [&_li]:text-[#999] [&_strong]:text-[#ECECEC]'>
           {children}
         </div>
       </div>
 
-      {/* Footer - Only for hosted instances */}
-      {isHosted && (
-        <div className='relative z-20'>
-          <Footer fullWidth={true} />
-        </div>
-      )}
+      {isHosted && <Footer hideCTA />}
     </main>
   )
 }

apps/sim/app/(landing)/components/nav/nav.tsx

@@ -8,7 +8,6 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { GithubIcon } from '@/components/icons'
 import { isHosted } from '@/lib/core/config/feature-flags'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
 import { useBrandConfig } from '@/ee/whitelabeling'
 import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
@@ -118,7 +117,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
   return (
     <nav
       aria-label='Primary navigation'
-      className={`${soehne.className} flex w-full items-center justify-between px-4 ${
+      className={`flex w-full items-center justify-between px-4 ${
         variant === 'auth' ? 'pt-[20px] sm:pt-[16.5px]' : 'pt-[12px] sm:pt-[8.5px]'
       } pb-[21px] sm:px-8 md:px-[44px]`}
       itemScope

apps/sim/app/(landing)/components/testimonials/testimonials.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
-import { inter } from '@/app/_styles/fonts/inter/inter'
 
 interface Testimonial {
   text: string
@@ -123,7 +122,7 @@ export default function Testimonials() {
   return (
     <section
       id='testimonials'
-      className={`flex hidden h-[150px] items-center sm:block ${inter.variable}`}
+      className='flex hidden h-[150px] items-center sm:block'
       aria-label='Social proof testimonials'
     >
       <div className='relative mx-auto h-full w-full max-w-[1289px] pl-[2px]'>
@@ -180,9 +179,7 @@ export default function Testimonials() {
                     </div>
 
                     {/* Tweet content below with padding */}
-                    <p
-                      className={`${inter.className} mt-2 line-clamp-4 font-[380] text-[#0A0A0A] text-[13px] leading-[1.3] transition-colors duration-300 group-hover:text-white`}
-                    >
+                    <p className='mt-2 line-clamp-4 font-[380] text-[#0A0A0A] text-[13px] leading-[1.3] transition-colors duration-300 group-hover:text-white'>
                       {tweet.text}
                     </p>
                   </div>

apps/sim/app/(landing)/privacy/page.tsx

@@ -582,7 +582,7 @@ export default function PrivacyPolicy() {
           Please note that we may ask you to verify your identity before responding to such
           requests.
         </p>
-        <p className='mb-4 border-[var(--brand-primary-hex)] border-l-4 bg-[var(--brand-primary-hex)]/10 p-3'>
+        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[#2A2A2A] p-3 text-[#ECECEC]'>
           You have the right to complain to a Data Protection Authority about our collection and use
           of your Personal Information. For more information, please contact your local data
           protection authority in the European Economic Area (EEA).
@@ -604,10 +604,7 @@ export default function PrivacyPolicy() {
           sharing practices (such as analytics or advertising services) may be considered a "sale"
           or "share" under CCPA/CPRA. You have the right to opt-out of such data sharing. To
           exercise this right, contact us at{' '}
-          <Link
-            href='mailto:privacy@sim.ai'
-            className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
-          >
+          <Link href='mailto:privacy@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
             privacy@sim.ai
           </Link>
           .
@@ -693,10 +690,7 @@ export default function PrivacyPolicy() {
           Sim interacts with are not covered by this policy and should be reported directly to the
           solution vendor in accordance with their disclosure policy (if any). Before beginning your
           inquiry, email us at{' '}
-          <Link
-            href='mailto:security@sim.ai'
-            className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
-          >
+          <Link href='mailto:security@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
             security@sim.ai
           </Link>{' '}
           if you're unsure whether a system or endpoint is in scope.
@@ -715,10 +709,7 @@ export default function PrivacyPolicy() {
         <h3 className='mb-2 font-medium text-xl'>Reporting a vulnerability</h3>
         <p className='mb-4'>
           To report any security flaws, send an email to{' '}
-          <Link
-            href='mailto:security@sim.ai'
-            className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
-          >
+          <Link href='mailto:security@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
             security@sim.ai
           </Link>
           . The next business day, we'll acknowledge receipt of your vulnerability report and keep
@@ -762,7 +753,7 @@ export default function PrivacyPolicy() {
             Email:{' '}
             <Link
               href='mailto:privacy@sim.ai'
-              className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
+              className='text-[#ECECEC] underline hover:text-white'
             >
               privacy@sim.ai
             </Link>

apps/sim/app/(landing)/terms/page.tsx

@@ -289,7 +289,7 @@ export default function TermsOfService() {
           Agreement. The arbitration will be conducted by JAMS, an established alternative dispute
           resolution provider.
         </p>
-        <p className='mb-4 border-[var(--brand-primary-hex)] border-l-4 bg-[var(--brand-primary-hex)]/10 p-3'>
+        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[#2A2A2A] p-3 text-[#ECECEC]'>
           YOU AND COMPANY AGREE THAT EACH OF US MAY BRING CLAIMS AGAINST THE OTHER ONLY ON AN
           INDIVIDUAL BASIS AND NOT ON A CLASS, REPRESENTATIVE, OR COLLECTIVE BASIS. ONLY INDIVIDUAL
           RELIEF IS AVAILABLE, AND DISPUTES OF MORE THAN ONE CUSTOMER OR USER CANNOT BE ARBITRATED
@@ -298,10 +298,7 @@ export default function TermsOfService() {
         <p className='mb-4'>
           You have the right to opt out of the provisions of this Arbitration Agreement by sending a
           timely written notice of your decision to opt out to:{' '}
-          <Link
-            href='mailto:legal@sim.ai'
-            className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
-          >
+          <Link href='mailto:legal@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
             legal@sim.ai{' '}
           </Link>
           within 30 days after first becoming subject to this Arbitration Agreement.
@@ -350,7 +347,7 @@ export default function TermsOfService() {
           Our Copyright Agent can be reached at:{' '}
           <Link
             href='mailto:copyright@sim.ai'
-            className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
+            className='text-[#ECECEC] underline hover:text-white'
           >
             copyright@sim.ai
           </Link>
@@ -361,10 +358,7 @@ export default function TermsOfService() {
         <h2 className='mb-4 font-semibold text-2xl'>18. Contact Us</h2>
         <p>
           If you have any questions about these Terms, please contact us at:{' '}
-          <Link
-            href='mailto:legal@sim.ai'
-            className='text-[var(--brand-primary-hex)] underline hover:text-[var(--brand-primary-hover-hex)]'
-          >
+          <Link href='mailto:legal@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
             legal@sim.ai
           </Link>
         </p>

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

@@ -13,6 +13,7 @@ export type AppSession = {
     emailVerified?: boolean
     name?: string | null
     image?: string | null
+    role?: string
     createdAt?: Date
     updatedAt?: Date
   } | null

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

@@ -20,7 +20,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     pathname.startsWith('/verify') ||
     pathname.startsWith('/changelog') ||
     pathname.startsWith('/chat') ||
-    pathname.startsWith('/studio') ||
+    pathname.startsWith('/blog') ||
     pathname.startsWith('/resume') ||
     pathname.startsWith('/form') ||
     pathname.startsWith('/oauth')

apps/sim/app/_styles/globals.css

@@ -17,6 +17,18 @@
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
 }
 
+.workspace-root {
+  letter-spacing: 0.02em;
+}
+
+.workspace-root code,
+.workspace-root kbd,
+.workspace-root samp,
+.workspace-root pre,
+.workspace-root .font-mono {
+  letter-spacing: normal;
+}
+
 .sidebar-container {
   width: var(--sidebar-width);
   transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
@@ -56,6 +68,19 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   opacity: 0;
 }
 
+@keyframes sidebar-collapse-guard {
+  from {
+    pointer-events: none;
+  }
+  to {
+    pointer-events: auto;
+  }
+}
+
+.sidebar-container[data-collapsed] {
+  animation: sidebar-collapse-guard 250ms step-end;
+}
+
 .sidebar-container.is-resizing {
   transition: none;
 }
@@ -160,7 +185,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #32bd7e;
+    --brand-tertiary-2: #33c482;
     --selection: #1a5cf6;
     --warning: #ea580c;
 
@@ -282,7 +307,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #32bd7e;
+    --brand-tertiary-2: #33c482;
     --selection: #4b83f7;
     --warning: #ff6600;
 
@@ -565,42 +590,6 @@ input[type="search"]::-ms-clear {
     background-color: hsl(var(--input-background));
   }
 
-  .auth-card {
-    background-color: var(--white) !important;
-    border-color: var(--border-muted) !important;
-  }
-
-  .dark .auth-card {
-    background-color: var(--surface-1) !important;
-    border-color: var(--border-muted) !important;
-  }
-
-  .auth-text-primary {
-    color: var(--text-inverse) !important;
-  }
-
-  .auth-text-secondary {
-    color: var(--text-secondary) !important;
-  }
-
-  .auth-text-muted {
-    color: var(--text-muted) !important;
-  }
-
-  .auth-divider {
-    border-color: var(--border-muted) !important;
-  }
-
-  .auth-card-shadow {
-    box-shadow:
-      0 10px 15px -3px rgba(0, 0, 0, 0.05),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
-  }
-
-  .auth-link {
-    color: var(--text-muted) !important;
-  }
-
   .transition-ring {
     transition-property: box-shadow, transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

apps/sim/app/api/billing/switch-plan/route.ts

@@ -142,7 +142,7 @@ export async function POST(request: NextRequest) {
             quantity: currentQuantity,
           },
         ],
-        proration_behavior: 'create_prorations',
+        proration_behavior: 'always_invoice',
       })
     }
 

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

@@ -302,6 +302,7 @@ export async function POST(req: NextRequest) {
           goRoute: '/api/copilot',
           autoExecuteTools: true,
           interactive: true,
+          promptForToolApproval: true,
         },
       })
 
@@ -315,6 +316,7 @@ export async function POST(req: NextRequest) {
       goRoute: '/api/copilot',
       autoExecuteTools: true,
       interactive: true,
+      promptForToolApproval: true,
     })
 
     const responseData = {

apps/sim/app/api/emails/preview/route.ts

@@ -171,7 +171,7 @@ export async function GET(request: NextRequest) {
         ([category, templates]) => `
         <h2 style="margin-top: 24px; margin-bottom: 12px; font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: 0.5px;">${category}</h2>
         <ul style="list-style: none; padding: 0; margin: 0;">
-          ${templates.map((t) => `<li style="margin: 8px 0;"><a href="?template=${t}" style="color: #32bd7e; text-decoration: none; font-size: 16px;">${t}</a></li>`).join('')}
+          ${templates.map((t) => `<li style="margin: 8px 0;"><a href="?template=${t}" style="color: #33C482; text-decoration: none; font-size: 16px;">${t}</a></li>`).join('')}
         </ul>
       `
       )

apps/sim/app/api/files/serve/[...path]/route.ts

@@ -102,7 +102,7 @@ async function handleLocalFile(filename: string, userId: string): Promise<NextRe
       throw new FileNotFoundError(`File not found: ${filename}`)
     }
 
-    const filePath = findLocalFile(filename)
+    const filePath = await findLocalFile(filename)
 
     if (!filePath) {
       throw new FileNotFoundError(`File not found: ${filename}`)
@@ -228,7 +228,7 @@ async function handleCloudProxyPublic(
 
 async function handleLocalFilePublic(filename: string): Promise<NextResponse> {
   try {
-    const filePath = findLocalFile(filename)
+    const filePath = await findLocalFile(filename)
 
     if (!filePath) {
       throw new FileNotFoundError(`File not found: ${filename}`)

apps/sim/app/api/files/upload/route.ts

@@ -75,7 +75,7 @@ export async function POST(request: NextRequest) {
     const uploadResults = []
 
     for (const file of files) {
-      const originalName = file.name || 'untitled'
+      const originalName = file.name || 'untitled.md'
 
       if (!validateFileExtension(originalName)) {
         const extension = originalName.split('.').pop()?.toLowerCase() || 'unknown'

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

@@ -331,7 +331,7 @@ describe('extractFilename', () => {
 
 describe('findLocalFile - Path Traversal Security Tests', () => {
   describe('path traversal attack prevention', () => {
-    it.concurrent('should reject classic path traversal attacks', () => {
+    it.concurrent('should reject classic path traversal attacks', async () => {
       const maliciousInputs = [
         '../../../etc/passwd',
         '..\\..\\..\\windows\\system32\\config\\sam',
@@ -340,35 +340,35 @@ describe('findLocalFile - Path Traversal Security Tests', () => {
         '..\\config.ini',
       ]
 
-      maliciousInputs.forEach((input) => {
-        const result = findLocalFile(input)
+      for (const input of maliciousInputs) {
+        const result = await findLocalFile(input)
         expect(result).toBeNull()
-      })
+      }
     })
 
-    it.concurrent('should reject encoded path traversal attempts', () => {
+    it.concurrent('should reject encoded path traversal attempts', async () => {
       const encodedInputs = [
         '%2e%2e%2f%2e%2e%2f%65%74%63%2f%70%61%73%73%77%64', // ../../../etc/passwd
         '..%2f..%2fetc%2fpasswd',
         '..%5c..%5cconfig.ini',
       ]
 
-      encodedInputs.forEach((input) => {
-        const result = findLocalFile(input)
+      for (const input of encodedInputs) {
+        const result = await findLocalFile(input)
         expect(result).toBeNull()
-      })
+      }
     })
 
-    it.concurrent('should reject mixed path separators', () => {
+    it.concurrent('should reject mixed path separators', async () => {
       const mixedInputs = ['../..\\config.txt', '..\\../secret.ini', '/..\\..\\system32']
 
-      mixedInputs.forEach((input) => {
-        const result = findLocalFile(input)
+      for (const input of mixedInputs) {
+        const result = await findLocalFile(input)
         expect(result).toBeNull()
-      })
+      }
     })
 
-    it.concurrent('should reject filenames with dangerous characters', () => {
+    it.concurrent('should reject filenames with dangerous characters', async () => {
       const dangerousInputs = [
         'file:with:colons.txt',
         'file|with|pipes.txt',
@@ -376,43 +376,45 @@ describe('findLocalFile - Path Traversal Security Tests', () => {
         'file*with*asterisks.txt',
       ]
 
-      dangerousInputs.forEach((input) => {
-        const result = findLocalFile(input)
+      for (const input of dangerousInputs) {
+        const result = await findLocalFile(input)
         expect(result).toBeNull()
-      })
+      }
     })
 
-    it.concurrent('should reject null and empty inputs', () => {
-      expect(findLocalFile('')).toBeNull()
-      expect(findLocalFile('   ')).toBeNull()
-      expect(findLocalFile('\t\n')).toBeNull()
+    it.concurrent('should reject null and empty inputs', async () => {
+      expect(await findLocalFile('')).toBeNull()
+      expect(await findLocalFile('   ')).toBeNull()
+      expect(await findLocalFile('\t\n')).toBeNull()
     })
 
-    it.concurrent('should reject filenames that become empty after sanitization', () => {
+    it.concurrent('should reject filenames that become empty after sanitization', async () => {
       const emptyAfterSanitization = ['../..', '..\\..\\', '////', '....', '..']
 
-      emptyAfterSanitization.forEach((input) => {
-        const result = findLocalFile(input)
+      for (const input of emptyAfterSanitization) {
+        const result = await findLocalFile(input)
         expect(result).toBeNull()
-      })
+      }
     })
   })
 
   describe('security validation passes for legitimate files', () => {
-    it.concurrent('should accept properly formatted filenames without throwing errors', () => {
-      const legitimateInputs = [
-        'document.pdf',
-        'image.png',
-        'data.csv',
-        'report-2024.doc',
-        'file_with_underscores.txt',
-        'file-with-dashes.json',
-      ]
+    it.concurrent(
+      'should accept properly formatted filenames without throwing errors',
+      async () => {
+        const legitimateInputs = [
+          'document.pdf',
+          'image.png',
+          'data.csv',
+          'report-2024.doc',
+          'file_with_underscores.txt',
+          'file-with-dashes.json',
+        ]
 
-      legitimateInputs.forEach((input) => {
-        // Should not throw security errors for legitimate filenames
-        expect(() => findLocalFile(input)).not.toThrow()
-      })
-    })
+        for (const input of legitimateInputs) {
+          await expect(findLocalFile(input)).resolves.toBeDefined()
+        }
+      }
+    )
   })
 })

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

@@ -1,8 +1,5 @@
-import { existsSync } from 'fs'
-import path from 'path'
 import { createLogger } from '@sim/logger'
 import { NextResponse } from 'next/server'
-import { UPLOAD_DIR } from '@/lib/uploads/config'
 import { sanitizeFileKey } from '@/lib/uploads/utils/file-utils'
 
 const logger = createLogger('FilesUtils')
@@ -123,76 +120,29 @@ export function extractFilename(path: string): string {
   return filename
 }
 
-function sanitizeFilename(filename: string): string {
-  if (!filename || typeof filename !== 'string') {
-    throw new Error('Invalid filename provided')
-  }
-
-  if (!filename.includes('/')) {
-    throw new Error('File key must include a context prefix (e.g., kb/, workspace/, execution/)')
-  }
-
-  const segments = filename.split('/')
-
-  const sanitizedSegments = segments.map((segment) => {
-    if (segment === '..' || segment === '.') {
-      throw new Error('Path traversal detected')
-    }
-
-    const sanitized = segment.replace(/\.\./g, '').replace(/[\\]/g, '').replace(/^\./g, '').trim()
-
-    if (!sanitized) {
-      throw new Error('Invalid or empty path segment after sanitization')
-    }
-
-    if (
-      sanitized.includes(':') ||
-      sanitized.includes('|') ||
-      sanitized.includes('?') ||
-      sanitized.includes('*') ||
-      sanitized.includes('\x00') ||
-      /[\x00-\x1F\x7F]/.test(sanitized)
-    ) {
-      throw new Error('Path segment contains invalid characters')
-    }
-
-    return sanitized
-  })
-
-  return sanitizedSegments.join(path.sep)
-}
-
-export function findLocalFile(filename: string): string | null {
+export async function findLocalFile(filename: string): Promise<string | null> {
   try {
     const sanitizedFilename = sanitizeFileKey(filename)
 
-    // Reject if sanitized filename is empty or only contains path separators/dots
     if (!sanitizedFilename || !sanitizedFilename.trim() || /^[/\\.\s]+$/.test(sanitizedFilename)) {
       return null
     }
 
-    const possiblePaths = [
-      path.join(UPLOAD_DIR, sanitizedFilename),
-      path.join(process.cwd(), 'uploads', sanitizedFilename),
-    ]
+    const { existsSync } = await import('fs')
+    const path = await import('path')
+    const { UPLOAD_DIR_SERVER } = await import('@/lib/uploads/core/setup.server')
 
-    for (const filePath of possiblePaths) {
-      const resolvedPath = path.resolve(filePath)
-      const allowedDirs = [path.resolve(UPLOAD_DIR), path.resolve(process.cwd(), 'uploads')]
+    const resolvedPath = path.join(UPLOAD_DIR_SERVER, sanitizedFilename)
 
-      // Must be within allowed directory but NOT the directory itself
-      const isWithinAllowedDir = allowedDirs.some(
-        (allowedDir) =>
-          resolvedPath.startsWith(allowedDir + path.sep) && resolvedPath !== allowedDir
-      )
+    if (
+      !resolvedPath.startsWith(UPLOAD_DIR_SERVER + path.sep) ||
+      resolvedPath === UPLOAD_DIR_SERVER
+    ) {
+      return null
+    }
 
-      if (!isWithinAllowedDir) {
-        continue
-      }
-
-      if (existsSync(resolvedPath)) {
-        return resolvedPath
-      }
+    if (existsSync(resolvedPath)) {
+      return resolvedPath
     }
 
     return null

apps/sim/app/api/knowledge/[id]/documents/upsert/route.ts

@@ -0,0 +1,248 @@
+import { randomUUID } from 'crypto'
+import { db } from '@sim/db'
+import { document } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { and, eq, isNull } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { AuditAction, AuditResourceType, recordAudit } from '@/lib/audit/log'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import {
+  createDocumentRecords,
+  deleteDocument,
+  getProcessingConfig,
+  processDocumentsWithQueue,
+} from '@/lib/knowledge/documents/service'
+import { authorizeWorkflowByWorkspacePermission } from '@/lib/workflows/utils'
+import { checkKnowledgeBaseWriteAccess } from '@/app/api/knowledge/utils'
+
+const logger = createLogger('DocumentUpsertAPI')
+
+const UpsertDocumentSchema = z.object({
+  documentId: z.string().optional(),
+  filename: z.string().min(1, 'Filename is required'),
+  fileUrl: z.string().min(1, 'File URL is required'),
+  fileSize: z.number().min(1, 'File size must be greater than 0'),
+  mimeType: z.string().min(1, 'MIME type is required'),
+  documentTagsData: z.string().optional(),
+  processingOptions: z.object({
+    chunkSize: z.number().min(100).max(4000),
+    minCharactersPerChunk: z.number().min(1).max(2000),
+    recipe: z.string(),
+    lang: z.string(),
+    chunkOverlap: z.number().min(0).max(500),
+  }),
+  workflowId: z.string().optional(),
+})
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const requestId = randomUUID().slice(0, 8)
+  const { id: knowledgeBaseId } = await params
+
+  try {
+    const body = await req.json()
+
+    logger.info(`[${requestId}] Knowledge base document upsert request`, {
+      knowledgeBaseId,
+      hasDocumentId: !!body.documentId,
+      filename: body.filename,
+    })
+
+    const auth = await checkSessionOrInternalAuth(req, { requireWorkflowId: false })
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Authentication failed: ${auth.error || 'Unauthorized'}`)
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+    const userId = auth.userId
+
+    const validatedData = UpsertDocumentSchema.parse(body)
+
+    if (validatedData.workflowId) {
+      const authorization = await authorizeWorkflowByWorkspacePermission({
+        workflowId: validatedData.workflowId,
+        userId,
+        action: 'write',
+      })
+      if (!authorization.allowed) {
+        return NextResponse.json(
+          { error: authorization.message || 'Access denied' },
+          { status: authorization.status }
+        )
+      }
+    }
+
+    const accessCheck = await checkKnowledgeBaseWriteAccess(knowledgeBaseId, userId)
+
+    if (!accessCheck.hasAccess) {
+      if ('notFound' in accessCheck && accessCheck.notFound) {
+        logger.warn(`[${requestId}] Knowledge base not found: ${knowledgeBaseId}`)
+        return NextResponse.json({ error: 'Knowledge base not found' }, { status: 404 })
+      }
+      logger.warn(
+        `[${requestId}] User ${userId} attempted to upsert document in unauthorized knowledge base ${knowledgeBaseId}`
+      )
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    let existingDocumentId: string | null = null
+    let isUpdate = false
+
+    if (validatedData.documentId) {
+      const existingDoc = await db
+        .select({ id: document.id })
+        .from(document)
+        .where(
+          and(
+            eq(document.id, validatedData.documentId),
+            eq(document.knowledgeBaseId, knowledgeBaseId),
+            isNull(document.deletedAt)
+          )
+        )
+        .limit(1)
+
+      if (existingDoc.length > 0) {
+        existingDocumentId = existingDoc[0].id
+      }
+    } else {
+      const docsByFilename = await db
+        .select({ id: document.id })
+        .from(document)
+        .where(
+          and(
+            eq(document.filename, validatedData.filename),
+            eq(document.knowledgeBaseId, knowledgeBaseId),
+            isNull(document.deletedAt)
+          )
+        )
+        .limit(1)
+
+      if (docsByFilename.length > 0) {
+        existingDocumentId = docsByFilename[0].id
+      }
+    }
+
+    if (existingDocumentId) {
+      isUpdate = true
+      logger.info(
+        `[${requestId}] Found existing document ${existingDocumentId}, creating replacement before deleting old`
+      )
+    }
+
+    const createdDocuments = await createDocumentRecords(
+      [
+        {
+          filename: validatedData.filename,
+          fileUrl: validatedData.fileUrl,
+          fileSize: validatedData.fileSize,
+          mimeType: validatedData.mimeType,
+          ...(validatedData.documentTagsData && {
+            documentTagsData: validatedData.documentTagsData,
+          }),
+        },
+      ],
+      knowledgeBaseId,
+      requestId
+    )
+
+    const firstDocument = createdDocuments[0]
+    if (!firstDocument) {
+      logger.error(`[${requestId}] createDocumentRecords returned empty array unexpectedly`)
+      return NextResponse.json({ error: 'Failed to create document record' }, { status: 500 })
+    }
+
+    if (existingDocumentId) {
+      try {
+        await deleteDocument(existingDocumentId, requestId)
+      } catch (deleteError) {
+        logger.error(
+          `[${requestId}] Failed to delete old document ${existingDocumentId}, rolling back new record`,
+          deleteError
+        )
+        await deleteDocument(firstDocument.documentId, requestId).catch(() => {})
+        return NextResponse.json({ error: 'Failed to replace existing document' }, { status: 500 })
+      }
+    }
+
+    processDocumentsWithQueue(
+      createdDocuments,
+      knowledgeBaseId,
+      validatedData.processingOptions,
+      requestId
+    ).catch((error: unknown) => {
+      logger.error(`[${requestId}] Critical error in document processing pipeline:`, error)
+    })
+
+    try {
+      const { PlatformEvents } = await import('@/lib/core/telemetry')
+      PlatformEvents.knowledgeBaseDocumentsUploaded({
+        knowledgeBaseId,
+        documentsCount: 1,
+        uploadType: 'single',
+        chunkSize: validatedData.processingOptions.chunkSize,
+        recipe: validatedData.processingOptions.recipe,
+      })
+    } catch (_e) {
+      // Silently fail
+    }
+
+    recordAudit({
+      workspaceId: accessCheck.knowledgeBase?.workspaceId ?? null,
+      actorId: userId,
+      actorName: auth.userName,
+      actorEmail: auth.userEmail,
+      action: isUpdate ? AuditAction.DOCUMENT_UPDATED : AuditAction.DOCUMENT_UPLOADED,
+      resourceType: AuditResourceType.DOCUMENT,
+      resourceId: knowledgeBaseId,
+      resourceName: validatedData.filename,
+      description: isUpdate
+        ? `Upserted (replaced) document "${validatedData.filename}" in knowledge base "${knowledgeBaseId}"`
+        : `Upserted (created) document "${validatedData.filename}" in knowledge base "${knowledgeBaseId}"`,
+      metadata: {
+        fileName: validatedData.filename,
+        previousDocumentId: existingDocumentId,
+        isUpdate,
+      },
+      request: req,
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: {
+        documentsCreated: [
+          {
+            documentId: firstDocument.documentId,
+            filename: firstDocument.filename,
+            status: 'pending',
+          },
+        ],
+        isUpdate,
+        previousDocumentId: existingDocumentId,
+        processingMethod: 'background',
+        processingConfig: {
+          maxConcurrentDocuments: getProcessingConfig().maxConcurrentDocuments,
+          batchSize: getProcessingConfig().batchSize,
+        },
+      },
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Invalid upsert request data`, { errors: error.errors })
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error upserting document`, error)
+
+    const errorMessage = error instanceof Error ? error.message : 'Failed to upsert document'
+    const isStorageLimitError =
+      errorMessage.includes('Storage limit exceeded') || errorMessage.includes('storage limit')
+    const isMissingKnowledgeBase = errorMessage === 'Knowledge base not found'
+
+    return NextResponse.json(
+      { error: errorMessage },
+      { status: isMissingKnowledgeBase ? 404 : isStorageLimitError ? 413 : 500 }
+    )
+  }
+}

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

@@ -19,6 +19,7 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { validateOAuthAccessToken } from '@/lib/auth/oauth-token'
 import { getHighestPrioritySubscription } from '@/lib/billing/core/subscription'
 import { ORCHESTRATION_TIMEOUT_MS, SIM_AGENT_API_URL } from '@/lib/copilot/constants'
+import { orchestrateCopilotStream } from '@/lib/copilot/orchestrator'
 import { orchestrateSubagentStream } from '@/lib/copilot/orchestrator/subagent'
 import {
   executeToolServerSide,
@@ -28,6 +29,10 @@ import { DIRECT_TOOL_DEFS, SUBAGENT_TOOL_DEFS } from '@/lib/copilot/tools/mcp/de
 import { env } from '@/lib/core/config/env'
 import { RateLimiter } from '@/lib/core/rate-limiter'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+import {
+  authorizeWorkflowByWorkspacePermission,
+  resolveWorkflowIdForUser,
+} from '@/lib/workflows/utils'
 
 const logger = createLogger('CopilotMcpAPI')
 const mcpRateLimiter = new RateLimiter()
@@ -660,12 +665,110 @@ async function handleDirectToolCall(
   }
 }
 
+/**
+ * Build mode uses the main chat orchestrator with the 'fast' command instead of
+ * the subagent endpoint. In Go, 'build' is not a registered subagent — it's a mode
+ * (ModeFast) on the main chat processor that bypasses subagent orchestration and
+ * executes all tools directly.
+ */
+async function handleBuildToolCall(
+  args: Record<string, unknown>,
+  userId: string,
+  abortSignal?: AbortSignal
+): Promise<CallToolResult> {
+  try {
+    const requestText = (args.request as string) || JSON.stringify(args)
+    const workflowId = args.workflowId as string | undefined
+
+    const resolved = workflowId
+      ? await (async () => {
+          const authorization = await authorizeWorkflowByWorkspacePermission({
+            workflowId,
+            userId,
+            action: 'read',
+          })
+          return authorization.allowed ? { workflowId } : null
+        })()
+      : await resolveWorkflowIdForUser(userId)
+
+    if (!resolved?.workflowId) {
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                success: false,
+                error: 'workflowId is required for build. Call create_workflow first.',
+              },
+              null,
+              2
+            ),
+          },
+        ],
+        isError: true,
+      }
+    }
+
+    const chatId = randomUUID()
+
+    const requestPayload = {
+      message: requestText,
+      workflowId: resolved.workflowId,
+      userId,
+      model: DEFAULT_COPILOT_MODEL,
+      mode: 'agent',
+      commands: ['fast'],
+      messageId: randomUUID(),
+      chatId,
+    }
+
+    const result = await orchestrateCopilotStream(requestPayload, {
+      userId,
+      workflowId: resolved.workflowId,
+      chatId,
+      goRoute: '/api/mcp',
+      autoExecuteTools: true,
+      timeout: 300000,
+      interactive: false,
+      abortSignal,
+    })
+
+    const responseData = {
+      success: result.success,
+      content: result.content,
+      toolCalls: result.toolCalls,
+      error: result.error,
+    }
+
+    return {
+      content: [{ type: 'text', text: JSON.stringify(responseData, null, 2) }],
+      isError: !result.success,
+    }
+  } catch (error) {
+    logger.error('Build tool call failed', { error })
+    return {
+      content: [
+        {
+          type: 'text',
+          text: `Build failed: ${error instanceof Error ? error.message : String(error)}`,
+        },
+      ],
+      isError: true,
+    }
+  }
+}
+
 async function handleSubagentToolCall(
   toolDef: (typeof SUBAGENT_TOOL_DEFS)[number],
   args: Record<string, unknown>,
   userId: string,
   abortSignal?: AbortSignal
 ): Promise<CallToolResult> {
+  if (toolDef.agentId === 'build') {
+    return handleBuildToolCall(args, userId, abortSignal)
+  }
+
   try {
     const requestText =
       (args.request as string) ||

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

@@ -7,7 +7,11 @@ import { z } from 'zod'
 import { getSession } from '@/lib/auth'
 import { resolveOrCreateChat } from '@/lib/copilot/chat-lifecycle'
 import { buildCopilotRequestPayload } from '@/lib/copilot/chat-payload'
-import { createSSEStream, SSE_RESPONSE_HEADERS } from '@/lib/copilot/chat-streaming'
+import {
+  createSSEStream,
+  SSE_RESPONSE_HEADERS,
+  waitForPendingChatStream,
+} from '@/lib/copilot/chat-streaming'
 import type { OrchestratorResult } from '@/lib/copilot/orchestrator/types'
 import { processContextsServer, resolveActiveResourceContext } from '@/lib/copilot/process-contents'
 import { createRequestTracker, createUnauthorizedResponse } from '@/lib/copilot/request-helpers'
@@ -244,6 +248,10 @@ export async function POST(req: NextRequest) {
       { selectedModel: '' }
     )
 
+    if (actualChatId) {
+      await waitForPendingChatStream(actualChatId)
+    }
+
     const stream = createSSEStream({
       requestPayload,
       userId: authenticatedUserId,
@@ -261,7 +269,8 @@ export async function POST(req: NextRequest) {
         chatId: actualChatId,
         goRoute: '/api/mothership',
         autoExecuteTools: true,
-        interactive: false,
+        interactive: true,
+        promptForToolApproval: false,
         onComplete: async (result: OrchestratorResult) => {
           if (!actualChatId) return
 
@@ -270,6 +279,7 @@ export async function POST(req: NextRequest) {
             role: 'assistant' as const,
             content: result.content,
             timestamp: new Date().toISOString(),
+            ...(result.requestId ? { requestId: result.requestId } : {}),
           }
           if (result.toolCalls.length > 0) {
             assistantMessage.toolCalls = result.toolCalls

apps/sim/app/api/organizations/[id]/seats/route.ts

@@ -161,7 +161,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
             quantity: newSeatCount,
           },
         ],
-        proration_behavior: 'create_prorations', // Stripe's default - charge/credit immediately
+        proration_behavior: 'always_invoice',
       }
     )
 
@@ -213,7 +213,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       oldSeats: currentSeats,
       newSeats: newSeatCount,
       updatedBy: session.user.id,
-      prorationBehavior: 'create_prorations',
+      prorationBehavior: 'always_invoice',
     })
 
     return NextResponse.json({

apps/sim/app/api/table/import-csv/route.ts

@@ -0,0 +1,276 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import {
+  batchInsertRows,
+  createTable,
+  deleteTable,
+  getWorkspaceTableLimits,
+  type TableSchema,
+} from '@/lib/table'
+import type { ColumnDefinition, RowData } from '@/lib/table/types'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+import { normalizeColumn } from '@/app/api/table/utils'
+
+const logger = createLogger('TableImportCSV')
+
+const MAX_CSV_FILE_SIZE = 50 * 1024 * 1024
+const MAX_BATCH_SIZE = 1000
+const SCHEMA_SAMPLE_SIZE = 100
+
+type ColumnType = 'string' | 'number' | 'boolean' | 'date'
+
+async function parseCsvBuffer(
+  buffer: Buffer,
+  delimiter = ','
+): Promise<{ headers: string[]; rows: Record<string, unknown>[] }> {
+  const { parse } = await import('csv-parse/sync')
+  const parsed = parse(buffer.toString('utf-8'), {
+    columns: true,
+    skip_empty_lines: true,
+    trim: true,
+    relax_column_count: true,
+    relax_quotes: true,
+    skip_records_with_error: true,
+    cast: false,
+    delimiter,
+  }) as Record<string, unknown>[]
+
+  if (parsed.length === 0) {
+    throw new Error('CSV file has no data rows')
+  }
+
+  const headers = Object.keys(parsed[0])
+  if (headers.length === 0) {
+    throw new Error('CSV file has no headers')
+  }
+
+  return { headers, rows: parsed }
+}
+
+function inferColumnType(values: unknown[]): ColumnType {
+  const nonEmpty = values.filter((v) => v !== null && v !== undefined && v !== '')
+  if (nonEmpty.length === 0) return 'string'
+
+  const allNumber = nonEmpty.every((v) => {
+    const n = Number(v)
+    return !Number.isNaN(n) && String(v).trim() !== ''
+  })
+  if (allNumber) return 'number'
+
+  const allBoolean = nonEmpty.every((v) => {
+    const s = String(v).toLowerCase()
+    return s === 'true' || s === 'false'
+  })
+  if (allBoolean) return 'boolean'
+
+  const isoDatePattern = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2})?)?/
+  const allDate = nonEmpty.every((v) => {
+    const s = String(v)
+    return isoDatePattern.test(s) && !Number.isNaN(Date.parse(s))
+  })
+  if (allDate) return 'date'
+
+  return 'string'
+}
+
+function inferSchema(headers: string[], rows: Record<string, unknown>[]): ColumnDefinition[] {
+  const sample = rows.slice(0, SCHEMA_SAMPLE_SIZE)
+  const seen = new Set<string>()
+
+  return headers.map((name) => {
+    let colName = sanitizeName(name)
+    let suffix = 2
+    while (seen.has(colName.toLowerCase())) {
+      colName = `${sanitizeName(name)}_${suffix}`
+      suffix++
+    }
+    seen.add(colName.toLowerCase())
+
+    return {
+      name: colName,
+      type: inferColumnType(sample.map((r) => r[name])),
+    }
+  })
+}
+
+/**
+ * Strips non-alphanumeric characters (except underscore), collapses runs of
+ * underscores, and ensures the name starts with a letter or underscore.
+ * Used for both table names and column names to satisfy NAME_PATTERN.
+ */
+function sanitizeName(raw: string, fallbackPrefix = 'col'): string {
+  let name = raw
+    .trim()
+    .replace(/[^a-zA-Z0-9_]/g, '_')
+    .replace(/_+/g, '_')
+    .replace(/^_+|_+$/g, '')
+
+  if (!name || /^\d/.test(name)) {
+    name = `${fallbackPrefix}_${name}`
+  }
+
+  return name
+}
+
+function coerceValue(value: unknown, colType: ColumnType): string | number | boolean | null {
+  if (value === null || value === undefined || value === '') return null
+  switch (colType) {
+    case 'number': {
+      const n = Number(value)
+      return Number.isNaN(n) ? null : n
+    }
+    case 'boolean': {
+      const s = String(value).toLowerCase()
+      if (s === 'true') return true
+      if (s === 'false') return false
+      return null
+    }
+    case 'date': {
+      const d = new Date(String(value))
+      return Number.isNaN(d.getTime()) ? String(value) : d.toISOString()
+    }
+    default:
+      return String(value)
+  }
+}
+
+function coerceRows(
+  rows: Record<string, unknown>[],
+  columns: ColumnDefinition[],
+  headerToColumn: Map<string, string>
+): RowData[] {
+  const colTypeMap = new Map(columns.map((c) => [c.name, c.type as ColumnType]))
+
+  return rows.map((row) => {
+    const coerced: RowData = {}
+    for (const [header, value] of Object.entries(row)) {
+      const colName = headerToColumn.get(header)
+      if (colName) {
+        coerced[colName] = coerceValue(value, colTypeMap.get(colName) ?? 'string')
+      }
+    }
+    return coerced
+  })
+}
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+    }
+
+    const formData = await request.formData()
+    const file = formData.get('file')
+    const workspaceId = formData.get('workspaceId') as string | null
+
+    if (!file || !(file instanceof File)) {
+      return NextResponse.json({ error: 'CSV file is required' }, { status: 400 })
+    }
+
+    if (file.size > MAX_CSV_FILE_SIZE) {
+      return NextResponse.json(
+        { error: `File exceeds maximum allowed size of ${MAX_CSV_FILE_SIZE / (1024 * 1024)} MB` },
+        { status: 400 }
+      )
+    }
+
+    if (!workspaceId) {
+      return NextResponse.json({ error: 'Workspace ID is required' }, { status: 400 })
+    }
+
+    const permission = await getUserEntityPermissions(authResult.userId, 'workspace', workspaceId)
+    if (permission !== 'write' && permission !== 'admin') {
+      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
+    }
+
+    const ext = file.name.split('.').pop()?.toLowerCase()
+    if (ext !== 'csv' && ext !== 'tsv') {
+      return NextResponse.json({ error: 'Only CSV and TSV files are supported' }, { status: 400 })
+    }
+
+    const buffer = Buffer.from(await file.arrayBuffer())
+    const delimiter = ext === 'tsv' ? '\t' : ','
+    const { headers, rows } = await parseCsvBuffer(buffer, delimiter)
+
+    const columns = inferSchema(headers, rows)
+    const headerToColumn = new Map(headers.map((h, i) => [h, columns[i].name]))
+
+    const tableName = sanitizeName(file.name.replace(/\.[^.]+$/, ''), 'imported_table')
+    const planLimits = await getWorkspaceTableLimits(workspaceId)
+
+    const normalizedSchema: TableSchema = {
+      columns: columns.map(normalizeColumn),
+    }
+
+    const table = await createTable(
+      {
+        name: tableName,
+        description: `Imported from ${file.name}`,
+        schema: normalizedSchema,
+        workspaceId,
+        userId: authResult.userId,
+        maxRows: planLimits.maxRowsPerTable,
+        maxTables: planLimits.maxTables,
+      },
+      requestId
+    )
+
+    try {
+      const coerced = coerceRows(rows, columns, headerToColumn)
+      let inserted = 0
+      for (let i = 0; i < coerced.length; i += MAX_BATCH_SIZE) {
+        const batch = coerced.slice(i, i + MAX_BATCH_SIZE)
+        const batchRequestId = crypto.randomUUID().slice(0, 8)
+        const result = await batchInsertRows(
+          { tableId: table.id, rows: batch, workspaceId, userId: authResult.userId },
+          table,
+          batchRequestId
+        )
+        inserted += result.length
+      }
+
+      logger.info(`[${requestId}] CSV imported`, {
+        tableId: table.id,
+        fileName: file.name,
+        columns: columns.length,
+        rows: inserted,
+      })
+
+      return NextResponse.json({
+        success: true,
+        data: {
+          table: {
+            id: table.id,
+            name: table.name,
+            description: table.description,
+            schema: normalizedSchema,
+            rowCount: inserted,
+          },
+        },
+      })
+    } catch (insertError) {
+      await deleteTable(table.id, requestId).catch(() => {})
+      throw insertError
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    logger.error(`[${requestId}] CSV import failed:`, error)
+
+    const isClientError =
+      message.includes('maximum table limit') ||
+      message.includes('CSV file has no') ||
+      message.includes('Invalid table name') ||
+      message.includes('Invalid schema') ||
+      message.includes('already exists')
+
+    return NextResponse.json(
+      { error: isClientError ? message : 'Failed to import CSV' },
+      { status: isClientError ? 400 : 500 }
+    )
+  }
+}

apps/sim/app/api/tools/box/upload/route.ts

@@ -0,0 +1,140 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { FileInputSchema } from '@/lib/uploads/utils/file-schemas'
+import { processFilesToUserFiles, type RawFileInput } from '@/lib/uploads/utils/file-utils'
+import { downloadFileFromStorage } from '@/lib/uploads/utils/file-utils.server'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('BoxUploadAPI')
+
+const BoxUploadSchema = z.object({
+  accessToken: z.string().min(1, 'Access token is required'),
+  parentFolderId: z.string().min(1, 'Parent folder ID is required'),
+  file: FileInputSchema.optional().nullable(),
+  fileContent: z.string().optional().nullable(),
+  fileName: z.string().optional().nullable(),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+
+    if (!authResult.success) {
+      logger.warn(`[${requestId}] Unauthorized Box upload attempt: ${authResult.error}`)
+      return NextResponse.json(
+        { success: false, error: authResult.error || 'Authentication required' },
+        { status: 401 }
+      )
+    }
+
+    logger.info(`[${requestId}] Authenticated Box upload request via ${authResult.authType}`)
+
+    const body = await request.json()
+    const validatedData = BoxUploadSchema.parse(body)
+
+    let fileBuffer: Buffer
+    let fileName: string
+
+    if (validatedData.file) {
+      const userFiles = processFilesToUserFiles(
+        [validatedData.file as RawFileInput],
+        requestId,
+        logger
+      )
+
+      if (userFiles.length === 0) {
+        return NextResponse.json({ success: false, error: 'Invalid file input' }, { status: 400 })
+      }
+
+      const userFile = userFiles[0]
+      logger.info(`[${requestId}] Downloading file: ${userFile.name} (${userFile.size} bytes)`)
+
+      fileBuffer = await downloadFileFromStorage(userFile, requestId, logger)
+      fileName = validatedData.fileName || userFile.name
+    } else if (validatedData.fileContent) {
+      logger.info(`[${requestId}] Using legacy base64 content input`)
+      fileBuffer = Buffer.from(validatedData.fileContent, 'base64')
+      fileName = validatedData.fileName || 'file'
+    } else {
+      return NextResponse.json({ success: false, error: 'File is required' }, { status: 400 })
+    }
+
+    logger.info(
+      `[${requestId}] Uploading to Box folder ${validatedData.parentFolderId}: ${fileName} (${fileBuffer.length} bytes)`
+    )
+
+    const attributes = JSON.stringify({
+      name: fileName,
+      parent: { id: validatedData.parentFolderId },
+    })
+
+    const formData = new FormData()
+    formData.append('attributes', attributes)
+    formData.append(
+      'file',
+      new Blob([new Uint8Array(fileBuffer)], { type: 'application/octet-stream' }),
+      fileName
+    )
+
+    const response = await fetch('https://upload.box.com/api/2.0/files/content', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${validatedData.accessToken}`,
+      },
+      body: formData,
+    })
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      const errorMessage = data.message || 'Failed to upload file'
+      logger.error(`[${requestId}] Box API error:`, { status: response.status, data })
+      return NextResponse.json({ success: false, error: errorMessage }, { status: response.status })
+    }
+
+    const file = data.entries?.[0]
+
+    if (!file) {
+      return NextResponse.json(
+        { success: false, error: 'No file returned in upload response' },
+        { status: 500 }
+      )
+    }
+
+    logger.info(`[${requestId}] File uploaded successfully: ${file.name} (ID: ${file.id})`)
+
+    return NextResponse.json({
+      success: true,
+      output: {
+        id: file.id ?? '',
+        name: file.name ?? '',
+        size: file.size ?? 0,
+        sha1: file.sha1 ?? null,
+        createdAt: file.created_at ?? null,
+        modifiedAt: file.modified_at ?? null,
+        parentId: file.parent?.id ?? null,
+        parentName: file.parent?.name ?? null,
+      },
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Validation error:`, error.errors)
+      return NextResponse.json(
+        { success: false, error: error.errors[0]?.message || 'Validation failed' },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Unexpected error:`, error)
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/tools/docusign/route.ts

@@ -0,0 +1,466 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { FileInputSchema } from '@/lib/uploads/utils/file-schemas'
+import { processFilesToUserFiles, type RawFileInput } from '@/lib/uploads/utils/file-utils'
+import { downloadFileFromStorage } from '@/lib/uploads/utils/file-utils.server'
+
+const logger = createLogger('DocuSignAPI')
+
+interface DocuSignAccountInfo {
+  accountId: string
+  baseUri: string
+}
+
+/**
+ * Resolves the user's DocuSign account info from their access token
+ * by calling the DocuSign userinfo endpoint.
+ */
+async function resolveAccount(accessToken: string): Promise<DocuSignAccountInfo> {
+  const response = await fetch('https://account-d.docusign.com/oauth/userinfo', {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  })
+
+  if (!response.ok) {
+    const errorText = await response.text()
+    logger.error('Failed to resolve DocuSign account', {
+      status: response.status,
+      error: errorText,
+    })
+    throw new Error(`Failed to resolve DocuSign account: ${response.status}`)
+  }
+
+  const data = await response.json()
+  const accounts = data.accounts ?? []
+
+  const defaultAccount = accounts.find((a: { is_default: boolean }) => a.is_default) ?? accounts[0]
+  if (!defaultAccount) {
+    throw new Error('No DocuSign accounts found for this user')
+  }
+
+  const baseUri = defaultAccount.base_uri
+  if (!baseUri) {
+    throw new Error('DocuSign account is missing base_uri')
+  }
+
+  return {
+    accountId: defaultAccount.account_id,
+    baseUri,
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+  if (!authResult.success) {
+    return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const body = await request.json()
+  const { accessToken, operation, ...params } = body
+
+  if (!accessToken) {
+    return NextResponse.json({ success: false, error: 'Access token is required' }, { status: 400 })
+  }
+
+  if (!operation) {
+    return NextResponse.json({ success: false, error: 'Operation is required' }, { status: 400 })
+  }
+
+  try {
+    const account = await resolveAccount(accessToken)
+    const apiBase = `${account.baseUri}/restapi/v2.1/accounts/${account.accountId}`
+    const headers: Record<string, string> = {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    }
+
+    switch (operation) {
+      case 'send_envelope':
+        return await handleSendEnvelope(apiBase, headers, params)
+      case 'create_from_template':
+        return await handleCreateFromTemplate(apiBase, headers, params)
+      case 'get_envelope':
+        return await handleGetEnvelope(apiBase, headers, params)
+      case 'list_envelopes':
+        return await handleListEnvelopes(apiBase, headers, params)
+      case 'void_envelope':
+        return await handleVoidEnvelope(apiBase, headers, params)
+      case 'download_document':
+        return await handleDownloadDocument(apiBase, headers, params)
+      case 'list_templates':
+        return await handleListTemplates(apiBase, headers, params)
+      case 'list_recipients':
+        return await handleListRecipients(apiBase, headers, params)
+      default:
+        return NextResponse.json(
+          { success: false, error: `Unknown operation: ${operation}` },
+          { status: 400 }
+        )
+    }
+  } catch (error) {
+    logger.error('DocuSign API error', { operation, error })
+    const message = error instanceof Error ? error.message : 'Internal server error'
+    return NextResponse.json({ success: false, error: message }, { status: 500 })
+  }
+}
+
+async function handleSendEnvelope(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const { signerEmail, signerName, emailSubject, emailBody, ccEmail, ccName, file, status } = params
+
+  if (!signerEmail || !signerName || !emailSubject) {
+    return NextResponse.json(
+      { success: false, error: 'signerEmail, signerName, and emailSubject are required' },
+      { status: 400 }
+    )
+  }
+
+  let documentBase64 = ''
+  let documentName = 'document.pdf'
+
+  if (file) {
+    try {
+      const parsed = FileInputSchema.parse(file)
+      const userFiles = processFilesToUserFiles([parsed as RawFileInput], 'docusign-send', logger)
+      if (userFiles.length > 0) {
+        const userFile = userFiles[0]
+        const buffer = await downloadFileFromStorage(userFile, 'docusign-send', logger)
+        documentBase64 = buffer.toString('base64')
+        documentName = userFile.name
+      }
+    } catch (fileError) {
+      logger.error('Failed to process file for DocuSign envelope', { fileError })
+      return NextResponse.json(
+        { success: false, error: 'Failed to process uploaded file' },
+        { status: 400 }
+      )
+    }
+  }
+
+  const envelopeBody: Record<string, unknown> = {
+    emailSubject,
+    status: (status as string) || 'sent',
+    recipients: {
+      signers: [
+        {
+          email: signerEmail,
+          name: signerName,
+          recipientId: '1',
+          routingOrder: '1',
+          tabs: {
+            signHereTabs: [
+              {
+                anchorString: '/sig1/',
+                anchorUnits: 'pixels',
+                anchorXOffset: '0',
+                anchorYOffset: '0',
+              },
+            ],
+            dateSignedTabs: [
+              {
+                anchorString: '/date1/',
+                anchorUnits: 'pixels',
+                anchorXOffset: '0',
+                anchorYOffset: '0',
+              },
+            ],
+          },
+        },
+      ],
+      carbonCopies: ccEmail
+        ? [
+            {
+              email: ccEmail,
+              name: ccName || (ccEmail as string),
+              recipientId: '2',
+              routingOrder: '2',
+            },
+          ]
+        : [],
+    },
+  }
+
+  if (emailBody) {
+    envelopeBody.emailBlurb = emailBody
+  }
+
+  if (documentBase64) {
+    envelopeBody.documents = [
+      {
+        documentBase64,
+        name: documentName,
+        fileExtension: documentName.split('.').pop() || 'pdf',
+        documentId: '1',
+      },
+    ]
+  } else if (((status as string) || 'sent') === 'sent') {
+    return NextResponse.json(
+      { success: false, error: 'A document file is required to send an envelope' },
+      { status: 400 }
+    )
+  }
+
+  const response = await fetch(`${apiBase}/envelopes`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(envelopeBody),
+  })
+
+  const data = await response.json()
+  if (!response.ok) {
+    logger.error('DocuSign send envelope failed', { data, status: response.status })
+    return NextResponse.json(
+      { success: false, error: data.message || data.errorCode || 'Failed to send envelope' },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json(data)
+}
+
+async function handleCreateFromTemplate(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const { templateId, emailSubject, emailBody, templateRoles, status } = params
+
+  if (!templateId) {
+    return NextResponse.json({ success: false, error: 'templateId is required' }, { status: 400 })
+  }
+
+  let parsedRoles: unknown[] = []
+  if (templateRoles) {
+    if (typeof templateRoles === 'string') {
+      try {
+        parsedRoles = JSON.parse(templateRoles)
+      } catch {
+        return NextResponse.json(
+          { success: false, error: 'Invalid JSON for templateRoles' },
+          { status: 400 }
+        )
+      }
+    } else if (Array.isArray(templateRoles)) {
+      parsedRoles = templateRoles
+    }
+  }
+
+  const envelopeBody: Record<string, unknown> = {
+    templateId,
+    status: (status as string) || 'sent',
+    templateRoles: parsedRoles,
+  }
+
+  if (emailSubject) envelopeBody.emailSubject = emailSubject
+  if (emailBody) envelopeBody.emailBlurb = emailBody
+
+  const response = await fetch(`${apiBase}/envelopes`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(envelopeBody),
+  })
+
+  const data = await response.json()
+  if (!response.ok) {
+    logger.error('DocuSign create from template failed', { data, status: response.status })
+    return NextResponse.json(
+      {
+        success: false,
+        error: data.message || data.errorCode || 'Failed to create envelope from template',
+      },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json(data)
+}
+
+async function handleGetEnvelope(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const { envelopeId } = params
+  if (!envelopeId) {
+    return NextResponse.json({ success: false, error: 'envelopeId is required' }, { status: 400 })
+  }
+
+  const response = await fetch(
+    `${apiBase}/envelopes/${(envelopeId as string).trim()}?include=recipients,documents`,
+    { headers }
+  )
+  const data = await response.json()
+
+  if (!response.ok) {
+    return NextResponse.json(
+      { success: false, error: data.message || data.errorCode || 'Failed to get envelope' },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json(data)
+}
+
+async function handleListEnvelopes(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const queryParams = new URLSearchParams()
+
+  const fromDate = params.fromDate as string | undefined
+  if (fromDate) {
+    queryParams.append('from_date', fromDate)
+  } else {
+    const thirtyDaysAgo = new Date()
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    queryParams.append('from_date', thirtyDaysAgo.toISOString())
+  }
+
+  if (params.toDate) queryParams.append('to_date', params.toDate as string)
+  if (params.envelopeStatus) queryParams.append('status', params.envelopeStatus as string)
+  if (params.searchText) queryParams.append('search_text', params.searchText as string)
+  if (params.count) queryParams.append('count', params.count as string)
+
+  const response = await fetch(`${apiBase}/envelopes?${queryParams}`, { headers })
+  const data = await response.json()
+
+  if (!response.ok) {
+    return NextResponse.json(
+      { success: false, error: data.message || data.errorCode || 'Failed to list envelopes' },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json(data)
+}
+
+async function handleVoidEnvelope(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const { envelopeId, voidedReason } = params
+  if (!envelopeId) {
+    return NextResponse.json({ success: false, error: 'envelopeId is required' }, { status: 400 })
+  }
+  if (!voidedReason) {
+    return NextResponse.json({ success: false, error: 'voidedReason is required' }, { status: 400 })
+  }
+
+  const response = await fetch(`${apiBase}/envelopes/${(envelopeId as string).trim()}`, {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify({ status: 'voided', voidedReason }),
+  })
+
+  const data = await response.json()
+  if (!response.ok) {
+    return NextResponse.json(
+      { success: false, error: data.message || data.errorCode || 'Failed to void envelope' },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json({ envelopeId, status: 'voided' })
+}
+
+async function handleDownloadDocument(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const { envelopeId, documentId } = params
+  if (!envelopeId) {
+    return NextResponse.json({ success: false, error: 'envelopeId is required' }, { status: 400 })
+  }
+
+  const docId = (documentId as string) || 'combined'
+
+  const response = await fetch(
+    `${apiBase}/envelopes/${(envelopeId as string).trim()}/documents/${docId}`,
+    {
+      headers: { Authorization: headers.Authorization },
+    }
+  )
+
+  if (!response.ok) {
+    let errorText = ''
+    try {
+      errorText = await response.text()
+    } catch {
+      // ignore
+    }
+    return NextResponse.json(
+      { success: false, error: `Failed to download document: ${response.status} ${errorText}` },
+      { status: response.status }
+    )
+  }
+
+  const contentType = response.headers.get('content-type') || 'application/pdf'
+  const contentDisposition = response.headers.get('content-disposition') || ''
+  let fileName = `document-${docId}.pdf`
+
+  const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
+  if (filenameMatch) {
+    fileName = filenameMatch[1].replace(/['"]/g, '')
+  }
+
+  const buffer = Buffer.from(await response.arrayBuffer())
+  const base64Content = buffer.toString('base64')
+
+  return NextResponse.json({ base64Content, mimeType: contentType, fileName })
+}
+
+async function handleListTemplates(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const queryParams = new URLSearchParams()
+  if (params.searchText) queryParams.append('search_text', params.searchText as string)
+  if (params.count) queryParams.append('count', params.count as string)
+
+  const queryString = queryParams.toString()
+  const url = queryString ? `${apiBase}/templates?${queryString}` : `${apiBase}/templates`
+
+  const response = await fetch(url, { headers })
+  const data = await response.json()
+
+  if (!response.ok) {
+    return NextResponse.json(
+      { success: false, error: data.message || data.errorCode || 'Failed to list templates' },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json(data)
+}
+
+async function handleListRecipients(
+  apiBase: string,
+  headers: Record<string, string>,
+  params: Record<string, unknown>
+) {
+  const { envelopeId } = params
+  if (!envelopeId) {
+    return NextResponse.json({ success: false, error: 'envelopeId is required' }, { status: 400 })
+  }
+
+  const response = await fetch(`${apiBase}/envelopes/${(envelopeId as string).trim()}/recipients`, {
+    headers,
+  })
+  const data = await response.json()
+
+  if (!response.ok) {
+    return NextResponse.json(
+      { success: false, error: data.message || data.errorCode || 'Failed to list recipients' },
+      { status: response.status }
+    )
+  }
+
+  return NextResponse.json(data)
+}

apps/sim/app/api/tools/workday/assign-onboarding/route.ts

@@ -0,0 +1,67 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { createWorkdaySoapClient, extractRefId, wdRef } from '@/tools/workday/soap'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('WorkdayAssignOnboardingAPI')
+
+const RequestSchema = z.object({
+  tenantUrl: z.string().min(1),
+  tenant: z.string().min(1),
+  username: z.string().min(1),
+  password: z.string().min(1),
+  workerId: z.string().min(1),
+  onboardingPlanId: z.string().min(1),
+  actionEventId: z.string().min(1),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const data = RequestSchema.parse(body)
+
+    const client = await createWorkdaySoapClient(
+      data.tenantUrl,
+      data.tenant,
+      'humanResources',
+      data.username,
+      data.password
+    )
+
+    const [result] = await client.Put_Onboarding_Plan_AssignmentAsync({
+      Onboarding_Plan_Assignment_Data: {
+        Onboarding_Plan_Reference: wdRef('Onboarding_Plan_ID', data.onboardingPlanId),
+        Person_Reference: wdRef('WID', data.workerId),
+        Action_Event_Reference: wdRef('Background_Check_ID', data.actionEventId),
+        Assignment_Effective_Moment: new Date().toISOString(),
+        Active: true,
+      },
+    })
+
+    return NextResponse.json({
+      success: true,
+      output: {
+        assignmentId: extractRefId(result?.Onboarding_Plan_Assignment_Reference),
+        workerId: data.workerId,
+        planId: data.onboardingPlanId,
+      },
+    })
+  } catch (error) {
+    logger.error(`[${requestId}] Workday assign onboarding failed`, { error })
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/tools/workday/change-job/route.ts

@@ -0,0 +1,94 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { createWorkdaySoapClient, extractRefId, wdRef } from '@/tools/workday/soap'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('WorkdayChangeJobAPI')
+
+const RequestSchema = z.object({
+  tenantUrl: z.string().min(1),
+  tenant: z.string().min(1),
+  username: z.string().min(1),
+  password: z.string().min(1),
+  workerId: z.string().min(1),
+  effectiveDate: z.string().min(1),
+  newPositionId: z.string().optional(),
+  newJobProfileId: z.string().optional(),
+  newLocationId: z.string().optional(),
+  newSupervisoryOrgId: z.string().optional(),
+  reason: z.string().min(1, 'Reason is required for job changes'),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const data = RequestSchema.parse(body)
+
+    const changeJobDetailData: Record<string, unknown> = {
+      Reason_Reference: wdRef('Change_Job_Subcategory_ID', data.reason),
+    }
+    if (data.newPositionId) {
+      changeJobDetailData.Position_Reference = wdRef('Position_ID', data.newPositionId)
+    }
+    if (data.newJobProfileId) {
+      changeJobDetailData.Job_Profile_Reference = wdRef('Job_Profile_ID', data.newJobProfileId)
+    }
+    if (data.newLocationId) {
+      changeJobDetailData.Location_Reference = wdRef('Location_ID', data.newLocationId)
+    }
+    if (data.newSupervisoryOrgId) {
+      changeJobDetailData.Supervisory_Organization_Reference = wdRef(
+        'Supervisory_Organization_ID',
+        data.newSupervisoryOrgId
+      )
+    }
+
+    const client = await createWorkdaySoapClient(
+      data.tenantUrl,
+      data.tenant,
+      'staffing',
+      data.username,
+      data.password
+    )
+
+    const [result] = await client.Change_JobAsync({
+      Business_Process_Parameters: {
+        Auto_Complete: true,
+        Run_Now: true,
+      },
+      Change_Job_Data: {
+        Worker_Reference: wdRef('Employee_ID', data.workerId),
+        Effective_Date: data.effectiveDate,
+        Change_Job_Detail_Data: changeJobDetailData,
+      },
+    })
+
+    const eventRef = result?.Event_Reference
+
+    return NextResponse.json({
+      success: true,
+      output: {
+        eventId: extractRefId(eventRef),
+        workerId: data.workerId,
+        effectiveDate: data.effectiveDate,
+      },
+    })
+  } catch (error) {
+    logger.error(`[${requestId}] Workday change job failed`, { error })
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/tools/workday/create-prehire/route.ts

@@ -0,0 +1,134 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { createWorkdaySoapClient, extractRefId, wdRef } from '@/tools/workday/soap'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('WorkdayCreatePrehireAPI')
+
+const RequestSchema = z.object({
+  tenantUrl: z.string().min(1),
+  tenant: z.string().min(1),
+  username: z.string().min(1),
+  password: z.string().min(1),
+  legalName: z.string().min(1),
+  email: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  address: z.string().optional(),
+  countryCode: z.string().optional(),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const data = RequestSchema.parse(body)
+
+    if (!data.email && !data.phoneNumber && !data.address) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'At least one contact method (email, phone, or address) is required',
+        },
+        { status: 400 }
+      )
+    }
+
+    const parts = data.legalName.trim().split(/\s+/)
+    const firstName = parts[0] ?? ''
+    const lastName = parts.length > 1 ? parts.slice(1).join(' ') : ''
+
+    if (!lastName) {
+      return NextResponse.json(
+        { success: false, error: 'Legal name must include both a first name and last name' },
+        { status: 400 }
+      )
+    }
+
+    const client = await createWorkdaySoapClient(
+      data.tenantUrl,
+      data.tenant,
+      'staffing',
+      data.username,
+      data.password
+    )
+
+    const contactData: Record<string, unknown> = {}
+    if (data.email) {
+      contactData.Email_Address_Data = [
+        {
+          Email_Address: data.email,
+          Usage_Data: {
+            Type_Data: { Type_Reference: wdRef('Communication_Usage_Type_ID', 'WORK') },
+            Public: true,
+          },
+        },
+      ]
+    }
+    if (data.phoneNumber) {
+      contactData.Phone_Data = [
+        {
+          Phone_Number: data.phoneNumber,
+          Phone_Device_Type_Reference: wdRef('Phone_Device_Type_ID', 'Landline'),
+          Usage_Data: {
+            Type_Data: { Type_Reference: wdRef('Communication_Usage_Type_ID', 'WORK') },
+            Public: true,
+          },
+        },
+      ]
+    }
+    if (data.address) {
+      contactData.Address_Data = [
+        {
+          Formatted_Address: data.address,
+          Usage_Data: {
+            Type_Data: { Type_Reference: wdRef('Communication_Usage_Type_ID', 'WORK') },
+            Public: true,
+          },
+        },
+      ]
+    }
+
+    const [result] = await client.Put_ApplicantAsync({
+      Applicant_Data: {
+        Personal_Data: {
+          Name_Data: {
+            Legal_Name_Data: {
+              Name_Detail_Data: {
+                Country_Reference: wdRef('ISO_3166-1_Alpha-2_Code', data.countryCode ?? 'US'),
+                First_Name: firstName,
+                Last_Name: lastName,
+              },
+            },
+          },
+          Contact_Information_Data: contactData,
+        },
+      },
+    })
+
+    const applicantRef = result?.Applicant_Reference
+
+    return NextResponse.json({
+      success: true,
+      output: {
+        preHireId: extractRefId(applicantRef),
+        descriptor: applicantRef?.attributes?.Descriptor ?? null,
+      },
+    })
+  } catch (error) {
+    logger.error(`[${requestId}] Workday create prehire failed`, { error })
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/tools/workday/get-compensation/route.ts

@@ -0,0 +1,101 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import {
+  createWorkdaySoapClient,
+  extractRefId,
+  normalizeSoapArray,
+  type WorkdayCompensationDataSoap,
+  type WorkdayCompensationPlanSoap,
+  type WorkdayWorkerSoap,
+} from '@/tools/workday/soap'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('WorkdayGetCompensationAPI')
+
+const RequestSchema = z.object({
+  tenantUrl: z.string().min(1),
+  tenant: z.string().min(1),
+  username: z.string().min(1),
+  password: z.string().min(1),
+  workerId: z.string().min(1),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const data = RequestSchema.parse(body)
+
+    const client = await createWorkdaySoapClient(
+      data.tenantUrl,
+      data.tenant,
+      'humanResources',
+      data.username,
+      data.password
+    )
+
+    const [result] = await client.Get_WorkersAsync({
+      Request_References: {
+        Worker_Reference: {
+          ID: { attributes: { 'wd:type': 'Employee_ID' }, $value: data.workerId },
+        },
+      },
+      Response_Group: {
+        Include_Reference: true,
+        Include_Compensation: true,
+      },
+    })
+
+    const worker =
+      normalizeSoapArray(
+        result?.Response_Data?.Worker as WorkdayWorkerSoap | WorkdayWorkerSoap[] | undefined
+      )[0] ?? null
+    const compensationData = worker?.Worker_Data?.Compensation_Data
+
+    const mapPlan = (p: WorkdayCompensationPlanSoap) => ({
+      id: extractRefId(p.Compensation_Plan_Reference) ?? null,
+      planName: p.Compensation_Plan_Reference?.attributes?.Descriptor ?? null,
+      amount: p.Amount ?? p.Per_Unit_Amount ?? p.Individual_Target_Amount ?? null,
+      currency: extractRefId(p.Currency_Reference) ?? null,
+      frequency: extractRefId(p.Frequency_Reference) ?? null,
+    })
+
+    const planTypeKeys: (keyof WorkdayCompensationDataSoap)[] = [
+      'Employee_Base_Pay_Plan_Assignment_Data',
+      'Employee_Salary_Unit_Plan_Assignment_Data',
+      'Employee_Bonus_Plan_Assignment_Data',
+      'Employee_Allowance_Plan_Assignment_Data',
+      'Employee_Commission_Plan_Assignment_Data',
+      'Employee_Stock_Plan_Assignment_Data',
+      'Employee_Period_Salary_Plan_Assignment_Data',
+    ]
+
+    const compensationPlans: ReturnType<typeof mapPlan>[] = []
+    for (const key of planTypeKeys) {
+      for (const plan of normalizeSoapArray(compensationData?.[key])) {
+        compensationPlans.push(mapPlan(plan))
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      output: { compensationPlans },
+    })
+  } catch (error) {
+    logger.error(`[${requestId}] Workday get compensation failed`, { error })
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/tools/workday/get-organizations/route.ts

@@ -0,0 +1,94 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import {
+  createWorkdaySoapClient,
+  extractRefId,
+  normalizeSoapArray,
+  type WorkdayOrganizationSoap,
+} from '@/tools/workday/soap'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('WorkdayGetOrganizationsAPI')
+
+const RequestSchema = z.object({
+  tenantUrl: z.string().min(1),
+  tenant: z.string().min(1),
+  username: z.string().min(1),
+  password: z.string().min(1),
+  type: z.string().optional(),
+  limit: z.number().optional(),
+  offset: z.number().optional(),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const data = RequestSchema.parse(body)
+
+    const client = await createWorkdaySoapClient(
+      data.tenantUrl,
+      data.tenant,
+      'humanResources',
+      data.username,
+      data.password
+    )
+
+    const limit = data.limit ?? 20
+    const offset = data.offset ?? 0
+    const page = offset > 0 ? Math.floor(offset / limit) + 1 : 1
+
+    const [result] = await client.Get_OrganizationsAsync({
+      Response_Filter: { Page: page, Count: limit },
+      Request_Criteria: data.type
+        ? {
+            Organization_Type_Reference: {
+              ID: {
+                attributes: { 'wd:type': 'Organization_Type_ID' },
+                $value: data.type,
+              },
+            },
+          }
+        : undefined,
+      Response_Group: { Include_Hierarchy_Data: true },
+    })
+
+    const orgsArray = normalizeSoapArray(
+      result?.Response_Data?.Organization as
+        | WorkdayOrganizationSoap
+        | WorkdayOrganizationSoap[]
+        | undefined
+    )
+
+    const organizations = orgsArray.map((o) => ({
+      id: extractRefId(o.Organization_Reference) ?? null,
+      descriptor: o.Organization_Descriptor ?? null,
+      type: extractRefId(o.Organization_Data?.Organization_Type_Reference) ?? null,
+      subtype: extractRefId(o.Organization_Data?.Organization_Subtype_Reference) ?? null,
+      isActive: o.Organization_Data?.Inactive != null ? !o.Organization_Data.Inactive : null,
+    }))
+
+    const total = result?.Response_Results?.Total_Results ?? organizations.length
+
+    return NextResponse.json({
+      success: true,
+      output: { organizations, total },
+    })
+  } catch (error) {
+    logger.error(`[${requestId}] Workday get organizations failed`, { error })
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}