From beae2c673e45a8653158a776fb4e521ab049605a Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Mon, 20 Jul 2026 18:40:03 -0700
Subject: [PATCH] fix(planning): make refinement session-driven

Open refinement areas on demand with multi-select and custom focus support, then consume synchronous AI responses so restored sessions can continue reliably. Rename the primary review action to Proceed with plan and preserve the responsive Markdown review layout.
---
 .../improve-planning-refinement-menu.md       |   7 +
 .../app/components/PlanningModeModal.css      | 165 ++++++++++++----
 .../app/components/PlanningModeModal.tsx      | 177 ++++++++++++------
 .../PlanningModeModal.initial.test.tsx        |   2 +-
 .../PlanningModeModal.planning-flow.test.tsx  |  58 ++++--
 .../app/planning-browser-e2e-fixture.tsx      |  36 +++-
 .../__tests__/planning-browser-e2e.test.ts    |  32 ++--
 .../planning-infinite-interview.test.ts       |   1 +
 packages/dashboard/src/planning.ts            |   4 +-
 9 files changed, 345 insertions(+), 137 deletions(-)
 create mode 100644 .changeset/improve-planning-refinement-menu.md

diff --git a/.changeset/improve-planning-refinement-menu.md b/.changeset/improve-planning-refinement-menu.md
new file mode 100644
index 0000000000..e8ce4c4933
--- /dev/null
+++ b/.changeset/improve-planning-refinement-menu.md
@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Improve Planning Mode refinement and replace Validate with Proceed with plan.
+category: fix
+dev: Combines suggested and custom focus areas and restores questions from synchronous refinement responses.
diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css
index 72efb97468..90ac07c295 100644
--- a/packages/dashboard/app/components/PlanningModeModal.css
+++ b/packages/dashboard/app/components/PlanningModeModal.css
@@ -1113,20 +1113,6 @@ margins so paragraphs and lists do not create unintended gaps.
   gap: var(--space-sm);
 }
 
-.planning-refine-focus {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.planning-refine-focus legend {
-  margin-bottom: var(--space-sm);
-  font-weight: 500;
-}
-
 .planning-confirm-answer {
   display: flex;
   flex-direction: column;
@@ -1210,9 +1196,9 @@ margins so paragraphs and lists do not create unintended gaps.
 
 /*
 FNXC:PlanningMode 2026-07-20-17:00:
-The review checkpoint renders the same canonical Markdown that Validate persists as
-plan.md. Keep the document and refinement controls inside the sole scroll owner while
-the sibling action row remains reachable at the bottom of bounded desktop and mobile panes.
+The review checkpoint renders the same canonical Markdown that Proceed persists as
+plan.md. Keep the document inside the sole scroll owner while the sibling action row and
+its refinement menu remain reachable at the bottom of bounded desktop and mobile panes.
 */
 .planning-plan-scroll {
   align-items: center;
@@ -1224,8 +1210,7 @@ the sibling action row remains reachable at the bottom of bounded desktop and mo
   gap: 0;
 }
 
-.planning-plan-document,
-.planning-plan-scroll > .planning-refine-focus {
+.planning-plan-document {
   width: min(100%, calc(var(--space-2xl) * 24));
 }
 
@@ -1260,19 +1245,6 @@ the sibling action row remains reachable at the bottom of bounded desktop and mo
   font-size: var(--font-size-base);
 }
 
-.planning-plan-scroll > .planning-refine-focus {
-  padding: var(--space-xl);
-  border-radius: var(--radius-xl);
-  background: var(--surface);
-  box-shadow: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--border) 75%, transparent);
-}
-
-.planning-plan-scroll > .planning-refine-focus legend {
-  padding-inline: var(--space-xs);
-  font-size: var(--font-size-sm);
-  text-wrap: balance;
-}
-
 .planning-summary-qa-disclosure {
   margin-top: 0;
 }
@@ -1468,6 +1440,7 @@ the sibling action row remains reachable at the bottom of bounded desktop and mo
 }
 
 .planning-plan-actions {
+  position: relative;
   justify-content: flex-end;
   gap: var(--space-md);
   padding: var(--space-lg) var(--space-xl);
@@ -1478,6 +1451,118 @@ the sibling action row remains reachable at the bottom of bounded desktop and mo
   min-width: calc(var(--space-2xl) * 4);
 }
 
