refactor(tables): drive import tray by polling derived from server, not SSE

Import progress no longer holds an SSE connection per importing table. The tray
now derives its importing rows live from the table list (React Query), polled
only while an import is in flight; the table detail page keeps its own
cell-state SSE for grid refresh.

- store holds only client-only state now: optimistic uploads, which terminal
  completions to surface this session, canceled ids, menu open — no copied
  importStatus/rowsProcessed.
- useWorkspaceImports is the single source: polls via a data-predicate
  refetchInterval, derives rows, and fires completion toasts on the
  importing -> terminal transition.
- kickoff handlers use startUpload/setUploadPercent/endUpload; the invalidated
  list refetch surfaces the server row and polling takes over.
- removes use-hydrate-import-tray + use-import-progress-tracker (folded in).
- trims over-verbose comments across the import paths.

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

Author: TheodoreSpeaks

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

@@ -236,8 +236,8 @@ export function useTableEventStream({
             }
           : prev
       )
-      // The header tray + completion toast are owned by `useImportProgressTracker` (mounted on
-      // every page). Here we only keep the detail cache + grid in sync.
+      // The header tray + completion toast are owned by `useImportTrayPoll` (mounted on every
+      // page). Here we only keep the detail cache + grid in sync.
       // Live-fill: rows are real as each batch commits. Coalesce the per-tick row
       // refetches via a debounce; on the terminal event refetch rows + the
       // definition immediately (the worker may have rewritten the schema).

apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx

@@ -40,12 +40,8 @@ const logger = createLogger('ImportCsvDialog')
 
 const MAX_SAMPLE_ROWS = 5
 const MAX_EXAMPLES_IN_ERROR = 3
