@kenkaiiii/ggcoder 4.3.212 → 4.3.214

package/dist/ui/App.js

@@ -1,39 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { Box, Text, Static } from "ink";
+import { Box, Text, useStdout } from "ink";
 import { useTerminalSize } from "./hooks/useTerminalSize.js";
 import { useDoublePress } from "./hooks/useDoublePress.js";
 import { useTaskBarStore, useTaskBarPolling, focusTaskBar, exitTaskBar, expandTaskBar, collapseTaskBar, navigateTaskBar, killTask, } from "./stores/taskbar-store.js";
-import { createHash } from "node:crypto";
-import { readFileSync, writeFileSync } from "node:fs";
-import { homedir } from "node:os";
-import { join } from "node:path";
+import { writeFileSync } from "node:fs";
 import { playNotificationSound } from "../utils/sound.js";
 import { formatError, } from "@kenkaiiii/gg-ai";
 import { extractImagePaths } from "../utils/image.js";
+import { buildGoalReferenceContext, formatGoalReferencesForPrompt, } from "../core/goal-references.js";
 import { useAgentLoop } from "./hooks/useAgentLoop.js";
-import { isEyesActive, journalCount } from "@kenkaiiii/ggcoder-eyes";
 import { UserMessage } from "./components/UserMessage.js";
 import { AssistantMessage } from "./components/AssistantMessage.js";
 import { ToolExecution } from "./components/ToolExecution.js";
+import { ToolUseLoader } from "./components/ToolUseLoader.js";
 import { ToolGroupExecution } from "./components/ToolGroupExecution.js";
 import { ServerToolExecution } from "./components/ServerToolExecution.js";
+import { MessageResponse } from "./components/MessageResponse.js";
 import { SubAgentPanel } from "./components/SubAgentPanel.js";
 import { CompactionSpinner, CompactionDone } from "./components/CompactionNotice.js";
 import { createWebSearchTool } from "../tools/web-search.js";
 import { StreamingArea } from "./components/StreamingArea.js";
 import { ActivityIndicator } from "./components/ActivityIndicator.js";
 import { InputArea } from "./components/InputArea.js";
-import { Footer } from "./components/Footer.js";
+import { Footer, doesFooterFitOnOneLine } from "./components/Footer.js";
 import { GoalStatusBar, reconcileGoalStatusEntriesWithRuns, removeGoalStatusEntry, syncGoalStatusEntries, } from "./components/GoalStatusBar.js";
 import { Banner } from "./components/Banner.js";
 import { PlanOverlay } from "./components/PlanOverlay.js";
 import { ModelSelector } from "./components/ModelSelector.js";
-import { TaskOverlay } from "./components/TaskOverlay.js";
 import { GoalOverlay } from "./components/GoalOverlay.js";
 import { PixelOverlay } from "./components/PixelOverlay.js";
+import { buildGoalFinalSummarySections, buildGoalSummaryRows, goalPassedDetail, } from "./goal-summary.js";
 import { SkillsOverlay } from "./components/SkillsOverlay.js";
-import { EyesOverlay } from "./components/EyesOverlay.js";
 import { ThemeSelector } from "./components/ThemeSelector.js";
 import { BackgroundTasksBar, getFooterStatusLayoutDecision, } from "./components/BackgroundTasksBar.js";
 import { useTheme, useSetTheme } from "./theme/theme.js";
@@ -59,8 +57,9 @@ import { getLatestUserText, injectRepoMapContextMessages, stripRepoMapContextMes
 import { extractPlanSteps, findCompletedMarkers, markStepsCompleted, segmentDisplayText, stripDoneMarkers, } from "../utils/plan-steps.js";
 import { getMCPServers } from "../core/mcp/index.js";
 import { trimFlushedItems, flushOnTurnText, flushOnTurnEnd, flushOverflow, } from "./live-item-flush.js";
-import { appendGoalDecision, appendGoalEvidence, formatGoalBlockingPrerequisites, goalHasBlockingPrerequisites, loadGoalRuns, reconcileActiveGoalRuns, summarizeGoalCounts, summarizeGoalCountsFromRuns, updateGoalTask, upsertGoalRun, } from "../core/goal-store.js";
-import { canCompleteGoalRun, decideGoalNextAction } from "../core/goal-controller.js";
+import { splitAssistantStreamingText } from "./utils/assistant-stream-split.js";
+import { appendGoalDecision, appendGoalEvidence, formatGoalBlockingPrerequisites, goalHasBlockingPrerequisites, loadGoalRuns, reconcileActiveGoalRuns, updateGoalTask, upsertGoalRun, } from "../core/goal-store.js";
+import { canCompleteGoalRun, decideGoalNextAction, } from "../core/goal-controller.js";
 import { runGoalPrerequisiteChecks } from "../core/goal-prerequisites.js";
 import { runGoalVerifierCommand } from "../core/goal-verifier.js";
 import { listGoalWorkers, startGoalWorker, stopGoalWorker, subscribeGoalWorkerCompletions, } from "../core/goal-worker.js";
@@ -117,6 +116,56 @@ export function routePromptCommandInput(input, promptCommands = PROMPT_COMMANDS,
         fullPrompt: cmdArgs ? `${promptText}\n\n## User Instructions\n\n${cmdArgs}` : promptText,
     };
 }
