From c843c89a34e7dfaa1aaa4a4b49bc5ecb5b3eed6f Mon Sep 17 00:00:00 2001
From: Charles Vien <charles.v@posthog.com>
Date: Wed, 1 Apr 2026 17:39:16 -0700
Subject: [PATCH 1/2] Persist new task draft across navigation

---
 .../components/CommandCenterPanel.tsx         | 28 +++++++++--
 .../stores/commandCenterStore.ts              | 46 +++++++++++++++----
 .../task-detail/components/TaskInput.tsx      |  8 +++-
 3 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx b/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx
index 9206b47b1..686ab32cf 100644
--- a/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx
+++ b/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx
@@ -1,3 +1,4 @@
+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";
@@ -15,18 +16,35 @@ interface CommandCenterPanelProps {
   isActiveSession: boolean;
 }
 
+function getCellSessionId(cellIndex: number): string {
+  return `cc-cell-${cellIndex}`;
+}
+
 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]);
+
   if (isCreating) {
     return (
       <Flex direction="column" height="100%">
@@ -46,7 +64,7 @@ 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"
           >
@@ -54,7 +72,7 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
           </button>
         </Flex>
         <Flex direction="column" className="min-h-0 flex-1">
-          <TaskInput onTaskCreated={handleTaskCreated} />
+          <TaskInput sessionId={sessionId} onTaskCreated={handleTaskCreated} />
         </Flex>
       </Flex>
     );
@@ -67,7 +85,7 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
           cellIndex={cellIndex}
           open={selectorOpen}
           onOpenChange={setSelectorOpen}
-          onNewTask={() => setIsCreating(true)}
+          onNewTask={() => startCreating(cellIndex)}
         >
           <button
             type="button"
diff --git a/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts b/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
index 6115bb08f..8e3697eb5 100644
--- a/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
+++ b/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;
@@ -64,17 +67,22 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
       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 +95,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,6 +133,7 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
         set((state) => ({
           activeTaskId: null,
           cells: state.cells.map(() => null),
+          creatingCells: [],
         })),
 
       setZoom: (zoom) => set({ zoom: clampZoom(zoom) }),
@@ -128,6 +141,18 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
         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 +162,7 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
         cells: state.cells,
         activeTaskId: state.activeTaskId,
         zoom: state.zoom,
+        creatingCells: state.creatingCells,
       }),
     },
   ),
diff --git a/apps/code/src/renderer/features/task-detail/components/TaskInput.tsx b/apps/code/src/renderer/features/task-detail/components/TaskInput.tsx
index ad0edc9d2..bcfdc822d 100644
--- a/apps/code/src/renderer/features/task-detail/components/TaskInput.tsx
+++ b/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}

From bb41f6047d5343f6ae3268b58c3bf5f90c364334 Mon Sep 17 00:00:00 2001
From: Charles Vien <charles.v@posthog.com>
Date: Wed, 1 Apr 2026 21:35:10 -0700
Subject: [PATCH 2/2] Clean up orphaned drafts on external creating state
 changes

---
 .../components/CommandCenterPanel.tsx         | 19 +++++++++++++------
 .../stores/commandCenterStore.ts              |  4 ++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx b/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx
index 686ab32cf..1f773a78c 100644
--- a/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx
+++ b/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx
@@ -4,9 +4,12 @@ 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";
@@ -16,10 +19,6 @@ interface CommandCenterPanelProps {
   isActiveSession: boolean;
 }
 
-function getCellSessionId(cellIndex: number): string {
-  return `cc-cell-${cellIndex}`;
-}
-
 function EmptyCell({ cellIndex }: { cellIndex: number }) {
   const [selectorOpen, setSelectorOpen] = useState(false);
   const isCreating = useCommandCenterStore((s) =>
@@ -45,6 +44,14 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
     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%">
diff --git a/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts b/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
index 8e3697eb5..7e8b354ce 100644
--- a/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
+++ b/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
@@ -60,6 +60,10 @@ 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) => ({