-/**
- * How many bytes of the file we read to build the preview + column mapping. We never parse the
- * whole file in the browser: a large CSV would freeze the tab and a file past ~512 MB blows V8's
- * max string length outright. The streaming importer reads the full file server-side and the DB
- * row-count trigger enforces the table limit, so the client only needs the header + a few rows.
- */
+/** Bytes read for the preview/mapping. We never parse the whole file client-side — the importer
+ *  streams it server-side and the DB trigger enforces the row limit. */
 const CSV_PREVIEW_BYTES = 512 * 1024
 /**
  * Sentinel value for the "Do not import" option in the mapping combobox. The
@@ -110,11 +106,7 @@ interface ParsedCsv {
   sampleRows: Record<string, unknown>[]
 }
 
-/**
- * Parses only the head of a CSV/TSV — enough for the column mapping and sample values, never the
- * whole file (see {@link CSV_PREVIEW_BYTES}). When the file is larger than the preview window we
- * drop the trailing partial line so the parser never sees a truncated final record.
- */
+/** Parses the head of a CSV/TSV for the mapping + sample, dropping any truncated final line. */
 async function parseCsvPreview(file: File, delimiter: ',' | '\t') {
   const sliced = file.size > CSV_PREVIEW_BYTES
   const blob = sliced ? file.slice(0, CSV_PREVIEW_BYTES) : file
@@ -329,12 +321,10 @@ export function ImportCsvDialog({
     // close the dialog immediately so the indicator is visible during the upload, then run
     // the upload + kickoff in the background (don't block the dialog on it).
     if (parsed.file.size >= CSV_ASYNC_IMPORT_THRESHOLD_BYTES) {
-      useImportTrayStore.getState().upsert({
-        tableId: table.id,
+      useImportTrayStore.getState().startUpload({
+        uploadId: table.id,
         workspaceId,
-        title: table.name,
-        phase: 'importing',
-        rowsProcessed: 0,
+        title: parsed.file.name,
       })
       onOpenChange(false)
       toast({
@@ -353,39 +343,21 @@ export function ImportCsvDialog({
           mapping,
           createColumns,
           onProgress: (percent) => {
-            if (useImportTrayStore.getState().isCanceled(table.id)) return
-            useImportTrayStore.getState().upsert({
-              tableId: table.id,
-              workspaceId,
-              title: table.name,
-              phase: 'importing',
-              percent,
-            })
+            useImportTrayStore.getState().setUploadPercent(table.id, percent)
           },
         },
         {
           onSuccess: (data) => {
-            // Canceled mid-upload — the worker just started; cancel it instead of re-seeding.
-            if (useImportTrayStore.getState().consumeCanceled(table.id)) {
-              if (data?.importId) {
-                // Re-flag so hydration won't re-seed the still-`importing` server row while the
-                // server cancel is in flight.
-                useImportTrayStore.getState().cancel(table.id)
-                void cancelTableImport(workspaceId, table.id, data.importId).catch(() => {})
-              }
-              return
+            useImportTrayStore.getState().endUpload(table.id)
+            // The server row drives the tray once the list refetches. If canceled mid-upload, flag
+            // the id so it's not shown and cancel the worker server-side.
+            if (useImportTrayStore.getState().consumeCanceled(table.id) && data?.importId) {
+              useImportTrayStore.getState().cancel(table.id)
+              void cancelTableImport(workspaceId, table.id, data.importId).catch(() => {})
             }
-            // Record the import id so the tracker can ignore replayed events from a prior import.
-            useImportTrayStore.getState().upsert({
-              tableId: table.id,
-              workspaceId,
-              title: table.name,
-              importId: data?.importId,
-              phase: 'importing',
-            })
           },
           onError: (err) => {
-            useImportTrayStore.getState().dismiss(table.id)
+            useImportTrayStore.getState().endUpload(table.id)
             toast.error(getErrorMessage(err, 'Failed to start import'))
             logger.error('Async CSV import failed to start', err)
           },

apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useShallow } from 'zustand/react/shallow'
 import {
   Button,
   DropdownMenu,
@@ -10,10 +9,9 @@ import {
 } from '@/components/emcn'
 import { Upload } from '@/components/emcn/icons'
 import { cancelTableImport } from '@/hooks/queries/tables'
-import { selectWorkspaceImports, useImportTrayStore } from '@/stores/table/import-tray/store'
+import { useImportTrayStore } from '@/stores/table/import-tray/store'
 import { getImportStage } from './import-stage'
-import { useHydrateImportTray } from './use-hydrate-import-tray'
-import { useImportProgressTracker } from './use-import-progress-tracker'
+import { type ImportRow, useWorkspaceImports } from './use-workspace-imports'
 
 interface ImportProgressMenuProps {
   workspaceId: string | undefined
@@ -23,42 +21,27 @@ interface ImportProgressMenuProps {
 
 /**
  * Header affordance for background CSV imports: a clickable `{done}/{total}` count that opens a
- * dropdown of per-import progress rows. Renders nothing when there are no tracked imports. The
- * single import-progress surface for both the tables list and the in-table view.
+ * dropdown of per-import progress rows. Renders nothing when there are no imports. The single
+ * import-progress surface for both the tables list and the in-table view.
  */
 export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuProps) {
-  // Re-seed the (in-memory) tray from server truth so the indicator survives a refresh,
-  // then keep it live on every page by subscribing to each active import's event stream.
-  useHydrateImportTray(workspaceId)
-  useImportProgressTracker()
-
-  // `selectWorkspaceImports` builds a fresh array each call; `useShallow` compares its
-  // contents so a re-render is triggered only when the entries actually change (without it
-  // the new reference loops forever).
-  const allImports = useImportTrayStore(
-    useShallow((state) => selectWorkspaceImports(state, workspaceId))
-  )
+  const imports = useWorkspaceImports(workspaceId, tableId)
   const dismiss = useImportTrayStore((state) => state.dismiss)
-  const cancelEntry = useImportTrayStore((state) => state.cancel)
+  const cancelId = useImportTrayStore((state) => state.cancel)
   const menuOpen = useImportTrayStore((state) => state.menuOpen)
   const setMenuOpen = useImportTrayStore((state) => state.setMenuOpen)
 
-  // Inside a table, scope the indicator to that table's import only; on the list view show
-  // every active import in the workspace.
-  const imports = tableId ? allImports.filter((e) => e.tableId === tableId) : allImports
-
   if (imports.length === 0) return null
 
   const total = imports.length
   const done = imports.filter((e) => e.phase === 'ready').length
 
-  const cancel = (entry: (typeof imports)[number]) => {
-    // Clear it + flag canceled so an in-flight upload's callbacks don't re-create it.
-    cancelEntry(entry.tableId)
-    if (entry.importId) {
-      // Worker already running — cancel it server-side now. (Otherwise the kickoff handler cancels
-      // it once the importId is known; see the `consumeCanceled` branches.)
-      void cancelTableImport(entry.workspaceId, entry.tableId, entry.importId).catch(() => {})
+  const cancel = (row: ImportRow) => {
+    cancelId(row.id)
+    // Worker already running — cancel it server-side now. (An upload still mid-flight is canceled by
+    // the kickoff handler once its importId is known; see the `consumeCanceled` branches.)
+    if (row.importId) {
+      void cancelTableImport(row.workspaceId, row.id, row.importId).catch(() => {})
     }
   }
 
@@ -73,17 +56,17 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' className='min-w-[320px] max-w-[420px] gap-0 p-1'>
-        {imports.map((entry) => {
-          const stage = getImportStage(entry)
+        {imports.map((row) => {
+          const stage = getImportStage(row)
           return (
             <ProgressItem
-              key={entry.tableId}
+              key={row.id}
               status={stage.status}
               title={stage.title}
               meta={stage.meta}
               detail={stage.detail}
-              onCancel={entry.phase === 'importing' ? () => cancel(entry) : undefined}
-              onDismiss={stage.dismissible ? () => dismiss(entry.tableId) : undefined}
+              onCancel={row.phase === 'importing' ? () => cancel(row) : undefined}
+              onDismiss={stage.dismissible ? () => dismiss(row.id) : undefined}
             />
           )
         })}

apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-stage.ts

@@ -1,4 +1,4 @@
-import type { ImportTrayEntry } from '@/stores/table/import-tray/store'
+import type { ImportRow } from './use-workspace-imports'
 
 type ProgressStatus = 'pending' | 'success' | 'error'
 
@@ -17,11 +17,12 @@ export interface ImportStageView {
 /**
  * Maps a tray entry to the stage shown in the import dropdown. The single place the import
  * stages (Uploading → Processing → Imported / Failed) are defined; the row component just
- * renders the returned slots, so every stage looks consistent: `{status} {name}` with a
- * byte-based percent on the right and the row count underneath. The percent comes straight from
- * `entry.percent` (exact, monotonic) rather than an estimated row fraction.
+ * renders the returned slots, so every stage looks consistent: `{status} {name}`. While
+ * uploading, the right slot shows the byte-based upload percent (from the client XHR). Once the
+ * server is processing we only know the committed row count (polled from the table row), so the
+ * detail line reads `{rows} rows` with no percent.
  */
-export function getImportStage(entry: ImportTrayEntry): ImportStageView {
+export function getImportStage(entry: ImportRow): ImportStageView {
   const rows = entry.rowsProcessed.toLocaleString()
   const name = entry.title
   const meta = typeof entry.percent === 'number' ? `${entry.percent}%` : undefined
@@ -49,7 +50,6 @@ export function getImportStage(entry: ImportTrayEntry): ImportStageView {
     return {
       status: 'pending',
       title: `Processing ${name}`,
-      meta,
       detail: `${rows} rows`,
       dismissible: false,
     }