+const GOAL_PLANNER_OUTPUT_MAX_CHARS = 2400;
+function messageTextContent(message) {
+    if (typeof message.content === "string")
+        return message.content;
+    return message.content
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n");
+}
+export function collectAssistantTextSince(messages, startIndex, maxChars = GOAL_PLANNER_OUTPUT_MAX_CHARS) {
+    const text = messages
+        .slice(startIndex)
+        .filter((message) => message.role === "assistant")
+        .map(messageTextContent)
+        .join("\n")
+        .trim();
+    if (text.length <= maxChars)
+        return text;
+    return text.slice(0, maxChars).trimEnd() + "\n[planner output truncated]";
+}
+export function buildGoalSetupPromptFromPlanner({ originalGoalPrompt, plannerOutput, }) {
+    const compactPlannerOutput = plannerOutput.trim() || "GOAL_PLAN\nresearch=none\nEND_GOAL_PLAN";
+    return (`${originalGoalPrompt.trim()}\n\n` +
+        `## Goal Planner Output\n\n${compactPlannerOutput}\n\n` +
+        `Use the original objective plus this planner output to create durable Goal setup only. ` +
+        `Do not redo planner research unless the planner output is unusable.`);
+}
+export function isGoalPromptCommandName(cmdName) {
+    return getPromptCommand(cmdName)?.name === "goal";
+}
+export async function runGoalPromptSetupSequence({ userContent, fullPrompt, messagesRef, setGoalModeAndPrompt, runAgent, onStage, }) {
+    onStage?.("Planning Goal setup");
+    await setGoalModeAndPrompt("planner");
+    const plannerStartIndex = messagesRef.current.length;
+    await runAgent(userContent);
+    const plannerOutput = collectAssistantTextSince(messagesRef.current, plannerStartIndex);
+    const setupPrompt = buildGoalSetupPromptFromPlanner({
+        originalGoalPrompt: fullPrompt,
+        plannerOutput,
+    });
+    await setGoalModeAndPrompt("setup");
+    onStage?.("Creating Goal run");
+    await runAgent(setupPrompt);
+}
+function buildGoalTaskPromptWithReferences(run, taskPrompt) {
+    if (taskPrompt.includes("## Goal References (MANDATORY)"))
+        return taskPrompt;
+    const references = formatGoalReferencesForPrompt(run.references ?? []);
+    return references ? `${references}\n\n${taskPrompt}` : taskPrompt;
+}
 export function buildUserContentWithAttachments(text, inputImages, modelSupportsImages) {
     if (inputImages.length === 0)
         return text;
@@ -156,14 +205,13 @@ export function buildUserContentWithAttachments(text, inputImages, modelSupports
     // If only text parts remain after stripping images, simplify to plain string
     return parts.length === 1 && parts[0].type === "text" ? parts[0].text : parts;
 }
-/** Tools that get aggregated into a single compact group when concurrent. */
+/** Tools that get aggregated into a single compact group when possible. */
 const AGGREGATABLE_TOOLS = new Set(["read", "grep", "find", "ls"]);
 const RUNNING_INDICATOR_ANIMATION_MS = 1_200;
 /**
- * Cap memory by replacing old items with tiny tombstones. Ink's <Static>
- * tracks rendered items by array length — the array must never shrink, but
- * we can swap out heavy objects for lightweight `{ kind: "tombstone", id }`
- * entries so GC can reclaim the original data.
+ * Cap memory by replacing old finalized rows with tiny tombstones. The full
+ * transcript is already printed into terminal scrollback, so the in-memory copy
+ * only needs enough recent structure to survive remounts and session mirroring.
  */
 const MAX_LIVE_HISTORY = 200;
 function compactHistory(items) {
@@ -190,66 +238,41 @@ function summarizeGoalCompletion(summary) {
     const verificationLine = lines.find((line) => /^(Verification|Verified|Result):/i.test(line));
     return statusLine ?? changedLine ?? verificationLine ?? lines[0];
 }
-function formatGoalWorkerFinishedTitle(taskTitle, status) {
-    return status === "done" ? `Done: ${taskTitle}` : `Failed: ${taskTitle}`;
-}
-function countGoalTasksByStatus(tasks, status) {
-    return tasks.filter((task) => task.status === status).length;
-}
-function firstText(values) {
-    return values.find((value) => value !== undefined && value.trim().length > 0)?.trim();
-}
-function truncateGoalSummary(value, maxLength = 90) {
-    const normalized = value.replace(/\s+/g, " ").trim();
-    if (normalized.length <= maxLength)
+const GOAL_PROGRESS_TEXT_LIMIT = 72;
+export function truncateGoalProgressText(text) {
+    const normalized = text.replace(/\s+/g, " ").trim();
+    if (normalized.length <= GOAL_PROGRESS_TEXT_LIMIT)
         return normalized;
-    return `${normalized.slice(0, maxLength - 1)}…`;
+    return `${normalized.slice(0, GOAL_PROGRESS_TEXT_LIMIT - 1).trimEnd()}…`;
 }
-export function buildGoalSummaryRows(run) {
-    const rows = [];
-    const doneTasks = countGoalTasksByStatus(run.tasks, "done");
-    const failedTasks = countGoalTasksByStatus(run.tasks, "failed");
-    const blockedTasks = countGoalTasksByStatus(run.tasks, "blocked");
-    const taskSuffix = [
-        failedTasks > 0 ? `${failedTasks} failed` : undefined,
-        blockedTasks > 0 ? `${blockedTasks} blocked` : undefined,
-    ].filter((item) => item !== undefined);
-    rows.push({
-        label: "Tasks",
-        value: run.tasks.length > 0 ? `${doneTasks}/${run.tasks.length} done` : "none",
-        ...(taskSuffix.length > 0 ? { detail: taskSuffix.join(", ") } : {}),
-    });
-    const verifierResult = run.verifier?.lastResult;
-    const verifierDetail = firstText([verifierResult?.outputPath, run.verifier?.command]);
-    rows.push({
-        label: "Verifier",
-        value: verifierResult?.status ?? (run.verifier?.command ? "ready" : "missing"),
-        ...(verifierDetail ? { detail: truncateGoalSummary(verifierDetail) } : {}),
-    });
-    const latestEvidence = run.evidence.at(-1);
-    rows.push({
-        label: "Evidence",
-        value: `${run.evidence.length} recorded`,
-        ...(latestEvidence
-            ? { detail: truncateGoalSummary(latestEvidence.path ?? latestEvidence.label) }
-            : {}),
-    });
-    if (run.status === "blocked" || run.status === "paused" || run.blockers.length > 0) {
-        rows.push({
-            label: run.status === "paused" ? "Paused on" : "Blocked on",
-            value: truncateGoalSummary(goalHasBlockingPrerequisites(run)
-                ? formatGoalBlockingPrerequisites(run)
-                : (run.blockers[0] ?? "manual review"), 110),
-        });
+function formatGoalWorkerFinishedTitle(taskTitle, status) {
+    const prefix = status === "done" ? "Done" : "Failed";
+    return truncateGoalProgressText(`${prefix}: ${taskTitle}`);
+}
+function goalProgressLoaderStatus(item) {
+    if (item.status === "failed" || item.status === "fail" || item.status === "blocked")
+        return "error";
+    if (item.phase === "worker_finished" ||
+        item.phase === "verifier_finished" ||
+        item.phase === "terminal") {
+        return "done";
     }
-    else if (run.successCriteria.length > 0) {
-        rows.push({
-            label: "Criteria",
-            value: `${run.successCriteria.length} checked`,
-            detail: truncateGoalSummary(run.successCriteria[0] ?? "", 80),
-        });
+    return "running";
+}
+function goalProgressColor(item, theme) {
+    const isError = item.status === "failed" || item.status === "fail" || item.status === "blocked";
+    if (isError)
+        return theme.error;
+    if (item.phase === "worker_finished" || item.phase === "terminal")
+        return theme.success;
+    if (item.phase === "verifier_finished" || item.phase === "verifier_started")
+        return theme.accent;
+    if (item.phase === "orchestrator_reviewing" || item.phase === "orchestrator_working") {
+        return theme.secondary;
     }
-    return rows.slice(0, 4);
+    if (item.phase === "continuing")
+        return theme.warning;
+    return theme.primary;
 }
 function goalTerminalProgressId(run) {
     return `goal-terminal-${run.id}`;
@@ -262,10 +285,20 @@ function goalTerminalRunIdFromItem(item) {
     return item.id.slice("goal-terminal-".length);
 }
 function goalProgressMatchesDraft(item, draft) {
-    return (item.title === draft.title &&
+    return (item.phase === draft.phase &&
+        item.title === draft.title &&
         item.detail === draft.detail &&
+        item.workerId === draft.workerId &&
         item.status === draft.status &&
-        JSON.stringify(item.summaryRows ?? []) === JSON.stringify(draft.summaryRows ?? []));
+        JSON.stringify(item.summaryRows ?? []) === JSON.stringify(draft.summaryRows ?? []) &&
+        JSON.stringify(item.summarySections ?? []) === JSON.stringify(draft.summarySections ?? []));
+}
+export function appendGoalProgressDraft(items, draft, makeId) {
+    const previous = items.at(-1);
+    if (previous?.kind === "goal_progress" && goalProgressMatchesDraft(previous, draft)) {
+        return items;
+    }
+    return [...items, { ...draft, id: makeId() }];
 }
 /**
  * Reconcile terminal Goal cards that are already visible in this UI session.
@@ -277,6 +310,16 @@ function goalProgressMatchesDraft(item, draft) {
  * event append that card first, then use this helper to tombstone stale older
  * cards for the same run.
  */
+export function getNextGeneratedItemId(items) {
+    let max = -1;
+    for (const item of items) {
+        const raw = item.id.startsWith("ui-") ? item.id.slice(3) : item.id;
+        const n = Number(raw);
+        if (Number.isInteger(n) && n >= 0 && n > max)
+            max = n;
+    }
+    return max + 1;
+}
 export function completedItemsWithDurableGoalTerminalProgress(items, runs) {
     const runIds = new Set(runs.map((run) => run.id));
     const terminalByRun = new Map(runs
@@ -304,8 +347,9 @@ export function formatGoalTerminalProgress(run) {
                 kind: "goal_progress",
                 phase: "terminal",
                 title: `Goal passed: ${run.title}`,
-                detail: "Verifier evidence is recorded; auto-continuation stopped.",
+                detail: goalPassedDetail(run),
                 summaryRows: buildGoalSummaryRows(run),
+                summarySections: buildGoalFinalSummarySections(run),
                 status: run.status,
             };
         case "failed":
@@ -345,29 +389,186 @@ export function formatGoalTerminalProgress(run) {
     }
 }
 export function shouldHideHistoryForOverlayView(isOverlayView, _isAgentRunning) {
-    // Overlay panes are standalone full-screen states. Do not render chat Static
-    // history behind them, otherwise panes appear below the previous transcript.
+    // Overlay panes are standalone full-screen states. Finalized chat rows are
+    // printed outside Ink, so overlays should never replay transcript UI behind them.
     return isOverlayView;
 }
 export function shouldStabilizeOverlayPaneRerender({ overlayPane, isAgentRunning, }) {
-    return isAgentRunning && (overlayPane === "goal" || overlayPane === "plan");
+    return isAgentRunning && overlayPane === "goal";
 }
 export function shouldHideStaticItemsForOverlayView({ shouldHideHistoryForOverlay, stabilizeOverlayPaneRerender: _stabilizeOverlayPaneRerender, }) {
     return shouldHideHistoryForOverlay;
 }
-export function getScrollStabilizationDecision({ isUserScrolled, hasNewOutput, hasTallLiveUserMessage = false, }) {
-    const shouldStabilize = isUserScrolled || hasTallLiveUserMessage;
+export function getDoneFlushDecision({ planOverlayPending, goalMode, goalAutoExpand, }) {
+    return {
+        showDoneStatus: !(planOverlayPending ||
+            goalMode === "planner" ||
+            goalMode === "setup" ||
+            goalAutoExpand),
+        flushLiveItems: true,
+    };
+}
+export function getGoalSetupFinishedPaneTransition() {
+    return {
+        overlay: "goal",
+        goalAutoExpand: true,
+        planAutoExpand: false,
+        suppressDoneStatus: true,
+    };
+}
+export function getGoalSetupPaneTransitionAfterRun({ isGoalSetupCommand, setupPanePending, }) {
+    return isGoalSetupCommand && setupPanePending ? getGoalSetupFinishedPaneTransition() : null;
+}
+export function shouldResetUIForSetupPaneTransition({ hasResetUI, hasSessionStore, }) {
+    // Opening a review pane is a full-screen state transition. A bare React state
+    // flip hides history in the virtual tree, but it does not reset Ink/log-update's
+    // already-written terminal frame, so the pane can render below prior chat.
+    return hasResetUI && hasSessionStore;
+}
+export const shouldResetUIForGoalSetupPaneTransition = shouldResetUIForSetupPaneTransition;
+export function getGoalActivationPaneTransition() {
+    return { overlay: null, goalAutoExpand: false, planAutoExpand: false, resetReviewScreen: true };
+}
+export function getGoalContinuationChoiceKey({ runId, decision, }) {
+    switch (decision.kind) {
+        case "create_task":
+            return `${runId}:create_task:${decision.title}:${decision.prompt}`;
+        case "start_worker":
+        case "pause":
+            return `${runId}:${decision.kind}:${decision.task.id}:${decision.attempts}`;
+        case "run_verifier":
+            return `${runId}:run_verifier:${decision.command}`;
+        case "blocked":
+        case "complete":
+        case "terminal":
+        case "wait":
+            return `${runId}:${decision.kind}:${decision.reason}`;
+    }
+}
+export function getScrollStabilizationDecision({ isUserScrolled, hasNewOutput, hasTallLiveUserMessage = false, hasParagraphBreakLiveUserMessage = false, }) {
+    const shouldPreserveStatic = isUserScrolled || hasTallLiveUserMessage || hasParagraphBreakLiveUserMessage;
+    const shouldAutoFollow = !(isUserScrolled || hasTallLiveUserMessage);
     return {
-        preserveStatic: shouldStabilize && hasNewOutput,
-        autoFollow: !shouldStabilize,
+        preserveStatic: shouldPreserveStatic && hasNewOutput,
+        autoFollow: shouldAutoFollow,
     };
 }
+export function nextGoalModeAfterAgentDone({ currentMode, runningGoalIds, queuedSyntheticEvents, activeContinuationFlights = 0, wasGoalSetupTurn, }) {
+    if (wasGoalSetupTurn)
+        return "off";
+    if (currentMode === "planner" || currentMode === "setup")
+        return currentMode;
+    if (queuedSyntheticEvents > 0)
+        return "coordinator";
+    if (activeContinuationFlights > 0)
+        return "coordinator";
+    if (currentMode === "coordinator" && runningGoalIds > 0)
+        return "coordinator";
+    return "off";
+}
+export function hasParagraphBreakLiveUserMessage(text) {
+    return /\n[ \t]*\n/.test(text);
+}
 export function isTallLiveUserMessage(text, rows) {
     return text.split("\n").length > Math.max(8, Math.floor(rows * 0.6));
 }
 export function getStaticHistoryKey({ resizeKey }) {
     return `${resizeKey}`;
 }
+const MIN_LIVE_AREA_ROWS = 3;
+const INPUT_AREA_ROWS = 3;
+const STATUS_SLOT_ROWS = 2;
+const FOOTER_ONE_LINE_ROWS = 1;
+const FOOTER_TWO_LINE_ROWS = 2;
+const GOAL_STATUS_ROWS = 1;
+const COLLAPSED_FOOTER_STATUS_ROWS = 1;
+const MAX_EXPANDED_BACKGROUND_TASK_ROWS = 7;
+function isAgentSpacingKind(kind) {
+    return [
+        "assistant",
+        "queued",
+        "goal_progress",
+        "tool_start",
+        "tool_done",
+        "tool_group",
+        "server_tool_start",
+        "server_tool_done",
+        "subagent_group",
+    ].includes(kind);
+}
+function isToolBoundaryKind(kind) {
+    return [
+        "goal_progress",
+        "tool_start",
+        "tool_done",
+        "tool_group",
+        "server_tool_start",
+        "server_tool_done",
+        "subagent_group",
+    ].includes(kind);
+}
+function isAgentSpacingItem(item) {
+    return isAgentSpacingKind(item.kind);
+}
+export function shouldTopSpaceAfterPrintedAgentBoundary({ currentKind, previousLiveItem, lastPendingHistoryItem, lastHistoryItem, }) {
+    const needsExternalSpacing = [
+        "goal_progress",
+        "tool_start",
+        "tool_group",
+        "assistant",
+        "queued",
+    ].includes(currentKind);
+    if (!needsExternalSpacing)
+        return false;
+    if (previousLiveItem !== undefined)
+        return false;
+    const previousKind = lastPendingHistoryItem?.kind ?? lastHistoryItem?.kind;
+    return previousKind !== undefined && isAgentSpacingKind(previousKind);
+}
+export function shouldTopSpaceAssistantAfterToolBoundary({ text, previousLiveItem, lastPendingHistoryItem, lastHistoryItem, }) {
+    if (text.trim().length === 0)
+        return false;
+    if (shouldTopSpaceAfterPrintedAgentBoundary({
+        currentKind: "assistant",
+        previousLiveItem,
+        lastPendingHistoryItem,
+        lastHistoryItem,
+    })) {
+        return true;
+    }
+    const previousKind = previousLiveItem?.kind;
+    return previousKind !== undefined && isToolBoundaryKind(previousKind);
+}
+export function shouldTopSpaceStreamingAssistant({ visibleStreamingText, lastLiveItem, lastPendingHistoryItem, lastHistoryItem, }) {
+    return shouldTopSpaceAssistantAfterToolBoundary({
+        text: visibleStreamingText,
+        previousLiveItem: lastLiveItem,
+        lastPendingHistoryItem,
+        lastHistoryItem,
+    });
+}
+export function getChatControlsLayoutDecision({ rows, agentRunning, activityVisible, doneStatusVisible, stallStatusVisible, exitPending, footerStatusLayout, taskBarExpanded, goalStatusEntryCount, footerFitsOnOneLine, }) {
+    const statusRows = activityVisible || stallStatusVisible || doneStatusVisible || agentRunning
+        ? STATUS_SLOT_ROWS
+        : 0;
+    const footerRows = exitPending || footerFitsOnOneLine ? FOOTER_ONE_LINE_ROWS : FOOTER_TWO_LINE_ROWS;
+    const goalRows = !exitPending && goalStatusEntryCount > 0 ? GOAL_STATUS_ROWS : 0;
+    const footerStatusRows = footerStatusLayout.stack
+        ? Number(footerStatusLayout.hasBackgroundTasks) + Number(footerStatusLayout.hasUpdateNotice)
+        : footerStatusLayout.hasBackgroundTasks || footerStatusLayout.hasUpdateNotice
+            ? COLLAPSED_FOOTER_STATUS_ROWS
+            : 0;
+    const expandedTaskRows = taskBarExpanded && footerStatusLayout.hasBackgroundTasks
+        ? MAX_EXPANDED_BACKGROUND_TASK_ROWS - COLLAPSED_FOOTER_STATUS_ROWS
+        : 0;
+    const controlsRows = statusRows + INPUT_AREA_ROWS + footerRows + goalRows + footerStatusRows + expandedTaskRows;
+    const maxControlsRows = Math.max(1, rows - MIN_LIVE_AREA_ROWS);
+    const boundedControlsRows = Math.min(controlsRows, maxControlsRows);
+    return {
+        controlsRows: boundedControlsRows,
+        liveAreaRows: Math.max(MIN_LIVE_AREA_ROWS, rows - boundedControlsRows),
+    };
+}
 // flushOnTurnText, flushOnTurnEnd are imported from ./live-item-flush.ts
 /** Check whether an item is still active (running spinner, pending result). */
 export function isActiveItem(item) {
@@ -386,15 +587,17 @@ export function isActiveItem(item) {
     }
 }
 /**
- * Partition live items into completed (flushable to Static) and still-active.
+ * Partition live items into completed (flushable to finalized history) and still-active.
  * Completed items precede active ones — we flush the longest contiguous prefix
  * of completed items to keep ordering stable.
  */
-function partitionCompleted(items) {
-    // Find the first active item — everything before it is safe to flush
+export function partitionCompleted(items) {
+    // Find the first active item — everything before it is safe to flush as a
+    // single chronological prefix. Splitting assistant text out of that prefix
+    // lets later tool rows print to scrollback above the message that introduced
+    // them, so keep the prefix intact.
     const firstActiveIdx = items.findIndex(isActiveItem);
     if (firstActiveIdx === -1) {
-        // All items are completed
         return { flushed: items, remaining: [] };
     }
     if (firstActiveIdx === 0) {
@@ -405,6 +608,29 @@ function partitionCompleted(items) {
         remaining: items.slice(firstActiveIdx),
     };
 }
+function normalizeAssistantText(text) {
+    return stripDoneMarkers(text).trim();
+}
+function isSameAssistantText(item, text) {
+    return item.kind === "assistant" && normalizeAssistantText(item.text) === text;
+}
+export function pinStreamingTextBeforeToolBoundary({ items, visibleStreamingText, thinking, thinkingMs, makeId, }) {
+    const text = normalizeAssistantText(visibleStreamingText);
+    if (text.length === 0)
+        return items;
+    if (items.some((item) => item.kind === "assistant"))
+        return items;
+    return [
+        ...items,
+        {
+            kind: "assistant",
+            text,
+            thinking: thinking.length > 0 ? thinking : undefined,
+            thinkingMs: thinking.length > 0 ? thinkingMs : undefined,
+            id: makeId(),
+        },
+    ];
+}
 // ── Duration summary ─────────────────────────────────────
 function formatDuration(ms) {
     const totalSec = Math.round(ms / 1000);
@@ -452,8 +678,8 @@ function pickDurationVerb(toolsUsed) {
         return "Ran & investigated for";
     if (has("bash"))
         return "Executed commands for";
-    if (hasAny("tasks", "task-output", "task-stop"))
-        return "Managed tasks for";
+    if (hasAny("task-output", "task-stop"))
+        return "Managed background processes for";
     if (has("grep") && has("read"))
         return "Investigated for";
     if (has("grep") && has("find"))
@@ -481,65 +707,16 @@ function pickDurationVerb(toolsUsed) {
     ];
     return phrases[Math.floor(Math.random() * phrases.length)];
 }
-// ── Animated thinking border ────────────────────────────────
-const THINKING_BORDER_COLORS = ["#60a5fa", "#818cf8", "#a78bfa", "#818cf8", "#60a5fa"];
-// ── Task count helper ───────────────────────────────────────
-function getTaskCount(cwd) {
-    try {
-        const hash = createHash("sha256").update(cwd).digest("hex").slice(0, 16);
-        const data = readFileSync(join(homedir(), ".gg-tasks", "projects", hash, "tasks.json"), "utf-8");
-        const tasks = JSON.parse(data);
-        return tasks.filter((t) => t.status !== "done").length;
-    }
-    catch {
-        return 0;
-    }
-}
-function getNextPendingTask(cwd) {
-    try {
-        const hash = createHash("sha256").update(cwd).digest("hex").slice(0, 16);
-        const data = readFileSync(join(homedir(), ".gg-tasks", "projects", hash, "tasks.json"), "utf-8");
-        const tasks = JSON.parse(data);
-        const pending = tasks.find((t) => t.status === "pending");
-        if (!pending)
-            return null;
-        return {
-            id: pending.id,
-            title: pending.title,
-            prompt: pending.prompt || pending.text || pending.title,
-        };
-    }
-    catch {
-        return null;
-    }
-}
-function markTaskInProgress(cwd, taskId) {
-    try {
-        const hash = createHash("sha256").update(cwd).digest("hex").slice(0, 16);
-        const filePath = join(homedir(), ".gg-tasks", "projects", hash, "tasks.json");
-        const data = readFileSync(filePath, "utf-8");
-        const tasks = JSON.parse(data);
-        const updated = tasks.map((t) => (t.id === taskId ? { ...t, status: "in-progress" } : t));
-        writeFileSync(filePath, JSON.stringify(updated, null, 2) + "\n", "utf-8");
-    }
-    catch {
-        // ignore
-    }
-}
 // ── App Component ──────────────────────────────────────────
 export function App(props) {
     const theme = useTheme();
     const switchTheme = useSetTheme();
-    const { columns, resizeKey } = useTerminalSize();
+    const { write: writeStdout } = useStdout();
+    const { columns, rows } = useTerminalSize();
     // Hoisted before terminal title hook so it can reference them
     const [lastUserMessage, setLastUserMessage] = useState("");
     const [exitPending, setExitPending] = useState(false);
-    // Initialize from planModeRef (lives outside React in cli.ts) so plan
-    // mode survives /clear's unmount/remount, matching the prior behavior
-    // where /clear didn't toggle plan mode off.
-    const [planMode, setPlanMode] = useState(props.planModeRef?.current ?? false);
-    const planModeLocalRef = useRef(false);
-    planModeLocalRef.current = planMode;
+    const [goalMode, setGoalMode] = useState(props.sessionStore?.goalMode ?? props.goalModeRef?.current ?? "off");
     // Terminal title — updated later after agentLoop is created
     // (hoisted here so the hook is always called in the same order)
     const [titleRunning, setTitleRunning] = useState(false);
@@ -549,14 +726,11 @@ export function App(props) {
         isRunning: titleRunning,
         sessionTitle,
     });
-    // Items scrolled into Static (history). For restored sessions, seed the
-    // initial array directly — matches how every other Ink chat agent passes
-    // messages to <Static> (cat-code, harness, p90-cli, openai-chatgpt, lms,
-    // gatsby). Ink's Static (build/components/Static.js) starts with index=0
-    // so slice(0) returns the full array regardless of length.
+    // Completed transcript rows are kept as durable session data but are no longer
+    // rendered through Ink history. They are serialized once into real terminal
+    // scrollback via terminalHistoryPrinter, while Ink owns only live rows and
+    // controls. This avoids Static/log-update replay drift on resize/remount.
     const [history, setHistory] = useState(() => {
-        // sessionStore wins (lives across remount). Falls back to initialHistory
-        // (loaded from a session file at startup), then a fresh banner-only list.
         const stored = props.sessionStore?.history;
         if (stored && stored.length > 0)
             return stored;
@@ -567,24 +741,19 @@ export function App(props) {
     });
     // Items from the current/last turn — rendered in the live area so they stay visible.
     // Seed from sessionStore so Goal progress/completion rows and other live output
-    // survive pane/overlay/resize remounts before they are flushed to <Static>.
+    // survive pane/overlay/resize remounts before they are finalized.
     const [liveItems, setLiveItems] = useState(() => props.sessionStore?.liveItems ?? []);
     // overlay seeded from sessionStore (lives across remount). Falls back to
     // props.initialOverlay (CLI launched with one), then null.
     const [overlay, setOverlay] = useState(props.sessionStore?.overlay ?? props.initialOverlay ?? null);
-    const [taskCount, setTaskCount] = useState(() => getTaskCount(props.cwd));
-    const [goalCount, setGoalCount] = useState(0);
     const [goalStatusEntries, setGoalStatusEntries] = useState(props.sessionStore?.goalStatusEntries ?? []);
-    const [eyesCount, setEyesCount] = useState(() => isEyesActive(props.cwd) ? journalCount({ status: "open" }, props.cwd) : undefined);
     const [updatePending, setUpdatePending] = useState(() => getPendingUpdate(props.version) !== null);
-    // Seed from sessionStore so "Run All" chaining survives the resetUI()
-    // remount that startTask() triggers between tasks.
-    const [runAllTasks, setRunAllTasks] = useState(props.sessionStore?.runAllTasks ?? false);
-    const runAllTasksRef = useRef(props.sessionStore?.runAllTasks ?? false);
-    const startTaskRef = useRef(() => { });
     const agentRunningRef = useRef(false);
     const runningGoalIdsRef = useRef(new Set());
     const activeVerifierRunIdsRef = useRef(new Set());
+    const queuedGoalSyntheticEventsRef = useRef(0);
+    const goalContinuationFlightsRef = useRef(new Set());
+    const goalContinuationRecentChoicesRef = useRef(new Map());
     const startGoalRunRef = useRef(() => { });
     const runAllPixelRef = useRef(props.sessionStore?.runAllPixel ?? false);
     const currentPixelFixRef = useRef(null);
@@ -594,12 +763,14 @@ export function App(props) {
     const [doneStatus, setDoneStatus] = useState(props.sessionStore?.doneStatus ?? null);
     // Suppress "done" status when a plan overlay is about to open
     const planOverlayPendingRef = useRef(false);
+    const goalSetupPanePendingRef = useRef(false);
     const [gitBranch, setGitBranch] = useState(null);
     const [currentModel, setCurrentModel] = useState(props.model);
     const [currentProvider, setCurrentProvider] = useState(props.provider);
     const [currentTools, setCurrentTools] = useState(props.tools);
     const currentToolsRef = useRef(props.tools);
     const [thinkingEnabled, setThinkingEnabled] = useState(!!props.thinking);
+    const [renderMarkdown, setRenderMarkdown] = useState(true);
     const messagesRef = useRef(props.sessionStore?.messages ?? props.messages);
     const repoMapInjectionEnabledRef = useRef(true);
     const repoMapDirtyRef = useRef(true);
@@ -608,10 +779,12 @@ export function App(props) {
     const repoMapChangedCountRef = useRef(0);
     const repoMapCacheRef = useRef(createRepoMapCache());
     const [planAutoExpand, setPlanAutoExpand] = useState(props.sessionStore?.planAutoExpand ?? false);
+    const [goalAutoExpand, setGoalAutoExpand] = useState(props.sessionStore?.goalAutoExpand ?? false);
+    const goalAutoExpandRef = useRef(props.sessionStore?.goalAutoExpand ?? false);
     const approvedPlanPathRef = useRef(props.sessionStore?.approvedPlanPath);
     const planStepsRef = useRef(props.sessionStore?.planSteps ?? []);
     const [planSteps, setPlanSteps] = useState(props.sessionStore?.planSteps ?? []);
-    const planModeStateRef = useRef(planMode);
+    const goalModeStateRef = useRef(goalMode);
     // Stuck-guard for the plan-continuation follow-up nudge. Tracks how many
     // times we've nudged the agent to continue the same step. Reset whenever a
     // new [DONE:n] marker advances progress (see onTurnText). Caps at 2 nudges
@@ -619,23 +792,14 @@ export function App(props) {
     const followUpNudgesRef = useRef({ step: 0, count: 0 });
     // Seed the per-item ID counter so it doesn't collide with IDs already in
     // sessionStore.history (which survives remount). Without this, a remount
-    // (resize, overlay toggle, etc.) starts the counter at 0 and new items
-    // generate ids "0", "1", "2"… that collide with the same ids from the
-    // previous mount, triggering React's duplicate-key warning and causing
-    // duplicate/omitted renders.
-    const nextIdRef = useRef((() => {
-        const items = [
-            ...(props.sessionStore?.history ?? props.initialHistory ?? []),
-            ...(props.sessionStore?.liveItems ?? []),
-        ];
-        let max = -1;
-        for (const item of items) {
-            const n = Number(item.id);
-            if (Number.isFinite(n) && n > max)
-                max = n;
-        }
-        return max + 1;
-    })());
+    // (resize, overlay toggle, goal pane open, etc.) starts the counter at 0
+    // and new items generate ids "ui-0", "ui-1", "ui-2"… that collide with
+    // the same ids from the previous mount, triggering React's duplicate-key
+    // warning and causing duplicate/omitted renders.
+    const nextIdRef = useRef(getNextGeneratedItemId([
+        ...(props.sessionStore?.history ?? props.initialHistory ?? []),
+        ...(props.sessionStore?.liveItems ?? []),
+    ]));
     const sessionManagerRef = useRef(props.sessionsDir ? new SessionManager(props.sessionsDir) : null);
     const sessionPathRef = useRef(props.sessionStore?.sessionPath ?? props.sessionPath);
     const persistedIndexRef = useRef(messagesRef.current.length);
@@ -666,8 +830,11 @@ export function App(props) {
      */
     const triggerAutoSetupRef = useRef(async () => { });
     const getId = () => `ui-${nextIdRef.current++}`;
+    const appendGoalAgentTransition = useCallback((text) => {
+        setLiveItems((prev) => [...prev, { kind: "goal_agent_transition", text, id: getId() }]);
+    }, []);
     const appendGoalProgress = useCallback((item) => {
-        setLiveItems((prev) => [...prev, { ...item, id: getId() }]);
+        setLiveItems((prev) => appendGoalProgressDraft(prev, item, getId));
     }, []);
     const goalNumberForRun = useCallback((runId) => Math.max(1, goalStatusEntries.findIndex((entry) => entry.runId === runId) + 1), [goalStatusEntries]);
     const clearGoalStatusEntry = useCallback((runId) => {
@@ -686,21 +853,59 @@ export function App(props) {
             return next;
         });
     }, [props.sessionStore]);
-    // Two-phase flush: items waiting to be moved to Static history after the
-    // live area has been cleared and Ink has committed the smaller output.
-    const pendingFlushRef = useRef([]);
-    const [flushGeneration, setFlushGeneration] = useState(0);
-    /** Queue items for two-phase flush and signal the drain effect. */
+    const sessionStore = props.sessionStore;
+    const terminalHistoryContextRef = useRef({
+        theme,
+        columns,
+        version: props.version,
+        model: currentModel,
+        provider: currentProvider,
+        cwd: displayedCwd,
+    });
+    useEffect(() => {
+        terminalHistoryContextRef.current = {
+            theme,
+            columns,
+            version: props.version,
+            model: currentModel,
+            provider: currentProvider,
+            cwd: displayedCwd,
+        };
+    }, [theme, columns, props.version, currentModel, currentProvider, displayedCwd]);
+    const printHistoryItems = useCallback((items, options) => {
+        if (!props.terminalHistoryPrinter || items.length === 0)
+            return;
+        props.terminalHistoryPrinter.print(items, terminalHistoryContextRef.current, {
+            ...options,
+            write: writeStdout,
+        });
+    }, [props.terminalHistoryPrinter, writeStdout]);
+    const pendingHistoryFlushRef = useRef([]);
+    const streamedAssistantFlushRef = useRef({
+        flushedChars: 0,
+        text: "",
+    });
+    const [historyFlushGeneration, setHistoryFlushGeneration] = useState(0);
     const queueFlush = useCallback((items) => {
-        if (items.length === 0)
+        const flushed = trimFlushedItems(items);
+        if (flushed.length === 0)
             return;
-        pendingFlushRef.current = [...pendingFlushRef.current, ...items];
-        if (props.sessionStore) {
+        pendingHistoryFlushRef.current = [...pendingHistoryFlushRef.current, ...flushed];
+        if (sessionStore) {
             const queuedIds = new Set(items.map((item) => item.id));
-            props.sessionStore.liveItems = (props.sessionStore.liveItems ?? []).filter((item) => !queuedIds.has(item.id));
+            sessionStore.liveItems = (sessionStore.liveItems ?? []).filter((item) => !queuedIds.has(item.id));
         }
-        setFlushGeneration((g) => g + 1);
-    }, [props.sessionStore]);
+        setHistoryFlushGeneration((generation) => generation + 1);
+    }, [sessionStore]);
+    const finalizeSubmittedUserItem = useCallback((item) => {
+        streamedAssistantFlushRef.current = { flushedChars: 0, text: "" };
+        setLiveItems((prev) => {
+            if (prev.length > 0)
+                queueFlush(prev);
+            queueFlush([item]);
+            return [];
+        });
+    }, [queueFlush]);
     // Mirror runtime state choices (model/provider/thinking) into renderApp's
     // closure so unmount/remount preserves them.
     const onRuntimeStateChange = props.onRuntimeStateChange;
@@ -715,12 +920,35 @@ export function App(props) {
             thinking: thinkingEnabled ? getMaxThinkingLevel(currentModel) : undefined,
         });
     }, [thinkingEnabled, currentModel, onRuntimeStateChange]);
+    useEffect(() => {
+        printHistoryItems(history);
+    }, [history, printHistoryItems]);
+    useEffect(() => {
+        const flushed = pendingHistoryFlushRef.current;
+        if (flushed.length === 0)
+            return;
+        pendingHistoryFlushRef.current = [];
+        printHistoryItems(flushed);
+        const flushedIds = new Set(flushed.map((item) => item.id));
+        setLiveItems((prev) => prev.filter((item) => !flushedIds.has(item.id)));
+        setHistory((prev) => {
+            const existingIds = new Set(prev.map((item) => item.id));
+            const nextItems = flushed.filter((item) => !existingIds.has(item.id));
+            if (nextItems.length === 0)
+                return prev;
+            const next = compactHistory([...prev, ...nextItems]);
+            if (sessionStore)
+                sessionStore.history = next;
+            return next;
+        });
+    }, [historyFlushGeneration, printHistoryItems, sessionStore]);
     // Mirror session state into renderApp's closure so resetUI() can re-seed
     // the conversation on remount. Each panel that previously did a bare ANSI
-    // screen clear (overlay open/close, plan accept/reject, /clear, startTask)
+    // screen clear (overlay open/close, plan accept/reject, /clear)
     // now goes through resetUI; without these mirrors, the chat would vanish.
-    const sessionStore = props.sessionStore;
+    const historyRef = useRef(history);
     useEffect(() => {
+        historyRef.current = history;
         if (sessionStore)
             sessionStore.history = history;
     }, [history, sessionStore]);
@@ -744,10 +972,19 @@ export function App(props) {
         if (sessionStore)
             sessionStore.overlay = overlay;
     }, [overlay, sessionStore]);
+    useEffect(() => {
+        goalAutoExpandRef.current = goalAutoExpand;
+        if (sessionStore)
+            sessionStore.goalAutoExpand = goalAutoExpand;
+    }, [goalAutoExpand, sessionStore]);
     useEffect(() => {
         if (sessionStore)
             sessionStore.goalStatusEntries = goalStatusEntries;
     }, [goalStatusEntries, sessionStore]);
+    useEffect(() => {
+        if (sessionStore)
+            sessionStore.goalMode = goalMode;
+    }, [goalMode, sessionStore]);
     // pendingAction is consumed via a useEffect AFTER agentLoop is created
     // — see below where useAgentLoop is set up.
     const pendingActionConsumedRef = useRef(false);
@@ -769,10 +1006,8 @@ export function App(props) {
             void reconcileActiveGoalRuns(props.cwd, {
                 isWorkerActive: (workerId) => listGoalWorkers(props.cwd).some((worker) => worker.id === workerId && worker.status === "running"),
             }).then(({ runs }) => {
-                const counts = summarizeGoalCountsFromRuns(runs);
                 if (cancelled)
                     return;
-                setGoalCount(counts.active);
                 setHistory((prev) => completedItemsWithDurableGoalTerminalProgress(prev, runs));
                 setGoalStatusEntries((prev) => {
                     const next = reconcileGoalStatusEntriesWithRuns(prev, runs, {
@@ -813,19 +1048,23 @@ export function App(props) {
     useEffect(() => {
         currentToolsRef.current = currentTools;
     }, [currentTools]);
-    // ── Plan mode wiring ─────────────────────────────────────
-    // Sync planModeRef with React state
+    // ── Runtime mode wiring ──────────────────────────────────
+    // Sync runtime mode refs with React state.
     useEffect(() => {
-        planModeStateRef.current = planMode;
-        if (props.planModeRef) {
-            props.planModeRef.current = planMode;
-        }
-    }, [planMode, props.planModeRef]);
+        goalModeStateRef.current = goalMode;
+        if (props.goalModeRef) {
+            props.goalModeRef.current = goalMode;
+        }
+    }, [goalMode, props.goalModeRef]);
+    const setActiveGoalReferences = useCallback((references) => {
+        if (props.goalReferencesRef)
+            props.goalReferencesRef.current = references;
+    }, [props.goalReferencesRef]);
     const rebuildSystemPrompt = useCallback(async (options) => {
         const approvedPlanPath = options?.clearApprovedPlan
             ? undefined
             : (options?.approvedPlanPath ?? approvedPlanPathRef.current);
-        return buildSystemPrompt(options?.cwd ?? cwdRef.current, props.skills, options?.planMode ?? planModeStateRef.current, approvedPlanPath, (options?.tools ?? currentToolsRef.current).map((tool) => tool.name), options?.activeLanguages ?? injectedLanguagesRef.current);
+        return buildSystemPrompt(options?.cwd ?? cwdRef.current, props.skills, false, approvedPlanPath, (options?.tools ?? currentToolsRef.current).map((tool) => tool.name), options?.activeLanguages ?? injectedLanguagesRef.current, options?.goalMode ?? goalModeStateRef.current);
     }, [props.skills]);
     const replaceSystemPrompt = useCallback(async (options) => {
         const newPrompt = await rebuildSystemPrompt(options);
@@ -834,6 +1073,28 @@ export function App(props) {
         }
         return newPrompt;
     }, [rebuildSystemPrompt]);
+    const setGoalModeAndPrompt = useCallback(async (nextMode, options) => {
+        goalModeStateRef.current = nextMode;
+        if (props.goalModeRef)
+            props.goalModeRef.current = nextMode;
+        if (props.sessionStore)
+            props.sessionStore.goalMode = nextMode;
+        setGoalMode(nextMode);
+        await replaceSystemPrompt({ ...options, goalMode: nextMode });
+    }, [props.goalModeRef, props.sessionStore, replaceSystemPrompt]);
+    const clearGoalModeIfIdle = useCallback(() => {
+        setTimeout(() => {
+            if (goalModeStateRef.current === "off")
+                return;
+            if (runningGoalIdsRef.current.size > 0)
+                return;
+            if (activeVerifierRunIdsRef.current.size > 0)
+                return;
+            if (queuedGoalSyntheticEventsRef.current > 0)
+                return;
+            void setGoalModeAndPrompt("off");
+        }, 0);
+    }, [setGoalModeAndPrompt]);
     /**
      * Unified "apply detection result" pipeline. Called from three sites:
      *   1. Initial mount (existing project at startup).
@@ -918,53 +1179,6 @@ export function App(props) {
     useEffect(() => {
         void applyLanguageDetectionRef.current("initial");
     }, []);
-    // Rebuild system prompt when plan mode changes
-    useEffect(() => {
-        void replaceSystemPrompt({ planMode });
-    }, [planMode, replaceSystemPrompt]);
-    // Wire onEnterPlan callback ref
-    useEffect(() => {
-        if (props.onEnterPlanRef) {
-            props.onEnterPlanRef.current = (reason) => {
-                setPlanMode(true);
-                const msg = reason ? `Plan Mode Activated — ${reason}` : "Plan Mode Activated";
-                setLiveItems((prev) => [
-                    ...prev,
-                    { kind: "plan_transition", text: msg, active: true, id: getId() },
-                ]);
-            };
-        }
-    }, [props.onEnterPlanRef]);
-    // Wire onExitPlan callback ref
-    useEffect(() => {
-        if (props.onExitPlanRef) {
-            props.onExitPlanRef.current = async (planPath) => {
-                // Deactivate plan mode, store approved plan path, open pane
-                planModeStateRef.current = false;
-                setPlanMode(false);
-                approvedPlanPathRef.current = planPath;
-                await replaceSystemPrompt({ planMode: false, approvedPlanPath: planPath });
-                // Use setTimeout to open pane after the current tool execution completes,
-                // so the turn can finish and the UI transitions cleanly
-                // Flag that the plan overlay is about to open — suppresses the
-                // premature "done" status that fires when the agent loop finishes
-                planOverlayPendingRef.current = true;
-                setTimeout(() => {
-                    setPlanAutoExpand(true);
-                    setOverlay("plan");
-                    // Don't clear planOverlayPendingRef here — keep it true until
-                    // the user actually approves/rejects the plan. Clearing it on a
-                    // timer causes a race where agent_done fires after the 300ms
-                    // timeout but before the user interacts, triggering a premature
-                    // completion sound.
-                }, 300);
-                return ("Plan submitted. Exiting plan mode.\n" +
-                    "The plan pane is opening for user review.\n" +
-                    "Plan saved at: " +
-                    planPath);
-            };
-        }
-    }, [props.onExitPlanRef, replaceSystemPrompt]);
     const appendMessagesToSession = useCallback(async (sessionPath, messages, startIndex) => {
         const sm = sessionManagerRef.current;
         if (!sm)
@@ -1011,7 +1225,7 @@ export function App(props) {
      * Other tool kinds skip detection entirely to avoid wasted filesystem stats.
      *
      * No restart required: the system prompt is mutated in place, same mechanism
-     * already used for plan mode + pixel-fix chdir.
+     * used for pixel-fix chdir.
      *
      * Stored in a ref so `onToolEnd` (whose useCallback dep array is intentionally
      * empty to keep agent-loop options stable) can call the freshest version.
@@ -1312,7 +1526,6 @@ export function App(props) {
         }, [
             persistNewMessages,
             stripRepoMapMessages,
-            planMode,
             props.cwd,
             props.skills,
             currentProvider,
@@ -1322,6 +1535,11 @@ export function App(props) {
             resolveCredentials,
         ]),
         onTurnText: useCallback((text, thinking, thinkingMs) => {
+            if (goalModeStateRef.current === "planner") {
+                return;
+            }
+            const hadStreamedAssistantFlush = streamedAssistantFlushRef.current.flushedChars > 0;
+            const unflushedAssistantText = text.slice(streamedAssistantFlushRef.current.flushedChars);
             // Track [DONE:n] markers for plan step progress
             if (planStepsRef.current.length > 0) {
                 const completed = findCompletedMarkers(text);
@@ -1336,15 +1554,9 @@ export function App(props) {
                     followUpNudgesRef.current = { step: 0, count: 0 };
                 }
             }
-            // Flush all completed items from the previous turn to Static history.
-            // This keeps liveItems bounded per-turn, preventing Ink's live area from
-            // growing unbounded, which makes Ink's live-area re-renders expensive.
-            //
-            // Items are queued in pendingFlushRef (not sent to setHistory directly)
-            // so the Static write happens in a SEPARATE render cycle from the
-            // live-area change — avoiding both Ink cursor-math clipping and the
-            // brief duplicate that occurred when setHistory was nested inside the
-            // setLiveItems updater.
+            // Flush completed rows from the previous turn to finalized terminal
+            // history. Ink keeps only the active turn, preventing live-area growth
+            // and avoiding Static/log-update replay during resize/remount churn.
             setLiveItems((prev) => {
                 const flushed = flushOnTurnText(prev);
                 if (flushed.length > 0) {
@@ -1353,10 +1565,7 @@ export function App(props) {
                 // Split text on [DONE:N] markers so each marker renders inline as
                 // a styled "✓ Step N: <description>" item at the position the
                 // agent emitted it, instead of vanishing into stripped whitespace.
-                // Falls back to a single assistant item containing the
-                // marker-stripped text when there are no markers (keeps the
-                // common case zero-cost).
-                const segments = segmentDisplayText(text, planStepsRef.current);
+                const segments = segmentDisplayText(unflushedAssistantText, planStepsRef.current);
                 const items = [];
                 let thinkingAttached = false;
                 for (const seg of segments) {
@@ -1369,7 +1578,7 @@ export function App(props) {
                             // contains multiple text chunks split by markers.
                             thinking: thinkingAttached ? undefined : thinking,
                             thinkingMs: thinkingAttached ? undefined : thinkingMs,
-                            planMode: planModeLocalRef.current,
+                            continuation: hadStreamedAssistantFlush,
                             id: getId(),
                         });
                         thinkingAttached = true;
@@ -1384,36 +1593,51 @@ export function App(props) {
                     }
                 }
                 // No segments at all (text was empty/whitespace, no markers).
-                // Still emit an assistant item so a thinking block renders if
-                // there was thinking content for this turn.
+                // Still persist an assistant item so a thinking block renders in
+                // terminal history if there was thinking content for this turn.
                 if (items.length === 0) {
                     items.push({
                         kind: "assistant",
                         text: "",
                         thinking,
                         thinkingMs,
-                        planMode: planModeLocalRef.current,
                         id: getId(),
                     });
                 }
-                return items;
+                const assistantItems = prev.filter((item) => item.kind === "assistant");
+                const newAssistantText = normalizeAssistantText(unflushedAssistantText);
+                const duplicatePinnedText = newAssistantText.length > 0 &&
+                    [...assistantItems, ...pendingHistoryFlushRef.current, ...historyRef.current].some((item) => isSameAssistantText(item, newAssistantText));
+                const nextItems = duplicatePinnedText
+                    ? items.filter((item) => !isSameAssistantText(item, newAssistantText))
+                    : items;
+                const flushablePrev = prev.filter((item) => item.kind !== "assistant");
+                if (flushablePrev.length > 0)
+                    queueFlush(flushablePrev);
+                streamedAssistantFlushRef.current = { flushedChars: 0, text: "" };
+                return [...assistantItems, ...nextItems];
             });
-        }, []),
-        onToolStart: useCallback((toolCallId, name, args) => {
+        }, [queueFlush]),
+        onToolStart: useCallback((toolCallId, name, args, stream) => {
             log("INFO", "tool", `Tool call started: ${name}`, { id: toolCallId });
             const startedAt = Date.now();
             const animateUntil = startedAt + RUNNING_INDICATOR_ANIMATION_MS;
-            // Flush completed items (assistant text, finished tools) to Static
-            // before adding tool UI. Keeping both in the live area makes it tall
-            // and causes Ink's cursor math to clip the top.
-            setLiveItems((prev) => {
-                const { flushed, remaining } = partitionCompleted(prev);
+            const appendToolStart = (prev) => {
+                const visible = pinStreamingTextBeforeToolBoundary({
+                    items: prev,
+                    visibleStreamingText: stream.text,
+                    thinking: stream.thinking,
+                    thinkingMs: stream.thinkingMs,
+                    makeId: getId,
+                });
+                const { flushed, remaining } = partitionCompleted(visible);
                 if (flushed.length > 0) {
                     queueFlush(flushed);
                 }
                 return remaining;
-            });
+            };
             if (name === "subagent") {
+                setLiveItems(appendToolStart);
                 // Create or update the sub-agent group item
                 const newAgent = {
                     toolCallId,
@@ -1438,25 +1662,32 @@ export function App(props) {
                 });
             }
             else if (AGGREGATABLE_TOOLS.has(name)) {
-                // Group concurrent read-only tools into a single compact item
                 setLiveItems((prev) => {
-                    // Find an active tool group (has at least one running tool)
-                    const groupIdx = prev.findIndex((item) => item.kind === "tool_group" &&
-                        item.tools.some((t) => t.status === "running"));
-                    if (groupIdx !== -1) {
-                        const group = prev[groupIdx];
-                        const next = [...prev];
-                        next[groupIdx] = {
-                            ...group,
-                            tools: [
-                                ...group.tools,
-                                { toolCallId, name, args, status: "running", animateUntil },
-                            ],
-                        };
-                        return next;
+                    const reusableGroupIdx = prev.findIndex((item) => item.kind === "tool_group" &&
+                        item.tools.every((tool) => tool.name === name && !tool.isError));
+                    const prior = reusableGroupIdx === -1 ? [] : prev.slice(0, reusableGroupIdx);
+                    if (reusableGroupIdx !== -1 && prior.every((item) => !isActiveItem(item))) {
+                        const flushablePrior = prior.filter((item) => item.kind !== "assistant");
+                        if (flushablePrior.length > 0)
+                            queueFlush(flushablePrior);
+                        const pinnedPrior = prior.filter((item) => item.kind === "assistant");
+                        const candidates = prev.slice(reusableGroupIdx);
+                        const group = candidates[0];
+                        return [
+                            ...pinnedPrior,
+                            {
+                                ...group,
+                                tools: [
+                                    ...group.tools,
+                                    { toolCallId, name, args, status: "running", animateUntil },
+                                ],
+                            },
+                            ...candidates.slice(1),
+                        ];
                     }
+                    const remaining = appendToolStart(prev);
                     return [
-                        ...prev,
+                        ...remaining,
                         {
                             kind: "tool_group",
                             tools: [{ toolCallId, name, args, status: "running", animateUntil }],
@@ -1467,11 +1698,11 @@ export function App(props) {
             }
             else {
                 setLiveItems((prev) => [
-                    ...prev,
+                    ...appendToolStart(prev),
                     { kind: "tool_start", toolCallId, name, args, id: getId(), startedAt, animateUntil },
                 ]);
             }
-        }, []),
+        }, [queueFlush]),
         onToolUpdate: useCallback((toolCallId, update) => {
             const u = update;
             // Bash progress streaming — append output to tool_start item
@@ -1544,7 +1775,7 @@ export function App(props) {
                     };
                     const next = [...prev];
                     next[groupIdx] = { ...group, agents: updatedAgents };
-                    // Flush completed items to Static to keep the live area small
+                    // Flush completed items to finalized history to keep the live area small
                     const { flushed, remaining } = partitionCompleted(next);
                     if (flushed.length > 0) {
                         queueFlush(flushed);
@@ -1603,7 +1834,7 @@ export function App(props) {
                             ];
                         }
                     }
-                    // Flush completed items to Static to keep the live area small
+                    // Flush completed items to finalized history to keep the live area small
                     const { flushed, remaining } = partitionCompleted(updated);
                     if (flushed.length > 0) {
                         queueFlush(flushed);
@@ -1619,14 +1850,21 @@ export function App(props) {
                 });
             }
         }, []),
-        onServerToolCall: useCallback((id, name, input) => {
+        onServerToolCall: useCallback((id, name, input, stream) => {
             log("INFO", "server_tool", `Server tool call: ${name}`, { id });
             const startedAt = Date.now();
             const animateUntil = startedAt + RUNNING_INDICATOR_ANIMATION_MS;
-            // Flush completed items (including assistant text) to Static before
-            // adding server tool UI — same rationale as onToolStart.
+            // Flush completed items (including assistant text) before adding server
+            // tool UI — same rationale as onToolStart.
             setLiveItems((prev) => {
-                const { flushed, remaining } = partitionCompleted(prev);
+                const visible = pinStreamingTextBeforeToolBoundary({
+                    items: prev,
+                    visibleStreamingText: stream.text,
+                    thinking: stream.thinking,
+                    thinkingMs: stream.thinkingMs,
+                    makeId: getId,
+                });
+                const { flushed, remaining } = partitionCompleted(visible);
                 if (flushed.length > 0) {
                     queueFlush(flushed);
                 }
@@ -1643,7 +1881,7 @@ export function App(props) {
                     },
                 ];
             });
-        }, []),
+        }, [queueFlush]),
         onServerToolResult: useCallback((toolUseId, resultType, data) => {
             log("INFO", "server_tool", `Server tool result`, { toolUseId, resultType });
             setLiveItems((prev) => {
@@ -1677,14 +1915,14 @@ export function App(props) {
                         },
                     ];
                 }
-                // Flush completed items to Static
+                // Flush completed items to finalized history
                 const { flushed, remaining } = partitionCompleted(updated);
                 if (flushed.length > 0) {
                     queueFlush(flushed);
                 }
                 return remaining;
             });
-        }, []),
+        }, [queueFlush]),
         onTurnEnd: useCallback((turn, stopReason, usage) => {
             log("INFO", "turn", `Turn ${turn} ended`, {
                 stopReason,
@@ -1700,8 +1938,8 @@ export function App(props) {
             lastActualTokensRef.current =
                 currentProvider === "anthropic" ? inputContext : inputContext + usage.outputTokens;
             lastActualTokensTimestampRef.current = Date.now();
-            // For tool-only turns (no text), flush completed items to Static so
-            // liveItems doesn't grow unbounded across consecutive tool-only turns.
+            // For tool-only turns (no text), flush completed items to finalized
+            // history so liveItems doesn't grow unbounded across consecutive turns.
             setLiveItems((prev) => {
                 const { flushed, remaining } = flushOnTurnEnd(prev, stopReason);
                 if (flushed.length > 0) {
@@ -1709,44 +1947,42 @@ export function App(props) {
                 }
                 return remaining;
             });
-        }, []),
+        }, [queueFlush]),
         onDone: useCallback((durationMs, toolsUsed) => {
             log("INFO", "agent", `Agent done`, {
                 duration: `${durationMs}ms`,
                 toolsUsed: toolsUsed.join(",") || "none",
             });
-            // Don't show "done" status when plan overlay is about to open —
-            // the agent loop finished but we're waiting for user plan review
-            if (planOverlayPendingRef.current)
-                return;
-            setDoneStatus({ durationMs, toolsUsed, verb: pickDurationVerb(toolsUsed) });
-            playNotificationSound();
-            // Two-phase flush to avoid Ink text clipping.
-            // Phase 1 (here): clear the live area so Ink commits a render with
-            // the smaller output and updates its internal line counter.
-            // Phase 2 (useEffect below): push items to Static history in a
-            // separate render cycle so the Static write never coincides with
-            // a live-area height change in the same frame.
-            setLiveItems((prev) => {
-                if (prev.length > 0)
-                    queueFlush(prev);
-                return [];
+            const doneDecision = getDoneFlushDecision({
+                planOverlayPending: planOverlayPendingRef.current,
+                goalMode: goalModeStateRef.current,
+                goalAutoExpand: goalAutoExpandRef.current,
             });
-            // Run-all: auto-start next pending task after a short delay
-            // (allow the two-phase flush to complete first)
-            if (runAllTasksRef.current) {
-                setTimeout(() => {
-                    const cwd = cwdRef.current;
-                    const next = getNextPendingTask(cwd);
-                    if (next) {
-                        markTaskInProgress(cwd, next.id);
-                        startTaskRef.current(next.title, next.prompt, next.id);
-                    }
-                    else {
-                        setRunAllTasks(false);
-                        log("INFO", "tasks", "Run-all complete — no more pending tasks");
-                    }
-                }, 500);
+            // Don't show "done" status when plan/goal review panes are about to open —
+            // the agent loop finished but we're waiting for user approval/review.
+            // Still flush live transcript rows before the pane remounts; otherwise
+            // setup output remains in ephemeral liveItems and appears to vanish.
+            if (doneDecision.showDoneStatus) {
+                setDoneStatus({ durationMs, toolsUsed, verb: pickDurationVerb(toolsUsed) });
+                playNotificationSound();
+            }
+            // Finalize rows now; the sink writes them outside Ink and then the
+            // live area is cleared, so there is no Static/live repaint race.
+            if (doneDecision.flushLiveItems) {
+                setLiveItems((prev) => {
+                    if (prev.length > 0)
+                        queueFlush(prev);
+                    return [];
+                });
+            }
+            const nextGoalMode = nextGoalModeAfterAgentDone({
+                currentMode: goalModeStateRef.current,
+                runningGoalIds: runningGoalIdsRef.current.size,
+                queuedSyntheticEvents: queuedGoalSyntheticEventsRef.current,
+                activeContinuationFlights: goalContinuationFlightsRef.current.size,
+            });
+            if (nextGoalMode !== goalModeStateRef.current) {
+                void setGoalModeAndPrompt(nextGoalMode);
             }
             // Goal loop: after the orchestrator handles a worker/verifier event,
             // continue the same Goal automatically until it reaches a terminal state.
@@ -1788,12 +2024,16 @@ export function App(props) {
                     }
                 })();
             }
-        }, []),
+        }, [setGoalModeAndPrompt]),
         onAborted: useCallback(() => {
             log("WARN", "agent", "Agent run aborted by user");
-            setRunAllTasks(false);
             setRunAllPixel(false);
             currentPixelFixRef.current = null;
+            queuedGoalSyntheticEventsRef.current = 0;
+            goalSetupPanePendingRef.current = false;
+            setActiveGoalReferences(undefined);
+            if (goalModeStateRef.current !== "off")
+                void setGoalModeAndPrompt("off");
             setDoneStatus(null);
             setLiveItems((prev) => {
                 const next = prev.map((item) => {
@@ -1836,7 +2076,7 @@ export function App(props) {
                 });
                 return [...next, { kind: "stopped", text: "Request was stopped.", id: getId() }];
             });
-        }, []),
+        }, [setActiveGoalReferences, setGoalModeAndPrompt]),
         onQueuedStart: useCallback((content) => {
             // When a queued message starts processing, show it as a UserItem
             // and flush prior items to history. Synthetic system events are hidden
@@ -1848,6 +2088,8 @@ export function App(props) {
                     .map((c) => c.text)
                     .join("\n");
             if (isGoalSyntheticEvent(displayText)) {
+                queuedGoalSyntheticEventsRef.current = Math.max(0, queuedGoalSyntheticEventsRef.current - 1);
+                void setGoalModeAndPrompt("coordinator");
                 const eventInfo = parseGoalSyntheticEvent(displayText);
                 setLiveItems((prev) => {
                     if (prev.length > 0)
@@ -1870,11 +2112,6 @@ export function App(props) {
             const imageCount = typeof content === "string"
                 ? undefined
                 : content.filter((c) => c.type === "image").length || undefined;
-            setLiveItems((prev) => {
-                if (prev.length > 0)
-                    queueFlush(prev);
-                return [];
-            });
             const userItem = {
                 kind: "user",
                 text: displayText,
@@ -1883,8 +2120,8 @@ export function App(props) {
             };
             setLastUserMessage(displayText);
             setDoneStatus(null);
-            setLiveItems([userItem]);
-        }, []),
+            finalizeSubmittedUserItem(userItem);
+        }, [appendGoalProgress, finalizeSubmittedUserItem, setGoalModeAndPrompt]),
         // Inject a "continue with the next step" follow-up when the agent
         // would otherwise stop mid-plan. The prompt-only instruction wasn't
         // enough — some models (notably Opus) treat each [DONE:n] as a
@@ -1954,27 +2191,6 @@ export function App(props) {
             ]);
         }
     };
-    // Phase 2 of the two-phase flush: after onDone clears liveItems (phase 1)
-    // and Ink renders the smaller live area (updating its internal line
-    // counter), this effect pushes the stashed items into Static history.
-    // Because the Static write happens in a SEPARATE render cycle from the
-    // live-area shrink, Ink's log-update never needs to erase the old tall
-    // live area AND write Static content in the same frame — avoiding the
-    // cursor-math mismatch that caused text clipping.
-    useEffect(() => {
-        if (pendingFlushRef.current.length > 0) {
-            const items = pendingFlushRef.current;
-            pendingFlushRef.current = [];
-            setHistory((h) => {
-                const next = compactHistory([...h, ...trimFlushedItems(items)]);
-                if (sessionStore)
-                    sessionStore.history = next;
-                return next;
-            });
-            if (sessionStore)
-                sessionStore.liveItems = liveItems;
-        }
-    }, [flushGeneration]);
     // Sync terminal title with agent loop state
     useEffect(() => {
         setTitleRunning(agentLoop.isRunning);
@@ -2002,19 +2218,29 @@ export function App(props) {
             return () => clearTimeout(timer);
         }
     }, [agentLoop.isRunning, sessionStore, props.resetUI]);
-    // Consume sessionStore.pendingAction once on mount. Set by resetUI options
-    // for paths that remount AND immediately drive the agent (plan accept,
-    // plan reject, startTask, pixel fix). The action survives the unmount
-    // because it lives in renderApp's closure (sessionStore), not React state.
+    // Consume pending post-remount work once on mount. Set by resetUI options
+    // for paths that remount AND immediately drive work (plan accept/reject,
+    // pixel fix, Goal approval). The work survives the unmount because
+    // it lives in renderApp's closure (sessionStore), not React state.
     useEffect(() => {
         if (pendingActionConsumedRef.current)
             return;
         const action = sessionStore?.pendingAction;
-        if (!action)
+        const pendingGoalRun = sessionStore?.pendingGoalRun;
+        if (!action && !pendingGoalRun)
             return;
         pendingActionConsumedRef.current = true;
-        if (sessionStore)
+        if (sessionStore) {
             sessionStore.pendingAction = undefined;
+            sessionStore.pendingGoalRun = undefined;
+        }
+        setDoneStatus(null);
+        if (pendingGoalRun) {
+            startGoalRunRef.current(pendingGoalRun);
+            return;
+        }
+        if (!action)
+            return;
         if (action.planEvent) {
             const ev = action.planEvent;
             setLiveItems((prev) => [
@@ -2028,7 +2254,6 @@ export function App(props) {
                 { kind: "info", text: action.infoText, id: getId() },
             ]);
         }
-        setDoneStatus(null);
         void agentLoop.run(action.prompt).catch((err) => {
             const errMsg = err instanceof Error ? err.message : String(err);
             log("ERROR", "error", errMsg);
@@ -2036,14 +2261,6 @@ export function App(props) {
         });
         // Intentional one-shot: run once on mount, never re-fire on re-render.
     }, []);
-    // Refresh eyes badge count when the agent settles (end of a turn) — a turn
-    // may have logged new rough/wish/blocked signals. Also covers the case where
-    // /eyes was run for the first time (manifest now exists).
-    useEffect(() => {
-        if (!agentLoop.isRunning) {
-            setEyesCount(isEyesActive(props.cwd) ? journalCount({ status: "open" }, props.cwd) : undefined);
-        }
-    }, [agentLoop.isRunning, props.cwd]);
     const handleSubmit = useCallback(async (input, inputImages = [], pasteInfo) => {
         const trimmed = input.trim();
         if (trimmed.startsWith("/")) {
@@ -2098,7 +2315,8 @@ export function App(props) {
             }
             // Fallback path (resetUI not wired — e.g. tests). Best-effort: clear
             // React state in place without touching terminal scrollback.
-            pendingFlushRef.current = [];
+            pendingHistoryFlushRef.current = [];
+            props.terminalHistoryPrinter?.clear();
             setHistory([{ kind: "banner", id: "banner" }]);
             setLiveItems([]);
             setDoneStatus(null);
@@ -2121,44 +2339,19 @@ export function App(props) {
             setOverlay("theme");
             return;
         }
-        // Open the Eyes pane — read-only review of installed probes + open signals.
-        // Gated by the ggcoder-eyes manifest: in projects without /eyes set up,
-        // there's nothing useful to show.
-        if (trimmed === "/eyes-view" || trimmed === "/ev") {
-            if (!isEyesActive(props.cwd)) {
-                setLiveItems((prev) => [
-                    ...prev,
+        // Handle /markdown — Gemini-style rendered/raw markdown toggle
+        if (trimmed === "/markdown" || trimmed === "/md") {
+            setRenderMarkdown((prev) => {
+                const next = !prev;
+                setLiveItems([
                     {
                         kind: "info",
-                        text: "Eyes not set up in this project. Run /setup-eyes to get started.",
+                        text: next ? "Rendered markdown mode." : "Raw markdown mode.",
                         id: getId(),
                     },
                 ]);
-                return;
-            }
-            setOverlay("eyes");
-            return;
-        }
-        // Handle /plan — toggle plan mode
-        if (trimmed === "/plan" || trimmed === "/plan on") {
-            setPlanMode(true);
-            setLiveItems((prev) => [
-                ...prev,
-                { kind: "plan_transition", text: "Plan Mode Activated", active: true, id: getId() },
-            ]);
-            return;
-        }
-        if (trimmed === "/plan off") {
-            setPlanMode(false);
-            setLiveItems((prev) => [
-                ...prev,
-                {
-                    kind: "plan_transition",
-                    text: "Plan Mode Deactivated",
-                    active: false,
-                    id: getId(),
-                },
-            ]);
+                return next;
+            });
             return;
         }
         // Handle /clearplan — dismiss the approved plan
@@ -2217,55 +2410,45 @@ export function App(props) {
             if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
                 props.sessionStore.overlay = "goal";
                 props.sessionStore.planAutoExpand = false;
+                props.sessionStore.goalAutoExpand = false;
                 props.resetUI();
             }
             else {
                 if (props.sessionStore) {
                     props.sessionStore.overlay = "goal";
                     props.sessionStore.planAutoExpand = false;
+                    props.sessionStore.goalAutoExpand = false;
                     if (agentLoop.isRunning)
                         props.sessionStore.pendingResetUI = true;
                 }
                 setPlanAutoExpand(false);
+                setGoalAutoExpand(false);
                 setOverlay("goal");
             }
             return;
         }
-        // Handle /plans — open plan pane
-        if (trimmed === "/plans") {
-            if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
-                props.sessionStore.overlay = "plan";
-                props.sessionStore.planAutoExpand = false;
-                props.resetUI();
-            }
-            else {
-                if (props.sessionStore) {
-                    props.sessionStore.overlay = "plan";
-                    props.sessionStore.planAutoExpand = false;
-                    if (agentLoop.isRunning)
-                        props.sessionStore.pendingResetUI = true;
-                }
-                setPlanAutoExpand(false);
-                setOverlay("plan");
-            }
-            return;
-        }
         // Handle prompt-template commands (built-in + custom from .gg/commands/)
         const promptCommandRoute = routePromptCommandInput(trimmed, PROMPT_COMMANDS, customCommands);
         if (promptCommandRoute) {
             const { cmdName, cmdArgs, fullPrompt } = promptCommandRoute;
             log("INFO", "command", `Prompt command: /${cmdName}${cmdArgs ? ` (args: ${cmdArgs})` : ""}`);
-            // Move live items into history before starting
-            setLiveItems((prev) => {
-                if (prev.length > 0) {
-                    pendingFlushRef.current = [...pendingFlushRef.current, ...prev];
-                }
-                return [];
-            });
             const hasImages = inputImages.length > 0;
+            const isGoalSetupCommand = isGoalPromptCommandName(cmdName);
+            let promptForAgent = fullPrompt;
+            if (isGoalSetupCommand) {
+                const referenceContext = await buildGoalReferenceContext({
+                    cwd: props.cwd,
+                    originalGoalPrompt: fullPrompt,
+                    attachments: inputImages,
+                });
+                setActiveGoalReferences(referenceContext.references);
+                promptForAgent = referenceContext.promptSection
+                    ? `${fullPrompt}\n\n${referenceContext.promptSection}`
+                    : fullPrompt;
+            }
             const modelInfo = getModel(currentModel);
             const modelSupportsImages = modelInfo?.supportsImages ?? true;
-            const userContent = buildUserContentWithAttachments(fullPrompt, inputImages, modelSupportsImages);
+            const userContent = buildUserContentWithAttachments(promptForAgent, inputImages, modelSupportsImages);
             // Show the typed command as the user message
             const userItem = {
                 kind: "user",
@@ -2275,15 +2458,30 @@ export function App(props) {
             };
             setLastUserMessage(trimmed);
             setDoneStatus(null);
-            setLiveItems([userItem]);
+            finalizeSubmittedUserItem(userItem);
             // Send the full prompt to the agent, with user args appended if provided
             try {
-                await agentLoop.run(userContent);
+                if (isGoalSetupCommand) {
+                    goalSetupPanePendingRef.current = true;
+                    await runGoalPromptSetupSequence({
+                        userContent,
+                        fullPrompt: promptForAgent,
+                        messagesRef,
+                        setGoalModeAndPrompt,
+                        runAgent: (content) => agentLoop.run(content),
+                        onStage: appendGoalAgentTransition,
+                    });
+                }
+                else {
+                    await agentLoop.run(userContent);
+                }
             }
             catch (err) {
                 const msg = err instanceof Error ? err.message : String(err);
                 log("ERROR", "error", msg);
                 const isAbort = msg.includes("aborted") || msg.includes("abort");
+                if (isGoalSetupCommand)
+                    goalSetupPanePendingRef.current = false;
                 setLiveItems((prev) => [
                     ...prev,
                     isAbort
@@ -2291,6 +2489,41 @@ export function App(props) {
                         : toErrorItem(err, getId()),
                 ]);
             }
+            finally {
+                if (isGoalSetupCommand) {
+                    setActiveGoalReferences(undefined);
+                    const paneTransition = getGoalSetupPaneTransitionAfterRun({
+                        isGoalSetupCommand,
+                        setupPanePending: goalSetupPanePendingRef.current,
+                    });
+                    goalSetupPanePendingRef.current = false;
+                    if (goalModeStateRef.current !== "off") {
+                        await setGoalModeAndPrompt("off");
+                    }
+                    if (paneTransition) {
+                        goalAutoExpandRef.current = paneTransition.goalAutoExpand;
+                        setTimeout(() => {
+                            const resetUI = props.resetUI;
+                            const sessionStore = props.sessionStore;
+                            if (shouldResetUIForGoalSetupPaneTransition({
+                                hasResetUI: resetUI !== undefined,
+                                hasSessionStore: sessionStore !== undefined,
+                            }) &&
+                                resetUI &&
+                                sessionStore) {
+                                sessionStore.overlay = paneTransition.overlay;
+                                sessionStore.goalAutoExpand = paneTransition.goalAutoExpand;
+                                sessionStore.planAutoExpand = paneTransition.planAutoExpand;
+                                resetUI();
+                                return;
+                            }
+                            setGoalAutoExpand(paneTransition.goalAutoExpand);
+                            setPlanAutoExpand(paneTransition.planAutoExpand);
+                            setOverlay(paneTransition.overlay);
+                        }, 300);
+                    }
+                }
+            }
             // Reload custom commands in case a setup command created new ones
             reloadCustomCommands();
             return;
@@ -2326,17 +2559,6 @@ export function App(props) {
             setLiveItems((prev) => [...prev, queuedItem]);
             return;
         }
-        // Move any remaining live items into history (Static) before starting a
-        // new turn. Must go through queueFlush so flushGeneration bumps and the
-        // drain effect actually runs — mutating pendingFlushRef directly here
-        // stashed items that nothing was signalled to pick up, so they sat in
-        // limbo until some unrelated later code path happened to call queueFlush.
-        setLiveItems((prev) => {
-            if (prev.length > 0) {
-                queueFlush(prev);
-            }
-            return [];
-        });
         // Build display text — strip image paths, show badges instead
         let displayText = input;
         if (hasImages) {
@@ -2358,7 +2580,7 @@ export function App(props) {
             planStepsRef.current = [];
             setPlanSteps([]);
         }
-        setLiveItems([userItem]);
+        finalizeSubmittedUserItem(userItem);
         // Run agent
         try {
             await agentLoop.run(userContent);
@@ -2376,11 +2598,20 @@ export function App(props) {
         }
     }, [
         agentLoop,
-        props.onSlashCommand,
+        appendGoalAgentTransition,
         compactConversation,
+        currentModel,
+        finalizeSubmittedUserItem,
+        props.cwd,
+        props.onSlashCommand,
+        props.resetUI,
+        props.sessionStore,
         rebuildSystemPrompt,
-        replaceSystemPrompt,
         refreshRepoMap,
+        reloadCustomCommands,
+        replaceSystemPrompt,
+        setActiveGoalReferences,
+        setGoalModeAndPrompt,
         stripRepoMapMessages,
     ]);
     const handleDoubleExit = useDoublePress(setExitPending, () => process.exit(0));
@@ -2518,90 +2749,96 @@ export function App(props) {
         const promptByName = new Map(PROMPT_COMMANDS.map((c) => [c.name, c]));
         const fromPrompt = (name) => {
             const c = promptByName.get(name);
-            return c ? { name: c.name, aliases: c.aliases, description: c.description } : null;
+            return c
+                ? {
+                    name: c.name,
+                    aliases: c.aliases,
+                    description: c.description,
+                    sectionTitle: "workflows",
+                }
+                : null;
         };
         const promptOrder = [
             // Project audits / one-shot analysis
             "goal",
             "init",
-            "research",
-            "scan",
-            "verify",
             "expand",
             "bullet-proof",
-            "simplify",
             "compare",
-            "batch",
             // Setup / installers
-            "setup-lint",
-            "setup-tests",
             "setup-commit",
-            "setup-update",
-            "setup-eyes",
-            "eyes-improve",
             "setup-skills",
         ];
         const orderedPromptCommands = promptOrder
             .map(fromPrompt)
             .filter((c) => c !== null);
         const knownPromptNames = new Set(promptOrder);
-        const remainingPromptCommands = PROMPT_COMMANDS.filter((c) => !knownPromptNames.has(c.name)).map((c) => ({ name: c.name, aliases: c.aliases, description: c.description }));
+        const remainingPromptCommands = PROMPT_COMMANDS.filter((c) => !knownPromptNames.has(c.name)).map((c) => ({
+            name: c.name,
+            aliases: c.aliases,
+            description: c.description,
+            sectionTitle: "workflows",
+        }));
         return [
             // Session actions (most frequent)
-            { name: "model", aliases: ["m"], description: "Switch model" },
-            { name: "compact", aliases: ["c"], description: "Compact conversation" },
-            { name: "clear", aliases: [], description: "Clear session and terminal" },
-            { name: "theme", aliases: ["t"], description: "Switch theme" },
-            { name: "plans", aliases: [], description: "Open plans pane" },
+            { name: "model", aliases: ["m"], description: "Switch model", sectionTitle: "built-in" },
+            { name: "compact", aliases: ["c"], description: "Compact context", sectionTitle: "built-in" },
+            { name: "clear", aliases: [], description: "Clear session", sectionTitle: "built-in" },
+            { name: "theme", aliases: ["t"], description: "Switch theme", sectionTitle: "built-in" },
             ...orderedPromptCommands,
             ...remainingPromptCommands,
             ...customCommands.map((cmd) => ({
                 name: cmd.name,
                 aliases: [],
                 description: cmd.description,
+                sectionTitle: "custom",
             })),
-            { name: "quit", aliases: ["q", "exit"], description: "Exit the agent" },
+            {
+                name: "quit",
+                aliases: ["q", "exit"],
+                description: "Exit ggcoder",
+                sectionTitle: "built-in",
+            },
         ];
     }, [customCommands]);
-    const renderItem = (item) => {
+    const normalizeStatusText = (text) => text.replace(/\\n/g, "\n").replace(/^\n+|\n+$/g, "");
+    const renderStatusMessage = (key, glyph, content, glyphColor = theme.commandColor, options = {}) => (_jsxs(Box, { flexDirection: "row", paddingLeft: 1, marginTop: 1, flexShrink: 1, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: glyphColor, bold: options.bold ?? true, children: glyph }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { color: options.muted ? theme.textDim : theme.commandColor, bold: options.bold, wrap: "wrap", children: content }) })] }, key));
+    const renderItem = (item, index, items) => {
+        const previousLiveItem = index > 0 ? items[index - 1] : undefined;
+        const shouldTopSpacePrintedBoundary = shouldTopSpaceAfterPrintedAgentBoundary({
+            currentKind: item.kind,
+            previousLiveItem,
+            lastPendingHistoryItem: pendingHistoryFlushRef.current.at(-1),
+            lastHistoryItem: history.at(-1),
+        });
+        const assistantMarginTop = item.kind === "assistant" &&
+            (shouldTopSpacePrintedBoundary ||
+                shouldTopSpaceAssistantAfterToolBoundary({
+                    text: item.text,
+                    previousLiveItem,
+                    lastPendingHistoryItem: pendingHistoryFlushRef.current.at(-1),
+                    lastHistoryItem: history.at(-1),
+                }))
+            ? 1
+            : 0;
+        const withPrintedBoundarySpacing = (node) => shouldTopSpacePrintedBoundary ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: node }, `${item.id}-printed-boundary`)) : (node);
         switch (item.kind) {
             case "tombstone":
                 return null;
             case "banner":
-                return (_jsx(Banner, { version: props.version, model: currentModel, provider: currentProvider, cwd: displayedCwd, taskCount: taskCount, goalCount: goalCount }, item.id));
+                return (_jsx(Banner, { version: props.version, model: currentModel, provider: currentProvider, cwd: displayedCwd }, item.id));
             case "user":
                 return (_jsx(UserMessage, { text: item.text, imageCount: item.imageCount, pasteInfo: item.pasteInfo }, item.id));
-            case "task":
-                return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.success, bold: true, children: "▶ " }), _jsx(Text, { color: theme.textDim, children: "Task: " }), _jsx(Text, { color: theme.success, children: item.title })] }) }, item.id));
             case "goal":
-                return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.success, bold: true, children: "▶ " }), _jsx(Text, { color: theme.textDim, children: "Goal: " }), _jsx(Text, { color: theme.success, children: item.title }), item.workerId ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 worker ", item.workerId] }) : null] }) }, item.id));
+                return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.success, bold: true, children: "▶ " }), _jsx(Text, { color: theme.textDim, children: "Goal: " }), _jsx(Text, { color: theme.success, children: truncateGoalProgressText(item.title) }), item.workerId ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 worker ", item.workerId] }) : null] }) }, item.id));
             case "goal_progress": {
-                const isError = item.status === "failed" || item.status === "fail" || item.status === "blocked";
-                const color = isError
-                    ? theme.error
-                    : item.phase === "worker_finished"
-                        ? theme.success
-                        : item.phase === "verifier_finished"
-                            ? theme.accent
-                            : item.phase === "orchestrator_reviewing" || item.phase === "orchestrator_working"
-                                ? theme.secondary
-                                : item.phase === "continuing"
-                                    ? theme.warning
-                                    : item.phase === "verifier_started"
-                                        ? theme.accent
-                                        : item.phase === "worker_started"
-                                            ? theme.primary
-                                            : item.phase === "terminal"
-                                                ? theme.success
-                                                : theme.primary;
-                const glyph = item.phase === "worker_finished" || item.phase === "verifier_finished"
-                    ? "✓ "
-                    : item.phase === "terminal"
-                        ? item.status === "passed"
-                            ? "◆ "
-                            : "! "
-                        : "↻ ";
-                return (_jsxs(Box, { marginTop: 1, flexDirection: "column", flexShrink: 1, children: [_jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: color, bold: true, children: glyph }), _jsx(Text, { color: color, bold: true, children: item.title }), item.workerId ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 worker ", item.workerId] }) : null] }), item.detail ? (_jsx(Text, { color: theme.textDim, wrap: "wrap", children: `  ${item.detail}` })) : null, item.summaryRows && item.summaryRows.length > 0 ? (_jsx(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, flexShrink: 1, children: item.summaryRows.map((row) => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.textDim, children: row.label.padEnd(10) }), _jsx(Text, { color: theme.text, children: row.value }), row.detail ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", row.detail] }) : null] }, row.label))) })) : null] }, item.id));
+                const color = goalProgressColor(item, theme);
+                const loaderStatus = goalProgressLoaderStatus(item);
+                const hasBody = !!item.detail ||
+                    (item.summaryRows !== undefined && item.summaryRows.length > 0) ||
+                    (item.summarySections !== undefined && item.summarySections.length > 0);
+                const headerContentWidth = Math.max(10, columns - 3);
+                return withPrintedBoundarySpacing(_jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginTop: 1, flexShrink: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(ToolUseLoader, { status: loaderStatus, staticDisplay: true }), _jsx(Box, { flexGrow: 1, width: headerContentWidth, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: color, bold: true, children: truncateGoalProgressText(item.title) }), item.workerId ? (_jsxs(Text, { color: theme.textDim, children: [" \u00B7 worker ", item.workerId] })) : null] }) })] }), hasBody ? (_jsx(MessageResponse, { children: _jsxs(Box, { flexDirection: "column", flexShrink: 1, children: [item.detail ? (_jsx(Text, { color: theme.textDim, wrap: "wrap", children: truncateGoalProgressText(item.detail) })) : null, item.summaryRows?.map((row) => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.textDim, children: row.label.padEnd(12) }), _jsx(Text, { color: theme.text, children: truncateGoalProgressText(row.value) }), row.detail ? (_jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", truncateGoalProgressText(row.detail)] })) : null] }, row.label))), item.summarySections?.map((section) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: theme.textDim, bold: true, children: section.title }), section.lines.map((line, sectionLineIndex) => (_jsx(Text, { color: theme.text, wrap: "wrap", children: `• ${truncateGoalProgressText(line)}` }, `${section.title}-${sectionLineIndex}`)))] }, section.title)))] }) })) : null] }, item.id));
             }
             case "style_pack": {
                 const names = item.added.map((id) => LANGUAGE_DISPLAY_NAMES[id]);
@@ -2611,61 +2848,60 @@ export function App(props) {
             case "setup_hint":
                 return (_jsxs(Box, { marginTop: 1, flexShrink: 1, flexDirection: "column", borderStyle: "round", borderColor: theme.language, paddingX: 1, children: [_jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.language, bold: true, children: "◆ " }), _jsx(Text, { color: theme.language, bold: true, children: "NO STYLE PACKS DETECTED" })] }), _jsx(Text, { color: theme.textMuted, wrap: "wrap", children: "This directory has no recognized language manifest at its root." }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.textMuted, children: "Tip: run " }), _jsx(Text, { color: theme.language, bold: true, children: "/setup" }), _jsx(Text, { color: theme.textMuted, children: " to audit project hygiene or bootstrap a new project from scratch" })] }) })] }, item.id));
             case "assistant":
-                return (_jsx(AssistantMessage, { text: item.text, thinking: item.thinking, thinkingMs: item.thinkingMs, planMode: item.planMode }, item.id));
+                return (_jsx(AssistantMessage, { text: item.text, thinking: item.thinking, thinkingMs: item.thinkingMs, renderMarkdown: renderMarkdown, availableTerminalHeight: measuredLiveAreaRows, marginTop: assistantMarginTop }, item.id));
             case "tool_start":
-                return (_jsx(ToolExecution, { status: "running", name: item.name, args: item.args, progressOutput: item.progressOutput, animateUntil: item.animateUntil }, item.id));
+                return withPrintedBoundarySpacing(_jsx(ToolExecution, { status: "running", name: item.name, args: item.args, progressOutput: item.progressOutput, animateUntil: item.animateUntil }, item.id));
             case "tool_done":
-                return (_jsx(ToolExecution, { status: "done", name: item.name, args: item.args, result: item.result, isError: item.isError, details: item.details }, item.id));
+                return withPrintedBoundarySpacing(_jsx(ToolExecution, { status: "done", name: item.name, args: item.args, result: item.result, isError: item.isError, details: item.details }, item.id));
             case "tool_group":
-                return _jsx(ToolGroupExecution, { tools: item.tools }, item.id);
+                return withPrintedBoundarySpacing(_jsx(ToolGroupExecution, { tools: item.tools }, item.id));
             case "server_tool_start":
-                return (_jsx(ServerToolExecution, { status: "running", name: item.name, input: item.input, startedAt: item.startedAt, animateUntil: item.animateUntil }, item.id));
+                return withPrintedBoundarySpacing(_jsx(ServerToolExecution, { status: "running", name: item.name, input: item.input, startedAt: item.startedAt, animateUntil: item.animateUntil }, item.id));
             case "server_tool_done":
-                return (_jsx(ServerToolExecution, { status: "done", name: item.name, input: item.input, durationMs: item.durationMs, resultType: item.resultType }, item.id));
+                return withPrintedBoundarySpacing(_jsx(ServerToolExecution, { status: "done", name: item.name, input: item.input, durationMs: item.durationMs, resultType: item.resultType }, item.id));
             case "error": {
                 const showMessage = item.message && item.message !== item.headline;
-                return (_jsxs(Box, { marginTop: 1, flexDirection: "column", flexShrink: 1, children: [_jsxs(Text, { color: theme.error, wrap: "wrap", children: ["✗ ", item.headline] }), showMessage && (_jsx(Text, { color: theme.textDim, wrap: "wrap", children: `  ${item.message}` })), _jsx(Text, { color: theme.textDim, wrap: "wrap", children: `  → ${item.guidance}` })] }, item.id));
+                return (_jsxs(Box, { flexDirection: "row", paddingLeft: 1, marginTop: 1, flexShrink: 1, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: theme.error, bold: true, children: "✗ " }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { color: theme.error, wrap: "wrap", children: item.headline }), showMessage && (_jsx(Text, { color: theme.textDim, wrap: "wrap", children: item.message })), _jsx(Text, { color: theme.textDim, wrap: "wrap", children: `→ ${item.guidance}` })] })] }, item.id));
             }
             case "info":
-                return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsx(Text, { color: theme.textDim, wrap: "wrap", children: item.text }) }, item.id));
+                return renderStatusMessage(item.id, "○ ", item.text, theme.commandColor, { muted: true });
             case "update_notice":
-                return (_jsx(Box, { marginTop: 1, flexShrink: 1, borderStyle: "round", borderColor: theme.success, paddingX: 1, children: _jsxs(Text, { color: theme.success, bold: true, wrap: "wrap", children: ["✨ ", item.text] }) }, item.id));
+                return (_jsx(Box, { marginTop: 1, flexShrink: 1, borderStyle: "round", borderColor: theme.commandColor, paddingX: 1, children: _jsxs(Text, { color: theme.commandColor, bold: true, wrap: "wrap", children: ["✨ ", item.text] }) }, item.id));
             case "plan_transition":
-                return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsxs(Text, { color: theme.planPrimary, bold: true, wrap: "wrap", children: [item.active ? "● " : "● ", item.text] }) }, item.id));
+                return renderStatusMessage(item.id, "● ", normalizeStatusText(item.text), theme.commandColor, { bold: true });
+            case "goal_agent_transition":
+                return renderStatusMessage(item.id, "● ", normalizeStatusText(item.text), theme.commandColor, { bold: true });
             case "thinking_transition": {
-                const glyphColor = item.active ? THINKING_BORDER_COLORS[0] : theme.textDim;
-                return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: glyphColor, bold: true, children: "✻ " }), _jsx(Text, { color: item.active ? theme.accent : theme.textDim, bold: true, children: item.active ? "Thinking ON" : "Thinking OFF" })] }, item.id));
-            }
-            case "model_transition": {
-                const glyphColor = THINKING_BORDER_COLORS[0];
-                return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: glyphColor, bold: true, children: "▸ " }), _jsx(Text, { color: theme.textDim, children: "Switched to " }), _jsx(Text, { color: theme.primary, bold: true, children: item.modelName })] }, item.id));
-            }
-            case "theme_transition": {
-                const glyphColor = THINKING_BORDER_COLORS[0];
-                return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: glyphColor, bold: true, children: "◐ " }), _jsx(Text, { color: theme.textDim, children: "Theme switched to " }), _jsx(Text, { color: theme.primary, bold: true, children: item.themeName })] }, item.id));
+                const glyphColor = item.active ? theme.commandColor : theme.textDim;
+                return renderStatusMessage(item.id, "✻ ", item.active ? "Thinking ON" : "Thinking OFF", glyphColor, { bold: true, muted: !item.active });
             }
+            case "model_transition":
+                return renderStatusMessage(item.id, "▸ ", _jsxs(_Fragment, { children: [_jsx(Text, { color: theme.textDim, children: "Switched to " }), _jsx(Text, { color: theme.commandColor, bold: true, children: item.modelName })] }), theme.commandColor, { bold: true });
+            case "theme_transition":
+                return renderStatusMessage(item.id, "◐ ", _jsxs(_Fragment, { children: [_jsx(Text, { color: theme.textDim, children: "Theme switched to " }), _jsx(Text, { color: theme.commandColor, bold: true, children: item.themeName })] }), theme.commandColor, { bold: true });
             case "plan_event": {
-                // Plan-domain status changes (approve / reject / dismiss). Uses
-                // theme.planPrimary to match the existing plan_transition family,
-                // distinct from the model/thinking gradient.
+                // Plan-domain status changes (approve / reject / dismiss). Use the
+                // command accent so transient TUI status rows share one purple voice.
                 const label = item.event === "approved"
                     ? "Plan approved"
                     : item.event === "rejected"
                         ? "Plan rejected"
                         : "Plan dismissed";
-                return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsxs(Text, { color: theme.planPrimary, bold: true, children: ["○ ", label] }), item.detail ? _jsx(Text, { color: theme.textDim, children: ` — "${item.detail}"` }) : null] }, item.id));
+                return renderStatusMessage(item.id, "○ ", _jsxs(_Fragment, { children: [_jsx(Text, { children: label }), item.detail ? _jsx(Text, { color: theme.textDim, children: ` — "${item.detail}"` }) : null] }), theme.commandColor, { bold: true });
             }
             case "stopped":
                 // Cancellation / abort acknowledgement (ESC, auto-setup cancel, etc.).
                 // Muted dim treatment — this is an ack, not a state change worth a
                 // gradient. Glyph `⊘` reads as "stop" without being alarming.
-                return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsxs(Text, { color: theme.textDim, bold: true, children: ["⊘ ", item.text] }) }, item.id));
+                return renderStatusMessage(item.id, "⊘ ", normalizeStatusText(item.text), theme.commandColor, { bold: true });
             case "step_done":
                 return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.success, bold: true, children: "✓ " }), _jsx(Text, { color: theme.success, bold: true, children: `Step ${item.stepNum} done` }), item.description ? (_jsx(Text, { color: theme.textDim, children: ` — ${item.description}` })) : null] }) }, item.id));
-            case "queued":
-                return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.warning, bold: true, children: "• " }), _jsx(Text, { color: theme.textDim, children: "Queued: " }), _jsxs(Text, { color: theme.text, wrap: "wrap", children: [item.text, item.imageCount
-                                    ? ` (+${item.imageCount} image${item.imageCount > 1 ? "s" : ""})`
-                                    : ""] })] }, item.id));
+            case "queued": {
+                const suffix = item.imageCount
+                    ? ` (+${item.imageCount} image${item.imageCount > 1 ? "s" : ""})`
+                    : "";
+                return withPrintedBoundarySpacing(_jsxs(Box, { flexDirection: "row", paddingLeft: 1, marginTop: 1, flexShrink: 1, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: theme.warning, bold: true, children: "• " }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Text, { color: theme.text, wrap: "wrap", children: [_jsx(Text, { color: theme.textDim, children: "Queued: " }), item.text || "(empty)", suffix] }) })] }, item.id));
+            }
             case "compacting":
                 return _jsx(CompactionSpinner, { staticDisplay: true }, item.id);
             case "compacted":
@@ -2673,87 +2909,16 @@ export function App(props) {
             case "duration":
                 return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.textDim, children: ["✻ ", item.verb, " ", formatDuration(item.durationMs)] }) }, item.id));
             case "subagent_group":
-                return _jsx(SubAgentPanel, { agents: item.agents, aborted: item.aborted }, item.id);
+                return withPrintedBoundarySpacing(_jsx(SubAgentPanel, { agents: item.agents, aborted: item.aborted }, item.id));
         }
     };
-    // ── Start a task (shared by manual "work on it" and run-all) ──
-    const startTask = useCallback((title, prompt, taskId) => {
-        setTaskCount(getTaskCount(props.cwd));
-        const shortId = taskId.slice(0, 8);
-        const completionHint = `\n\n---\nWhen you have fully completed this task, call the tasks tool to mark it done:\n` +
-            `tasks({ action: "done", id: "${shortId}" })`;
-        const fullPrompt = prompt + completionHint;
-        if (props.resetUI && props.sessionStore) {
-            // Preserve the current system prompt (may differ from the launch
-            // config — e.g. plan mode toggled or skills changed).
-            const sysMsg = messagesRef.current[0];
-            const newMessages = sysMsg && sysMsg.role === "system" ? [sysMsg] : messagesRef.current.slice(0, 1);
-            const taskItem = { kind: "task", title, id: String(nextIdRef.current++) };
-            const sm = sessionManagerRef.current;
-            void (async () => {
-                let newSessionPath;
-                if (sm) {
-                    try {
-                        const s = await sm.create(props.cwd, currentProvider, currentModel);
-                        newSessionPath = s.path;
-                        log("INFO", "tasks", "New session for task", { path: s.path });
-                    }
-                    catch {
-                        // session creation is best-effort
-                    }
-                }
-                if (props.sessionStore)
-                    props.sessionStore.overlay = null;
-                props.resetUI?.({
-                    wipeSession: true,
-                    messages: newMessages,
-                    history: [{ kind: "banner", id: "banner" }, taskItem],
-                    sessionPath: newSessionPath,
-                    pendingAction: { prompt: fullPrompt },
-                });
-            })();
-            return;
-        }
-        // Fallback path (resetUI not wired — tests).
-        setHistory([{ kind: "banner", id: "banner" }]);
-        setLiveItems([]);
-        messagesRef.current = messagesRef.current.slice(0, 1);
-        agentLoop.reset();
-        persistedIndexRef.current = messagesRef.current.length;
-        const sm = sessionManagerRef.current;
-        if (sm) {
-            void sm.create(props.cwd, currentProvider, currentModel).then((s) => {
-                sessionPathRef.current = s.path;
-                log("INFO", "tasks", "New session for task", { path: s.path });
-            });
-        }
-        const taskItem = { kind: "task", title, id: getId() };
-        setLastUserMessage(title);
-        setDoneStatus(null);
-        setLiveItems([taskItem]);
-        void (async () => {
-            try {
-                await agentLoop.run(fullPrompt);
-            }
-            catch (err) {
-                const msg = err instanceof Error ? err.message : String(err);
-                log("ERROR", "error", msg);
-                const isAbort = msg.includes("aborted") || msg.includes("abort");
-                setLiveItems((prev) => [
-                    ...prev,
-                    isAbort
-                        ? { kind: "stopped", text: "Request was stopped.", id: getId() }
-                        : toErrorItem(err, getId()),
-                ]);
-                setRunAllTasks(false);
-            }
-        })();
-    }, [props.cwd, props.resetUI, props.sessionStore, agentLoop, currentProvider, currentModel]);
     const openOverlay = useCallback((kind) => {
         if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
             props.sessionStore.overlay = kind;
             if (kind !== "plan")
                 props.sessionStore.planAutoExpand = false;
+            if (kind !== "goal")
+                props.sessionStore.goalAutoExpand = false;
             props.resetUI();
         }
         else {
@@ -2761,12 +2926,16 @@ export function App(props) {
                 props.sessionStore.overlay = kind;
                 if (kind !== "plan")
                     props.sessionStore.planAutoExpand = false;
+                if (kind !== "goal")
+                    props.sessionStore.goalAutoExpand = false;
                 if (agentLoop.isRunning && kind !== "goal" && kind !== "plan") {
                     props.sessionStore.pendingResetUI = true;
                 }
             }
             if (kind !== "plan")
                 setPlanAutoExpand(false);
+            if (kind !== "goal")
+                setGoalAutoExpand(false);
             setOverlay(kind);
         }
     }, [agentLoop.isRunning, props]);
@@ -2788,6 +2957,8 @@ export function App(props) {
             ? `Inspecting worker result${eventInfo.task ? ` for ${eventInfo.task}` : ""}.`
             : `Inspecting verifier result${eventInfo?.status ? ` (${eventInfo.status})` : ""}.`;
         if (agentRunningRef.current) {
+            queuedGoalSyntheticEventsRef.current += 1;
+            void setGoalModeAndPrompt("coordinator");
             appendGoalProgress({
                 kind: "goal_progress",
                 phase: "orchestrator_reviewing",
@@ -2809,12 +2980,19 @@ export function App(props) {
         });
         setLastUserMessage("");
         setDoneStatus(null);
-        void agentLoop.run(eventText).catch((err) => {
+        void (async () => {
+            await setGoalModeAndPrompt("coordinator");
+            await agentLoop.run(eventText);
+        })().catch((err) => {
             log("ERROR", "goal", err instanceof Error ? err.message : String(err));
             setLiveItems((prev) => [...prev, toErrorItem(err, getId(), "Goal")]);
+            clearGoalModeIfIdle();
         });
-    }, [agentLoop, appendGoalProgress]);
+    }, [agentLoop, appendGoalProgress, clearGoalModeIfIdle, setGoalModeAndPrompt]);
     const continueGoalRun = useCallback((runId) => {
+        if (goalContinuationFlightsRef.current.has(runId))
+            return;
+        goalContinuationFlightsRef.current.add(runId);
         void (async () => {
             const latestRun = await reconcileActiveGoalRuns(props.cwd, {
                 isWorkerActive: (workerId) => listGoalWorkers(props.cwd).some((worker) => worker.id === workerId && worker.status === "running"),
@@ -2822,11 +3000,24 @@ export function App(props) {
             if (!latestRun) {
                 runningGoalIdsRef.current.delete(runId);
                 clearGoalStatusEntry(runId);
+                clearGoalModeIfIdle();
                 return;
             }
             const decision = decideGoalNextAction(latestRun);
             if (decision.kind === "wait")
                 return;
+            const choiceKey = getGoalContinuationChoiceKey({ runId: latestRun.id, decision });
+            const now = Date.now();
+            const recentChoiceAt = goalContinuationRecentChoicesRef.current.get(choiceKey);
+            if (recentChoiceAt !== undefined && now - recentChoiceAt < 5000)
+                return;
+            goalContinuationRecentChoicesRef.current.set(choiceKey, now);
+            if (goalContinuationRecentChoicesRef.current.size > 100) {
+                for (const [key, startedAt] of goalContinuationRecentChoicesRef.current) {
+                    if (now - startedAt > 60_000)
+                        goalContinuationRecentChoicesRef.current.delete(key);
+                }
+            }
             if (decision.kind === "terminal" ||
                 decision.kind === "blocked" ||
                 decision.kind === "pause") {
@@ -2856,6 +3047,7 @@ export function App(props) {
                 }
                 runningGoalIdsRef.current.delete(runId);
                 clearGoalStatusEntry(runId);
+                clearGoalModeIfIdle();
                 return;
             }
             let runForNextAction = latestRun;
@@ -2886,18 +3078,28 @@ export function App(props) {
                 detail: "choosing next step",
             });
             startGoalRunRef.current(runForNextAction);
-        })().catch((err) => {
+        })()
+            .catch((err) => {
             runningGoalIdsRef.current.delete(runId);
             clearGoalStatusEntry(runId);
             log("ERROR", "goal", err instanceof Error ? err.message : String(err));
             setLiveItems((prev) => [...prev, toErrorItem(err, getId(), "Goal")]);
+        })
+            .finally(() => {
+            goalContinuationFlightsRef.current.delete(runId);
+            clearGoalModeIfIdle();
         });
-    }, [appendGoalProgress, clearGoalStatusEntry, props.cwd, upsertGoalStatusEntry]);
+    }, [
+        appendGoalProgress,
+        clearGoalModeIfIdle,
+        clearGoalStatusEntry,
+        props.cwd,
+        upsertGoalStatusEntry,
+    ]);
     const handleGoalWorkerComplete = useCallback((run, completion) => {
         const taskTitle = run.tasks.find((task) => task.id === completion.worker.goalTaskId)?.title ??
             completion.worker.goalTaskId;
         const eventText = formatGoalWorkerCompletionEvent(run, taskTitle, completion);
-        void summarizeGoalCounts(completion.worker.cwd).then((counts) => setGoalCount(counts.active));
         appendGoalProgress({
             kind: "goal_progress",
             phase: "worker_finished",
@@ -2951,7 +3153,16 @@ export function App(props) {
     }, [handleGoalWorkerComplete, props.cwd]);
     const startGoalRun = useCallback((run) => {
         runningGoalIdsRef.current.add(run.id);
+        upsertGoalStatusEntry({
+            runId: run.id,
+            label: run.title,
+            phase: "orchestrating",
+            startedAt: Date.now(),
+            detail: "choosing next step",
+            goalNumber: goalNumberForRun(run.id),
+        });
         void (async () => {
+            await setGoalModeAndPrompt("coordinator");
             const currentRun = (await loadGoalRuns(props.cwd)).find((item) => item.id === run.id) ?? run;
             const prereqCheck = await runGoalPrerequisiteChecks(props.cwd, currentRun);
             const checkedRun = prereqCheck.checkedCount > 0
@@ -2961,14 +3172,12 @@ export function App(props) {
                 })
                 : currentRun;
             if (goalHasBlockingPrerequisites(checkedRun)) {
-                setOverlay(null);
                 const detail = formatGoalBlockingPrerequisites(checkedRun);
                 await upsertGoalRun(props.cwd, {
                     ...checkedRun,
                     status: "blocked",
                     blockers: Array.from(new Set([...checkedRun.blockers, detail])),
                 });
-                setGoalCount((await summarizeGoalCounts(props.cwd)).active);
                 appendGoalProgress({
                     kind: "goal_progress",
                     phase: "terminal",
@@ -2978,6 +3187,7 @@ export function App(props) {
                 });
                 runningGoalIdsRef.current.delete(checkedRun.id);
                 clearGoalStatusEntry(checkedRun.id);
+                clearGoalModeIfIdle();
                 return;
             }
             const decision = decideGoalNextAction(checkedRun);
@@ -2990,6 +3200,7 @@ export function App(props) {
                 }
                 runningGoalIdsRef.current.delete(checkedRun.id);
                 clearGoalStatusEntry(checkedRun.id);
+                clearGoalModeIfIdle();
                 return;
             }
             if (decision.kind === "wait") {
@@ -3015,7 +3226,6 @@ export function App(props) {
             }
             if (decision.kind === "complete") {
                 await upsertGoalRun(props.cwd, { ...checkedRun, status: "passed" });
-                setGoalCount((await summarizeGoalCounts(props.cwd)).active);
                 appendGoalProgress({
                     kind: "goal_progress",
                     phase: "terminal",
@@ -3025,6 +3235,7 @@ export function App(props) {
                 });
                 runningGoalIdsRef.current.delete(checkedRun.id);
                 clearGoalStatusEntry(checkedRun.id);
+                clearGoalModeIfIdle();
                 return;
             }
             if (decision.kind === "run_verifier") {
@@ -3048,7 +3259,6 @@ export function App(props) {
                     status: "blocked",
                     blockers: [...checkedRun.blockers, decision.reason],
                 });
-                setGoalCount((await summarizeGoalCounts(props.cwd)).active);
                 appendGoalProgress({
                     kind: "goal_progress",
                     phase: "terminal",
@@ -3058,6 +3268,7 @@ export function App(props) {
                 });
                 runningGoalIdsRef.current.delete(checkedRun.id);
                 clearGoalStatusEntry(checkedRun.id);
+                clearGoalModeIfIdle();
                 return;
             }
             if (decision.kind === "pause") {
@@ -3077,7 +3288,6 @@ export function App(props) {
                     continueRequestedAt: undefined,
                     blockers: Array.from(new Set([...runWithPauseEvidence.blockers, decision.reason])),
                 });
-                setGoalCount((await summarizeGoalCounts(props.cwd)).active);
                 appendGoalProgress({
                     kind: "goal_progress",
                     phase: "terminal",
@@ -3087,6 +3297,7 @@ export function App(props) {
                 });
                 runningGoalIdsRef.current.delete(checkedRun.id);
                 clearGoalStatusEntry(checkedRun.id);
+                clearGoalModeIfIdle();
                 return;
             }
             const runWithAttempt = (await updateGoalTask(props.cwd, checkedRun.id, decision.task.id, {
@@ -3099,7 +3310,7 @@ export function App(props) {
                 goalRunId: checkedRun.id,
                 goalTaskId: decision.task.id,
                 taskTitle: decision.task.title,
-                prompt: decision.task.prompt,
+                prompt: buildGoalTaskPromptWithReferences(checkedRun, decision.task.prompt),
             });
             const latestRun = (await loadGoalRuns(props.cwd)).find((item) => item.id === checkedRun.id) ??
                 runWithAttempt;
@@ -3112,8 +3323,6 @@ export function App(props) {
                     ? { ...item, status: "running", workerId: worker.id, attempts: decision.attempts }
                     : item),
             });
-            setOverlay(null);
-            setGoalCount((await summarizeGoalCounts(props.cwd)).active);
             appendGoalProgress({
                 kind: "goal_progress",
                 phase: "worker_started",
@@ -3133,6 +3342,7 @@ export function App(props) {
             });
         })().catch((err) => {
             clearGoalStatusEntry(run.id);
+            clearGoalModeIfIdle();
             log("ERROR", "goal", err instanceof Error ? err.message : String(err));
             setLiveItems((prev) => [...prev, toErrorItem(err, getId(), "Goal")]);
         });
@@ -3141,11 +3351,14 @@ export function App(props) {
         currentProvider,
         currentModel,
         appendGoalProgress,
+        clearGoalModeIfIdle,
         clearGoalStatusEntry,
         goalNumberForRun,
+        setGoalModeAndPrompt,
         upsertGoalStatusEntry,
     ]);
     const verifyGoalRun = useCallback(async (run) => {
+        await setGoalModeAndPrompt("coordinator");
         if (!run.verifier?.command) {
             await appendGoalEvidence(props.cwd, run.id, {
                 kind: "summary",
@@ -3166,6 +3379,7 @@ export function App(props) {
             });
             runningGoalIdsRef.current.delete(run.id);
             clearGoalStatusEntry(run.id);
+            clearGoalModeIfIdle();
             return;
         }
         activeVerifierRunIdsRef.current.add(run.id);
@@ -3212,11 +3426,22 @@ export function App(props) {
                     command: run.verifier?.command,
                     lastResult: verification,
                 },
+                ...(status === "pass"
+                    ? {
+                        completionAudit: {
+                            status: "unknown",
+                            summary: "Final completion audit pending for latest verifier result.",
+                            checkedAt: verification.checkedAt,
+                            verifierCheckedAt: verification.checkedAt,
+                            ...(verification.outputPath ? { outputPath: verification.outputPath } : {}),
+                        },
+                    }
+                    : {}),
             };
             const completionCheck = canCompleteGoalRun(runWithVerifier);
             const verifiedRun = await upsertGoalRun(props.cwd, {
                 ...runWithVerifier,
-                continueRequestedAt: status === "pass" && completionCheck.ok ? undefined : latestRun.continueRequestedAt,
+                continueRequestedAt: latestRun.continueRequestedAt,
                 status: status === "pass" && completionCheck.ok ? "passed" : "ready",
             });
             await appendGoalEvidence(props.cwd, run.id, {
@@ -3230,7 +3455,6 @@ export function App(props) {
                 reason: `${failureClass}: verifier exited with code ${verification.exitCode ?? 1}.`,
                 content: `outputPath=${outputPath ?? ""}; durationMs=${durationMs}`,
             });
-            setGoalCount((await summarizeGoalCounts(props.cwd)).active);
             appendGoalProgress({
                 kind: "goal_progress",
                 phase: "verifier_finished",
@@ -3249,22 +3473,25 @@ export function App(props) {
             const eventText = formatGoalVerifierCompletionEvent(verifiedRun, status === "pass" ? "pass" : "fail", run.verifier?.command ?? "", verification.exitCode ?? 1, summary);
             runGoalSyntheticEvent(eventText);
             const continuationRun = (await loadGoalRuns(props.cwd)).find((item) => item.id === run.id);
-            if (continuationRun?.continueRequestedAt || status === "fail") {
+            if (continuationRun?.continueRequestedAt || status === "fail" || status === "pass") {
                 setTimeout(() => continueGoalRun(run.id), 500);
             }
         })
             .catch((err) => {
             activeVerifierRunIdsRef.current.delete(run.id);
             clearGoalStatusEntry(run.id);
+            clearGoalModeIfIdle();
             log("ERROR", "goal", err instanceof Error ? err.message : String(err));
             setLiveItems((prev) => [...prev, toErrorItem(err, getId(), "Goal verifier")]);
         });
     }, [
         props.cwd,
         appendGoalProgress,
+        clearGoalModeIfIdle,
         clearGoalStatusEntry,
         goalNumberForRun,
         runGoalSyntheticEvent,
+        setGoalModeAndPrompt,
         upsertGoalStatusEntry,
     ]);
     const pauseGoalRun = useCallback((run) => {
@@ -3278,7 +3505,6 @@ export function App(props) {
                 status: "paused",
                 activeWorkerId: undefined,
             });
-            setGoalCount((await summarizeGoalCounts(props.cwd)).active);
             appendGoalProgress({
                 kind: "goal_progress",
                 phase: "terminal",
@@ -3287,19 +3513,14 @@ export function App(props) {
                 status: "paused",
             });
             clearGoalStatusEntry(run.id);
+            clearGoalModeIfIdle();
         })().catch((err) => {
             log("ERROR", "goal", err instanceof Error ? err.message : String(err));
             setLiveItems((prev) => [...prev, toErrorItem(err, getId(), "Goal")]);
         });
-    }, [appendGoalProgress, clearGoalStatusEntry, props.cwd]);
+    }, [appendGoalProgress, clearGoalModeIfIdle, clearGoalStatusEntry, props.cwd]);
     // Keep refs in sync for access from stale closures (onDone)
-    startTaskRef.current = startTask;
     startGoalRunRef.current = startGoalRun;
-    useEffect(() => {
-        runAllTasksRef.current = runAllTasks;
-        if (props.sessionStore)
-            props.sessionStore.runAllTasks = runAllTasks;
-    }, [runAllTasks, props.sessionStore]);
     useEffect(() => {
         agentRunningRef.current = agentLoop.isRunning;
     }, [agentLoop.isRunning]);
@@ -3348,13 +3569,14 @@ export function App(props) {
                 injectedLanguagesRef.current = detectedForPixelFix;
                 const newSystemPrompt = await rebuildSystemPrompt({
                     cwd: prep.projectPath,
-                    planMode: false,
                     clearApprovedPlan: true,
                     activeLanguages: detectedForPixelFix,
                     tools: toolsForPixelFix,
                 });
                 // Now that the cwd swap is committed, reset chat. Do not clear the
                 // terminal here; terminal clear sequences can erase saved scrollback.
+                pendingHistoryFlushRef.current = [];
+                props.terminalHistoryPrinter?.clear();
                 setHistory([{ kind: "banner", id: "banner" }]);
                 setLiveItems([]);
                 messagesRef.current = messagesRef.current.slice(0, 1);
@@ -3374,10 +3596,10 @@ export function App(props) {
                     messagesRef.current.unshift({ role: "system", content: newSystemPrompt });
                 }
                 const title = `Fix ${errorId.slice(0, 12)}… in ${prep.projectName}`;
-                const taskItem = { kind: "task", title, id: getId() };
+                const goalItem = { kind: "goal", title, id: getId() };
                 setLastUserMessage(title);
                 setDoneStatus(null);
-                setLiveItems([taskItem]);
+                setLiveItems([goalItem]);
                 await agentLoop.run(prep.prompt);
             }
             catch (err) {
@@ -3398,266 +3620,333 @@ export function App(props) {
         if (props.sessionStore)
             props.sessionStore.runAllPixel = runAllPixel;
     }, [runAllPixel, props.sessionStore]);
-    const isTaskView = overlay === "tasks";
     const isGoalView = overlay === "goal";
     const isSkillsView = overlay === "skills";
     const isPlanView = overlay === "plan";
-    const isEyesView = overlay === "eyes";
     const footerStatusLayout = getFooterStatusLayoutDecision({
         columns,
         backgroundTaskCount: bgTasks.length,
-        eyesCount,
         updatePending,
     });
+    const activityVisible = agentLoop.isRunning && agentLoop.activityPhase !== "idle";
+    const stallStatusVisible = !activityVisible && !!agentLoop.stallError;
+    const doneStatusVisible = !activityVisible && !stallStatusVisible && !!doneStatus && !agentLoop.isRunning;
+    const statusSlotVisible = activityVisible || stallStatusVisible || doneStatusVisible;
+    const [controlsHeight, setControlsHeight] = useState(0);
+    const controlsObserverRef = useRef(null);
+    const mainControlsRef = useCallback((node) => {
+        if (controlsObserverRef.current) {
+            controlsObserverRef.current.disconnect();
+            controlsObserverRef.current = null;
+        }
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const roundedHeight = Math.round(entry.contentRect.height);
+            setControlsHeight((prev) => (roundedHeight !== prev ? roundedHeight : prev));
+        });
+        observer.observe(node);
+        controlsObserverRef.current = observer;
+    }, []);
+    useEffect(() => () => controlsObserverRef.current?.disconnect(), []);
+    const footerFitsOnOneLine = doesFooterFitOnOneLine({
+        columns,
+        model: currentModel,
+        tokensIn: agentLoop.contextUsed,
+        contextWindowOptions,
+        cwd: displayedCwd,
+        gitBranch,
+        thinkingLevel: thinkingEnabled ? getMaxThinkingLevel(currentModel) : undefined,
+        goalMode,
+    });
+    const chatControlsLayout = getChatControlsLayoutDecision({
+        rows,
+        columns,
+        agentRunning: agentLoop.isRunning,
+        activityVisible,
+        doneStatusVisible,
+        stallStatusVisible,
+        exitPending,
+        footerStatusLayout,
+        taskBarExpanded,
+        goalStatusEntryCount: goalStatusEntries.length,
+        footerFitsOnOneLine,
+    });
+    const stableControlsRows = controlsHeight > 0 ? controlsHeight : chatControlsLayout.controlsRows;
+    const measuredLiveAreaRows = Math.max(MIN_LIVE_AREA_ROWS, rows - stableControlsRows - 1);
     const isPixelView = overlay === "pixel";
-    const isOverlayView = isTaskView || isGoalView || isSkillsView || isPlanView || isEyesView || isPixelView;
-    const shouldHideHistoryForOverlay = shouldHideHistoryForOverlayView(isOverlayView, agentLoop.isRunning);
-    const stabilizeOverlayPaneRerender = shouldStabilizeOverlayPaneRerender({
-        overlayPane: overlay,
-        isAgentRunning: agentLoop.isRunning,
+    const hasLiveAssistantItem = liveItems.some((item) => item.kind === "assistant");
+    const rawVisibleStreamingText = goalModeStateRef.current === "planner" || hasLiveAssistantItem ? "" : agentLoop.streamingText;
+    useEffect(() => {
+        if (!rawVisibleStreamingText) {
+            streamedAssistantFlushRef.current = { flushedChars: 0, text: "" };
+            return;
+        }
+        if (rawVisibleStreamingText === streamedAssistantFlushRef.current.text)
+            return;
+        const alreadyFlushed = streamedAssistantFlushRef.current.flushedChars;
+        const unflushedText = rawVisibleStreamingText.slice(alreadyFlushed);
+        const split = splitAssistantStreamingText(unflushedText);
+        if (split.flushedText.length > 0) {
+            queueFlush([
+                {
+                    kind: "assistant",
+                    text: split.flushedText,
+                    continuation: streamedAssistantFlushRef.current.flushedChars > 0,
+                    id: getId(),
+                },
+            ]);
+            streamedAssistantFlushRef.current = {
+                flushedChars: alreadyFlushed + split.flushedText.length,
+                text: rawVisibleStreamingText,
+            };
+            return;
+        }
+        streamedAssistantFlushRef.current = {
+            ...streamedAssistantFlushRef.current,
+            text: rawVisibleStreamingText,
+        };
+    }, [rawVisibleStreamingText, queueFlush]);
+    const visibleStreamingText = rawVisibleStreamingText.slice(streamedAssistantFlushRef.current.flushedChars);
+    const shouldReserveStreamingSpacing = agentLoop.isRunning &&
+        !hasLiveAssistantItem &&
+        (visibleStreamingText.trim().length > 0 || liveItems.some(isAgentSpacingItem));
+    const shouldTopSpaceStreamingText = shouldTopSpaceStreamingAssistant({
+        visibleStreamingText,
+        lastLiveItem: liveItems.at(-1),
+        lastPendingHistoryItem: pendingHistoryFlushRef.current.at(-1),
+        lastHistoryItem: history.at(-1),
     });
-    const staticItems = shouldHideStaticItemsForOverlayView({
-        shouldHideHistoryForOverlay,
-        stabilizeOverlayPaneRerender,
-    })
-        ? []
-        : history;
-    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(Static, { items: staticItems, style: { width: "100%" }, children: (item) => (_jsx(Box, { flexDirection: "column", paddingRight: 1, children: renderItem(item) }, item.id)) }, getStaticHistoryKey({ resizeKey })), isTaskView ? (_jsx(TaskOverlay, { cwd: props.cwd, agentRunning: agentLoop.isRunning, onClose: () => {
-                    if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
-                        props.sessionStore.overlay = null;
-                        props.resetUI();
+    return (_jsx(Box, { flexDirection: "column", width: columns, flexShrink: 0, flexGrow: 0, children: isGoalView ? (_jsx(GoalOverlay, { cwd: props.cwd, agentRunning: agentLoop.isRunning, autoExpandNewest: goalAutoExpand, onClose: () => {
+                goalAutoExpandRef.current = false;
+                setGoalAutoExpand(false);
+                if (props.sessionStore)
+                    props.sessionStore.goalAutoExpand = false;
+                closeOverlay();
+            }, onRunGoal: (run) => {
+                const paneTransition = getGoalActivationPaneTransition();
+                goalAutoExpandRef.current = paneTransition.goalAutoExpand;
+                setGoalAutoExpand(paneTransition.goalAutoExpand);
+                setPlanAutoExpand(paneTransition.planAutoExpand);
+                if (props.sessionStore) {
+                    props.sessionStore.overlay = paneTransition.overlay;
+                    props.sessionStore.goalAutoExpand = paneTransition.goalAutoExpand;
+                    props.sessionStore.planAutoExpand = paneTransition.planAutoExpand;
+                }
+                if (paneTransition.resetReviewScreen && props.resetUI && props.sessionStore) {
+                    props.sessionStore.pendingGoalRun = run;
+                    props.resetUI();
+                    return;
+                }
+                setOverlay(paneTransition.overlay);
+                startGoalRun(run);
+            }, onVerifyGoal: (run) => {
+                void verifyGoalRun(run);
+            }, onPauseGoal: (run) => {
+                pauseGoalRun(run);
+            }, onRefineGoal: (run, feedback) => {
+                goalAutoExpandRef.current = true;
+                setGoalAutoExpand(true);
+                void (async () => {
+                    try {
+                        await setGoalModeAndPrompt("setup");
+                        await agentLoop.run(`Refine Goal run ${run.id} (${run.title}) based on this user feedback. Update durable Goal setup only, then stop and reopen the Goal pane for review.\n\nFeedback: ${feedback}`);
                     }
-                    else {
-                        if (props.sessionStore) {
-                            props.sessionStore.overlay = null;
-                            if (agentLoop.isRunning)
-                                props.sessionStore.pendingResetUI = true;
-                        }
-                        setTaskCount(getTaskCount(props.cwd));
-                        setOverlay(null);
+                    catch (err) {
+                        log("ERROR", "goal", err instanceof Error ? err.message : String(err));
+                        setLiveItems((prev) => [...prev, toErrorItem(err, getId(), "Goal")]);
                     }
-                }, onWorkOnTask: (title, prompt, taskId) => {
-                    setOverlay(null);
-                    startTask(title, prompt, taskId);
-                }, onRunAllTasks: () => {
-                    setOverlay(null);
-                    setRunAllTasks(true);
-                    const next = getNextPendingTask(props.cwd);
-                    if (next) {
-                        markTaskInProgress(props.cwd, next.id);
-                        startTask(next.title, next.prompt, next.id);
+                    finally {
+                        await setGoalModeAndPrompt("off");
+                        const paneTransition = getGoalSetupFinishedPaneTransition();
+                        goalAutoExpandRef.current = paneTransition.goalAutoExpand;
+                        setTimeout(() => {
+                            const resetUI = props.resetUI;
+                            const sessionStore = props.sessionStore;
+                            if (shouldResetUIForGoalSetupPaneTransition({
+                                hasResetUI: resetUI !== undefined,
+                                hasSessionStore: sessionStore !== undefined,
+                            }) &&
+                                resetUI &&
+                                sessionStore) {
+                                sessionStore.overlay = paneTransition.overlay;
+                                sessionStore.goalAutoExpand = paneTransition.goalAutoExpand;
+                                sessionStore.planAutoExpand = paneTransition.planAutoExpand;
+                                resetUI();
+                                return;
+                            }
+                            setGoalAutoExpand(paneTransition.goalAutoExpand);
+                            setPlanAutoExpand(paneTransition.planAutoExpand);
+                            setOverlay(paneTransition.overlay);
+                        }, 300);
                     }
-                } })) : isGoalView ? (_jsx(GoalOverlay, { cwd: props.cwd, agentRunning: agentLoop.isRunning, onClose: () => {
-                    void summarizeGoalCounts(props.cwd).then((counts) => setGoalCount(counts.active));
-                    closeOverlay();
-                }, onRunGoal: (run) => {
-                    setOverlay(null);
-                    startGoalRun(run);
-                }, onVerifyGoal: (run) => {
-                    void verifyGoalRun(run);
-                }, onPauseGoal: (run) => {
-                    pauseGoalRun(run);
-                } })) : isPixelView ? (_jsx(PixelOverlay, { version: props.version, agentRunning: agentLoop.isRunning, onClose: () => {
-                    if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
+                })();
+            } })) : isPixelView ? (_jsx(PixelOverlay, { version: props.version, agentRunning: agentLoop.isRunning, onClose: () => {
+                if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
+                    props.sessionStore.overlay = null;
+                    props.resetUI();
+                }
+                else {
+                    if (props.sessionStore) {
                         props.sessionStore.overlay = null;
-                        props.resetUI();
-                    }
-                    else {
-                        if (props.sessionStore) {
-                            props.sessionStore.overlay = null;
-                            if (agentLoop.isRunning)
-                                props.sessionStore.pendingResetUI = true;
-                        }
-                        setOverlay(null);
+                        if (agentLoop.isRunning)
+                            props.sessionStore.pendingResetUI = true;
                     }
-                }, onFixOne: (entry) => {
                     setOverlay(null);
-                    startPixelFix(entry.errorId);
-                }, onFixAll: (entries) => {
-                    const first = entries.find((e) => e.status === "open") ?? entries[0];
-                    if (!first)
-                        return;
-                    setOverlay(null);
-                    setRunAllPixel(true);
-                    startPixelFix(first.errorId);
-                } })) : isSkillsView ? (_jsx(SkillsOverlay, { cwd: props.cwd, onClose: () => {
-                    if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
-                        props.sessionStore.overlay = null;
-                        props.resetUI();
-                    }
-                    else {
-                        if (props.sessionStore) {
-                            props.sessionStore.overlay = null;
-                            if (agentLoop.isRunning)
-                                props.sessionStore.pendingResetUI = true;
-                        }
-                        setOverlay(null);
-                    }
-                } })) : isEyesView ? (_jsx(EyesOverlay, { cwd: props.cwd, onClose: () => {
-                    if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
+                }
+            }, onFixOne: (entry) => {
+                setOverlay(null);
+                startPixelFix(entry.errorId);
+            }, onFixAll: (entries) => {
+                const first = entries.find((e) => e.status === "open") ?? entries[0];
+                if (!first)
+                    return;
+                setOverlay(null);
+                setRunAllPixel(true);
+                startPixelFix(first.errorId);
+            } })) : isSkillsView ? (_jsx(SkillsOverlay, { cwd: props.cwd, onClose: () => {
+                if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
+                    props.sessionStore.overlay = null;
+                    props.resetUI();
+                }
+                else {
+                    if (props.sessionStore) {
                         props.sessionStore.overlay = null;
-                        props.resetUI();
+                        if (agentLoop.isRunning)
+                            props.sessionStore.pendingResetUI = true;
                     }
-                    else {
-                        if (props.sessionStore) {
-                            props.sessionStore.overlay = null;
-                            if (agentLoop.isRunning)
-                                props.sessionStore.pendingResetUI = true;
-                        }
-                        setEyesCount(isEyesActive(props.cwd) ? journalCount({ status: "open" }, props.cwd) : undefined);
-                        setOverlay(null);
-                    }
-                }, onQueueMessage: (msg) => {
-                    agentLoop.queueMessage(msg);
-                } })) : isPlanView ? (_jsx(PlanOverlay, { cwd: props.cwd, autoExpandNewest: planAutoExpand, onClose: () => {
-                    planOverlayPendingRef.current = false;
-                    if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
+                    setOverlay(null);
+                }
+            } })) : isPlanView ? (_jsx(PlanOverlay, { cwd: props.cwd, autoExpandNewest: planAutoExpand, onClose: () => {
+                planOverlayPendingRef.current = false;
+                if (props.resetUI && props.sessionStore && !agentLoop.isRunning) {
+                    props.sessionStore.overlay = null;
+                    props.sessionStore.planAutoExpand = false;
+                    props.resetUI();
+                }
+                else {
+                    if (props.sessionStore) {
                         props.sessionStore.overlay = null;
                         props.sessionStore.planAutoExpand = false;
-                        props.resetUI();
+                        if (agentLoop.isRunning)
+                            props.sessionStore.pendingResetUI = true;
                     }
-                    else {
-                        if (props.sessionStore) {
+                    setPlanAutoExpand(false);
+                    setOverlay(null);
+                }
+            }, onApprove: (planPath) => {
+                log("INFO", "plan", "Plan approved — transitioning to implementation", {
+                    planPath,
+                });
+                planOverlayPendingRef.current = false;
+                void (async () => {
+                    try {
+                        // Read plan steps for progress tracking — handed to the new
+                        // mount via sessionStore.planSteps below.
+                        const planContent = await import("node:fs/promises").then(({ readFile }) => readFile(planPath, "utf-8"));
+                        const steps = extractPlanSteps(planContent);
+                        // Build the new system prompt with the approved plan baked in.
+                        const newPrompt = await rebuildSystemPrompt({
+                            approvedPlanPath: planPath,
+                        });
+                        // Create a new session file BEFORE remount so the new tree
+                        // picks it up via sessionStore.sessionPath.
+                        let newSessionPath;
+                        const sm = sessionManagerRef.current;
+                        if (sm) {
+                            const s = await sm.create(props.cwd, currentProvider, currentModel);
+                            newSessionPath = s.path;
+                        }
+                        if (props.resetUI && props.sessionStore) {
+                            // Clear the overlay so the new mount lands on the chat,
+                            // not back inside the plan pane.
                             props.sessionStore.overlay = null;
                             props.sessionStore.planAutoExpand = false;
-                            if (agentLoop.isRunning)
-                                props.sessionStore.pendingResetUI = true;
-                        }
-                        setPlanAutoExpand(false);
-                        setOverlay(null);
-                    }
-                }, onApprove: (planPath) => {
-                    log("INFO", "plan", "Plan approved — transitioning to implementation", {
-                        planPath,
-                    });
-                    planOverlayPendingRef.current = false;
-                    void (async () => {
-                        try {
-                            // Read plan steps for progress tracking — handed to the new
-                            // mount via sessionStore.planSteps below.
-                            const planContent = await import("node:fs/promises").then(({ readFile }) => readFile(planPath, "utf-8"));
-                            const steps = extractPlanSteps(planContent);
-                            // Build the new system prompt with the approved plan baked in.
-                            const newPrompt = await rebuildSystemPrompt({
-                                planMode: false,
+                            props.resetUI({
+                                wipeSession: true,
+                                messages: [{ role: "system", content: newPrompt }],
                                 approvedPlanPath: planPath,
-                            });
-                            // Create a new session file BEFORE remount so the new tree
-                            // picks it up via sessionStore.sessionPath.
-                            let newSessionPath;
-                            const sm = sessionManagerRef.current;
-                            if (sm) {
-                                const s = await sm.create(props.cwd, currentProvider, currentModel);
-                                newSessionPath = s.path;
-                            }
-                            if (props.resetUI && props.sessionStore) {
-                                // Clear the overlay so the new mount lands on the chat,
-                                // not back inside the plan pane.
-                                props.sessionStore.overlay = null;
-                                props.sessionStore.planAutoExpand = false;
-                                props.resetUI({
-                                    wipeSession: true,
-                                    messages: [{ role: "system", content: newPrompt }],
-                                    approvedPlanPath: planPath,
-                                    planSteps: steps,
-                                    sessionPath: newSessionPath,
-                                    pendingAction: {
-                                        prompt: "The plan has been approved. Implement it now, following each step in order.",
-                                        planEvent: { event: "approved" },
-                                    },
-                                });
-                                return;
-                            }
-                            // Fallback path (resetUI not wired — tests). Mutate in place.
-                            approvedPlanPathRef.current = planPath;
-                            planStepsRef.current = steps;
-                            setPlanSteps(steps);
-                            setHistory([{ kind: "banner", id: "banner" }]);
-                            setLiveItems([]);
-                            setPlanAutoExpand(false);
-                            setOverlay(null);
-                            messagesRef.current = [{ role: "system", content: newPrompt }];
-                            agentLoop.reset();
-                            persistedIndexRef.current = messagesRef.current.length;
-                            if (newSessionPath)
-                                sessionPathRef.current = newSessionPath;
-                            setLiveItems([
-                                {
-                                    kind: "info",
-                                    text: "Plan approved — starting fresh session for implementation",
-                                    id: getId(),
+                                planSteps: steps,
+                                sessionPath: newSessionPath,
+                                pendingAction: {
+                                    prompt: "The plan has been approved. Implement it now, following each step in order.",
+                                    planEvent: { event: "approved" },
                                 },
-                            ]);
-                            setDoneStatus(null);
-                            await agentLoop.run("The plan has been approved. Implement it now, following each step in order.");
-                        }
-                        catch (err) {
-                            const errMsg = err instanceof Error ? err.message : String(err);
-                            log("ERROR", "error", errMsg);
-                            setLiveItems((prev) => [...prev, toErrorItem(err, getId())]);
+                            });
+                            return;
                         }
-                    })();
-                }, onReject: (planPath, feedback) => {
-                    planOverlayPendingRef.current = false;
-                    const rejectionMsg = `The plan at ${planPath} was rejected.\n\nFeedback: ${feedback}\n\n` +
-                        `Please revise the plan based on this feedback.`;
-                    if (props.resetUI && props.sessionStore) {
-                        props.sessionStore.overlay = null;
-                        props.sessionStore.planAutoExpand = false;
-                        // No wipeSession — keep history, messages, plan mode etc. The
-                        // agent picks up the rejection mid-conversation.
-                        props.resetUI({
-                            pendingAction: {
-                                prompt: rejectionMsg,
-                                planEvent: { event: "rejected", detail: feedback },
+                        // Fallback path (resetUI not wired — tests). Mutate in place.
+                        approvedPlanPathRef.current = planPath;
+                        planStepsRef.current = steps;
+                        setPlanSteps(steps);
+                        pendingHistoryFlushRef.current = [];
+                        props.terminalHistoryPrinter?.clear();
+                        setHistory([{ kind: "banner", id: "banner" }]);
+                        setLiveItems([]);
+                        setPlanAutoExpand(false);
+                        setOverlay(null);
+                        messagesRef.current = [{ role: "system", content: newPrompt }];
+                        agentLoop.reset();
+                        persistedIndexRef.current = messagesRef.current.length;
+                        if (newSessionPath)
+                            sessionPathRef.current = newSessionPath;
+                        setLiveItems([
+                            {
+                                kind: "info",
+                                text: "Plan approved — starting fresh session for implementation",
+                                id: getId(),
                             },
-                        });
-                        return;
+                        ]);
+                        setDoneStatus(null);
+                        await agentLoop.run("The plan has been approved. Implement it now, following each step in order.");
                     }
-                    setPlanAutoExpand(false);
-                    setOverlay(null);
-                    setDoneStatus(null);
-                    setLiveItems((prev) => [
-                        ...prev,
-                        { kind: "info", text: `Plan rejected — "${feedback}"`, id: getId() },
-                    ]);
-                    void agentLoop.run(rejectionMsg).catch((err) => {
+                    catch (err) {
                         const errMsg = err instanceof Error ? err.message : String(err);
                         log("ERROR", "error", errMsg);
                         setLiveItems((prev) => [...prev, toErrorItem(err, getId())]);
+                    }
+                })();
+            }, onReject: (planPath, feedback) => {
+                planOverlayPendingRef.current = false;
+                const rejectionMsg = `The plan at ${planPath} was rejected.\n\nFeedback: ${feedback}\n\n` +
+                    `Please revise the plan based on this feedback.`;
+                if (props.resetUI && props.sessionStore) {
+                    props.sessionStore.overlay = null;
+                    props.sessionStore.planAutoExpand = false;
+                    // No wipeSession — keep history and messages so the agent picks
+                    // up the rejection mid-conversation.
+                    props.resetUI({
+                        pendingAction: {
+                            prompt: rejectionMsg,
+                            planEvent: { event: "rejected", detail: feedback },
+                        },
                     });
-                } })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 1, children: [liveItems.map((item) => renderItem(item)), _jsx(StreamingArea, { isRunning: agentLoop.isRunning, streamingText: agentLoop.streamingText, streamingThinking: agentLoop.streamingThinking, thinkingMs: agentLoop.thinkingMs, planMode: planMode })] }), agentLoop.isRunning && agentLoop.activityPhase !== "idle" ? (_jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: agentLoop.activityPhase === "thinking" ? THINKING_BORDER_COLORS[0] : "transparent", paddingLeft: 1, paddingRight: 1, width: columns, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, runStartRef: agentLoop.runStartRef, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, thinkingEnabled: thinkingEnabled, tokenEstimate: agentLoop.streamedTokenEstimate, charCountRef: agentLoop.charCountRef, realTokensAccumRef: agentLoop.realTokensAccumRef, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), planMode: planMode, retryInfo: agentLoop.retryInfo, planDone: planSteps.filter((s) => s.completed).length, planTotal: planSteps.length, staticDisplay: true }) })) : agentLoop.stallError ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.warning, children: "⚠ API provider stream interrupted — retries exhausted." }), _jsx(Text, { color: theme.textDim, children: "  Your conversation is preserved. Send a message to continue." })] })) : (doneStatus &&
-                        !agentLoop.isRunning && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.success, children: ["✻ ", doneStatus.verb, " ", formatDuration(doneStatus.durationMs)] }) }))), agentLoop.queuedCount > 0 && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.warning, bold: true, children: "• " }), _jsxs(Text, { color: theme.textDim, children: [agentLoop.queuedCount, " message", agentLoop.queuedCount > 1 ? "s" : "", " queued"] })] })), _jsx(InputArea, { onSubmit: handleSubmit, onAbort: handleAbort, disabled: agentLoop.isRunning, isActive: !taskBarFocused && !overlay, onDownAtEnd: handleFocusTaskBar, onShiftTab: handleToggleThinking, onToggleTasks: () => {
-                            // Just flip the overlay state — Ink's log-update handles the
-                            // live-area transition (chat input → TaskOverlay) natively, and
-                            // the chat history above stays in scrollback. When the overlay
-                            // closes, the history is still there (banner included).
-                            openOverlay("tasks");
-                        }, onToggleGoal: () => {
-                            openOverlay("goal");
-                        }, onToggleSkills: () => {
-                            openOverlay("skills");
-                        }, onTogglePixel: () => {
-                            openOverlay("pixel");
-                        }, onTogglePlanMode: () => {
-                            const next = !planMode;
-                            setPlanMode(next);
-                            log("INFO", "plan", `Plan mode ${next ? "enabled" : "disabled"}`);
-                            setLiveItems((items) => [
-                                ...items,
-                                {
-                                    kind: "plan_transition",
-                                    text: next ? "Plan Mode Activated" : "Plan Mode Deactivated",
-                                    active: next,
-                                    id: getId(),
-                                },
-                            ]);
-                        }, cwd: props.cwd, commands: allCommands, eyesCount: eyesCount }), overlay === "model" ? (_jsx(ModelSelector, { onSelect: handleModelSelect, onCancel: () => setOverlay(null), loggedInProviders: props.loggedInProviders ?? [currentProvider], currentModel: currentModel, currentProvider: currentProvider })) : overlay === "theme" ? (_jsx(ThemeSelector, { onSelect: handleThemeSelect, onCancel: () => setOverlay(null), currentTheme: theme.name })) : (_jsxs(_Fragment, { children: [_jsx(Footer, { model: currentModel, tokensIn: agentLoop.contextUsed, contextWindowOptions: contextWindowOptions, cwd: displayedCwd, gitBranch: gitBranch, thinkingLevel: thinkingEnabled ? getMaxThinkingLevel(currentModel) : undefined, planMode: planMode, exitPending: exitPending }), !exitPending && _jsx(GoalStatusBar, { entries: goalStatusEntries })] })), (footerStatusLayout.hasBackgroundTasks ||
-                        footerStatusLayout.hasEyesSignals ||
-                        footerStatusLayout.hasUpdateNotice) && (_jsxs(Box, { flexDirection: footerStatusLayout.stack ? "column" : "row", width: columns, children: [footerStatusLayout.hasBackgroundTasks && (_jsx(BackgroundTasksBar, { tasks: bgTasks, focused: taskBarFocused, expanded: taskBarExpanded, selectedIndex: selectedTaskIndex, onExpand: handleTaskBarExpand, onCollapse: handleTaskBarCollapse, onKill: handleTaskKill, onExit: handleTaskBarExit, onNavigate: handleTaskNavigate, compact: footerStatusLayout.compactBackgroundTasks })), footerStatusLayout.hasEyesSignals && (_jsx(Box, { paddingLeft: footerStatusLayout.stack || bgTasks.length === 0 ? 1 : 2, paddingRight: 1, children: _jsx(Text, { color: theme.accent, bold: true, wrap: "truncate", children: `${eyesCount} eyes signal${eyesCount === 1 ? "" : "s"} · Run /eyes-improve to enhance GG Coder` }) })), footerStatusLayout.hasUpdateNotice && (_jsx(Box, { paddingLeft: footerStatusLayout.stack ||
-                                    (!footerStatusLayout.hasBackgroundTasks && !footerStatusLayout.hasEyesSignals)
-                                    ? 1
-                                    : 2, paddingRight: 1, children: _jsx(Text, { color: theme.success, bold: true, wrap: "truncate", children: "\u2728 Update ready \u00B7 restart to apply" }) }))] }))] }))] }));
+                    return;
+                }
+                setPlanAutoExpand(false);
+                setOverlay(null);
+                setDoneStatus(null);
+                setLiveItems((prev) => [
+                    ...prev,
+                    { kind: "info", text: `Plan rejected — "${feedback}"`, id: getId() },
+                ]);
+                void agentLoop.run(rejectionMsg).catch((err) => {
+                    const errMsg = err instanceof Error ? err.message : String(err);
+                    log("ERROR", "error", errMsg);
+                    setLiveItems((prev) => [...prev, toErrorItem(err, getId())]);
+                });
+            } })) : (_jsxs(Box, { flexDirection: "column", width: columns, flexShrink: 0, flexGrow: 0, children: [_jsxs(Box, { flexDirection: "column", maxHeight: measuredLiveAreaRows, flexGrow: 0, flexShrink: 1, overflowY: "hidden", children: [liveItems.map((item, index, items) => renderItem(item, index, items)), _jsx(StreamingArea, { isRunning: agentLoop.isRunning, streamingText: visibleStreamingText, streamingThinking: agentLoop.streamingThinking, thinkingMs: agentLoop.thinkingMs, reserveSpacing: shouldReserveStreamingSpacing, renderMarkdown: renderMarkdown, availableTerminalHeight: measuredLiveAreaRows, assistantMarginTop: shouldTopSpaceStreamingText ? 1 : 0, continuation: streamedAssistantFlushRef.current.flushedChars > 0 })] }), _jsxs(Box, { ref: mainControlsRef, flexDirection: "column", flexShrink: 0, flexGrow: 0, children: [agentLoop.queuedCount > 0 && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.warning, bold: true, children: "• " }), _jsxs(Text, { color: theme.textDim, children: [agentLoop.queuedCount, " message", agentLoop.queuedCount > 1 ? "s" : "", " queued"] })] })), _jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(Box, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: theme.textDim, width: columns, height: 0 }), _jsx(Box, { paddingLeft: 1, paddingRight: 1, width: columns, children: statusSlotVisible ? (activityVisible ? (_jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, runStartRef: agentLoop.runStartRef, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, thinkingEnabled: thinkingEnabled, tokenEstimate: agentLoop.streamedTokenEstimate, charCountRef: agentLoop.charCountRef, realTokensAccumRef: agentLoop.realTokensAccumRef, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), retryInfo: agentLoop.retryInfo, planDone: planSteps.filter((s) => s.completed).length, planTotal: planSteps.length, staticDisplay: true })) : stallStatusVisible ? (_jsx(Text, { color: theme.warning, wrap: "truncate", children: "⚠ API provider stream interrupted — retries exhausted. Your conversation is preserved." })) : doneStatus ? (_jsxs(Text, { color: theme.success, children: ["✻ ", doneStatus.verb, " ", formatDuration(doneStatus.durationMs)] })) : (_jsxs(Text, { children: [_jsx(Text, { color: theme.commandColor, children: "⠿ " }), _jsx(Text, { color: theme.textDim, children: "Ready to go.." }), !renderMarkdown && (_jsx(Text, { color: theme.warning, children: " · raw markdown mode" }))] }))) : (_jsxs(Text, { children: [_jsx(Text, { color: theme.commandColor, children: "⠿ " }), _jsx(Text, { color: theme.textDim, children: "Ready to go.." })] })) })] }), _jsx(InputArea, { onSubmit: handleSubmit, onAbort: handleAbort, disabled: agentLoop.isRunning, isActive: !taskBarFocused && !overlay, onDownAtEnd: handleFocusTaskBar, onShiftTab: handleToggleThinking, onToggleGoal: () => {
+                                openOverlay("goal");
+                            }, onToggleSkills: () => {
+                                openOverlay("skills");
+                            }, onTogglePixel: () => {
+                                openOverlay("pixel");
+                            }, onToggleMarkdown: () => {
+                                setRenderMarkdown((prev) => !prev);
+                            }, cwd: props.cwd, commands: allCommands }), overlay === "model" ? (_jsx(ModelSelector, { onSelect: handleModelSelect, onCancel: () => setOverlay(null), loggedInProviders: props.loggedInProviders ?? [currentProvider], currentModel: currentModel, currentProvider: currentProvider })) : overlay === "theme" ? (_jsx(ThemeSelector, { onSelect: handleThemeSelect, onCancel: () => setOverlay(null), currentTheme: theme.name })) : (_jsxs(_Fragment, { children: [_jsx(Footer, { model: currentModel, tokensIn: agentLoop.contextUsed, contextWindowOptions: contextWindowOptions, cwd: displayedCwd, gitBranch: gitBranch, thinkingLevel: thinkingEnabled ? getMaxThinkingLevel(currentModel) : undefined, goalMode: goalMode, exitPending: exitPending, renderMarkdown: renderMarkdown }), !exitPending && _jsx(GoalStatusBar, { entries: goalStatusEntries })] })), (footerStatusLayout.hasBackgroundTasks || footerStatusLayout.hasUpdateNotice) && (_jsxs(Box, { flexDirection: footerStatusLayout.stack ? "column" : "row", width: columns, children: [footerStatusLayout.hasBackgroundTasks && (_jsx(BackgroundTasksBar, { tasks: bgTasks, focused: taskBarFocused, expanded: taskBarExpanded, selectedIndex: selectedTaskIndex, onExpand: handleTaskBarExpand, onCollapse: handleTaskBarCollapse, onKill: handleTaskKill, onExit: handleTaskBarExit, onNavigate: handleTaskNavigate, compact: footerStatusLayout.compactBackgroundTasks })), footerStatusLayout.hasUpdateNotice && (_jsx(Box, { paddingLeft: footerStatusLayout.stack || !footerStatusLayout.hasBackgroundTasks ? 1 : 2, paddingRight: 1, children: _jsx(Text, { color: theme.success, bold: true, wrap: "truncate", children: "\u2728 Update ready \u00B7 restart to apply" }) }))] }))] })] })) }));
 }
 function formatRepoMapCommandOutput(enabled, markdown, refreshed) {
     const status = enabled ? "on" : "off";