refactor(table): align optimistic UI with new dispatcher; sticky cancel via 'new' mode

Fix 0: new `DispatchMode = 'new'` for auto-fire callsites. Eligibility skips
rows with any prior `executions[gid]` entry — cancelled / errored / completed
cells stay sticky until a manual run. Dispatcher's windowed SELECT pushes
`NOT jsonb_exists_any(...)` to SQL so CSV imports into mostly-attempted
tables don't pay a per-window load+JS-filter. `batchInsertRows` drops its
`rowIds` payload (keeps dispatch scope tiny on big imports).

Fix A/B/D: client optimistic patches now mirror the backend's actual
invariants. `useCreateTableRow.onSuccess` stamps eligible groups via
`optimisticallyScheduleNewlyEligibleGroups` so newly-inserted rows show
`Queued` instantly. `useCancelTableRuns.onMutate` distinguishes optimistic-
only pending (`executionId == null` — strip silently) from real worker
claims (stamp cancelled; SSE will reconcile). Drop `onSettled` invalidation
on `useUpdateTableRow` / `useBatchUpdateTableRows` to kill the
delete-cell flicker.

Fix C: active-dispatches overlay. New `listActiveDispatches` helper,
contract, and `GET /api/table/[tableId]/dispatches` route. `kind:'dispatch'`
SSE events carry scope+cursor+mode on every transition. New
`useActiveDispatches` hook + `resolveCellExec` synthesize a virtual
`pending` exec for cells in an active dispatch's scope ahead of cursor —
queued indicators now survive page refresh during long Run-all dispatches.
`cancelWorkflowGroupRuns` emits `kind:'dispatch',status:'cancelled'`
events so the overlay clears without a refetch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: TheodoreSpeaks

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

@@ -0,0 +1,55 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { type ActiveDispatch, listActiveDispatchesContract } from '@/lib/api/contracts/tables'
+import { parseRequest } from '@/lib/api/server'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import { listActiveDispatches } from '@/lib/table/dispatcher'
+import { accessError, checkAccess } from '@/app/api/table/utils'
+
+const logger = createLogger('TableDispatchesAPI')
+
+interface RouteParams {
+  params: Promise<{ tableId: string }>
+}
+
+/**
+ * GET /api/table/[tableId]/dispatches
+ *
+ * Returns active (`pending` / `dispatching`) dispatches for the table. Drives
+ * the client's "about to run" overlay so refresh during a long Run-all keeps
+ * the queued indicators on rows the dispatcher hasn't reached yet.
+ */
+export const GET = withRouteHandler(async (request: NextRequest, { params }: RouteParams) => {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+    }
+
+    const parsed = await parseRequest(listActiveDispatchesContract, request, { params })
+    if (!parsed.success) return parsed.response
+    const { tableId } = parsed.data.params
+
+    const result = await checkAccess(tableId, authResult.userId, 'read')
+    if (!result.ok) return accessError(result, requestId, tableId)
+
+    const rows = await listActiveDispatches(tableId)
+    const dispatches: ActiveDispatch[] = rows.map((r) => ({
+      id: r.id,
+      status: r.status as 'pending' | 'dispatching',
+      mode: r.mode,
+      isManualRun: r.isManualRun,
+      cursor: r.cursor,
+      scope: r.scope,
+    }))
+
+    return NextResponse.json({ success: true, data: { dispatches } })
+  } catch (error) {
+    logger.error(`[${requestId}] list-dispatches failed:`, error)
+    return NextResponse.json({ error: 'Failed to list active dispatches' }, { status: 500 })
+  }
+})

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

@@ -3,6 +3,7 @@
 import React from 'react'
 import { Button, Checkbox } from '@/components/emcn'
 import { PlayOutline, Square } from '@/components/emcn/icons'
+import type { ActiveDispatch } from '@/lib/api/contracts/tables'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import type { TableRow as TableRowType, WorkflowGroup } from '@/lib/table'
@@ -17,7 +18,7 @@ import {
   SELECTION_TINT_BG,
 } from './constants'
 import type { DisplayColumn } from './types'
