fix(files): refresh the file list after a flush so the retype reads a live key

A collaborative flush persists through a versioned object swap: it mints a new
storage key and deletes the previous blob. The retype then swaps editors from
the optimistic rename patch, so the newly mounted viewer read `key` off a record
the flush had already invalidated - a 404, or pre-edit text from the content
cache keyed on that dead key, until the rename's own invalidation landed.

Awaits a list refetch between a confirmed `persisted` flush and the rename.
`refetchType: 'all'`, because the caller awaits this for a usable key and the
default `active` resolves immediately against an unobserved list.

Also moves this file's two sibling imports onto the `@/` alias per the repo's
absolute-import rule.

Author: mzxchandra

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/use-file-doc-collaboration.ts

@@ -5,9 +5,12 @@ import { FILE_DOC_EVENTS, type FileDocPresence } from '@sim/realtime-protocol/fi
 import { Awareness } from 'y-protocols/awareness'
 import * as Y from 'yjs'
 import { getUserColor } from '@/lib/workspaces/colors'
+import { FileDocProvider } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/file-doc-provider'
+import {
+  useReportFileDocFlush,
+  useReportFileDocOthers,
+} from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/file-doc-room-context'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
-import { FileDocProvider } from './file-doc-provider'
-import { useReportFileDocFlush, useReportFileDocOthers } from './file-doc-room-context'
 
 /** The live collaboration binding the editor wires into TipTap's Collaboration
  * (the {@link Y.Doc}) and CollaborationCaret (the awareness). */

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

