fix(admin): validate userId and email are strings

* feat(blog): v0.5 post

* improvement(blog): simplify title and remove code block header

- Simplified blog title from "Introducing Sim Studio v0.5" to "Introducing Sim v0.5"
- Removed language label header and copy button from code blocks for cleaner appearance

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

* ack PR comments

* small styling improvements

* created system to create post-specific components

* updated componnet

* cache invalidation

---------

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

apps/docs/components/icons.tsx

@@ -4696,26 +4696,6 @@ export function BedrockIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
-export function TableIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <rect width='18' height='18' x='3' y='3' rx='2' />
-      <path d='M3 9h18' />
-      <path d='M3 15h18' />
-      <path d='M9 3v18' />
-      <path d='M15 3v18' />
-    </svg>
-  )
-}
 export function ReductoIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

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

@@ -108,7 +108,6 @@ import {
   StagehandIcon,
   StripeIcon,
   SupabaseIcon,
-  TableIcon,
   TavilyIcon,
   TelegramIcon,
   TextractIcon,
@@ -237,7 +236,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   stripe: StripeIcon,
   stt: STTIcon,
   supabase: SupabaseIcon,
-  table: TableIcon,
   tavily: TavilyIcon,
   telegram: TelegramIcon,
   textract: TextractIcon,

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

@@ -104,7 +104,6 @@
     "stripe",
     "stt",
     "supabase",
-    "table",
     "tavily",
     "telegram",
     "textract",

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

@@ -1,351 +0,0 @@
----
-title: Table
-description: User-defined data tables for storing and querying structured data
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="table"
-  color="#10B981"
-/>
-
-Tables allow you to create and manage custom data tables directly within Sim. Store, query, and manipulate structured data within your workflows without needing external database integrations.
-
-**Why Use Tables?**
-- **No external setup**: Create tables instantly without configuring external databases
-- **Workflow-native**: Data persists across workflow executions and is accessible from any workflow in your workspace
-- **Flexible schema**: Define columns with types (string, number, boolean, date, json) and constraints (required, unique)
-- **Powerful querying**: Filter, sort, and paginate data using MongoDB-style operators
-- **Agent-friendly**: Tables can be used as tools by AI agents for dynamic data storage and retrieval
-
-**Key Features:**
-- Create tables with custom schemas
-- Insert, update, upsert, and delete rows
-- Query with filters and sorting
-- Batch operations for bulk inserts
-- Bulk updates and deletes by filter
-- Up to 10,000 rows per table, 100 tables per workspace
-
-## Creating Tables
-
-Tables are created from the **Tables** section in the sidebar. Each table requires:
-- **Name**: Alphanumeric with underscores (e.g., `customer_leads`)
-- **Description**: Optional description of the table's purpose
-- **Schema**: Define columns with name, type, and optional constraints
-
-### Column Types
-
-| Type | Description | Example Values |
-|------|-------------|----------------|
-| `string` | Text data | `"John Doe"`, `"active"` |
-| `number` | Numeric data | `42`, `99.99` |
-| `boolean` | True/false values | `true`, `false` |
-| `date` | Date/time values | `"2024-01-15T10:30:00Z"` |
-| `json` | Complex nested data | `{"address": {"city": "NYC"}}` |
-
-### Column Constraints
-
-- **Required**: Column must have a value (cannot be null)
-- **Unique**: Values must be unique across all rows (enables upsert matching)
-
-## Usage Instructions
-
-Create and manage custom data tables. Store, query, and manipulate structured data within workflows.
-
-## Tools
-
-### `table_query_rows`
-
-Query rows from a table with filtering, sorting, and pagination
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `filter` | object | No | Filter conditions using MongoDB-style operators |
-| `sort` | object | No | Sort order as \{column: "asc"\|"desc"\} |
-| `limit` | number | No | Maximum rows to return \(default: 100, max: 1000\) |
-| `offset` | number | No | Number of rows to skip \(default: 0\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether query succeeded |
-| `rows` | array | Query result rows |
-| `rowCount` | number | Number of rows returned |
-| `totalCount` | number | Total rows matching filter |
-| `limit` | number | Limit used in query |
-| `offset` | number | Offset used in query |
-
-### `table_insert_row`
-
-Insert a new row into a table
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `data` | object | Yes | Row data as JSON object matching the table schema |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether row was inserted |
-| `row` | object | Inserted row data including generated ID |
-| `message` | string | Status message |
-
-### `table_upsert_row`
-
-Insert or update a row based on unique column constraints. If a row with matching unique field exists, update it; otherwise insert a new row.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `data` | object | Yes | Row data to insert or update |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether row was upserted |
-| `row` | object | Upserted row data |
-| `operation` | string | Operation performed: "insert" or "update" |
-| `message` | string | Status message |
-
-### `table_batch_insert_rows`
-
-Insert multiple rows at once (up to 1000 rows per batch)
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `rows` | array | Yes | Array of row data objects to insert |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether batch insert succeeded |
-| `rows` | array | Array of inserted rows with IDs |
-| `insertedCount` | number | Number of rows inserted |
-| `message` | string | Status message |
-
-### `table_update_row`
-
-Update a specific row by its ID
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `rowId` | string | Yes | Row ID to update |
-| `data` | object | Yes | Data to update \(partial update supported\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether row was updated |
-| `row` | object | Updated row data |
-| `message` | string | Status message |
-
-### `table_update_rows_by_filter`
-
-Update multiple rows matching a filter condition
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `filter` | object | Yes | Filter to match rows for update |
-| `data` | object | Yes | Data to apply to matching rows |
-| `limit` | number | No | Maximum rows to update \(default: 1000\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether update succeeded |
-| `updatedCount` | number | Number of rows updated |
-| `updatedRowIds` | array | IDs of updated rows |
-| `message` | string | Status message |
-
-### `table_delete_row`
-
-Delete a specific row by its ID
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `rowId` | string | Yes | Row ID to delete |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether row was deleted |
-| `deletedCount` | number | Number of rows deleted \(1 or 0\) |
-| `message` | string | Status message |
-
-### `table_delete_rows_by_filter`
-
-Delete multiple rows matching a filter condition
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `filter` | object | Yes | Filter to match rows for deletion |
-| `limit` | number | No | Maximum rows to delete \(default: 1000\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether delete succeeded |
-| `deletedCount` | number | Number of rows deleted |
-| `deletedRowIds` | array | IDs of deleted rows |
-| `message` | string | Status message |
-
-### `table_get_row`
-
-Get a single row by its ID
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-| `rowId` | string | Yes | Row ID to retrieve |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether row was found |
-| `row` | object | Row data |
-| `message` | string | Status message |
-
-### `table_get_schema`
-
-Get the schema definition for a table
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `tableId` | string | Yes | Table ID |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether schema was retrieved |
-| `name` | string | Table name |
-| `columns` | array | Array of column definitions |
-| `message` | string | Status message |
-
-## Filter Operators
-
-Filters use MongoDB-style operators for flexible querying:
-
-| Operator | Description | Example |
-|----------|-------------|---------|
-| `$eq` | Equals | `{"status": {"$eq": "active"}}` or `{"status": "active"}` |
-| `$ne` | Not equals | `{"status": {"$ne": "deleted"}}` |
-| `$gt` | Greater than | `{"age": {"$gt": 18}}` |
-| `$gte` | Greater than or equal | `{"score": {"$gte": 80}}` |
-| `$lt` | Less than | `{"price": {"$lt": 100}}` |
-| `$lte` | Less than or equal | `{"quantity": {"$lte": 10}}` |
-| `$in` | In array | `{"status": {"$in": ["active", "pending"]}}` |
-| `$nin` | Not in array | `{"type": {"$nin": ["spam", "blocked"]}}` |
-| `$contains` | String contains | `{"email": {"$contains": "@gmail.com"}}` |
-
-### Combining Filters
-
-Multiple field conditions are combined with AND logic:
-
-```json
-{
-  "status": "active",
-  "age": {"$gte": 18}
-}
-```
-
-Use `$or` for OR logic:
-
-```json
-{
-  "$or": [
-    {"status": "active"},
-    {"status": "pending"}
-  ]
-}
-```
-
-## Sort Specification
-
-Specify sort order with column names and direction:
-
-```json
-{
-  "createdAt": "desc"
-}
-```
-
-Multi-column sorting:
-
-```json
-{
-  "priority": "desc",
-  "name": "asc"
-}
-```
-
-## Built-in Columns
-
-Every row automatically includes:
-
-| Column | Type | Description |
-|--------|------|-------------|
-| `id` | string | Unique row identifier |
-| `createdAt` | date | When the row was created |
-| `updatedAt` | date | When the row was last modified |
-
-These can be used in filters and sorting.
-
-## Limits
-
-| Resource | Limit |
-|----------|-------|
-| Tables per workspace | 100 |
-| Rows per table | 10,000 |
-| Columns per table | 50 |
-| Max row size | 100KB |
-| String value length | 10,000 characters |
-| Query limit | 1,000 rows |
-| Batch insert size | 1,000 rows |
-| Bulk update/delete | 1,000 rows |
-
-## Notes
-
-- Category: `blocks`
-- Type: `table`
-- Tables are scoped to workspaces and accessible from any workflow within that workspace
-- Data persists across workflow executions
-- Use unique constraints to enable upsert functionality
-- The visual filter/sort builder provides an easy way to construct queries without writing JSON

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

@@ -2,10 +2,9 @@
 
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -22,6 +21,7 @@ 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'
 import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
@@ -107,7 +107,6 @@ export default function LoginPage({
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
   const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [callbackUrl, setCallbackUrl] = useState('/workspace')
   const [isInviteFlow, setIsInviteFlow] = useState(false)
@@ -115,7 +114,6 @@ export default function LoginPage({
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
   const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
   const [isSubmittingReset, setIsSubmittingReset] = useState(false)
-  const [isResetButtonHovered, setIsResetButtonHovered] = useState(false)
   const [resetStatus, setResetStatus] = useState<{
     type: 'success' | 'error' | null
     message: string
@@ -184,6 +182,13 @@ export default function LoginPage({
     e.preventDefault()
     setIsLoading(true)
 
+    const redirectToVerify = (emailToVerify: string) => {
+      if (typeof window !== 'undefined') {
+        sessionStorage.setItem('verificationEmail', emailToVerify)
+      }
+      router.push('/verify')
+    }
+
     const formData = new FormData(e.currentTarget)
     const emailRaw = formData.get('email') as string
     const email = emailRaw.trim().toLowerCase()
@@ -215,9 +220,9 @@ export default function LoginPage({
           onError: (ctx) => {
             logger.error('Login error:', ctx.error)
 
-            // EMAIL_NOT_VERIFIED is handled by the catch block which redirects to /verify
             if (ctx.error.code?.includes('EMAIL_NOT_VERIFIED')) {
               errorHandled = true
+              redirectToVerify(email)
               return
             }
 
@@ -285,10 +290,7 @@ export default function LoginPage({
       router.push(safeCallbackUrl)
     } catch (err: any) {
       if (err.message?.includes('not verified') || err.code?.includes('EMAIL_NOT_VERIFIED')) {
-        if (typeof window !== 'undefined') {
-          sessionStorage.setItem('verificationEmail', email)
-        }
-        router.push('/verify')
+        redirectToVerify(email)
         return
       }
 
@@ -491,24 +493,14 @@ export default function LoginPage({
             </div>
           </div>
 
-          <Button
+          <BrandedButton
             type='submit'
-            onMouseEnter={() => setIsButtonHovered(true)}
-            onMouseLeave={() => setIsButtonHovered(false)}
-            className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
             disabled={isLoading}
+            loading={isLoading}
+            loadingText='Signing in'
           >
-            <span className='flex items-center gap-1'>
-              {isLoading ? 'Signing in...' : 'Sign in'}
-              <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-                {isButtonHovered ? (
-                  <ArrowRight className='h-4 w-4' aria-hidden='true' />
-                ) : (
-                  <ChevronRight className='h-4 w-4' aria-hidden='true' />
-                )}
-              </span>
-            </span>
-          </Button>
+            Sign in
+          </BrandedButton>
         </form>
       )}
 
@@ -619,25 +611,15 @@ export default function LoginPage({
                 <p>{resetStatus.message}</p>
               </div>
             )}
-            <Button
+            <BrandedButton
               type='button'
               onClick={handleForgotPassword}
-              onMouseEnter={() => setIsResetButtonHovered(true)}
-              onMouseLeave={() => setIsResetButtonHovered(false)}
-              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
               disabled={isSubmittingReset}
+              loading={isSubmittingReset}
+              loadingText='Sending'
             >
-              <span className='flex items-center gap-1'>
-                {isSubmittingReset ? 'Sending...' : 'Send Reset Link'}
-                <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-                  {isResetButtonHovered ? (
-                    <ArrowRight className='h-4 w-4' aria-hidden='true' />
-                  ) : (
-                    <ChevronRight className='h-4 w-4' aria-hidden='true' />
-                  )}
-                </span>
-              </span>
-            </Button>
+              Send Reset Link
+            </BrandedButton>
           </div>
         </DialogContent>
       </Dialog>

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

@@ -1,13 +1,12 @@
 'use client'
 
 import { useState } from 'react'
-import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { Eye, EyeOff } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { inter } from '@/app/_styles/fonts/inter/inter'
-import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 
 interface RequestResetFormProps {
   email: string
@@ -28,9 +27,6 @@ export function RequestResetForm({
   statusMessage,
   className,
 }: RequestResetFormProps) {
-  const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     onSubmit(email)
@@ -68,24 +64,14 @@ export function RequestResetForm({
         )}
       </div>
 
-      <Button
+      <BrandedButton
         type='submit'
         disabled={isSubmitting}
-        onMouseEnter={() => setIsButtonHovered(true)}
-        onMouseLeave={() => setIsButtonHovered(false)}
-        className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
+        loading={isSubmitting}
+        loadingText='Sending'
       >
-        <span className='flex items-center gap-1'>
-          {isSubmitting ? 'Sending...' : 'Send Reset Link'}
-          <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-            {isButtonHovered ? (
-              <ArrowRight className='h-4 w-4' aria-hidden='true' />
-            ) : (
-              <ChevronRight className='h-4 w-4' aria-hidden='true' />
-            )}
-          </span>
-        </span>
-      </Button>
+        Send Reset Link
+      </BrandedButton>
     </form>
   )
 }
@@ -112,8 +98,6 @@ export function SetNewPasswordForm({
   const [validationMessage, setValidationMessage] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -243,24 +227,14 @@ export function SetNewPasswordForm({
         )}
       </div>
 
-      <Button
-        disabled={isSubmitting || !token}
+      <BrandedButton
         type='submit'
-        onMouseEnter={() => setIsButtonHovered(true)}
-        onMouseLeave={() => setIsButtonHovered(false)}
-        className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
+        disabled={isSubmitting || !token}
+        loading={isSubmitting}
+        loadingText='Resetting'
       >
-        <span className='flex items-center gap-1'>
-          {isSubmitting ? 'Resetting...' : 'Reset Password'}
-          <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-            {isButtonHovered ? (
-              <ArrowRight className='h-4 w-4' aria-hidden='true' />
-            ) : (
-              <ChevronRight className='h-4 w-4' aria-hidden='true' />
-            )}
-          </span>
-        </span>
-      </Button>
+        Reset Password
+      </BrandedButton>
     </form>
   )
 }

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

@@ -2,10 +2,9 @@
 
 import { Suspense, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { client, useSession } from '@/lib/auth/auth-client'
@@ -14,6 +13,7 @@ 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'
 import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
@@ -97,7 +97,6 @@ function SignupFormContent({
   const [redirectUrl, setRedirectUrl] = useState('')
   const [isInviteFlow, setIsInviteFlow] = useState(false)
   const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [name, setName] = useState('')
   const [nameErrors, setNameErrors] = useState<string[]>([])
@@ -476,24 +475,14 @@ function SignupFormContent({
             </div>
           </div>
 
-          <Button
+          <BrandedButton
             type='submit'
-            onMouseEnter={() => setIsButtonHovered(true)}
-            onMouseLeave={() => setIsButtonHovered(false)}
-            className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
             disabled={isLoading}
+            loading={isLoading}
+            loadingText='Creating account'
           >
-            <span className='flex items-center gap-1'>
-              {isLoading ? 'Creating account' : 'Create account'}
-              <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-                {isButtonHovered ? (
-                  <ArrowRight className='h-4 w-4' aria-hidden='true' />
-                ) : (
-                  <ChevronRight className='h-4 w-4' aria-hidden='true' />
-                )}
-              </span>
-            </span>
-          </Button>
+            Create account
+          </BrandedButton>
         </form>
       )}
 

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

@@ -4,7 +4,6 @@ import { useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { X } from 'lucide-react'
 import { Textarea } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -18,6 +17,7 @@ import { isHosted } from '@/lib/core/config/feature-flags'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import Footer from '@/app/(landing)/components/footer/footer'
 import Nav from '@/app/(landing)/components/nav/nav'
 
@@ -493,18 +493,17 @@ export default function CareersPage() {
 
               {/* Submit Button */}
               <div className='flex justify-end pt-2'>
-                <Button
+                <BrandedButton
                   type='submit'
                   disabled={isSubmitting || submitStatus === 'success'}
-                  className='min-w-[200px] rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all duration-300 hover:opacity-90 disabled:opacity-50'
-                  size='lg'
+                  loading={isSubmitting}
+                  loadingText='Submitting'
+                  showArrow={false}
+                  fullWidth={false}
+                  className='min-w-[200px]'
                 >
-                  {isSubmitting
-                    ? 'Submitting...'
-                    : submitStatus === 'success'
-                      ? 'Submitted'
-                      : 'Submit Application'}
-                </Button>
+                  {submitStatus === 'success' ? 'Submitted' : 'Submit Application'}
+                </BrandedButton>
               </div>
             </form>
           </section>

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

@@ -11,6 +11,7 @@ import { useBrandConfig } from '@/lib/branding/branding'
 import { isHosted } from '@/lib/core/config/feature-flags'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
+import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
 
 const logger = createLogger('nav')
 
@@ -20,11 +21,12 @@ interface NavProps {
 }
 
 export default function Nav({ hideAuthButtons = false, variant = 'landing' }: NavProps = {}) {
-  const [githubStars, setGithubStars] = useState('25.1k')
+  const [githubStars, setGithubStars] = useState('25.8k')
   const [isHovered, setIsHovered] = useState(false)
   const [isLoginHovered, setIsLoginHovered] = useState(false)
   const router = useRouter()
   const brand = useBrandConfig()
+  const buttonClass = useBrandedButtonClass()
 
   useEffect(() => {
     if (variant !== 'landing') return
@@ -183,7 +185,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
             href='/signup'
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
-            className='group inline-flex items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[14px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all sm:text-[16px]'
+            className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
             aria-label='Get started with Sim - Sign up for free'
             prefetch={true}
           >

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

@@ -0,0 +1,27 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeft, ChevronLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export function BackLink() {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <Link
+      href='/studio'
+      className='group flex items-center gap-1 text-gray-600 text-sm hover:text-gray-900'
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
+        {isHovered ? (
+          <ArrowLeft className='h-4 w-4' aria-hidden='true' />
+        ) : (
+          <ChevronLeft className='h-4 w-4' aria-hidden='true' />
+        )}
+      </span>
+      Back to Sim Studio
+    </Link>
+  )
+}

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

@@ -5,7 +5,10 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/emcn'
 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'
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -48,9 +51,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       />
       <header className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
         <div className='mb-6'>
-          <Link href='/studio' className='text-gray-600 text-sm hover:text-gray-900'>
-            ← Back to Sim Studio
-          </Link>
+          <BackLink />
         </div>
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
           <div className='w-full flex-shrink-0 md:w-[450px]'>
@@ -75,28 +76,31 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             >
               {post.title}
             </h1>
-            <div className='mt-4 flex items-center gap-3'>
-              {(post.authors || [post.author]).map((a, idx) => (
-                <div key={idx} className='flex items-center gap-2'>
-                  {a?.avatarUrl ? (
-                    <Avatar className='size-6'>
-                      <AvatarImage src={a.avatarUrl} alt={a.name} />
-                      <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                  ) : null}
-                  <Link
-                    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]'
-                    itemProp='author'
-                    itemScope
-                    itemType='https://schema.org/Person'
-                  >
-                    <span itemProp='name'>{a?.name}</span>
-                  </Link>
-                </div>
-              ))}
+            <div className='mt-4 flex items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                {(post.authors || [post.author]).map((a, idx) => (
+                  <div key={idx} className='flex items-center gap-2'>
+                    {a?.avatarUrl ? (
+                      <Avatar className='size-6'>
+                        <AvatarImage src={a.avatarUrl} alt={a.name} />
+                        <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
+                      </Avatar>
+                    ) : null}
+                    <Link
+                      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]'
+                      itemProp='author'
+                      itemScope
+                      itemType='https://schema.org/Person'
+                    >
+                      <span itemProp='name'>{a?.name}</span>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+              <ShareButton url={`${getBaseUrl()}/studio/${slug}`} title={post.title} />
             </div>
           </div>
         </div>

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

@@ -0,0 +1,65 @@
+'use client'
+
+import { useState } from 'react'
+import { Share2 } from 'lucide-react'
+import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+
+interface ShareButtonProps {
+  url: string
+  title: string
+}
+
+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)
+    } catch {
+      setOpen(false)
+    }
+  }
+
+  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>
+        <button
+          className='flex items-center gap-1.5 text-gray-600 text-sm hover:text-gray-900'
+          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>
+  )
+}

apps/sim/app/api/auth/oauth/utils.ts

@@ -4,6 +4,11 @@ import { createLogger } from '@sim/logger'
 import { and, desc, eq, inArray } from 'drizzle-orm'
 import { getSession } from '@/lib/auth'
 import { refreshOAuthToken } from '@/lib/oauth'
+import {
+  getMicrosoftRefreshTokenExpiry,
+  isMicrosoftProvider,
+  PROACTIVE_REFRESH_THRESHOLD_DAYS,
+} from '@/lib/oauth/microsoft'
 
 const logger = createLogger('OAuthUtilsAPI')
 
@@ -205,15 +210,32 @@ export async function refreshAccessTokenIfNeeded(
   }
 
   // Decide if we should refresh: token missing OR expired
-  const expiresAt = credential.accessTokenExpiresAt
+  const accessTokenExpiresAt = credential.accessTokenExpiresAt
+  const refreshTokenExpiresAt = credential.refreshTokenExpiresAt
   const now = new Date()
-  const shouldRefresh =
-    !!credential.refreshToken && (!credential.accessToken || (expiresAt && expiresAt <= now))
+
+  // Check if access token needs refresh (missing or expired)
+  const accessTokenNeedsRefresh =
+    !!credential.refreshToken &&
+    (!credential.accessToken || (accessTokenExpiresAt && accessTokenExpiresAt <= now))
+
+  // Check if we should proactively refresh to prevent refresh token expiry
+  // This applies to Microsoft providers whose refresh tokens expire after 90 days of inactivity
+  const proactiveRefreshThreshold = new Date(
+    now.getTime() + PROACTIVE_REFRESH_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
+  )
+  const refreshTokenNeedsProactiveRefresh =
+    !!credential.refreshToken &&
+    isMicrosoftProvider(credential.providerId) &&
+    refreshTokenExpiresAt &&
+    refreshTokenExpiresAt <= proactiveRefreshThreshold
+
+  const shouldRefresh = accessTokenNeedsRefresh || refreshTokenNeedsProactiveRefresh
 
   const accessToken = credential.accessToken
 
   if (shouldRefresh) {
-    logger.info(`[${requestId}] Token expired, attempting to refresh for credential`)
+    logger.info(`[${requestId}] Refreshing token for credential`)
     try {
       const refreshedToken = await refreshOAuthToken(
         credential.providerId,
@@ -227,11 +249,15 @@ export async function refreshAccessTokenIfNeeded(
           userId: credential.userId,
           hasRefreshToken: !!credential.refreshToken,
         })
+        if (!accessTokenNeedsRefresh && accessToken) {
+          logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+          return accessToken
+        }
         return null
       }
 
       // Prepare update data
-      const updateData: any = {
+      const updateData: Record<string, unknown> = {
         accessToken: refreshedToken.accessToken,
         accessTokenExpiresAt: new Date(Date.now() + refreshedToken.expiresIn * 1000),
         updatedAt: new Date(),
@@ -243,6 +269,10 @@ export async function refreshAccessTokenIfNeeded(
         updateData.refreshToken = refreshedToken.refreshToken
       }
 
+      if (isMicrosoftProvider(credential.providerId)) {
+        updateData.refreshTokenExpiresAt = getMicrosoftRefreshTokenExpiry()
+      }
+
       // Update the token in the database
       await db.update(account).set(updateData).where(eq(account.id, credentialId))
 
@@ -256,6 +286,10 @@ export async function refreshAccessTokenIfNeeded(
         credentialId,
         userId: credential.userId,
       })
+      if (!accessTokenNeedsRefresh && accessToken) {
+        logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+        return accessToken
+      }
       return null
     }
   } else if (!accessToken) {
@@ -277,10 +311,27 @@ export async function refreshTokenIfNeeded(
   credentialId: string
 ): Promise<{ accessToken: string; refreshed: boolean }> {
   // Decide if we should refresh: token missing OR expired
-  const expiresAt = credential.accessTokenExpiresAt
+  const accessTokenExpiresAt = credential.accessTokenExpiresAt
+  const refreshTokenExpiresAt = credential.refreshTokenExpiresAt
   const now = new Date()
-  const shouldRefresh =
-    !!credential.refreshToken && (!credential.accessToken || (expiresAt && expiresAt <= now))
+
+  // Check if access token needs refresh (missing or expired)
+  const accessTokenNeedsRefresh =
+    !!credential.refreshToken &&
+    (!credential.accessToken || (accessTokenExpiresAt && accessTokenExpiresAt <= now))
+
+  // Check if we should proactively refresh to prevent refresh token expiry
+  // This applies to Microsoft providers whose refresh tokens expire after 90 days of inactivity
+  const proactiveRefreshThreshold = new Date(
+    now.getTime() + PROACTIVE_REFRESH_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
+  )
+  const refreshTokenNeedsProactiveRefresh =
+    !!credential.refreshToken &&
+    isMicrosoftProvider(credential.providerId) &&
+    refreshTokenExpiresAt &&
+    refreshTokenExpiresAt <= proactiveRefreshThreshold
+
+  const shouldRefresh = accessTokenNeedsRefresh || refreshTokenNeedsProactiveRefresh
 
   // If token appears valid and present, return it directly
   if (!shouldRefresh) {
@@ -293,13 +344,17 @@ export async function refreshTokenIfNeeded(
 
     if (!refreshResult) {
       logger.error(`[${requestId}] Failed to refresh token for credential`)
+      if (!accessTokenNeedsRefresh && credential.accessToken) {
+        logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+        return { accessToken: credential.accessToken, refreshed: false }
+      }
       throw new Error('Failed to refresh token')
     }
 
     const { accessToken: refreshedToken, expiresIn, refreshToken: newRefreshToken } = refreshResult
 
     // Prepare update data
-    const updateData: any = {
+    const updateData: Record<string, unknown> = {
       accessToken: refreshedToken,
       accessTokenExpiresAt: new Date(Date.now() + expiresIn * 1000), // Use provider's expiry
       updatedAt: new Date(),
@@ -311,6 +366,10 @@ export async function refreshTokenIfNeeded(
       updateData.refreshToken = newRefreshToken
     }
 
+    if (isMicrosoftProvider(credential.providerId)) {
+      updateData.refreshTokenExpiresAt = getMicrosoftRefreshTokenExpiry()
+    }
+
     await db.update(account).set(updateData).where(eq(account.id, credentialId))
 
     logger.info(`[${requestId}] Successfully refreshed access token`)
@@ -331,6 +390,11 @@ export async function refreshTokenIfNeeded(
       }
     }
 
+    if (!accessTokenNeedsRefresh && credential.accessToken) {
+      logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+      return { accessToken: credential.accessToken, refreshed: false }
+    }
+
     logger.error(`[${requestId}] Refresh failed and no valid token found in DB`, error)
     throw error
   }

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

@@ -313,7 +313,7 @@ describe('Function Execute API Route', () => {
           'block-2': 'world',
         },
         blockNameMapping: {
-          validVar: 'block-1',
+          validvar: 'block-1',
           another_valid: 'block-2',
         },
       })
@@ -539,7 +539,7 @@ describe('Function Execute API Route', () => {
           'block-complex': complexData,
         },
         blockNameMapping: {
-          complexData: 'block-complex',
+          complexdata: 'block-complex',
         },
       })
 

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

@@ -6,11 +6,11 @@ import { executeInE2B } from '@/lib/execution/e2b'
 import { executeInIsolatedVM } from '@/lib/execution/isolated-vm'
 import { CodeLanguage, DEFAULT_CODE_LANGUAGE, isValidCodeLanguage } from '@/lib/execution/languages'
 import { escapeRegExp, normalizeName, REFERENCE } from '@/executor/constants'
+import { type OutputSchema, resolveBlockReference } from '@/executor/utils/block-reference'
 import {
   createEnvVarPattern,
   createWorkflowVariablePattern,
 } from '@/executor/utils/reference-validation'
-import { navigatePath } from '@/executor/variables/resolvers/reference'
 export const dynamic = 'force-dynamic'
 export const runtime = 'nodejs'
 
@@ -470,14 +470,17 @@ function resolveEnvironmentVariables(
 
 function resolveTagVariables(
   code: string,
-  blockData: Record<string, any>,
+  blockData: Record<string, unknown>,
   blockNameMapping: Record<string, string>,
-  contextVariables: Record<string, any>
+  blockOutputSchemas: Record<string, OutputSchema>,
+  contextVariables: Record<string, unknown>,
+  language = 'javascript'
 ): string {
   let resolvedCode = code
+  const undefinedLiteral = language === 'python' ? 'None' : 'undefined'
 
   const tagPattern = new RegExp(
-    `${REFERENCE.START}([a-zA-Z_][a-zA-Z0-9_${REFERENCE.PATH_DELIMITER}]*[a-zA-Z0-9_])${REFERENCE.END}`,
+    `${REFERENCE.START}([a-zA-Z_](?:[a-zA-Z0-9_${REFERENCE.PATH_DELIMITER}]*[a-zA-Z0-9_])?)${REFERENCE.END}`,
     'g'
   )
   const tagMatches = resolvedCode.match(tagPattern) || []
@@ -486,41 +489,37 @@ function resolveTagVariables(
     const tagName = match.slice(REFERENCE.START.length, -REFERENCE.END.length).trim()
     const pathParts = tagName.split(REFERENCE.PATH_DELIMITER)
     const blockName = pathParts[0]
+    const fieldPath = pathParts.slice(1)
 
-    const blockId = blockNameMapping[blockName]
-    if (!blockId) {
+    const result = resolveBlockReference(blockName, fieldPath, {
+      blockNameMapping,
+      blockData,
+      blockOutputSchemas,
+    })
+
+    if (!result) {
       continue
     }
 
-    const blockOutput = blockData[blockId]
-    if (blockOutput === undefined) {
-      continue
-    }
-
-    let tagValue: any
-    if (pathParts.length === 1) {
-      tagValue = blockOutput
-    } else {
-      tagValue = navigatePath(blockOutput, pathParts.slice(1))
-    }
+    let tagValue = result.value
 
     if (tagValue === undefined) {
+      resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), undefinedLiteral)
       continue
     }
 
-    if (
-      typeof tagValue === 'string' &&
-      tagValue.length > 100 &&
-      (tagValue.startsWith('{') || tagValue.startsWith('['))
-    ) {
-      try {
-        tagValue = JSON.parse(tagValue)
-      } catch {
-        // Keep as-is
+    if (typeof tagValue === 'string') {
+      const trimmed = tagValue.trimStart()
+      if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        try {
+          tagValue = JSON.parse(tagValue)
+        } catch {
+          // Keep as string if not valid JSON
+        }
       }
     }
 
-    const safeVarName = `__tag_${tagName.replace(/[^a-zA-Z0-9_]/g, '_')}`
+    const safeVarName = `__tag_${tagName.replace(/_/g, '_1').replace(/\./g, '_0')}`
     contextVariables[safeVarName] = tagValue
     resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), safeVarName)
   }
@@ -537,18 +536,27 @@ function resolveTagVariables(
  */
 function resolveCodeVariables(
   code: string,
-  params: Record<string, any>,
+  params: Record<string, unknown>,
   envVars: Record<string, string> = {},
-  blockData: Record<string, any> = {},
+  blockData: Record<string, unknown> = {},
   blockNameMapping: Record<string, string> = {},
-  workflowVariables: Record<string, any> = {}
-): { resolvedCode: string; contextVariables: Record<string, any> } {
+  blockOutputSchemas: Record<string, OutputSchema> = {},
+  workflowVariables: Record<string, unknown> = {},
+  language = 'javascript'
+): { resolvedCode: string; contextVariables: Record<string, unknown> } {
   let resolvedCode = code
-  const contextVariables: Record<string, any> = {}
+  const contextVariables: Record<string, unknown> = {}
 
   resolvedCode = resolveWorkflowVariables(resolvedCode, workflowVariables, contextVariables)
   resolvedCode = resolveEnvironmentVariables(resolvedCode, params, envVars, contextVariables)
-  resolvedCode = resolveTagVariables(resolvedCode, blockData, blockNameMapping, contextVariables)
+  resolvedCode = resolveTagVariables(
+    resolvedCode,
+    blockData,
+    blockNameMapping,
+    blockOutputSchemas,
+    contextVariables,
+    language
+  )
 
   return { resolvedCode, contextVariables }
 }
@@ -585,6 +593,7 @@ export async function POST(req: NextRequest) {
       envVars = {},
       blockData = {},
       blockNameMapping = {},
+      blockOutputSchemas = {},
       workflowVariables = {},
       workflowId,
       isCustomTool = false,
@@ -601,20 +610,21 @@ export async function POST(req: NextRequest) {
       isCustomTool,
     })
 
-    // Resolve variables in the code with workflow environment variables
+    const lang = isValidCodeLanguage(language) ? language : DEFAULT_CODE_LANGUAGE
+
     const codeResolution = resolveCodeVariables(
       code,
       executionParams,
       envVars,
       blockData,
       blockNameMapping,
-      workflowVariables
+      blockOutputSchemas,
+      workflowVariables,
+      lang
     )
     resolvedCode = codeResolution.resolvedCode
     const contextVariables = codeResolution.contextVariables
 
-    const lang = isValidCodeLanguage(language) ? language : DEFAULT_CODE_LANGUAGE
-
     let jsImports = ''
     let jsRemainingCode = resolvedCode
     let hasImports = false
@@ -670,7 +680,11 @@ export async function POST(req: NextRequest) {
         prologue += `const environmentVariables = JSON.parse(${JSON.stringify(JSON.stringify(envVars))});\n`
         prologueLineCount++
         for (const [k, v] of Object.entries(contextVariables)) {
-          prologue += `const ${k} = JSON.parse(${JSON.stringify(JSON.stringify(v))});\n`
+          if (v === undefined) {
+            prologue += `const ${k} = undefined;\n`
+          } else {
+            prologue += `const ${k} = JSON.parse(${JSON.stringify(JSON.stringify(v))});\n`
+          }
           prologueLineCount++
         }
 
@@ -741,7 +755,11 @@ export async function POST(req: NextRequest) {
       prologue += `environmentVariables = json.loads(${JSON.stringify(JSON.stringify(envVars))})\n`
       prologueLineCount++
       for (const [k, v] of Object.entries(contextVariables)) {
-        prologue += `${k} = json.loads(${JSON.stringify(JSON.stringify(v))})\n`
+        if (v === undefined) {
+          prologue += `${k} = None\n`
+        } else {
+          prologue += `${k} = json.loads(${JSON.stringify(JSON.stringify(v))})\n`
+        }
         prologueLineCount++
       }
       const wrapped = [

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

@@ -157,7 +157,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(getDocuments)).toHaveBeenCalledWith(
         'kb-123',
         {
-          includeDisabled: false,
+          enabledFilter: undefined,
           search: undefined,
           limit: 50,
           offset: 0,
@@ -166,7 +166,7 @@ describe('Knowledge Base Documents API Route', () => {
       )
     })
 
-    it('should filter disabled documents by default', async () => {
+    it('should return documents with default filter', async () => {
       const { checkKnowledgeBaseAccess } = await import('@/app/api/knowledge/utils')
       const { getDocuments } = await import('@/lib/knowledge/documents/service')
 
@@ -194,7 +194,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(getDocuments)).toHaveBeenCalledWith(
         'kb-123',
         {
-          includeDisabled: false,
+          enabledFilter: undefined,
           search: undefined,
           limit: 50,
           offset: 0,
@@ -203,7 +203,7 @@ describe('Knowledge Base Documents API Route', () => {
       )
     })
 
-    it('should include disabled documents when requested', async () => {
+    it('should filter documents by enabled status when requested', async () => {
       const { checkKnowledgeBaseAccess } = await import('@/app/api/knowledge/utils')
       const { getDocuments } = await import('@/lib/knowledge/documents/service')
 
@@ -223,7 +223,7 @@ describe('Knowledge Base Documents API Route', () => {
         },
       })
 
-      const url = 'http://localhost:3000/api/knowledge/kb-123/documents?includeDisabled=true'
+      const url = 'http://localhost:3000/api/knowledge/kb-123/documents?enabledFilter=disabled'
       const req = new Request(url, { method: 'GET' }) as any
 
       const { GET } = await import('@/app/api/knowledge/[id]/documents/route')
@@ -233,7 +233,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(getDocuments)).toHaveBeenCalledWith(
         'kb-123',
         {
-          includeDisabled: true,
+          enabledFilter: 'disabled',
           search: undefined,
           limit: 50,
           offset: 0,
@@ -361,8 +361,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(createSingleDocument)).toHaveBeenCalledWith(
         validDocumentData,
         'kb-123',
-        expect.any(String),
-        'user-123'
+        expect.any(String)
       )
     })
 
@@ -470,8 +469,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(createDocumentRecords)).toHaveBeenCalledWith(
         validBulkData.documents,
         'kb-123',
-        expect.any(String),
-        'user-123'
+        expect.any(String)
       )
       expect(vi.mocked(processDocumentsWithQueue)).toHaveBeenCalled()
     })

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

@@ -5,6 +5,7 @@ import { z } from 'zod'
 import { getSession } from '@/lib/auth'
 import {
   bulkDocumentOperation,
+  bulkDocumentOperationByFilter,
   createDocumentRecords,
   createSingleDocument,
   getDocuments,
@@ -57,13 +58,20 @@ const BulkCreateDocumentsSchema = z.object({
   bulk: z.literal(true),
 })
 
-const BulkUpdateDocumentsSchema = z.object({
-  operation: z.enum(['enable', 'disable', 'delete']),
-  documentIds: z
-    .array(z.string())
-    .min(1, 'At least one document ID is required')
-    .max(100, 'Cannot operate on more than 100 documents at once'),
-})
+const BulkUpdateDocumentsSchema = z
+  .object({
+    operation: z.enum(['enable', 'disable', 'delete']),
+    documentIds: z
+      .array(z.string())
+      .min(1, 'At least one document ID is required')
+      .max(100, 'Cannot operate on more than 100 documents at once')
+      .optional(),
+    selectAll: z.boolean().optional(),
+    enabledFilter: z.enum(['all', 'enabled', 'disabled']).optional(),
+  })
+  .refine((data) => data.selectAll || (data.documentIds && data.documentIds.length > 0), {
+    message: 'Either selectAll must be true or documentIds must be provided',
+  })
 
 export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const requestId = randomUUID().slice(0, 8)
@@ -90,14 +98,17 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
     }
 
     const url = new URL(req.url)
-    const includeDisabled = url.searchParams.get('includeDisabled') === 'true'
+    const enabledFilter = url.searchParams.get('enabledFilter') as
+      | 'all'
+      | 'enabled'
+      | 'disabled'
+      | null
     const search = url.searchParams.get('search') || undefined
     const limit = Number.parseInt(url.searchParams.get('limit') || '50')
     const offset = Number.parseInt(url.searchParams.get('offset') || '0')
     const sortByParam = url.searchParams.get('sortBy')
     const sortOrderParam = url.searchParams.get('sortOrder')
 
-    // Validate sort parameters
     const validSortFields: DocumentSortField[] = [
       'filename',
       'fileSize',
@@ -105,6 +116,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
       'chunkCount',
       'uploadedAt',
       'processingStatus',
+      'enabled',
     ]
     const validSortOrders: SortOrder[] = ['asc', 'desc']
 
@@ -120,7 +132,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
     const result = await getDocuments(
       knowledgeBaseId,
       {
-        includeDisabled,
+        enabledFilter: enabledFilter || undefined,
         search,
         limit,
         offset,
@@ -190,8 +202,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
         const createdDocuments = await createDocumentRecords(
           validatedData.documents,
           knowledgeBaseId,
-          requestId,
-          userId
+          requestId
         )
 
         logger.info(
@@ -250,16 +261,10 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
         throw validationError
       }
     } else {
-      // Handle single document creation
       try {
         const validatedData = CreateDocumentSchema.parse(body)
 
-        const newDocument = await createSingleDocument(
-          validatedData,
-          knowledgeBaseId,
-          requestId,
-          userId
-        )
+        const newDocument = await createSingleDocument(validatedData, knowledgeBaseId, requestId)
 
         try {
           const { PlatformEvents } = await import('@/lib/core/telemetry')
@@ -294,7 +299,6 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
   } catch (error) {
     logger.error(`[${requestId}] Error creating document`, error)
 
-    // Check if it's a storage limit error
     const errorMessage = error instanceof Error ? error.message : 'Failed to create document'
     const isStorageLimitError =
       errorMessage.includes('Storage limit exceeded') || errorMessage.includes('storage limit')
@@ -331,16 +335,22 @@ export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id
 
     try {
       const validatedData = BulkUpdateDocumentsSchema.parse(body)
-      const { operation, documentIds } = validatedData
+      const { operation, documentIds, selectAll, enabledFilter } = validatedData
 
       try {
-        const result = await bulkDocumentOperation(
-          knowledgeBaseId,
-          operation,
-          documentIds,
-          requestId,
-          session.user.id
-        )
+        let result
+        if (selectAll) {
+          result = await bulkDocumentOperationByFilter(
+            knowledgeBaseId,
+            operation,
+            enabledFilter,
+            requestId
+          )
+        } else if (documentIds && documentIds.length > 0) {
+          result = await bulkDocumentOperation(knowledgeBaseId, operation, documentIds, requestId)
+        } else {
+          return NextResponse.json({ error: 'No documents specified' }, { status: 400 })
+        }
 
         return NextResponse.json({
           success: true,

apps/sim/app/api/table/[tableId]/route.ts

@@ -1,138 +0,0 @@
-import { createLogger } from '@sim/logger'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { checkHybridAuth } from '@/lib/auth/hybrid'
-import { generateRequestId } from '@/lib/core/utils/request'
-import { deleteTable, type TableSchema } from '@/lib/table'
-import { accessError, checkAccess, normalizeColumn, verifyTableWorkspace } from '../utils'
-
-const logger = createLogger('TableDetailAPI')
-
-const GetTableSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-})
-
-interface TableRouteParams {
-  params: Promise<{ tableId: string }>
-}
-
-/** GET /api/table/[tableId] - Retrieves a single table's details. */
-export async function GET(request: NextRequest, { params }: TableRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      logger.warn(`[${requestId}] Unauthorized table access attempt`)
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const { searchParams } = new URL(request.url)
-    const validated = GetTableSchema.parse({
-      workspaceId: searchParams.get('workspaceId'),
-    })
-
-    const result = await checkAccess(tableId, authResult.userId, 'read')
-    if (!result.ok) return accessError(result, requestId, tableId)
-
-    const { table } = result
-
-    const isValidWorkspace = await verifyTableWorkspace(tableId, validated.workspaceId)
-    if (!isValidWorkspace) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    logger.info(`[${requestId}] Retrieved table ${tableId} for user ${authResult.userId}`)
-
-    const schemaData = table.schema as TableSchema
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        table: {
-          id: table.id,
-          name: table.name,
-          description: table.description,
-          schema: {
-            columns: schemaData.columns.map(normalizeColumn),
-          },
-          rowCount: table.rowCount,
-          maxRows: table.maxRows,
-          createdAt:
-            table.createdAt instanceof Date
-              ? table.createdAt.toISOString()
-              : String(table.createdAt),
-          updatedAt:
-            table.updatedAt instanceof Date
-              ? table.updatedAt.toISOString()
-              : String(table.updatedAt),
-        },
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error getting table:`, error)
-    return NextResponse.json({ error: 'Failed to get table' }, { status: 500 })
-  }
-}
-
-/** DELETE /api/table/[tableId] - Deletes a table and all its rows. */
-export async function DELETE(request: NextRequest, { params }: TableRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      logger.warn(`[${requestId}] Unauthorized table delete attempt`)
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const { searchParams } = new URL(request.url)
-    const validated = GetTableSchema.parse({
-      workspaceId: searchParams.get('workspaceId'),
-    })
-
-    const result = await checkAccess(tableId, authResult.userId, 'write')
-    if (!result.ok) return accessError(result, requestId, tableId)
-
-    const { table } = result
-
-    const isValidWorkspace = await verifyTableWorkspace(tableId, validated.workspaceId)
-    if (!isValidWorkspace) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    await deleteTable(tableId, requestId)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        message: 'Table deleted successfully',
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error deleting table:`, error)
-    return NextResponse.json({ error: 'Failed to delete table' }, { status: 500 })
-  }
-}

apps/sim/app/api/table/[tableId]/rows/[rowId]/route.ts

@@ -1,276 +0,0 @@
-import { db } from '@sim/db'
-import { userTableRows } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { checkHybridAuth } from '@/lib/auth/hybrid'
-import { generateRequestId } from '@/lib/core/utils/request'
-import type { RowData, TableSchema } from '@/lib/table'
-import { validateRowData } from '@/lib/table'
-import { accessError, checkAccess, verifyTableWorkspace } from '../../../utils'
-
-const logger = createLogger('TableRowAPI')
-
-const GetRowSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-})
-
-const UpdateRowSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  data: z.record(z.unknown(), { required_error: 'Row data is required' }),
-})
-
-const DeleteRowSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-})
-
-interface RowRouteParams {
-  params: Promise<{ tableId: string; rowId: string }>
-}
-
-/** GET /api/table/[tableId]/rows/[rowId] - Retrieves a single row. */
-export async function GET(request: NextRequest, { params }: RowRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId, rowId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const { searchParams } = new URL(request.url)
-    const validated = GetRowSchema.parse({
-      workspaceId: searchParams.get('workspaceId'),
-    })
-
-    const result = await checkAccess(tableId, authResult.userId, 'read')
-    if (!result.ok) return accessError(result, requestId, tableId)
-
-    const { table } = result
-
-    const isValidWorkspace = await verifyTableWorkspace(tableId, validated.workspaceId)
-    if (!isValidWorkspace) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const [row] = await db
-      .select({
-        id: userTableRows.id,
-        data: userTableRows.data,
-        createdAt: userTableRows.createdAt,
-        updatedAt: userTableRows.updatedAt,
-      })
-      .from(userTableRows)
-      .where(
-        and(
-          eq(userTableRows.id, rowId),
-          eq(userTableRows.tableId, tableId),
-          eq(userTableRows.workspaceId, validated.workspaceId)
-        )
-      )
-      .limit(1)
-
-    if (!row) {
-      return NextResponse.json({ error: 'Row not found' }, { status: 404 })
-    }
-
-    logger.info(`[${requestId}] Retrieved row ${rowId} from table ${tableId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        row: {
-          id: row.id,
-          data: row.data,
-          createdAt: row.createdAt.toISOString(),
-          updatedAt: row.updatedAt.toISOString(),
-        },
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error getting row:`, error)
-    return NextResponse.json({ error: 'Failed to get row' }, { status: 500 })
-  }
-}
-
-/** PATCH /api/table/[tableId]/rows/[rowId] - Updates a single row (supports partial updates). */
-export async function PATCH(request: NextRequest, { params }: RowRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId, rowId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-    const validated = UpdateRowSchema.parse(body)
-
-    const result = await checkAccess(tableId, authResult.userId, 'write')
-    if (!result.ok) return accessError(result, requestId, tableId)
-
-    const { table } = result
-
-    const isValidWorkspace = await verifyTableWorkspace(tableId, validated.workspaceId)
-    if (!isValidWorkspace) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    // Fetch existing row to support partial updates
-    const [existingRow] = await db
-      .select({ data: userTableRows.data })
-      .from(userTableRows)
-      .where(
-        and(
-          eq(userTableRows.id, rowId),
-          eq(userTableRows.tableId, tableId),
-          eq(userTableRows.workspaceId, validated.workspaceId)
-        )
-      )
-      .limit(1)
-
-    if (!existingRow) {
-      return NextResponse.json({ error: 'Row not found' }, { status: 404 })
-    }
-
-    // Merge existing data with incoming partial data (incoming takes precedence)
-    const mergedData = {
-      ...(existingRow.data as RowData),
-      ...(validated.data as RowData),
-    }
-
-    const validation = await validateRowData({
-      rowData: mergedData,
-      schema: table.schema as TableSchema,
-      tableId,
-      excludeRowId: rowId,
-    })
-    if (!validation.valid) return validation.response
-
-    const now = new Date()
-
-    const [updatedRow] = await db
-      .update(userTableRows)
-      .set({
-        data: mergedData,
-        updatedAt: now,
-      })
-      .where(
-        and(
-          eq(userTableRows.id, rowId),
-          eq(userTableRows.tableId, tableId),
-          eq(userTableRows.workspaceId, validated.workspaceId)
-        )
-      )
-      .returning()
-
-    if (!updatedRow) {
-      return NextResponse.json({ error: 'Row not found' }, { status: 404 })
-    }
-
-    logger.info(`[${requestId}] Updated row ${rowId} in table ${tableId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        row: {
-          id: updatedRow.id,
-          data: updatedRow.data,
-          createdAt: updatedRow.createdAt.toISOString(),
-          updatedAt: updatedRow.updatedAt.toISOString(),
-        },
-        message: 'Row updated successfully',
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error updating row:`, error)
-    return NextResponse.json({ error: 'Failed to update row' }, { status: 500 })
-  }
-}
-
-/** DELETE /api/table/[tableId]/rows/[rowId] - Deletes a single row. */
-export async function DELETE(request: NextRequest, { params }: RowRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId, rowId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-    const validated = DeleteRowSchema.parse(body)
-
-    const result = await checkAccess(tableId, authResult.userId, 'write')
-    if (!result.ok) return accessError(result, requestId, tableId)
-
-    const { table } = result
-
-    const isValidWorkspace = await verifyTableWorkspace(tableId, validated.workspaceId)
-    if (!isValidWorkspace) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const [deletedRow] = await db
-      .delete(userTableRows)
-      .where(
-        and(
-          eq(userTableRows.id, rowId),
-          eq(userTableRows.tableId, tableId),
-          eq(userTableRows.workspaceId, validated.workspaceId)
-        )
-      )
-      .returning()
-
-    if (!deletedRow) {
-      return NextResponse.json({ error: 'Row not found' }, { status: 404 })
-    }
-
-    logger.info(`[${requestId}] Deleted row ${rowId} from table ${tableId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        message: 'Row deleted successfully',
-        deletedCount: 1,
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error deleting row:`, error)
-    return NextResponse.json({ error: 'Failed to delete row' }, { status: 500 })
-  }
-}

apps/sim/app/api/table/[tableId]/rows/route.ts

@@ -1,681 +0,0 @@
-import { db } from '@sim/db'
-import { userTableRows } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq, sql } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { checkHybridAuth } from '@/lib/auth/hybrid'
-import { generateRequestId } from '@/lib/core/utils/request'
-import type { Filter, RowData, Sort, TableSchema } from '@/lib/table'
-import {
-  checkUniqueConstraintsDb,
-  getUniqueColumns,
-  TABLE_LIMITS,
-  USER_TABLE_ROWS_SQL_NAME,
-  validateBatchRows,
-  validateRowAgainstSchema,
-  validateRowData,
-  validateRowSize,
-} from '@/lib/table'
-import { buildFilterClause, buildSortClause } from '@/lib/table/sql'
-import { accessError, checkAccess } from '../../utils'
-
-const logger = createLogger('TableRowsAPI')
-
-const InsertRowSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  data: z.record(z.unknown(), { required_error: 'Row data is required' }),
-})
-
-const BatchInsertRowsSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  rows: z
-    .array(z.record(z.unknown()), { required_error: 'Rows array is required' })
-    .min(1, 'At least one row is required')
-    .max(1000, 'Cannot insert more than 1000 rows per batch'),
-})
-
-const QueryRowsSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  filter: z.record(z.unknown()).optional(),
-  sort: z.record(z.enum(['asc', 'desc'])).optional(),
-  limit: z.coerce
-    .number({ required_error: 'Limit must be a number' })
-    .int('Limit must be an integer')
-    .min(1, 'Limit must be at least 1')
-    .max(TABLE_LIMITS.MAX_QUERY_LIMIT, `Limit cannot exceed ${TABLE_LIMITS.MAX_QUERY_LIMIT}`)
-    .optional()
-    .default(100),
-  offset: z.coerce
-    .number({ required_error: 'Offset must be a number' })
-    .int('Offset must be an integer')
-    .min(0, 'Offset must be 0 or greater')
-    .optional()
-    .default(0),
-})
-
-const UpdateRowsByFilterSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  filter: z.record(z.unknown(), { required_error: 'Filter criteria is required' }),
-  data: z.record(z.unknown(), { required_error: 'Update data is required' }),
-  limit: z.coerce
-    .number({ required_error: 'Limit must be a number' })
-    .int('Limit must be an integer')
-    .min(1, 'Limit must be at least 1')
-    .max(1000, 'Cannot update more than 1000 rows per operation')
-    .optional(),
-})
-
-const DeleteRowsByFilterSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  filter: z.record(z.unknown(), { required_error: 'Filter criteria is required' }),
-  limit: z.coerce
-    .number({ required_error: 'Limit must be a number' })
-    .int('Limit must be an integer')
-    .min(1, 'Limit must be at least 1')
-    .max(1000, 'Cannot delete more than 1000 rows per operation')
-    .optional(),
-})
-
-interface TableRowsRouteParams {
-  params: Promise<{ tableId: string }>
-}
-
-async function handleBatchInsert(
-  requestId: string,
-  tableId: string,
-  body: z.infer<typeof BatchInsertRowsSchema>,
-  userId: string
-): Promise<NextResponse> {
-  const validated = BatchInsertRowsSchema.parse(body)
-
-  const accessResult = await checkAccess(tableId, userId, 'write')
-  if (!accessResult.ok) return accessError(accessResult, requestId, tableId)
-
-  const { table } = accessResult
-
-  if (validated.workspaceId !== table.workspaceId) {
-    logger.warn(
-      `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-    )
-    return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-  }
-
-  const workspaceId = validated.workspaceId
-
-  const remainingCapacity = table.maxRows - table.rowCount
-  if (remainingCapacity < validated.rows.length) {
-    return NextResponse.json(
-      {
-        error: `Insufficient capacity. Can only insert ${remainingCapacity} more rows (table has ${table.rowCount}/${table.maxRows} rows)`,
-      },
-      { status: 400 }
-    )
-  }
-
-  const validation = await validateBatchRows({
-    rows: validated.rows as RowData[],
-    schema: table.schema as TableSchema,
-    tableId,
-  })
-  if (!validation.valid) return validation.response
-
-  const now = new Date()
-  const rowsToInsert = validated.rows.map((data) => ({
-    id: `row_${crypto.randomUUID().replace(/-/g, '')}`,
-    tableId,
-    workspaceId,
-    data,
-    createdAt: now,
-    updatedAt: now,
-    createdBy: userId,
-  }))
-
-  const insertedRows = await db.insert(userTableRows).values(rowsToInsert).returning()
-
-  logger.info(`[${requestId}] Batch inserted ${insertedRows.length} rows into table ${tableId}`)
-
-  return NextResponse.json({
-    success: true,
-    data: {
-      rows: insertedRows.map((r) => ({
-        id: r.id,
-        data: r.data,
-        createdAt: r.createdAt.toISOString(),
-        updatedAt: r.updatedAt.toISOString(),
-      })),
-      insertedCount: insertedRows.length,
-      message: `Successfully inserted ${insertedRows.length} rows`,
-    },
-  })
-}
-
-/** POST /api/table/[tableId]/rows - Inserts row(s). Supports single or batch insert. */
-export async function POST(request: NextRequest, { params }: TableRowsRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-
-    if (
-      typeof body === 'object' &&
-      body !== null &&
-      'rows' in body &&
-      Array.isArray((body as Record<string, unknown>).rows)
-    ) {
-      return handleBatchInsert(
-        requestId,
-        tableId,
-        body as z.infer<typeof BatchInsertRowsSchema>,
-        authResult.userId
-      )
-    }
-
-    const validated = InsertRowSchema.parse(body)
-
-    const accessResult = await checkAccess(tableId, authResult.userId, 'write')
-    if (!accessResult.ok) return accessError(accessResult, requestId, tableId)
-
-    const { table } = accessResult
-
-    if (validated.workspaceId !== table.workspaceId) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const workspaceId = validated.workspaceId
-    const rowData = validated.data as RowData
-
-    const validation = await validateRowData({
-      rowData,
-      schema: table.schema as TableSchema,
-      tableId,
-    })
-    if (!validation.valid) return validation.response
-
-    if (table.rowCount >= table.maxRows) {
-      return NextResponse.json(
-        { error: `Table row limit reached (${table.maxRows} rows max)` },
-        { status: 400 }
-      )
-    }
-
-    const rowId = `row_${crypto.randomUUID().replace(/-/g, '')}`
-    const now = new Date()
-
-    const [row] = await db
-      .insert(userTableRows)
-      .values({
-        id: rowId,
-        tableId,
-        workspaceId,
-        data: validated.data,
-        createdAt: now,
-        updatedAt: now,
-        createdBy: authResult.userId,
-      })
-      .returning()
-
-    logger.info(`[${requestId}] Inserted row ${rowId} into table ${tableId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        row: {
-          id: row.id,
-          data: row.data,
-          createdAt: row.createdAt.toISOString(),
-          updatedAt: row.updatedAt.toISOString(),
-        },
-        message: 'Row inserted successfully',
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error inserting row:`, error)
-    return NextResponse.json({ error: 'Failed to insert row' }, { status: 500 })
-  }
-}
-
-/** GET /api/table/[tableId]/rows - Queries rows with filtering, sorting, and pagination. */
-export async function GET(request: NextRequest, { params }: TableRowsRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const { searchParams } = new URL(request.url)
-    const workspaceId = searchParams.get('workspaceId')
-    const filterParam = searchParams.get('filter')
-    const sortParam = searchParams.get('sort')
-    const limit = searchParams.get('limit')
-    const offset = searchParams.get('offset')
-
-    let filter: Record<string, unknown> | undefined
-    let sort: Sort | undefined
-
-    try {
-      if (filterParam) {
-        filter = JSON.parse(filterParam) as Record<string, unknown>
-      }
-      if (sortParam) {
-        sort = JSON.parse(sortParam) as Sort
-      }
-    } catch {
-      return NextResponse.json({ error: 'Invalid filter or sort JSON' }, { status: 400 })
-    }
-
-    const validated = QueryRowsSchema.parse({
-      workspaceId,
-      filter,
-      sort,
-      limit,
-      offset,
-    })
-
-    const accessResult = await checkAccess(tableId, authResult.userId, 'read')
-    if (!accessResult.ok) return accessError(accessResult, requestId, tableId)
-
-    const { table } = accessResult
-
-    if (validated.workspaceId !== table.workspaceId) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const baseConditions = [
-      eq(userTableRows.tableId, tableId),
-      eq(userTableRows.workspaceId, validated.workspaceId),
-    ]
-
-    if (validated.filter) {
-      const filterClause = buildFilterClause(validated.filter as Filter, USER_TABLE_ROWS_SQL_NAME)
-      if (filterClause) {
-        baseConditions.push(filterClause)
-      }
-    }
-
-    let query = db
-      .select({
-        id: userTableRows.id,
-        data: userTableRows.data,
-        createdAt: userTableRows.createdAt,
-        updatedAt: userTableRows.updatedAt,
-      })
-      .from(userTableRows)
-      .where(and(...baseConditions))
-
-    if (validated.sort) {
-      const schema = table.schema as TableSchema
-      const sortClause = buildSortClause(validated.sort, USER_TABLE_ROWS_SQL_NAME, schema.columns)
-      if (sortClause) {
-        query = query.orderBy(sortClause) as typeof query
-      }
-    } else {
-      query = query.orderBy(userTableRows.createdAt) as typeof query
-    }
-
-    const countQuery = db
-      .select({ count: sql<number>`count(*)` })
-      .from(userTableRows)
-      .where(and(...baseConditions))
-
-    const [{ count: totalCount }] = await countQuery
-
-    const rows = await query.limit(validated.limit).offset(validated.offset)
-
-    logger.info(
-      `[${requestId}] Queried ${rows.length} rows from table ${tableId} (total: ${totalCount})`
-    )
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        rows: rows.map((r) => ({
-          id: r.id,
-          data: r.data,
-          createdAt: r.createdAt.toISOString(),
-          updatedAt: r.updatedAt.toISOString(),
-        })),
-        rowCount: rows.length,
-        totalCount: Number(totalCount),
-        limit: validated.limit,
-        offset: validated.offset,
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error querying rows:`, error)
-    return NextResponse.json({ error: 'Failed to query rows' }, { status: 500 })
-  }
-}
-
-/** PUT /api/table/[tableId]/rows - Updates rows matching filter criteria. */
-export async function PUT(request: NextRequest, { params }: TableRowsRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-    const validated = UpdateRowsByFilterSchema.parse(body)
-
-    const accessResult = await checkAccess(tableId, authResult.userId, 'write')
-    if (!accessResult.ok) return accessError(accessResult, requestId, tableId)
-
-    const { table } = accessResult
-
-    if (validated.workspaceId !== table.workspaceId) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const updateData = validated.data as RowData
-
-    const sizeValidation = validateRowSize(updateData)
-    if (!sizeValidation.valid) {
-      return NextResponse.json(
-        { error: 'Invalid row data', details: sizeValidation.errors },
-        { status: 400 }
-      )
-    }
-
-    const baseConditions = [
-      eq(userTableRows.tableId, tableId),
-      eq(userTableRows.workspaceId, validated.workspaceId),
-    ]
-
-    const filterClause = buildFilterClause(validated.filter as Filter, USER_TABLE_ROWS_SQL_NAME)
-    if (filterClause) {
-      baseConditions.push(filterClause)
-    }
-
-    let matchingRowsQuery = db
-      .select({
-        id: userTableRows.id,
-        data: userTableRows.data,
-      })
-      .from(userTableRows)
-      .where(and(...baseConditions))
-
-    if (validated.limit) {
-      matchingRowsQuery = matchingRowsQuery.limit(validated.limit) as typeof matchingRowsQuery
-    }
-
-    const matchingRows = await matchingRowsQuery
-
-    if (matchingRows.length === 0) {
-      return NextResponse.json(
-        {
-          success: true,
-          data: {
-            message: 'No rows matched the filter criteria',
-            updatedCount: 0,
-          },
-        },
-        { status: 200 }
-      )
-    }
-
-    if (matchingRows.length > TABLE_LIMITS.MAX_BULK_OPERATION_SIZE) {
-      logger.warn(`[${requestId}] Updating ${matchingRows.length} rows. This may take some time.`)
-    }
-
-    for (const row of matchingRows) {
-      const existingData = row.data as RowData
-      const mergedData = { ...existingData, ...updateData }
-      const rowValidation = validateRowAgainstSchema(mergedData, table.schema as TableSchema)
-      if (!rowValidation.valid) {
-        return NextResponse.json(
-          {
-            error: 'Updated data does not match schema',
-            details: rowValidation.errors,
-            affectedRowId: row.id,
-          },
-          { status: 400 }
-        )
-      }
-    }
-
-    const uniqueColumns = getUniqueColumns(table.schema as TableSchema)
-    if (uniqueColumns.length > 0) {
-      // If updating multiple rows, check that updateData doesn't set any unique column
-      // (would cause all rows to have the same value, violating uniqueness)
-      if (matchingRows.length > 1) {
-        const uniqueColumnsInUpdate = uniqueColumns.filter((col) => col.name in updateData)
-        if (uniqueColumnsInUpdate.length > 0) {
-          return NextResponse.json(
-            {
-              error: 'Cannot set unique column values when updating multiple rows',
-              details: [
-                `Columns with unique constraint: ${uniqueColumnsInUpdate.map((c) => c.name).join(', ')}. ` +
-                  `Updating ${matchingRows.length} rows with the same value would violate uniqueness.`,
-              ],
-            },
-            { status: 400 }
-          )
-        }
-      }
-
-      // Check unique constraints against database for each row
-      for (const row of matchingRows) {
-        const existingData = row.data as RowData
-        const mergedData = { ...existingData, ...updateData }
-        const uniqueValidation = await checkUniqueConstraintsDb(
-          tableId,
-          mergedData,
-          table.schema as TableSchema,
-          row.id
-        )
-
-        if (!uniqueValidation.valid) {
-          return NextResponse.json(
-            {
-              error: 'Unique constraint violation',
-              details: uniqueValidation.errors,
-              affectedRowId: row.id,
-            },
-            { status: 400 }
-          )
-        }
-      }
-    }
-
-    const now = new Date()
-
-    await db.transaction(async (trx) => {
-      let totalUpdated = 0
-
-      for (let i = 0; i < matchingRows.length; i += TABLE_LIMITS.UPDATE_BATCH_SIZE) {
-        const batch = matchingRows.slice(i, i + TABLE_LIMITS.UPDATE_BATCH_SIZE)
-        const updatePromises = batch.map((row) => {
-          const existingData = row.data as RowData
-          return trx
-            .update(userTableRows)
-            .set({
-              data: { ...existingData, ...updateData },
-              updatedAt: now,
-            })
-            .where(eq(userTableRows.id, row.id))
-        })
-        await Promise.all(updatePromises)
-        totalUpdated += batch.length
-        logger.info(
-          `[${requestId}] Updated batch ${Math.floor(i / TABLE_LIMITS.UPDATE_BATCH_SIZE) + 1} (${totalUpdated}/${matchingRows.length} rows)`
-        )
-      }
-    })
-
-    logger.info(`[${requestId}] Updated ${matchingRows.length} rows in table ${tableId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        message: 'Rows updated successfully',
-        updatedCount: matchingRows.length,
-        updatedRowIds: matchingRows.map((r) => r.id),
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error updating rows by filter:`, error)
-
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const detailedError = `Failed to update rows: ${errorMessage}`
-
-    return NextResponse.json({ error: detailedError }, { status: 500 })
-  }
-}
-
-/** DELETE /api/table/[tableId]/rows - Deletes rows matching filter criteria. */
-export async function DELETE(request: NextRequest, { params }: TableRowsRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-    const validated = DeleteRowsByFilterSchema.parse(body)
-
-    const accessResult = await checkAccess(tableId, authResult.userId, 'write')
-    if (!accessResult.ok) return accessError(accessResult, requestId, tableId)
-
-    const { table } = accessResult
-
-    if (validated.workspaceId !== table.workspaceId) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const baseConditions = [
-      eq(userTableRows.tableId, tableId),
-      eq(userTableRows.workspaceId, validated.workspaceId),
-    ]
-
-    const filterClause = buildFilterClause(validated.filter as Filter, USER_TABLE_ROWS_SQL_NAME)
-    if (filterClause) {
-      baseConditions.push(filterClause)
-    }
-
-    let matchingRowsQuery = db
-      .select({ id: userTableRows.id })
-      .from(userTableRows)
-      .where(and(...baseConditions))
-
-    if (validated.limit) {
-      matchingRowsQuery = matchingRowsQuery.limit(validated.limit) as typeof matchingRowsQuery
-    }
-
-    const matchingRows = await matchingRowsQuery
-
-    if (matchingRows.length === 0) {
-      return NextResponse.json(
-        {
-          success: true,
-          data: {
-            message: 'No rows matched the filter criteria',
-            deletedCount: 0,
-          },
-        },
-        { status: 200 }
-      )
-    }
-
-    if (matchingRows.length > TABLE_LIMITS.DELETE_BATCH_SIZE) {
-      logger.warn(`[${requestId}] Deleting ${matchingRows.length} rows. This may take some time.`)
-    }
-
-    const rowIds = matchingRows.map((r) => r.id)
-
-    await db.transaction(async (trx) => {
-      let totalDeleted = 0
-
-      for (let i = 0; i < rowIds.length; i += TABLE_LIMITS.DELETE_BATCH_SIZE) {
-        const batch = rowIds.slice(i, i + TABLE_LIMITS.DELETE_BATCH_SIZE)
-        await trx.delete(userTableRows).where(
-          and(
-            eq(userTableRows.tableId, tableId),
-            eq(userTableRows.workspaceId, validated.workspaceId),
-            sql`${userTableRows.id} = ANY(ARRAY[${sql.join(
-              batch.map((id) => sql`${id}`),
-              sql`, `
-            )}])`
-          )
-        )
-        totalDeleted += batch.length
-        logger.info(
-          `[${requestId}] Deleted batch ${Math.floor(i / TABLE_LIMITS.DELETE_BATCH_SIZE) + 1} (${totalDeleted}/${rowIds.length} rows)`
-        )
-      }
-    })
-
-    logger.info(`[${requestId}] Deleted ${matchingRows.length} rows from table ${tableId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        message: 'Rows deleted successfully',
-        deletedCount: matchingRows.length,
-        deletedRowIds: rowIds,
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error deleting rows by filter:`, error)
-
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const detailedError = `Failed to delete rows: ${errorMessage}`
-
-    return NextResponse.json({ error: detailedError }, { status: 500 })
-  }
-}

apps/sim/app/api/table/[tableId]/rows/upsert/route.ts

@@ -1,182 +0,0 @@
-import { db } from '@sim/db'
-import { userTableRows } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq, or, sql } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { checkHybridAuth } from '@/lib/auth/hybrid'
-import { generateRequestId } from '@/lib/core/utils/request'
-import type { RowData, TableSchema } from '@/lib/table'
-import { getUniqueColumns, validateRowData } from '@/lib/table'
-import { accessError, checkAccess, verifyTableWorkspace } from '../../../utils'
-
-const logger = createLogger('TableUpsertAPI')
-
-const UpsertRowSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-  data: z.record(z.unknown(), { required_error: 'Row data is required' }),
-})
-
-interface UpsertRouteParams {
-  params: Promise<{ tableId: string }>
-}
-
-/** POST /api/table/[tableId]/rows/upsert - Inserts or updates based on unique columns. */
-export async function POST(request: NextRequest, { params }: UpsertRouteParams) {
-  const requestId = generateRequestId()
-  const { tableId } = await params
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-    const validated = UpsertRowSchema.parse(body)
-
-    const result = await checkAccess(tableId, authResult.userId, 'write')
-    if (!result.ok) return accessError(result, requestId, tableId)
-
-    const { table } = result
-
-    const isValidWorkspace = await verifyTableWorkspace(tableId, validated.workspaceId)
-    if (!isValidWorkspace) {
-      logger.warn(
-        `[${requestId}] Workspace ID mismatch for table ${tableId}. Provided: ${validated.workspaceId}, Actual: ${table.workspaceId}`
-      )
-      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
-    }
-
-    const schema = table.schema as TableSchema
-    const rowData = validated.data as RowData
-
-    const validation = await validateRowData({
-      rowData,
-      schema,
-      tableId,
-      checkUnique: false,
-    })
-    if (!validation.valid) return validation.response
-
-    const uniqueColumns = getUniqueColumns(schema)
-
-    if (uniqueColumns.length === 0) {
-      return NextResponse.json(
-        {
-          error:
-            'Upsert requires at least one unique column in the schema. Please add a unique constraint to a column or use insert instead.',
-        },
-        { status: 400 }
-      )
-    }
-
-    const uniqueFilters = uniqueColumns.map((col) => {
-      const value = rowData[col.name]
-      if (value === undefined || value === null) {
-        return null
-      }
-      return sql`${userTableRows.data}->>${col.name} = ${String(value)}`
-    })
-
-    const validUniqueFilters = uniqueFilters.filter((f): f is Exclude<typeof f, null> => f !== null)
-
-    if (validUniqueFilters.length === 0) {
-      return NextResponse.json(
-        {
-          error: `Upsert requires values for at least one unique field: ${uniqueColumns.map((c) => c.name).join(', ')}`,
-        },
-        { status: 400 }
-      )
-    }
-
-    const [existingRow] = await db
-      .select()
-      .from(userTableRows)
-      .where(
-        and(
-          eq(userTableRows.tableId, tableId),
-          eq(userTableRows.workspaceId, validated.workspaceId),
-          or(...validUniqueFilters)
-        )
-      )
-      .limit(1)
-
-    const now = new Date()
-
-    if (!existingRow && table.rowCount >= table.maxRows) {
-      return NextResponse.json(
-        { error: `Table row limit reached (${table.maxRows} rows max)` },
-        { status: 400 }
-      )
-    }
-
-    const upsertResult = await db.transaction(async (trx) => {
-      if (existingRow) {
-        const [updatedRow] = await trx
-          .update(userTableRows)
-          .set({
-            data: validated.data,
-            updatedAt: now,
-          })
-          .where(eq(userTableRows.id, existingRow.id))
-          .returning()
-
-        return {
-          row: updatedRow,
-          operation: 'update' as const,
-        }
-      }
-
-      const [insertedRow] = await trx
-        .insert(userTableRows)
-        .values({
-          id: `row_${crypto.randomUUID().replace(/-/g, '')}`,
-          tableId,
-          workspaceId: validated.workspaceId,
-          data: validated.data,
-          createdAt: now,
-          updatedAt: now,
-          createdBy: authResult.userId,
-        })
-        .returning()
-
-      return {
-        row: insertedRow,
-        operation: 'insert' as const,
-      }
-    })
-
-    logger.info(
-      `[${requestId}] Upserted (${upsertResult.operation}) row ${upsertResult.row.id} in table ${tableId}`
-    )
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        row: {
-          id: upsertResult.row.id,
-          data: upsertResult.row.data,
-          createdAt: upsertResult.row.createdAt.toISOString(),
-          updatedAt: upsertResult.row.updatedAt.toISOString(),
-        },
-        operation: upsertResult.operation,
-        message: `Row ${upsertResult.operation === 'update' ? 'updated' : 'inserted'} successfully`,
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error upserting row:`, error)
-
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const detailedError = `Failed to upsert row: ${errorMessage}`
-
-    return NextResponse.json({ error: detailedError }, { status: 500 })
-  }
-}

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

@@ -1,293 +0,0 @@
-import { db } from '@sim/db'
-import { permissions, workspace } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { z } from 'zod'
-import { checkHybridAuth } from '@/lib/auth/hybrid'
-import { generateRequestId } from '@/lib/core/utils/request'
-import {
-  canCreateTable,
-  createTable,
-  getWorkspaceTableLimits,
-  listTables,
-  TABLE_LIMITS,
-  type TableSchema,
-} from '@/lib/table'
-import { normalizeColumn } from './utils'
-
-const logger = createLogger('TableAPI')
-
-const ColumnSchema = z.object({
-  name: z
-    .string()
-    .min(1, 'Column name is required')
-    .max(
-      TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH,
-      `Column name must be ${TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH} characters or less`
-    )
-    .regex(
-      /^[a-z_][a-z0-9_]*$/i,
-      'Column name must start with a letter or underscore and contain only alphanumeric characters and underscores'
-    ),
-  type: z.enum(['string', 'number', 'boolean', 'date', 'json'], {
-    errorMap: () => ({
-      message: 'Column type must be one of: string, number, boolean, date, json',
-    }),
-  }),
-  required: z.boolean().optional().default(false),
-  unique: z.boolean().optional().default(false),
-})
-
-const CreateTableSchema = z.object({
-  name: z
-    .string()
-    .min(1, 'Table name is required')
-    .max(
-      TABLE_LIMITS.MAX_TABLE_NAME_LENGTH,
-      `Table name must be ${TABLE_LIMITS.MAX_TABLE_NAME_LENGTH} characters or less`
-    )
-    .regex(
-      /^[a-z_][a-z0-9_]*$/i,
-      'Table name must start with a letter or underscore and contain only alphanumeric characters and underscores'
-    ),
-  description: z
-    .string()
-    .max(
-      TABLE_LIMITS.MAX_DESCRIPTION_LENGTH,
-      `Description must be ${TABLE_LIMITS.MAX_DESCRIPTION_LENGTH} characters or less`
-    )
-    .optional(),
-  schema: z.object({
-    columns: z
-      .array(ColumnSchema)
-      .min(1, 'Table must have at least one column')
-      .max(
-        TABLE_LIMITS.MAX_COLUMNS_PER_TABLE,
-        `Table cannot have more than ${TABLE_LIMITS.MAX_COLUMNS_PER_TABLE} columns`
-      ),
-  }),
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-})
-
-const ListTablesSchema = z.object({
-  workspaceId: z.string().min(1, 'Workspace ID is required'),
-})
-
-interface WorkspaceAccessResult {
-  hasAccess: boolean
-  canWrite: boolean
-}
-
-async function checkWorkspaceAccess(
-  workspaceId: string,
-  userId: string
-): Promise<WorkspaceAccessResult> {
-  const [workspaceData] = await db
-    .select({
-      id: workspace.id,
-      ownerId: workspace.ownerId,
-    })
-    .from(workspace)
-    .where(eq(workspace.id, workspaceId))
-    .limit(1)
-
-  if (!workspaceData) {
-    return { hasAccess: false, canWrite: false }
-  }
-
-  if (workspaceData.ownerId === userId) {
-    return { hasAccess: true, canWrite: true }
-  }
-
-  const [permission] = await db
-    .select({
-      permissionType: permissions.permissionType,
-    })
-    .from(permissions)
-    .where(
-      and(
-        eq(permissions.userId, userId),
-        eq(permissions.entityType, 'workspace'),
-        eq(permissions.entityId, workspaceId)
-      )
-    )
-    .limit(1)
-
-  if (!permission) {
-    return { hasAccess: false, canWrite: false }
-  }
-
-  const canWrite = permission.permissionType === 'admin' || permission.permissionType === 'write'
-
-  return {
-    hasAccess: true,
-    canWrite,
-  }
-}
-
-/** POST /api/table - Creates a new user-defined table. */
-export async function POST(request: NextRequest) {
-  const requestId = generateRequestId()
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const body: unknown = await request.json()
-    const params = CreateTableSchema.parse(body)
-
-    const { hasAccess, canWrite } = await checkWorkspaceAccess(
-      params.workspaceId,
-      authResult.userId
-    )
-
-    if (!hasAccess || !canWrite) {
-      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
-    }
-
-    // Check billing plan limits
-    const existingTables = await listTables(params.workspaceId)
-    const { canCreate, maxTables } = await canCreateTable(params.workspaceId, existingTables.length)
-
-    if (!canCreate) {
-      return NextResponse.json(
-        {
-          error: `Workspace has reached the maximum table limit (${maxTables}) for your plan. Please upgrade to create more tables.`,
-        },
-        { status: 403 }
-      )
-    }
-
-    // Get plan-based row limits
-    const planLimits = await getWorkspaceTableLimits(params.workspaceId)
-    const maxRowsPerTable = planLimits.maxRowsPerTable
-
-    const normalizedSchema: TableSchema = {
-      columns: params.schema.columns.map(normalizeColumn),
-    }
-
-    const table = await createTable(
-      {
-        name: params.name,
-        description: params.description,
-        schema: normalizedSchema,
-        workspaceId: params.workspaceId,
-        userId: authResult.userId,
-        maxRows: maxRowsPerTable,
-      },
-      requestId
-    )
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        table: {
-          id: table.id,
-          name: table.name,
-          description: table.description,
-          schema: table.schema,
-          rowCount: table.rowCount,
-          maxRows: table.maxRows,
-          createdAt:
-            table.createdAt instanceof Date
-              ? table.createdAt.toISOString()
-              : String(table.createdAt),
-          updatedAt:
-            table.updatedAt instanceof Date
-              ? table.updatedAt.toISOString()
-              : String(table.updatedAt),
-        },
-        message: 'Table created successfully',
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    if (error instanceof Error) {
-      if (
-        error.message.includes('Invalid table name') ||
-        error.message.includes('Invalid schema') ||
-        error.message.includes('already exists') ||
-        error.message.includes('maximum table limit')
-      ) {
-        return NextResponse.json({ error: error.message }, { status: 400 })
-      }
-    }
-
-    logger.error(`[${requestId}] Error creating table:`, error)
-    return NextResponse.json({ error: 'Failed to create table' }, { status: 500 })
-  }
-}
-
-/** GET /api/table - Lists all tables in a workspace. */
-export async function GET(request: NextRequest) {
-  const requestId = generateRequestId()
-
-  try {
-    const authResult = await checkHybridAuth(request)
-    if (!authResult.success || !authResult.userId) {
-      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
-    }
-
-    const { searchParams } = new URL(request.url)
-    const workspaceId = searchParams.get('workspaceId')
-
-    const validation = ListTablesSchema.safeParse({ workspaceId })
-    if (!validation.success) {
-      return NextResponse.json(
-        { error: 'Validation error', details: validation.error.errors },
-        { status: 400 }
-      )
-    }
-
-    const params = validation.data
-
-    const { hasAccess } = await checkWorkspaceAccess(params.workspaceId, authResult.userId)
-
-    if (!hasAccess) {
-      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
-    }
-
-    const tables = await listTables(params.workspaceId)
-
-    logger.info(`[${requestId}] Listed ${tables.length} tables in workspace ${params.workspaceId}`)
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        tables: tables.map((t) => {
-          const schemaData = t.schema as TableSchema
-          return {
-            ...t,
-            schema: {
-              columns: schemaData.columns.map(normalizeColumn),
-            },
-            createdAt:
-              t.createdAt instanceof Date ? t.createdAt.toISOString() : String(t.createdAt),
-            updatedAt:
-              t.updatedAt instanceof Date ? t.updatedAt.toISOString() : String(t.updatedAt),
-          }
-        }),
-        totalCount: tables.length,
-      },
-    })
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation error', details: error.errors },
-        { status: 400 }
-      )
-    }
-
-    logger.error(`[${requestId}] Error listing tables:`, error)
-    return NextResponse.json({ error: 'Failed to list tables' }, { status: 500 })
-  }
-}

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

@@ -1,188 +0,0 @@
-import { createLogger } from '@sim/logger'
-import { NextResponse } from 'next/server'
-import type { ColumnDefinition, TableDefinition } from '@/lib/table'
-import { getTableById } from '@/lib/table'
-import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
-
-const logger = createLogger('TableUtils')
-
-export interface TableAccessResult {
-  hasAccess: true
-  table: TableDefinition
-}
-
-export interface TableAccessDenied {
-  hasAccess: false
-  notFound?: boolean
-  reason?: string
-}
-
-export type TableAccessCheck = TableAccessResult | TableAccessDenied
-
-export type AccessResult = { ok: true; table: TableDefinition } | { ok: false; status: 404 | 403 }
-
-export interface ApiErrorResponse {
-  error: string
-  details?: unknown
-}
-
-/**
- * Check if a user has read access to a table.
- * Read access is granted if:
- * 1. User created the table, OR
- * 2. User has any permission on the table's workspace (read, write, or admin)
- *
- * Follows the same pattern as Knowledge Base access checks.
- */
-export async function checkTableAccess(tableId: string, userId: string): Promise<TableAccessCheck> {
-  const table = await getTableById(tableId)
-
-  if (!table) {
-    return { hasAccess: false, notFound: true }
-  }
-
-  // Case 1: User created the table
-  if (table.createdBy === userId) {
-    return { hasAccess: true, table }
-  }
-
-  // Case 2: Table belongs to a workspace the user has permissions for
-  const userPermission = await getUserEntityPermissions(userId, 'workspace', table.workspaceId)
-  if (userPermission !== null) {
-    return { hasAccess: true, table }
-  }
-
-  return { hasAccess: false, reason: 'User does not have access to this table' }
-}
-
-/**
- * Check if a user has write access to a table.
- * Write access is granted if:
- * 1. User created the table, OR
- * 2. User has write or admin permissions on the table's workspace
- *
- * Follows the same pattern as Knowledge Base write access checks.
- */
-export async function checkTableWriteAccess(
-  tableId: string,
-  userId: string
-): Promise<TableAccessCheck> {
-  const table = await getTableById(tableId)
-
-  if (!table) {
-    return { hasAccess: false, notFound: true }
-  }
-
-  // Case 1: User created the table
-  if (table.createdBy === userId) {
-    return { hasAccess: true, table }
-  }
-
-  // Case 2: Table belongs to a workspace and user has write/admin permissions
-  const userPermission = await getUserEntityPermissions(userId, 'workspace', table.workspaceId)
-  if (userPermission === 'write' || userPermission === 'admin') {
-    return { hasAccess: true, table }
-  }
-
-  return { hasAccess: false, reason: 'User does not have write access to this table' }
-}
-
-/**
- * @deprecated Use checkTableAccess or checkTableWriteAccess instead.
- * Legacy access check function for backwards compatibility.
- */
-export async function checkAccess(
-  tableId: string,
-  userId: string,
-  level: 'read' | 'write' | 'admin' = 'read'
-): Promise<AccessResult> {
-  const table = await getTableById(tableId)
-
-  if (!table) {
-    return { ok: false, status: 404 }
-  }
-
-  if (table.createdBy === userId) {
-    return { ok: true, table }
-  }
-
-  const permission = await getUserEntityPermissions(userId, 'workspace', table.workspaceId)
-  const hasAccess =
-    permission !== null &&
-    (level === 'read' ||
-      (level === 'write' && (permission === 'write' || permission === 'admin')) ||
-      (level === 'admin' && permission === 'admin'))
-
-  return hasAccess ? { ok: true, table } : { ok: false, status: 403 }
-}
-
-export function accessError(
-  result: { ok: false; status: 404 | 403 },
-  requestId: string,
-  context?: string
-): NextResponse {
-  const message = result.status === 404 ? 'Table not found' : 'Access denied'
-  logger.warn(`[${requestId}] ${message}${context ? `: ${context}` : ''}`)
-  return NextResponse.json({ error: message }, { status: result.status })
-}
-
-/**
- * Converts a TableAccessDenied result to an appropriate HTTP response.
- * Use with checkTableAccess or checkTableWriteAccess.
- */
-export function tableAccessError(
-  result: TableAccessDenied,
-  requestId: string,
-  context?: string
-): NextResponse {
-  const status = result.notFound ? 404 : 403
-  const message = result.notFound ? 'Table not found' : (result.reason ?? 'Access denied')
-  logger.warn(`[${requestId}] ${message}${context ? `: ${context}` : ''}`)
-  return NextResponse.json({ error: message }, { status })
-}
-
-export async function verifyTableWorkspace(tableId: string, workspaceId: string): Promise<boolean> {
-  const table = await getTableById(tableId)
-  return table?.workspaceId === workspaceId
-}
-
-export function errorResponse(
-  message: string,
-  status: number,
-  details?: unknown
-): NextResponse<ApiErrorResponse> {
-  const body: ApiErrorResponse = { error: message }
-  if (details !== undefined) {
-    body.details = details
-  }
-  return NextResponse.json(body, { status })
-}
-
-export function badRequestResponse(message: string, details?: unknown) {
-  return errorResponse(message, 400, details)
-}
-
-export function unauthorizedResponse(message = 'Authentication required') {
-  return errorResponse(message, 401)
-}
-
-export function forbiddenResponse(message = 'Access denied') {
-  return errorResponse(message, 403)
-}
-
-export function notFoundResponse(message = 'Resource not found') {
-  return errorResponse(message, 404)
-}
-
-export function serverErrorResponse(message = 'Internal server error') {
-  return errorResponse(message, 500)
-}
-
-export function normalizeColumn(col: ColumnDefinition): ColumnDefinition {
-  return {
-    name: col.name,
-    type: col.type,
-    required: col.required ?? false,
-    unique: col.unique ?? false,
-  }
-}

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

@@ -0,0 +1,211 @@
+/**
+ * POST /api/v1/admin/credits
+ *
+ * Issue credits to a user by user ID or email.
+ *
+ * Body:
+ *   - userId?: string - The user ID to issue credits to
+ *   - email?: string - The user email to issue credits to (alternative to userId)
+ *   - amount: number - The amount of credits to issue (in dollars)
+ *   - reason?: string - Reason for issuing credits (for audit logging)
+ *
+ * Response: AdminSingleResponse<{
+ *   success: true,
+ *   entityType: 'user' | 'organization',
+ *   entityId: string,
+ *   amount: number,
+ *   newCreditBalance: number,
+ *   newUsageLimit: number,
+ * }>
+ *
+ * For Pro users: credits are added to user_stats.credit_balance
+ * For Team users: credits are added to organization.credit_balance
+ * Usage limits are updated accordingly to allow spending the credits.
+ */
+
+import { db } from '@sim/db'
+import { organization, subscription, user, userStats } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { and, eq } from 'drizzle-orm'
+import { nanoid } from 'nanoid'
+import { getHighestPrioritySubscription } from '@/lib/billing/core/subscription'
+import { addCredits } from '@/lib/billing/credits/balance'
+import { setUsageLimitForCredits } from '@/lib/billing/credits/purchase'
+import { getEffectiveSeats } from '@/lib/billing/subscriptions/utils'
+import { withAdminAuth } from '@/app/api/v1/admin/middleware'
+import {
+  badRequestResponse,
+  internalErrorResponse,
+  notFoundResponse,
+  singleResponse,
+} from '@/app/api/v1/admin/responses'
+
+const logger = createLogger('AdminCreditsAPI')
+
+export const POST = withAdminAuth(async (request) => {
+  try {
+    const body = await request.json()
+    const { userId, email, amount, reason } = body
+
+    if (!userId && !email) {
+      return badRequestResponse('Either userId or email is required')
+    }
+
+    if (userId && typeof userId !== 'string') {
+      return badRequestResponse('userId must be a string')
+    }
+
+    if (email && typeof email !== 'string') {
+      return badRequestResponse('email must be a string')
+    }
+
+    if (typeof amount !== 'number' || !Number.isFinite(amount) || amount <= 0) {
+      return badRequestResponse('amount must be a positive number')
+    }
+
+    let resolvedUserId: string
+    let userEmail: string | null = null
+
+    if (userId) {
+      const [userData] = await db
+        .select({ id: user.id, email: user.email })
+        .from(user)
+        .where(eq(user.id, userId))
+        .limit(1)
+
+      if (!userData) {
+        return notFoundResponse('User')
+      }
+      resolvedUserId = userData.id
+      userEmail = userData.email
+    } else {
+      const normalizedEmail = email.toLowerCase().trim()
+      const [userData] = await db
+        .select({ id: user.id, email: user.email })
+        .from(user)
+        .where(eq(user.email, normalizedEmail))
+        .limit(1)
+
+      if (!userData) {
+        return notFoundResponse('User with email')
+      }
+      resolvedUserId = userData.id
+      userEmail = userData.email
+    }
+
+    const userSubscription = await getHighestPrioritySubscription(resolvedUserId)
+
+    if (!userSubscription || !['pro', 'team', 'enterprise'].includes(userSubscription.plan)) {
+      return badRequestResponse(
+        'User must have an active Pro, Team, or Enterprise subscription to receive credits'
+      )
+    }
+
+    let entityType: 'user' | 'organization'
+    let entityId: string
+    const plan = userSubscription.plan
+    let seats: number | null = null
+
+    if (plan === 'team' || plan === 'enterprise') {
+      entityType = 'organization'
+      entityId = userSubscription.referenceId
+
+      const [orgExists] = await db
+        .select({ id: organization.id })
+        .from(organization)
+        .where(eq(organization.id, entityId))
+        .limit(1)
+
+      if (!orgExists) {
+        return notFoundResponse('Organization')
+      }
+
+      const [subData] = await db
+        .select()
+        .from(subscription)
+        .where(and(eq(subscription.referenceId, entityId), eq(subscription.status, 'active')))
+        .limit(1)
+
+      seats = getEffectiveSeats(subData)
+    } else {
+      entityType = 'user'
+      entityId = resolvedUserId
+
+      const [existingStats] = await db
+        .select({ id: userStats.id })
+        .from(userStats)
+        .where(eq(userStats.userId, entityId))
+        .limit(1)
+
+      if (!existingStats) {
+        await db.insert(userStats).values({
+          id: nanoid(),
+          userId: entityId,
+        })
+      }
+    }
+
+    await addCredits(entityType, entityId, amount)
+
+    let newCreditBalance: number
+    if (entityType === 'organization') {
+      const [orgData] = await db
+        .select({ creditBalance: organization.creditBalance })
+        .from(organization)
+        .where(eq(organization.id, entityId))
+        .limit(1)
+      newCreditBalance = Number.parseFloat(orgData?.creditBalance || '0')
+    } else {
+      const [stats] = await db
+        .select({ creditBalance: userStats.creditBalance })
+        .from(userStats)
+        .where(eq(userStats.userId, entityId))
+        .limit(1)
+      newCreditBalance = Number.parseFloat(stats?.creditBalance || '0')
+    }
+
+    await setUsageLimitForCredits(entityType, entityId, plan, seats, newCreditBalance)
+
+    let newUsageLimit: number
+    if (entityType === 'organization') {
+      const [orgData] = await db
+        .select({ orgUsageLimit: organization.orgUsageLimit })
+        .from(organization)
+        .where(eq(organization.id, entityId))
+        .limit(1)
+      newUsageLimit = Number.parseFloat(orgData?.orgUsageLimit || '0')
+    } else {
+      const [stats] = await db
+        .select({ currentUsageLimit: userStats.currentUsageLimit })
+        .from(userStats)
+        .where(eq(userStats.userId, entityId))
+        .limit(1)
+      newUsageLimit = Number.parseFloat(stats?.currentUsageLimit || '0')
+    }
+
+    logger.info('Admin API: Issued credits', {
+      resolvedUserId,
+      userEmail,
+      entityType,
+      entityId,
+      amount,
+      newCreditBalance,
+      newUsageLimit,
+      reason: reason || 'No reason provided',
+    })
+
+    return singleResponse({
+      success: true,
+      userId: resolvedUserId,
+      userEmail,
+      entityType,
+      entityId,
+      amount,
+      newCreditBalance,
+      newUsageLimit,
+    })
+  } catch (error) {
+    logger.error('Admin API: Failed to issue credits', { error })
+    return internalErrorResponse('Failed to issue credits')
+  }
+})

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

@@ -63,6 +63,9 @@
  *   GET    /api/v1/admin/subscriptions/:id                  - Get subscription details
  *   DELETE /api/v1/admin/subscriptions/:id                  - Cancel subscription (?atPeriodEnd=true for scheduled)
  *
+ *   Credits:
+ *   POST   /api/v1/admin/credits                            - Issue credits to user (by userId or email)
+ *
  *   Access Control (Permission Groups):
  *   GET    /api/v1/admin/access-control                     - List permission groups (?organizationId=X)
  *   DELETE /api/v1/admin/access-control                     - Delete permission groups for org (?organizationId=X)

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

@@ -11,7 +11,6 @@ import { checkAndBillOverageThreshold } from '@/lib/billing/threshold-billing'
 import { env } from '@/lib/core/config/env'
 import { getCostMultiplier, isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { generateRequestId } from '@/lib/core/utils/request'
-import { enrichTableSchema } from '@/lib/table/llm/wand'
 import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
 import { getModelPricing } from '@/providers/utils'
 
@@ -61,7 +60,6 @@ interface RequestBody {
   history?: ChatMessage[]
   workflowId?: string
   generationType?: string
-  wandContext?: Record<string, unknown>
 }
 
 function safeStringify(value: unknown): string {
@@ -72,38 +70,6 @@ function safeStringify(value: unknown): string {
   }
 }
 
-/**
- * Wand enricher function type.
- * Enrichers add context to the system prompt based on generationType.
- */
-type WandEnricher = (
-  workspaceId: string | null,
-  context: Record<string, unknown>
-) => Promise<string | null>
-
-/**
- * Registry of wand enrichers by generationType.
- * Each enricher returns additional context to append to the system prompt.
- */
-const wandEnrichers: Partial<Record<string, WandEnricher>> = {
-  timestamp: async () => {
-    const now = new Date()
-    return `Current date and time context for reference:
-- Current UTC timestamp: ${now.toISOString()}
-- Current Unix timestamp (seconds): ${Math.floor(now.getTime() / 1000)}
-- Current Unix timestamp (milliseconds): ${now.getTime()}
-- Current date (UTC): ${now.toISOString().split('T')[0]}
-- Current year: ${now.getUTCFullYear()}
-- Current month: ${now.getUTCMonth() + 1}
-- Current day of month: ${now.getUTCDate()}
-- Current day of week: ${['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][now.getUTCDay()]}
-
-Use this context to calculate relative dates like "yesterday", "last week", "beginning of this month", etc.`
-  },
-
-  'table-schema': enrichTableSchema,
-}
-
 async function updateUserStatsForWand(
   userId: string,
   usage: {
@@ -193,15 +159,7 @@ export async function POST(req: NextRequest) {
   try {
     const body = (await req.json()) as RequestBody
 
-    const {
-      prompt,
-      systemPrompt,
-      stream = false,
-      history = [],
-      workflowId,
-      generationType,
-      wandContext = {},
-    } = body
+    const { prompt, systemPrompt, stream = false, history = [], workflowId, generationType } = body
 
     if (!prompt) {
       logger.warn(`[${requestId}] Invalid request: Missing prompt.`)
@@ -269,15 +227,20 @@ export async function POST(req: NextRequest) {
       systemPrompt ||
       'You are a helpful AI assistant. Generate content exactly as requested by the user.'
 
-    // Apply enricher if one exists for this generationType
-    if (generationType) {
-      const enricher = wandEnrichers[generationType]
-      if (enricher) {
-        const enrichment = await enricher(workspaceId, wandContext)
-        if (enrichment) {
-          finalSystemPrompt += `\n\n${enrichment}`
-        }
-      }
+    if (generationType === 'timestamp') {
+      const now = new Date()
+      const currentTimeContext = `\n\nCurrent date and time context for reference:
+- Current UTC timestamp: ${now.toISOString()}
+- Current Unix timestamp (seconds): ${Math.floor(now.getTime() / 1000)}
+- Current Unix timestamp (milliseconds): ${now.getTime()}
+- Current date (UTC): ${now.toISOString().split('T')[0]}
+- Current year: ${now.getUTCFullYear()}
+- Current month: ${now.getUTCMonth() + 1}
+- Current day of month: ${now.getUTCDate()}
+- Current day of week: ${['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][now.getUTCDay()]}
+
+Use this context to calculate relative dates like "yesterday", "last week", "beginning of this month", etc.`
+      finalSystemPrompt += currentTimeContext
     }
 
     if (generationType === 'json-object') {

apps/sim/app/changelog/components/branded-link.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Link from 'next/link'
+import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
+
+interface BrandedLinkProps {
+  href: string
+  children: React.ReactNode
+  className?: string
+  target?: string
+  rel?: string
+}
+
+export function BrandedLink({ href, children, className = '', target, rel }: BrandedLinkProps) {
+  const buttonClass = useBrandedButtonClass()
+
+  return (
+    <Link
+      href={href}
+      target={target}
+      rel={rel}
+      className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all ${className}`}
+    >
+      {children}
+    </Link>
+  )
+}

apps/sim/app/changelog/components/changelog-content.tsx

@@ -2,6 +2,7 @@ import { BookOpen, Github, Rss } from 'lucide-react'
 import Link from 'next/link'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedLink } from '@/app/changelog/components/branded-link'
 import ChangelogList from '@/app/changelog/components/timeline-list'
 
 export interface ChangelogEntry {
@@ -66,25 +67,24 @@ export default async function ChangelogContent() {
             <hr className='mt-6 border-border' />
 
             <div className='mt-6 flex flex-wrap items-center gap-3 text-sm'>
-              <Link
+              <BrandedLink
                 href='https://github.com/simstudioai/sim/releases'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='group inline-flex items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[14px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all sm:text-[16px]'
               >
                 <Github className='h-4 w-4' />
                 View on GitHub
-              </Link>
+              </BrandedLink>
               <Link
                 href='https://docs.sim.ai'
-                className='inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 hover:bg-muted'
+                className='inline-flex items-center gap-2 rounded-[10px] border border-border py-[6px] pr-[10px] pl-[12px] text-[15px] transition-all hover:bg-muted'
               >
                 <BookOpen className='h-4 w-4' />
                 Documentation
               </Link>
               <Link
                 href='/changelog.xml'
-                className='inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 hover:bg-muted'
+                className='inline-flex items-center gap-2 rounded-[10px] border border-border py-[6px] pr-[10px] pl-[12px] text-[15px] transition-all hover:bg-muted'
               >
                 <Rss className='h-4 w-4' />
                 RSS Feed

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

@@ -117,7 +117,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   const [error, setError] = useState<string | null>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
-  const [starCount, setStarCount] = useState('25.1k')
+  const [starCount, setStarCount] = useState('25.8k')
   const [conversationId, setConversationId] = useState('')
 
   const [showScrollButton, setShowScrollButton] = useState(false)

apps/sim/app/templates/components/template-card.tsx

@@ -207,7 +207,6 @@ function TemplateCardInner({
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
-            lightweight
           />
         ) : (
           <div className='h-full w-full bg-[var(--surface-4)]' />

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

@@ -555,7 +555,7 @@ export function DocumentTagsModal({
                           Cancel
                         </Button>
                         <Button
-                          variant={canSaveTag ? 'tertiary' : 'default'}
+                          variant='tertiary'
                           onClick={saveDocumentTag}
                           className='flex-1'
                           disabled={!canSaveTag}

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

@@ -61,6 +61,7 @@ export function EditChunkModal({
   const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
   const [pendingNavigation, setPendingNavigation] = useState<(() => void) | null>(null)
   const [tokenizerOn, setTokenizerOn] = useState(false)
+  const [hoveredTokenIndex, setHoveredTokenIndex] = useState<number | null>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const error = mutationError?.message ?? null
@@ -254,6 +255,8 @@ export function EditChunkModal({
                         style={{
                           backgroundColor: getTokenBgColor(index),
                         }}
+                        onMouseEnter={() => setHoveredTokenIndex(index)}
+                        onMouseLeave={() => setHoveredTokenIndex(null)}
                       >
                         {token}
                       </span>
@@ -281,6 +284,11 @@ export function EditChunkModal({
                 <div className='flex items-center gap-[8px]'>
                   <span className='text-[12px] text-[var(--text-secondary)]'>Tokenizer</span>
                   <Switch checked={tokenizerOn} onCheckedChange={setTokenizerOn} />
+                  {tokenizerOn && hoveredTokenIndex !== null && (
+                    <span className='text-[12px] text-[var(--text-tertiary)]'>
+                      Token #{hoveredTokenIndex + 1}
+                    </span>
+                  )}
                 </div>
                 <span className='text-[12px] text-[var(--text-secondary)]'>
                   {tokenCount.toLocaleString()}
@@ -300,7 +308,7 @@ export function EditChunkModal({
               </Button>
               {userPermissions.canEdit && (
                 <Button
-                  variant={hasUnsavedChanges ? 'tertiary' : 'default'}
+                  variant='tertiary'
                   onClick={handleSaveContent}
                   type='button'
                   disabled={!isFormValid || isSaving || !hasUnsavedChanges || isNavigating}

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

@@ -36,6 +36,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import { Skeleton } from '@/components/ui/skeleton'
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
 import type { ChunkData } from '@/lib/knowledge/types'
 import {
   ChunkContextMenu,
@@ -58,55 +59,6 @@ import {
 
 const logger = createLogger('Document')
 
-/**
- * Formats a date string to relative time (e.g., "2h ago", "3d ago")
- */
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) {
-    return 'just now'
-  }
-  if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60)
-    return `${minutes}m ago`
-  }
-  if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600)
-    return `${hours}h ago`
-  }
-  if (diffInSeconds < 604800) {
-    const days = Math.floor(diffInSeconds / 86400)
-    return `${days}d ago`
-  }
-  if (diffInSeconds < 2592000) {
-    const weeks = Math.floor(diffInSeconds / 604800)
-    return `${weeks}w ago`
-  }
-  if (diffInSeconds < 31536000) {
-    const months = Math.floor(diffInSeconds / 2592000)
-    return `${months}mo ago`
-  }
-  const years = Math.floor(diffInSeconds / 31536000)
-  return `${years}y ago`
-}
-
-/**
- * Formats a date string to absolute format for tooltip display
- */
-function formatAbsoluteDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
 interface DocumentProps {
   knowledgeBaseId: string
   documentId: string
@@ -304,7 +256,6 @@ export function Document({
 
   const [searchQuery, setSearchQuery] = useState('')
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
-  const [isSearching, setIsSearching] = useState(false)
 
   const {
     chunks: initialChunks,
@@ -344,7 +295,6 @@ export function Document({
     const handler = setTimeout(() => {
       startTransition(() => {
         setDebouncedSearchQuery(searchQuery)
-        setIsSearching(searchQuery.trim().length > 0)
       })
     }, 200)
 
@@ -353,6 +303,7 @@ export function Document({
     }
   }, [searchQuery])
 
+  const isSearching = debouncedSearchQuery.trim().length > 0
   const showingSearch = isSearching && searchQuery.trim().length > 0 && searchResults.length > 0
   const SEARCH_PAGE_SIZE = 50
   const maxSearchPages = Math.ceil(searchResults.length / SEARCH_PAGE_SIZE)

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

@@ -27,6 +27,10 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Popover,
+  PopoverContent,
+  PopoverItem,
+  PopoverTrigger,
   Table,
   TableBody,
   TableCell,
@@ -40,8 +44,11 @@ import { Input } from '@/components/ui/input'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/core/utils/cn'
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
+import { ALL_TAG_SLOTS, type AllTagSlot, getFieldTypeForSlot } from '@/lib/knowledge/constants'
 import type { DocumentSortField, SortOrder } from '@/lib/knowledge/documents/types'
 import type { DocumentData } from '@/lib/knowledge/types'
+import { formatFileSize } from '@/lib/uploads/utils/file-utils'
 import {
   ActionBar,
   AddDocumentsModal,
@@ -189,8 +196,8 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
             </div>
           </div>
 
-          <div className='mt-[4px]'>
-            <Skeleton className='h-[21px] w-[300px] rounded-[4px]' />
+          <div>
+            <Skeleton className='mt-[4px] h-[21px] w-[300px] rounded-[4px]' />
           </div>
 
           <div className='mt-[16px] flex items-center gap-[8px]'>
@@ -208,9 +215,12 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <Button disabled variant='tertiary' className='h-[32px] rounded-[6px]'>
-              Add Documents
-            </Button>
+            <div className='flex items-center gap-[8px]'>
+              <Skeleton className='h-[32px] w-[52px] rounded-[6px]' />
+              <Button disabled variant='tertiary' className='h-[32px] rounded-[6px]'>
+                Add Documents
+              </Button>
+            </div>
           </div>
 
           <div className='mt-[12px] flex flex-1 flex-col overflow-hidden'>
@@ -222,73 +232,11 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
   )
 }
 
-/**
- * Formats a date string to relative time (e.g., "2h ago", "3d ago")
- */
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) {
-    return 'just now'
-  }
-  if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60)
-    return `${minutes}m ago`
-  }
-  if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600)
-    return `${hours}h ago`
-  }
-  if (diffInSeconds < 604800) {
-    const days = Math.floor(diffInSeconds / 86400)
-    return `${days}d ago`
-  }
-  if (diffInSeconds < 2592000) {
-    const weeks = Math.floor(diffInSeconds / 604800)
-    return `${weeks}w ago`
-  }
-  if (diffInSeconds < 31536000) {
-    const months = Math.floor(diffInSeconds / 2592000)
-    return `${months}mo ago`
-  }
-  const years = Math.floor(diffInSeconds / 31536000)
-  return `${years}y ago`
-}
-
-/**
- * Formats a date string to absolute format for tooltip display
- */
-function formatAbsoluteDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
 interface KnowledgeBaseProps {
   id: string
   knowledgeBaseName?: string
 }
 
-function getFileIcon(mimeType: string, filename: string) {
-  const IconComponent = getDocumentIcon(mimeType, filename)
-  return <IconComponent className='h-6 w-5 flex-shrink-0' />
-}
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
-}
-
 const AnimatedLoader = ({ className }: { className?: string }) => (
   <Loader2 className={cn(className, 'animate-spin')} />
 )
@@ -336,53 +284,24 @@ const getStatusBadge = (doc: DocumentData) => {
   }
 }
 
-const TAG_SLOTS = [
-  'tag1',
-  'tag2',
-  'tag3',
-  'tag4',
-  'tag5',
-  'tag6',
-  'tag7',
-  'number1',
-  'number2',
-  'number3',
-  'number4',
-  'number5',
-  'date1',
-  'date2',
-  'boolean1',
-  'boolean2',
-  'boolean3',
-] as const
-
-type TagSlot = (typeof TAG_SLOTS)[number]
-
 interface TagValue {
-  slot: TagSlot
+  slot: AllTagSlot
   displayName: string
   value: string
 }
 
-const TAG_FIELD_TYPES: Record<string, string> = {
-  tag: 'text',
-  number: 'number',
-  date: 'date',
-  boolean: 'boolean',
-}
-
 /**
  * Computes tag values for a document
  */
 function getDocumentTags(doc: DocumentData, definitions: TagDefinition[]): TagValue[] {
   const result: TagValue[] = []
 
-  for (const slot of TAG_SLOTS) {
+  for (const slot of ALL_TAG_SLOTS) {
     const raw = doc[slot]
     if (raw == null) continue
 
     const def = definitions.find((d) => d.tagSlot === slot)
-    const fieldType = def?.fieldType || TAG_FIELD_TYPES[slot.replace(/\d+$/, '')] || 'text'
+    const fieldType = def?.fieldType || getFieldTypeForSlot(slot) || 'text'
 
     let value: string
     if (fieldType === 'date') {
@@ -424,6 +343,8 @@ export function KnowledgeBase({
 
   const [searchQuery, setSearchQuery] = useState('')
   const [showTagsModal, setShowTagsModal] = useState(false)
+  const [enabledFilter, setEnabledFilter] = useState<'all' | 'enabled' | 'disabled'>('all')
+  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState(false)
 
   /**
    * Memoize the search query setter to prevent unnecessary re-renders
@@ -434,6 +355,7 @@ export function KnowledgeBase({
   }, [])
 
   const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(new Set())
+  const [isSelectAllMode, setIsSelectAllMode] = useState(false)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [showAddDocumentsModal, setShowAddDocumentsModal] = useState(false)
   const [showDeleteDocumentModal, setShowDeleteDocumentModal] = useState(false)
@@ -460,7 +382,6 @@ export function KnowledgeBase({
     error: knowledgeBaseError,
     refresh: refreshKnowledgeBase,
   } = useKnowledgeBase(id)
-  const [hasProcessingDocuments, setHasProcessingDocuments] = useState(false)
 
   const {
     documents,
@@ -469,6 +390,7 @@ export function KnowledgeBase({
     isFetching: isFetchingDocuments,
     isPlaceholderData: isPlaceholderDocuments,
     error: documentsError,
+    hasProcessingDocuments,
     updateDocument,
     refreshDocuments,
   } = useKnowledgeBaseDocuments(id, {
@@ -477,7 +399,14 @@ export function KnowledgeBase({
     offset: (currentPage - 1) * DOCUMENTS_PER_PAGE,
     sortBy,
     sortOrder,
-    refetchInterval: hasProcessingDocuments && !isDeleting ? 3000 : false,
+    refetchInterval: (data) => {
+      if (isDeleting) return false
+      const hasPending = data?.documents?.some(
+        (doc) => doc.processingStatus === 'pending' || doc.processingStatus === 'processing'
+      )
+      return hasPending ? 3000 : false
+    },
+    enabledFilter,
   })
 
   const { tagDefinitions } = useKnowledgeBaseTagDefinitions(id)
@@ -543,52 +472,52 @@ export function KnowledgeBase({
     </TableHead>
   )
 
-  useEffect(() => {
-    const processing = documents.some(
-      (doc) => doc.processingStatus === 'pending' || doc.processingStatus === 'processing'
-    )
-    setHasProcessingDocuments(processing)
-
-    if (processing) {
-      checkForDeadProcesses()
-    }
-  }, [documents])
-
   /**
    * Checks for documents with stale processing states and marks them as failed
    */
-  const checkForDeadProcesses = () => {
-    const now = new Date()
-    const DEAD_PROCESS_THRESHOLD_MS = 600 * 1000 // 10 minutes
+  const checkForDeadProcesses = useCallback(
+    (docsToCheck: DocumentData[]) => {
+      const now = new Date()
+      const DEAD_PROCESS_THRESHOLD_MS = 600 * 1000 // 10 minutes
 
-    const staleDocuments = documents.filter((doc) => {
-      if (doc.processingStatus !== 'processing' || !doc.processingStartedAt) {
-        return false
-      }
-
-      const processingDuration = now.getTime() - new Date(doc.processingStartedAt).getTime()
-      return processingDuration > DEAD_PROCESS_THRESHOLD_MS
-    })
-
-    if (staleDocuments.length === 0) return
-
-    logger.warn(`Found ${staleDocuments.length} documents with dead processes`)
-
-    staleDocuments.forEach((doc) => {
-      updateDocumentMutation(
-        {
-          knowledgeBaseId: id,
-          documentId: doc.id,
-          updates: { markFailedDueToTimeout: true },
-        },
-        {
-          onSuccess: () => {
-            logger.info(`Successfully marked dead process as failed for document: ${doc.filename}`)
-          },
+      const staleDocuments = docsToCheck.filter((doc) => {
+        if (doc.processingStatus !== 'processing' || !doc.processingStartedAt) {
+          return false
         }
-      )
-    })
-  }
+
+        const processingDuration = now.getTime() - new Date(doc.processingStartedAt).getTime()
+        return processingDuration > DEAD_PROCESS_THRESHOLD_MS
+      })
+
+      if (staleDocuments.length === 0) return
+
+      logger.warn(`Found ${staleDocuments.length} documents with dead processes`)
+
+      staleDocuments.forEach((doc) => {
+        updateDocumentMutation(
+          {
+            knowledgeBaseId: id,
+            documentId: doc.id,
+            updates: { markFailedDueToTimeout: true },
+          },
+          {
+            onSuccess: () => {
+              logger.info(
+                `Successfully marked dead process as failed for document: ${doc.filename}`
+              )
+            },
+          }
+        )
+      })
+    },
+    [id, updateDocumentMutation]
+  )
+
+  useEffect(() => {
+    if (hasProcessingDocuments) {
+      checkForDeadProcesses(documents)
+    }
+  }, [hasProcessingDocuments, documents, checkForDeadProcesses])
 
   const handleToggleEnabled = (docId: string) => {
     const document = documents.find((doc) => doc.id === docId)
@@ -748,6 +677,7 @@ export function KnowledgeBase({
       setSelectedDocuments(new Set(documents.map((doc) => doc.id)))
     } else {
       setSelectedDocuments(new Set())
+      setIsSelectAllMode(false)
     }
   }
 
@@ -793,6 +723,26 @@ export function KnowledgeBase({
    * Handles bulk enabling of selected documents
    */
   const handleBulkEnable = () => {
+    if (isSelectAllMode) {
+      bulkDocumentMutation(
+        {
+          knowledgeBaseId: id,
+          operation: 'enable',
+          selectAll: true,
+          enabledFilter,
+        },
+        {
+          onSuccess: (result) => {
+            logger.info(`Successfully enabled ${result.successCount} documents`)
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
+            refreshDocuments()
+          },
+        }
+      )
+      return
+    }
+
     const documentsToEnable = documents.filter(
       (doc) => selectedDocuments.has(doc.id) && !doc.enabled
     )
@@ -821,6 +771,26 @@ export function KnowledgeBase({
    * Handles bulk disabling of selected documents
    */
   const handleBulkDisable = () => {
+    if (isSelectAllMode) {
+      bulkDocumentMutation(
+        {
+          knowledgeBaseId: id,
+          operation: 'disable',
+          selectAll: true,
+          enabledFilter,
+        },
+        {
+          onSuccess: (result) => {
+            logger.info(`Successfully disabled ${result.successCount} documents`)
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
+            refreshDocuments()
+          },
+        }
+      )
+      return
+    }
+
     const documentsToDisable = documents.filter(
       (doc) => selectedDocuments.has(doc.id) && doc.enabled
     )
@@ -845,18 +815,35 @@ export function KnowledgeBase({
     )
   }
 
-  /**
-   * Opens the bulk delete confirmation modal
-   */
   const handleBulkDelete = () => {
     if (selectedDocuments.size === 0) return
     setShowBulkDeleteModal(true)
   }
 
-  /**
-   * Confirms and executes the bulk deletion of selected documents
-   */
   const confirmBulkDelete = () => {
+    if (isSelectAllMode) {
+      bulkDocumentMutation(
+        {
+          knowledgeBaseId: id,
+          operation: 'delete',
+          selectAll: true,
+          enabledFilter,
+        },
+        {
+          onSuccess: (result) => {
+            logger.info(`Successfully deleted ${result.successCount} documents`)
+            refreshDocuments()
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
+          },
+          onSettled: () => {
+            setShowBulkDeleteModal(false)
+          },
+        }
+      )
+      return
+    }
+
     const documentsToDelete = documents.filter((doc) => selectedDocuments.has(doc.id))
 
     if (documentsToDelete.length === 0) return
@@ -881,14 +868,17 @@ export function KnowledgeBase({
   }
 
   const selectedDocumentsList = documents.filter((doc) => selectedDocuments.has(doc.id))
-  const enabledCount = selectedDocumentsList.filter((doc) => doc.enabled).length
-  const disabledCount = selectedDocumentsList.filter((doc) => !doc.enabled).length
+  const enabledCount = isSelectAllMode
+    ? enabledFilter === 'disabled'
+      ? 0
+      : pagination.total
+    : selectedDocumentsList.filter((doc) => doc.enabled).length
+  const disabledCount = isSelectAllMode
+    ? enabledFilter === 'enabled'
+      ? 0
+      : pagination.total
+    : selectedDocumentsList.filter((doc) => !doc.enabled).length
 
-  /**
-   * Handle right-click on a document row
-   * If right-clicking on an unselected document, select only that document
-   * If right-clicking on a selected document with multiple selections, keep all selections
-   */
   const handleDocumentContextMenu = useCallback(
     (e: React.MouseEvent, doc: DocumentData) => {
       const isCurrentlySelected = selectedDocuments.has(doc.id)
@@ -1005,11 +995,13 @@ export function KnowledgeBase({
             </div>
           </div>
 
-          {knowledgeBase?.description && (
-            <p className='mt-[4px] line-clamp-2 max-w-[40vw] font-medium text-[14px] text-[var(--text-tertiary)]'>
-              {knowledgeBase.description}
-            </p>
-          )}
+          <div>
+            {knowledgeBase?.description && (
+              <p className='mt-[4px] line-clamp-2 max-w-[40vw] font-medium text-[14px] text-[var(--text-tertiary)]'>
+                {knowledgeBase.description}
+              </p>
+            )}
+          </div>
 
           <div className='mt-[16px] flex items-center gap-[8px]'>
             <span className='text-[14px] text-[var(--text-muted)]'>
@@ -1052,21 +1044,76 @@ export function KnowledgeBase({
                 ))}
             </div>
 
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  onClick={handleAddDocuments}
-                  disabled={userPermissions.canEdit !== true}
-                  variant='tertiary'
-                  className='h-[32px] rounded-[6px]'
-                >
-                  Add Documents
-                </Button>
-              </Tooltip.Trigger>
-              {userPermissions.canEdit !== true && (
-                <Tooltip.Content>Write permission required to add documents</Tooltip.Content>
-              )}
-            </Tooltip.Root>
+            <div className='flex items-center gap-[8px]'>
+              <Popover open={isFilterPopoverOpen} onOpenChange={setIsFilterPopoverOpen}>
+                <PopoverTrigger asChild>
+                  <Button variant='default' className='h-[32px] rounded-[6px]'>
+                    {enabledFilter === 'all'
+                      ? 'All'
+                      : enabledFilter === 'enabled'
+                        ? 'Enabled'
+                        : 'Disabled'}
+                    <ChevronDown className='ml-2 h-4 w-4 text-muted-foreground' />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align='end' side='bottom' sideOffset={4}>
+                  <div className='flex flex-col gap-[2px]'>
+                    <PopoverItem
+                      active={enabledFilter === 'all'}
+                      onClick={() => {
+                        setEnabledFilter('all')
+                        setIsFilterPopoverOpen(false)
+                        setCurrentPage(1)
+                        setSelectedDocuments(new Set())
+                        setIsSelectAllMode(false)
+                      }}
+                    >
+                      All
+                    </PopoverItem>
+                    <PopoverItem
+                      active={enabledFilter === 'enabled'}
+                      onClick={() => {
+                        setEnabledFilter('enabled')
+                        setIsFilterPopoverOpen(false)
+                        setCurrentPage(1)
+                        setSelectedDocuments(new Set())
+                        setIsSelectAllMode(false)
+                      }}
+                    >
+                      Enabled
+                    </PopoverItem>
+                    <PopoverItem
+                      active={enabledFilter === 'disabled'}
+                      onClick={() => {
+                        setEnabledFilter('disabled')
+                        setIsFilterPopoverOpen(false)
+                        setCurrentPage(1)
+                        setSelectedDocuments(new Set())
+                        setIsSelectAllMode(false)
+                      }}
+                    >
+                      Disabled
+                    </PopoverItem>
+                  </div>
+                </PopoverContent>
+              </Popover>
+
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    onClick={handleAddDocuments}
+                    disabled={userPermissions.canEdit !== true}
+                    variant='tertiary'
+                    className='h-[32px] rounded-[6px]'
+                  >
+                    Add Documents
+                  </Button>
+                </Tooltip.Trigger>
+                {userPermissions.canEdit !== true && (
+                  <Tooltip.Content>Write permission required to add documents</Tooltip.Content>
+                )}
+              </Tooltip.Root>
+            </div>
           </div>
 
           {error && !isLoadingKnowledgeBase && (
@@ -1089,14 +1136,20 @@ export function KnowledgeBase({
               <div className='mt-[10px] flex h-64 items-center justify-center rounded-lg border border-muted-foreground/25 bg-muted/20'>
                 <div className='text-center'>
                   <p className='font-medium text-[var(--text-secondary)] text-sm'>
-                    {searchQuery ? 'No documents found' : 'No documents yet'}
+                    {searchQuery
+                      ? 'No documents found'
+                      : enabledFilter !== 'all'
+                        ? 'Nothing matches your filter'
+                        : 'No documents yet'}
                   </p>
                   <p className='mt-1 text-[var(--text-muted)] text-xs'>
                     {searchQuery
                       ? 'Try a different search term'
-                      : userPermissions.canEdit === true
-                        ? 'Add documents to get started'
-                        : 'Documents will appear here once added'}
+                      : enabledFilter !== 'all'
+                        ? 'Try changing the filter'
+                        : userPermissions.canEdit === true
+                          ? 'Add documents to get started'
+                          : 'Documents will appear here once added'}
                   </p>
                 </div>
               </div>
@@ -1120,7 +1173,7 @@ export function KnowledgeBase({
                     {renderSortableHeader('tokenCount', 'Tokens', 'hidden w-[8%] lg:table-cell')}
                     {renderSortableHeader('chunkCount', 'Chunks', 'w-[8%]')}
                     {renderSortableHeader('uploadedAt', 'Uploaded', 'w-[11%]')}
-                    {renderSortableHeader('processingStatus', 'Status', 'w-[10%]')}
+                    {renderSortableHeader('enabled', 'Status', 'w-[10%]')}
                     <TableHead className='w-[12%] px-[12px] py-[8px] text-[12px] text-[var(--text-secondary)]'>
                       Tags
                     </TableHead>
@@ -1164,7 +1217,10 @@ export function KnowledgeBase({
                         </TableCell>
                         <TableCell className='w-[180px] max-w-[180px] px-[12px] py-[8px]'>
                           <div className='flex min-w-0 items-center gap-[8px]'>
-                            {getFileIcon(doc.mimeType, doc.filename)}
+                            {(() => {
+                              const IconComponent = getDocumentIcon(doc.mimeType, doc.filename)
+                              return <IconComponent className='h-6 w-5 flex-shrink-0' />
+                            })()}
                             <Tooltip.Root>
                               <Tooltip.Trigger asChild>
                                 <span
@@ -1508,6 +1564,14 @@ export function KnowledgeBase({
         enabledCount={enabledCount}
         disabledCount={disabledCount}
         isLoading={isBulkOperating}
+        totalCount={pagination.total}
+        isAllPageSelected={isAllSelected}
+        isAllSelected={isSelectAllMode}
+        onSelectAll={() => setIsSelectAllMode(true)}
+        onClearSelectAll={() => {
+          setIsSelectAllMode(false)
+          setSelectedDocuments(new Set())
+        }}
       />
 
       <DocumentContextMenu

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx

@@ -13,6 +13,11 @@ interface ActionBarProps {
   disabledCount?: number
   isLoading?: boolean
   className?: string
+  totalCount?: number
+  isAllPageSelected?: boolean
+  isAllSelected?: boolean
+  onSelectAll?: () => void
+  onClearSelectAll?: () => void
 }
 
 export function ActionBar({
@@ -24,14 +29,21 @@ export function ActionBar({
   disabledCount = 0,
   isLoading = false,
   className,
+  totalCount = 0,
+  isAllPageSelected = false,
+  isAllSelected = false,
+  onSelectAll,
+  onClearSelectAll,
 }: ActionBarProps) {
   const userPermissions = useUserPermissionsContext()
 
-  if (selectedCount === 0) return null
+  if (selectedCount === 0 && !isAllSelected) return null
 
   const canEdit = userPermissions.canEdit
   const showEnableButton = disabledCount > 0 && onEnable && canEdit
   const showDisableButton = enabledCount > 0 && onDisable && canEdit
+  const showSelectAllOption =
+    isAllPageSelected && !isAllSelected && totalCount > selectedCount && onSelectAll
 
   return (
     <motion.div
@@ -43,7 +55,31 @@ export function ActionBar({
     >
       <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] py-[6px]'>
         <span className='px-[4px] text-[13px] text-[var(--text-secondary)]'>
-          {selectedCount} selected
+          {isAllSelected ? totalCount : selectedCount} selected
+          {showSelectAllOption && (
+            <>
+              {' · '}
+              <button
+                type='button'
+                onClick={onSelectAll}
+                className='text-[var(--brand-primary)] hover:underline'
+              >
+                Select all
+              </button>
+            </>
+          )}
+          {isAllSelected && onClearSelectAll && (
+            <>
+              {' · '}
+              <button
+                type='button'
+                onClick={onClearSelectAll}
+                className='text-[var(--brand-primary)] hover:underline'
+              >
+                Clear
+              </button>
+            </>
+          )}
         </span>
 
         <div className='flex items-center gap-[5px]'>

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

@@ -39,9 +39,6 @@ export function RenameDocumentModal({
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  // Check if name has changed from initial value
-  const hasChanges = name.trim() !== initialName.trim()
-
   useEffect(() => {
     if (open) {
       setName(initialName)
@@ -127,9 +124,9 @@ export function RenameDocumentModal({
                   Cancel
                 </Button>
                 <Button
-                  variant={hasChanges ? 'tertiary' : 'default'}
+                  variant='tertiary'
                   type='submit'
-                  disabled={isSubmitting || !name?.trim() || !hasChanges}
+                  disabled={isSubmitting || !name?.trim() || name.trim() === initialName}
                 >
                   {isSubmitting ? 'Renaming...' : 'Rename'}
                 </Button>

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

@@ -1,8 +1,9 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { Badge, Button, DocumentAttachment, Tooltip } from '@/components/emcn'
+import { Badge, DocumentAttachment, Tooltip } from '@/components/emcn'
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
 import { BaseTagsModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
@@ -21,55 +22,6 @@ interface BaseCardProps {
   onDelete?: (id: string) => Promise<void>
 }
 
-/**
- * Formats a date string to relative time (e.g., "2h ago", "3d ago")
- */
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) {
-    return 'just now'
-  }
-  if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60)
-    return `${minutes}m ago`
-  }
-  if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600)
-    return `${hours}h ago`
-  }
-  if (diffInSeconds < 604800) {
-    const days = Math.floor(diffInSeconds / 86400)
-    return `${days}d ago`
-  }
-  if (diffInSeconds < 2592000) {
-    const weeks = Math.floor(diffInSeconds / 604800)
-    return `${weeks}w ago`
-  }
-  if (diffInSeconds < 31536000) {
-    const months = Math.floor(diffInSeconds / 2592000)
-    return `${months}mo ago`
-  }
-  const years = Math.floor(diffInSeconds / 31536000)
-  return `${years}y ago`
-}
-
-/**
- * Formats a date string to absolute format for tooltip display
- */
-function formatAbsoluteDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
 /**
  * Skeleton placeholder for a knowledge base card
  */
@@ -143,7 +95,6 @@ export function BaseCard({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const [isTagsModalOpen, setIsTagsModalOpen] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
-  const menuButtonRef = useRef<HTMLButtonElement>(null)
 
   const searchParams = new URLSearchParams({
     kbName: title,
@@ -152,23 +103,6 @@ export function BaseCard({
 
   const shortId = id ? `kb-${id.slice(0, 8)}` : ''
 
-  const handleMenuButtonClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (menuButtonRef.current) {
-        const rect = menuButtonRef.current.getBoundingClientRect()
-        const syntheticEvent = {
-          preventDefault: () => {},
-          stopPropagation: () => {},
-          clientX: rect.right,
-          clientY: rect.bottom,
-        } as React.MouseEvent
-        handleContextMenu(syntheticEvent)
-      }
-    },
-    [handleContextMenu]
-  )
-
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       if (isContextMenuOpen) {
@@ -241,24 +175,9 @@ export function BaseCard({
             <h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
               {title}
             </h3>
-            <div className='flex items-center gap-[4px]'>
-              {shortId && (
-                <Badge className='flex-shrink-0 rounded-[4px] text-[12px]'>{shortId}</Badge>
-              )}
-              <Button
-                ref={menuButtonRef}
-                variant='ghost'
-                size='sm'
-                className='h-[20px] w-[20px] flex-shrink-0 p-0 text-[var(--text-tertiary)]'
-                onClick={handleMenuButtonClick}
-              >
-                <svg className='h-[14px] w-[14px]' viewBox='0 0 16 16' fill='currentColor'>
-                  <circle cx='3' cy='8' r='1.5' />
-                  <circle cx='8' cy='8' r='1.5' />
-                  <circle cx='13' cy='8' r='1.5' />
-                </svg>
-              </Button>
-            </div>
+            {shortId && (
+              <Badge className='flex-shrink-0 rounded-[4px] text-[12px]'>{shortId}</Badge>
+            )}
           </div>
 
           <div className='flex flex-1 flex-col gap-[8px]'>

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

@@ -344,53 +344,51 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   <Textarea
                     id='description'
                     placeholder='Describe this knowledge base (optional)'
-                    rows={3}
+                    rows={4}
                     {...register('description')}
                     className={cn(errors.description && 'border-[var(--text-error)]')}
                   />
                 </div>
 
-                <div className='space-y-[12px] rounded-[6px] bg-[var(--surface-5)] px-[12px] py-[14px]'>
-                  <div className='grid grid-cols-2 gap-[12px]'>
-                    <div className='flex flex-col gap-[8px]'>
-                      <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
-                      <Input
-                        id='minChunkSize'
-                        placeholder='100'
-                        {...register('minChunkSize', { valueAsNumber: true })}
-                        className={cn(errors.minChunkSize && 'border-[var(--text-error)]')}
-                        autoComplete='off'
-                        data-form-type='other'
-                        name='min-chunk-size'
-                      />
-                    </div>
-
-                    <div className='flex flex-col gap-[8px]'>
-                      <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
-                      <Input
-                        id='maxChunkSize'
-                        placeholder='1024'
-                        {...register('maxChunkSize', { valueAsNumber: true })}
-                        className={cn(errors.maxChunkSize && 'border-[var(--text-error)]')}
-                        autoComplete='off'
-                        data-form-type='other'
-                        name='max-chunk-size'
-                      />
-                    </div>
+                <div className='grid grid-cols-2 gap-[12px]'>
+                  <div className='flex flex-col gap-[8px]'>
+                    <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
+                    <Input
+                      id='minChunkSize'
+                      placeholder='100'
+                      {...register('minChunkSize', { valueAsNumber: true })}
+                      className={cn(errors.minChunkSize && 'border-[var(--text-error)]')}
+                      autoComplete='off'
+                      data-form-type='other'
+                      name='min-chunk-size'
+                    />
                   </div>
 
                   <div className='flex flex-col gap-[8px]'>
-                    <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
+                    <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
                     <Input
-                      id='overlapSize'
-                      placeholder='200'
-                      {...register('overlapSize', { valueAsNumber: true })}
-                      className={cn(errors.overlapSize && 'border-[var(--text-error)]')}
+                      id='maxChunkSize'
+                      placeholder='1024'
+                      {...register('maxChunkSize', { valueAsNumber: true })}
+                      className={cn(errors.maxChunkSize && 'border-[var(--text-error)]')}
                       autoComplete='off'
                       data-form-type='other'
-                      name='overlap-size'
+                      name='max-chunk-size'
                     />
                   </div>
+                </div>
+
+                <div className='flex flex-col gap-[8px]'>
+                  <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
+                  <Input
+                    id='overlapSize'
+                    placeholder='200'
+                    {...register('overlapSize', { valueAsNumber: true })}
+                    className={cn(errors.overlapSize && 'border-[var(--text-error)]')}
+                    autoComplete='off'
+                    data-form-type='other'
+                    name='overlap-size'
+                  />
                   <p className='text-[11px] text-[var(--text-muted)]'>
                     1 token ≈ 4 characters. Max chunk size and overlap are in tokens.
                   </p>

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

@@ -59,7 +59,7 @@ export function EditKnowledgeBaseModal({
     handleSubmit,
     reset,
     watch,
-    formState: { errors },
+    formState: { errors, isDirty },
   } = useForm<FormValues>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
@@ -70,12 +70,6 @@ export function EditKnowledgeBaseModal({
   })
 
   const nameValue = watch('name')
-  const descriptionValue = watch('description')
-
-  // Check if form values have changed from initial values
-  const hasChanges =
-    nameValue?.trim() !== initialName.trim() ||
-    (descriptionValue?.trim() || '') !== (initialDescription?.trim() || '')
 
   useEffect(() => {
     if (open) {
@@ -133,7 +127,7 @@ export function EditKnowledgeBaseModal({
                 <Textarea
                   id='description'
                   placeholder='Describe this knowledge base (optional)'
-                  rows={3}
+                  rows={4}
                   {...register('description')}
                   className={cn(errors.description && 'border-[var(--text-error)]')}
                 />
@@ -165,9 +159,9 @@ export function EditKnowledgeBaseModal({
                   Cancel
                 </Button>
                 <Button
-                  variant={hasChanges ? 'tertiary' : 'default'}
+                  variant='tertiary'
                   type='submit'
-                  disabled={isSubmitting || !nameValue?.trim() || !hasChanges}
+                  disabled={isSubmitting || !nameValue?.trim() || !isDirty}
                 >
                   {isSubmitting ? 'Saving...' : 'Save'}
                 </Button>

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

@@ -265,11 +265,12 @@ export function Knowledge() {
                   </div>
                 </div>
               ) : error ? (
-                <div className='col-span-full flex h-64 items-center justify-center'>
-                  <div className='text-[var(--text-error)]'>
-                    <span className='text-[13px]'>
-                      Error: {typeof error === 'string' ? error : 'Failed to load knowledge bases'}
-                    </span>
+                <div className='col-span-full flex h-64 items-center justify-center rounded-lg border border-muted-foreground/25 bg-muted/20'>
+                  <div className='text-center'>
+                    <p className='font-medium text-[var(--text-secondary)] text-sm'>
+                      Error loading knowledge bases
+                    </p>
+                    <p className='mt-1 text-[var(--text-muted)] text-xs'>{error}</p>
                   </div>
                 </div>
               ) : (

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

@@ -16,8 +16,8 @@ import {
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { cn } from '@/lib/core/utils/cn'
 import {
-  BlockDetailsSidebar,
   getLeftmostBlockId,
+  PreviewEditor,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useExecutionSnapshot } from '@/hooks/queries/logs'
@@ -248,11 +248,10 @@ export function ExecutionSnapshot({
             cursorStyle='pointer'
             executedBlocks={blockExecutions}
             selectedBlockId={pinnedBlockId}
-            lightweight
           />
         </div>
         {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
-          <BlockDetailsSidebar
+          <PreviewEditor
             block={workflowState.blocks[pinnedBlockId]}
             executionData={blockExecutions[pinnedBlockId]}
             allBlockExecutions={blockExecutions}

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

@@ -2,8 +2,7 @@
 
 import type React from 'react'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { ArrowDown, ArrowUp, X } from 'lucide-react'
+import { ArrowDown, ArrowUp, Check, Clipboard, Search, X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Button,
@@ -15,9 +14,11 @@ import {
   PopoverContent,
   PopoverDivider,
   PopoverItem,
+  Tooltip,
 } from '@/components/emcn'
 import { WorkflowIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
+import { formatDuration } from '@/lib/core/utils/formatting'
 import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getBlock, getBlockByToolName } from '@/blocks'
@@ -26,7 +27,6 @@ import type { TraceSpan } from '@/stores/logs/filters/types'
 
 interface TraceSpansProps {
   traceSpans?: TraceSpan[]
-  totalDuration?: number
 }
 
 /**
@@ -100,6 +100,20 @@ function parseTime(value?: string | number | null): number {
   return Number.isFinite(ms) ? ms : 0
 }
 
+/**
+ * Checks if a span or any of its descendants has an error
+ */
+function hasErrorInTree(span: TraceSpan): boolean {
+  if (span.status === 'error') return true
+  if (span.children && span.children.length > 0) {
+    return span.children.some((child) => hasErrorInTree(child))
+  }
+  if (span.toolCalls && span.toolCalls.length > 0) {
+    return span.toolCalls.some((tc) => tc.error)
+  }
+  return false
+}
+
 /**
  * Normalizes and sorts trace spans recursively.
  * Merges children from both span.children and span.output.childTraceSpans,
@@ -142,14 +156,6 @@ function normalizeAndSortSpans(spans: TraceSpan[]): TraceSpan[] {
 
 const DEFAULT_BLOCK_COLOR = '#6b7280'
 
-/**
- * Formats duration in ms
- */
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(2)}s`
-}
-
 /**
  * Gets icon and color for a span type using block config
  */
@@ -230,7 +236,7 @@ function ProgressBar({
   }, [span, childSpans, workflowStartTime, totalDuration])
 
   return (
-    <div className='relative mb-[8px] h-[5px] w-full overflow-hidden rounded-[18px] bg-[var(--divider)]'>
+    <div className='relative h-[5px] w-full overflow-hidden rounded-[18px] bg-[var(--divider)]'>
       {segments.map((segment, index) => (
         <div
           key={index}
@@ -246,143 +252,6 @@ function ProgressBar({
   )
 }
 
-interface ExpandableRowHeaderProps {
-  name: string
-  duration: number
-  isError: boolean
-  isExpanded: boolean
-  hasChildren: boolean
-  showIcon: boolean
-  icon: React.ComponentType<{ className?: string }> | null
-  bgColor: string
-  onToggle: () => void
-}
-
-/**
- * Reusable expandable row header with chevron, icon, name, and duration
- */
-function ExpandableRowHeader({
-  name,
-  duration,
-  isError,
-  isExpanded,
-  hasChildren,
-  showIcon,
-  icon: Icon,
-  bgColor,
-  onToggle,
-}: ExpandableRowHeaderProps) {
-  return (
-    <div
-      className={clsx('group flex items-center justify-between', hasChildren && 'cursor-pointer')}
-      onClick={hasChildren ? onToggle : undefined}
-      onKeyDown={
-        hasChildren
-          ? (e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                onToggle()
-              }
-            }
-          : undefined
-      }
-      role={hasChildren ? 'button' : undefined}
-      tabIndex={hasChildren ? 0 : undefined}
-      aria-expanded={hasChildren ? isExpanded : undefined}
-      aria-label={hasChildren ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
-    >
-      <div className='flex items-center gap-[8px]'>
-        {hasChildren && (
-          <ChevronDown
-            className='h-[10px] w-[10px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]'
-            style={{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
-          />
-        )}
-        {showIcon && (
-          <div
-            className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-            style={{ background: bgColor }}
-          >
-            {Icon && <Icon className={clsx('text-white', '!h-[9px] !w-[9px]')} />}
-          </div>
-        )}
-        <span
-          className='font-medium text-[12px]'
-          style={{ color: isError ? 'var(--text-error)' : 'var(--text-secondary)' }}
-        >
-          {name}
-        </span>
-      </div>
-      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-        {formatDuration(duration)}
-      </span>
-    </div>
-  )
-}
-
-interface SpanContentProps {
-  span: TraceSpan
-  spanId: string
-  isError: boolean
-  workflowStartTime: number
-  totalDuration: number
-  expandedSections: Set<string>
-  onToggle: (section: string) => void
-}
-
-/**
- * Reusable component for rendering span content (progress bar + input/output sections)
- */
-function SpanContent({
-  span,
-  spanId,
-  isError,
-  workflowStartTime,
-  totalDuration,
-  expandedSections,
-  onToggle,
-}: SpanContentProps) {
-  const hasInput = Boolean(span.input)
-  const hasOutput = Boolean(span.output)
-
-  return (
-    <>
-      <ProgressBar
-        span={span}
-        childSpans={span.children}
-        workflowStartTime={workflowStartTime}
-        totalDuration={totalDuration}
-      />
-
-      {hasInput && (
-        <InputOutputSection
-          label='Input'
-          data={span.input}
-          isError={false}
-          spanId={spanId}
-          sectionType='input'
-          expandedSections={expandedSections}
-          onToggle={onToggle}
-        />
-      )}
-
-      {hasInput && hasOutput && <div className='border-[var(--border)] border-t border-dashed' />}
-
-      {hasOutput && (
-        <InputOutputSection
-          label={isError ? 'Error' : 'Output'}
-          data={span.output}
-          isError={isError}
-          spanId={spanId}
-          sectionType='output'
-          expandedSections={expandedSections}
-          onToggle={onToggle}
-        />
-      )}
-    </>
-  )
-}
-
 /**
  * Renders input/output section with collapsible content, context menu, and search
  */
@@ -406,16 +275,14 @@ function InputOutputSection({
   const sectionKey = `${spanId}-${sectionType}`
   const isExpanded = expandedSections.has(sectionKey)
   const contentRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
 
   // Context menu state
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+  const [copied, setCopied] = useState(false)
 
   // Code viewer features
   const {
-    wrapText,
-    toggleWrapText,
     isSearchActive,
     searchQuery,
     setSearchQuery,
@@ -447,6 +314,8 @@ function InputOutputSection({
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(jsonString)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
     closeContextMenu()
   }, [jsonString, closeContextMenu])
 
@@ -455,13 +324,8 @@ function InputOutputSection({
     closeContextMenu()
   }, [activateSearch, closeContextMenu])
 
-  const handleToggleWrap = useCallback(() => {
-    toggleWrapText()
-    closeContextMenu()
-  }, [toggleWrapText, closeContextMenu])
-
   return (
-    <div className='relative flex min-w-0 flex-col gap-[8px] overflow-hidden'>
+    <div className='relative flex min-w-0 flex-col gap-[6px] overflow-hidden'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => onToggle(sectionKey)}
@@ -477,7 +341,7 @@ function InputOutputSection({
         aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${label.toLowerCase()}`}
       >
         <span
-          className={clsx(
+          className={cn(
             'font-medium text-[12px] transition-colors',
             isError
               ? 'text-[var(--text-error)]'
@@ -487,9 +351,7 @@ function InputOutputSection({
           {label}
         </span>
         <ChevronDown
-          className={clsx(
-            'h-[10px] w-[10px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
-          )}
+          className='h-[8px] w-[8px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
           style={{
             transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
           }}
@@ -497,16 +359,57 @@ function InputOutputSection({
       </div>
       {isExpanded && (
         <>
-          <div ref={contentRef} onContextMenu={handleContextMenu}>
+          <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
-              wrapText={wrapText}
+              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+              wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
               onMatchCountChange={handleMatchCountChange}
             />
+            {/* Glass action buttons overlay */}
+            {!isSearchActive && (
+              <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      type='button'
+                      variant='default'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleCopy()
+                      }}
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    >
+                      {copied ? (
+                        <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
+                      ) : (
+                        <Clipboard className='h-[10px] w-[10px]' />
+                      )}
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
+                </Tooltip.Root>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      type='button'
+                      variant='default'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        activateSearch()
+                      }}
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    >
+                      <Search className='h-[10px] w-[10px]' />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top'>Search</Tooltip.Content>
+                </Tooltip.Root>
+              </div>
+            )}
           </div>
 
           {/* Search Overlay */}
@@ -579,13 +482,10 @@ function InputOutputSection({
                     height: '1px',
                   }}
                 />
-                <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+                <PopoverContent align='start' side='bottom' sideOffset={4}>
                   <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
                   <PopoverDivider />
                   <PopoverItem onClick={handleSearch}>Search</PopoverItem>
-                  <PopoverItem showCheck={wrapText} onClick={handleToggleWrap}>
-                    Wrap Text
-                  </PopoverItem>
                 </PopoverContent>
               </Popover>,
               document.body
@@ -596,355 +496,229 @@ function InputOutputSection({
   )
 }
 
-interface NestedBlockItemProps {
+interface TraceSpanNodeProps {
   span: TraceSpan
-  parentId: string
-  index: number
+  workflowStartTime: number
+  totalDuration: number
+  depth: number
+  expandedNodes: Set<string>
   expandedSections: Set<string>
-  onToggle: (section: string) => void
-  workflowStartTime: number
-  totalDuration: number
-  expandedChildren: Set<string>
-  onToggleChildren: (spanId: string) => void
+  onToggleNode: (nodeId: string) => void
+  onToggleSection: (section: string) => void
 }
 
 /**
- * Recursive component for rendering nested blocks at any depth
+ * Recursive tree node component for rendering trace spans
  */
-function NestedBlockItem({
+const TraceSpanNode = memo(function TraceSpanNode({
   span,
-  parentId,
-  index,
+  workflowStartTime,
+  totalDuration,
+  depth,
+  expandedNodes,
   expandedSections,
-  onToggle,
-  workflowStartTime,
-  totalDuration,
-  expandedChildren,
-  onToggleChildren,
-}: NestedBlockItemProps): React.ReactNode {
-  const spanId = span.id || `${parentId}-nested-${index}`
-  const isError = span.status === 'error'
-  const { icon: SpanIcon, bgColor } = getBlockIconAndColor(span.type, span.name)
-  const hasChildren = Boolean(span.children && span.children.length > 0)
-  const isChildrenExpanded = expandedChildren.has(spanId)
-
-  return (
-    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
-      <ExpandableRowHeader
-        name={span.name}
-        duration={span.duration || 0}
-        isError={isError}
-        isExpanded={isChildrenExpanded}
-        hasChildren={hasChildren}
-        showIcon={!isIterationType(span.type)}
-        icon={SpanIcon}
-        bgColor={bgColor}
-        onToggle={() => onToggleChildren(spanId)}
-      />
-
-      <SpanContent
-        span={span}
-        spanId={spanId}
-        isError={isError}
-        workflowStartTime={workflowStartTime}
-        totalDuration={totalDuration}
-        expandedSections={expandedSections}
-        onToggle={onToggle}
-      />
-
-      {/* Nested children */}
-      {hasChildren && isChildrenExpanded && (
-        <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-          {span.children!.map((child, childIndex) => (
-            <NestedBlockItem
-              key={child.id || `${spanId}-child-${childIndex}`}
-              span={child}
-              parentId={spanId}
-              index={childIndex}
-              expandedSections={expandedSections}
-              onToggle={onToggle}
-              workflowStartTime={workflowStartTime}
-              totalDuration={totalDuration}
-              expandedChildren={expandedChildren}
-              onToggleChildren={onToggleChildren}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface TraceSpanItemProps {
-  span: TraceSpan
-  totalDuration: number
-  workflowStartTime: number
-  isFirstSpan?: boolean
-}
-
-/**
- * Individual trace span card component.
- * Memoized to prevent re-renders when sibling spans change.
- */
-const TraceSpanItem = memo(function TraceSpanItem({
-  span,
-  totalDuration,
-  workflowStartTime,
-  isFirstSpan = false,
-}: TraceSpanItemProps): React.ReactNode {
-  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
-  const [expandedChildren, setExpandedChildren] = useState<Set<string>>(new Set())
-  const [isCardExpanded, setIsCardExpanded] = useState(false)
-  const toggleSet = useSetToggle()
-
+  onToggleNode,
+  onToggleSection,
+}: TraceSpanNodeProps): React.ReactNode {
   const spanId = span.id || `span-${span.name}-${span.startTime}`
   const spanStartTime = new Date(span.startTime).getTime()
   const spanEndTime = new Date(span.endTime).getTime()
   const duration = span.duration || spanEndTime - spanStartTime
 
-  const hasChildren = Boolean(span.children && span.children.length > 0)
-  const hasToolCalls = Boolean(span.toolCalls && span.toolCalls.length > 0)
-  const isError = span.status === 'error'
-
-  const inlineChildTypes = new Set([
-    'tool',
-    'model',
-    'loop-iteration',
-    'parallel-iteration',
-    'workflow',
-  ])
-
-  // For workflow-in-workflow blocks, all children should be rendered inline/nested
-  const isWorkflowBlock = span.type?.toLowerCase().includes('workflow')
-  const inlineChildren = isWorkflowBlock
-    ? span.children || []
-    : span.children?.filter((child) => inlineChildTypes.has(child.type?.toLowerCase() || '')) || []
-  const otherChildren = isWorkflowBlock
-    ? []
-    : span.children?.filter((child) => !inlineChildTypes.has(child.type?.toLowerCase() || '')) || []
-
-  const toolCallSpans = useMemo(() => {
-    if (!hasToolCalls) return []
-    return span.toolCalls!.map((toolCall, index) => {
-      const toolStartTime = toolCall.startTime
-        ? new Date(toolCall.startTime).getTime()
-        : spanStartTime
-      const toolEndTime = toolCall.endTime
-        ? new Date(toolCall.endTime).getTime()
-        : toolStartTime + (toolCall.duration || 0)
-
-      return {
-        id: `${spanId}-tool-${index}`,
-        name: toolCall.name,
-        type: 'tool',
-        duration: toolCall.duration || toolEndTime - toolStartTime,
-        startTime: new Date(toolStartTime).toISOString(),
-        endTime: new Date(toolEndTime).toISOString(),
-        status: toolCall.error ? ('error' as const) : ('success' as const),
-        input: toolCall.input,
-        output: toolCall.error
-          ? { error: toolCall.error, ...(toolCall.output || {}) }
-          : toolCall.output,
-      } as TraceSpan
-    })
-  }, [hasToolCalls, span.toolCalls, spanId, spanStartTime])
-
-  const handleSectionToggle = useCallback(
-    (section: string) => toggleSet(setExpandedSections, section),
-    [toggleSet]
-  )
-
-  const handleChildrenToggle = useCallback(
-    (childSpanId: string) => toggleSet(setExpandedChildren, childSpanId),
-    [toggleSet]
-  )
+  const isDirectError = span.status === 'error'
+  const hasNestedError = hasErrorInTree(span)
+  const showErrorStyle = isDirectError || hasNestedError
 
   const { icon: BlockIcon, bgColor } = getBlockIconAndColor(span.type, span.name)
 
-  // Check if this card has expandable inline content
-  const hasInlineContent =
-    (isWorkflowBlock && inlineChildren.length > 0) ||
-    (!isWorkflowBlock && (toolCallSpans.length > 0 || inlineChildren.length > 0))
+  // Root workflow execution is always expanded and has no toggle
+  const isRootWorkflow = depth === 0
 
-  const isExpandable = !isFirstSpan && hasInlineContent
+  // Build all children including tool calls
+  const allChildren = useMemo(() => {
+    const children: TraceSpan[] = []
+
+    // Add tool calls as child spans
+    if (span.toolCalls && span.toolCalls.length > 0) {
+      span.toolCalls.forEach((toolCall, index) => {
+        const toolStartTime = toolCall.startTime
+          ? new Date(toolCall.startTime).getTime()
+          : spanStartTime
+        const toolEndTime = toolCall.endTime
+          ? new Date(toolCall.endTime).getTime()
+          : toolStartTime + (toolCall.duration || 0)
+
+        children.push({
+          id: `${spanId}-tool-${index}`,
+          name: toolCall.name,
+          type: 'tool',
+          duration: toolCall.duration || toolEndTime - toolStartTime,
+          startTime: new Date(toolStartTime).toISOString(),
+          endTime: new Date(toolEndTime).toISOString(),
+          status: toolCall.error ? ('error' as const) : ('success' as const),
+          input: toolCall.input,
+          output: toolCall.error
+            ? { error: toolCall.error, ...(toolCall.output || {}) }
+            : toolCall.output,
+        } as TraceSpan)
+      })
+    }
+
+    // Add regular children
+    if (span.children && span.children.length > 0) {
+      children.push(...span.children)
+    }
+
+    // Sort by start time
+    return children.sort((a, b) => parseTime(a.startTime) - parseTime(b.startTime))
+  }, [span, spanId, spanStartTime])
+
+  const hasChildren = allChildren.length > 0
+  const isExpanded = isRootWorkflow || expandedNodes.has(spanId)
+  const isToggleable = !isRootWorkflow
+
+  const hasInput = Boolean(span.input)
+  const hasOutput = Boolean(span.output)
+
+  // For progress bar - show child segments for workflow/iteration types
+  const lowerType = span.type?.toLowerCase() || ''
+  const showChildrenInProgressBar =
+    isIterationType(lowerType) || lowerType === 'workflow' || lowerType === 'workflow_input'
 
   return (
-    <>
-      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px]'>
-        <ExpandableRowHeader
-          name={span.name}
-          duration={duration}
-          isError={isError}
-          isExpanded={isCardExpanded}
-          hasChildren={isExpandable}
-          showIcon={!isFirstSpan}
-          icon={BlockIcon}
-          bgColor={bgColor}
-          onToggle={() => setIsCardExpanded((prev) => !prev)}
-        />
-
-        <SpanContent
-          span={span}
-          spanId={spanId}
-          isError={isError}
-          workflowStartTime={workflowStartTime}
-          totalDuration={totalDuration}
-          expandedSections={expandedSections}
-          onToggle={handleSectionToggle}
-        />
-
-        {/* For workflow blocks, keep children nested within the card (not as separate cards) */}
-        {!isFirstSpan && isWorkflowBlock && inlineChildren.length > 0 && isCardExpanded && (
-          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-            {inlineChildren.map((childSpan, index) => (
-              <NestedBlockItem
-                key={childSpan.id || `${spanId}-nested-${index}`}
-                span={childSpan}
-                parentId={spanId}
-                index={index}
-                expandedSections={expandedSections}
-                onToggle={handleSectionToggle}
-                workflowStartTime={workflowStartTime}
-                totalDuration={totalDuration}
-                expandedChildren={expandedChildren}
-                onToggleChildren={handleChildrenToggle}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* For non-workflow blocks, render inline children/tool calls */}
-        {!isFirstSpan && !isWorkflowBlock && isCardExpanded && (
-          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-            {[...toolCallSpans, ...inlineChildren].map((childSpan, index) => {
-              const childId = childSpan.id || `${spanId}-inline-${index}`
-              const childIsError = childSpan.status === 'error'
-              const childLowerType = childSpan.type?.toLowerCase() || ''
-              const hasNestedChildren = Boolean(childSpan.children && childSpan.children.length > 0)
-              const isNestedExpanded = expandedChildren.has(childId)
-              const showChildrenInProgressBar =
-                isIterationType(childLowerType) || childLowerType === 'workflow'
-              const { icon: ChildIcon, bgColor: childBgColor } = getBlockIconAndColor(
-                childSpan.type,
-                childSpan.name
-              )
-
-              return (
-                <div
-                  key={`inline-${childId}`}
-                  className='flex min-w-0 flex-col gap-[8px] overflow-hidden'
-                >
-                  <ExpandableRowHeader
-                    name={childSpan.name}
-                    duration={childSpan.duration || 0}
-                    isError={childIsError}
-                    isExpanded={isNestedExpanded}
-                    hasChildren={hasNestedChildren}
-                    showIcon={!isIterationType(childSpan.type)}
-                    icon={ChildIcon}
-                    bgColor={childBgColor}
-                    onToggle={() => handleChildrenToggle(childId)}
-                  />
-
-                  <ProgressBar
-                    span={childSpan}
-                    childSpans={showChildrenInProgressBar ? childSpan.children : undefined}
-                    workflowStartTime={workflowStartTime}
-                    totalDuration={totalDuration}
-                  />
-
-                  {childSpan.input && (
-                    <InputOutputSection
-                      label='Input'
-                      data={childSpan.input}
-                      isError={false}
-                      spanId={childId}
-                      sectionType='input'
-                      expandedSections={expandedSections}
-                      onToggle={handleSectionToggle}
-                    />
-                  )}
-
-                  {childSpan.input && childSpan.output && (
-                    <div className='border-[var(--border)] border-t border-dashed' />
-                  )}
-
-                  {childSpan.output && (
-                    <InputOutputSection
-                      label={childIsError ? 'Error' : 'Output'}
-                      data={childSpan.output}
-                      isError={childIsError}
-                      spanId={childId}
-                      sectionType='output'
-                      expandedSections={expandedSections}
-                      onToggle={handleSectionToggle}
-                    />
-                  )}
-
-                  {/* Nested children */}
-                  {showChildrenInProgressBar && hasNestedChildren && isNestedExpanded && (
-                    <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-                      {childSpan.children!.map((nestedChild, nestedIndex) => (
-                        <NestedBlockItem
-                          key={nestedChild.id || `${childId}-nested-${nestedIndex}`}
-                          span={nestedChild}
-                          parentId={childId}
-                          index={nestedIndex}
-                          expandedSections={expandedSections}
-                          onToggle={handleSectionToggle}
-                          workflowStartTime={workflowStartTime}
-                          totalDuration={totalDuration}
-                          expandedChildren={expandedChildren}
-                          onToggleChildren={handleChildrenToggle}
-                        />
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
+    <div className='flex min-w-0 flex-col'>
+      {/* Node Header Row */}
+      <div
+        className={cn(
+          'group flex items-center justify-between gap-[8px] py-[6px]',
+          isToggleable && 'cursor-pointer'
         )}
+        onClick={isToggleable ? () => onToggleNode(spanId) : undefined}
+        onKeyDown={
+          isToggleable
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  onToggleNode(spanId)
+                }
+              }
+            : undefined
+        }
+        role={isToggleable ? 'button' : undefined}
+        tabIndex={isToggleable ? 0 : undefined}
+        aria-expanded={isToggleable ? isExpanded : undefined}
+        aria-label={isToggleable ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
+      >
+        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+          {!isIterationType(span.type) && (
+            <div
+              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+              style={{ background: bgColor }}
+            >
+              {BlockIcon && <BlockIcon className='h-[9px] w-[9px] text-white' />}
+            </div>
+          )}
+          <span
+            className='min-w-0 max-w-[180px] truncate font-medium text-[12px]'
+            style={{ color: showErrorStyle ? 'var(--text-error)' : 'var(--text-secondary)' }}
+          >
+            {span.name}
+          </span>
+          {isToggleable && (
+            <ChevronDown
+              className='h-[8px] w-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-colors transition-transform duration-100 group-hover:text-[var(--text-primary)]'
+              style={{
+                transform: `translateY(-0.25px) ${isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'}`,
+              }}
+            />
+          )}
+        </div>
+        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+          {formatDuration(duration, { precision: 2 })}
+        </span>
       </div>
 
-      {/* For the first span (workflow execution), render all children as separate top-level cards */}
-      {isFirstSpan &&
-        hasChildren &&
-        span.children!.map((childSpan, index) => (
-          <TraceSpanItem
-            key={childSpan.id || `${spanId}-child-${index}`}
-            span={childSpan}
-            totalDuration={totalDuration}
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className='flex min-w-0 flex-col gap-[10px]'>
+          {/* Progress Bar */}
+          <ProgressBar
+            span={span}
+            childSpans={showChildrenInProgressBar ? span.children : undefined}
             workflowStartTime={workflowStartTime}
-            isFirstSpan={false}
+            totalDuration={totalDuration}
           />
-        ))}
 
-      {!isFirstSpan &&
-        otherChildren.map((childSpan, index) => (
-          <TraceSpanItem
-            key={childSpan.id || `${spanId}-other-${index}`}
-            span={childSpan}
-            totalDuration={totalDuration}
-            workflowStartTime={workflowStartTime}
-            isFirstSpan={false}
-          />
-        ))}
-    </>
+          {/* Input/Output Sections */}
+          {(hasInput || hasOutput) && (
+            <div className='flex min-w-0 flex-col gap-[6px] overflow-hidden py-[2px]'>
+              {hasInput && (
+                <InputOutputSection
+                  label='Input'
+                  data={span.input}
+                  isError={false}
+                  spanId={spanId}
+                  sectionType='input'
+                  expandedSections={expandedSections}
+                  onToggle={onToggleSection}
+                />
+              )}
+
+              {hasInput && hasOutput && (
+                <div className='border-[var(--border)] border-t border-dashed' />
+              )}
+
+              {hasOutput && (
+                <InputOutputSection
+                  label={isDirectError ? 'Error' : 'Output'}
+                  data={span.output}
+                  isError={isDirectError}
+                  spanId={spanId}
+                  sectionType='output'
+                  expandedSections={expandedSections}
+                  onToggle={onToggleSection}
+                />
+              )}
+            </div>
+          )}
+
+          {/* Nested Children */}
+          {hasChildren && (
+            <div className='flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[10px]'>
+              {allChildren.map((child, index) => (
+                <div key={child.id || `${spanId}-child-${index}`} className='pl-[6px]'>
+                  <TraceSpanNode
+                    span={child}
+                    workflowStartTime={workflowStartTime}
+                    totalDuration={totalDuration}
+                    depth={depth + 1}
+                    expandedNodes={expandedNodes}
+                    expandedSections={expandedSections}
+                    onToggleNode={onToggleNode}
+                    onToggleSection={onToggleSection}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   )
 })
 
 /**
- * Displays workflow execution trace spans with nested structure.
+ * Displays workflow execution trace spans with nested tree structure.
  * Memoized to prevent re-renders when parent LogDetails updates.
  */
-export const TraceSpans = memo(function TraceSpans({
-  traceSpans,
-  totalDuration = 0,
-}: TraceSpansProps) {
+export const TraceSpans = memo(function TraceSpans({ traceSpans }: TraceSpansProps) {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(() => new Set())
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
+  const toggleSet = useSetToggle()
+
   const { workflowStartTime, actualTotalDuration, normalizedSpans } = useMemo(() => {
     if (!traceSpans || traceSpans.length === 0) {
-      return { workflowStartTime: 0, actualTotalDuration: totalDuration, normalizedSpans: [] }
+      return { workflowStartTime: 0, actualTotalDuration: 0, normalizedSpans: [] }
     }
 
     let earliest = Number.POSITIVE_INFINITY
@@ -962,26 +736,37 @@ export const TraceSpans = memo(function TraceSpans({
       actualTotalDuration: latest - earliest,
       normalizedSpans: normalizeAndSortSpans(traceSpans),
     }
-  }, [traceSpans, totalDuration])
+  }, [traceSpans])
+
+  const handleToggleNode = useCallback(
+    (nodeId: string) => toggleSet(setExpandedNodes, nodeId),
+    [toggleSet]
+  )
+
+  const handleToggleSection = useCallback(
+    (section: string) => toggleSet(setExpandedSections, section),
+    [toggleSet]
+  )
 
   if (!traceSpans || traceSpans.length === 0) {
     return <div className='text-[12px] text-[var(--text-secondary)]'>No trace data available</div>
   }
 
   return (
-    <div className='flex w-full min-w-0 flex-col gap-[6px] overflow-hidden rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
-      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>Trace Span</span>
-      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
-        {normalizedSpans.map((span, index) => (
-          <TraceSpanItem
-            key={span.id || index}
-            span={span}
-            totalDuration={actualTotalDuration}
-            workflowStartTime={workflowStartTime}
-            isFirstSpan={index === 0}
-          />
-        ))}
-      </div>
+    <div className='flex w-full min-w-0 flex-col overflow-hidden'>
+      {normalizedSpans.map((span, index) => (
+        <TraceSpanNode
+          key={span.id || index}
+          span={span}
+          workflowStartTime={workflowStartTime}
+          totalDuration={actualTotalDuration}
+          depth={0}
+          expandedNodes={expandedNodes}
+          expandedSections={expandedSections}
+          onToggleNode={handleToggleNode}
+          onToggleSection={handleToggleSection}
+        />
+      ))}
     </div>
   )
 })

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

@@ -1,10 +1,23 @@
 'use client'
 
-import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import { ChevronUp, X } from 'lucide-react'
-import { Button, Eye } from '@/components/emcn'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Search, X } from 'lucide-react'
+import { createPortal } from 'react-dom'
+import {
+  Button,
+  Code,
+  Eye,
+  Input,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+  Tooltip,
+} from '@/components/emcn'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
+import { cn } from '@/lib/core/utils/cn'
 import {
   ExecutionSnapshot,
   FileCards,
@@ -17,11 +30,194 @@ import {
   StatusBadge,
   TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
+import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { formatCost } from '@/providers/utils'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
 
+/**
+ * Workflow Output section with code viewer, copy, search, and context menu functionality
+ */
+function WorkflowOutputSection({ output }: { output: Record<string, unknown> }) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  // Context menu state
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+
+  const {
+    isSearchActive,
+    searchQuery,
+    setSearchQuery,
+    matchCount,
+    currentMatchIndex,
+    activateSearch,
+    closeSearch,
+    goToNextMatch,
+    goToPreviousMatch,
+    handleMatchCountChange,
+    searchInputRef,
+  } = useCodeViewerFeatures({ contentRef })
+
+  const jsonString = useMemo(() => JSON.stringify(output, null, 2), [output])
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setContextMenuPosition({ x: e.clientX, y: e.clientY })
+    setIsContextMenuOpen(true)
+  }, [])
+
+  const closeContextMenu = useCallback(() => {
+    setIsContextMenuOpen(false)
+  }, [])
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(jsonString)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+    closeContextMenu()
+  }, [jsonString, closeContextMenu])
+
+  const handleSearch = useCallback(() => {
+    activateSearch()
+    closeContextMenu()
+  }, [activateSearch, closeContextMenu])
+
+  return (
+    <div className='relative flex min-w-0 flex-col overflow-hidden'>
+      <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
+        <Code.Viewer
+          code={jsonString}
+          language='json'
+          className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+          wrapText
+          searchQuery={isSearchActive ? searchQuery : undefined}
+          currentMatchIndex={currentMatchIndex}
+          onMatchCountChange={handleMatchCountChange}
+        />
+        {/* Glass action buttons overlay */}
+        {!isSearchActive && (
+          <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='default'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleCopy()
+                  }}
+                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                >
+                  {copied ? (
+                    <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
+                  ) : (
+                    <Clipboard className='h-[10px] w-[10px]' />
+                  )}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
+            </Tooltip.Root>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='default'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    activateSearch()
+                  }}
+                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                >
+                  <Search className='h-[10px] w-[10px]' />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Search</Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+        )}
+      </div>
+
+      {/* Search Overlay */}
+      {isSearchActive && (
+        <div
+          className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Input
+            ref={searchInputRef}
+            type='text'
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder='Search...'
+            className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+          />
+          <span
+            className={cn(
+              'min-w-[45px] text-center text-[11px]',
+              matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
+            )}
+          >
+            {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
+          </span>
+          <Button
+            variant='ghost'
+            className='!p-1'
+            onClick={goToPreviousMatch}
+            disabled={matchCount === 0}
+            aria-label='Previous match'
+          >
+            <ArrowUp className='h-[12px] w-[12px]' />
+          </Button>
+          <Button
+            variant='ghost'
+            className='!p-1'
+            onClick={goToNextMatch}
+            disabled={matchCount === 0}
+            aria-label='Next match'
+          >
+            <ArrowDown className='h-[12px] w-[12px]' />
+          </Button>
+          <Button variant='ghost' className='!p-1' onClick={closeSearch} aria-label='Close search'>
+            <X className='h-[12px] w-[12px]' />
+          </Button>
+        </div>
+      )}
+
+      {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <Popover
+            open={isContextMenuOpen}
+            onOpenChange={closeContextMenu}
+            variant='secondary'
+            size='sm'
+            colorScheme='inverted'
+          >
+            <PopoverAnchor
+              style={{
+                position: 'fixed',
+                left: `${contextMenuPosition.x}px`,
+                top: `${contextMenuPosition.y}px`,
+                width: '1px',
+                height: '1px',
+              }}
+            />
+            <PopoverContent align='start' side='bottom' sideOffset={4}>
+              <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
+              <PopoverDivider />
+              <PopoverItem onClick={handleSearch}>Search</PopoverItem>
+            </PopoverContent>
+          </Popover>,
+          document.body
+        )}
+    </div>
+  )
+}
+
 interface LogDetailsProps {
   /** The log to display details for */
   log: WorkflowLog | null
@@ -78,6 +274,18 @@ export const LogDetails = memo(function LogDetails({
     return isWorkflowExecutionLog && log?.cost
   }, [log, isWorkflowExecutionLog])
 
+  // Extract and clean the workflow final output (remove childTraceSpans for cleaner display)
+  const workflowOutput = useMemo(() => {
+    const executionData = log?.executionData as
+      | { finalOutput?: Record<string, unknown> }
+      | undefined
+    if (!executionData?.finalOutput) return null
+    const { childTraceSpans, ...cleanOutput } = executionData.finalOutput as {
+      childTraceSpans?: unknown
+    } & Record<string, unknown>
+    return cleanOutput
+  }, [log?.executionData])
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && isOpen) {
@@ -87,12 +295,12 @@ export const LogDetails = memo(function LogDetails({
       if (isOpen) {
         if (e.key === 'ArrowUp' && hasPrev && onNavigatePrev) {
           e.preventDefault()
-          handleNavigate(onNavigatePrev)
+          onNavigatePrev()
         }
 
         if (e.key === 'ArrowDown' && hasNext && onNavigateNext) {
           e.preventDefault()
-          handleNavigate(onNavigateNext)
+          onNavigateNext()
         }
       }
     }
@@ -101,10 +309,6 @@ export const LogDetails = memo(function LogDetails({
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [isOpen, onClose, hasPrev, hasNext, onNavigatePrev, onNavigateNext])
 
-  const handleNavigate = (navigateFunction: () => void) => {
-    navigateFunction()
-  }
-
   const formattedTimestamp = useMemo(
     () => (log ? formatDate(log.createdAt) : null),
     [log?.createdAt]
@@ -142,7 +346,7 @@ export const LogDetails = memo(function LogDetails({
                 <Button
                   variant='ghost'
                   className='!p-[4px]'
-                  onClick={() => hasPrev && handleNavigate(onNavigatePrev!)}
+                  onClick={() => hasPrev && onNavigatePrev?.()}
                   disabled={!hasPrev}
                   aria-label='Previous log'
                 >
@@ -151,7 +355,7 @@ export const LogDetails = memo(function LogDetails({
                 <Button
                   variant='ghost'
                   className='!p-[4px]'
-                  onClick={() => hasNext && handleNavigate(onNavigateNext!)}
+                  onClick={() => hasNext && onNavigateNext?.()}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
@@ -204,7 +408,7 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Execution ID */}
                 {log.executionId && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+                  <div className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Execution ID
                     </span>
@@ -215,7 +419,7 @@ export const LogDetails = memo(function LogDetails({
                 )}
 
                 {/* Details Section */}
-                <div className='flex min-w-0 flex-col overflow-hidden'>
+                <div className='-my-[4px] flex min-w-0 flex-col overflow-hidden'>
                   {/* Level */}
                   <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
@@ -267,19 +471,35 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Workflow State */}
                 {isWorkflowExecutionLog && log.executionId && !permissionConfig.hideTraceSpans && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+                  <div className='-mt-[8px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Workflow State
                     </span>
-                    <button
+                    <Button
+                      variant='active'
                       onClick={() => setIsExecutionSnapshotOpen(true)}
-                      className='flex items-center justify-between rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px] transition-colors hover:bg-[var(--surface-4)]'
+                      className='flex w-full items-center justify-between px-[10px] py-[6px]'
                     >
-                      <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
-                        View Snapshot
-                      </span>
-                      <Eye className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
-                    </button>
+                      <span className='font-medium text-[12px]'>View Snapshot</span>
+                      <Eye className='h-[14px] w-[14px]' />
+                    </Button>
+                  </div>
+                )}
+
+                {/* Workflow Output */}
+                {isWorkflowExecutionLog && workflowOutput && !permissionConfig.hideTraceSpans && (
+                  <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
+                    <span
+                      className={cn(
+                        'font-medium text-[12px]',
+                        workflowOutput.error
+                          ? 'text-[var(--text-error)]'
+                          : 'text-[var(--text-tertiary)]'
+                      )}
+                    >
+                      Workflow Output
+                    </span>
+                    <WorkflowOutputSection output={workflowOutput} />
                   </div>
                 )}
 
@@ -287,10 +507,12 @@ export const LogDetails = memo(function LogDetails({
                 {isWorkflowExecutionLog &&
                   log.executionData?.traceSpans &&
                   !permissionConfig.hideTraceSpans && (
-                    <TraceSpans
-                      traceSpans={log.executionData.traceSpans}
-                      totalDuration={log.executionData.totalDuration}
-                    />
+                    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
+                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                        Trace Span
+                      </span>
+                      <TraceSpans traceSpans={log.executionData.traceSpans} />
+                    </div>
                   )}
 
                 {/* Files */}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/body-states.tsx

@@ -1,72 +0,0 @@
-import { Plus } from 'lucide-react'
-import { Button, TableCell, TableRow } from '@/components/emcn'
-import { Skeleton } from '@/components/ui/skeleton'
-import type { ColumnDefinition } from '@/lib/table'
-
-interface LoadingRowsProps {
-  columns: ColumnDefinition[]
-}
-
-export function LoadingRows({ columns }: LoadingRowsProps) {
-  return (
-    <>
-      {Array.from({ length: 25 }).map((_, rowIndex) => (
-        <TableRow key={rowIndex}>
-          <TableCell>
-            <Skeleton className='h-[14px] w-[14px]' />
-          </TableCell>
-          {columns.map((col, colIndex) => {
-            const baseWidth =
-              col.type === 'json'
-                ? 200
-                : col.type === 'string'
-                  ? 160
-                  : col.type === 'number'
-                    ? 80
-                    : col.type === 'boolean'
-                      ? 50
-                      : col.type === 'date'
-                        ? 100
-                        : 120
-            const variation = ((rowIndex + colIndex) % 3) * 20
-            const width = baseWidth + variation
-
-            return (
-              <TableCell key={col.name}>
-                <Skeleton className='h-[16px]' style={{ width: `${width}px` }} />
-              </TableCell>
-            )
-          })}
-        </TableRow>
-      ))}
-    </>
-  )
-}
-
-interface EmptyRowsProps {
-  columnCount: number
-  hasFilter: boolean
-  onAddRow: () => void
-}
-
-export function EmptyRows({ columnCount, hasFilter, onAddRow }: EmptyRowsProps) {
-  return (
-    <TableRow>
-      <TableCell colSpan={columnCount + 1} className='h-[160px]'>
-        <div className='flex h-full w-full items-center justify-center'>
-          <div className='flex flex-col items-center gap-[12px]'>
-            <span className='text-[13px] text-[var(--text-tertiary)]'>
-              {hasFilter ? 'No rows match your filter' : 'No data'}
-            </span>
-            {!hasFilter && (
-              <Button variant='default' size='sm' onClick={onAddRow}>
-                <Plus className='mr-[4px] h-[12px] w-[12px]' />
-                Add first row
-              </Button>
-            )}
-          </div>
-        </div>
-      </TableCell>
-    </TableRow>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/cell-renderer.tsx

@@ -1,99 +0,0 @@
-import type { ColumnDefinition } from '@/lib/table'
-import { STRING_TRUNCATE_LENGTH } from '../lib/constants'
-import type { CellViewerData } from '../lib/types'
-
-interface CellRendererProps {
-  value: unknown
-  column: ColumnDefinition
-  onCellClick: (columnName: string, value: unknown, type: CellViewerData['type']) => void
-}
-
-export function CellRenderer({ value, column, onCellClick }: CellRendererProps) {
-  const isNull = value === null || value === undefined
-
-  if (isNull) {
-    return <span className='text-[var(--text-muted)] italic'>—</span>
-  }
-
-  if (column.type === 'json') {
-    const jsonStr = JSON.stringify(value)
-    return (
-      <button
-        type='button'
-        className='block max-w-[300px] cursor-pointer select-none truncate rounded-[4px] border border-[var(--border-1)] px-[6px] py-[2px] text-left font-mono text-[11px] text-[var(--text-secondary)] transition-colors hover:border-[var(--text-muted)] hover:text-[var(--text-primary)]'
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          onCellClick(column.name, value, 'json')
-        }}
-        title='Click to view full JSON'
-      >
-        {jsonStr}
-      </button>
-    )
-  }
-
-  if (column.type === 'boolean') {
-    const boolValue = Boolean(value)
-    return (
-      <span className={boolValue ? 'text-green-500' : 'text-[var(--text-tertiary)]'}>
-        {boolValue ? 'true' : 'false'}
-      </span>
-    )
-  }
-
-  if (column.type === 'number') {
-    return (
-      <span className='font-mono text-[12px] text-[var(--text-secondary)]'>{String(value)}</span>
-    )
-  }
-
-  if (column.type === 'date') {
-    try {
-      const date = new Date(String(value))
-      const formatted = date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-      return (
-        <button
-          type='button'
-          className='cursor-pointer select-none text-left text-[12px] text-[var(--text-secondary)] underline decoration-[var(--border-1)] decoration-dotted underline-offset-2 transition-colors hover:text-[var(--text-primary)] hover:decoration-[var(--text-muted)]'
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            onCellClick(column.name, value, 'date')
-          }}
-          title='Click to view ISO format'
-        >
-          {formatted}
-        </button>
-      )
-    } catch {
-      return <span className='text-[var(--text-primary)]'>{String(value)}</span>
-    }
-  }
-
-  const strValue = String(value)
-  if (strValue.length > STRING_TRUNCATE_LENGTH) {
-    return (
-      <button
-        type='button'
-        className='block max-w-[300px] cursor-pointer select-none truncate text-left text-[var(--text-primary)] underline decoration-[var(--border-1)] decoration-dotted underline-offset-2 transition-colors hover:decoration-[var(--text-muted)]'
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          onCellClick(column.name, value, 'text')
-        }}
-        title='Click to view full text'
-      >
-        {strValue}
-      </button>
-    )
-  }
-
-  return <span className='text-[var(--text-primary)]'>{strValue}</span>
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/cell-viewer-modal.tsx

@@ -1,84 +0,0 @@
-import { Copy, X } from 'lucide-react'
-import { Badge, Button, Modal, ModalBody, ModalContent } from '@/components/emcn'
-import type { CellViewerData } from '../lib/types'
-
-interface CellViewerModalProps {
-  cellViewer: CellViewerData | null
-  onClose: () => void
-  onCopy: () => void
-  copied: boolean
-}
-
-export function CellViewerModal({ cellViewer, onClose, onCopy, copied }: CellViewerModalProps) {
-  if (!cellViewer) return null
-
-  return (
-    <Modal open={!!cellViewer} onOpenChange={(open) => !open && onClose()}>
-      <ModalContent className='w-[640px] duration-100'>
-        <div className='flex items-center justify-between gap-[8px] px-[16px] py-[10px]'>
-          <div className='flex min-w-0 items-center gap-[8px]'>
-            <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
-              {cellViewer.columnName}
-            </span>
-            <Badge
-              variant={
-                cellViewer.type === 'json' ? 'blue' : cellViewer.type === 'date' ? 'purple' : 'gray'
-              }
-              size='sm'
-            >
-              {cellViewer.type === 'json' ? 'JSON' : cellViewer.type === 'date' ? 'Date' : 'Text'}
-            </Badge>
-          </div>
-          <div className='flex shrink-0 items-center gap-[8px]'>
-            <Button variant={copied ? 'tertiary' : 'default'} size='sm' onClick={onCopy}>
-              <Copy className='mr-[4px] h-[12px] w-[12px]' />
-              {copied ? 'Copied!' : 'Copy'}
-            </Button>
-            <Button variant='ghost' size='sm' onClick={onClose}>
-              <X className='h-[14px] w-[14px]' />
-            </Button>
-          </div>
-        </div>
-        <ModalBody className='p-0'>
-          {cellViewer.type === 'json' ? (
-            <pre className='m-[16px] max-h-[450px] overflow-auto rounded-[6px] border border-[var(--border)] bg-[var(--surface-4)] p-[16px] font-mono text-[12px] text-[var(--text-primary)] leading-[1.6]'>
-              {JSON.stringify(cellViewer.value, null, 2)}
-            </pre>
-          ) : cellViewer.type === 'date' ? (
-            <div className='m-[16px] space-y-[12px]'>
-              <div className='rounded-[6px] border border-[var(--border)] bg-[var(--surface-4)] p-[16px]'>
-                <div className='mb-[6px] font-medium text-[11px] text-[var(--text-tertiary)] uppercase tracking-wide'>
-                  Formatted
-                </div>
-                <div className='text-[14px] text-[var(--text-primary)]'>
-                  {new Date(String(cellViewer.value)).toLocaleDateString('en-US', {
-                    weekday: 'long',
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    second: '2-digit',
-                    timeZoneName: 'short',
-                  })}
-                </div>
-              </div>
-              <div className='rounded-[6px] border border-[var(--border)] bg-[var(--surface-4)] p-[16px]'>
-                <div className='mb-[6px] font-medium text-[11px] text-[var(--text-tertiary)] uppercase tracking-wide'>
-                  ISO Format
-                </div>
-                <div className='font-mono text-[13px] text-[var(--text-secondary)]'>
-                  {String(cellViewer.value)}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className='m-[16px] max-h-[450px] overflow-auto whitespace-pre-wrap break-words rounded-[6px] border border-[var(--border)] bg-[var(--surface-4)] p-[16px] text-[13px] text-[var(--text-primary)] leading-[1.7]'>
-              {String(cellViewer.value)}
-            </div>
-          )}
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu.tsx

@@ -1,49 +0,0 @@
-import { Edit, Trash2 } from 'lucide-react'
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDivider,
-  PopoverItem,
-} from '@/components/emcn'
-import type { ContextMenuState } from '../lib/types'
-
-interface ContextMenuProps {
-  contextMenu: ContextMenuState
-  onClose: () => void
-  onEdit: () => void
-  onDelete: () => void
-}
-
-export function ContextMenu({ contextMenu, onClose, onEdit, onDelete }: ContextMenuProps) {
-  return (
-    <Popover
-      open={contextMenu.isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
-      <PopoverAnchor
-        style={{
-          position: 'fixed',
-          left: `${contextMenu.position.x}px`,
-          top: `${contextMenu.position.y}px`,
-          width: '1px',
-          height: '1px',
-        }}
-      />
-      <PopoverContent align='start' side='bottom' sideOffset={4}>
-        <PopoverItem onClick={onEdit}>
-          <Edit className='mr-[8px] h-[12px] w-[12px]' />
-          Edit row
-        </PopoverItem>
-        <PopoverDivider />
-        <PopoverItem onClick={onDelete} className='text-[var(--text-error)]'>
-          <Trash2 className='mr-[8px] h-[12px] w-[12px]' />
-          Delete row
-        </PopoverItem>
-      </PopoverContent>
-    </Popover>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/editable-cell.tsx

@@ -1,207 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { ChevronRight } from 'lucide-react'
-import { Checkbox, Input, Textarea } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import type { ColumnDefinition } from '@/lib/table'
-
-interface EditableCellProps {
-  value: unknown
-  column: ColumnDefinition
-  onChange: (value: unknown) => void
-  isEditing?: boolean
-  isNew?: boolean
-}
-
-function formatValueForDisplay(value: unknown, type: string): string {
-  if (value === null || value === undefined) return 'NULL'
-  if (type === 'json') {
-    return typeof value === 'string' ? value : JSON.stringify(value)
-  }
-  if (type === 'boolean') {
-    return value ? 'TRUE' : 'FALSE'
-  }
-  if (type === 'date' && value) {
-    try {
-      const date = new Date(String(value))
-      return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    } catch {
-      return String(value)
-    }
-  }
-  return String(value)
-}
-
-function formatValueForInput(value: unknown, type: string): string {
-  if (value === null || value === undefined) return ''
-  if (type === 'json') {
-    return typeof value === 'string' ? value : JSON.stringify(value, null, 2)
-  }
-  if (type === 'date' && value) {
-    try {
-      const date = new Date(String(value))
-      return date.toISOString().split('T')[0]
-    } catch {
-      return String(value)
-    }
-  }
-  return String(value)
-}
-
-export function EditableCell({
-  value,
-  column,
-  onChange,
-  isEditing = false,
-  isNew = false,
-}: EditableCellProps) {
-  const [localValue, setLocalValue] = useState<unknown>(value)
-  const [isActive, setIsActive] = useState(false)
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
-
-  useEffect(() => {
-    setLocalValue(value)
-  }, [value])
-
-  useEffect(() => {
-    if (isActive && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [isActive])
-
-  const handleFocus = useCallback(() => {
-    setIsActive(true)
-  }, [])
-
-  const handleBlur = useCallback(() => {
-    setIsActive(false)
-    if (localValue !== value) {
-      onChange(localValue)
-    }
-  }, [localValue, value, onChange])
-
-  const handleChange = useCallback((newValue: unknown) => {
-    setLocalValue(newValue)
-  }, [])
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.shiftKey && column.type !== 'json') {
-        e.preventDefault()
-        ;(e.target as HTMLElement).blur()
-      }
-      if (e.key === 'Escape') {
-        setLocalValue(value)
-        ;(e.target as HTMLElement).blur()
-      }
-    },
-    [value, column.type]
-  )
-
-  const isNull = value === null || value === undefined
-
-  // Boolean type - always show checkbox
-  if (column.type === 'boolean') {
-    return (
-      <div className='flex items-center'>
-        <Checkbox
-          size='sm'
-          checked={Boolean(localValue)}
-          onCheckedChange={(checked) => {
-            const newValue = checked === true
-            setLocalValue(newValue)
-            onChange(newValue)
-          }}
-        />
-        <span
-          className={cn(
-            'ml-[8px] text-[12px]',
-            localValue ? 'text-green-500' : 'text-[var(--text-tertiary)]'
-          )}
-        >
-          {localValue ? 'TRUE' : 'FALSE'}
-        </span>
-      </div>
-    )
-  }
-
-  // JSON type - use textarea
-  if (column.type === 'json') {
-    if (isActive || isNew) {
-      return (
-        <Textarea
-          ref={inputRef as React.RefObject<HTMLTextAreaElement>}
-          value={formatValueForInput(localValue, column.type)}
-          onChange={(e) => handleChange(e.target.value)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onKeyDown={handleKeyDown}
-          className='h-[60px] min-w-[200px] resize-none font-mono text-[11px]'
-          placeholder='{"key": "value"}'
-        />
-      )
-    }
-
-    return (
-      <button
-        type='button'
-        onClick={handleFocus}
-        className={cn(
-          'group flex max-w-[300px] cursor-pointer items-center truncate text-left font-mono text-[11px] transition-colors',
-          isNull
-            ? 'text-[var(--text-muted)] italic'
-            : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-        )}
-      >
-        <span className='truncate'>{formatValueForDisplay(value, column.type)}</span>
-        <ChevronRight className='ml-[4px] h-[10px] w-[10px] opacity-0 group-hover:opacity-100' />
-      </button>
-    )
-  }
-
-  // Active/editing state for other types
-  if (isActive || isNew) {
-    return (
-      <Input
-        ref={inputRef as React.RefObject<HTMLInputElement>}
-        type={column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'}
-        value={formatValueForInput(localValue, column.type)}
-        onChange={(e) => handleChange(e.target.value)}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          'h-[28px] min-w-[120px] text-[12px]',
-          column.type === 'number' && 'font-mono'
-        )}
-        placeholder={isNull ? 'NULL' : ''}
-      />
-    )
-  }
-
-  // Display state
-  return (
-    <button
-      type='button'
-      onClick={handleFocus}
-      className={cn(
-        'group flex max-w-[300px] cursor-pointer items-center truncate text-left text-[13px] transition-colors',
-        isNull
-          ? 'text-[var(--text-muted)] italic'
-          : column.type === 'number'
-            ? 'font-mono text-[12px] text-[var(--text-secondary)]'
-            : 'text-[var(--text-primary)]'
-      )}
-    >
-      <span className='truncate'>{formatValueForDisplay(value, column.type)}</span>
-      <ChevronRight className='ml-[4px] h-[10px] w-[10px] opacity-0 group-hover:opacity-100' />
-    </button>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/editable-row.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { X } from 'lucide-react'
-import { Button, TableCell, TableRow } from '@/components/emcn'
-import type { ColumnDefinition } from '@/lib/table'
-import type { TempRow } from '../hooks/use-inline-editing'
-import { EditableCell } from './editable-cell'
-
-interface EditableRowProps {
-  row: TempRow
-  columns: ColumnDefinition[]
-  onUpdateCell: (tempId: string, column: string, value: unknown) => void
-  onRemove: (tempId: string) => void
-}
-
-export function EditableRow({ row, columns, onUpdateCell, onRemove }: EditableRowProps) {
-  return (
-    <TableRow className='bg-amber-500/20 hover:bg-amber-500/30'>
-      <TableCell className='w-[40px]'>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={() => onRemove(row.tempId)}
-          className='h-[20px] w-[20px] p-0 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
-        >
-          <X className='h-[12px] w-[12px]' />
-        </Button>
-      </TableCell>
-      {columns.map((column) => (
-        <TableCell key={column.name}>
-          <EditableCell
-            value={row.data[column.name]}
-            column={column}
-            onChange={(value) => onUpdateCell(row.tempId, column.name, value)}
-            isNew
-          />
-        </TableCell>
-      ))}
-    </TableRow>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/filter-panel.tsx

@@ -1,169 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Plus, X } from 'lucide-react'
-import { Button, Combobox, Input } from '@/components/emcn'
-import type { FilterRule } from '@/lib/table/query-builder/constants'
-import { filterRulesToFilter } from '@/lib/table/query-builder/converters'
-import { useFilterBuilder } from '@/lib/table/query-builder/use-query-builder'
-import type { ColumnDefinition } from '@/lib/table/types'
-import type { QueryOptions } from '../lib/types'
-
-type Column = Pick<ColumnDefinition, 'name' | 'type'>
-
-interface FilterPanelProps {
-  columns: Column[]
-  isVisible: boolean
-  onApply: (options: QueryOptions) => void
-  onClose: () => void
-  isLoading?: boolean
-}
-
-// Operators that don't need a value input
-const NO_VALUE_OPERATORS = ['is_null', 'is_not_null']
-
-// Options for the first filter row
-const WHERE_OPTIONS = [{ value: 'where', label: 'where' }]
-
-export function FilterPanel({
-  columns,
-  isVisible,
-  onApply,
-  onClose,
-  isLoading = false,
-}: FilterPanelProps) {
-  const [rules, setRules] = useState<FilterRule[]>([])
-
-  const columnOptions = useMemo(
-    () => columns.map((col) => ({ value: col.name, label: col.name })),
-    [columns]
-  )
-
-  const {
-    comparisonOptions,
-    logicalOptions,
-    addRule: handleAddRule,
-    removeRule: handleRemoveRule,
-    updateRule: handleUpdateRule,
-  } = useFilterBuilder({
-    columns: columnOptions,
-    rules,
-    setRules,
-  })
-
-  // Auto-add first filter when panel opens with no filters
-  useEffect(() => {
-    if (isVisible && rules.length === 0 && columns.length > 0) {
-      handleAddRule()
-    }
-  }, [isVisible, rules.length, columns.length, handleAddRule])
-
-  const handleApply = useCallback(() => {
-    const filter = filterRulesToFilter(rules)
-    onApply({ filter, sort: null })
-  }, [rules, onApply])
-
-  const handleClear = useCallback(() => {
-    setRules([])
-    onApply({ filter: null, sort: null })
-    onClose()
-  }, [onApply, onClose])
-
-  if (!isVisible) {
-    return null
-  }
-
-  return (
-    <div className='flex shrink-0 flex-col gap-2 border-[var(--border)] border-b px-4 py-3'>
-      {rules.map((rule, index) => {
-        const needsValue = !NO_VALUE_OPERATORS.includes(rule.operator)
-        const isFirst = index === 0
-
-        return (
-          <div key={rule.id} className='flex items-center gap-2'>
-            {/* Remove button */}
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => handleRemoveRule(rule.id)}
-              aria-label='Remove filter'
-              className='shrink-0 p-1'
-            >
-              <X className='h-3.5 w-3.5' />
-            </Button>
-
-            {/* Where / And / Or */}
-            <div className='w-20 shrink-0'>
-              {isFirst ? (
-                <Combobox size='sm' options={WHERE_OPTIONS} value='where' onChange={() => {}} />
-              ) : (
-                <Combobox
-                  size='sm'
-                  options={logicalOptions}
-                  value={rule.logicalOperator}
-                  onChange={(value) =>
-                    handleUpdateRule(rule.id, 'logicalOperator', value as 'and' | 'or')
-                  }
-                />
-              )}
-            </div>
-
-            {/* Column */}
-            <div className='w-[140px] shrink-0'>
-              <Combobox
-                size='sm'
-                options={columnOptions}
-                value={rule.column}
-                onChange={(value) => handleUpdateRule(rule.id, 'column', value)}
-                placeholder='Column'
-              />
-            </div>
-
-            {/* Operator */}
-            <div className='w-[120px] shrink-0'>
-              <Combobox
-                size='sm'
-                options={comparisonOptions}
-                value={rule.operator}
-                onChange={(value) => handleUpdateRule(rule.id, 'operator', value)}
-              />
-            </div>
-
-            {/* Value (only if operator needs it) */}
-            {needsValue && (
-              <Input
-                className='w-[160px] shrink-0'
-                value={rule.value}
-                onChange={(e) => handleUpdateRule(rule.id, 'value', e.target.value)}
-                placeholder='Enter a value'
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    handleApply()
-                  }
-                }}
-              />
-            )}
-
-            {/* Actions - only on first row */}
-            {isFirst && (
-              <div className='ml-1 flex items-center gap-1'>
-                <Button variant='tertiary' size='sm' onClick={handleApply} disabled={isLoading}>
-                  Apply
-                </Button>
-
-                <Button variant='ghost' size='sm' onClick={handleAddRule}>
-                  <Plus className='h-3 w-3' />
-                  Add filter
-                </Button>
-
-                <Button variant='ghost' size='sm' onClick={handleClear}>
-                  Clear filters
-                </Button>
-              </div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts

@@ -1,11 +0,0 @@
-export * from './body-states'
-export * from './cell-renderer'
-export * from './cell-viewer-modal'
-export * from './context-menu'
-export * from './editable-cell'
-export * from './editable-row'
-export * from './filter-panel'
-export * from './row-modal'
-export * from './schema-modal'
-export * from './table-toolbar'
-export * from './table-viewer'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal.tsx

@@ -1,399 +0,0 @@
-'use client'
-
-import { useEffect, useMemo, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { useParams } from 'next/navigation'
-import {
-  Badge,
-  Button,
-  Checkbox,
-  Input,
-  Label,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Textarea,
-} from '@/components/emcn'
-import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
-
-const logger = createLogger('RowModal')
-
-export interface RowModalProps {
-  mode: 'add' | 'edit' | 'delete'
-  isOpen: boolean
-  onClose: () => void
-  table: TableInfo
-  row?: TableRow
-  rowIds?: string[]
-  onSuccess: () => void
-}
-
-function createInitialRowData(columns: ColumnDefinition[]): Record<string, unknown> {
-  const initial: Record<string, unknown> = {}
-  columns.forEach((col) => {
-    if (col.type === 'boolean') {
-      initial[col.name] = false
-    } else {
-      initial[col.name] = ''
-    }
-  })
-  return initial
-}
-
-function cleanRowData(
-  columns: ColumnDefinition[],
-  rowData: Record<string, unknown>
-): Record<string, unknown> {
-  const cleanData: Record<string, unknown> = {}
-
-  columns.forEach((col) => {
-    const value = rowData[col.name]
-    if (col.type === 'number') {
-      cleanData[col.name] = value === '' ? null : Number(value)
-    } else if (col.type === 'json') {
-      if (typeof value === 'string') {
-        if (value === '') {
-          cleanData[col.name] = null
-        } else {
-          try {
-            cleanData[col.name] = JSON.parse(value)
-          } catch {
-            throw new Error(`Invalid JSON for field: ${col.name}`)
-          }
-        }
-      } else {
-        cleanData[col.name] = value
-      }
-    } else if (col.type === 'boolean') {
-      cleanData[col.name] = Boolean(value)
-    } else {
-      cleanData[col.name] = value || null
-    }
-  })
-
-  return cleanData
-}
-
-function formatValueForInput(value: unknown, type: string): string {
-  if (value === null || value === undefined) return ''
-  if (type === 'json') {
-    return typeof value === 'string' ? value : JSON.stringify(value, null, 2)
-  }
-  if (type === 'date' && value) {
-    try {
-      const date = new Date(String(value))
-      return date.toISOString().split('T')[0]
-    } catch {
-      return String(value)
-    }
-  }
-  return String(value)
-}
-
-function isFieldEmpty(value: unknown, type: string): boolean {
-  if (value === null || value === undefined) return true
-  if (type === 'boolean') return false // booleans always have a value (true/false)
-  if (typeof value === 'string') return value.trim() === ''
-  return false
-}
-
-export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess }: RowModalProps) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-
-  const schema = table?.schema
-  const columns = schema?.columns || []
-
-  const [rowData, setRowData] = useState<Record<string, unknown>>({})
-  const [error, setError] = useState<string | null>(null)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  // Check if all required fields are filled
-  const hasRequiredFields = useMemo(() => {
-    const requiredColumns = columns.filter((col) => col.required)
-    return requiredColumns.every((col) => !isFieldEmpty(rowData[col.name], col.type))
-  }, [columns, rowData])
-
-  // Initialize form data based on mode
-  useEffect(() => {
-    if (!isOpen) return
-
-    if (mode === 'add' && columns.length > 0) {
-      setRowData(createInitialRowData(columns))
-    } else if (mode === 'edit' && row) {
-      setRowData(row.data)
-    }
-  }, [isOpen, mode, columns, row])
-
-  const handleFormSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
-    setIsSubmitting(true)
-
-    try {
-      const cleanData = cleanRowData(columns, rowData)
-
-      if (mode === 'add') {
-        const res = await fetch(`/api/table/${table?.id}/rows`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId, data: cleanData }),
-        })
-
-        const result: { error?: string } = await res.json()
-        if (!res.ok) {
-          throw new Error(result.error || 'Failed to add row')
-        }
-      } else if (mode === 'edit' && row) {
-        const res = await fetch(`/api/table/${table?.id}/rows/${row.id}`, {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId, data: cleanData }),
-        })
-
-        const result: { error?: string } = await res.json()
-        if (!res.ok) {
-          throw new Error(result.error || 'Failed to update row')
-        }
-      }
-
-      onSuccess()
-    } catch (err) {
-      logger.error(`Failed to ${mode} row:`, err)
-      setError(err instanceof Error ? err.message : `Failed to ${mode} row`)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const handleDelete = async () => {
-    setError(null)
-    setIsSubmitting(true)
-
-    const idsToDelete = rowIds ?? (row ? [row.id] : [])
-
-    try {
-      if (idsToDelete.length === 1) {
-        const res = await fetch(`/api/table/${table?.id}/rows/${idsToDelete[0]}`, {
-          method: 'DELETE',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId }),
-        })
-
-        if (!res.ok) {
-          const result: { error?: string } = await res.json()
-          throw new Error(result.error || 'Failed to delete row')
-        }
-      } else {
-        const results = await Promise.allSettled(
-          idsToDelete.map(async (rowId) => {
-            const res = await fetch(`/api/table/${table?.id}/rows/${rowId}`, {
-              method: 'DELETE',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ workspaceId }),
-            })
-
-            if (!res.ok) {
-              const result: { error?: string } = await res.json().catch(() => ({}))
-              throw new Error(result.error || `Failed to delete row ${rowId}`)
-            }
-
-            return rowId
-          })
-        )
-
-        const failures = results.filter((r) => r.status === 'rejected')
-
-        if (failures.length > 0) {
-          const failureCount = failures.length
-          const totalCount = idsToDelete.length
-          const successCount = totalCount - failureCount
-          const firstError =
-            failures[0].status === 'rejected' ? failures[0].reason?.message || 'Unknown error' : ''
-
-          throw new Error(
-            `Failed to delete ${failureCount} of ${totalCount} row(s)${successCount > 0 ? ` (${successCount} deleted successfully)` : ''}. ${firstError}`
-          )
-        }
-      }
-
-      onSuccess()
-    } catch (err) {
-      logger.error('Failed to delete row(s):', err)
-      setError(err instanceof Error ? err.message : 'Failed to delete row(s)')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const handleClose = () => {
-    setRowData({})
-    setError(null)
-    onClose()
-  }
-
-  // Delete mode UI
-  if (mode === 'delete') {
-    const deleteCount = rowIds?.length ?? (row ? 1 : 0)
-    const isSingleRow = deleteCount === 1
-
-    return (
-      <Modal open={isOpen} onOpenChange={handleClose}>
-        <ModalContent size='sm'>
-          <ModalHeader>Delete {isSingleRow ? 'Row' : `${deleteCount} Rows`}</ModalHeader>
-          <ModalBody>
-            <ErrorMessage error={error} />
-            <p className='text-[12px] text-[var(--text-secondary)]'>
-              Are you sure you want to delete{' '}
-              <span className='font-medium text-[var(--text-primary)]'>
-                {isSingleRow ? '1 row' : `${deleteCount} rows`}
-              </span>
-              ? This will permanently remove the data.{' '}
-              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant='default' onClick={handleClose} disabled={isSubmitting}>
-              Cancel
-            </Button>
-            <Button variant='destructive' onClick={handleDelete} disabled={isSubmitting}>
-              {isSubmitting ? 'Deleting...' : 'Delete'}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    )
-  }
-
-  const isAddMode = mode === 'add'
-
-  return (
-    <Modal open={isOpen} onOpenChange={handleClose}>
-      <ModalContent className='max-w-[480px]'>
-        <ModalHeader>{isAddMode ? 'Add New Row' : 'Edit Row'}</ModalHeader>
-        <ModalBody className='max-h-[60vh] space-y-[12px] overflow-y-auto'>
-          <ErrorMessage error={error} />
-
-          <div className='flex flex-col gap-[8px]'>
-            {columns.map((column) => (
-              <ColumnField
-                key={column.name}
-                column={column}
-                value={rowData[column.name]}
-                onChange={(value) => setRowData((prev) => ({ ...prev, [column.name]: value }))}
-              />
-            ))}
-          </div>
-        </ModalBody>
-        <ModalFooter>
-          <Button variant='default' onClick={handleClose} disabled={isSubmitting}>
-            Cancel
-          </Button>
-          <Button
-            variant='tertiary'
-            onClick={handleFormSubmit}
-            disabled={isSubmitting || !hasRequiredFields}
-          >
-            {isSubmitting
-              ? isAddMode
-                ? 'Adding...'
-                : 'Updating...'
-              : isAddMode
-                ? 'Add Row'
-                : 'Update Row'}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}
-
-function ErrorMessage({ error }: { error: string | null }) {
-  if (!error) return null
-
-  return (
-    <div className='rounded-[8px] border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-[14px] py-[12px] text-[13px] text-[var(--status-error-text)]'>
-      {error}
-    </div>
-  )
-}
-
-interface ColumnFieldProps {
-  column: ColumnDefinition
-  value: unknown
-  onChange: (value: unknown) => void
-}
-
-function ColumnField({ column, value, onChange }: ColumnFieldProps) {
-  const renderInput = () => {
-    if (column.type === 'boolean') {
-      return (
-        <div className='flex items-center gap-[8px]'>
-          <Checkbox
-            id={column.name}
-            checked={Boolean(value)}
-            onCheckedChange={(checked) => onChange(checked === true)}
-          />
-          <Label
-            htmlFor={column.name}
-            className='font-normal text-[13px] text-[var(--text-tertiary)]'
-          >
-            {value ? 'True' : 'False'}
-          </Label>
-        </div>
-      )
-    }
-
-    if (column.type === 'json') {
-      return (
-        <Textarea
-          id={column.name}
-          value={formatValueForInput(value, column.type)}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder='{"key": "value"}'
-          rows={3}
-          className='font-mono text-[12px]'
-          required={column.required}
-        />
-      )
-    }
-
-    return (
-      <Input
-        id={column.name}
-        type={column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'}
-        value={formatValueForInput(value, column.type)}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={`Enter ${column.name}`}
-        required={column.required}
-      />
-    )
-  }
-
-  return (
-    <div className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
-      <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-          <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
-            {column.name}
-            {column.required && <span className='text-[var(--text-error)]'> *</span>}
-          </span>
-          <Badge size='sm'>{column.type}</Badge>
-          {column.unique && (
-            <Badge size='sm' variant='gray-secondary'>
-              unique
-            </Badge>
-          )}
-        </div>
-      </div>
-      <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Value</Label>
-          {renderInput()}
-        </div>
-      </div>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/schema-modal.tsx

@@ -1,79 +0,0 @@
-import {
-  Badge,
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/emcn'
-import type { ColumnDefinition } from '@/lib/table'
-
-interface SchemaModalProps {
-  isOpen: boolean
-  onClose: () => void
-  columns: ColumnDefinition[]
-}
-
-export function SchemaModal({ isOpen, onClose, columns }: SchemaModalProps) {
-  return (
-    <Modal open={isOpen} onOpenChange={onClose}>
-      <ModalContent size='sm'>
-        <ModalHeader>Table Schema</ModalHeader>
-        <ModalBody>
-          <div className='max-h-[400px] overflow-auto'>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className='w-[180px]'>Column</TableHead>
-                  <TableHead className='w-[100px]'>Type</TableHead>
-                  <TableHead>Constraints</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {columns.map((column) => (
-                  <TableRow key={column.name}>
-                    <TableCell>{column.name}</TableCell>
-                    <TableCell>
-                      <Badge variant='gray-secondary' size='sm'>
-                        {column.type}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <div className='flex gap-[6px]'>
-                        {column.required && (
-                          <Badge variant='gray-secondary' size='sm'>
-                            required
-                          </Badge>
-                        )}
-                        {column.unique && (
-                          <Badge variant='gray-secondary' size='sm'>
-                            unique
-                          </Badge>
-                        )}
-                        {!column.required && !column.unique && (
-                          <span className='text-[var(--text-muted)]'>—</span>
-                        )}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </ModalBody>
-        <ModalFooter>
-          <Button variant='default' onClick={() => onClose(false)}>
-            Close
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-toolbar.tsx

@@ -1,194 +0,0 @@
-'use client'
-
-import {
-  ChevronLeft,
-  ChevronRight,
-  Filter,
-  MoreHorizontal,
-  Plus,
-  RefreshCw,
-  Trash2,
-} from 'lucide-react'
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-  Tooltip,
-} from '@/components/emcn'
-import { Skeleton } from '@/components/ui/skeleton'
-
-interface TableToolbarProps {
-  tableName: string
-  totalCount: number
-  isLoading: boolean
-  onNavigateBack: () => void
-  onShowSchema: () => void
-  onRefresh: () => void
-  showFilters: boolean
-  onToggleFilters: () => void
-  onAddRecord: () => void
-  selectedCount: number
-  onDeleteSelected: () => void
-  onClearSelection: () => void
-  hasPendingChanges: boolean
-  onSaveChanges: () => void
-  onDiscardChanges: () => void
-  isSaving: boolean
-  currentPage: number
-  totalPages: number
-  onPreviousPage: () => void
-  onNextPage: () => void
-}
-
-export function TableToolbar({
-  tableName,
-  totalCount,
-  isLoading,
-  onNavigateBack,
-  onShowSchema,
-  onRefresh,
-  showFilters,
-  onToggleFilters,
-  onAddRecord,
-  selectedCount,
-  onDeleteSelected,
-  onClearSelection,
-  hasPendingChanges,
-  onSaveChanges,
-  onDiscardChanges,
-  isSaving,
-  currentPage,
-  totalPages,
-  onPreviousPage,
-  onNextPage,
-}: TableToolbarProps) {
-  const hasSelection = selectedCount > 0
-
-  return (
-    <div className='flex h-[48px] shrink-0 items-center justify-between border-[var(--border)] border-b bg-[var(--surface-2)] px-[16px]'>
-      {/* Left section: Navigation and table info */}
-      <div className='flex items-center gap-[8px]'>
-        <button
-          onClick={onNavigateBack}
-          className='text-[13px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
-        >
-          Tables
-        </button>
-        <span className='text-[var(--text-muted)]'>/</span>
-        <span className='font-medium text-[13px] text-[var(--text-primary)]'>{tableName}</span>
-      </div>
-
-      {/* Center section: Main actions */}
-      <div className='flex items-center gap-[8px]'>
-        {/* Pagination controls */}
-        <div className='flex items-center gap-[2px]'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                size='sm'
-                onClick={onPreviousPage}
-                disabled={currentPage === 0 || isLoading}
-              >
-                <ChevronLeft className='h-[14px] w-[14px]' />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Previous page</Tooltip.Content>
-          </Tooltip.Root>
-
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                size='sm'
-                onClick={onNextPage}
-                disabled={currentPage >= totalPages - 1 || isLoading}
-              >
-                <ChevronRight className='h-[14px] w-[14px]' />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Next page</Tooltip.Content>
-          </Tooltip.Root>
-        </div>
-
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
-
-        {/* Filters toggle */}
-        <Button variant={showFilters ? 'secondary' : 'ghost'} size='sm' onClick={onToggleFilters}>
-          <Filter className='mr-[4px] h-[12px] w-[12px]' />
-          Filters
-        </Button>
-
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
-
-        {/* Pending changes actions */}
-        {hasPendingChanges ? (
-          <>
-            <Button variant='tertiary' size='sm' onClick={onSaveChanges} disabled={isSaving}>
-              {isSaving ? 'Saving...' : 'Save changes'}
-            </Button>
-            <Button variant='ghost' size='sm' onClick={onDiscardChanges} disabled={isSaving}>
-              Discard changes
-            </Button>
-          </>
-        ) : (
-          <>
-            {/* Add record */}
-            <Button variant='default' size='sm' onClick={onAddRecord}>
-              <Plus className='mr-[4px] h-[12px] w-[12px]' />
-              Add record
-            </Button>
-
-            {/* Delete selected */}
-            {hasSelection && (
-              <Button variant='destructive' size='sm' onClick={onDeleteSelected}>
-                <Trash2 className='mr-[4px] h-[12px] w-[12px]' />
-                Delete {selectedCount} {selectedCount === 1 ? 'record' : 'records'}
-              </Button>
-            )}
-          </>
-        )}
-
-        {/* Clear selection */}
-        {hasSelection && !hasPendingChanges && (
-          <Button variant='ghost' size='sm' onClick={onClearSelection}>
-            Clear selection
-          </Button>
-        )}
-      </div>
-
-      {/* Right section: Row count and utilities */}
-      <div className='flex items-center gap-[6px]'>
-        {isLoading ? (
-          <Skeleton className='h-[16px] w-[50px]' />
-        ) : (
-          <span className='text-[13px] text-[var(--text-tertiary)]'>
-            {totalCount} {totalCount === 1 ? 'row' : 'rows'}
-          </span>
-        )}
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button variant='ghost' size='sm' onClick={onRefresh} disabled={isLoading}>
-              <RefreshCw className='h-[14px] w-[14px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Refresh</Tooltip.Content>
-        </Tooltip.Root>
-
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant='ghost' size='sm'>
-              <MoreHorizontal className='h-[14px] w-[14px]' />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent align='end' className='w-[160px]'>
-            <PopoverItem onClick={onShowSchema}>View Schema</PopoverItem>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-viewer.tsx

@@ -1,331 +0,0 @@
-'use client'
-
-import { useCallback, useState } from 'react'
-import { useParams, useRouter } from 'next/navigation'
-import {
-  Badge,
-  Checkbox,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import { useContextMenu, useInlineEditing, useRowSelection, useTableData } from '../hooks'
-import type { CellViewerData, QueryOptions } from '../lib/types'
-import { EmptyRows, LoadingRows } from './body-states'
-import { CellViewerModal } from './cell-viewer-modal'
-import { ContextMenu } from './context-menu'
-import { EditableCell } from './editable-cell'
-import { EditableRow } from './editable-row'
-import { FilterPanel } from './filter-panel'
-import { RowModal } from './row-modal'
-import { SchemaModal } from './schema-modal'
-import { TableToolbar } from './table-toolbar'
-
-export function TableViewer() {
-  const params = useParams()
-  const router = useRouter()
-
-  const workspaceId = params.workspaceId as string
-  const tableId = params.tableId as string
-
-  const [queryOptions, setQueryOptions] = useState<QueryOptions>({
-    filter: null,
-    sort: null,
-  })
-  const [currentPage, setCurrentPage] = useState(0)
-  const [showFilters, setShowFilters] = useState(false)
-  const [deletingRows, setDeletingRows] = useState<string[]>([])
-  const [showSchemaModal, setShowSchemaModal] = useState(false)
-
-  const [cellViewer, setCellViewer] = useState<CellViewerData | null>(null)
-  const [copied, setCopied] = useState(false)
-
-  const { tableData, isLoadingTable, rows, totalCount, totalPages, isLoadingRows, refetchRows } =
-    useTableData({
-      workspaceId,
-      tableId,
-      queryOptions,
-      currentPage,
-    })
-
-  const columns = tableData?.schema?.columns || []
-
-  const { selectedRows, handleSelectAll, handleSelectRow, clearSelection } = useRowSelection(rows)
-
-  const { contextMenu, handleRowContextMenu, closeContextMenu } = useContextMenu()
-
-  const {
-    newRows,
-    pendingChanges,
-    addNewRow,
-    updateNewRowCell,
-    updateExistingRowCell,
-    saveChanges,
-    discardChanges,
-    hasPendingChanges,
-    isSaving,
-  } = useInlineEditing({
-    workspaceId,
-    tableId,
-    columns,
-    onSuccess: refetchRows,
-  })
-
-  const selectedCount = selectedRows.size
-  const hasSelection = selectedCount > 0
-  const isAllSelected = rows.length > 0 && selectedCount === rows.length
-
-  const handleNavigateBack = useCallback(() => {
-    router.push(`/workspace/${workspaceId}/tables`)
-  }, [router, workspaceId])
-
-  const handleShowSchema = useCallback(() => {
-    setShowSchemaModal(true)
-  }, [])
-
-  const handleToggleFilters = useCallback(() => {
-    setShowFilters((prev) => !prev)
-  }, [])
-
-  const handleApplyQueryOptions = useCallback(
-    (options: QueryOptions) => {
-      setQueryOptions(options)
-      setCurrentPage(0)
-      refetchRows()
-    },
-    [refetchRows]
-  )
-
-  const handleDeleteSelected = useCallback(() => {
-    setDeletingRows(Array.from(selectedRows))
-  }, [selectedRows])
-
-  const handleContextMenuEdit = useCallback(() => {
-    // For inline editing, we don't need the modal anymore
-    // The cell becomes editable on click
-    closeContextMenu()
-  }, [closeContextMenu])
-
-  const handleContextMenuDelete = useCallback(() => {
-    if (contextMenu.row) {
-      setDeletingRows([contextMenu.row.id])
-    }
-    closeContextMenu()
-  }, [contextMenu.row, closeContextMenu])
-
-  const handleCopyCellValue = useCallback(async () => {
-    if (cellViewer) {
-      let text: string
-      if (cellViewer.type === 'json') {
-        text = JSON.stringify(cellViewer.value, null, 2)
-      } else if (cellViewer.type === 'date') {
-        text = String(cellViewer.value)
-      } else {
-        text = String(cellViewer.value)
-      }
-      await navigator.clipboard.writeText(text)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    }
-  }, [cellViewer])
-
-  const handleCellClick = useCallback(
-    (columnName: string, value: unknown, type: CellViewerData['type']) => {
-      setCellViewer({ columnName, value, type })
-    },
-    []
-  )
-
-  const handleRemoveNewRow = useCallback(
-    (tempId: string) => {
-      discardChanges()
-    },
-    [discardChanges]
-  )
-
-  const handlePreviousPage = useCallback(() => {
-    setCurrentPage((p) => Math.max(0, p - 1))
-  }, [])
-
-  const handleNextPage = useCallback(() => {
-    setCurrentPage((p) => Math.min(totalPages - 1, p + 1))
-  }, [totalPages])
-
-  if (isLoadingTable) {
-    return (
-      <div className='flex h-full items-center justify-center'>
-        <span className='text-[13px] text-[var(--text-tertiary)]'>Loading table...</span>
-      </div>
-    )
-  }
-
-  if (!tableData) {
-    return (
-      <div className='flex h-full items-center justify-center'>
-        <span className='text-[13px] text-[var(--text-error)]'>Table not found</span>
-      </div>
-    )
-  }
-
-  return (
-    <div className='flex h-full flex-col'>
-      <TableToolbar
-        tableName={tableData.name}
-        totalCount={totalCount}
-        isLoading={isLoadingRows}
-        onNavigateBack={handleNavigateBack}
-        onShowSchema={handleShowSchema}
-        onRefresh={refetchRows}
-        showFilters={showFilters}
-        onToggleFilters={handleToggleFilters}
-        onAddRecord={addNewRow}
-        selectedCount={selectedCount}
-        onDeleteSelected={handleDeleteSelected}
-        onClearSelection={clearSelection}
-        hasPendingChanges={hasPendingChanges}
-        onSaveChanges={saveChanges}
-        onDiscardChanges={discardChanges}
-        isSaving={isSaving}
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPreviousPage={handlePreviousPage}
-        onNextPage={handleNextPage}
-      />
-
-      <FilterPanel
-        columns={columns}
-        isVisible={showFilters}
-        onApply={handleApplyQueryOptions}
-        onClose={() => setShowFilters(false)}
-        isLoading={isLoadingRows}
-      />
-
-      <div className='flex-1 overflow-auto'>
-        <Table>
-          <TableHeader className='sticky top-0 z-10 bg-[var(--surface-3)]'>
-            <TableRow>
-              <TableHead className='w-[40px]'>
-                <Checkbox size='sm' checked={isAllSelected} onCheckedChange={handleSelectAll} />
-              </TableHead>
-              {columns.map((column) => (
-                <TableHead key={column.name}>
-                  <div className='flex items-center gap-[6px]'>
-                    <span className='text-[12px]'>{column.name}</span>
-                    <Badge variant='outline' size='sm'>
-                      {column.type}
-                    </Badge>
-                    {column.required && (
-                      <span className='text-[10px] text-[var(--text-error)]'>*</span>
-                    )}
-                  </div>
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {/* New rows being added */}
-            {newRows.map((newRow) => (
-              <EditableRow
-                key={newRow.tempId}
-                row={newRow}
-                columns={columns}
-                onUpdateCell={updateNewRowCell}
-                onRemove={handleRemoveNewRow}
-              />
-            ))}
-
-            {/* Loading state */}
-            {isLoadingRows ? (
-              <LoadingRows columns={columns} />
-            ) : rows.length === 0 && newRows.length === 0 ? (
-              <EmptyRows
-                columnCount={columns.length}
-                hasFilter={!!queryOptions.filter}
-                onAddRow={addNewRow}
-              />
-            ) : (
-              /* Existing rows with inline editing */
-              rows.map((row) => {
-                const rowChanges = pendingChanges.get(row.id)
-                const hasChanges = !!rowChanges
-
-                return (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      'group hover:bg-[var(--surface-4)]',
-                      selectedRows.has(row.id) && 'bg-[var(--surface-5)]',
-                      hasChanges && 'bg-amber-500/10'
-                    )}
-                    onContextMenu={(e) => handleRowContextMenu(e, row)}
-                  >
-                    <TableCell>
-                      <Checkbox
-                        size='sm'
-                        checked={selectedRows.has(row.id)}
-                        onCheckedChange={() => handleSelectRow(row.id)}
-                      />
-                    </TableCell>
-                    {columns.map((column) => {
-                      const currentValue = rowChanges?.[column.name] ?? row.data[column.name]
-
-                      return (
-                        <TableCell key={column.name}>
-                          <EditableCell
-                            value={currentValue}
-                            column={column}
-                            onChange={(value) => updateExistingRowCell(row.id, column.name, value)}
-                          />
-                        </TableCell>
-                      )
-                    })}
-                  </TableRow>
-                )
-              })
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Delete confirmation modal */}
-      {deletingRows.length > 0 && (
-        <RowModal
-          mode='delete'
-          isOpen={true}
-          onClose={() => setDeletingRows([])}
-          table={tableData}
-          rowIds={deletingRows}
-          onSuccess={() => {
-            refetchRows()
-            setDeletingRows([])
-            clearSelection()
-          }}
-        />
-      )}
-
-      <SchemaModal
-        isOpen={showSchemaModal}
-        onClose={() => setShowSchemaModal(false)}
-        columns={columns}
-      />
-
-      <CellViewerModal
-        cellViewer={cellViewer}
-        onClose={() => setCellViewer(null)}
-        onCopy={handleCopyCellValue}
-        copied={copied}
-      />
-
-      <ContextMenu
-        contextMenu={contextMenu}
-        onClose={closeContextMenu}
-        onEdit={handleContextMenuEdit}
-        onDelete={handleContextMenuDelete}
-      />
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from './use-context-menu'
-export * from './use-inline-editing'
-export * from './use-row-selection'
-export * from './use-table-data'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-context-menu.ts

@@ -1,37 +0,0 @@
-import { useCallback, useState } from 'react'
-import type { TableRow } from '@/lib/table'
-import type { ContextMenuState } from '../lib/types'
-
-interface UseContextMenuReturn {
-  contextMenu: ContextMenuState
-  handleRowContextMenu: (e: React.MouseEvent, row: TableRow) => void
-  closeContextMenu: () => void
-}
-
-export function useContextMenu(): UseContextMenuReturn {
-  const [contextMenu, setContextMenu] = useState<ContextMenuState>({
-    isOpen: false,
-    position: { x: 0, y: 0 },
-    row: null,
-  })
-
-  const handleRowContextMenu = useCallback((e: React.MouseEvent, row: TableRow) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setContextMenu({
-      isOpen: true,
-      position: { x: e.clientX, y: e.clientY },
-      row,
-    })
-  }, [])
-
-  const closeContextMenu = useCallback(() => {
-    setContextMenu((prev) => ({ ...prev, isOpen: false }))
-  }, [])
-
-  return {
-    contextMenu,
-    handleRowContextMenu,
-    closeContextMenu,
-  }
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-inline-editing.ts

@@ -1,192 +0,0 @@
-'use client'
-
-import { useCallback, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { nanoid } from 'nanoid'
-import type { ColumnDefinition } from '@/lib/table'
-
-const logger = createLogger('useInlineEditing')
-
-export interface TempRow {
-  tempId: string
-  data: Record<string, unknown>
-  isNew: true
-}
-
-interface UseInlineEditingProps {
-  workspaceId: string
-  tableId: string
-  columns: ColumnDefinition[]
-  onSuccess: () => void
-}
-
-interface UseInlineEditingReturn {
-  newRows: TempRow[]
-  pendingChanges: Map<string, Record<string, unknown>>
-  addNewRow: () => void
-  updateNewRowCell: (tempId: string, column: string, value: unknown) => void
-  updateExistingRowCell: (rowId: string, column: string, value: unknown) => void
-  saveChanges: () => Promise<void>
-  discardChanges: () => void
-  hasPendingChanges: boolean
-  isSaving: boolean
-  error: string | null
-}
-
-function createInitialRowData(columns: ColumnDefinition[]): Record<string, unknown> {
-  const initial: Record<string, unknown> = {}
-  columns.forEach((col) => {
-    if (col.type === 'boolean') {
-      initial[col.name] = false
-    } else {
-      initial[col.name] = null
-    }
-  })
-  return initial
-}
-
-function cleanRowData(
-  columns: ColumnDefinition[],
-  rowData: Record<string, unknown>
-): Record<string, unknown> {
-  const cleanData: Record<string, unknown> = {}
-
-  columns.forEach((col) => {
-    const value = rowData[col.name]
-    if (col.type === 'number') {
-      cleanData[col.name] = value === '' || value === null ? null : Number(value)
-    } else if (col.type === 'json') {
-      if (typeof value === 'string') {
-        if (value === '') {
-          cleanData[col.name] = null
-        } else {
-          try {
-            cleanData[col.name] = JSON.parse(value)
-          } catch {
-            throw new Error(`Invalid JSON for field: ${col.name}`)
-          }
-        }
-      } else {
-        cleanData[col.name] = value
-      }
-    } else if (col.type === 'boolean') {
-      cleanData[col.name] = Boolean(value)
-    } else {
-      cleanData[col.name] = value || null
-    }
-  })
-
-  return cleanData
-}
-
-export function useInlineEditing({
-  workspaceId,
-  tableId,
-  columns,
-  onSuccess,
-}: UseInlineEditingProps): UseInlineEditingReturn {
-  const [newRows, setNewRows] = useState<TempRow[]>([])
-  const [pendingChanges, setPendingChanges] = useState<Map<string, Record<string, unknown>>>(
-    new Map()
-  )
-  const [isSaving, setIsSaving] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const hasPendingChanges = newRows.length > 0 || pendingChanges.size > 0
-
-  const addNewRow = useCallback(() => {
-    const newRow: TempRow = {
-      tempId: `temp-${nanoid()}`,
-      data: createInitialRowData(columns),
-      isNew: true,
-    }
-    setNewRows((prev) => [newRow, ...prev])
-  }, [columns])
-
-  const updateNewRowCell = useCallback((tempId: string, column: string, value: unknown) => {
-    setNewRows((prev) =>
-      prev.map((row) =>
-        row.tempId === tempId ? { ...row, data: { ...row.data, [column]: value } } : row
-      )
-    )
-  }, [])
-
-  const updateExistingRowCell = useCallback((rowId: string, column: string, value: unknown) => {
-    setPendingChanges((prev) => {
-      const newMap = new Map(prev)
-      const existing = newMap.get(rowId) || {}
-      newMap.set(rowId, { ...existing, [column]: value })
-      return newMap
-    })
-  }, [])
-
-  const saveChanges = useCallback(async () => {
-    setIsSaving(true)
-    setError(null)
-
-    try {
-      // Save new rows
-      for (const newRow of newRows) {
-        const cleanData = cleanRowData(columns, newRow.data)
-
-        const res = await fetch(`/api/table/${tableId}/rows`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId, data: cleanData }),
-        })
-
-        const result: { error?: string } = await res.json()
-        if (!res.ok) {
-          throw new Error(result.error || 'Failed to add row')
-        }
-      }
-
-      // Save edited rows
-      for (const [rowId, changes] of pendingChanges.entries()) {
-        const cleanData = cleanRowData(columns, changes)
-
-        const res = await fetch(`/api/table/${tableId}/rows/${rowId}`, {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId, data: cleanData }),
-        })
-
-        const result: { error?: string } = await res.json()
-        if (!res.ok) {
-          throw new Error(result.error || 'Failed to update row')
-        }
-      }
-
-      // Clear state and refresh
-      setNewRows([])
-      setPendingChanges(new Map())
-      onSuccess()
-
-      logger.info('Changes saved successfully')
-    } catch (err) {
-      logger.error('Failed to save changes:', err)
-      setError(err instanceof Error ? err.message : 'Failed to save changes')
-    } finally {
-      setIsSaving(false)
-    }
-  }, [newRows, pendingChanges, columns, tableId, workspaceId, onSuccess])
-
-  const discardChanges = useCallback(() => {
-    setNewRows([])
-    setPendingChanges(new Map())
-    setError(null)
-  }, [])
-
-  return {
-    newRows,
-    pendingChanges,
-    addNewRow,
-    updateNewRowCell,
-    updateExistingRowCell,
-    saveChanges,
-    discardChanges,
-    hasPendingChanges,
-    isSaving,
-    error,
-  }
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-row-selection.ts

@@ -1,56 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import type { TableRow } from '@/lib/table'
-
-interface UseRowSelectionReturn {
-  selectedRows: Set<string>
-  handleSelectAll: () => void
-  handleSelectRow: (rowId: string) => void
-  clearSelection: () => void
-}
-
-export function useRowSelection(rows: TableRow[]): UseRowSelectionReturn {
-  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set())
-
-  useEffect(() => {
-    setSelectedRows((prev) => {
-      if (prev.size === 0) return prev
-
-      const currentRowIds = new Set(rows.map((r) => r.id))
-      const filtered = new Set([...prev].filter((id) => currentRowIds.has(id)))
-
-      // Only update state if something was actually filtered out
-      return filtered.size !== prev.size ? filtered : prev
-    })
-  }, [rows])
-
-  const handleSelectAll = useCallback(() => {
-    if (selectedRows.size === rows.length) {
-      setSelectedRows(new Set())
-    } else {
-      setSelectedRows(new Set(rows.map((r) => r.id)))
-    }
-  }, [rows, selectedRows.size])
-
-  const handleSelectRow = useCallback((rowId: string) => {
-    setSelectedRows((prev) => {
-      const newSet = new Set(prev)
-      if (newSet.has(rowId)) {
-        newSet.delete(rowId)
-      } else {
-        newSet.add(rowId)
-      }
-      return newSet
-    })
-  }, [])
-
-  const clearSelection = useCallback(() => {
-    setSelectedRows(new Set())
-  }, [])
-
-  return {
-    selectedRows,
-    handleSelectAll,
-    handleSelectRow,
-    clearSelection,
-  }
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-table-data.ts

@@ -1,86 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import type { TableDefinition, TableRow } from '@/lib/table'
-import { ROWS_PER_PAGE } from '../lib/constants'
-import type { QueryOptions } from '../lib/types'
-
-interface UseTableDataParams {
-  workspaceId: string
-  tableId: string
-  queryOptions: QueryOptions
-  currentPage: number
-}
-
-interface UseTableDataReturn {
-  tableData: TableDefinition | undefined
-  isLoadingTable: boolean
-  rows: TableRow[]
-  totalCount: number
-  totalPages: number
-  isLoadingRows: boolean
-  refetchRows: () => void
-}
-
-export function useTableData({
-  workspaceId,
-  tableId,
-  queryOptions,
-  currentPage,
-}: UseTableDataParams): UseTableDataReturn {
-  const { data: tableData, isLoading: isLoadingTable } = useQuery({
-    queryKey: ['table', tableId],
-    queryFn: async () => {
-      const res = await fetch(`/api/table/${tableId}?workspaceId=${workspaceId}`)
-      if (!res.ok) throw new Error('Failed to fetch table')
-      const json: { data?: { table: TableDefinition }; table?: TableDefinition } = await res.json()
-      const data = json.data || json
-      return (data as { table: TableDefinition }).table
-    },
-  })
-
-  const {
-    data: rowsData,
-    isLoading: isLoadingRows,
-    refetch: refetchRows,
-  } = useQuery({
-    queryKey: ['table-rows', tableId, queryOptions, currentPage],
-    queryFn: async () => {
-      const searchParams = new URLSearchParams({
-        workspaceId,
-        limit: String(ROWS_PER_PAGE),
-        offset: String(currentPage * ROWS_PER_PAGE),
-      })
-
-      if (queryOptions.filter) {
-        searchParams.set('filter', JSON.stringify(queryOptions.filter))
-      }
-
-      if (queryOptions.sort) {
-        searchParams.set('sort', JSON.stringify(queryOptions.sort))
-      }
-
-      const res = await fetch(`/api/table/${tableId}/rows?${searchParams}`)
-      if (!res.ok) throw new Error('Failed to fetch rows')
-      const json: {
-        data?: { rows: TableRow[]; totalCount: number }
-        rows?: TableRow[]
-        totalCount?: number
-      } = await res.json()
-      return json.data || json
-    },
-    enabled: !!tableData,
-  })
-
-  const rows = (rowsData?.rows || []) as TableRow[]
-  const totalCount = rowsData?.totalCount || 0
-  const totalPages = Math.ceil(totalCount / ROWS_PER_PAGE)
-
-  return {
-    tableData,
-    isLoadingTable,
-    rows,
-    totalCount,
-    totalPages,
-    isLoadingRows,
-    refetchRows,
-  }
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/lib/constants.ts

@@ -1,2 +0,0 @@
-export const ROWS_PER_PAGE = 100
-export const STRING_TRUNCATE_LENGTH = 50

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/lib/index.ts

@@ -1,3 +0,0 @@
-export * from './constants'
-export * from './types'
-export * from './utils'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/lib/types.ts

@@ -1,27 +0,0 @@
-import type { Filter, Sort, TableRow } from '@/lib/table'
-
-/**
- * Query options for filtering and sorting table data
- */
-export interface QueryOptions {
-  filter: Filter | null
-  sort: Sort | null
-}
-
-/**
- * Data for viewing a cell's full content in a modal
- */
-export interface CellViewerData {
-  columnName: string
-  value: unknown
-  type: 'json' | 'text' | 'date' | 'boolean' | 'number'
-}
-
-/**
- * State for the row context menu (right-click)
- */
-export interface ContextMenuState {
-  isOpen: boolean
-  position: { x: number; y: number }
-  row: TableRow | null
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/lib/utils.ts

@@ -1,21 +0,0 @@
-type BadgeVariant = 'green' | 'blue' | 'purple' | 'orange' | 'teal' | 'gray'
-
-/**
- * Returns the appropriate badge color variant for a column type
- */
-export function getTypeBadgeVariant(type: string): BadgeVariant {
-  switch (type) {
-    case 'string':
-      return 'green'
-    case 'number':
-      return 'blue'
-    case 'boolean':
-      return 'purple'
-    case 'json':
-      return 'orange'
-    case 'date':
-      return 'teal'
-    default:
-      return 'gray'
-  }
-}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/page.tsx

@@ -1,5 +0,0 @@
-import { TableViewer } from './components'
-
-export default function TablePage() {
-  return <TableViewer />
-}

apps/sim/app/workspace/[workspaceId]/tables/components/constants.ts

@@ -1,14 +0,0 @@
-export type SortOption = 'name' | 'createdAt' | 'updatedAt' | 'rowCount' | 'columnCount'
-export type SortOrder = 'asc' | 'desc'
-
-export const SORT_OPTIONS = [
-  { value: 'updatedAt-desc', label: 'Last Updated' },
-  { value: 'createdAt-desc', label: 'Newest First' },
-  { value: 'createdAt-asc', label: 'Oldest First' },
-  { value: 'name-asc', label: 'Name (A-Z)' },
-  { value: 'name-desc', label: 'Name (Z-A)' },
-  { value: 'rowCount-desc', label: 'Most Rows' },
-  { value: 'rowCount-asc', label: 'Least Rows' },
-  { value: 'columnCount-desc', label: 'Most Columns' },
-  { value: 'columnCount-asc', label: 'Least Columns' },
-] as const

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

@@ -1,349 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { Plus } from 'lucide-react'
-import { nanoid } from 'nanoid'
-import { useParams } from 'next/navigation'
-import {
-  Button,
-  Checkbox,
-  Combobox,
-  Input,
-  Label,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Textarea,
-  Tooltip,
-} from '@/components/emcn'
-import { Trash } from '@/components/emcn/icons/trash'
-import type { ColumnDefinition } from '@/lib/table'
-import { useCreateTable } from '@/hooks/queries/use-tables'
-
-const logger = createLogger('CreateModal')
-
-interface CreateModalProps {
-  isOpen: boolean
-  onClose: () => void
-}
-
-const COLUMN_TYPE_OPTIONS: Array<{ value: ColumnDefinition['type']; label: string }> = [
-  { value: 'string', label: 'String' },
-  { value: 'number', label: 'Number' },
-  { value: 'boolean', label: 'Boolean' },
-  { value: 'date', label: 'Date' },
-  { value: 'json', label: 'JSON' },
-]
-
-interface ColumnWithId extends ColumnDefinition {
-  id: string
-}
-
-function createEmptyColumn(): ColumnWithId {
-  return { id: nanoid(), name: '', type: 'string', required: true, unique: false }
-}
-
-export function CreateModal({ isOpen, onClose }: CreateModalProps) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-
-  const [tableName, setTableName] = useState('')
-  const [description, setDescription] = useState('')
-  const [columns, setColumns] = useState<ColumnWithId[]>([createEmptyColumn()])
-  const [error, setError] = useState<string | null>(null)
-
-  const createTable = useCreateTable(workspaceId)
-
-  // Form validation
-  const validColumns = useMemo(() => columns.filter((col) => col.name.trim()), [columns])
-  const duplicateColumnNames = useMemo(() => {
-    const names = validColumns.map((col) => col.name.toLowerCase())
-    const seen = new Set<string>()
-    const duplicates = new Set<string>()
-    names.forEach((name) => {
-      if (seen.has(name)) {
-        duplicates.add(name)
-      }
-      seen.add(name)
-    })
-    return duplicates
-  }, [validColumns])
-
-  const isFormValid = useMemo(() => {
-    const hasTableName = tableName.trim().length > 0
-    const hasAtLeastOneColumn = validColumns.length > 0
-    const hasNoDuplicates = duplicateColumnNames.size === 0
-    return hasTableName && hasAtLeastOneColumn && hasNoDuplicates
-  }, [tableName, validColumns.length, duplicateColumnNames.size])
-
-  const handleAddColumn = () => {
-    setColumns([...columns, createEmptyColumn()])
-  }
-
-  const handleRemoveColumn = (columnId: string) => {
-    if (columns.length > 1) {
-      setColumns(columns.filter((col) => col.id !== columnId))
-    }
-  }
-
-  const handleColumnChange = (
-    columnId: string,
-    field: keyof ColumnDefinition,
-    value: string | boolean
-  ) => {
-    setColumns(columns.map((col) => (col.id === columnId ? { ...col, [field]: value } : col)))
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
-
-    if (!tableName.trim()) {
-      setError('Table name is required')
-      return
-    }
-
-    // Validate column names
-    const validColumns = columns.filter((col) => col.name.trim())
-    if (validColumns.length === 0) {
-      setError('At least one column is required')
-      return
-    }
-
-    // Check for duplicate column names
-    const columnNames = validColumns.map((col) => col.name.toLowerCase())
-    const uniqueNames = new Set(columnNames)
-    if (uniqueNames.size !== columnNames.length) {
-      setError('Duplicate column names found')
-      return
-    }
-
-    // Strip internal IDs before sending to API
-    const columnsForApi = validColumns.map(({ id: _id, ...col }) => col)
-
-    try {
-      await createTable.mutateAsync({
-        name: tableName,
-        description: description || undefined,
-        schema: {
-          columns: columnsForApi,
-        },
-      })
-
-      // Reset form
-      resetForm()
-      onClose()
-    } catch (err) {
-      logger.error('Failed to create table:', err)
-      setError(err instanceof Error ? err.message : 'Failed to create table')
-    }
-  }
-
-  const resetForm = () => {
-    setTableName('')
-    setDescription('')
-    setColumns([createEmptyColumn()])
-    setError(null)
-  }
-
-  const handleClose = () => {
-    resetForm()
-    onClose()
-  }
-
-  return (
-    <Modal open={isOpen} onOpenChange={handleClose}>
-      <ModalContent size='lg'>
-        <ModalHeader>Create New Table</ModalHeader>
-        <ModalBody className='max-h-[70vh] overflow-y-auto'>
-          <form onSubmit={handleSubmit} className='space-y-[12px]'>
-            {error && (
-              <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-                {error}
-              </div>
-            )}
-
-            {/* Table Name */}
-            <div>
-              <Label
-                htmlFor='tableName'
-                className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
-              >
-                Table Name
-              </Label>
-              <Input
-                id='tableName'
-                value={tableName}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTableName(e.target.value)}
-                placeholder='e.g., customer_orders'
-                className='h-9'
-              />
-            </div>
-
-            {/* Description */}
-            <div>
-              <Label
-                htmlFor='description'
-                className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
-              >
-                Description
-              </Label>
-              <Textarea
-                id='description'
-                value={description}
-                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                  setDescription(e.target.value)
-                }
-                placeholder='Optional description for this table'
-                rows={2}
-                className='resize-none'
-              />
-            </div>
-
-            {/* Columns */}
-            <div>
-              <div className='mb-[6.5px] flex items-center justify-between pl-[2px]'>
-                <Label className='font-medium text-[13px] text-[var(--text-primary)]'>
-                  Columns
-                </Label>
-                <Button type='button' size='sm' variant='default' onClick={handleAddColumn}>
-                  <Plus className='mr-1 h-3.5 w-3.5' />
-                  Add
-                </Button>
-              </div>
-
-              {/* Column Headers */}
-              <div className='mb-2 flex items-center gap-[10px] text-[11px] text-[var(--text-secondary)]'>
-                <div className='flex-1 pl-3'>Name</div>
-                <div className='w-[110px] pl-3'>Type</div>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <div className='w-[70px] cursor-help text-center'>Required</div>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content>Field must have a value</Tooltip.Content>
-                </Tooltip.Root>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <div className='w-[70px] cursor-help text-center'>Unique</div>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content>No duplicate values allowed</Tooltip.Content>
-                </Tooltip.Root>
-                <div className='w-9' />
-              </div>
-
-              {/* Column Rows */}
-              <div className='flex flex-col gap-2'>
-                {columns.map((column) => (
-                  <ColumnRow
-                    key={column.id}
-                    column={column}
-                    isRemovable={columns.length > 1}
-                    isDuplicate={duplicateColumnNames.has(column.name.toLowerCase())}
-                    onChange={handleColumnChange}
-                    onRemove={handleRemoveColumn}
-                  />
-                ))}
-              </div>
-
-              <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
-                Mark columns as unique to prevent duplicate values (e.g., id, email)
-              </p>
-            </div>
-          </form>
-        </ModalBody>
-        <ModalFooter>
-          <Button variant='default' onClick={handleClose} disabled={createTable.isPending}>
-            Cancel
-          </Button>
-          <Button
-            variant='tertiary'
-            onClick={handleSubmit}
-            disabled={createTable.isPending || !isFormValid}
-          >
-            {createTable.isPending ? 'Creating...' : 'Create'}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}
-
-interface ColumnRowProps {
-  column: ColumnWithId
-  isRemovable: boolean
-  isDuplicate: boolean
-  onChange: (columnId: string, field: keyof ColumnDefinition, value: string | boolean) => void
-  onRemove: (columnId: string) => void
-}
-
-function ColumnRow({ column, isRemovable, isDuplicate, onChange, onRemove }: ColumnRowProps) {
-  return (
-    <div className='flex flex-col gap-1'>
-      <div className='flex items-center gap-[10px]'>
-        {/* Column Name */}
-        <div className='flex-1'>
-          <Input
-            value={column.name}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange(column.id, 'name', e.target.value)
-            }
-            placeholder='column_name'
-            className={`h-9 ${isDuplicate ? 'border-destructive focus-visible:ring-destructive' : ''}`}
-          />
-        </div>
-
-        {/* Column Type */}
-        <div className='w-[110px]'>
-          <Combobox
-            options={COLUMN_TYPE_OPTIONS}
-            value={column.type}
-            selectedValue={column.type}
-            onChange={(value) => onChange(column.id, 'type', value as ColumnDefinition['type'])}
-            placeholder='Type'
-            editable={false}
-            filterOptions={false}
-            className='h-9'
-          />
-        </div>
-
-        {/* Required Checkbox */}
-        <div className='flex w-[70px] items-center justify-center'>
-          <Checkbox
-            checked={column.required}
-            onCheckedChange={(checked) => onChange(column.id, 'required', checked === true)}
-          />
-        </div>
-
-        {/* Unique Checkbox */}
-        <div className='flex w-[70px] items-center justify-center'>
-          <Checkbox
-            checked={column.unique}
-            onCheckedChange={(checked) => onChange(column.id, 'unique', checked === true)}
-          />
-        </div>
-
-        {/* Delete Button */}
-        <div className='w-9'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                type='button'
-                variant='ghost'
-                onClick={() => onRemove(column.id)}
-                disabled={!isRemovable}
-                className='h-9 w-9 p-0'
-              >
-                <Trash />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Remove column</Tooltip.Content>
-          </Tooltip.Root>
-        </div>
-      </div>
-      {isDuplicate && <p className='mt-1 pl-1 text-destructive text-sm'>Duplicate column name</p>}
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/empty-state.tsx

@@ -1,20 +0,0 @@
-interface EmptyStateProps {
-  hasSearchQuery: boolean
-}
-
-export function EmptyState({ hasSearchQuery }: EmptyStateProps) {
-  return (
-    <div className='col-span-full flex h-64 items-center justify-center rounded-lg border border-muted-foreground/25 bg-muted/20'>
-      <div className='text-center'>
-        <p className='font-medium text-[var(--text-secondary)] text-sm'>
-          {hasSearchQuery ? 'No tables found' : 'No tables yet'}
-        </p>
-        <p className='mt-1 text-[var(--text-muted)] text-xs'>
-          {hasSearchQuery
-            ? 'Try adjusting your search query'
-            : 'Create your first table to store structured data for your workflows'}
-        </p>
-      </div>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/error-state.tsx

@@ -1,15 +0,0 @@
-interface ErrorStateProps {
-  error: unknown
-}
-
-export function ErrorState({ error }: ErrorStateProps) {
-  return (
-    <div className='col-span-full flex h-64 items-center justify-center'>
-      <div className='text-[var(--text-error)]'>
-        <span className='text-[13px]'>
-          Error: {error instanceof Error ? error.message : 'Failed to load tables'}
-        </span>
-      </div>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/index.ts

@@ -1,8 +0,0 @@
-export * from './create-modal'
-export * from './empty-state'
-export * from './error-state'
-export * from './loading-state'
-export * from './table-card'
-export * from './table-card-context-menu'
-export * from './table-list-context-menu'
-export * from './tables-view'

apps/sim/app/workspace/[workspaceId]/tables/components/loading-state.tsx

@@ -1,31 +0,0 @@
-export function LoadingState() {
-  return (
-    <>
-      {Array.from({ length: 8 }).map((_, i) => (
-        <div
-          key={i}
-          className='flex h-full flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] dark:bg-[var(--surface-4)]'
-        >
-          <div className='flex items-center justify-between gap-[8px]'>
-            <div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-            <div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-          </div>
-          <div className='flex flex-1 flex-col gap-[8px]'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-[12px]'>
-                <div className='h-[15px] w-[50px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-                <div className='h-[15px] w-[50px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-              </div>
-              <div className='h-[15px] w-[60px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-            </div>
-            <div className='h-0 w-full border-[var(--divider)] border-t' />
-            <div className='flex h-[36px] flex-col gap-[6px]'>
-              <div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-              <div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-            </div>
-          </div>
-        </div>
-      ))}
-    </>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/table-card-context-menu.tsx

@@ -1,152 +0,0 @@
-'use client'
-
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDivider,
-  PopoverItem,
-} from '@/components/emcn'
-
-interface TableCardContextMenuProps {
-  /**
-   * Whether the context menu is open
-   */
-  isOpen: boolean
-  /**
-   * Position of the context menu
-   */
-  position: { x: number; y: number }
-  /**
-   * Ref for the menu element
-   */
-  menuRef: React.RefObject<HTMLDivElement | null>
-  /**
-   * Callback when menu should close
-   */
-  onClose: () => void
-  /**
-   * Callback when open in new tab is clicked
-   */
-  onOpenInNewTab?: () => void
-  /**
-   * Callback when view schema is clicked
-   */
-  onViewSchema?: () => void
-  /**
-   * Callback when copy ID is clicked
-   */
-  onCopyId?: () => void
-  /**
-   * Callback when delete is clicked
-   */
-  onDelete?: () => void
-  /**
-   * Whether to show the open in new tab option
-   * @default true
-   */
-  showOpenInNewTab?: boolean
-  /**
-   * Whether to show the view schema option
-   * @default true
-   */
-  showViewSchema?: boolean
-  /**
-   * Whether to show the delete option
-   * @default true
-   */
-  showDelete?: boolean
-  /**
-   * Whether the delete option is disabled
-   * @default false
-   */
-  disableDelete?: boolean
-}
-
-/**
- * Context menu component for table cards.
- * Displays open in new tab, view schema, copy ID, and delete options in a popover at the right-click position.
- */
-export function TableCardContextMenu({
-  isOpen,
-  position,
-  menuRef,
-  onClose,
-  onOpenInNewTab,
-  onViewSchema,
-  onCopyId,
-  onDelete,
-  showOpenInNewTab = true,
-  showViewSchema = true,
-  showDelete = true,
-  disableDelete = false,
-}: TableCardContextMenuProps) {
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-    >
-      <PopoverAnchor
-        style={{
-          position: 'fixed',
-          left: `${position.x}px`,
-          top: `${position.y}px`,
-          width: '1px',
-          height: '1px',
-        }}
-      />
-      <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
-        {/* Navigation */}
-        {showOpenInNewTab && onOpenInNewTab && (
-          <PopoverItem
-            onClick={() => {
-              onOpenInNewTab()
-              onClose()
-            }}
-          >
-            Open in new tab
-          </PopoverItem>
-        )}
-        {showOpenInNewTab && onOpenInNewTab && <PopoverDivider />}
-
-        {/* View and copy actions */}
-        {showViewSchema && onViewSchema && (
-          <PopoverItem
-            onClick={() => {
-              onViewSchema()
-              onClose()
-            }}
-          >
-            View schema
-          </PopoverItem>
-        )}
-        {onCopyId && (
-          <PopoverItem
-            onClick={() => {
-              onCopyId()
-              onClose()
-            }}
-          >
-            Copy ID
-          </PopoverItem>
-        )}
-        {((showViewSchema && onViewSchema) || onCopyId) && <PopoverDivider />}
-
-        {/* Destructive action */}
-        {showDelete && onDelete && (
-          <PopoverItem
-            disabled={disableDelete}
-            onClick={() => {
-              onDelete()
-              onClose()
-            }}
-          >
-            Delete
-          </PopoverItem>
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/table-card.tsx

@@ -1,233 +0,0 @@
-'use client'
-
-import { useCallback, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { Columns, Rows3 } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import {
-  Badge,
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Tooltip,
-} from '@/components/emcn'
-import type { TableDefinition } from '@/lib/table'
-import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { SchemaModal } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/schema-modal'
-import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { useDeleteTable } from '@/hooks/queries/use-tables'
-import { formatAbsoluteDate, formatRelativeTime } from '../lib/utils'
-import { TableCardContextMenu } from './table-card-context-menu'
-
-const logger = createLogger('TableCard')
-
-interface TableCardProps {
-  table: TableDefinition
-  workspaceId: string
-}
-
-export function TableCard({ table, workspaceId }: TableCardProps) {
-  const router = useRouter()
-  const userPermissions = useUserPermissionsContext()
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
-  const [isSchemaModalOpen, setIsSchemaModalOpen] = useState(false)
-  const menuButtonRef = useRef<HTMLButtonElement>(null)
-
-  const {
-    isOpen: isContextMenuOpen,
-    position: contextMenuPosition,
-    menuRef,
-    handleContextMenu,
-    closeMenu: closeContextMenu,
-  } = useContextMenu()
-
-  const handleMenuButtonClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (menuButtonRef.current) {
-        const rect = menuButtonRef.current.getBoundingClientRect()
-        const syntheticEvent = {
-          preventDefault: () => {},
-          stopPropagation: () => {},
-          clientX: rect.right,
-          clientY: rect.bottom,
-        } as React.MouseEvent
-        handleContextMenu(syntheticEvent)
-      }
-    },
-    [handleContextMenu]
-  )
-
-  const deleteTable = useDeleteTable(workspaceId)
-
-  const handleDelete = async () => {
-    try {
-      await deleteTable.mutateAsync(table.id)
-      setIsDeleteDialogOpen(false)
-    } catch (error) {
-      logger.error('Failed to delete table:', error)
-    }
-  }
-
-  const navigateToTable = () => {
-    router.push(`/workspace/${workspaceId}/tables/${table.id}`)
-  }
-
-  const href = `/workspace/${workspaceId}/tables/${table.id}`
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isContextMenuOpen) {
-        e.preventDefault()
-        return
-      }
-      navigateToTable()
-    },
-    [isContextMenuOpen, navigateToTable]
-  )
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        navigateToTable()
-      }
-    },
-    [navigateToTable]
-  )
-
-  const handleOpenInNewTab = useCallback(() => {
-    window.open(href, '_blank')
-  }, [href])
-
-  const handleViewSchema = useCallback(() => {
-    setIsSchemaModalOpen(true)
-  }, [])
-
-  const handleCopyId = useCallback(() => {
-    navigator.clipboard.writeText(table.id)
-  }, [table.id])
-
-  const handleDeleteFromContextMenu = useCallback(() => {
-    setIsDeleteDialogOpen(true)
-  }, [])
-
-  const columnCount = table.schema.columns.length
-  const shortId = `tb-${table.id.slice(0, 8)}`
-
-  return (
-    <>
-      <div
-        role='button'
-        tabIndex={0}
-        data-table-card
-        className='h-full cursor-pointer'
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onContextMenu={handleContextMenu}
-      >
-        <div className='group flex h-full flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
-          <div className='flex items-center justify-between gap-[8px]'>
-            <h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
-              {table.name}
-            </h3>
-            <div className='flex items-center gap-[4px]'>
-              <Badge className='flex-shrink-0 rounded-[4px] text-[12px]'>{shortId}</Badge>
-              <Button
-                ref={menuButtonRef}
-                variant='ghost'
-                size='sm'
-                className='h-[20px] w-[20px] flex-shrink-0 p-0 text-[var(--text-tertiary)]'
-                onClick={handleMenuButtonClick}
-              >
-                <svg className='h-[14px] w-[14px]' viewBox='0 0 16 16' fill='currentColor'>
-                  <circle cx='3' cy='8' r='1.5' />
-                  <circle cx='8' cy='8' r='1.5' />
-                  <circle cx='13' cy='8' r='1.5' />
-                </svg>
-              </Button>
-            </div>
-          </div>
-
-          <div className='flex flex-1 flex-col gap-[8px]'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-[12px] text-[12px] text-[var(--text-tertiary)]'>
-                <span className='flex items-center gap-[4px]'>
-                  <Columns className='h-[12px] w-[12px]' />
-                  {columnCount} {columnCount === 1 ? 'col' : 'cols'}
-                </span>
-                <span className='flex items-center gap-[4px]'>
-                  <Rows3 className='h-[12px] w-[12px]' />
-                  {table.rowCount} {table.rowCount === 1 ? 'row' : 'rows'}
-                </span>
-              </div>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <span className='text-[12px] text-[var(--text-tertiary)]'>
-                    last updated: {formatRelativeTime(table.updatedAt)}
-                  </span>
-                </Tooltip.Trigger>
-                <Tooltip.Content>{formatAbsoluteDate(table.updatedAt)}</Tooltip.Content>
-              </Tooltip.Root>
-            </div>
-
-            <div className='h-0 w-full border-[var(--divider)] border-t' />
-
-            <p className='line-clamp-2 h-[36px] text-[12px] text-[var(--text-tertiary)] leading-[18px]'>
-              {table.description || 'No description'}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Delete Confirmation Modal */}
-      <Modal open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <ModalContent size='sm'>
-          <ModalHeader>Delete Table</ModalHeader>
-          <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
-              Are you sure you want to delete{' '}
-              <span className='font-medium text-[var(--text-primary)]'>{table.name}</span>? This
-              will permanently delete all {table.rowCount} rows.{' '}
-              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              variant='default'
-              onClick={() => setIsDeleteDialogOpen(false)}
-              disabled={deleteTable.isPending}
-            >
-              Cancel
-            </Button>
-            <Button variant='destructive' onClick={handleDelete} disabled={deleteTable.isPending}>
-              {deleteTable.isPending ? 'Deleting...' : 'Delete'}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-
-      {/* Schema Viewer Modal */}
-      <SchemaModal
-        isOpen={isSchemaModalOpen}
-        onClose={() => setIsSchemaModalOpen(false)}
-        columns={table.schema.columns}
-      />
-
-      <TableCardContextMenu
-        isOpen={isContextMenuOpen}
-        position={contextMenuPosition}
-        menuRef={menuRef}
-        onClose={closeContextMenu}
-        onOpenInNewTab={handleOpenInNewTab}
-        onViewSchema={handleViewSchema}
-        onCopyId={handleCopyId}
-        onDelete={handleDeleteFromContextMenu}
-        disableDelete={userPermissions.canEdit !== true}
-      />
-    </>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/table-list-context-menu.tsx

@@ -1,76 +0,0 @@
-'use client'
-
-import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
-
-interface TableListContextMenuProps {
-  /**
-   * Whether the context menu is open
-   */
-  isOpen: boolean
-  /**
-   * Position of the context menu
-   */
-  position: { x: number; y: number }
-  /**
-   * Ref for the menu element
-   */
-  menuRef: React.RefObject<HTMLDivElement | null>
-  /**
-   * Callback when menu should close
-   */
-  onClose: () => void
-  /**
-   * Callback when add table is clicked
-   */
-  onAddTable?: () => void
-  /**
-   * Whether the add option is disabled
-   * @default false
-   */
-  disableAdd?: boolean
-}
-
-/**
- * Context menu component for the tables list page.
- * Displays "Add table" option when right-clicking on empty space.
- */
-export function TableListContextMenu({
-  isOpen,
-  position,
-  menuRef,
-  onClose,
-  onAddTable,
-  disableAdd = false,
-}: TableListContextMenuProps) {
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-    >
-      <PopoverAnchor
-        style={{
-          position: 'fixed',
-          left: `${position.x}px`,
-          top: `${position.y}px`,
-          width: '1px',
-          height: '1px',
-        }}
-      />
-      <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
-        {onAddTable && (
-          <PopoverItem
-            disabled={disableAdd}
-            onClick={() => {
-              onAddTable()
-              onClose()
-            }}
-          >
-            Add table
-          </PopoverItem>
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/components/tables-view.tsx

@@ -1,197 +0,0 @@
-'use client'
-
-import { useCallback, useMemo, useState } from 'react'
-import { ChevronDown, Database, Search } from 'lucide-react'
-import { useParams } from 'next/navigation'
-import {
-  Button,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-  Tooltip,
-} from '@/components/emcn'
-import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { useTablesList } from '@/hooks/queries/use-tables'
-import { useDebounce } from '@/hooks/use-debounce'
-import { filterTables, sortTables } from '../lib/utils'
-import { SORT_OPTIONS, type SortOption, type SortOrder } from './constants'
-import { CreateModal } from './create-modal'
-import { EmptyState } from './empty-state'
-import { ErrorState } from './error-state'
-import { LoadingState } from './loading-state'
-import { TableCard } from './table-card'
-import { TableListContextMenu } from './table-list-context-menu'
-
-export function TablesView() {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-  const userPermissions = useUserPermissionsContext()
-
-  const { data: tables = [], isLoading, error } = useTablesList(workspaceId)
-
-  const [searchQuery, setSearchQuery] = useState('')
-  const debouncedSearchQuery = useDebounce(searchQuery, 300)
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
-  const [isSortPopoverOpen, setIsSortPopoverOpen] = useState(false)
-  const [sortBy, setSortBy] = useState<SortOption>('updatedAt')
-  const [sortOrder, setSortOrder] = useState<SortOrder>('desc')
-
-  const {
-    isOpen: isListContextMenuOpen,
-    position: listContextMenuPosition,
-    menuRef: listMenuRef,
-    handleContextMenu: handleListContextMenu,
-    closeMenu: closeListContextMenu,
-  } = useContextMenu()
-
-  /**
-   * Handle context menu on the content area - only show menu when clicking on empty space
-   */
-  const handleContentContextMenu = useCallback(
-    (e: React.MouseEvent) => {
-      const target = e.target as HTMLElement
-      const isOnCard = target.closest('[data-table-card]')
-      const isOnInteractive = target.closest('button, input, a, [role="button"]')
-
-      if (!isOnCard && !isOnInteractive) {
-        handleListContextMenu(e)
-      }
-    },
-    [handleListContextMenu]
-  )
-
-  /**
-   * Handle add table from context menu
-   */
-  const handleAddTable = useCallback(() => {
-    setIsCreateModalOpen(true)
-  }, [])
-
-  const currentSortValue = `${sortBy}-${sortOrder}`
-  const currentSortLabel =
-    SORT_OPTIONS.find((opt) => opt.value === currentSortValue)?.label || 'Last Updated'
-
-  /**
-   * Handles sort option change from dropdown
-   */
-  const handleSortChange = (value: string) => {
-    const [field, order] = value.split('-') as [SortOption, SortOrder]
-    setSortBy(field)
-    setSortOrder(order)
-    setIsSortPopoverOpen(false)
-  }
-
-  /**
-   * Filter and sort tables based on search query and sort options
-   */
-  const filteredAndSortedTables = useMemo(() => {
-    const filtered = filterTables(tables, debouncedSearchQuery)
-    return sortTables(filtered, sortBy, sortOrder)
-  }, [tables, debouncedSearchQuery, sortBy, sortOrder])
-
-  return (
-    <>
-      <div className='flex h-full flex-1 flex-col'>
-        <div className='flex flex-1 overflow-hidden'>
-          <div
-            className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[28px] pb-[24px] dark:bg-[var(--bg)]'
-            onContextMenu={handleContentContextMenu}
-          >
-            <div>
-              <div className='flex items-start gap-[12px]'>
-                <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#64748B] bg-[#F1F5F9] dark:border-[#334155] dark:bg-[#0F172A]'>
-                  <Database className='h-[14px] w-[14px] text-[#64748B] dark:text-[#CBD5E1]' />
-                </div>
-                <h1 className='font-medium text-[18px]'>Tables</h1>
-              </div>
-              <p className='mt-[10px] text-[14px] text-[var(--text-tertiary)]'>
-                Create and manage data tables for your workflows.
-              </p>
-            </div>
-
-            <div className='mt-[14px] flex items-center justify-between'>
-              <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
-                <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
-                <Input
-                  placeholder='Search'
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
-                />
-              </div>
-              <div className='flex items-center gap-[8px]'>
-                {tables.length > 0 && (
-                  <Popover open={isSortPopoverOpen} onOpenChange={setIsSortPopoverOpen}>
-                    <PopoverTrigger asChild>
-                      <Button variant='default' className='h-[32px] rounded-[6px]'>
-                        {currentSortLabel}
-                        <ChevronDown className='ml-2 h-4 w-4 text-muted-foreground' />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent align='end' side='bottom' sideOffset={4}>
-                      <div className='flex flex-col gap-[2px]'>
-                        {SORT_OPTIONS.map((option) => (
-                          <PopoverItem
-                            key={option.value}
-                            active={currentSortValue === option.value}
-                            onClick={() => handleSortChange(option.value)}
-                          >
-                            {option.label}
-                          </PopoverItem>
-                        ))}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
-
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      onClick={() => setIsCreateModalOpen(true)}
-                      disabled={userPermissions.canEdit !== true}
-                      variant='tertiary'
-                      className='h-[32px] rounded-[6px]'
-                    >
-                      Create
-                    </Button>
-                  </Tooltip.Trigger>
-                  {userPermissions.canEdit !== true && (
-                    <Tooltip.Content>Write permission required to create tables</Tooltip.Content>
-                  )}
-                </Tooltip.Root>
-              </div>
-            </div>
-
-            <div className='mt-[24px] grid grid-cols-1 gap-[20px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
-              {isLoading ? (
-                <LoadingState />
-              ) : filteredAndSortedTables.length === 0 ? (
-                <EmptyState hasSearchQuery={!!debouncedSearchQuery} />
-              ) : error ? (
-                <ErrorState error={error} />
-              ) : (
-                filteredAndSortedTables.map((table) => (
-                  <TableCard key={table.id} table={table} workspaceId={workspaceId} />
-                ))
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <CreateModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} />
-
-      <TableListContextMenu
-        isOpen={isListContextMenuOpen}
-        position={listContextMenuPosition}
-        menuRef={listMenuRef}
-        onClose={closeListContextMenu}
-        onAddTable={handleAddTable}
-        disableAdd={userPermissions.canEdit !== true}
-      />
-    </>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/layout.tsx

@@ -1,7 +0,0 @@
-export default function TablesLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
-      {children}
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/tables/lib/index.ts

@@ -1 +0,0 @@
-export * from './utils'

apps/sim/app/workspace/[workspaceId]/tables/lib/utils.ts

@@ -1,83 +0,0 @@
-import type { TableDefinition } from '@/lib/table'
-import type { SortOption, SortOrder } from '../components/constants'
-
-/**
- * Sort tables by the specified field and order
- */
-export function sortTables(
-  tables: TableDefinition[],
-  sortBy: SortOption,
-  sortOrder: SortOrder
-): TableDefinition[] {
-  return [...tables].sort((a, b) => {
-    let comparison = 0
-
-    switch (sortBy) {
-      case 'name':
-        comparison = a.name.localeCompare(b.name)
-        break
-      case 'createdAt':
-        comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
-        break
-      case 'updatedAt':
-        comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
-        break
-      case 'rowCount':
-        comparison = a.rowCount - b.rowCount
-        break
-      case 'columnCount':
-        comparison = a.schema.columns.length - b.schema.columns.length
-        break
-    }
-
-    return sortOrder === 'asc' ? comparison : -comparison
-  })
-}
-
-/**
- * Filter tables by search query
- */
-export function filterTables(tables: TableDefinition[], searchQuery: string): TableDefinition[] {
-  if (!searchQuery.trim()) {
-    return tables
-  }
-
-  const query = searchQuery.toLowerCase()
-  return tables.filter(
-    (table) =>
-      table.name.toLowerCase().includes(query) || table.description?.toLowerCase().includes(query)
-  )
-}
-
-/**
- * Formats a date as relative time (e.g., "5m ago", "2d ago")
- */
-export function formatRelativeTime(dateValue: string | Date): string {
-  const dateString = typeof dateValue === 'string' ? dateValue : dateValue.toISOString()
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) return 'just now'
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
-  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`
-  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 604800)}w ago`
-  if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)}mo ago`
-  return `${Math.floor(diffInSeconds / 31536000)}y ago`
-}
-
-/**
- * Formats a date as absolute date string (e.g., "Jan 15, 2024, 10:30 AM")
- */
-export function formatAbsoluteDate(dateValue: string | Date): string {
-  const dateString = typeof dateValue === 'string' ? dateValue : dateValue.toISOString()
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}

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

@@ -1,26 +0,0 @@
-import { redirect } from 'next/navigation'
-import { getSession } from '@/lib/auth'
-import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
-import { TablesView } from './components'
-
-interface TablesPageProps {
-  params: Promise<{
-    workspaceId: string
-  }>
-}
-
-export default async function TablesPage({ params }: TablesPageProps) {
-  const { workspaceId } = await params
-  const session = await getSession()
-
-  if (!session?.user?.id) {
-    redirect('/')
-  }
-
-  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
-  if (!hasPermission) {
-    redirect('/')
-  }
-
-  return <TablesView />
-}

apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx

@@ -213,7 +213,6 @@ function TemplateCardInner({
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
-            lightweight
             cursorStyle='pointer'
           />
         ) : (

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

@@ -212,10 +212,8 @@ export default function Templates({
             ) : filteredTemplates.length === 0 ? (
               <div className='col-span-full flex h-64 items-center justify-center rounded-lg border border-muted-foreground/25 bg-muted/20'>
                 <div className='text-center'>
-                  <p className='font-medium text-[var(--text-secondary)] text-sm'>
-                    {emptyState.title}
-                  </p>
-                  <p className='mt-1 text-[var(--text-muted)] text-xs'>{emptyState.description}</p>
+                  <p className='font-medium text-muted-foreground text-sm'>{emptyState.title}</p>
+                  <p className='mt-1 text-muted-foreground/70 text-xs'>{emptyState.description}</p>
                 </div>
               </div>
             ) : (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -128,7 +128,30 @@ export const ActionBar = memo(
           'dark:border-transparent dark:bg-[var(--surface-4)]'
         )}
       >
-        {!isNoteBlock && !isSubflowBlock && (
+        {!isNoteBlock && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!disabled) {
+                    collaborativeBatchToggleBlockEnabled([blockId])
+                  }
+                }}
+                className={ACTION_BUTTON_STYLES}
+                disabled={disabled}
+              >
+                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        )}
+
+        {isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -222,29 +245,6 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {isSubflowBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled) {
-                    collaborativeBatchToggleBlockEnabled([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled}
-              >
-                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx

@@ -78,6 +78,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       mode,
       setMode,
       isAborting,
+      maskCredentialValue,
     } = useCopilotStore()
 
     const messageCheckpoints = isUser ? allMessageCheckpoints[message.id] || [] : []
@@ -210,7 +211,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           const isLastTextBlock =
             index === message.contentBlocks!.length - 1 && block.type === 'text'
           const parsed = parseSpecialTags(block.content)
-          const cleanBlockContent = parsed.cleanContent.replace(/\n{3,}/g, '\n\n')
+          // Mask credential IDs in the displayed content
+          const cleanBlockContent = maskCredentialValue(
+            parsed.cleanContent.replace(/\n{3,}/g, '\n\n')
+          )
 
           if (!cleanBlockContent.trim()) return null
 
@@ -238,7 +242,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           return (
             <div key={blockKey} className='w-full'>
               <ThinkingBlock
-                content={block.content}
+                content={maskCredentialValue(block.content)}
                 isStreaming={isActivelyStreaming}
                 hasFollowingContent={hasFollowingContent}
                 hasSpecialTags={hasSpecialTags}
@@ -261,7 +265,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         }
         return null
       })
-    }, [message.contentBlocks, isActivelyStreaming, parsedTags, isLastMessage])
+    }, [message.contentBlocks, isActivelyStreaming, parsedTags, isLastMessage, maskCredentialValue])
 
     if (isUser) {
       return (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -782,6 +782,7 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
   const [isExpanded, setIsExpanded] = useState(true)
   const [duration, setDuration] = useState(0)
   const startTimeRef = useRef<number>(Date.now())
+  const maskCredentialValue = useCopilotStore((s) => s.maskCredentialValue)
   const wasStreamingRef = useRef(false)
 
   // Only show streaming animations for current message
@@ -816,14 +817,16 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
       currentText += parsed.cleanContent
     } else if (block.type === 'subagent_tool_call' && block.toolCall) {
       if (currentText.trim()) {
-        segments.push({ type: 'text', content: currentText })
+        // Mask any credential IDs in the accumulated text before displaying
+        segments.push({ type: 'text', content: maskCredentialValue(currentText) })
         currentText = ''
       }
       segments.push({ type: 'tool', block })
     }
   }
   if (currentText.trim()) {
-    segments.push({ type: 'text', content: currentText })
+    // Mask any credential IDs in the accumulated text before displaying
+    segments.push({ type: 'text', content: maskCredentialValue(currentText) })
   }
 
   const allParsed = parseSpecialTags(allRawText)
@@ -952,6 +955,7 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
   toolCall: CopilotToolCall
 }) {
   const blocks = useWorkflowStore((s) => s.blocks)
+  const maskCredentialValue = useCopilotStore((s) => s.maskCredentialValue)
 
   const cachedBlockInfoRef = useRef<Record<string, { name: string; type: string }>>({})
 
@@ -983,6 +987,7 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
     title: string
     value: any
     isPassword?: boolean
+    isCredential?: boolean
   }
 
   interface BlockChange {
@@ -1091,6 +1096,7 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
               title: subBlockConfig.title ?? subBlockConfig.id,
               value,
               isPassword: subBlockConfig.password === true,
+              isCredential: subBlockConfig.type === 'oauth-input',
             })
           }
         }
@@ -1172,8 +1178,15 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
         {subBlocksToShow && subBlocksToShow.length > 0 && (
           <div className='border-[var(--border-1)] border-t px-2.5 py-1.5'>
             {subBlocksToShow.map((sb) => {
-              // Mask password fields like the canvas does
-              const displayValue = sb.isPassword ? '•••' : getDisplayValue(sb.value)
+              // Mask password fields and credential IDs
+              let displayValue: string
+              if (sb.isPassword) {
+                displayValue = '•••'
+              } else {
+                // Get display value first, then mask any credential IDs that might be in it
+                const rawValue = getDisplayValue(sb.value)
+                displayValue = maskCredentialValue(rawValue)
+              }
               return (
                 <div key={sb.id} className='flex items-start gap-1.5 py-0.5 text-[11px]'>
                   <span
@@ -1412,10 +1425,13 @@ function RunSkipButtons({
     setIsProcessing(true)
     setButtonsHidden(true)
     try {
-      // Add to auto-allowed list first
+      // Add to auto-allowed list - this also executes all pending integration tools of this type
       await addAutoAllowedTool(toolCall.name)
-      // Then execute
-      await handleRun(toolCall, setToolCallState, onStateChange, editedParams)
+      // For client tools with interrupts (not integration tools), we still need to call handleRun
+      // since executeIntegrationTool only works for server-side tools
+      if (!isIntegrationTool(toolCall.name)) {
+        await handleRun(toolCall, setToolCallState, onStateChange, editedParams)
+      }
     } finally {
       setIsProcessing(false)
       actionInProgressRef.current = false
@@ -1438,10 +1454,10 @@ function RunSkipButtons({
 
   if (buttonsHidden) return null
 
-  // Hide "Always Allow" for integration tools (only show for client tools with interrupts)
-  const showAlwaysAllow = !isIntegrationTool(toolCall.name)
+  // Show "Always Allow" for all tools that require confirmation
+  const showAlwaysAllow = true
 
-  // Standardized buttons for all interrupt tools: Allow, (Always Allow for client tools only), Skip
+  // Standardized buttons for all interrupt tools: Allow, Always Allow, Skip
   return (
     <div className='mt-[10px] flex gap-[6px]'>
       <Button onClick={onRun} disabled={isProcessing} variant='tertiary'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/hooks/use-copilot-initialization.ts

@@ -105,10 +105,10 @@ export function useCopilotInitialization(props: UseCopilotInitializationProps) {
     isSendingMessage,
   ])
 
-  /** Load auto-allowed tools once on mount */
+  /** Load auto-allowed tools once on mount - runs immediately, independent of workflow */
   const hasLoadedAutoAllowedToolsRef = useRef(false)
   useEffect(() => {
-    if (hasMountedRef.current && !hasLoadedAutoAllowedToolsRef.current) {
+    if (!hasLoadedAutoAllowedToolsRef.current) {
       hasLoadedAutoAllowedToolsRef.current = true
       loadAutoAllowedTools().catch((err) => {
         logger.warn('[Copilot] Failed to load auto-allowed tools', err)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx

@@ -18,8 +18,8 @@ import {
 import { Skeleton } from '@/components/ui'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import {
-  BlockDetailsSidebar,
   getLeftmostBlockId,
+  PreviewEditor,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
@@ -337,7 +337,7 @@ export function GeneralDeploy({
                   />
                 </div>
                 {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (
-                  <BlockDetailsSidebar
+                  <PreviewEditor
                     block={workflowToShow.blocks[expandedSelectedBlockId]}
                     workflowVariables={workflowToShow.variables}
                     loops={workflowToShow.loops}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx

@@ -446,7 +446,6 @@ const OGCaptureContainer = forwardRef<HTMLDivElement>((_, ref) => {
         isPannable={false}
         defaultZoom={0.8}
         fitPadding={0.2}
-        lightweight
       />
     </div>
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx

@@ -246,7 +246,6 @@ export const Code = memo(function Code({
       case 'json-schema':
         return 'Describe the JSON schema to generate...'
       case 'json-object':
-      case 'table-schema':
         return 'Describe the JSON object to generate...'
       default:
         return 'Describe the JavaScript code to generate...'
@@ -271,14 +270,9 @@ export const Code = memo(function Code({
     return wandConfig
   }, [wandConfig, languageValue])
 
-  const [tableIdValue] = useSubBlockValue<string>(blockId, 'tableId')
-
   const wandHook = useWand({
     wandConfig: dynamicWandConfig || { enabled: false, prompt: '' },
     currentValue: code,
-    contextParams: {
-      tableId: typeof tableIdValue === 'string' ? tableIdValue : null,
-    },
     onStreamStart: () => handleStreamStartRef.current?.(),
     onStreamChunk: (chunk: string) => handleStreamChunkRef.current?.(chunk),
     onGeneratedContent: (content: string) => handleGeneratedContentRef.current?.(content),

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/empty-state.tsx

@@ -1,19 +0,0 @@
-import { Plus } from 'lucide-react'
-import { Button } from '@/components/emcn'
-
-interface EmptyStateProps {
-  onAdd: () => void
-  disabled: boolean
-  label: string
-}
-
-export function EmptyState({ onAdd, disabled, label }: EmptyStateProps) {
-  return (
-    <div className='flex items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed py-[16px]'>
-      <Button variant='ghost' size='sm' onClick={onAdd} disabled={disabled}>
-        <Plus className='mr-[4px] h-[12px] w-[12px]' />
-        {label}
-      </Button>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx

@@ -1,137 +0,0 @@
-import { X } from 'lucide-react'
-import { Button, Combobox, type ComboboxOption, Input } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import type { FilterRule } from '@/lib/table/query-builder/constants'
-import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
-import { SubBlockInputController } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller'
-import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
-
-interface FilterRuleRowProps {
-  blockId: string
-  subBlockId: string
-  rule: FilterRule
-  index: number
-  columns: ComboboxOption[]
-  comparisonOptions: ComboboxOption[]
-  logicalOptions: ComboboxOption[]
-  isReadOnly: boolean
-  isPreview: boolean
-  disabled: boolean
-  onRemove: (id: string) => void
-  onUpdate: (id: string, field: keyof FilterRule, value: string) => void
-}
-
-export function FilterRuleRow({
-  blockId,
-  subBlockId,
-  rule,
-  index,
-  columns,
-  comparisonOptions,
-  logicalOptions,
-  isReadOnly,
-  isPreview,
-  disabled,
-  onRemove,
-  onUpdate,
-}: FilterRuleRowProps) {
-  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
-
-  return (
-    <div className='flex items-center gap-[6px]'>
-      <Button
-        variant='ghost'
-        size='sm'
-        onClick={() => onRemove(rule.id)}
-        disabled={isReadOnly}
-        className='h-[24px] w-[24px] shrink-0 p-0 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
-      >
-        <X className='h-[12px] w-[12px]' />
-      </Button>
-
-      <div className='w-[80px] shrink-0'>
-        {index === 0 ? (
-          <Combobox
-            size='sm'
-            options={[{ value: 'where', label: 'where' }]}
-            value='where'
-            disabled
-          />
-        ) : (
-          <Combobox
-            size='sm'
-            options={logicalOptions}
-            value={rule.logicalOperator}
-            onChange={(v) => onUpdate(rule.id, 'logicalOperator', v as 'and' | 'or')}
-            disabled={isReadOnly}
-          />
-        )}
-      </div>
-
-      <div className='w-[100px] shrink-0'>
-        <Combobox
-          size='sm'
-          options={columns}
-          value={rule.column}
-          onChange={(v) => onUpdate(rule.id, 'column', v)}
-          placeholder='Column'
-          disabled={isReadOnly}
-        />
-      </div>
-
-      <div className='w-[110px] shrink-0'>
-        <Combobox
-          size='sm'
-          options={comparisonOptions}
-          value={rule.operator}
-          onChange={(v) => onUpdate(rule.id, 'operator', v)}
-          disabled={isReadOnly}
-        />
-      </div>
-
-      <div className='relative min-w-[80px] flex-1'>
-        <SubBlockInputController
-          blockId={blockId}
-          subBlockId={`${subBlockId}_filter_${rule.id}`}
-          config={{ id: `filter_value_${rule.id}`, type: 'short-input' }}
-          value={rule.value}
-          onChange={(newValue) => onUpdate(rule.id, 'value', newValue)}
-          isPreview={isPreview}
-          disabled={disabled}
-        >
-          {({ ref, value: ctrlValue, onChange, onKeyDown, onDrop, onDragOver }) => {
-            const formattedText = formatDisplayText(ctrlValue, {
-              accessiblePrefixes,
-              highlightAll: !accessiblePrefixes,
-            })
-
-            return (
-              <div className='relative'>
-                <Input
-                  ref={ref as React.RefObject<HTMLInputElement>}
-                  className='h-[28px] w-full overflow-auto text-[12px] text-transparent caret-foreground [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
-                  value={ctrlValue}
-                  onChange={onChange as (e: React.ChangeEvent<HTMLInputElement>) => void}
-                  onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLInputElement>) => void}
-                  onDrop={onDrop as (e: React.DragEvent<HTMLInputElement>) => void}
-                  onDragOver={onDragOver as (e: React.DragEvent<HTMLInputElement>) => void}
-                  placeholder='Value'
-                  disabled={isReadOnly}
-                  autoComplete='off'
-                />
-                <div
-                  className={cn(
-                    'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-[12px] text-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                    (isPreview || disabled) && 'opacity-50'
-                  )}
-                >
-                  <div className='min-w-fit whitespace-pre'>{formattedText}</div>
-                </div>
-              </div>
-            )
-          }}
-        </SubBlockInputController>
-      </div>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx

@@ -1,90 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import { Plus } from 'lucide-react'
-import { Button } from '@/components/emcn'
-import { useTableColumns } from '@/lib/table/hooks'
-import type { FilterRule } from '@/lib/table/query-builder/constants'
-import { useFilterBuilder } from '@/lib/table/query-builder/use-query-builder'
-import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import { EmptyState } from './components/empty-state'
-import { FilterRuleRow } from './components/filter-rule-row'
-
-interface FilterBuilderProps {
-  blockId: string
-  subBlockId: string
-  isPreview?: boolean
-  previewValue?: FilterRule[] | null
-  disabled?: boolean
-  columns?: Array<{ value: string; label: string }>
-  tableIdSubBlockId?: string
-}
-
-/** Visual builder for table filter rules in workflow blocks. */
-export function FilterBuilder({
-  blockId,
-  subBlockId,
-  isPreview = false,
-  previewValue,
-  disabled = false,
-  columns: propColumns,
-  tableIdSubBlockId = 'tableId',
-}: FilterBuilderProps) {
-  const [storeValue, setStoreValue] = useSubBlockValue<FilterRule[]>(blockId, subBlockId)
-  const [tableIdValue] = useSubBlockValue<string>(blockId, tableIdSubBlockId)
-
-  const dynamicColumns = useTableColumns({ tableId: tableIdValue })
-  const columns = useMemo(() => {
-    if (propColumns && propColumns.length > 0) return propColumns
-    return dynamicColumns
-  }, [propColumns, dynamicColumns])
-
-  const value = isPreview ? previewValue : storeValue
-  const rules: FilterRule[] = Array.isArray(value) && value.length > 0 ? value : []
-  const isReadOnly = isPreview || disabled
-
-  const { comparisonOptions, logicalOptions, addRule, removeRule, updateRule } = useFilterBuilder({
-    columns,
-    rules,
-    setRules: setStoreValue,
-    isReadOnly,
-  })
-
-  return (
-    <div className='flex flex-col gap-[8px]'>
-      {rules.length === 0 ? (
-        <EmptyState onAdd={addRule} disabled={isReadOnly} label='Add filter rule' />
-      ) : (
-        <>
-          {rules.map((rule, index) => (
-            <FilterRuleRow
-              key={rule.id}
-              blockId={blockId}
-              subBlockId={subBlockId}
-              rule={rule}
-              index={index}
-              columns={columns}
-              comparisonOptions={comparisonOptions}
-              logicalOptions={logicalOptions}
-              isReadOnly={isReadOnly}
-              isPreview={isPreview}
-              disabled={disabled}
-              onRemove={removeRule}
-              onUpdate={updateRule}
-            />
-          ))}
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={addRule}
-            disabled={isReadOnly}
-            className='self-start'
-          >
-            <Plus className='mr-[4px] h-[12px] w-[12px]' />
-            Add rule
-          </Button>
-        </>
-      )}
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts

@@ -9,7 +9,6 @@ export { Dropdown } from './dropdown/dropdown'
 export { EvalInput } from './eval-input/eval-input'
 export { FileSelectorInput } from './file-selector/file-selector-input'
 export { FileUpload } from './file-upload/file-upload'
-export { FilterBuilder } from './filter-builder/filter-builder'
 export { FolderSelectorInput } from './folder-selector/components/folder-selector-input'
 export { GroupedCheckboxList } from './grouped-checkbox-list/grouped-checkbox-list'
 export { InputMapping } from './input-mapping/input-mapping'
@@ -27,13 +26,12 @@ export { SheetSelectorInput } from './sheet-selector/sheet-selector-input'
 export { ShortInput } from './short-input/short-input'
 export { SlackSelectorInput } from './slack-selector/slack-selector-input'
 export { SliderInput } from './slider-input/slider-input'
-export { SortBuilder } from './sort-builder/sort-builder'
 export { InputFormat } from './starter/input-format'
 export { SubBlockInputController } from './sub-block-input-controller'
 export { Switch } from './switch/switch'
 export { Table } from './table/table'
-export { TableSelector } from './table-selector/table-selector'
 export { Text } from './text/text'
 export { TimeInput } from './time-input/time-input'
 export { ToolInput } from './tool-input/tool-input'
 export { VariablesInput } from './variables-input/variables-input'
+export { WorkflowSelectorInput } from './workflow-selector/workflow-selector-input'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx

@@ -2,12 +2,13 @@ import { useMemo, useRef, useState } from 'react'
 import { Badge, Input } from '@/components/emcn'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
+import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
-import { useWorkflowInputFields } from '@/hooks/queries/workflows'
+import { useWorkflowState } from '@/hooks/queries/workflows'
 
 /**
  * Props for the InputMappingField component
@@ -70,7 +71,11 @@ export function InputMapping({
   const overlayRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   const workflowId = typeof selectedWorkflowId === 'string' ? selectedWorkflowId : undefined
-  const { data: childInputFields = [], isLoading } = useWorkflowInputFields(workflowId)
+  const { data: workflowState, isLoading } = useWorkflowState(workflowId)
+  const childInputFields = useMemo(
+    () => (workflowState?.blocks ? extractInputFieldsFromBlocks(workflowState.blocks) : []),
+    [workflowState?.blocks]
+  )
   const [collapsedFields, setCollapsedFields] = useState<Record<string, boolean>>({})
 
   const valueObj: Record<string, string> = useMemo(() => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/empty-state.tsx

@@ -1,19 +0,0 @@
-import { Plus } from 'lucide-react'
-import { Button } from '@/components/emcn'
-
-interface EmptyStateProps {
-  onAdd: () => void
-  disabled: boolean
-  label: string
-}
-
-export function EmptyState({ onAdd, disabled, label }: EmptyStateProps) {
-  return (
-    <div className='flex items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed py-[16px]'>
-      <Button variant='ghost' size='sm' onClick={onAdd} disabled={disabled}>
-        <Plus className='mr-[4px] h-[12px] w-[12px]' />
-        {label}
-      </Button>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx

@@ -1,67 +0,0 @@
-import { X } from 'lucide-react'
-import { Button, Combobox, type ComboboxOption } from '@/components/emcn'
-import type { SortRule } from '@/lib/table/query-builder/constants'
-
-interface SortRuleRowProps {
-  rule: SortRule
-  index: number
-  columns: ComboboxOption[]
-  directionOptions: ComboboxOption[]
-  isReadOnly: boolean
-  onRemove: (id: string) => void
-  onUpdate: (id: string, field: keyof SortRule, value: string) => void
-}
-
-export function SortRuleRow({
-  rule,
-  index,
-  columns,
-  directionOptions,
-  isReadOnly,
-  onRemove,
-  onUpdate,
-}: SortRuleRowProps) {
-  return (
-    <div className='flex items-center gap-[6px]'>
-      <Button
-        variant='ghost'
-        size='sm'
-        onClick={() => onRemove(rule.id)}
-        disabled={isReadOnly}
-        className='h-[24px] w-[24px] shrink-0 p-0 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
-      >
-        <X className='h-[12px] w-[12px]' />
-      </Button>
-
-      <div className='w-[90px] shrink-0'>
-        <Combobox
-          size='sm'
-          options={[{ value: String(index + 1), label: index === 0 ? 'order by' : 'then by' }]}
-          value={String(index + 1)}
-          disabled
-        />
-      </div>
-
-      <div className='min-w-[120px] flex-1'>
-        <Combobox
-          size='sm'
-          options={columns}
-          value={rule.column}
-          onChange={(v) => onUpdate(rule.id, 'column', v)}
-          placeholder='Column'
-          disabled={isReadOnly}
-        />
-      </div>
-
-      <div className='w-[110px] shrink-0'>
-        <Combobox
-          size='sm'
-          options={directionOptions}
-          value={rule.direction}
-          onChange={(v) => onUpdate(rule.id, 'direction', v as 'asc' | 'desc')}
-          disabled={isReadOnly}
-        />
-      </div>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx

@@ -1,110 +0,0 @@
-'use client'
-
-import { useCallback, useMemo } from 'react'
-import { Plus } from 'lucide-react'
-import { nanoid } from 'nanoid'
-import { Button, type ComboboxOption } from '@/components/emcn'
-import { useTableColumns } from '@/lib/table/hooks'
-import { SORT_DIRECTIONS, type SortRule } from '@/lib/table/query-builder/constants'
-import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import { EmptyState } from './components/empty-state'
-import { SortRuleRow } from './components/sort-rule-row'
-
-interface SortBuilderProps {
-  blockId: string
-  subBlockId: string
-  isPreview?: boolean
-  previewValue?: SortRule[] | null
-  disabled?: boolean
-  columns?: Array<{ value: string; label: string }>
-  tableIdSubBlockId?: string
-}
-
-const createDefaultRule = (columns: ComboboxOption[]): SortRule => ({
-  id: nanoid(),
-  column: columns[0]?.value || '',
-  direction: 'asc',
-})
-
-/** Visual builder for table sort rules in workflow blocks. */
-export function SortBuilder({
-  blockId,
-  subBlockId,
-  isPreview = false,
-  previewValue,
-  disabled = false,
-  columns: propColumns,
-  tableIdSubBlockId = 'tableId',
-}: SortBuilderProps) {
-  const [storeValue, setStoreValue] = useSubBlockValue<SortRule[]>(blockId, subBlockId)
-  const [tableIdValue] = useSubBlockValue<string>(blockId, tableIdSubBlockId)
-
-  const dynamicColumns = useTableColumns({ tableId: tableIdValue, includeBuiltIn: true })
-  const columns = useMemo(() => {
-    if (propColumns && propColumns.length > 0) return propColumns
-    return dynamicColumns
-  }, [propColumns, dynamicColumns])
-
-  const directionOptions = useMemo(
-    () => SORT_DIRECTIONS.map((dir) => ({ value: dir.value, label: dir.label })),
-    []
-  )
-
-  const value = isPreview ? previewValue : storeValue
-  const rules: SortRule[] = Array.isArray(value) && value.length > 0 ? value : []
-  const isReadOnly = isPreview || disabled
-
-  const addRule = useCallback(() => {
-    if (isReadOnly) return
-    setStoreValue([...rules, createDefaultRule(columns)])
-  }, [isReadOnly, rules, columns, setStoreValue])
-
-  const removeRule = useCallback(
-    (id: string) => {
-      if (isReadOnly) return
-      setStoreValue(rules.filter((r) => r.id !== id))
-    },
-    [isReadOnly, rules, setStoreValue]
-  )
-
-  const updateRule = useCallback(
-    (id: string, field: keyof SortRule, newValue: string) => {
-      if (isReadOnly) return
-      setStoreValue(rules.map((r) => (r.id === id ? { ...r, [field]: newValue } : r)))
-    },
-    [isReadOnly, rules, setStoreValue]
-  )
-
-  return (
-    <div className='flex flex-col gap-[8px]'>
-      {rules.length === 0 ? (
-        <EmptyState onAdd={addRule} disabled={isReadOnly} label='Add sort rule' />
-      ) : (
-        <>
-          {rules.map((rule, index) => (
-            <SortRuleRow
-              key={rule.id}
-              rule={rule}
-              index={index}
-              columns={columns}
-              directionOptions={directionOptions}
-              isReadOnly={isReadOnly}
-              onRemove={removeRule}
-              onUpdate={updateRule}
-            />
-          ))}
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={addRule}
-            disabled={isReadOnly}
-            className='self-start'
-          >
-            <Plus className='mr-[4px] h-[12px] w-[12px]' />
-            Add sort
-          </Button>
-        </>
-      )}
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table-selector/table-selector.tsx

@@ -1,80 +0,0 @@
-'use client'
-
-import { useCallback, useMemo } from 'react'
-import { useParams } from 'next/navigation'
-import { Combobox, type ComboboxOption } from '@/components/emcn'
-import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import type { SubBlockConfig } from '@/blocks/types'
-import { useTablesList } from '@/hooks/queries/use-tables'
-
-interface TableSelectorProps {
-  blockId: string
-  subBlock: SubBlockConfig
-  disabled?: boolean
-  isPreview?: boolean
-  previewValue?: string | null
-}
-
-/**
- * Table selector component for selecting workspace tables
- *
- * @remarks
- * Provides a combobox to select workspace tables.
- * Uses React Query for efficient data fetching and caching.
- * The external link to navigate to the table is shown in the label area.
- */
-export function TableSelector({
-  blockId,
-  subBlock,
-  disabled = false,
-  isPreview = false,
-  previewValue,
-}: TableSelectorProps) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-
-  const [storeValue, setStoreValue] = useSubBlockValue<string>(blockId, subBlock.id)
-
-  // Use React Query hook for table data - it handles caching, loading, and error states
-  const {
-    data: tables = [],
-    isLoading,
-    error,
-  } = useTablesList(isPreview || disabled ? undefined : workspaceId)
-
-  const value = isPreview ? previewValue : storeValue
-  const tableId = typeof value === 'string' ? value : null
-
-  const options = useMemo<ComboboxOption[]>(() => {
-    return tables.map((table) => ({
-      label: table.name.toLowerCase(),
-      value: table.id,
-    }))
-  }, [tables])
-
-  const handleChange = useCallback(
-    (selectedValue: string) => {
-      if (isPreview || disabled) return
-      setStoreValue(selectedValue)
-    },
-    [isPreview, disabled, setStoreValue]
-  )
-
-  // Convert error object to string if needed
-  const errorMessage = error instanceof Error ? error.message : error ? String(error) : undefined
-
-  return (
-    <Combobox
-      options={options}
-      value={tableId ?? undefined}
-      onChange={handleChange}
-      placeholder={subBlock.placeholder || 'Select a table'}
-      disabled={disabled || isPreview}
-      editable={false}
-      isLoading={isLoading}
-      error={errorMessage}
-      searchable={options.length > 5}
-      searchPlaceholder='Search...'
-    />
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx

@@ -19,11 +19,11 @@ interface TableProps {
   subBlockId: string
   columns: string[]
   isPreview?: boolean
-  previewValue?: WorkflowTableRow[] | null
+  previewValue?: TableRow[] | null
   disabled?: boolean
 }
 
-interface WorkflowTableRow {
+interface TableRow {
   id: string
   cells: Record<string, string>
 }
@@ -38,7 +38,7 @@ export function Table({
 }: TableProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
-  const [storeValue, setStoreValue] = useSubBlockValue<WorkflowTableRow[]>(blockId, subBlockId)
+  const [storeValue, setStoreValue] = useSubBlockValue<TableRow[]>(blockId, subBlockId)
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
   // Use the extended hook for field-level management
@@ -73,7 +73,7 @@ export function Table({
    */
   useEffect(() => {
     if (!isPreview && !disabled && (!Array.isArray(storeValue) || storeValue.length === 0)) {
-      const initialRow: WorkflowTableRow = {
+      const initialRow: TableRow = {
         id: crypto.randomUUID(),
         cells: { ...emptyCellsTemplate },
       }
@@ -110,7 +110,7 @@ export function Table({
       }
     })
 
-    return validatedRows as WorkflowTableRow[]
+    return validatedRows as TableRow[]
   }, [value, emptyCellsTemplate])
 
   // Helper to update a cell value
@@ -164,12 +164,7 @@ export function Table({
     </thead>
   )
 
-  const renderCell = (
-    row: WorkflowTableRow,
-    rowIndex: number,
-    column: string,
-    cellIndex: number
-  ) => {
+  const renderCell = (row: TableRow, rowIndex: number, column: string, cellIndex: number) => {
     // Defensive programming: ensure row.cells exists and has the expected structure
     const hasValidCells = row.cells && typeof row.cells === 'object'
     if (!hasValidCells) logger.warn('Table row has malformed cells data:', row)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -1312,15 +1312,16 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     if (currentLoop && isLoopBlock) {
       containingLoopBlockId = blockId
       const loopType = currentLoop.loopType || 'for'
-      const contextualTags: string[] = ['index']
-      if (loopType === 'forEach') {
-        contextualTags.push('currentItem')
-        contextualTags.push('items')
-      }
 
       const loopBlock = blocks[blockId]
       if (loopBlock) {
         const loopBlockName = loopBlock.name || loopBlock.type
+        const normalizedLoopName = normalizeName(loopBlockName)
+        const contextualTags: string[] = [`${normalizedLoopName}.index`]
+        if (loopType === 'forEach') {
+          contextualTags.push(`${normalizedLoopName}.currentItem`)
+          contextualTags.push(`${normalizedLoopName}.items`)
+        }
 
         loopBlockGroup = {
           blockName: loopBlockName,
@@ -1328,21 +1329,23 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           blockType: 'loop',
           tags: contextualTags,
           distance: 0,
+          isContextual: true,
         }
       }
     } else if (containingLoop) {
       const [loopId, loop] = containingLoop
       containingLoopBlockId = loopId
       const loopType = loop.loopType || 'for'
-      const contextualTags: string[] = ['index']
-      if (loopType === 'forEach') {
-        contextualTags.push('currentItem')
-        contextualTags.push('items')
-      }
 
       const containingLoopBlock = blocks[loopId]
       if (containingLoopBlock) {
         const loopBlockName = containingLoopBlock.name || containingLoopBlock.type
+        const normalizedLoopName = normalizeName(loopBlockName)
+        const contextualTags: string[] = [`${normalizedLoopName}.index`]
+        if (loopType === 'forEach') {
+          contextualTags.push(`${normalizedLoopName}.currentItem`)
+          contextualTags.push(`${normalizedLoopName}.items`)
+        }
 
         loopBlockGroup = {
           blockName: loopBlockName,
@@ -1350,6 +1353,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           blockType: 'loop',
           tags: contextualTags,
           distance: 0,
+          isContextual: true,
         }
       }
     }
@@ -1363,15 +1367,16 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       const [parallelId, parallel] = containingParallel
       containingParallelBlockId = parallelId
       const parallelType = parallel.parallelType || 'count'
-      const contextualTags: string[] = ['index']
-      if (parallelType === 'collection') {
-        contextualTags.push('currentItem')
-        contextualTags.push('items')
-      }
 
       const containingParallelBlock = blocks[parallelId]
       if (containingParallelBlock) {
         const parallelBlockName = containingParallelBlock.name || containingParallelBlock.type
+        const normalizedParallelName = normalizeName(parallelBlockName)
+        const contextualTags: string[] = [`${normalizedParallelName}.index`]
+        if (parallelType === 'collection') {
+          contextualTags.push(`${normalizedParallelName}.currentItem`)
+          contextualTags.push(`${normalizedParallelName}.items`)
+        }
 
         parallelBlockGroup = {
           blockName: parallelBlockName,
@@ -1379,6 +1384,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           blockType: 'parallel',
           tags: contextualTags,
           distance: 0,
+          isContextual: true,
         }
       }
     }
@@ -1645,38 +1651,29 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
   const nestedBlockTagGroups: NestedBlockTagGroup[] = useMemo(() => {
     return filteredBlockTagGroups.map((group: BlockTagGroup) => {
       const normalizedBlockName = normalizeName(group.blockName)
-
-      // Handle loop/parallel contextual tags (index, currentItem, items)
       const directTags: NestedTag[] = []
       const tagsForTree: string[] = []
 
       group.tags.forEach((tag: string) => {
         const tagParts = tag.split('.')
 
-        // Loop/parallel contextual tags without block prefix
-        if (
-          (group.blockType === 'loop' || group.blockType === 'parallel') &&
-          tagParts.length === 1
-        ) {
+        if (tagParts.length === 1) {
           directTags.push({
             key: tag,
             display: tag,
             fullTag: tag,
           })
         } else if (tagParts.length === 2) {
-          // Direct property like blockname.property
           directTags.push({
             key: tagParts[1],
             display: tagParts[1],
             fullTag: tag,
           })
         } else {
-          // Nested property - add to tree builder
           tagsForTree.push(tag)
         }
       })
 
-      // Build recursive tree from nested tags
       const nestedTags = [...directTags, ...buildNestedTagTree(tagsForTree, normalizedBlockName)]
 
       return {
@@ -1800,13 +1797,19 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           processedTag = tag
         }
       } else if (
-        blockGroup &&
+        blockGroup?.isContextual &&
         (blockGroup.blockType === 'loop' || blockGroup.blockType === 'parallel')
       ) {
-        if (!tag.includes('.') && ['index', 'currentItem', 'items'].includes(tag)) {
-          processedTag = `${blockGroup.blockType}.${tag}`
+        const tagParts = tag.split('.')
+        if (tagParts.length === 1) {
+          processedTag = blockGroup.blockType
         } else {
-          processedTag = tag
+          const lastPart = tagParts[tagParts.length - 1]
+          if (['index', 'currentItem', 'items'].includes(lastPart)) {
+            processedTag = `${blockGroup.blockType}.${lastPart}`
+          } else {
+            processedTag = tag
+          }
         }
       }
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/types.ts

@@ -7,6 +7,8 @@ export interface BlockTagGroup {
   blockType: string
   tags: string[]
   distance: number
+  /** True if this is a contextual group (loop/parallel iteration context available inside the subflow) */
+  isContextual?: boolean
 }
 
 /**