feat(tables): workflow version selection (live/deployed) and not-found/no-output badges (#4889)

* feat(tables): workflow version selection (live/deployed) and not-found/no-output badges

* fix(tables): draw row-selection left edge as checkbox cell border so it cannot be cut off

* fix(tables): per-group version in cascade, accurate deploy error, skip not-found for deployed groups

* fix(tables): render selection left edge as continuous strip overlapping row gridlines

* feat(tables): not-found column icon, optional workflow inputs, mothership deploymentMode

---------

Co-authored-by: waleed <walif6@gmail.com>

Author: TheodoreSpeaks

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

@@ -116,6 +116,9 @@ export const PATCH = withRouteHandler(async (request: NextRequest, { params }: R
         ...(validated.inputMappings !== undefined
           ? { inputMappings: validated.inputMappings }
           : {}),
+        ...(validated.deploymentMode !== undefined
+          ? { deploymentMode: validated.deploymentMode }
+          : {}),
         ...(validated.type !== undefined ? { type: validated.type } : {}),
         ...(validated.autoRun !== undefined ? { autoRun: validated.autoRun } : {}),
       },

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx

@@ -22,6 +22,7 @@ export type CellRenderKind =
   | { kind: 'error' }
   | { kind: 'waiting'; labels: string[] }
   | { kind: 'not-found' }
+  | { kind: 'no-output' }
   // Plain typed cells
   | { kind: 'boolean'; checked: boolean }
   | { kind: 'json'; text: string }
@@ -106,6 +107,9 @@ export function resolveCellRender({
     if (exec?.status === 'error') return { kind: 'error' }
     // Enrichment ran to completion but matched nothing → "Not found".
     if (isEnrichmentOutput && exec?.status === 'completed') return { kind: 'not-found' }
+    // Workflow output: the group's run completed but this block produced no
+    // value for the cell → grey "No output" (distinct from a never-run blank).
+    if (exec?.status === 'completed') return { kind: 'no-output' }
     return { kind: 'empty' }
   }
 
@@ -394,6 +398,15 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
         </Wrap>
       )
 
+    case 'no-output':
+      return (
+        <Wrap isEditing={isEditing}>
+          <Badge variant='gray' dot size='sm'>
+            No output
+          </Badge>
+        </Wrap>
+      )
+
     case 'empty':
       return null
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx

@@ -194,10 +194,28 @@ export const DataRow = React.memo(function DataRow({
   }, [workflowGroups, row])
   const isMultiCell = sel !== null && (sel.startRow !== sel.endRow || sel.startCol !== sel.endCol)
   const isRowSelected = isRowChecked
+  /**
+   * Whether the selection's left edge sits at column 0 for this row. The blue
+   * edge is drawn inside the sticky checkbox cell — over its gray right
+   * border — rather than as the col-0 overlay's `border-l`, so the sticky
+   * cell can never paint over it and the gray/blue lines never double up at
+   * the column boundary. The strip overlaps the row gridlines (`-top-px` /
+   * `-bottom-px`) so consecutive selected rows form one continuous line.
+   */
+  const rowInRange = sel !== null && rowIndex >= sel.startRow && rowIndex <= sel.endRow
+  const isLeftEdgeSelected = isRowChecked || (isMultiCell && rowInRange && sel!.startCol === 0)
 
   return (
     <tr onContextMenu={(e) => onContextMenu(e, row)}>
       <td className={cn(CELL_CHECKBOX, 'cursor-pointer')}>
+        {isLeftEdgeSelected && (
+          <div
+            className={cn(
+              '-right-px -bottom-px pointer-events-none absolute w-px bg-[var(--selection)]',
+              isFirstRow ? 'top-0' : '-top-px'
+            )}
+          />
+        )}
         <div
           className={cn(
             'flex items-center',
@@ -322,7 +340,7 @@ export const DataRow = React.memo(function DataRow({
                   isFirstRow && isTopEdge && 'top-0',
                   isTopEdge && 'border-t border-t-[var(--selection)]',
                   isBottomEdge && 'border-b border-b-[var(--selection)]',
-                  isLeftEdge && 'border-l border-l-[var(--selection)]',
+                  isLeftEdge && colIndex !== 0 && 'border-l border-l-[var(--selection)]',
                   isRightEdge && 'border-r border-r-[var(--selection)]'
                 )}
               />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -237,6 +237,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
     setMenuOpen(true)
   }
 
+  // Column whose workflow source block was deleted — the header icon swaps to
+  // `WorkflowX` with an explanatory tooltip.
+  const blockMissing = Boolean(sourceInfo?.blockMissing)
+
   return (
     <th
       className={cn(
@@ -268,6 +272,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             type={column.type}
             isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
             blockIconInfo={sourceInfo?.blockIconInfo}
+            blockMissing={blockMissing}
           />
           <input
             ref={renameInputRef}
@@ -288,6 +293,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             type={column.type}
             isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
             blockIconInfo={sourceInfo?.blockIconInfo}
+            blockMissing={blockMissing}
           />
           <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
             {column.workflowGroupId ? column.headerLabel : column.name}
@@ -305,6 +311,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               type={column.type}
               isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
               blockIconInfo={sourceInfo?.blockIconInfo}
+              blockMissing={blockMissing}
             />
             <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
               {column.workflowGroupId ? column.headerLabel : column.name}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-type-icon.tsx

@@ -1,13 +1,15 @@
 'use client'
 
 import type React from 'react'
+import { Tooltip } from '@/components/emcn'
 import {
   Calendar as CalendarIcon,
   PlayOutline,
   TypeBoolean,
   TypeJson,
   TypeNumber,
   TypeText,
+  WorkflowX,
 } from '@/components/emcn/icons'
 import type { BlockIconInfo } from '../types'
 
@@ -32,16 +34,39 @@ interface ColumnTypeIconProps {
    *  ignored — icons render in the plain `text-[var(--text-icon)]` tone like
    *  every other column-type icon, no per-block tint. */
   blockIconInfo?: BlockIconInfo
+  /** Workflow-output column whose source block no longer exists in the
+   *  workflow — renders the `WorkflowX` "not found" icon with a tooltip. */
+  blockMissing?: boolean
 }
 
 /**
  * Tiny icon shown next to a column header. Workflow-output columns get the
  * producing block's icon (falling back to `PlayOutline`); plain columns get
  * their scalar type icon. Both render in the same `text-[var(--text-icon)]`
- * tone — no per-workflow color, no colored swatch.
+ * tone — no per-workflow color, no colored swatch. A workflow column whose
+ * source block was deleted renders a `WorkflowX` with an explanatory tooltip.
  */
-export function ColumnTypeIcon({ type, isWorkflowColumn, blockIconInfo }: ColumnTypeIconProps) {
+export function ColumnTypeIcon({
+  type,
+  isWorkflowColumn,
+  blockIconInfo,
+  blockMissing,
+}: ColumnTypeIconProps) {
   if (isWorkflowColumn) {
+    if (blockMissing) {
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <span className='flex shrink-0 items-center'>
+              <WorkflowX className='size-3 shrink-0 text-[var(--text-icon)]' />
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>
+            This column's source block no longer exists in the workflow.
+          </Tooltip.Content>
+        </Tooltip.Root>
+      )
+    }
     const Icon = blockIconInfo?.icon ?? PlayOutline
     return <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
   }

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/types.ts

@@ -9,6 +9,9 @@ export interface BlockIconInfo {
 export interface ColumnSourceInfo {
   blockIconInfo?: BlockIconInfo
   blockName?: string
+  /** Workflow loaded but the column's source block no longer exists — the
+   *  header renders a "Not found" badge. Only set for loaded states. */
+  blockMissing?: boolean
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/input-mapping-section.tsx

@@ -39,7 +39,6 @@ export function InputMappingSection({
     <div className='flex flex-col gap-[9.5px]'>
       <Label className='flex items-baseline gap-1.5 whitespace-nowrap pl-0.5'>
         Workflow inputs
-        <span className='ml-0.5'>*</span>
       </Label>
       {namedFields.length === 0 ? (
         <p className='pl-0.5 text-[var(--text-tertiary)] text-caption'>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -8,6 +8,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { ExternalLink, RepeatIcon, SplitIcon, X } from 'lucide-react'
 import {
   Button,
+  ButtonGroup,
+  ButtonGroupItem,
   Combobox,
   type ComboboxOptionGroup,
   FieldDivider,
@@ -34,6 +36,7 @@ import type {
   ColumnDefinition,
   WorkflowGroup,
   WorkflowGroupDependencies,
+  WorkflowGroupDeploymentMode,
   WorkflowGroupInputMapping,
   WorkflowGroupOutput,
 } from '@/lib/table'
@@ -347,6 +350,11 @@ export function WorkflowSidebarBody({
   const [autoRun, setAutoRun] = useState<boolean>(() =>
     existingGroup ? existingGroup.autoRun !== false : false
   )
+  // Which workflow state per-cell runs execute against. Defaults to `'live'`
+  // (the editable draft) for both new and pre-feature groups.
+  const [deploymentMode, setDeploymentMode] = useState<WorkflowGroupDeploymentMode>(
+    () => existingGroup?.deploymentMode ?? 'live'
+  )
   // Deps default to none selected. With auto-run on, at least one is required
   // (enforced via `depsValid` below); a legacy group with empty deps will
   // surface the error on first open until the user picks at least one column.
@@ -709,6 +717,7 @@ export function WorkflowSidebarBody({
             outputs: fullOutputs,
             ...(newOutputColumns.length > 0 ? { newOutputColumns } : {}),
             inputMappings: inputMappingsList,
+            deploymentMode,
             autoRun,
           })
           toast.success(`Saved "${existingGroup.name ?? 'Workflow'}"`)
@@ -740,6 +749,7 @@ export function WorkflowSidebarBody({
           dependencies,
           outputs: groupOutputs,
           inputMappings: inputMappingsList,
+          deploymentMode,
           autoRun,
         }
         await addWorkflowGroup.mutateAsync({ group, outputColumns: newOutputColumns })
@@ -1027,12 +1037,31 @@ export function WorkflowSidebarBody({
                   <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
                 </div>
                 {showAdvanced && (
-                  <InputMappingSection
-                    inputFields={startBlockInputs.existing}
-                    columnOptions={depOptions}
-                    value={inputMappings}
-                    onChange={setInputMappings}
-                  />
+                  <>
+                    {!isEnrichment && (
+                      <>
+                        <div className='flex items-center justify-between pl-0.5'>
+                          <Label>Workflow version</Label>
+                          <ButtonGroup
+                            value={deploymentMode}
+                            onValueChange={(v) =>
+                              setDeploymentMode(v === 'deployed' ? 'deployed' : 'live')
+                            }
+                          >
+                            <ButtonGroupItem value='live'>Live</ButtonGroupItem>
+                            <ButtonGroupItem value='deployed'>Deployed</ButtonGroupItem>
+                          </ButtonGroup>
+                        </div>
+                        <FieldDivider />
+                      </>
+                    )}
+                    <InputMappingSection
+                      inputFields={startBlockInputs.existing}
+                      columnOptions={depOptions}
+                      value={inputMappings}
+                      onChange={setInputMappings}
+                    />
+                  </>
                 )}
               </>
             )}

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

@@ -195,14 +195,21 @@ export function useTable({ workspaceId, tableId, queryOptions }: UseTableParams)
       if (group.type === 'enrichment') continue
       const state = workflowStates.get(group.workflowId)
       const blocks = (state as { blocks?: Record<string, FlattenOutputsBlockInput> } | null)?.blocks
+      // `useWorkflowStates` only fetches the live draft, so we can only judge
+      // "block missing" for live-mode groups. A deployed-mode group runs a
+      // different graph we don't load client-side — don't risk a false badge.
+      const isLiveMode = group.deploymentMode !== 'deployed'
       for (const out of group.outputs) {
         const block = blocks?.[out.blockId]
         const blockConfig = block?.type ? getBlock(block.type) : undefined
         const blockIconInfo: BlockIconInfo | undefined = blockConfig?.icon
           ? { icon: blockConfig.icon, color: blockConfig.bgColor || '#2F55FF' }
           : undefined
         const blockName = block?.name?.trim() || undefined
-        map.set(out.columnName, { blockIconInfo, blockName })
+        // Flag a missing source block only once the workflow state has loaded
+        // (truthy `blocks`), so a still-loading workflow never flashes the badge.
+        const blockMissing = Boolean(isLiveMode && blocks && out.blockId && !block)
+        map.set(out.columnName, { blockIconInfo, blockName, blockMissing })
       }
     }
     return map

apps/sim/background/workflow-column-execution.ts

@@ -165,12 +165,18 @@ async function runWorkflowAndWriteTerminal(
 ): Promise<'completed' | 'error' | 'paused' | 'blocked'> {
   const { tableId, tableName, rowId, groupId, workflowId, workspaceId, executionId, dispatchId } =
     payload
+  // Read from the live `group`, not the payload: in a cascade the payload is the
+  // first group's snapshot, so a downstream group with a different version must
+  // use its own setting (same reason `workflowId` is re-derived per iteration).
+  const deploymentMode = group.deploymentMode
   const requestId = `wfgrp-${executionId}`
 
   return runWithRequestContext({ requestId }, async () => {
     const { getRowById } = await import('@/lib/table/service')
     const { executeWorkflow } = await import('@/lib/workflows/executor/execute-workflow')
-    const { loadWorkflowFromNormalizedTables } = await import('@/lib/workflows/persistence/utils')
+    const { loadWorkflowFromNormalizedTables, loadDeployedWorkflowState } = await import(
+      '@/lib/workflows/persistence/utils'
+    )
     const { writeWorkflowGroupState, markWorkflowGroupPickedUp, buildOutputsByBlockId } =
       await import('@/lib/table/cell-write')
     const { stashCellContextForResume } = await import('@/lib/table/workflow-columns')
@@ -382,7 +388,28 @@ async function runWorkflowAndWriteTerminal(
         return 'error'
       }
 
-      const normalizedData = await loadWorkflowFromNormalizedTables(workflowId)
+      // `deployed` groups run the workflow's latest active deployment; `live`
+      // (default) runs the editable draft. A `deployed` group whose workflow
+      // has never been deployed fails the cell — no silent fallback to draft.
+      let normalizedData: Awaited<ReturnType<typeof loadWorkflowFromNormalizedTables>>
+      if (deploymentMode === 'deployed') {
+        try {
+          normalizedData = await loadDeployedWorkflowState(workflowId, workspaceId)
+        } catch (err) {
+          // Surface the real reason (missing deployment vs. transient DB/migration
+          // failure) rather than always claiming the workflow isn't deployed.
+          await writeState({
+            status: 'error',
+            executionId,
+            jobId: null,
+            workflowId,
+            error: toError(err).message,
+          })
+          return 'error'
+        }
+      } else {
+        normalizedData = await loadWorkflowFromNormalizedTables(workflowId)
+      }
       const startBlock = normalizedData
         ? Object.values(normalizedData.blocks).find((b) => b?.type === 'start_trigger')
         : undefined
@@ -665,7 +692,10 @@ async function runWorkflowAndWriteTerminal(
             executionMode: 'sync',
             workflowTriggerType: 'table',
             triggerBlockId: startBlock.id,
-            useDraftState: true,
+            // `deployed` groups execute the latest active deployment; everything
+            // else runs the editable draft (the table default). Matches the
+            // state loaded above for start-block / output-block resolution.
+            useDraftState: deploymentMode !== 'deployed',
             abortSignal,
             onBlockStart,
             onBlockComplete,