fix(FN-2861): harden planning session recovery and retry UX

- Add planning and subtask retry routes with session-lock checks and proper API error mapping
- Improve planning session execution with timeout/abort handling, stop-generation support, and resilient stream catch-up behavior
- Update Planning Mode modal to handle reconnects, retry-from-error flow, stop action, and cross-tab session state synchronization
- Expand dashboard tests for planning routes, planning session behavior, and PlanningModeModal retry/error coverage

packages/dashboard/app/components/PlanningModeModal.css

@@ -972,6 +972,35 @@
   color: var(--text);
 }
 
+.planning-loading-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  margin-top: var(--space-md);
+}
+
+.planning-stop-btn {
+  border-color: var(--color-error);
+  color: var(--color-error);
+  background: color-mix(in srgb, var(--color-error) 12%, transparent);
+}
+
+.planning-stop-btn:hover {
+  border-color: var(--color-error-dark);
+  color: var(--color-error-dark);
+  background: color-mix(in srgb, var(--color-error) 18%, transparent);
+}
+
+.planning-stop-btn {
+  min-height: 36px;
+}
+
+.planning-elapsed {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
 /* Subtask Drag-and-Drop Styles */
 .subtask-item {
   transition: opacity var(--transition-fast), transform var(--transition-fast);
@@ -1159,6 +1188,17 @@
     font-size: 12px;
   }
 
+  .planning-loading-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .planning-loading-actions .btn {
+    width: 100%;
+    min-height: 36px;
+    justify-content: center;
+  }
+
   /* Prevent mobile zoom on focus for planning text inputs (16px minimum) */
   .planning-textarea {
     font-size: 16px;

packages/dashboard/app/components/PlanningModeModal.tsx

@@ -16,6 +16,7 @@ import {
   createTasksFromPlanning,
   fetchModels,
   cancelPlanning,
+  stopPlanningGeneration,
   updateGlobalSettings,
   type PlanningSession,
   type SubtaskItem,
@@ -30,7 +31,7 @@ import {
   getPlanningDescription,
   clearPlanningDescription,
 } from "../hooks/modalPersistence";
-import { Lightbulb, X, Loader2, CheckCircle, ArrowLeft, ArrowRight, Sparkles, ListTree, GripVertical, ArrowUp, ArrowDown, Plus, Trash2, RefreshCw, Lock, ChevronLeft, MessageSquarePlus, AlertCircle, Clock, HelpCircle } from "lucide-react";
+import { Lightbulb, X, Loader2, CheckCircle, ArrowLeft, ArrowRight, Sparkles, ListTree, GripVertical, ArrowUp, ArrowDown, Plus, Trash2, RefreshCw, Lock, ChevronLeft, MessageSquarePlus, AlertCircle, Clock, HelpCircle, StopCircle } from "lucide-react";
 import { CustomModelDropdown } from "./CustomModelDropdown";
 import { ConversationHistory } from "./ConversationHistory";
 import { useSessionLock } from "../hooks/useSessionLock";
@@ -106,6 +107,8 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
   const [showThinking, setShowThinking] = useState(true);
   const [isReconnecting, setIsReconnecting] = useState(false);
   const [isRetrying, setIsRetrying] = useState(false);
+  const [generationStartTime, setGenerationStartTime] = useState<number | null>(null);
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
   const streamConnectionRef = useRef<{ close: () => void; isConnected: () => boolean } | null>(null);
@@ -164,6 +167,24 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
     }
   }, [streamingOutput]);
 
