Fix draft save mid-edit race and discard-confirm overlay

- markSynced now only clears the dirty flag when the live draft still matches the persisted snapshot, so a gloss edit made during an in-flight Save / Save As no longer clears the unsaved-changes indicator while the project is left stale. The save paths pass the analysis they wrote.
- The discard-changes confirmation overlays the active modal instead of replacing it, so canceling returns to the Create dialog with its typed input intact, and confirming Open no longer unmounts and re-fetches the still-open select modal underneath.

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

Author: alex-rawlings-yyc

src/__tests__/components/modals/ProjectModals.test.tsx

@@ -471,9 +471,10 @@ describe('ProjectModals', () => {
       render(<ProjectModals {...buildProps({ modal: 'select', dirty: true, loadFromProject })} />);
 
       await userEvent.click(screen.getByTestId('select-select'));
-      // The discard confirm replaces the select modal; the project is not opened yet.
+      // The discard confirm overlays the still-mounted select modal (so confirming Open does not
+      // unmount and re-fetch it); the project is not opened yet.
       expect(screen.getByTestId('discard-modal')).toBeInTheDocument();
-      expect(screen.queryByTestId('select-modal')).toBeNull();
+      expect(screen.getByTestId('select-modal')).toBeInTheDocument();
       expect(loadFromProject).not.toHaveBeenCalled();
 
       await userEvent.click(screen.getByTestId('discard-confirm'));

src/__tests__/hooks/useDraftProject.test.ts

@@ -320,20 +320,42 @@ describe('useDraftProject', () => {
     it('clears dirty and persists the synced draft without bumping the version', async () => {
       const { result } = await renderLoaded();
       // Make the draft dirty first so the transition to synced is observable.
+      const synced = analysisWithToken('tok-sync');
       act(() => {
-        result.current.autosaveAnalysis(analysisWithToken('tok-sync'));
+        result.current.autosaveAnalysis(synced);
       });
       expect(result.current.dirty).toBe(true);
       const versionBefore = result.current.draftVersion;
 
       act(() => {
-        result.current.markSynced();
+        result.current.markSynced(synced);
       });
 
       expect(result.current.dirty).toBe(false);
       expect(result.current.draftVersion).toBe(versionBefore);
       expect(lastSavedDraft().dirty).toBe(false);
     });
+
+    it('leaves the draft dirty when an edit landed since the saved snapshot', async () => {
+      const { result } = await renderLoaded();
+      // The analysis that a Save captured and persisted.
+      const savedSnapshot = analysisWithToken('tok-saved');
+      act(() => {
+        result.current.autosaveAnalysis(savedSnapshot);
+      });
+      // A newer edit lands during the save round-trip, replacing the ref's analysis.
+      act(() => {
+        result.current.autosaveAnalysis(analysisWithToken('tok-newer'));
+      });
+      expect(result.current.dirty).toBe(true);
+
+      // Syncing against the now-stale snapshot must not clear the unsaved-changes flag.
+      act(() => {
+        result.current.markSynced(savedSnapshot);
+      });
+
+      expect(result.current.dirty).toBe(true);
+    });
   });
 
   describe('getDraftSnapshot', () => {

src/components/InterlinearizerLoader.tsx

@@ -265,7 +265,7 @@ function InterlinearizerLoaderInner({
         activeProject.id,
         JSON.stringify(snapshot.analysis),
       );
-      markSynced();
+      markSynced(snapshot.analysis);
     } catch (e) {
       logger.error('Interlinearizer: failed to save draft to project', e);
     }

src/components/modals/ProjectModals.tsx

@@ -1,6 +1,6 @@
 import type { UseWebViewStateHook } from '@papi/core';
 import papi, { logger } from '@papi/frontend';
-import type { DraftProject } from 'interlinearizer';
+import type { DraftProject, TextAnalysis } from 'interlinearizer';
 import { useCallback, useState } from 'react';
 import type { NewDraftConfig, OpenableProject } from '../../hooks/useDraftProject';
 import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
@@ -23,11 +23,12 @@ type PendingReplace =
   | { kind: 'open'; project: InterlinearProjectSummary };
 
 /**
- * Single mount point for all project-related dialogs. Renders at most one of
- * {@link SelectInterlinearProjectModal}, {@link CreateProjectModal}, {@link ProjectMetadataModal},
- * {@link SaveAsProjectModal}, or the {@link DiscardDraftConfirm} guard; manages the shared WebView
- * state for the active project; and routes New / Open / Save As through the draft (rather than
- * persisting projects directly on every edit).
+ * Single mount point for all project-related dialogs. Renders the active one of
+ * {@link SelectInterlinearProjectModal}, {@link CreateProjectModal}, {@link ProjectMetadataModal}, or
+ * {@link SaveAsProjectModal}, with the {@link DiscardDraftConfirm} guard overlaid on top when a
+ * draft-replacing action is pending (so canceling returns to the underlying modal with its state
+ * intact); manages the shared WebView state for the active project; and routes New / Open / Save As
+ * through the draft (rather than persisting projects directly on every edit).
  *
  * @param props - Component props
  * @param props.activeProject - The currently active interlinear project (the Save target), read
@@ -40,7 +41,8 @@ type PendingReplace =
  *   on Save As.
  * @param props.loadFromProject - Loads a project's analysis + config into the draft (the "Open"
  *   flow).
- * @param props.markSynced - Marks the draft as saved (clears `dirty`) after a successful Save As.
+ * @param props.markSynced - Marks the draft as saved (clears `dirty`) after a successful Save As,
+ *   given the analysis that was persisted; a no-op if an edit landed during the save.
  * @param props.modal - Which modal is currently open.
  * @param props.projectId - PAPI source project ID passed from the host.
  * @param props.resetDraft - Resets the draft to an empty baseline with the given config (the "New"
@@ -68,7 +70,7 @@ export default function ProjectModals({
   dirty: boolean;
   getDraftSnapshot: () => DraftProject | undefined;
   loadFromProject: (project: OpenableProject) => void;
-  markSynced: () => void;
+  markSynced: (savedAnalysis: TextAnalysis) => void;
   modal: ModalState;
   projectId: string;
   resetDraft: (config: NewDraftConfig) => void;
@@ -282,7 +284,7 @@ export default function ProjectModals({
           JSON.stringify(snapshot.analysis),
         );
         setActiveProject(created);
-        markSynced();
+        markSynced(snapshot.analysis);
         setModal('none');
       } catch (e) {
         logger.error('Interlinearizer: failed to save draft as new project', e);
@@ -311,7 +313,7 @@ export default function ProjectModals({
           JSON.stringify(snapshot.analysis),
         );
         setActiveProject(project);
-        markSynced();
+        markSynced(snapshot.analysis);
         setModal('none');
       } catch (e) {
         logger.error('Interlinearizer: failed to overwrite project with draft', e);
@@ -358,54 +360,55 @@ export default function ProjectModals({
 
   return (
     <div>
-      {pendingReplace ? (
-        <DiscardDraftConfirm onConfirm={handleConfirmReplace} onCancel={handleCancelReplace} />
-      ) : (
-        <>
-          {modal === 'select' && (
-            <SelectInterlinearProjectModal
-              sourceProjectId={projectId}
-              onSelect={handleSelectProject}
-              onCreateNew={handleSelectCreateNew}
-              onClose={handleSelectClose}
-              onViewInfo={handleViewInfo}
-            />
-          )}
+      {modal === 'select' && (
+        <SelectInterlinearProjectModal
+          sourceProjectId={projectId}
+          onSelect={handleSelectProject}
+          onCreateNew={handleSelectCreateNew}
+          onClose={handleSelectClose}
+          onViewInfo={handleViewInfo}
+        />
+      )}
 
-          {modal === 'create' && (
-            <CreateProjectModal
-              defaultAnalysisLanguage={defaultAnalysisLanguage}
-              onClose={handleCreateClose}
-              onCreateDraft={handleCreateDraft}
-            />
-          )}
+      {modal === 'create' && (
+        <CreateProjectModal
+          defaultAnalysisLanguage={defaultAnalysisLanguage}
+          onClose={handleCreateClose}
+          onCreateDraft={handleCreateDraft}
+        />
+      )}
 
-          {modal === 'saveAs' && (
-            <SaveAsProjectModal
-              sourceProjectId={projectId}
-              defaultName={draftSnapshot?.suggestedName}
-              defaultDescription={draftSnapshot?.suggestedDescription}
-              onSaveNew={handleSaveAsNew}
-              onOverwrite={handleOverwrite}
-              onClose={handleSaveAsClose}
-            />
-          )}
+      {modal === 'saveAs' && (
+        <SaveAsProjectModal
+          sourceProjectId={projectId}
+          defaultName={draftSnapshot?.suggestedName}
+          defaultDescription={draftSnapshot?.suggestedDescription}
+          onSaveNew={handleSaveAsNew}
+          onOverwrite={handleOverwrite}
+          onClose={handleSaveAsClose}
+        />
+      )}
 
-          {modal === 'metadata' && resolvedMetadataProject && (
-            <ProjectMetadataModal
-              interlinearProjectId={resolvedMetadataProject.id}
-              name={resolvedMetadataProject.name}
-              description={resolvedMetadataProject.description}
-              sourceProjectId={resolvedMetadataProject.sourceProjectId}
-              targetProjectId={resolvedMetadataProject.targetProjectId}
-              analysisLanguages={resolvedMetadataProject.analysisLanguages}
-              createdAt={resolvedMetadataProject.createdAt}
-              onClose={handleMetadataClose}
-              onProjectSaved={handleMetadataProjectSaved}
-              onProjectDeleted={handleMetadataProjectDeleted}
-            />
-          )}
-        </>
+      {modal === 'metadata' && resolvedMetadataProject && (
+        <ProjectMetadataModal
+          interlinearProjectId={resolvedMetadataProject.id}
+          name={resolvedMetadataProject.name}
+          description={resolvedMetadataProject.description}
+          sourceProjectId={resolvedMetadataProject.sourceProjectId}
+          targetProjectId={resolvedMetadataProject.targetProjectId}
+          analysisLanguages={resolvedMetadataProject.analysisLanguages}
+          createdAt={resolvedMetadataProject.createdAt}
+          onClose={handleMetadataClose}
+          onProjectSaved={handleMetadataProjectSaved}
+          onProjectDeleted={handleMetadataProjectDeleted}
+        />
+      )}
+
+      {/* The discard guard overlays the active modal rather than replacing it, so canceling
+          returns to that modal with its in-progress input intact, and confirming an Open does not
+          unmount (and re-fetch) the still-open select modal underneath. */}
+      {pendingReplace && (
+        <DiscardDraftConfirm onConfirm={handleConfirmReplace} onCancel={handleCancelReplace} />
       )}
     </div>
   );

src/hooks/useDraftProject.ts

@@ -79,8 +79,16 @@ export type UseDraftProjectResult = {
   wipeBook: (bookCode: string) => void;
   /** Clears the draft's analysis entirely and marks it dirty. */
   wipeAll: () => void;
-  /** Marks the draft as synced (not dirty) after a successful Save / Save As. */
-  markSynced: () => void;
+  /**
+   * Marks the draft as synced (not dirty) after a successful Save / Save As — but only when the
+   * draft has not changed since the snapshot that was persisted. Pass the exact analysis that was
+   * written; if a later auto-save replaced it (an edit made during the save round-trip), the draft
+   * is left dirty so the unsaved-changes indicator and the next Save reflect that un-persisted edit
+   * rather than being cleared against a now-stale snapshot.
+   *
+   * @param savedAnalysis - The `TextAnalysis` reference that was actually persisted to the project.
+   */
+  markSynced: (savedAnalysis: TextAnalysis) => void;
 };
 
 /**
@@ -246,15 +254,23 @@ export default function useDraftProject(
     applyReplacement({ ...current, analysis: emptyAnalysis(), dirty: true });
   }, [applyReplacement]);
 
-  const markSynced = useCallback(() => {
-    const { current } = draftRef;
-    /* v8 ignore next -- save is only reachable from the mounted editor */
-    if (!current) return;
-    const next: DraftProject = { ...current, dirty: false };
-    draftRef.current = next;
-    persist(next);
-    setDirty(false);
-  }, [persist]);
+  const markSynced = useCallback(
+    (savedAnalysis: TextAnalysis) => {
+      const { current } = draftRef;
+      /* v8 ignore next -- save is only reachable from the mounted editor */
+      if (!current) return;
+      // If an edit landed during the save round-trip, autosaveAnalysis has already swapped a newer
+      // analysis (a fresh object) into the ref and marked the draft dirty. Leave it dirty so the
+      // unsaved indicator and the next Save reflect that un-persisted edit, rather than clearing it
+      // against the now-stale snapshot we just wrote.
+      if (current.analysis !== savedAnalysis) return;
+      const next: DraftProject = { ...current, dirty: false };
+      draftRef.current = next;
+      persist(next);
+      setDirty(false);
+    },
+    [persist],
+  );
 
   return {
     isDraftLoading,