fix(tables): restore view when returning to chat

Author: j15z

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.test.tsx

@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/app/workspace/[workspaceId]/tables/[tableId]/table', () => ({
+  Table: () => null,
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session',
+  () => ({ BrowserSession: () => null })
+)
+vi.mock(
+  '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/terminal-session/terminal-session',
+  () => ({ TerminalSession: () => null })
+)
+
+import { ResourceContent } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content'
+import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
+import { useTableViewPinStore } from '@/stores/table/view-pin/store'
+
+describe('ResourceContent table view handoff', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    useTableViewPinStore.getState().reset()
+    container = document.createElement('div')
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    useTableViewPinStore.getState().reset()
+  })
+
+  function render(resource: MothershipResource) {
+    act(() => {
+      root.render(
+        (
+          <ResourceContent
+            workspaceId='workspace-1'
+            desktopScopeId='chat:chat-1'
+            resource={resource}
+          />
+        ) as ReactNode
+      )
+    })
+  }
+
+  it('hands off a saved view that arrives after the embedded table mounts', () => {
+    const table: MothershipResource = {
+      type: 'table',
+      id: 'table-1',
+      title: 'Invoices',
+    }
+    render(table)
+    expect(useTableViewPinStore.getState().pins['table-1']).toBeUndefined()
+
+    render({ ...table, viewId: 'view-edited' })
+    const pin = useTableViewPinStore.getState().pins['table-1']
+    expect(pin?.viewId).toBe('view-edited')
+
+    render({ ...table, viewId: 'view-edited' })
+    expect(useTableViewPinStore.getState().pins['table-1']?.seq).toBe(pin?.seq)
+  })
+})

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -62,6 +62,7 @@ import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { useExecutionStore } from '@/stores/execution/store'
+import { useTableViewPinStore } from '@/stores/table/view-pin/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const Workflow = lazy(() => import('@/app/workspace/[workspaceId]/w/[workflowId]/workflow'))
@@ -178,6 +179,25 @@ export const ResourceContent = memo(function ResourceContent({
   visible = true,
   onBrowserOverlayControllerChange,
 }: ResourceContentProps) {
+  const observedTableViewRef = useRef(
+    resource.type === 'table' ? { tableId: resource.id, viewId: resource.viewId } : null
+  )
+
+  useEffect(() => {
+    const previous = observedTableViewRef.current
+    const next =
+      resource.type === 'table' ? { tableId: resource.id, viewId: resource.viewId } : null
+    observedTableViewRef.current = next
+    if (!next?.viewId || (previous?.tableId === next.tableId && previous.viewId === next.viewId)) {
+      return
+    }
+    /**
+     * `initialViewId` owns the first table adoption. If refreshed chat data
+     * supplies it later, use the same one-shot handoff as live stream events.
+     */
+    useTableViewPinStore.getState().pin(next.tableId, next.viewId)
+  }, [resource.id, resource.type, resource.viewId])
+
   const streamFileName = previewSession?.fileName || 'file.md'
   const syntheticFile = useMemo(() => {
     const ext = getFileExtension(streamFileName)

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.mount-send.test.tsx

@@ -42,6 +42,7 @@ vi.mock('@/lib/api/client/request', async (importOriginal) => ({
 
 import { MothershipHandoffStorage } from '@/lib/core/utils/browser-storage'
 import { useChat } from '@/app/workspace/[workspaceId]/home/hooks/use-chat'
+import { type MothershipChatHistory, mothershipChatKeys } from '@/hooks/queries/mothership-chats'
 import { useMothershipQueueStore } from '@/stores/mothership-queue/store'
 
 const DEDUPED_CHAT_ID = 'chat-the-first-attempt-opened'
@@ -150,13 +151,18 @@ function renderUseChat(): {
  * pathname has to match: the hook resets a chat-bound surface back to a fresh
  * pending key when it finds itself on the home route.
  */
-function renderUseChatInChat(chatId: string): {
+function renderUseChatInChat(
+  chatId: string,
+  sharedQueryClient: QueryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+): {
   getResult: () => ReturnType<typeof useChat>
   unmount: () => void
 } {
   navigationMocks.usePathname.mockReturnValue(`/workspace/ws-1/chat/${chatId}`)
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
-  queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  queryClient = sharedQueryClient
   const container = document.createElement('div')
   const root = createRoot(container)
   mountedRoots.push(root)
@@ -509,4 +515,66 @@ describe('useChat remount send recovery', () => {
     // Must NOT have gone to the cross-surface handoff.
     expect(MothershipHandoffStorage.consume('ws-1')).toBeNull()
   })
+
+  it('restores the last edited table view after switching away and back', async () => {
+    const chatId = 'chat-with-table'
+    const sharedQueryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    })
+    const initialHistory: MothershipChatHistory = {
+      id: chatId,
+      title: 'Table chat',
+      messages: [],
+      activeStreamId: null,
+      resources: [{ type: 'table', id: 'table-1', title: 'Invoices' }],
+    }
+    sharedQueryClient.setQueryData(mothershipChatKeys.detail(chatId), initialHistory)
+
+    const firstSurface = renderUseChatInChat(chatId, sharedQueryClient)
+    await waitFor(() => firstSurface.getResult().resources.length === 1)
+
+    act(() => {
+      firstSurface.getResult().addResource({
+        type: 'table',
+        id: 'table-1',
+        title: 'Invoices',
+        viewId: 'view-edited',
+      })
+    })
+    await waitFor(() => firstSurface.getResult().resources[0]?.viewId === 'view-edited')
+    firstSurface.unmount()
+
+    const restoredSurface = renderUseChatInChat(chatId, sharedQueryClient)
+    await waitFor(() => restoredSurface.getResult().resources.length === 1)
+
+    expect(restoredSurface.getResult().resources[0]?.viewId).toBe('view-edited')
+  })
+
+  it('hydrates a table view change when resource identity and title stay the same', async () => {
+    const chatId = 'chat-with-refetched-view'
+    const sharedQueryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    })
+    const initialHistory: MothershipChatHistory = {
+      id: chatId,
+      title: 'Table chat',
+      messages: [],
+      activeStreamId: null,
+      resources: [{ type: 'table', id: 'table-1', title: 'Invoices' }],
+    }
+    sharedQueryClient.setQueryData(mothershipChatKeys.detail(chatId), initialHistory)
+
+    const surface = renderUseChatInChat(chatId, sharedQueryClient)
+    await waitFor(() => surface.getResult().resources.length === 1)
+
+    act(() => {
+      sharedQueryClient.setQueryData<MothershipChatHistory>(mothershipChatKeys.detail(chatId), {
+        ...initialHistory,
+        resources: [{ type: 'table', id: 'table-1', title: 'Invoices', viewId: 'view-refetched' }],
+      })
+    })
+
+    await waitFor(() => surface.getResult().resources[0]?.viewId === 'view-refetched')
+    expect(surface.getResult().resources[0]?.viewId).toBe('view-refetched')
+  })
 })

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -910,10 +910,19 @@ function markMessageStopped(message: PersistedMessage): PersistedMessage {
   })
 }
 
+function buildChatResourceHydrationKey(resource: MothershipResource): string {
+  return JSON.stringify([
+    resource.type,
+    resource.id,
+    resource.title,
+    resource.path ?? null,
+    resource.viewId ?? null,
+    resource.executionId ?? null,
+  ])
+}
+
 function buildChatHistoryHydrationKey(chatHistory: MothershipChatHistory): string {
-  const resourceKey = chatHistory.resources
-    .map((resource) => `${resource.type}:${resource.id}:${resource.title}`)
-    .join('|')
+  const resourceKey = chatHistory.resources.map(buildChatResourceHydrationKey).join('|')
   const messageKey = chatHistory.messages.map((message) => message.id).join('|')
   const streamSnapshot = chatHistory.streamSnapshot
   const snapshotKey = streamSnapshot
@@ -1841,6 +1850,28 @@ export function useChat(
         (r) => r.type === resourceUpdate.type && r.id === resourceUpdate.id
       )
       const resource = mergeChatResource(existing, resourceUpdate)
+      const persistChatId = chatIdRef.current ?? selectedChatIdRef.current
+      if (persistChatId && !isEphemeralResource(resource)) {
+        queryClient.setQueryData<MothershipChatHistory>(
+          mothershipChatKeys.detail(persistChatId),
+          (current) => {
+            if (!current) return current
+            const cached = current.resources.find(
+              (item) => item.type === resource.type && item.id === resource.id
+            )
+            const merged = mergeChatResource(cached, resourceUpdate)
+            if (cached === merged) return current
+            return {
+              ...current,
+              resources: cached
+                ? current.resources.map((item) =>
+                    item.type === resource.type && item.id === resource.id ? merged : item
+                  )
+                : [...current.resources, merged],
+            }
+          }
+        )
+      }
       if (existing && resource === existing && resourceUpdate.clearViewId !== true) {
         return false
       }
@@ -1859,12 +1890,11 @@ export function useChat(
         return true
       }
 
-      const persistChatId = chatIdRef.current ?? selectedChatIdRef.current
       const persistenceScopeId = persistChatId ?? pendingChatKeyRef.current
       resourcePersistenceQueue.enqueue(resourceUpdate, persistChatId, existing, persistenceScopeId)
       return existing === undefined
     },
-    [resourcePersistenceQueue]
+    [queryClient, resourcePersistenceQueue]
   )
 
   const removeResource = useCallback(
@@ -2456,9 +2486,8 @@ export function useChat(
       mergedResources.length === resourcesRef.current.length &&
       mergedResources.every(
         (resource, index) =>
-          resourcesRef.current[index].type === resource.type &&
-          resourcesRef.current[index].id === resource.id &&
-          resourcesRef.current[index].title === resource.title
+          buildChatResourceHydrationKey(resourcesRef.current[index]) ===
+          buildChatResourceHydrationKey(resource)
       )
 
     if (mergedResources.length > 0) {

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

@@ -383,9 +383,13 @@ export function Table({
   const updateMetadataMutation = useUpdateTableMetadata({ workspaceId, tableId })
   const deleteViewMutation = useDeleteTableView({ workspaceId, tableId })
 
-  /** Resolve the default synchronously so the grid, autosave owner, and menu all
-   *  agree before the URL effect records the adopted view id. */
-  const { selectedView, defaultView, activeView } = resolveTableViewSelection(views, activeViewId)
+  /** Resolve the restored or default view synchronously so the grid, autosave
+   *  owner, and menu agree before the URL effect records the adopted view id. */
+  const { selectedView, defaultView, activeView } = resolveTableViewSelection(
+    views,
+    activeViewId,
+    embedded ? initialViewId : undefined
+  )
   const activeViewConfig = useMemo(
     () => resolveTableViewConfig(tableData?.metadata, activeView?.config ?? null),
     [tableData?.metadata, activeView?.config]
@@ -662,6 +666,9 @@ export function Table({
       return
     }
 
+    if (activeView && activeViewId === null) {
+      setTableParams({ view: activeView.id })
+    }
     const nextViewRevision = getTableViewRevision(activeView)
     if (
       !shouldApplyTableViewRevision(
@@ -678,7 +685,7 @@ export function Table({
     if (preserved && preserved.viewId !== nextViewId) {
       preservedViewStateRef.current = null
     }
-    if (activeView && (activeViewId === null || activeViewId === ALL_VIEW_PARAM)) {
+    if (activeView && activeViewId === ALL_VIEW_PARAM) {
       setTableParams({ view: activeView.id })
     }
     const keep = preserved?.viewId === nextViewId ? preserved.keep : undefined

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/view-state.test.ts

@@ -45,6 +45,13 @@ const DEFAULT_VIEW: TableViewWire = {
   updatedAt: new Date('2026-08-15T01:10:00.000Z'),
 }
 
+const PINNED_VIEW: TableViewWire = {
+  ...DEFAULT_VIEW,
+  id: 'view-pinned',
+  name: 'Pinned',
+  isDefault: false,
+}
+
 describe('resolveTableViewSelection', () => {
   it('makes the persisted default active before its URL id is adopted', () => {
     expect(resolveTableViewSelection([DEFAULT_VIEW], null)).toEqual({
@@ -75,6 +82,19 @@ describe('resolveTableViewSelection', () => {
     })
   })
 
+  it('keeps a restored embedded view active while the host URL is absent', () => {
+    expect(
+      resolveTableViewSelection([DEFAULT_VIEW, PINNED_VIEW], null, PINNED_VIEW.id).activeView
+    ).toBe(PINNED_VIEW)
+  })
+
+  it('lets an explicit URL selection override the restored embedded view', () => {
+    expect(
+      resolveTableViewSelection([DEFAULT_VIEW, PINNED_VIEW], DEFAULT_VIEW.id, PINNED_VIEW.id)
+        .activeView
+    ).toBe(DEFAULT_VIEW)
+  })
+
   it('upgrades the legacy All sentinel when a persisted default exists', () => {
     expect(resolveTableViewSelection([DEFAULT_VIEW], ALL_VIEW_PARAM).activeView).toBe(DEFAULT_VIEW)
   })

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/view-state.ts

@@ -21,26 +21,33 @@ export function resolveTableViewConfig(
 }
 
 /**
- * Resolves the persisted default synchronously when the URL has not selected a
- * view yet. The URL effect still records that choice, but render-time consumers
- * all see the same owner while that update is pending.
+ * Resolves a restored embedded view, then the persisted default, while the URL
+ * has no selection. The URL effect still records that choice, but render-time
+ * consumers all see the same owner while that update is pending.
  */
 export function resolveTableViewSelection(
   views: TableViewWire[],
-  activeViewId: string | null
+  activeViewId: string | null,
+  restoredViewId?: string
 ): TableViewSelection {
   let selectedView: TableViewWire | null = null
   let defaultView: TableViewWire | null = null
+  let restoredView: TableViewWire | null = null
   for (const view of views) {
     if (view.id === activeViewId) selectedView = view
     if (view.isDefault) defaultView = view
+    if (view.id === restoredViewId) restoredView = view
   }
   return {
     selectedView,
     defaultView,
     activeView:
       selectedView ??
-      (activeViewId === null || activeViewId === ALL_VIEW_PARAM ? defaultView : null),
+      (activeViewId === null
+        ? (restoredView ?? defaultView)
+        : activeViewId === ALL_VIEW_PARAM
+          ? defaultView
+          : null),
   }
 }