improvement(files): remove Save UI in favor of silent autosave with local-first draft recovery (#5549)

* improvement(files): remove Save UI in favor of silent autosave with local-first draft recovery

Files editor no longer shows a Save/Saving/Save failed button - autosave
already ran in the background, the button was vestigial. Cmd+S still works.

Adds local-first draft persistence to the shared useAutosave hook (opt-in via
draftKey): edits mirror into IndexedDB on a 400ms debounce, independent of the
1.5s network save, and flush best-effort on visibilitychange/pagehide. On
reopen, a newer local draft is silently recovered and resynced. This replaces
the beforeunload "leave site?" warning, which only blocked navigation - it
never actually saved anything.

A toast (with a Retry action) surfaces a save failure, since there's no more
persistent status indicator to show it.

* improvement(files): simplify autosave draft persistence and dedupe editor resync

Structural cleanup after the local-draft feature: draftKey is now ANDed with
enabled inside useAutosave itself (rather than trusting every caller to
replicate that gating), the combined dirty-transition/debounce effect is
split into two single-purpose effects, redundant back-to-back IndexedDB
writes on visibilitychange+pagehide are deduped, a dead identity wrapper
around setDraftContent is removed, and the three near-identical
"resync editor body if changed" blocks in rich-markdown-editor.tsx collapse
into one local helper.

* fix(files): flush pending local draft on unmount, fix stale Retry target

Two real bugs from Greptile's first review pass:
- Unmounting before the 400ms local-draft debounce fired cancelled the
  pending timer without ever writing the draft, so if the network flush
  also failed on the way out, the edit had no backup anywhere. The unmount
  cleanup now calls persistLocalDraft() synchronously before attempting
  the network flush.
- The save-failure toast's Retry action read saveRef.current lazily at
  click time, so navigating to a different file before clicking Retry
  would retry-save the wrong file. It now captures the failing file's
  save function at the moment the toast is created.

* fix(files): Discard Changes now actually resets editor content

Discard previously only cleared the parent's mirrored isDirty/saveStatus
state; the editor's own content was never reset to match the server
baseline. On unmount, useAutosave's flush logic saw content still
diverged and (a) re-saved the "discarded" edit to the server, and (b)
after this PR's local-draft addition, also persisted it to IndexedDB —
so even a future fix to (a) would still have the draft resurrect the
discarded text on next open.

Adds a discardRef bridge (mirrors the existing saveRef pattern) so
Discard resets the editor's draft content back to savedContent before
navigating away, closing both paths at the root.

* fix(files): make Discard deterministic, independent of state-update timing

The previous discard fix (setDraftContent(savedContent) before navigating)
relied on that dispatch landing before the FileViewer unmounts. If unmount
raced ahead of it, the autosave cleanup would still see stale dirty content
and could resurrect the discarded edit via the local draft.

useAutosave now exposes discard(): it flags the instance as discarded,
cancels any pending timers, and clears the local draft immediately. Every
write path (persistLocalDraft, save, the unmount flush) checks that flag
first, so nothing written after discard() can bring the edit back,
regardless of whether the content-reset render has committed yet.

* fix(files): correct in-flight save after discard, fix IndexedDB write/delete ordering

Two more real races from round 4 of review:
- discard() couldn't stop a save that had already started (discardedRef
  only blocks saves not yet begun). Once that in-flight save lands, it
  now schedules a corrective save to push the reverted content, rather
  than leaving the discarded edit on the server permanently. Only fires
  when a save was genuinely in flight at discard time.
- persistLocalDraft's set() and clearLocalDraft's del() were independent
  promises with no ordering guarantee. A slow write starting before
  discard could resolve after discard's delete and resurrect the draft.
  Both now go through a single serialized queue per hook instance, so a
  delete queued after a write always runs after it completes.

* fix(files): make discard's corrective save use an explicit baseline

The corrective save (from the previous fix) relied on the caller's
setDraftContent(savedContent) having landed by the time it ran — a real
race, not a guarantee: React commits that render on its own schedule,
and if the correction's continuation runs first, onSave still reads the
ambient (still-dirty) content ref and re-persists the discarded edit.

onSave now accepts an optional override content; discard() captures
savedContentRef.current as an explicit target at the moment it's called
and passes it through, so the correction always pushes the true reverted
baseline regardless of render timing. Widened the shared onSave type is
backward compatible — the other useAutosave caller (chunk-editor) ignores
the extra optional param.

* fix(files): retry no longer depends on a remount-able shared ref, purge stale drafts