+.planning-refine-menu {
+  position: absolute;
+  right: var(--space-xl);
+  bottom: calc(100% + var(--space-sm));
+  z-index: var(--z-popover);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  width: min(calc(var(--space-2xl) * 14), calc(100vw - var(--space-2xl)));
+  max-height: min(70dvh, calc(var(--space-2xl) * 16));
+  padding: var(--space-xl);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--radius-xl);
+  background: var(--surface);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+}
+
+.planning-refine-menu-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.planning-refine-menu-header h4,
+.planning-refine-menu-header p {
+  margin: 0;
+}
+
+.planning-refine-menu-header h4 {
+  font-size: var(--font-size-base);
+  text-wrap: balance;
+}
+
+.planning-refine-menu-header p,
+.planning-refine-menu-custom > span {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  text-wrap: pretty;
+}
+
+.planning-refine-menu-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-sm);
+}
+
+.planning-refine-menu-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-height: calc(var(--space-2xl) + var(--space-md));
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  box-shadow: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--border) 80%, transparent);
+  cursor: pointer;
+  transition:
+    background var(--transition-fast),
+    box-shadow var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.planning-refine-menu-option:hover {
+  background: var(--card-hover);
+  box-shadow: var(--focus-ring);
+}
+
+.planning-refine-menu-option:active {
+  transform: scale(0.96);
+}
+
+.planning-refine-menu-option:has(input:checked) {
+  background: color-mix(in srgb, var(--todo) 12%, var(--surface));
+  box-shadow: 0 0 0 var(--btn-border-width) var(--todo);
+}
+
+.planning-refine-menu-option input {
+  flex-shrink: 0;
+  accent-color: var(--todo);
+}
+
+.planning-refine-menu-option span {
+  min-width: 0;
+  color: var(--text);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+
+.planning-refine-menu-custom {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.planning-refine-menu-custom textarea {
+  min-height: calc(var(--space-2xl) * 2);
+  resize: vertical;
+}
+
+.planning-refine-menu-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+}
+
+.planning-refine-menu-actions .btn {
+  min-width: 0;
+}
+
 .planning-summary-actions-right {
   display: flex;
   gap: var(--space-sm);
@@ -1491,10 +1576,6 @@ the sibling action row remains reachable at the bottom of bounded desktop and mo
     padding: var(--space-xl);
   }
 
-  .planning-plan-scroll > .planning-refine-focus {
-    padding: var(--space-lg);
-  }
-
   .planning-plan-actions {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1507,6 +1588,18 @@ the sibling action row remains reachable at the bottom of bounded desktop and mo
     min-width: 0;
     min-height: calc(var(--space-2xl) + var(--space-md));
   }
+
+  .planning-refine-menu {
+    right: var(--space-lg);
+    left: var(--space-lg);
+    width: auto;
+    max-height: min(65dvh, calc(var(--space-2xl) * 14));
+    padding: var(--space-lg);
+  }
+
+  .planning-refine-menu-options {
+    grid-template-columns: 1fr;
+  }
 }
 
 /*
diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx
index 16283d92df..1cf4c972b3 100644
--- a/packages/dashboard/app/components/PlanningModeModal.tsx
+++ b/packages/dashboard/app/components/PlanningModeModal.tsx
@@ -559,11 +559,44 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
   const isSessionListMode = showSessionList || (isCompactInterview && !mobileShowDetail);
   // FNXC:PlanningModeMobile 2026-07-20-10:30: Empty mobile state opens the composer because no saved destination exists; once sessions exist, every compact detail surface gets this single Back-to-list escape.
   const canReturnToSessionList = isCompactInterview && mobileShowDetail && planningSessions.length > 0;
-  const [refineFocus, setRefineFocus] = useState("");
-  const [customRefineFocus, setCustomRefineFocus] = useState<string | null>(null);
+  const [isRefineMenuOpen, setIsRefineMenuOpen] = useState(false);
+  const [selectedRefineFocuses, setSelectedRefineFocuses] = useState<string[]>([]);
+  const [customRefineFocus, setCustomRefineFocus] = useState("");
+  const refineMenuRef = useRef<HTMLDivElement>(null);
+  const refineTriggerRef = useRef<HTMLButtonElement>(null);
   const { addToast } = useToast();
   const { pushNav } = useNavigationHistoryContext();
 
+  const combinedRefineFocus = useMemo(
+    () => [...selectedRefineFocuses, customRefineFocus.trim()].filter(Boolean).join(", "),
+    [customRefineFocus, selectedRefineFocuses],
+  );
+
+  useEffect(() => {
+    if (!isRefineMenuOpen) return;
+    refineMenuRef.current?.focus();
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (!refineMenuRef.current?.contains(target) && !refineTriggerRef.current?.contains(target)) {
+        setIsRefineMenuOpen(false);
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.stopImmediatePropagation();
+      setIsRefineMenuOpen(false);
+      refineTriggerRef.current?.focus();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isRefineMenuOpen]);
+
   /*
   FNXC:Planning 2026-06-23-02:00:
   Resizable Planning sidebar — pointer-drag + arrow-key resize with localStorage persistence, mirroring MissionManager.handleSidebarResizeStart/handleSidebarResizeKeyDown. Width is clamped to PLANNING_SIDEBAR_MIN/MAX and applied as an inline width on the sidebar <aside>. Disabled on mobile where the sidebar stacks full-width.
@@ -2235,19 +2268,35 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
   may finalize during loading or recoverable error states; the server cancels an active turn safely.
   */
   const handleRefineFromPlan = useCallback(async () => {
-    if (view.type !== "plan_review") return;
+    if (view.type !== "plan_review" || !combinedRefineFocus) return;
     setError(null);
     setGenerationActivity("question");
+    setIsRefineMenuOpen(false);
     setView({ type: "loading" });
     try {
-      await respondToPlanning(view.session.sessionId, { refine: true, ...(refineFocus.trim() ? { focus: refineFocus.trim() } : {}) }, projectId);
-      setRefineFocus("");
-      setCustomRefineFocus(null);
+      const response = await respondToPlanning(view.session.sessionId, { refine: true, focus: combinedRefineFocus }, projectId);
+      const responseQuestion = "type" in response ? response.data : response.currentQuestion;
+      const responseSummary = "type" in response ? null : response.summary;
+      const nextSummary = responseSummary ? normalizePlanningSummary(responseSummary) : view.summary;
+      runningSummaryRef.current = nextSummary;
+      setRunningSummary(nextSummary);
+      if (responseQuestion) {
+        setView({
+          type: "question",
+          session: {
+            sessionId: view.session.sessionId,
+            currentQuestion: normalizeQuestionOptions(responseQuestion),
+            summary: nextSummary,
+          },
+        });
+      }
+      setSelectedRefineFocuses([]);
+      setCustomRefineFocus("");
     } catch (err) {
       setError(getErrorMessage(err) || t("planning.failedSubmitResponse", "Failed to refine plan"));
       setView({ type: "plan_review", session: view.session, summary: view.summary });
     }
-  }, [projectId, refineFocus, t, view]);
+  }, [combinedRefineFocus, projectId, t, view]);
 
   const handleValidatePlan = useCallback(async () => {
     if (view.type !== "plan_review" || validateCreateInFlightRef.current) return;
@@ -2887,65 +2936,83 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
                     testId="planning-plan-markdown"
                   />
                 </article>
-                <fieldset className="planning-refine-focus" data-testid="planning-refine-focus">
-                  <legend>{t("planning.refineFocus", "Focus the next question")}</legend>
-                  <div className="planning-radio-group" role="radiogroup">
-                    {(view.summary.suggestedRefinements ?? []).map((focus) => (
-                      <label key={focus} className="planning-option planning-option--radio">
-                        <input
-                          type="radio"
-                          name="planning-refine-focus"
-                          value={focus}
-                          checked={customRefineFocus === null && refineFocus === focus}
-                          onChange={() => {
-                            setCustomRefineFocus(null);
-                            setRefineFocus(focus);
-                          }}
-                        />
-                        <span className="planning-option-label">{focus}</span>
-                      </label>
-                    ))}
-                    <label className="planning-option planning-option--radio">
-                      <input
-                        type="radio"
-                        name="planning-refine-focus"
-                        value={PLANNING_OTHER_OPTION_ID}
-                        checked={customRefineFocus !== null}
-                        onChange={() => {
-                          setCustomRefineFocus("");
-                          setRefineFocus("");
-                        }}
-                      />
-                      <span className="planning-option-label">{t("planning.writeOwnFocus", "Write your own focus")}</span>
-                    </label>
-                    {customRefineFocus !== null && (
-                      <input
-                        className="input"
-                        autoFocus
-                        value={customRefineFocus}
-                        onChange={(event) => {
-                          setCustomRefineFocus(event.target.value);
-                          setRefineFocus(event.target.value);
-                        }}
-                        placeholder={t("planning.refineFocusPlaceholder", "Describe what the next question should focus on")}
-                      />
-                    )}
-                  </div>
-                </fieldset>
               </div>
               <div
                 className="planning-actions planning-summary-actions planning-plan-actions"
                 data-testid="planning-plan-actions"
               >
+                {isRefineMenuOpen && (
+                  <div
+                    id="planning-refine-menu"
+                    ref={refineMenuRef}
+                    className="planning-refine-menu"
+                    data-testid="planning-refine-menu"
+                    role="dialog"
+                    aria-label={t("planning.chooseRefinementAreas", "Choose areas to refine")}
+                    tabIndex={-1}
+                  >
+                    <div className="planning-refine-menu-header">
+                      <h4>{t("planning.refineQuestion", "What should the next question focus on?")}</h4>
+                      <p>{t("planning.refineQuestionHint", "Choose one or more areas, or describe your own.")}</p>
+                    </div>
+                    <div className="planning-refine-menu-options">
+                      {(view.summary.suggestedRefinements ?? []).map((focus) => (
+                        <label key={focus} className="planning-refine-menu-option">
+                          <input
+                            type="checkbox"
+                            checked={selectedRefineFocuses.includes(focus)}
+                            onChange={() => setSelectedRefineFocuses((previous) => previous.includes(focus)
+                              ? previous.filter((item) => item !== focus)
+                              : [...previous, focus])}
+                          />
+                          <span>{focus}</span>
+                        </label>
+                      ))}
+                    </div>
+                    <label className="planning-refine-menu-custom">
+                      <span>{t("planning.otherRefineFocus", "Or describe another focus")}</span>
+                      <textarea
+                        className="input"
+                        value={customRefineFocus}
+                        onChange={(event) => setCustomRefineFocus(event.target.value)}
+                        placeholder={t("planning.refineFocusPlaceholder", "Describe what the next question should focus on")}
+                        rows={2}
+                      />
+                    </label>
+                    <div className="planning-refine-menu-actions">
+                      <button
+                        type="button"
+                        className="btn"
+                        onClick={() => {
+                          setIsRefineMenuOpen(false);
+                          setSelectedRefineFocuses([]);
+                          setCustomRefineFocus("");
+                          refineTriggerRef.current?.focus();
+                        }}
+                      >
+                        {t("common.cancel", "Cancel")}
+                      </button>
+                      <button type="button" className="btn btn-primary" disabled={!combinedRefineFocus} onClick={() => void handleRefineFromPlan()}>
+                        {t("planning.askNextQuestion", "Ask next question")}
+                      </button>
+                    </div>
+                  </div>
+                )}
                 <button
+                  ref={refineTriggerRef}
                   type="button"
                   className="btn"
-                  disabled={refineFocus.trim().length === 0}
-                  onClick={() => void handleRefineFromPlan()}
+                  aria-expanded={isRefineMenuOpen}
+                  aria-controls={isRefineMenuOpen ? "planning-refine-menu" : undefined}
+                  onClick={() => {
+                    setSelectedRefineFocuses([]);
+                    setCustomRefineFocus("");
+                    setIsRefineMenuOpen((open) => !open);
+                  }}
                 >
                   {t("planning.refine", "Refine")}
                 </button>
-                <button type="button" className="btn btn-primary" onClick={() => void handleValidatePlan()}>{t("planning.validatePlan", "Validate")}</button>
+                <button type="button" className="btn btn-primary" onClick={() => void handleValidatePlan()}>{t("planning.proceedWithPlan", "Proceed with plan")}</button>
               </div>
             </div>
           )}
