fix: Persist new task draft across navigation (#1436)

## Problem

Task input draft in command center cells is lost when navigating away because the creating state uses local useState that resets on unmount.

## Changes

  1. Move isCreating state to persisted creatingCells in command center store
  2. Give each cell a unique draft session ID (cc-cell-{index}) to avoid collisions
  3. Accept optional sessionId prop on TaskInput for cell-specific drafts
  4. Clean up creating state and drafts on task assignment, cancel and layout resize

## How did you test this?

Manually

Author: charlesvien

apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx

@@ -1,11 +1,15 @@
+import { useDraftStore } from "@features/message-editor/stores/draftStore";
 import { TaskInput } from "@features/task-detail/components/TaskInput";
 import { ArrowsOut, Plus, X } from "@phosphor-icons/react";
 import { Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { CommandCenterCellData } from "../hooks/useCommandCenterData";
-import { useCommandCenterStore } from "../stores/commandCenterStore";
+import {
+  getCellSessionId,
+  useCommandCenterStore,
+} from "../stores/commandCenterStore";
 import { CommandCenterSessionView } from "./CommandCenterSessionView";
 import { StatusBadge } from "./StatusBadge";
 import { TaskSelector } from "./TaskSelector";
@@ -17,16 +21,37 @@ interface CommandCenterPanelProps {
 
 function EmptyCell({ cellIndex }: { cellIndex: number }) {
   const [selectorOpen, setSelectorOpen] = useState(false);
-  const [isCreating, setIsCreating] = useState(false);
+  const isCreating = useCommandCenterStore((s) =>
+    s.creatingCells.includes(cellIndex),
+  );
   const assignTask = useCommandCenterStore((s) => s.assignTask);
+  const startCreating = useCommandCenterStore((s) => s.startCreating);
+  const stopCreating = useCommandCenterStore((s) => s.stopCreating);
+  const clearDraft = useDraftStore((s) => s.actions.setDraft);
+
+  const sessionId = getCellSessionId(cellIndex);
 
   const handleTaskCreated = useCallback(
     (task: Task) => {
       assignTask(cellIndex, task.id);
+      clearDraft(sessionId, null);
     },
-    [assignTask, cellIndex],
+    [assignTask, cellIndex, clearDraft, sessionId],
   );
 
+  const handleCancel = useCallback(() => {
+    stopCreating(cellIndex);
+    clearDraft(sessionId, null);
+  }, [stopCreating, cellIndex, clearDraft, sessionId]);
+
+  const wasCreatingRef = useRef(false);
+  useEffect(() => {
+    if (wasCreatingRef.current && !isCreating) {
+      clearDraft(sessionId, null);
+    }
+    wasCreatingRef.current = isCreating;
+  }, [isCreating, clearDraft, sessionId]);
+
   if (isCreating) {
     return (
       <Flex direction="column" height="100%">
@@ -46,15 +71,15 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
           </Text>
           <button
             type="button"
-            onClick={() => setIsCreating(false)}
+            onClick={handleCancel}
             className="flex h-5 w-5 items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-4 hover:text-gray-12"
             title="Cancel"
           >
             <X size={12} />
           </button>
         </Flex>
         <Flex direction="column" className="min-h-0 flex-1">
-          <TaskInput onTaskCreated={handleTaskCreated} />
+          <TaskInput sessionId={sessionId} onTaskCreated={handleTaskCreated} />
         </Flex>
       </Flex>
     );
@@ -67,7 +92,7 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
           cellIndex={cellIndex}
           open={selectorOpen}
           onOpenChange={setSelectorOpen}
-          onNewTask={() => setIsCreating(true)}
+          onNewTask={() => startCreating(cellIndex)}
         >
           <button
             type="button"

apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts

@@ -24,6 +24,7 @@ interface CommandCenterStoreState {
   cells: (string | null)[];
   activeTaskId: string | null;
   zoom: number;
+  creatingCells: number[];
 }
 
 interface CommandCenterStoreActions {
@@ -36,6 +37,8 @@ interface CommandCenterStoreActions {
   setZoom: (zoom: number) => void;
   zoomIn: () => void;
   zoomOut: () => void;
+  startCreating: (cellIndex: number) => void;
+  stopCreating: (cellIndex: number) => void;
 }
 
 type CommandCenterStore = CommandCenterStoreState & CommandCenterStoreActions;
@@ -57,24 +60,33 @@ function clampZoom(value: number): number {
   return Math.round(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value)) * 10) / 10;
 }
 
+export function getCellSessionId(cellIndex: number): string {
+  return `cc-cell-${cellIndex}`;
+}
+
 export const useCommandCenterStore = create<CommandCenterStore>()(
   persist(
     (set) => ({
       layout: "2x2",
       cells: [null, null, null, null],
       activeTaskId: null,
       zoom: 1,
+      creatingCells: [],
 
       setLayout: (preset) =>
-        set((state) => ({
-          activeTaskId: resizeCells(state.cells, getCellCount(preset)).includes(
-            state.activeTaskId,
-          )
-            ? state.activeTaskId
-            : null,
-          layout: preset,
-          cells: resizeCells(state.cells, getCellCount(preset)),
-        })),
+        set((state) => {
+          const newCount = getCellCount(preset);
+          return {
+            activeTaskId: resizeCells(state.cells, newCount).includes(
+              state.activeTaskId,
+            )
+              ? state.activeTaskId
+              : null,
+            layout: preset,
+            cells: resizeCells(state.cells, newCount),
+            creatingCells: state.creatingCells.filter((i) => i < newCount),
+          };
+        }),
 
       setActiveTask: (taskId) => set({ activeTaskId: taskId }),
 
@@ -87,7 +99,11 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
             cells[existingIndex] = null;
           }
           cells[cellIndex] = taskId;
-          return { cells, activeTaskId: taskId };
+          return {
+            cells,
+            activeTaskId: taskId,
+            creatingCells: state.creatingCells.filter((i) => i !== cellIndex),
+          };
         }),
 
       removeTask: (cellIndex) =>
@@ -121,13 +137,26 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
         set((state) => ({
           activeTaskId: null,
           cells: state.cells.map(() => null),
+          creatingCells: [],
         })),
 
       setZoom: (zoom) => set({ zoom: clampZoom(zoom) }),
       zoomIn: () =>
         set((state) => ({ zoom: clampZoom(state.zoom + ZOOM_STEP) })),
       zoomOut: () =>
         set((state) => ({ zoom: clampZoom(state.zoom - ZOOM_STEP) })),
+
+      startCreating: (cellIndex) =>
+        set((state) => ({
+          creatingCells: state.creatingCells.includes(cellIndex)
+            ? state.creatingCells
+            : [...state.creatingCells, cellIndex],
+        })),
+
+      stopCreating: (cellIndex) =>
+        set((state) => ({
+          creatingCells: state.creatingCells.filter((i) => i !== cellIndex),
+        })),
     }),
     {
       name: "command-center-storage",
@@ -137,6 +166,7 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
         cells: state.cells,
         activeTaskId: state.activeTaskId,
         zoom: state.zoom,
+        creatingCells: state.creatingCells,
       }),
     },
   ),

apps/code/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -40,10 +40,14 @@ import { type WorkspaceMode, WorkspaceModeSelect } from "./WorkspaceModeSelect";
 const DOT_FILL = "var(--gray-6)";
 
 interface TaskInputProps {
+  sessionId?: string;
   onTaskCreated?: (task: import("@shared/types").Task) => void;
 }
 
-export function TaskInput({ onTaskCreated }: TaskInputProps = {}) {
+export function TaskInput({
+  sessionId = "task-input",
+  onTaskCreated,
+}: TaskInputProps = {}) {
   const { cloudRegion } = useAuthStore();
   const trpcReact = useTRPC();
   const { view } = useNavigationStore();
@@ -441,7 +445,7 @@ export function TaskInput({ onTaskCreated }: TaskInputProps = {}) {
 
           <TaskInputEditor
             ref={editorRef}
-            sessionId="task-input"
+            sessionId={sessionId}
             repoPath={selectedDirectory}
             isCreatingTask={isCreatingTask}
             canSubmit={canSubmit}