-import { type NormalizedSelection, readExecution } from './utils'
+import { type NormalizedSelection, resolveCellExec } from './utils'
 
 export interface DataRowProps {
   row: TableRowType
@@ -50,6 +51,12 @@ export interface DataRowProps {
    * for empty workflow-output cells whose group has unmet dependencies.
    */
   workflowGroups: WorkflowGroup[]
+  /**
+   * Active dispatches on the table — rows in scope ahead of the dispatcher's
+   * cursor render as `Queued` until the dispatcher pre-stamps them. Preserves
+   * queued indicators across page refresh during long Run-all dispatches.
+   */
+  activeDispatches: ActiveDispatch[] | undefined
 }
 
 function cellRangeRowChanged(
@@ -105,7 +112,8 @@ function dataRowPropsAreEqual(prev: DataRowProps, next: DataRowProps): boolean {
     prev.numDivWidth !== next.numDivWidth ||
     prev.onStopRow !== next.onStopRow ||
     prev.onRunRow !== next.onRunRow ||
-    prev.workflowGroups !== next.workflowGroups
+    prev.workflowGroups !== next.workflowGroups ||
+    prev.activeDispatches !== next.activeDispatches
   ) {
     return false
   }
@@ -148,6 +156,7 @@ export const DataRow = React.memo(function DataRow({
   onStopRow,
   onRunRow,
   workflowGroups,
+  activeDispatches,
 }: DataRowProps) {
   const sel = normalizedSelection
   /**
@@ -306,7 +315,13 @@ export const DataRow = React.memo(function DataRow({
                     ? pendingCellValue[column.name]
                     : row.data[column.name]
                 }
-                exec={readExecution(row, column.workflowGroupId)}
+                exec={resolveCellExec(
+                  row,
+                  column.workflowGroupId
+                    ? workflowGroups.find((g) => g.id === column.workflowGroupId)
+                    : undefined,
+                  activeDispatches
+                )}
                 column={column}
                 isEditing={isEditing}
                 initialCharacter={isEditing ? initialCharacter : undefined}

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

@@ -17,6 +17,7 @@ import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/provide
 import {
   useAddTableColumn,
   useBatchCreateTableRows,
+  useActiveDispatches,
   useBatchUpdateTableRows,
   useCreateTableRow,
   useDeleteColumn,
@@ -300,6 +301,8 @@ export function TableGrid({
     ensureAllRowsLoaded,
   } = useTable({ workspaceId, tableId, queryOptions })
 
+  const { data: activeDispatches } = useActiveDispatches(tableId)
+
   const fetchNextPageRef = useRef(fetchNextPage)
   fetchNextPageRef.current = fetchNextPage
   const hasNextPageRef = useRef(hasNextPage)
@@ -3155,6 +3158,7 @@ export function TableGrid({
                         onStopRow={onStopRow}
                         onRunRow={onRunRow}
                         workflowGroups={tableWorkflowGroups}
+                        activeDispatches={activeDispatches}
                       />
                     ))}
                   </>

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

@@ -1,10 +1,12 @@
+import type { ActiveDispatch } from '@/lib/api/contracts/tables'
 import type {
   ColumnDefinition,
   RowExecutionMetadata,
   RowExecutions,
   TableRow as TableRowType,
   WorkflowGroup,
 } from '@/lib/table'
+import { areOutputsFilled } from '@/lib/table/deps'
 import type { DeletedRowSnapshot } from '@/stores/table/types'
 import type { DisplayColumn } from './types'
 
@@ -166,6 +168,38 @@ export function readExecution(
   return row?.executions?.[groupId]
 }
 
+/**
+ * Resolves a cell's execution state with the "about to run" overlay applied:
+ * for cells in an active dispatch's scope ahead of its cursor, returns a
+ * synthetic `pending` exec so the renderer shows `Queued`. Cells with a real
+ * DB exec always win — the overlay only fills the gap between dispatch start
+ * and the dispatcher's per-row pending stamp.
+ */
+export function resolveCellExec(
+  row: TableRowType,
+  group: WorkflowGroup | undefined,
+  activeDispatches: ActiveDispatch[] | undefined
+): RowExecutionMetadata | undefined {
+  if (!group) return undefined
+  const real = row.executions?.[group.id]
+  if (real) return real
+  if (!activeDispatches || activeDispatches.length === 0) return undefined
+  if (areOutputsFilled(group, row)) return undefined
+  for (const d of activeDispatches) {
+    if (!d.scope.groupIds.includes(group.id)) continue
+    if (d.scope.rowIds && !d.scope.rowIds.includes(row.id)) continue
+    if (row.position <= d.cursor) continue
+    return {
+      status: 'pending',
+      executionId: null,
+      jobId: null,
+      workflowId: group.workflowId,
+      error: null,
+    }
+  }
+  return undefined
+}
+
 export interface ExecStatusMix {
   hasIncompleteOrFailed: boolean
   hasCompleted: boolean

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

@@ -3,6 +3,7 @@
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
+import type { ActiveDispatch } from '@/lib/api/contracts/tables'
 import type { RowData, RowExecutionMetadata, RowExecutions } from '@/lib/table'
 import type { TableEvent, TableEventEntry } from '@/lib/table/events'
 import { snapshotAndMutateRows, tableKeys } from '@/hooks/queries/tables'
@@ -110,6 +111,41 @@ export function useTableEventStream({
       )
     }
 
+    const applyDispatch = (event: Extract<TableEvent, { kind: 'dispatch' }>): void => {
+      const { dispatchId, status, scope, cursor, mode } = event
+      queryClient.setQueryData<ActiveDispatch[]>(
+        tableKeys.activeDispatches(tableId),
+        (prev) => {
+          const list = prev ?? []
+          // Terminal states drop the dispatch from the overlay; client renders
+          // the row's authoritative DB exec state from here.
+          if (status === 'complete' || status === 'cancelled') {
+            const filtered = list.filter((d) => d.id !== dispatchId)
+            return filtered.length === list.length ? list : filtered
+          }
+          if (scope === undefined || cursor === undefined || mode === undefined) {
+            // Defensive: a legacy emit without the new fields can't drive the
+            // overlay. Leave existing cache alone.
+            return list
+          }
+          const next: ActiveDispatch = {
+            id: dispatchId,
+            status,
+            mode,
+            isManualRun: false,
+            cursor,
+            scope,
+          }
+          const idx = list.findIndex((d) => d.id === dispatchId)
+          if (idx === -1) return [...list, next]
+          const merged = list.slice()
+          // Preserve isManualRun from the initial fetch — SSE doesn't carry it.
+          merged[idx] = { ...next, isManualRun: list[idx].isManualRun }
+          return merged
+        }
+      )
+    }
+
     const handlePrune = (payload: PrunedEvent): void => {
       logger.info('Table event buffer pruned — full refetch', { tableId, ...payload })
       void queryClient.invalidateQueries({ queryKey: tableKeys.rowsRoot(tableId) })
@@ -152,11 +188,11 @@ export function useTableEventStream({
       eventSource.onmessage = (msg: MessageEvent<string>) => {
         try {
           const entry = JSON.parse(msg.data) as TableEventEntry
-          if (entry.event?.kind !== 'cell') return
           if (entry.eventId <= lastEventId) return
           lastEventId = entry.eventId
           savePointer(tableId, lastEventId)
-          applyCell(entry.event)
+          if (entry.event?.kind === 'cell') applyCell(entry.event)
+          else if (entry.event?.kind === 'dispatch') applyDispatch(entry.event)
         } catch (err) {
           logger.warn('Failed to parse table event', { tableId, err })
         }