diff --git a/packages/dashboard/app/components/__tests__/PlanningModeModal.initial.test.tsx b/packages/dashboard/app/components/__tests__/PlanningModeModal.initial.test.tsx
index dc9d992d0a..09ccca960e 100644
--- a/packages/dashboard/app/components/__tests__/PlanningModeModal.initial.test.tsx
+++ b/packages/dashboard/app/components/__tests__/PlanningModeModal.initial.test.tsx
@@ -6,7 +6,7 @@ describe("PlanningModeModal initial surface", () => {
   it("keeps Sessions as the single escape hatch while the active interview is sequential", () => {
     const source = readFileSync(resolve(process.cwd(), "app/components/PlanningModeModal.tsx"), "utf8");
     expect(source).toContain('data-testid="planning-plan-review"');
-    expect(source).toContain('data-testid="planning-refine-focus"');
+    expect(source).toContain('data-testid="planning-refine-menu"');
     expect(source).toContain('data-testid="planning-create-retry"');
   });
 });
diff --git a/packages/dashboard/app/components/__tests__/PlanningModeModal.planning-flow.test.tsx b/packages/dashboard/app/components/__tests__/PlanningModeModal.planning-flow.test.tsx
index 858d69663e..0ef30b4698 100644
--- a/packages/dashboard/app/components/__tests__/PlanningModeModal.planning-flow.test.tsx
+++ b/packages/dashboard/app/components/__tests__/PlanningModeModal.planning-flow.test.tsx
@@ -53,14 +53,10 @@ describe("PlanningModeModal sequential flow", () => {
     expect(screen.getByText("Change the authentication API")).toBeInTheDocument();
     expect(screen.getByText("Acceptance criteria")).toBeInTheDocument();
     expect(screen.getByText("Refresh preserves generation")).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Security boundaries" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Rollout strategy" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Failure recovery" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Accessibility" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Observability" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Write your own focus" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Refine" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Validate" })).toBeInTheDocument();