+  useEffect(() => {
+    if (view.type !== "loading") {
+      setGenerationStartTime(null);
+      setElapsedSeconds(0);
+      return;
+    }
+
+    const startedAt = Date.now();
+    setGenerationStartTime(startedAt);
+    setElapsedSeconds(0);
+
+    const timer = setInterval(() => {
+      setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [view.type]);
+
   const resetDetailState = useCallback(() => {
     setInitialPlan("");
     setView({ type: "initial" });
@@ -827,6 +848,30 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
     [projectId, sessionTabId, view]
   );
 
+  const handleStopGeneration = useCallback(async () => {
+    const sessionId = currentSessionIdRef.current;
+    if (!sessionId) {
+      return;
+    }
+
+    try {
+      await stopPlanningGeneration(sessionId, projectId, sessionTabId);
+    } catch {
+      // best-effort; server-side timeout/stop event may have already fired
+    }
+
+    streamConnectionRef.current?.close();
+    streamConnectionRef.current = null;
+    setIsReconnecting(false);
+    setIsRetrying(false);
+    setView({
+      type: "error",
+      session: { sessionId, currentQuestion: null, summary: null },
+      errorMessage: "Generation stopped by user. You can retry or start a new session.",
+    });
+    setStreamingOutput("");
+  }, [projectId, sessionTabId]);
+
   const handleRetryFromError = useCallback(async () => {
     if (view.type !== "error") {
       return;
@@ -1206,6 +1251,9 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
             <div className="planning-loading">
               <Loader2 size={40} className="spin icon-todo" />
               <p>{streamingOutput ? "AI is thinking..." : "Generating next question..."}</p>
+              {generationStartTime && (
+                <div className="planning-elapsed">Thinking… ({elapsedSeconds}s)</div>
+              )}
               <div className="planning-thinking-container">
                 <button
                   className="planning-thinking-toggle"
@@ -1214,6 +1262,12 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
                 >
                   {showThinking ? "Hide thinking" : "Show thinking"}
                 </button>
+                <div className="planning-loading-actions">
+                  <button className="btn planning-stop-btn" type="button" onClick={() => void handleStopGeneration()}>
+                    <StopCircle size={14} />
+                    <span className="icon-ml-6">Stop</span>
+                  </button>
+                </div>
                 {showThinking && streamingOutput && (
                   <div className="planning-thinking-output" ref={thinkingOutputRef}>
                     <pre>{streamingOutput}</pre>

packages/dashboard/app/components/__tests__/PlanningModeModal.test.tsx

@@ -14,6 +14,7 @@ const mockConnectPlanningStream = vi.fn();
 const mockRespondToPlanning = vi.fn();
 const mockRetryPlanningSession = vi.fn();
 const mockCancelPlanning = vi.fn();
+const mockStopPlanningGeneration = vi.fn();
 const mockCreateTaskFromPlanning = vi.fn();
 const mockStartPlanningBreakdown = vi.fn();
 const mockCreateTasksFromPlanning = vi.fn();
@@ -41,6 +42,7 @@ vi.mock("../../api", () => ({
   respondToPlanning: (...args: any[]) => mockRespondToPlanning(...args),
   retryPlanningSession: (...args: any[]) => mockRetryPlanningSession(...args),
   cancelPlanning: (...args: any[]) => mockCancelPlanning(...args),
+  stopPlanningGeneration: (...args: any[]) => mockStopPlanningGeneration(...args),
   createTaskFromPlanning: (...args: any[]) => mockCreateTaskFromPlanning(...args),
   startPlanningBreakdown: (...args: any[]) => mockStartPlanningBreakdown(...args),
   createTasksFromPlanning: (...args: any[]) => mockCreateTasksFromPlanning(...args),
@@ -216,6 +218,7 @@ describe("PlanningModeModal", () => {
     mockReleaseSessionLock.mockResolvedValue(undefined);
     mockForceAcquireSessionLock.mockResolvedValue(undefined);
     mockCancelPlanning.mockResolvedValue(undefined);
+    mockStopPlanningGeneration.mockResolvedValue({ success: true });
 
     // Default: simulate receiving a question after a brief delay
     mockConnectPlanningStream.mockImplementation((_sessionId: string, _projectId: string | undefined, handlers: any) => {
@@ -577,6 +580,49 @@ describe("PlanningModeModal", () => {
       });
     });
 
+    it("shows stop action in loading and stops generation", async () => {
+      let streamHandlers: any;
+      const closeSpy = vi.fn();
+      mockConnectPlanningStream.mockImplementationOnce((_sessionId: string, _projectId: string | undefined, handlers: any) => {
+        streamHandlers = handlers;
+        return {
+          close: closeSpy,
+          isConnected: vi.fn().mockReturnValue(true),
+        };
+      });
+
+      render(
+        <PlanningModeModal
+          isOpen={true}
+          onClose={mockOnClose}
+          onTaskCreated={mockOnTaskCreated}
+          onTasksCreated={vi.fn()}
+          tasks={mockTasks}
+        />
+      );
+
+      fireEvent.change(screen.getByPlaceholderText(/e.g., Build a user authentication/), {
+        target: { value: "Build auth system" },
+      });
+      fireEvent.click(screen.getByText("Start Planning"));
+
+      await waitFor(() => {
+        expect(screen.getByRole("button", { name: "Stop" })).toBeDefined();
+      });
+
+      fireEvent.click(screen.getByRole("button", { name: "Stop" }));
+
+      await waitFor(() => {
+        expect(mockStopPlanningGeneration).toHaveBeenCalledWith("session-123", undefined, expect.any(String));
+      });
+      expect(closeSpy).toHaveBeenCalled();
+      expect(screen.getByText("Generation stopped by user. You can retry or start a new session.")).toBeDefined();
+      expect(screen.getByRole("button", { name: "Retry" })).toBeDefined();
+
+      // avoid dangling handlers reference lint
+      expect(streamHandlers).toBeDefined();
+    });
+
     it("shows error message when planning fails", async () => {
       // Override the default mock to simulate an error
       mockConnectPlanningStream.mockImplementationOnce((_sessionId: string, _projectId: string | undefined, handlers: any) => {