@@ -125,6 +125,7 @@ import {
 } from '@/hooks/queries/workspace-file-folders'
 import {
   useDeleteWorkspaceFile,
+  useRefreshWorkspaceFiles,
   useRenameWorkspaceFile,
   useUploadWorkspaceFile,
   useWorkspaceFiles,
@@ -305,6 +306,7 @@ export function Files() {
   const notifyLimit = useLimitUpgradeToast()
   const deleteFile = useDeleteWorkspaceFile()
   const renameFile = useRenameWorkspaceFile()
+  const refreshFiles = useRefreshWorkspaceFiles()
   const createFolder = useCreateWorkspaceFileFolder()
   const updateFolder = useUpdateWorkspaceFileFolder()
   const moveItems = useMoveWorkspaceFileItems()
@@ -1239,8 +1241,13 @@ export function Files() {
 
       if (isDirtyRef.current) await saveRef.current?.()
       const flushed = await flushFileDocRef(fileDocFlushRef)
-      if (flushed.status !== 'persisted') {
-        // Not an error — `unchanged` means there was nothing to write, and `skipped` means the write
+      if (flushed.status === 'persisted') {
+        // The persist minted a new storage key and deleted the previous blob, so the cached record
+        // the viewer renders from now points at a key that 404s. Wait for the refreshed list before
+        // the rename swaps editors, or the newly mounted viewer reads the dead key.
+        await refreshFiles(workspaceId)
+      } else {
+        // Not an error - `unchanged` means there was nothing to write, and `skipped` means the write
         // did not land in time. The retype proceeds either way; this is the breadcrumb for a stale
         // first paint, which is otherwise indistinguishable from a rendering bug.
         logger.info('Changing file type without a confirmed durable flush', {
@@ -1265,7 +1272,7 @@ export function Files() {
         logger.error('Failed to change file type:', err)
       }
     },
-    [workspaceId]
+    [workspaceId, refreshFiles]
   )
 
   const handleDownloadSelected = useCallback(() => {

apps/sim/hooks/queries/workspace-files.test.tsx

@@ -13,6 +13,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
+  useRefreshWorkspaceFiles,
   useRenameWorkspaceFile,
   useWorkspaceFileContent,
   workspaceFilesKeys,
@@ -246,3 +247,112 @@ describe('useRenameWorkspaceFile optimistic cache patch', () => {
     unmount()
   })
 })
+
+/**
+ * A collaborative flush mints a new storage key and deletes the previous blob, so a retype has to
+ * wait for the refreshed list before it swaps editors - the newly mounted viewer reads `key` off
+ * that record, and the pre-flush one 404s.
+ */
+describe('useRefreshWorkspaceFiles', () => {
+  const WS = 'ws-1'
+
+  function renderRefresh(): {
+    refresh: () => (workspaceId: string) => Promise<void>
+    queryClient: QueryClient
+    unmount: () => void
+  } {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    })
+    const container = document.createElement('div')
+    const root: Root = createRoot(container)
+    let result: ((workspaceId: string) => Promise<void>) | null = null
+
+    function Probe() {
+      result = useRefreshWorkspaceFiles()
+      return null
+    }
+
+    act(() => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Probe />
+        </QueryClientProvider>
+      )
+    })
+
+    return {
+      refresh: () => {
+        if (!result) throw new Error('hook did not render')
+        return result
+      },
+      queryClient,
+      unmount: () => {
+        act(() => root.unmount())
+        queryClient.clear()
+      },
+    }
+  }
+
+  it('resolves only after the refetched list has landed', async () => {
+    const keys = ['workspace/ws-1/old-key', 'workspace/ws-1/new-key']
+    let call = 0
+    const queryFn = vi.fn(async () => {
+      const key = keys[Math.min(call, keys.length - 1)]
+      call += 1
+      await sleep(10)
+      return [{ id: 'file-1', key }]
+    })
+
+    const { refresh, queryClient, unmount } = renderRefresh()
+    const queryKey = workspaceFilesKeys.list(WS, 'active')
+    await act(async () => {
+      await queryClient.fetchQuery({ queryKey, queryFn })
+    })
+    expect(queryClient.getQueryData<{ key: string }[]>(queryKey)?.[0].key).toBe(
+      'workspace/ws-1/old-key'
+    )
+
+    await act(async () => {
+      await refresh()(WS)
+    })
+
+    // The awaited call must have already replaced the dead key, not merely marked it stale.
+    expect(queryClient.getQueryData<{ key: string }[]>(queryKey)?.[0].key).toBe(
+      'workspace/ws-1/new-key'
+    )
+    expect(queryFn).toHaveBeenCalledTimes(2)
+    unmount()
+  })
+
+  it('refetches a cached list that no component is observing', async () => {
+    // `refetchType: 'all'` is load-bearing: the retype awaits this before mounting the next viewer,
+    // and the default `active` would resolve instantly against an unobserved list.
+    const queryFn = vi.fn(async () => [{ id: 'file-1', key: 'k' }])
+    const { refresh, queryClient, unmount } = renderRefresh()
+
+    await act(async () => {
+      await queryClient.fetchQuery({ queryKey: workspaceFilesKeys.list(WS, 'active'), queryFn })
+      await refresh()(WS)
+    })
+
+    expect(queryFn).toHaveBeenCalledTimes(2)
+    unmount()
+  })
+
+  it('leaves another workspace list alone', async () => {
+    const otherQueryFn = vi.fn(async () => [{ id: 'file-2', key: 'k2' }])
+    const { refresh, queryClient, unmount } = renderRefresh()
+
+    await act(async () => {
+      await queryClient.fetchQuery({
+        queryKey: workspaceFilesKeys.list('ws-2', 'active'),
+        queryFn: otherQueryFn,
+      })
+      await refresh()(WS)
+    })
+
+    expect(otherQueryFn).toHaveBeenCalledTimes(1)
+    unmount()
+  })
+})

apps/sim/hooks/queries/workspace-files.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
@@ -580,6 +580,30 @@ export function useUpdateWorkspaceFileContent() {
   })
 }
 
+/**
+ * Refetch the workspace file list and resolve once the fresh records have landed.
+ *
+ * Every content write mints a new storage key and deletes the previous blob, so a cached record's
+ * `key` is dead the moment one lands. A caller that is about to mount a viewer from that record -
+ * a retype, which swaps editors optimistically - has to wait for the refreshed list, or the new
+ * viewer fetches a key the store has already deleted.
+ */
+export function useRefreshWorkspaceFiles() {
+  const queryClient = useQueryClient()
+
+  return useCallback(
+    (workspaceId: string) =>
+      queryClient.invalidateQueries({
+        queryKey: workspaceFilesKeys.workspaceLists(workspaceId),
+        // `all`, not the default `active`: the caller awaits this to get a usable key back, and an
+        // invalidation that only marks an unobserved list stale resolves immediately with the dead
+        // key still cached - the exact staleness this exists to close.
+        refetchType: 'all',
+      }),
+    [queryClient]
+  )
+}
+
 /**
  * Rename a workspace file
  */