Two more from round 6:
- The failure toast's Retry action captured saveRef.current inside the
  effect reacting to saveStatus='error' — but if the user switched files
  between the failure occurring and that effect committing, the keyed
  remount could have already repointed saveRef at the new file's save
  function first. onSaveStatusChange now passes the failing instance's
  own saveImmediately alongside the 'error' status directly from the
  hook that owns it, so retry can never be sourced from the wrong file
  regardless of remount timing.
- A local draft with a stale (mismatched) baseline was left in IndexedDB
  after being correctly skipped for recovery, so it could resurrect later
  if the server baseline ever coincidentally matched it again. It's now
  purged as soon as it's identified as stale.

* fix(files): clear inFlightRef once a save settles

inFlightRef.current was never reset after a save resolved or rejected —
it stayed pointing at the (now-fulfilled) promise indefinitely. discard()
reads it to decide whether a save is genuinely in flight; since a
resolved promise is still truthy, discard() treated any prior completed
save as still pending, captured savedContentRef.current as the
"corrective" target, and could push a stale baseline if that capture
happened before the save's own dispatch had updated it.

Now cleared to null as soon as the save settles, so discard()'s
in-flight check reflects reality regardless of how long ago the last
save finished.

* fix(files): surface a failed discard correction, resume autosave after discard if editing continues

Two more from round 8:
- If discard()'s corrective save failed, it was only logged — the server
  could permanently keep the discarded edit with zero user-facing signal.
  Now surfaced via a dedicated onDiscardCorrectionFailed callback, which
  closes over the specific file's own name rather than routing through
  the shared onSaveStatusChange path (that path reads whichever file is
  currently selected, which by the time this fires is already the file
  the user navigated to, not the discarded one).
- discardedRef never cleared once set, so if the editor stayed mounted
  briefly after discard (before navigation completes) and the user typed
  again, every save path silently no-op'd forever for that new edit too.
  It now clears itself as soon as a genuinely new edit (content diverging
  from savedContent again) is observed.

* fix(files): serialize local drafts by key across mounts, not just within one

idbQueueRef was a per-instance ref, so it only ordered IndexedDB ops issued
by the same hook instance. A slow write queued by an unmount's flush lived
on as a bare promise after that instance was gone, with nothing sequencing
it against a freshly-mounted instance for the same file — its del() or
recovery read could run first, and the late write would land afterward and
resurrect a draft that was supposed to be gone.

Replaced the per-instance ref with a module-level queue keyed by draft key,
shared by every useAutosave instance (past or present) touching that key,
so ordering holds across a fast unmount+remount of the same file.

* improvement(files): consolidate autosave hook after 9 rounds of incremental fixes

Cosmetic-only pass, no behavior change:
- Hoisted MIN_SAVING_DISPLAY_MS to module scope alongside LOCAL_DRAFT_DELAY_MS
  (was declared inside the hook body, re-allocated every render, inconsistent
  with its sibling constant).
- Grouped the ~15 refs by concern (save/network, content mirrors, draft-key +
  callbacks, local-draft persistence, discard) instead of the chronological
  order they were added across nine review rounds.
- Removed a provably-dead re-check in the unmount cleanup: content/savedContent
  can't change between the outer guard and the inner one (no renders happen
  post-unmount), so only the discardedRef half of the inner check was live.
- Removed an unnecessary useCallback around onDiscardCorrectionFailed — its
  reference is never observed by anything (useAutosave copies it into a ref
  every render regardless of identity), unlike handleSaveStatusChange in
  files.tsx, which is correctly memoized because it flows through
  React.memo-wrapped TextEditor/RichMarkdownEditor.

Validated against external research: the two-tier debounce (network + local
IndexedDB draft) matches how Tiptap/Notion describe their own local-first
persistence; the discardedRef+corrective-save approach over AbortController
is a deliberate, justified choice (onSave has no signal parameter, and an
abort can't undo a write that's already landed server-side); the module-level
per-key promise queue is a recognized idiomatic pattern. Splitting this hook
into three smaller ones (useDebouncedSave/useLocalDraft/useDiscard) is a
legitimate future refactor, deliberately deferred given the risk of touching
this heavily-interdependent, already-hardened state this late in review.

* fix(files): serialize discard correction against newer saves, recover local drafts only once per mount

Two more real races, both interactions between earlier fixes:
- discard()'s corrective save and a genuinely new edit made right after
  could race independently: if the user typed again before the correction
  fired, and that correction landed after the new edit's own save, the
  server would end up with the discarded baseline instead of the user's
  latest content. The correction now shares the same inFlightRef/savingRef
  mutual exclusion normal saves use, and skips entirely once content has
  moved on to something that's neither the discarded baseline nor what it
  was at the moment discard() was called.