+    expect(screen.queryByTestId("planning-refine-menu")).toBeNull();
+    expect(screen.queryByRole("checkbox", { name: "Security boundaries" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Refine" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Proceed with plan" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Sessions" })).toBeInTheDocument();
     const scrollRegion = screen.getByTestId("planning-plan-scroll");
     const actionBar = screen.getByTestId("planning-plan-actions");
@@ -69,14 +65,31 @@ describe("PlanningModeModal sequential flow", () => {
     expect(document.querySelector(".planning-running-plan")).toBeNull();
     expect(document.querySelector(".planning-answered-history")).toBeNull();
   });
-  it("sends a model-suggested focus when Refine requests the next question", async () => {
+  it("opens a multi-select refinement menu and sends every selected or custom focus", async () => {
     mockFetchAiSession.mockResolvedValue({ ...base, status: "awaiting_input", currentQuestion: null, result: JSON.stringify(summaryWithRefinements), inputPayload: "{}" });
-    mockRespondToPlanning.mockResolvedValue({}); renderSession({});
-    fireEvent.click(await screen.findByRole("radio", { name: "Security boundaries" }));
-    expect(screen.getByRole("button", { name: "Refine" })).toBeEnabled();
-    fireEvent.click(screen.getByRole("button", { name: "Refine" }));
-    await waitFor(() => expect(mockRespondToPlanning).toHaveBeenCalledWith("session-1", { refine: true, focus: "Security boundaries" }, "project-1"));
-    expect(screen.getByText("Generating next question…")).toBeInTheDocument();
+    mockRespondToPlanning.mockResolvedValue({
+      sessionId: "session-1",
+      currentQuestion: {
+        id: "q-refine",
+        type: "single_select",
+        question: "Which migration risk should come first?",
+        options: [
+          { id: "data", label: "Data integrity" },
+          { id: "rollout", label: "Rollout safety" },
+        ],
+      },
+      summary: summaryWithRefinements,
+    });
+    renderSession({});
+    fireEvent.click(await screen.findByRole("button", { name: "Refine" }));
+    expect(screen.getByRole("dialog", { name: "Choose areas to refine" })).toBeInTheDocument();
+    expect(screen.getByText("What should the next question focus on?")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("checkbox", { name: "Security boundaries" }));
+    fireEvent.click(screen.getByRole("checkbox", { name: "Observability" }));
+    fireEvent.change(screen.getByLabelText("Or describe another focus"), { target: { value: "Migration sequencing" } });
+    fireEvent.click(screen.getByRole("button", { name: "Ask next question" }));
+    await waitFor(() => expect(mockRespondToPlanning).toHaveBeenCalledWith("session-1", { refine: true, focus: "Security boundaries, Observability, Migration sequencing" }, "project-1"));
+    expect(await screen.findByText("Which migration risk should come first?")).toBeInTheDocument();
   });
   it("restores the updating-plan progress state after refresh", async () => {
     mockFetchAiSession.mockResolvedValue({ ...base, status: "generating", currentQuestion: null, result: JSON.stringify(summaryWithRefinements), inputPayload: JSON.stringify({ generationPurpose: "plan_update" }) });
@@ -110,18 +123,23 @@ describe("PlanningModeModal sequential flow", () => {
     renderSession({});
     expect(await screen.findByText("What to change")).toBeInTheDocument();
     expect(screen.getByText("Acceptance criteria")).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Security boundaries" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Observability" })).toBeInTheDocument();
-    expect(screen.getByRole("radio", { name: "Write your own focus" })).toBeInTheDocument();
+    expect(screen.queryByRole("checkbox", { name: "Security boundaries" })).toBeNull();
     const actionBar = screen.getByTestId("planning-plan-actions");
     expect(screen.getByTestId("planning-plan-scroll")).not.toContainElement(actionBar);
     expect(actionBar).toContainElement(screen.getByRole("button", { name: "Refine" }));
-    expect(actionBar).toContainElement(screen.getByRole("button", { name: "Validate" }));
+    expect(actionBar).toContainElement(screen.getByRole("button", { name: "Proceed with plan" }));
+    fireEvent.click(screen.getByRole("button", { name: "Refine" }));
+    expect(screen.getByRole("dialog", { name: "Choose areas to refine" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Security boundaries" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Observability" })).toBeInTheDocument();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(screen.queryByRole("dialog", { name: "Choose areas to refine" })).toBeNull();
+    expect(screen.getByTestId("planning-plan-review")).toBeInTheDocument();
   });
   it("restores a validated unlinked session to create-only retry", async () => {
     mockFetchAiSession.mockResolvedValue({ ...base, status: "complete", currentQuestion: null, result: JSON.stringify(mockSummary), inputPayload: JSON.stringify({ validated: true }) });
     renderSession({});
     expect(await screen.findByTestId("planning-create-retry")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Validate" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Proceed with plan" })).toBeNull();
   });
 });
