Restore draft on mount or when sessionId/editor changes

Author: charlesvien

apps/array/src/renderer/features/message-editor/stores/draftStore.ts

@@ -1,4 +1,5 @@
 import type { AvailableCommand } from "@agentclientprotocol/sdk";
+import { electronStorage } from "@renderer/lib/electronStorage";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
@@ -52,16 +53,19 @@ export const useDraftStore = create<DraftStore>()(
       _hasHydrated: false,
 
       actions: {
-        setHasHydrated: (hydrated) => set({ _hasHydrated: hydrated }),
+        setHasHydrated: (hydrated) => {
+          set({ _hasHydrated: hydrated });
+        },
 
-        setDraft: (sessionId, draft) =>
+        setDraft: (sessionId, draft) => {
           set((state) => {
             if (draft === null) {
               delete state.drafts[sessionId];
             } else {
               state.drafts[sessionId] = draft;
             }
-          }),
+          });
+        },
 
         getDraft: (sessionId) => get().drafts[sessionId] ?? null,
 
@@ -110,6 +114,7 @@ export const useDraftStore = create<DraftStore>()(
     })),
     {
       name: "message-editor-drafts",
+      storage: electronStorage,
       partialize: (state) => ({ drafts: state.drafts }),
       onRehydrateStorage: () => (state) => {
         state?.actions.setHasHydrated(true);

apps/array/src/renderer/features/message-editor/tiptap/useDraftSync.ts

@@ -103,13 +103,27 @@ export function useDraftSync(
   context?: DraftContext,
 ) {
   const hasRestoredRef = useRef(false);
+  const lastSessionIdRef = useRef(sessionId);
+  const lastEditorRef = useRef(editor);
   const editorRef = useRef(editor);
   editorRef.current = editor;
 
   const draftActions = useDraftStore((s) => s.actions);
   const draft = useDraftStore((s) => s.drafts[sessionId] ?? null);
   const hasHydrated = useDraftStore((s) => s._hasHydrated);
 
+  // Reset restoration flag when sessionId changes (e.g., navigating between tasks)
+  if (lastSessionIdRef.current !== sessionId) {
+    lastSessionIdRef.current = sessionId;
+    hasRestoredRef.current = false;
+  }
+
+  // Reset restoration flag when editor instance changes (e.g., when disabled state changes)
+  if (lastEditorRef.current !== editor && editor !== null) {
+    lastEditorRef.current = editor;
+    hasRestoredRef.current = false;
+  }
+
   // Set context for this session
   useLayoutEffect(() => {
     draftActions.setContext(sessionId, {
@@ -121,7 +135,7 @@ export function useDraftSync(
     };
   }, [sessionId, context?.taskId, context?.repoPath, draftActions]);
 
-  // Restore draft on mount
+  // Restore draft on mount or when sessionId/editor changes
   useLayoutEffect(() => {
     if (!hasHydrated || !editor || hasRestoredRef.current) return;
     if (!draft || isContentEmpty(draft)) return;
@@ -137,14 +151,18 @@ export function useDraftSync(
 
   const saveDraft = useCallback(
     (e: Editor) => {
+      // Don't save until store has hydrated from storage
+      // This prevents overwriting stored drafts with empty content before restoration
+      if (!hasHydrated) return;
+
       const json = e.getJSON();
       const content = tiptapJsonToEditorContent(json);
       draftActions.setDraft(
         sessionId,
         isContentEmpty(content) ? null : content,
       );
     },
-    [sessionId, draftActions],
+    [sessionId, draftActions, hasHydrated],
   );
 
   const clearDraft = useCallback(() => {