feat(FN-936): add modal description persistence for re-entry

- Add modalPersistence hook for saving/restoring modal state (description, goal) via localStorage - Update PlanningModeModal to persist and restore description across re-opens - Update SubtaskBreakdownModal to persist and clear description on resume flow - Update MissionInterviewModal to clear goal after starting interview - Add unit tests for modalPersistence hook - Add integration tests for modal re-entry behavior across all three modals - Add changeset for published package patch bump
2026-04-04 15:56:46 -07:00
parent 4b6f4b75b0
commit 3bfaa6070e
8 changed files with 702 additions and 7 deletions
--- a/packages/dashboard/app/components/MissionInterviewModal.tsx
+++ b/packages/dashboard/app/components/MissionInterviewModal.tsx
@@ -13,6 +13,11 @@ import {
  type MissionPlanFeature,
  type MissionWithHierarchy,
 } from "../api";
+import {
+  saveMissionGoal,
+  getMissionGoal,
+  clearMissionGoal,
+} from "../hooks/modalPersistence";
 import {
  Target,
  X,
@@ -90,17 +95,20 @@ export function MissionInterviewModal({
      try {
        const { sessionId } = await startMissionInterview(goal.trim(), projectId);
        currentSessionIdRef.current = sessionId;
+        clearMissionGoal();

        const connection = connectMissionInterviewStream(sessionId, projectId, {
          onThinking: (data) => {
            setStreamingOutput((prev) => prev + data);
          },
          onQuestion: (question) => {
+            clearMissionGoal();
            setView({ type: "question", sessionId, question });
            setStreamingOutput("");
            setHasProgress(true);
          },
          onSummary: (summary) => {
+            clearMissionGoal();
            setView({ type: "summary", sessionId, summary });
            setEditedSummary(summary);
            setStreamingOutput("");
@@ -144,6 +152,12 @@ export function MissionInterviewModal({
        handleStartInterview(initialGoalProp);
      }, 0);
      return () => clearTimeout(timer);
+    } else if (isOpen && !initialGoalProp && !hasAutoStartedRef.current && view.type === "initial") {
+      // Check localStorage for persisted goal when no prop provided
+      const persisted = getMissionGoal();
+      if (persisted) {
+        setMissionGoal(persisted);
+      }
    }
  }, [isOpen, initialGoalProp, view.type, handleStartInterview]);

@@ -164,6 +178,7 @@ export function MissionInterviewModal({

      if (session.status === "awaiting_input" && session.currentQuestion) {
        try {
+          clearMissionGoal();
          const question = JSON.parse(session.currentQuestion) as import("@fusion/core").PlanningQuestion;
          currentSessionIdRef.current = session.id;
          setHasProgress(true);
@@ -173,6 +188,7 @@ export function MissionInterviewModal({
        }
      } else if (session.status === "complete" && session.result) {
        try {
+          clearMissionGoal();
          const summary = JSON.parse(session.result) as MissionPlanSummary;
          currentSessionIdRef.current = session.id;
          setHasProgress(true);
@@ -194,10 +210,12 @@ export function MissionInterviewModal({
            setStreamingOutput((prev) => prev + data);
          },
          onQuestion: (question) => {
+            clearMissionGoal();
            setView({ type: "question", sessionId: session.id, question });
            setStreamingOutput("");
          },
          onSummary: (summary) => {
+            clearMissionGoal();
            setView({ type: "summary", sessionId: session.id, summary });
            setEditedSummary(summary);
            setStreamingOutput("");
@@ -251,6 +269,11 @@ export function MissionInterviewModal({
  }, [isOpen, view]);

  const handleCancel = useCallback(async () => {
+    // Save to localStorage BEFORE any cleanup
+    if (missionGoal) {
+      saveMissionGoal(missionGoal);
+    }
+
    if (hasProgress) {
      if (!confirm("Are you sure you want to close? Your interview progress will be lost.")) {
        return;
@@ -278,7 +301,7 @@ export function MissionInterviewModal({
    setIsCreating(false);
    currentSessionIdRef.current = null;
    onClose();
-  }, [hasProgress, view, onClose, projectId]);
+  }, [missionGoal, hasProgress, view, onClose, projectId]);

  // Escape key handler
  useEffect(() => {
@@ -330,6 +353,7 @@ export function MissionInterviewModal({
    try {
      const mission = await createMissionFromInterview(view.sessionId, editedSummary || undefined, projectId);
      onMissionCreated(mission);
+      clearMissionGoal();
      // Reset state without confirmation
      streamConnectionRef.current?.close();
      streamConnectionRef.current = null;
--- a/packages/dashboard/app/components/PlanningModeModal.tsx
+++ b/packages/dashboard/app/components/PlanningModeModal.tsx
@@ -13,6 +13,11 @@ import {
  type PlanningSession,
  type SubtaskItem,
 } from "../api";
+import {
+  savePlanningDescription,
+  getPlanningDescription,
+  clearPlanningDescription,
+} from "../hooks/modalPersistence";
 import { Lightbulb, X, Loader2, CheckCircle, ArrowLeft, ArrowRight, Sparkles, ListTree, GripVertical, ArrowUp, ArrowDown, Plus, Trash2 } from "lucide-react";

 interface PlanningModeModalProps {
@@ -83,6 +88,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
          setStreamingOutput((prev) => prev + data);
        },
        onQuestion: (question) => {
+          clearPlanningDescription();
          setView({
            type: "question",
            session: { sessionId, currentQuestion: question, summary: null },
@@ -91,6 +97,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
          setHasProgress(true);
        },
        onSummary: (summary) => {
+          clearPlanningDescription();
          setView({
            type: "summary",
            session: { sessionId, currentQuestion: null, summary },
@@ -138,6 +145,12 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
        handleStartPlanning(initialPlanProp);
      }, 0);
      return () => clearTimeout(timer);
+    } else if (isOpen && !initialPlanProp && !hasAutoStartedRef.current && view.type === "initial") {
+      // Check localStorage for persisted description when no prop provided
+      const persisted = getPlanningDescription();
+      if (persisted) {
+        setInitialPlan(persisted);
+      }
    }
  }, [isOpen, initialPlanProp, view.type, handleStartPlanning]);

@@ -153,11 +166,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
        currentSessionIdRef.current = resumeSessionId;

        if (session.status === "awaiting_input" && session.currentQuestion) {
+          clearPlanningDescription();
          const question = JSON.parse(session.currentQuestion);
          setView({ type: "question", session: { sessionId: resumeSessionId, currentQuestion: question, summary: null } });
          if (session.thinkingOutput) setStreamingOutput(session.thinkingOutput);
          setHasProgress(true);
        } else if (session.status === "complete" && session.result) {
+          clearPlanningDescription();
          const summary = JSON.parse(session.result);
          setView({ type: "summary", session: { sessionId: resumeSessionId, currentQuestion: null, summary }, summary });
          setEditedSummary(summary);
@@ -169,11 +184,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
          const connection = connectPlanningStream(resumeSessionId, projectId, {
            onThinking: (data) => setStreamingOutput((prev) => prev + data),
            onQuestion: (question) => {
+              clearPlanningDescription();
              setView({ type: "question", session: { sessionId: resumeSessionId, currentQuestion: question, summary: null } });
              setStreamingOutput("");
              setHasProgress(true);
            },
            onSummary: (summary) => {
+              clearPlanningDescription();
              setView({ type: "summary", session: { sessionId: resumeSessionId, currentQuestion: null, summary }, summary });
              setEditedSummary(summary);
              setStreamingOutput("");
@@ -227,6 +244,11 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
  }, [isOpen, view]);

  const handleCancel = useCallback(async () => {
+    // Save to localStorage BEFORE any cleanup (preserve for re-entry)
+    if (initialPlan) {
+      savePlanningDescription(initialPlan);
+    }
+
    // Show confirmation if user has made progress
    if (hasProgress) {
      if (!confirm("Are you sure you want to close? Your planning progress will be lost.")) {
@@ -254,7 +276,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
    setHasProgress(false);
    currentSessionIdRef.current = null;
    onClose();
-  }, [hasProgress, view, onClose]);
+  }, [initialPlan, hasProgress, view, onClose]);

  // Handle escape key to close
  useEffect(() => {
--- a/packages/dashboard/app/components/SubtaskBreakdownModal.test.tsx
+++ b/packages/dashboard/app/components/SubtaskBreakdownModal.test.tsx
@@ -14,6 +14,12 @@ vi.mock("../api", () => ({
  cancelSubtaskBreakdown: (...args: any[]) => mockCancelSubtaskBreakdown(...args),
 }));

+vi.mock("../hooks/modalPersistence", () => ({
+  saveSubtaskDescription: vi.fn(),
+  getSubtaskDescription: vi.fn(() => ""),
+  clearSubtaskDescription: vi.fn(),
+}));
+
 const SAMPLE_SUBTASKS = [
  { id: "subtask-1", title: "First", description: "Do first", suggestedSize: "S" as const, dependsOn: [] },
  { id: "subtask-2", title: "Second", description: "Do second", suggestedSize: "M" as const, dependsOn: ["subtask-1"] },
--- a/packages/dashboard/app/components/SubtaskBreakdownModal.tsx
+++ b/packages/dashboard/app/components/SubtaskBreakdownModal.tsx
@@ -8,6 +8,11 @@ import {
  fetchAiSession,
  type SubtaskItem,
 } from "../api";
+import {
+  saveSubtaskDescription,
+  getSubtaskDescription,
+  clearSubtaskDescription,
+} from "../hooks/modalPersistence";
 import { CheckCircle, Loader2, ListTree, Plus, Trash2, X, GripVertical, ArrowUp, ArrowDown } from "lucide-react";

 interface SubtaskBreakdownModalProps {
@@ -61,6 +66,8 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
  const [subtasks, setSubtasks] = useState<SubtaskItem[]>([]);
  const [thinkingOutput, setThinkingOutput] = useState("");
  const [showThinking, setShowThinking] = useState(true);
+  // Local description: synced from prop, can fall back to localStorage
+  const [localDescription, setLocalDescription] = useState(initialDescription);
  const [error, setError] = useState<string | null>(null);
  const [dirty, setDirty] = useState(false);
  
@@ -84,6 +91,10 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
  }, [subtasks]);

  const resetState = useCallback(() => {
+    // Save to localStorage before cleanup (preserve for re-entry)
+    if (localDescription) {
+      saveSubtaskDescription(localDescription);
+    }
    streamRef.current?.close();
    streamRef.current = null;
    setView({ type: "initial" });
@@ -93,7 +104,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
    setError(null);
    setDirty(false);
    autoStartedRef.current = false;
-  }, []);
+  }, [localDescription]);

  const handleClose = useCallback(async () => {
    if ((dirty || view.type === "editing" || view.type === "creating") && !confirm("Close subtask breakdown? Unsaved changes will be lost.")) {
@@ -111,17 +122,18 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
  }, [dirty, onClose, resetState, sessionId, view.type, projectId]);

  const beginBreakdown = useCallback(async () => {
-    if (!initialDescription.trim()) return;
+    if (!localDescription.trim()) return;
    setError(null);
    setThinkingOutput("");

    try {
-      const { sessionId } = await startSubtaskBreakdown(initialDescription.trim(), projectId);
+      const { sessionId } = await startSubtaskBreakdown(localDescription.trim(), projectId);
      setView({ type: "generating", sessionId });
      streamRef.current?.close();
      streamRef.current = connectSubtaskStream(sessionId, projectId, {
        onThinking: (data) => setThinkingOutput((prev) => prev + data),
        onSubtasks: (items) => {
+          clearSubtaskDescription();
          setSubtasks(items);
          setView({ type: "editing", sessionId });
          setDirty(false);
@@ -135,7 +147,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
      setError(err.message || "Failed to start subtask breakdown");
      setView({ type: "initial" });
    }
-  }, [initialDescription]);
+  }, [localDescription, projectId]);

  useEffect(() => {
    if (!isOpen) {
@@ -144,8 +156,15 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
    }

    if (isOpen && initialDescription && !autoStartedRef.current) {
+      setLocalDescription(initialDescription);
      autoStartedRef.current = true;
      void beginBreakdown();
+    } else if (isOpen && !initialDescription && !autoStartedRef.current) {
+      // Check localStorage for persisted description when no prop provided
+      const persisted = getSubtaskDescription();
+      if (persisted) {
+        setLocalDescription(persisted);
+      }
    }
  }, [isOpen, initialDescription, beginBreakdown, resetState]);

@@ -163,6 +182,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
          streamRef.current = connectSubtaskStream(resumeSessionId, projectId, {
            onThinking: (data) => setThinkingOutput((prev) => prev + data),
            onSubtasks: (items) => {
+              clearSubtaskDescription();
              setSubtasks(items);
              setView({ type: "editing", sessionId: resumeSessionId });
              setDirty(false);
@@ -173,6 +193,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
            },
          });
        } else if (session.status === "complete" && session.result) {
+          clearSubtaskDescription();
          const items = JSON.parse(session.result) as SubtaskItem[];
          setSubtasks(items);
          setView({ type: "editing", sessionId: resumeSessionId });
@@ -345,7 +366,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
            <div className="planning-initial">
              <div className="planning-view-scroll">
                <p className="text-muted">Preparing to break this task into subtasks.</p>
-                <pre className="planning-thinking-output">{initialDescription}</pre>
+                <pre className="planning-thinking-output">{localDescription}</pre>
              </div>
            </div>
          )}
--- a/packages/dashboard/app/components/tests/ModalReentry.test.tsx
+++ b/packages/dashboard/app/components/tests/ModalReentry.test.tsx
@@ -0,0 +1,410 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+
+// Use vi.hoisted to ensure mock functions are defined before vi.mock factory runs
+const {
+  mockSavePlanningDescription,
+  mockGetPlanningDescription,
+  mockClearPlanningDescription,
+  mockSaveSubtaskDescription,
+  mockGetSubtaskDescription,
+  mockClearSubtaskDescription,
+  mockSaveMissionGoal,
+  mockGetMissionGoal,
+  mockClearMissionGoal,
+} = vi.hoisted(() => ({
+  mockSavePlanningDescription: vi.fn(),
+  mockGetPlanningDescription: vi.fn(() => ""),
+  mockClearPlanningDescription: vi.fn(),
+  mockSaveSubtaskDescription: vi.fn(),
+  mockGetSubtaskDescription: vi.fn(() => ""),
+  mockClearSubtaskDescription: vi.fn(),
+  mockSaveMissionGoal: vi.fn(),
+  mockGetMissionGoal: vi.fn(() => ""),
+  mockClearMissionGoal: vi.fn(),
+}));
+
+vi.mock("../../hooks/modalPersistence", () => ({
+  savePlanningDescription: (...args: any[]) => mockSavePlanningDescription(...args),
+  getPlanningDescription: (...args: any[]) => mockGetPlanningDescription(...args),
+  clearPlanningDescription: (...args: any[]) => mockClearPlanningDescription(...args),
+  saveSubtaskDescription: (...args: any[]) => mockSaveSubtaskDescription(...args),
+  getSubtaskDescription: (...args: any[]) => mockGetSubtaskDescription(...args),
+  clearSubtaskDescription: (...args: any[]) => mockClearSubtaskDescription(...args),
+  saveMissionGoal: (...args: any[]) => mockSaveMissionGoal(...args),
+  getMissionGoal: (...args: any[]) => mockGetMissionGoal(...args),
+  clearMissionGoal: (...args: any[]) => mockClearMissionGoal(...args),
+}));
+
+// Mock the API functions
+const {
+  mockStartPlanningStreaming,
+  mockConnectPlanningStream,
+  mockCancelPlanning,
+  mockCreateTaskFromPlanning,
+  mockRespondToPlanning,
+  mockStartSubtaskBreakdown,
+  mockConnectSubtaskStream,
+  mockCancelSubtaskBreakdown,
+  mockCreateTasksFromBreakdown,
+  mockStartMissionInterview,
+  mockConnectMissionInterviewStream,
+  mockCancelMissionInterview,
+  mockCreateMissionFromInterview,
+} = vi.hoisted(() => ({
+  mockStartPlanningStreaming: vi.fn(),
+  mockConnectPlanningStream: vi.fn(),
+  mockCancelPlanning: vi.fn(),
+  mockCreateTaskFromPlanning: vi.fn(),
+  mockRespondToPlanning: vi.fn(),
+  mockStartSubtaskBreakdown: vi.fn(),
+  mockConnectSubtaskStream: vi.fn(),
+  mockCancelSubtaskBreakdown: vi.fn(),
+  mockCreateTasksFromBreakdown: vi.fn(),
+  mockStartMissionInterview: vi.fn(),
+  mockConnectMissionInterviewStream: vi.fn(),
+  mockCancelMissionInterview: vi.fn(),
+  mockCreateMissionFromInterview: vi.fn(),
+}));
+
+vi.mock("../../api", () => ({
+  startPlanningStreaming: (...args: any[]) => mockStartPlanningStreaming(...args),
+  connectPlanningStream: (...args: any[]) => mockConnectPlanningStream(...args),
+  cancelPlanning: (...args: any[]) => mockCancelPlanning(...args),
+  createTaskFromPlanning: (...args: any[]) => mockCreateTaskFromPlanning(...args),
+  respondToPlanning: (...args: any[]) => mockRespondToPlanning(...args),
+  startSubtaskBreakdown: (...args: any[]) => mockStartSubtaskBreakdown(...args),
+  connectSubtaskStream: (...args: any[]) => mockConnectSubtaskStream(...args),
+  cancelSubtaskBreakdown: (...args: any[]) => mockCancelSubtaskBreakdown(...args),
+  createTasksFromBreakdown: (...args: any[]) => mockCreateTasksFromBreakdown(...args),
+  startMissionInterview: (...args: any[]) => mockStartMissionInterview(...args),
+  connectMissionInterviewStream: (...args: any[]) => mockConnectMissionInterviewStream(...args),
+  cancelMissionInterview: (...args: any[]) => mockCancelMissionInterview(...args),
+  createMissionFromInterview: (...args: any[]) => mockCreateMissionFromInterview(...args),
+  fetchSettings: vi.fn().mockResolvedValue({ modelPresets: [], autoSelectModelPreset: false, defaultPresetBySize: {} }),
+  fetchModels: vi.fn().mockResolvedValue({ models: [], favoriteProviders: [] }),
+  fetchWorkflowSteps: vi.fn().mockResolvedValue([]),
+  refineText: vi.fn(),
+  getRefineErrorMessage: vi.fn((err: any) => err?.message || "Failed to refine"),
+  updateGlobalSettings: vi.fn().mockResolvedValue({}),
+  duplicateTask: vi.fn().mockResolvedValue({}),
+  uploadAttachment: vi.fn(),
+  deleteAttachment: vi.fn(),
+  updateTask: vi.fn(),
+  pauseTask: vi.fn(),
+  unpauseTask: vi.fn(),
+  fetchTaskDetail: vi.fn(),
+  requestSpecRevision: vi.fn(),
+  approvePlan: vi.fn(),
+  rejectPlan: vi.fn(),
+  refineTask: vi.fn(),
+}));
+
+// Import components AFTER mocking
+import { PlanningModeModal } from "../PlanningModeModal";
+import { SubtaskBreakdownModal } from "../SubtaskBreakdownModal";
+import { MissionInterviewModal } from "../MissionInterviewModal";
+
+describe("ModalReentry", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetPlanningDescription.mockReturnValue("");
+    mockGetSubtaskDescription.mockReturnValue("");
+    mockGetMissionGoal.mockReturnValue("");
+
+    // Default API mocks
+    mockStartPlanningStreaming.mockResolvedValue({ sessionId: "planning-session-1" });
+    mockConnectPlanningStream.mockReturnValue({ close: vi.fn(), isConnected: () => true });
+    mockCancelPlanning.mockResolvedValue(undefined);
+    mockCreateTaskFromPlanning.mockResolvedValue({ id: "FN-100" });
+
+    mockStartSubtaskBreakdown.mockResolvedValue({ sessionId: "subtask-session-1" });
+    mockConnectSubtaskStream.mockReturnValue({ close: vi.fn(), isConnected: () => true });
+    mockCancelSubtaskBreakdown.mockResolvedValue(undefined);
+    mockCreateTasksFromBreakdown.mockResolvedValue({ tasks: [{ id: "FN-101" }, { id: "FN-102" }] });
+
+    mockStartMissionInterview.mockResolvedValue({ sessionId: "mission-session-1" });
+    mockConnectMissionInterviewStream.mockReturnValue({ close: vi.fn(), isConnected: () => true });
+    mockCancelMissionInterview.mockResolvedValue(undefined);
+    mockCreateMissionFromInterview.mockResolvedValue({
+      mission: { id: "MSN-001" },
+      slices: [],
+      features: [],
+    });
+
+    vi.stubGlobal("confirm", vi.fn(() => true));
+  });
+
+  // ─── PlanningModeModal ───────────────────────────────────────────────
+
+  describe("PlanningModal re-entry", () => {
+    const defaultProps = {
+      isOpen: true,
+      onClose: vi.fn(),
+      onTaskCreated: vi.fn(),
+      onTasksCreated: vi.fn(),
+      tasks: [],
+    };
+
+    it("reads persisted description from localStorage when no prop provided", async () => {
+      mockGetPlanningDescription.mockReturnValue("Persisted planning description");
+
+      render(<PlanningModeModal {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockGetPlanningDescription).toHaveBeenCalled();
+      });
+
+      // Verify the textarea has the persisted value
+      const textarea = document.getElementById("initial-plan") as HTMLTextAreaElement;
+      expect(textarea).toBeTruthy();
+      expect(textarea.value).toBe("Persisted planning description");
+    });
+
+    it("uses prop value instead of localStorage when initialPlan prop is provided", async () => {
+      mockGetPlanningDescription.mockReturnValue("From localStorage");
+
+      render(<PlanningModeModal {...defaultProps} initialPlan="From prop" />);
+
+      // Wait for auto-start (which reads the prop)
+      await waitFor(() => {
+        expect(mockStartPlanningStreaming).toHaveBeenCalledWith("From prop", undefined);
+      });
+
+      // localStorage should NOT be read since prop was provided
+      expect(mockGetPlanningDescription).not.toHaveBeenCalled();
+    });
+
+    it("clears localStorage when planning session produces events", async () => {
+      // Set up stream to trigger onQuestion which calls clearPlanningDescription
+      mockConnectPlanningStream.mockImplementation((_sid, _pid, handlers) => {
+        setTimeout(() => handlers.onQuestion({ id: "q1", type: "text", question: "Test?" }), 0);
+        return { close: vi.fn(), isConnected: () => true };
+      });
+
+      render(<PlanningModeModal {...defaultProps} initialPlan="Build auth" />);
+
+      await waitFor(() => {
+        expect(mockClearPlanningDescription).toHaveBeenCalled();
+      });
+    });
+
+    it("saves description to localStorage on cancel", async () => {
+      vi.stubGlobal("confirm", vi.fn(() => true));
+
+      const { unmount } = render(<PlanningModeModal {...defaultProps} />);
+
+      // Type something in the textarea
+      const textarea = document.getElementById("initial-plan") as HTMLTextAreaElement;
+      await act(async () => {
+        fireEvent.change(textarea, { target: { value: "My planning text" } });
+      });
+
+      // Click the close button
+      const closeButton = screen.getByLabelText("Close");
+      await act(async () => {
+        fireEvent.click(closeButton);
+      });
+
+      expect(mockSavePlanningDescription).toHaveBeenCalledWith("My planning text");
+      unmount();
+    });
+
+    it("does not save empty description to localStorage on cancel", async () => {
+      vi.stubGlobal("confirm", vi.fn(() => true));
+
+      const { unmount } = render(<PlanningModeModal {...defaultProps} />);
+
+      // Click the close button without typing anything
+      const closeButton = screen.getByLabelText("Close");
+      await act(async () => {
+        fireEvent.click(closeButton);
+      });
+
+      expect(mockSavePlanningDescription).not.toHaveBeenCalled();
+      unmount();
+    });
+  });
+
+  // ─── SubtaskBreakdownModal ───────────────────────────────────────────
+
+  describe("SubtaskBreakdownModal re-entry", () => {
+    const defaultProps = {
+      isOpen: true,
+      onClose: vi.fn(),
+      initialDescription: "",
+      onTasksCreated: vi.fn(),
+    };
+
+    it("reads persisted description from localStorage when no prop provided", async () => {
+      mockGetSubtaskDescription.mockReturnValue("Persisted subtask description");
+
+      render(<SubtaskBreakdownModal {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockGetSubtaskDescription).toHaveBeenCalled();
+      });
+
+      // Verify the persisted description is shown in the pre element
+      await waitFor(() => {
+        expect(screen.getByText("Persisted subtask description")).toBeInTheDocument();
+      });
+    });
+
+    it("uses prop value and starts breakdown immediately when initialDescription is provided", async () => {
+      render(
+        <SubtaskBreakdownModal
+          {...defaultProps}
+          initialDescription="Build a complex feature"
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockStartSubtaskBreakdown).toHaveBeenCalledWith("Build a complex feature", undefined);
+      });
+    });
+
+    it("clears localStorage when subtasks are received", async () => {
+      // Set up the stream to emit subtasks
+      mockConnectSubtaskStream.mockImplementation((_sid, _pid, handlers) => {
+        // Simulate subtasks arriving synchronously
+        handlers.onSubtasks([{ id: "subtask-1", title: "First", description: "", suggestedSize: "M", dependsOn: [] }]);
+        return { close: vi.fn(), isConnected: () => true };
+      });
+
+      render(
+        <SubtaskBreakdownModal
+          {...defaultProps}
+          initialDescription="Break this down"
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockClearSubtaskDescription).toHaveBeenCalled();
+      });
+    });
+
+    it("saves description to localStorage on close", async () => {
+      vi.stubGlobal("confirm", vi.fn(() => true));
+
+      // Set up the stream so the modal can start
+      mockConnectSubtaskStream.mockImplementation((_sid, _pid, handlers) => {
+        handlers.onSubtasks([{ id: "subtask-1", title: "First", description: "", suggestedSize: "M", dependsOn: [] }]);
+        return { close: vi.fn(), isConnected: () => true };
+      });
+
+      const { unmount } = render(
+        <SubtaskBreakdownModal
+          {...defaultProps}
+          initialDescription="Some description"
+        />
+      );
+
+      // Close the modal (resetState is called which saves to localStorage)
+      const closeButton = screen.getByLabelText("Close");
+      await act(async () => {
+        fireEvent.click(closeButton);
+      });
+
+      expect(mockSaveSubtaskDescription).toHaveBeenCalledWith("Some description");
+      unmount();
+    });
+  });
+
+  // ─── MissionInterviewModal ───────────────────────────────────────────
+
+  describe("MissionInterviewModal re-entry", () => {
+    const defaultProps = {
+      isOpen: true,
+      onClose: vi.fn(),
+      onMissionCreated: vi.fn(),
+    };
+
+    it("reads persisted goal from localStorage when no prop provided", async () => {
+      mockGetMissionGoal.mockReturnValue("Persisted mission goal");
+
+      render(<MissionInterviewModal {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockGetMissionGoal).toHaveBeenCalled();
+      });
+
+      // Verify the textarea has the persisted value
+      const textarea = document.getElementById("mission-goal") as HTMLTextAreaElement;
+      expect(textarea).toBeTruthy();
+      expect(textarea.value).toBe("Persisted mission goal");
+    });
+
+    it("uses prop value instead of localStorage when initialGoal prop is provided", async () => {
+      mockGetMissionGoal.mockReturnValue("From localStorage");
+
+      render(<MissionInterviewModal {...defaultProps} initialGoal="From prop" />);
+
+      // Wait for auto-start
+      await waitFor(() => {
+        expect(mockStartMissionInterview).toHaveBeenCalledWith("From prop", undefined);
+      });
+
+      // localStorage should NOT be read since prop was provided
+      expect(mockGetMissionGoal).not.toHaveBeenCalled();
+    });
+
+    it("clears localStorage when interview starts successfully", async () => {
+      render(<MissionInterviewModal {...defaultProps} initialGoal="Build a platform" />);
+
+      await waitFor(() => {
+        expect(mockStartMissionInterview).toHaveBeenCalled();
+      });
+
+      // clearMissionGoal is called immediately after startMissionInterview
+      expect(mockClearMissionGoal).toHaveBeenCalled();
+    });
+
+    it("saves goal to localStorage on cancel", async () => {
+      vi.stubGlobal("confirm", vi.fn(() => true));
+
+      const { unmount } = render(<MissionInterviewModal {...defaultProps} />);
+
+      // Type something in the textarea
+      const textarea = document.getElementById("mission-goal") as HTMLTextAreaElement;
+      await act(async () => {
+        fireEvent.change(textarea, { target: { value: "My mission goal" } });
+      });
+
+      // Click the close button
+      const closeButton = screen.getByLabelText("Close");
+      await act(async () => {
+        fireEvent.click(closeButton);
+      });
+
+      expect(mockSaveMissionGoal).toHaveBeenCalledWith("My mission goal");
+      unmount();
+    });
+
+    it("does not save empty goal to localStorage on cancel", async () => {
+      vi.stubGlobal("confirm", vi.fn(() => true));
+
+      const { unmount } = render(<MissionInterviewModal {...defaultProps} />);
+
+      // Click the close button without typing anything
+      const closeButton = screen.getByLabelText("Close");
+      await act(async () => {
+        fireEvent.click(closeButton);
+      });
+
+      expect(mockSaveMissionGoal).not.toHaveBeenCalled();
+      unmount();
+    });
+  });
+
+  // ─── Cross-modal storage independence ────────────────────────────────
+
+  describe("Storage independence", () => {
+    it("each modal type uses independent persistence functions", () => {
+      // Verify the mock functions are distinct (unit-level independence)
+      expect(mockSavePlanningDescription).not.toBe(mockSaveSubtaskDescription);
+      expect(mockSavePlanningDescription).not.toBe(mockSaveMissionGoal);
+      expect(mockSaveSubtaskDescription).not.toBe(mockSaveMissionGoal);
+    });
+  });
+});
--- a/packages/dashboard/app/hooks/tests/modalPersistence.test.ts
+++ b/packages/dashboard/app/hooks/tests/modalPersistence.test.ts
@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import {
+  STORED_PLANNING_KEY,
+  STORED_SUBTASK_KEY,
+  STORED_MISSION_KEY,
+  savePlanningDescription,
+  getPlanningDescription,
+  clearPlanningDescription,
+  saveSubtaskDescription,
+  getSubtaskDescription,
+  clearSubtaskDescription,
+  saveMissionGoal,
+  getMissionGoal,
+  clearMissionGoal,
+} from "../modalPersistence";
+
+describe("modalPersistence", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  describe("Storage keys are exported", () => {
+    it("exports planning key", () => {
+      expect(STORED_PLANNING_KEY).toBe("kb-planning-last-description");
+    });
+
+    it("exports subtask key", () => {
+      expect(STORED_SUBTASK_KEY).toBe("kb-subtask-last-description");
+    });
+
+    it("exports mission key", () => {
+      expect(STORED_MISSION_KEY).toBe("kb-mission-last-goal");
+    });
+  });
+
+  describe("Planning persistence", () => {
+    it("saves and retrieves planning description", () => {
+      savePlanningDescription("Build authentication");
+      expect(getPlanningDescription()).toBe("Build authentication");
+    });
+
+    it("returns empty string when nothing saved", () => {
+      expect(getPlanningDescription()).toBe("");
+    });
+
+    it("clears correctly", () => {
+      savePlanningDescription("Test");
+      clearPlanningDescription();
+      expect(getPlanningDescription()).toBe("");
+    });
+
+    it("returns empty string when localStorage returns null", () => {
+      vi.spyOn(Storage.prototype, "getItem").mockReturnValue(null);
+      expect(getPlanningDescription()).toBe("");
+      vi.restoreAllMocks();
+    });
+
+    it("overwrites previous value", () => {
+      savePlanningDescription("First");
+      savePlanningDescription("Second");
+      expect(getPlanningDescription()).toBe("Second");
+    });
+  });
+
+  describe("Subtask persistence", () => {
+    it("saves and retrieves subtask description", () => {
+      saveSubtaskDescription("Implement login feature");
+      expect(getSubtaskDescription()).toBe("Implement login feature");
+    });
+
+    it("returns empty string when nothing saved", () => {
+      expect(getSubtaskDescription()).toBe("");
+    });
+
+    it("clears correctly", () => {
+      saveSubtaskDescription("Test");
+      clearSubtaskDescription();
+      expect(getSubtaskDescription()).toBe("");
+    });
+
+    it("overwrites previous value", () => {
+      saveSubtaskDescription("First");
+      saveSubtaskDescription("Second");
+      expect(getSubtaskDescription()).toBe("Second");
+    });
+  });
+
+  describe("Mission persistence", () => {
+    it("saves and retrieves mission goal", () => {
+      saveMissionGoal("Build a SaaS platform");
+      expect(getMissionGoal()).toBe("Build a SaaS platform");
+    });
+
+    it("returns empty string when nothing saved", () => {
+      expect(getMissionGoal()).toBe("");
+    });
+
+    it("clears correctly", () => {
+      saveMissionGoal("Test");
+      clearMissionGoal();
+      expect(getMissionGoal()).toBe("");
+    });
+
+    it("overwrites previous value", () => {
+      saveMissionGoal("First");
+      saveMissionGoal("Second");
+      expect(getMissionGoal()).toBe("Second");
+    });
+  });
+
+  describe("Storage keys are independent", () => {
+    it("planning and subtask do not interfere", () => {
+      savePlanningDescription("planning desc");
+      saveSubtaskDescription("subtask desc");
+      expect(getPlanningDescription()).toBe("planning desc");
+      expect(getSubtaskDescription()).toBe("subtask desc");
+    });
+
+    it("planning and mission do not interfere", () => {
+      savePlanningDescription("planning desc");
+      saveMissionGoal("mission goal");
+      expect(getPlanningDescription()).toBe("planning desc");
+      expect(getMissionGoal()).toBe("mission goal");
+    });
+
+    it("subtask and mission do not interfere", () => {
+      saveSubtaskDescription("subtask desc");
+      saveMissionGoal("mission goal");
+      expect(getSubtaskDescription()).toBe("subtask desc");
+      expect(getMissionGoal()).toBe("mission goal");
+    });
+
+    it("clearing one does not affect others", () => {
+      savePlanningDescription("planning");
+      saveSubtaskDescription("subtask");
+      saveMissionGoal("mission");
+
+      clearSubtaskDescription();
+      expect(getPlanningDescription()).toBe("planning");
+      expect(getSubtaskDescription()).toBe("");
+      expect(getMissionGoal()).toBe("mission");
+    });
+  });
+});
--- a/packages/dashboard/app/hooks/modalPersistence.ts
+++ b/packages/dashboard/app/hooks/modalPersistence.ts
@@ -0,0 +1,61 @@
+// Storage keys — each modal type has independent storage
+export const STORED_PLANNING_KEY = "kb-planning-last-description";
+export const STORED_SUBTASK_KEY = "kb-subtask-last-description";
+export const STORED_MISSION_KEY = "kb-mission-last-goal";
+
+// Planning persistence
+
+export function savePlanningDescription(description: string): void {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(STORED_PLANNING_KEY, description);
+  }
+}
+
+export function getPlanningDescription(): string {
+  if (typeof window === "undefined") return "";
+  return localStorage.getItem(STORED_PLANNING_KEY) || "";
+}
+
+export function clearPlanningDescription(): void {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(STORED_PLANNING_KEY);
+  }
+}
+
+// Subtask persistence
+
+export function saveSubtaskDescription(description: string): void {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(STORED_SUBTASK_KEY, description);
+  }
+}
+
+export function getSubtaskDescription(): string {
+  if (typeof window === "undefined") return "";
+  return localStorage.getItem(STORED_SUBTASK_KEY) || "";
+}
+
+export function clearSubtaskDescription(): void {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(STORED_SUBTASK_KEY);
+  }
+}
+
+// Mission persistence
+
+export function saveMissionGoal(goal: string): void {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(STORED_MISSION_KEY, goal);
+  }
+}
+
+export function getMissionGoal(): string {
+  if (typeof window === "undefined") return "";
+  return localStorage.getItem(STORED_MISSION_KEY) || "";
+}
+
+export function clearMissionGoal(): void {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(STORED_MISSION_KEY);
+  }
+}