diff --git a/packages/dashboard/app/planning-browser-e2e-fixture.tsx b/packages/dashboard/app/planning-browser-e2e-fixture.tsx
index e0a804849b..8087279457 100644
--- a/packages/dashboard/app/planning-browser-e2e-fixture.tsx
+++ b/packages/dashboard/app/planning-browser-e2e-fixture.tsx
@@ -10,7 +10,20 @@ import { NavigationHistoryProvider } from "./hooks/useNavigationHistory";
 const summary = {
   title: "Adaptive planning workflow",
   description: "An evolving **operator-ready** plan assembled from the interview answers.",
-  proposedChanges: ["Render the canonical plan as Markdown", "Keep review actions reachable while the plan scrolls"],
+  proposedChanges: [
+    "Render the canonical plan as Markdown",
+    "Keep review actions reachable while the plan scrolls",
+    "Generate the initial plan in a real AI session",
+    "Open refinement areas only from the Refine action",
+    "Allow multiple suggested refinement areas",
+    "Accept an operator-authored refinement focus",
+    "Ask one focused question after refinement",
+    "Return to plan review after each answer",
+    "Preserve the plan document while refinement is open",
+    "Keep the refinement menu usable on narrow screens",
+    "Expose a clear Proceed with plan action",
+    "Persist the reviewed Markdown as the task plan",
+  ],
   acceptanceCriteria: ["Markdown structure is visible", "Mobile actions remain at the bottom of the planning pane"],
   suggestedSize: "M",
   priority: "normal",
@@ -51,7 +64,6 @@ const questions = [
   },
 ];
 