- The local-draft recovery effect re-ran every time draftKey toggled
  through enabled (e.g. autosave turning off during agent streaming and
  back on once it settles), re-scanning IndexedDB as if freshly mounted.
  If the settled content coincidentally matched the stale draft's stored
  baseline, a pre-stream local edit could silently overwrite the agent's
  work. Recovery now attempts exactly once per mount.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -99,8 +99,12 @@ interface FileViewerProps {
   previewMode?: PreviewMode
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
-  onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
+  onSaveStatusChange?: (
+    status: 'idle' | 'saving' | 'saved' | 'error',
+    retry?: () => Promise<void>
+  ) => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
+  discardRef?: React.MutableRefObject<(() => void) | null>
   streamingContent?: string
   isAgentEditing?: boolean
   streamIsIncremental?: boolean
@@ -131,6 +135,7 @@ function FileViewerContent({
   onDirtyChange,
   onSaveStatusChange,
   saveRef,
+  discardRef,
   streamingContent,
   isAgentEditing,
   streamIsIncremental,
@@ -174,6 +179,7 @@ function FileViewerContent({
           onDirtyChange={onDirtyChange}
           onSaveStatusChange={onSaveStatusChange}
           saveRef={saveRef}
+          discardRef={discardRef}
           streamingContent={streamingContent}
           isAgentEditing={isAgentEditing}
           streamIsIncremental={streamIsIncremental}
@@ -193,6 +199,7 @@ function FileViewerContent({
         onDirtyChange={onDirtyChange}
         onSaveStatusChange={onSaveStatusChange}
         saveRef={saveRef}
+        discardRef={discardRef}
         streamingContent={streamingContent}
         isAgentEditing={isAgentEditing}
         disableStreamingAutoScroll={disableStreamingAutoScroll}

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -45,8 +45,9 @@ interface RichMarkdownEditorProps {
   canEdit: boolean
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
-  onSaveStatusChange?: (status: SaveStatus) => void
+  onSaveStatusChange?: (status: SaveStatus, retry?: () => Promise<void>) => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
+  discardRef?: React.MutableRefObject<(() => void) | null>
   streamingContent?: string
   isAgentEditing?: boolean
   /**
@@ -70,6 +71,7 @@ export const RichMarkdownEditor = memo(function RichMarkdownEditor({
   onDirtyChange,
   onSaveStatusChange,
   saveRef,
+  discardRef,
   streamingContent,
   isAgentEditing,
   streamIsIncremental,
@@ -93,6 +95,7 @@ export const RichMarkdownEditor = memo(function RichMarkdownEditor({
     onDirtyChange,
     onSaveStatusChange,
     saveRef,
+    discardRef,
     normalizeBaseline: normalizeMarkdownContent,
   })
 
@@ -356,6 +359,14 @@ export function LoadedRichMarkdownEditor({
   const lastStreamParseAtRef = useRef(0)
   useEffect(() => {
     if (!editor) return
+    const syncEditorBody = (body: string) => {
+      if (body === lastSyncedBodyRef.current) return
+      lastSyncedBodyRef.current = body
+      editor.commands.setContent(parseMarkdownToDoc(body), {
+        contentType: 'json',
+        emitUpdate: false,
+      })
+    }
     if (isStreaming) {
       wasStreamingRef.current = true
       if (editor.isEditable) editor.setEditable(false)
@@ -407,14 +418,7 @@ export function LoadedRichMarkdownEditor({
     if (isInitialSettle || wasStreamingRef.current) {
       wasStreamingRef.current = false
       settledRef.current = lockSettled(content)
-      const body = splitFrontmatter(content).body
-      if (body !== lastSyncedBodyRef.current) {
-        lastSyncedBodyRef.current = body
-        editor.commands.setContent(parseMarkdownToDoc(body), {
-          contentType: 'json',
-          emitUpdate: false,
-        })
-      }
+      syncEditorBody(splitFrontmatter(content).body)
       // `setContent` maps any pre-existing selection onto the new doc rather than clearing it — a
       // select-all survives as "select everything," permanently painting every divider/image with the
       // `rich-leaf-in-selection` decoration (keymap.ts) until the user clicks elsewhere. This must run
@@ -428,6 +432,7 @@ export function LoadedRichMarkdownEditor({
       if (isInitialSettle && autoFocus) editor.commands.focus('end')
       return
     }
+    syncEditorBody(splitFrontmatter(content).body)
     if (settledRef.current) editor.setEditable(canEdit && settledRef.current.verdict)
   }, [editor, content, isStreaming, canEdit, autoFocus, disableStreamingAutoScroll])
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx

@@ -328,8 +328,12 @@ interface TextEditorProps {
   previewMode: PreviewMode
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
-  onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
+  onSaveStatusChange?: (
+    status: 'idle' | 'saving' | 'saved' | 'error',
+    retry?: () => Promise<void>
+  ) => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
+  discardRef?: React.MutableRefObject<(() => void) | null>
   streamingContent?: string
   isAgentEditing?: boolean
   disableStreamingAutoScroll: boolean
@@ -345,6 +349,7 @@ export const TextEditor = memo(function TextEditor({
   onDirtyChange,
   onSaveStatusChange,
   saveRef,
+  discardRef,
   streamingContent,
   isAgentEditing,
   disableStreamingAutoScroll,
@@ -385,6 +390,7 @@ export const TextEditor = memo(function TextEditor({
     onDirtyChange,
     onSaveStatusChange,
     saveRef,
+    discardRef,
   })
   contentRef.current = content
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-editable-file-content.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react'
+import { toast } from '@sim/emcn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import {
   useUpdateWorkspaceFileContent,
@@ -34,8 +35,11 @@ interface UseEditableFileContentOptions {
   streamingContent?: string
   isAgentEditing?: boolean
   onDirtyChange?: (isDirty: boolean) => void
-  onSaveStatusChange?: (status: SaveStatus) => void
+  /** `retry` is this instance's own `saveImmediately`, passed alongside an `'error'` status so a caller-side retry never depends on a shared, remount-able ref. */
+  onSaveStatusChange?: (status: SaveStatus, retry?: () => Promise<void>) => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
+  /** Bridges an imperative "discard the current draft" command up to the caller, mirroring `saveRef`. */
+  discardRef?: React.MutableRefObject<(() => void) | null>
   /**
    * Optional transform applied to the fetched content before it becomes the editor's baseline. A
    * surface whose editor re-serializes its content to a canonical form (the rich markdown editor)
@@ -115,6 +119,7 @@ export function useEditableFileContent({
   onDirtyChange,
   onSaveStatusChange,
   saveRef,
+  discardRef,
   normalizeBaseline,
 }: UseEditableFileContentOptions): EditableFileContent {
   const onDirtyChangeRef = useRef(onDirtyChange)
@@ -182,26 +187,40 @@ export function useEditableFileContent({
   const contentRef = useRef(content)
   contentRef.current = content
 
-  const onSave = useCallback(async () => {
-    const next = contentRef.current
-    await updateContentRef.current.mutateAsync({ workspaceId, fileId: file.id, content: next })
-    markSavedContent(next)
-  }, [workspaceId, file.id, markSavedContent])
+  const onSave = useCallback(
+    async (overrideContent?: string) => {
+      const next = overrideContent ?? contentRef.current
+      await updateContentRef.current.mutateAsync({ workspaceId, fileId: file.id, content: next })
+      markSavedContent(next)
+    },
+    [workspaceId, file.id, markSavedContent]
+  )
+
+  const autosaveEnabled = canEdit && isInitialized && !isStreamInteractionLocked
 
-  const { saveStatus, saveImmediately, isDirty } = useAutosave({
+  const { saveStatus, saveImmediately, isDirty, discard } = useAutosave({
     content,
     savedContent,
     onSave,
-    enabled: canEdit && isInitialized && !isStreamInteractionLocked,
+    enabled: autosaveEnabled,
+    draftKey: autosaveEnabled ? `${workspaceId}:${file.id}` : undefined,
+    onRestoreDraft: setDraftContent,
+    onDiscardCorrectionFailed: () =>
+      toast.error(
+        `Failed to discard "${file.name}" — the server may still have the discarded edit`
+      ),
   })
 
   useEffect(() => {
     onDirtyChangeRef.current?.(isDirty)
   }, [isDirty])
 
   useEffect(() => {
-    onSaveStatusChangeRef.current?.(saveStatus)
-  }, [saveStatus])
+    onSaveStatusChangeRef.current?.(
+      saveStatus,
+      saveStatus === 'error' ? saveImmediately : undefined
+    )
+  }, [saveStatus, saveImmediately])
 
   useEffect(() => {
     if (!saveRef) return
@@ -213,6 +232,21 @@ export function useEditableFileContent({
     }
   }, [saveImmediately, saveRef])
 
+  const discardChanges = useCallback(() => {
+    discard()
+    setDraftContent(savedContent)
+  }, [discard, setDraftContent, savedContent])
+
+  useEffect(() => {
+    if (!discardRef) return
+    discardRef.current = discardChanges
+    return () => {
+      if (discardRef.current === discardChanges) {
+        discardRef.current = null
+      }
+    }
+  }, [discardChanges, discardRef])
+
   return {
     content: displayContent,
     setDraftContent,

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

@@ -171,6 +171,7 @@ function formatFileType(mimeType: string | null, filename: string): string {
 export function Files() {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const saveRef = useRef<(() => Promise<void>) | null>(null)
+  const discardRef = useRef<(() => void) | null>(null)
 
   const params = useParams()
   const router = useRouter()
@@ -970,6 +971,15 @@ export function Files() {
     await saveRef.current()
   }, [])
 
+  const handleSaveStatusChange = useCallback((status: SaveStatus, retry?: () => Promise<void>) => {
+    setSaveStatus(status)
+    if (status === 'error') {
+      toast.error(`Failed to save "${selectedFileRef.current?.name ?? 'file'}"`, {
+        action: { label: 'Retry', onClick: () => void retry?.() },
+      })
+    }
+  }, [])
+
   const handleNavigateFromFileDetail = useCallback(
     (url: string) => {
       if (isDirtyRef.current) {
@@ -1106,6 +1116,7 @@ export function Files() {
   ])
 
   const handleDiscardChanges = () => {
+    discardRef.current?.()
     setShowUnsavedChangesAlert(false)
     setIsDirty(false)
     setSaveStatus('idle')
@@ -1358,16 +1369,8 @@ export function Files() {
         handleSave()
       }
     }
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (!isDirtyRef.current) return
-      e.preventDefault()
-    }
     window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('beforeunload', handleBeforeUnload)
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('beforeunload', handleBeforeUnload)
-    }
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [handleSave])
 
   const selectedRowIdsRef = useRef(selectedRowIds)
@@ -1428,43 +1431,21 @@ export function Files() {
   const fileActions = useMemo<ResourceAction[]>(() => {
     if (!selectedFile) return []
     // A large CSV renders as a read-only streamed preview (no editor), so it gets neither the
-    // Save action nor the edit/split/preview toggle — just like a non-editable file.
+    // edit/split/preview toggle nor autosave — just like a non-editable file.
     const streamOnly = isCsvStreamOnly(selectedFile)
     const canEditText = isTextEditable(selectedFile) && !streamOnly
     const canPreview = isPreviewable(selectedFile) && !streamOnly
-    // Markdown renders in the single-surface inline editor, which has no raw/split/preview
-    // modes — so it keeps Save but drops the mode toggle.
+    // Markdown renders in the single-surface inline editor, which has no raw/split/preview modes.
     const isInlineMarkdown = isMarkdownFile(selectedFile)
     const hasSplitView = canEditText && canPreview && !isInlineMarkdown
     const showPreviewToggle = canPreview && !isInlineMarkdown
 
-    const saveLabel =
-      saveStatus === 'saving'
-        ? 'Saving...'
-        : saveStatus === 'saved'
-          ? 'Saved'
-          : saveStatus === 'error'
-            ? 'Save failed'
-            : 'Save'
-
     const nextModeLabel =
       previewMode === 'editor' ? 'Split' : previewMode === 'split' ? 'Preview' : 'Edit'
     const nextModeIcon =
       previewMode === 'editor' ? Columns2 : previewMode === 'split' ? Eye : Pencil
 
     return [
-      ...(canEditText
-        ? [
-            {
-              text: saveLabel,
-              onSelect: handleSave,
-              disabled:
-                (!isDirty && saveStatus === 'idle') ||
-                saveStatus === 'saving' ||
-                saveStatus === 'saved',
-            },
-          ]
-        : []),
       ...(hasSplitView
         ? [
             {
@@ -1505,12 +1486,9 @@ export function Files() {
   }, [
     selectedFile,
     canEdit,
-    saveStatus,
     previewMode,
-    isDirty,
     handleCyclePreviewMode,
     handleTogglePreview,
-    handleSave,
     handleDownloadSelected,
     handleShareSelected,
     handleDeleteSelected,
@@ -1897,8 +1875,9 @@ export function Files() {
             previewMode={previewMode}
             autoFocus={isNewFile || justCreatedFileIdRef.current === selectedFile.id}
             onDirtyChange={setIsDirty}
-            onSaveStatusChange={setSaveStatus}
+            onSaveStatusChange={handleSaveStatusChange}
             saveRef={saveRef}
+            discardRef={discardRef}
           />
 
           <ChipConfirmModal