-let answerCount = 0;
 const streams = new Set<MockEventSource>();
 
 class MockEventSource {
@@ -87,23 +99,31 @@ function emitTurn(questionIndex: number): void {
   }, 20);
 }
 
+function emitSummary(): void {
+  setTimeout(() => {
+    streams.forEach((stream) => stream.emit("summary", summary));
+  }, 20);
+}
+
 const originalFetch = window.fetch.bind(window);
 window.fetch = async (input, init = {}) => {
   const url = String(input);
   const method = init.method ?? "GET";
   const json = (body: unknown, status = 200) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
   if (url.includes("/planning/start-streaming") && method === "POST") {
-    answerCount = 0;
-    emitTurn(0);
+    emitSummary();
     return json({ sessionId: "planning-browser-e2e" });
   }
   if (url.includes("/planning/respond") && method === "POST") {
-    answerCount += 1;
-    emitTurn(answerCount);
-    return json({ sessionId: "planning-browser-e2e", currentQuestion: questions[answerCount], summary });
+    const body = typeof init.body === "string" ? JSON.parse(init.body) as { responses?: { refine?: boolean } } : {};
+    if (body.responses?.refine) {
+      emitTurn(1);
+      return json({ sessionId: "planning-browser-e2e", currentQuestion: questions[1], summary });
+    }
+    emitSummary();
+    return json({ sessionId: "planning-browser-e2e", currentQuestion: null, summary });
   }
   if (url.includes("/planning/planning-browser-e2e/back") && method === "POST") {
-    answerCount = 0;
     emitTurn(0);
     return json({ currentQuestion: questions[0], summary, history: [] });
   }
diff --git a/packages/dashboard/src/__tests__/planning-browser-e2e.test.ts b/packages/dashboard/src/__tests__/planning-browser-e2e.test.ts
index b4cab97830..4e48de2660 100644
--- a/packages/dashboard/src/__tests__/planning-browser-e2e.test.ts
+++ b/packages/dashboard/src/__tests__/planning-browser-e2e.test.ts
@@ -78,7 +78,7 @@ describe.runIf(executablePath)("Planning Mode browser E2E", () => {
     await server.pluginContainer.close();
   }, 10_000);
 
-  it("keeps the adaptive question and edit-answer loop working", async () => {
+  it("starts an AI plan session and asks a focused question only after Refine", async () => {
     const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
     page.on("console", (event) => console.log(`[planning-browser-e2e] ${event.text?.() ?? ""}`));
     page.on("pageerror", (event) => console.error(`[planning-browser-e2e] ${event.message ?? ""}`));
@@ -86,19 +86,17 @@ describe.runIf(executablePath)("Planning Mode browser E2E", () => {
 
     await page.getByLabel("What do you want to build?").fill("Make Planning Mode adaptive");
     await page.getByRole("button", { name: "Start Planning" }).click();
-    await expectVisible(page.getByText("Which user outcome matters most?"));
+    await expectVisible(page.getByRole("heading", { name: "Adaptive planning workflow" }));
+    await expectVisible(page.getByRole("button", { name: "Proceed with plan" }));
+    expect(await page.getByText("Who should receive this first?").isVisible()).toBe(false);
 
-    await page.getByLabel("Speed").check();
-    await page.getByRole("button", { name: "Next question" }).click();
-    await expectVisible(page.getByText("Who should receive this first?"));
-    await expectVisible(page.getByText("Which user outcome matters most?"));
-    expect(await page.getByRole("button", { name: "Create Single Task" }).isVisible()).toBe(false);
-
-    await page.getByRole("button", { name: /Edit answer for Which user outcome matters most/ }).click();
-    await expectVisible(page.getByText("Which user outcome matters most?"));
-    await page.getByLabel("Depth").check();
-    await page.getByRole("button", { name: "Next question" }).click();
+    await page.getByRole("button", { name: "Refine" }).click();
+    await page.getByLabel("Security boundaries").check();
+    await page.getByRole("button", { name: "Ask next question" }).click();
     await expectVisible(page.getByText("Who should receive this first?"));
+    await page.getByLabel("Operators").check();
+    await page.getByRole("button", { name: "Continue to plan" }).click();
+    await expectVisible(page.getByRole("button", { name: "Proceed with plan" }));
     await page.close();
   }, 30_000);
 
@@ -107,7 +105,7 @@ describe.runIf(executablePath)("Planning Mode browser E2E", () => {
       const page = await browser.newPage({ viewport });
       await page.goto(`${baseUrl}app/planning-browser-e2e-fixture.html?surface=plan-review`);
       await expectVisible(page.getByRole("heading", { name: "Adaptive planning workflow" }));
-      await expectVisible(page.getByRole("button", { name: "Validate" }));
+      await expectVisible(page.getByRole("button", { name: "Proceed with plan" }));
 
       const layout = await page.evaluate(() => {
         const review = document.querySelector<HTMLElement>("[data-testid='planning-plan-review']")!;
@@ -140,11 +138,15 @@ describe.runIf(executablePath)("Planning Mode browser E2E", () => {
         markdownRendered: true,
       });
       if (viewport.width > 1024) {
-        await page.getByLabel("Security boundaries").check();
         await page.getByRole("button", { name: "Refine" }).click();
+        await expectVisible(page.getByRole("dialog", { name: "Choose areas to refine" }));
+        await page.getByLabel("Security boundaries").check();
+        await page.getByLabel("Observability").check();
+        await page.getByLabel("Or describe another focus").fill("Migration sequencing");
+        await page.getByRole("button", { name: "Ask next question" }).click();
         await expectVisible(page.getByText("Who should receive this first?"));
       } else {
-        await page.getByRole("button", { name: "Validate" }).click();
+        await page.getByRole("button", { name: "Proceed with plan" }).click();
         for (let attempt = 0; attempt < 20 && await page.evaluate(() => document.body.dataset.createdTask) !== "FN-BROWSER"; attempt += 1) {
           await page.waitForTimeout(50);
         }
diff --git a/packages/dashboard/src/__tests__/planning-infinite-interview.test.ts b/packages/dashboard/src/__tests__/planning-infinite-interview.test.ts
index ff4b8e0bd7..21b14df7d3 100644
--- a/packages/dashboard/src/__tests__/planning-infinite-interview.test.ts
+++ b/packages/dashboard/src/__tests__/planning-infinite-interview.test.ts
@@ -143,6 +143,7 @@ describe("reactive Planning Mode question contract", () => {
       expect(prompt).toMatch(/plan in Markdown/i);
     }
     expect(prompts.at(-1)).toMatch(/without asking another question/i);
+    expect(PLANNING_SYSTEM_PROMPT).toMatch(/Proceed with plan serializes the plan as plan\.md/i);
   });
 
   it("repairs malformed select options and appends one localized Other option", () => {
diff --git a/packages/dashboard/src/planning.ts b/packages/dashboard/src/planning.ts
index c072a6da2f..c45e6122ee 100644
--- a/packages/dashboard/src/planning.ts
+++ b/packages/dashboard/src/planning.ts
@@ -233,7 +233,7 @@ async function ensureNtfyHelpersReady(): Promise<void> {
 /*
 FNXC:PlanningMode 2026-07-20-00:55:
 Planning Mode is user-terminated: each answered turn must produce one consequential, novel question with alternatives and trade-offs.
-The model may update the running plan but must never infer completion; only the visible Validate plan action can make a session terminal.
+The model may update the running plan but must never infer completion; only the visible Proceed with plan action can make a session terminal.
 */
 /** Planning system prompt for the AI agent */
 export const PLANNING_SYSTEM_PROMPT = `## Planning Mode interaction adapter
@@ -244,7 +244,7 @@ Start by producing a concrete initial plan for review without asking a question.
 
 For a refine turn respond only with JSON: {"type":"question","data":{"id":"unique-id","type":"single_select|multi_select","question":"...","description":"...","options":[{"id":"option-a","label":"...","description":"...","pros":["..."],"cons":["..."]},{"id":"option-b","label":"...","description":"...","pros":["..."],"cons":["..."]},{"id":"other","label":"...","isOther":true}],"runningPlan":{"title":"...","description":"...","proposedChanges":["specific change"],"acceptanceCriteria":["observable outcome"],"suggestedSize":"S|M|L","priority":"normal","suggestedDependencies":[],"keyDeliverables":["concrete work item"],"suggestedRefinements":["next focus 1","next focus 2"]}}}. For an initial-plan or answer-update turn respond only with {"type":"complete","data":{"title":"...","description":"...","proposedChanges":["specific change"],"acceptanceCriteria":["observable outcome"],"suggestedSize":"S|M|L","priority":"normal","suggestedDependencies":[],"keyDeliverables":["concrete work item"],"suggestedRefinements":["next focus 1","next focus 2"]}}.
 
-Every turn must include the running-plan fields: only title, description, concrete proposedChanges, observable acceptanceCriteria, suggestedSize, optional priority, suggestedDependencies, concrete keyDeliverables, and concise suggestedRefinements informed by the idea and answers so far. Include every distinct, high-value unresolved refinement area; do not cap the list at three. Never use interview question text as a deliverable. Do not put PROMPT.md sections (Mission, Before → After, Steps, File Scope, Review Level, Completion Criteria, or Do NOT) in runningPlan or free text: triage writes PROMPT.md only after Validate. Validate serializes the plan as plan.md without priority or suggestedRefinements; priority remains a task field. Every question must provide at least two alternatives, each with non-empty pros and cons, plus exactly one Other/write-your-own option. Write every label, option, and Other label in the language of the user's original input. Incorporate free-text Other answers verbatim as steering context for the following question.`;
+Every turn must include the running-plan fields: only title, description, concrete proposedChanges, observable acceptanceCriteria, suggestedSize, optional priority, suggestedDependencies, concrete keyDeliverables, and concise suggestedRefinements informed by the idea and answers so far. Include every distinct, high-value unresolved refinement area; do not cap the list at three. Never use interview question text as a deliverable. Do not put PROMPT.md sections (Mission, Before → After, Steps, File Scope, Review Level, Completion Criteria, or Do NOT) in runningPlan or free text: triage writes PROMPT.md only after the operator proceeds with the plan. Proceed with plan serializes the plan as plan.md without priority or suggestedRefinements; priority remains a task field. Every question must provide at least two alternatives, each with non-empty pros and cons, plus exactly one Other/write-your-own option. Write every label, option, and Other label in the language of the user's original input. Incorporate free-text Other answers verbatim as steering context for the following question.`;
 
 /*
 FNXC:PlanningMode 2026-07-20-14:30: