@xingjisoft/neutrino 0.1.7 → 0.2.0

package/dist/screens/chat.js

@@ -1,13 +1,16 @@
 import { Screen } from "../terminal/screen.js";
 import { C } from "../colors.js";
-import { findModel, contextCompressionThreshold, loadConfig, normalizeApprovalMode, loadPrompt, saveSession, } from "../config.js";
+import { findModel, contextCompressionThreshold, loadConfig, loadPlannerPrompt, loadStepPrompt, loadSubAgentPrompt, normalizeApprovalMode, planFirstEnabled, loadPrompt, saveSession, } from "../config.js";
 import { drawHeader } from "../header.js";
 import { computeInputWindow, cursorFromColumn, drawInputBox, drawScrollbar, wrapText, approvalToggle, drawApprovalToggle, inRect } from "../ui.js";
 import { drawSpans, renderMarkdownText } from "../markdown.js";
 import { ellipsize, displayWidth } from "../width.js";
 import { sanitizeText } from "../sanitize.js";
 import { LLMClient, describeError } from "../llm/client.js";
-import { executeTool, getToolDefinitions } from "../llm/tools.js";
+import { formatDelay } from "../llm/retry.js";
+import { advancePlan, buildPlannerInput, lastRequestText, parsePlan, planCardRows, planMessage, planRowsWidth, planTranscript, renderStepDirective, resumePlan, stopPlan, } from "../llm/plan.js";
+import { DELEGATE_TOOL, executeTool, getSubAgentToolDefinitions, getToolDefinitions } from "../llm/tools.js";
+import { buildSubAgentTask, formatSubAgentResult, runSubAgent as runSubAgentTask, } from "../llm/subagent.js";
 import { assessToolCall } from "../llm/risk.js";
 import { ApprovalGate, captureApprovalContext, describeApprovalIntent, statedReason } from "../llm/approval.js";
 import { COMPACT_KEEP, COMPACT_MAX_CHARS_PER_MESSAGE, planCompaction, transcriptFor, modelHistory, normalizeContext, } from "../compact.js";
@@ -15,6 +18,8 @@ import { hub, liveApprovalDetails } from "../web/hub.js";
 import { SessionCheckpoint } from "../persistence.js";
 import { writeCrashLog } from "../terminal/restore.js";
 const TOOLS = getToolDefinitions();
+/** A sub-agent gets the same tools minus delegation: one level, never a tree. */
+const SUB_AGENT_TOOLS = getSubAgentToolDefinitions();
 /**
  * A finished turn folds its *work* away — the prompt body, the thinking and the
  * tool calls — and never its final reply, which always stays on screen. Doing
@@ -36,6 +41,32 @@ function parseArgs(s) {
         return {};
     }
 }
+/**
+ * How each kind of info-card row is drawn.
+ *
+ * The three step states are deliberately distinct: the step being worked on is a
+ * lit bar, steps still to come are normal text, and finished steps recede into
+ * the dark so the eye lands on what is happening now.
+ */
+function planRowStyle(kind) {
+    switch (kind) {
+        case "header":
+            return { fg: C.accent, bg: C.black, bold: true };
+        case "step-active":
+            return { fg: C.accent, bg: C.highlightBg, bold: true };
+        case "step-done":
+            return { fg: C.dim, bg: C.black };
+        case "step-pending":
+            return { fg: C.assistant, bg: C.black };
+        case "step-failed":
+            return { fg: C.red, bg: C.black, bold: true };
+        case "connector":
+        case "more":
+            return { fg: C.dim, bg: C.black };
+        default:
+            return { fg: C.assistant, bg: C.black };
+    }
+}
 export class ChatScreen extends Screen {
     initialMessage;
     loadedMessages = null;
@@ -47,15 +78,25 @@ export class ChatScreen extends Screen {
     loadedTokens = null;
     loadedContext = null;
     loadedApprovalMode = null;
+    loadedPlan = null;
     approvalMode = "request";
     modelProvider = "DeepSeek";
     model = { name: "deepseek-chat", url: "https://api.deepseek.com/v1", api_key: "", supports_streaming: true };
     intensity = "High";
     tokens = { prompt: 0, completion: 0 };
     showInfo = false;
+    // ---- plan-first turns ----
+    /** The plan of the turn being worked on, or the last one. */
+    plan = null;
+    /** True while the planner agent is writing the steps. */
+    planning = false;
+    /** What the sub-agent is doing, or null when none is running. */
+    subagent = null;
     messages = [];
     streamingContent = null;
     saveError = null;
+    /** Why a busy turn is silent: a transient network failure being retried. */
+    retryNotice = null;
     checkpoint = new SessionCheckpoint(() => {
         const saved = this.writeSession();
         this.publishLive();
@@ -146,6 +187,7 @@ export class ChatScreen extends Screen {
         // Everything already on disk was answered, so history opens compact.
         for (const start of this.userMessageIndexes())
             this.finishedTurns.add(start);
+        this.plan = resumePlan(this.loadedPlan);
         this.context = normalizeContext(this.loadedContext, this.messages.filter((m) => m.role !== "system").length);
         this.liveDir = this.loadedCwd ?? process.cwd();
         this.checkpoint.register();
@@ -209,6 +251,7 @@ export class ChatScreen extends Screen {
             compressing: this.compressing,
             saveError: this.saveError,
             tokens: { prompt: this.tokens.prompt, completion: this.tokens.completion },
+            subagent: this.subagent,
             approval: this.pendingApproval
                 ? liveApprovalDetails(this.pendingApproval.tool, this.pendingApproval.args, this.pendingApproval.risk, this.liveDir)
                 : null,
@@ -237,6 +280,7 @@ export class ChatScreen extends Screen {
             messages,
             streamingContent: this.streamingContent,
             context: this.context,
+            plan: this.plan,
         };
     }
     livePause() {
@@ -250,6 +294,7 @@ export class ChatScreen extends Screen {
         this.busy = false;
         this.app.state.isThinking = false;
         this.retainStreamingContent();
+        this.haltPlan();
         this.save();
         this.app.render();
         this.publishLive();
@@ -346,6 +391,12 @@ export class ChatScreen extends Screen {
                 this.settleApproval(false);
             return;
         }
+        // The card is the plan: Ctrl+P shows it even when the pointer is elsewhere.
+        if (key.ctrl && key.name === "p") {
+            this.showInfo = !this.showInfo;
+            this.app.render();
+            return;
+        }
         if (this.showInfo) {
             this.showInfo = false;
             this.app.render();
@@ -452,6 +503,9 @@ export class ChatScreen extends Screen {
             this.sessionId = null;
             this.context = null;
             this.expandedContext = false;
+            this.plan = null;
+            this.planning = false;
+            this.subagent = null;
             const sysText = this.messages[0] && this.messages[0].role === "system" ? this.messages[0].content : "";
             this.messages = [{ role: "system", content: sysText }];
             this.expandedTools.clear();
@@ -585,6 +639,8 @@ export class ChatScreen extends Screen {
             this.busy = false;
             this.app.state.isThinking = false;
             this.retainStreamingContent();
+            // The loop that ran the plan is gone with the paused turn.
+            this.haltPlan();
             this.save();
         }
         this.app.render();
@@ -597,6 +653,139 @@ export class ChatScreen extends Screen {
             this.startTurn();
         }
     }
+    // ---- plan-first turns -------------------------------------------------
+    /**
+     * Run the planner agent over the current request.
+     *
+     * Returns null rather than throwing in every case where there is no usable
+     * plan — planning switched off, a one-step request, a provider that fails, an
+     * answer that is not a plan. The turn then runs exactly as it did before
+     * plan-first existed; a plan is an improvement, never a new way to fail.
+     */
+    async makePlan(token) {
+        if (!planFirstEnabled())
+            return null;
+        const request = lastRequestText(this.messages);
+        if (!request.trim())
+            return null;
+        this.planning = true;
+        this.app.render();
+        this.publishLive();
+        try {
+            const client = new LLMClient(this.model, this.modelProvider, this.intensity);
+            const answer = await client.complete(loadPlannerPrompt(), buildPlannerInput({ request, cwd: this.liveDir, transcript: planTranscript(this.messages) }), {
+                onRetry: (notice) => {
+                    this.retryNotice =
+                        `Planning — network hiccup, retrying in ${formatDelay(notice.delayMs)} ` +
+                            `(attempt ${notice.attempt}/${notice.attempts})`;
+                    this.app.render();
+                },
+                cancelled: () => token !== this.turnToken || this.paused,
+            });
+            if (client.usage) {
+                this.tokens.prompt += client.usage.prompt;
+                this.tokens.completion += client.usage.completion;
+                this.lastPromptTokens = client.usage.prompt;
+            }
+            if (token !== this.turnToken)
+                return null;
+            return parsePlan(answer);
+        }
+        catch {
+            return null;
+        }
+        finally {
+            this.planning = false;
+            this.retryNotice = null;
+            if (token === this.turnToken) {
+                this.app.render();
+                this.publishLive();
+            }
+        }
+    }
+    /** Move the plan to one step and show it: the card follows every transition. */
+    setStep(index, status) {
+        if (!advancePlan(this.plan, index, status))
+            return;
+        this.save();
+        this.publishLive();
+        this.app.render();
+    }
+    /** A turn that can no longer continue must not leave a step looking alive. */
+    haltPlan() {
+        stopPlan(this.plan);
+    }
+    /**
+     * One user turn.
+     *
+     * A planned turn is answered in two passes: the planner writes the steps, then
+     * the worker executes them one at a time, top to bottom, each with the whole
+     * plan in its system prompt and the instruction to do only its own step. That
+     * keeps the work of a long request explicit — the card shows exactly which
+     * step is running and which are done — and keeps every step verifiable on its
+     * own. Without a plan the turn runs in one pass, as before.
+     */
+    async runTurn(token, turnMessages, approvalContext) {
+        // Shrink the history before building the request when it has outgrown the
+        // configured budget.
+        await this.autoCompress(token);
+        if (token !== this.turnToken)
+            return;
+        const plan = await this.makePlan(token);
+        if (token !== this.turnToken)
+            return;
+        if (plan) {
+            this.plan = plan;
+            // The plan is an ordinary assistant message: it is saved, folded, replayed
+            // and sent back to the model exactly like any other answer, so later turns
+            // (and the user) still know what was agreed.
+            this.messages.push({ role: "assistant", content: planMessage(plan) });
+            // Opening the card is the point of planning: the steps were asked for up
+            // front, so they are shown up front. A click or Esc closes it again.
+            this.showInfo = true;
+            this.save();
+            this.publishLive();
+            this.app.render();
+            const template = loadStepPrompt();
+            for (let i = 0; i < plan.steps.length; i++) {
+                if (token !== this.turnToken)
+                    return;
+                this.setStep(i, "active");
+                const directive = renderStepDirective(template, plan, i);
+                const finished = await this.agentLoop(this.buildApiMessages(this.turnView(turnMessages), directive), token, approvalContext);
+                if (token !== this.turnToken)
+                    return;
+                this.setStep(i, finished ? "done" : "failed");
+                // A step that failed stops the plan: the remaining steps assumed this one
+                // succeeded, and the user has to see the failure before anything runs on
+                // top of it.
+                if (!finished)
+                    break;
+            }
+        }
+        else {
+            await this.agentLoop(this.buildApiMessages(this.turnView(turnMessages)), token, approvalContext);
+            if (token !== this.turnToken)
+                return;
+        }
+        this.onTurnFinished();
+    }
+    /**
+     * The transcript this turn may see: the messages it started with plus what it
+     * has added since — the plan message, replies, tool calls and results.
+     *
+     * A user message that arrives while the turn runs is queued for the *next*
+     * turn, so it is deliberately not part of this one: the model and the approval
+     * reviewers must always judge the same request.
+     */
+    turnView(snapshot) {
+        const view = snapshot.slice();
+        for (let i = snapshot.length; i < this.messages.length; i++) {
+            if (this.messages[i].role !== "user")
+                view.push(this.messages[i]);
+        }
+        return view;
+    }
     send(text) {
         const trimmed = text.trim();
         if (!trimmed)
@@ -633,15 +822,7 @@ export class ChatScreen extends Screen {
         this.streamingContent = "";
         this.app.render();
         this.publishLive();
-        void (async () => {
-            // Shrink the history before building the request when it has outgrown the
-            // configured budget.
-            await this.autoCompress(token);
-            if (token !== this.turnToken)
-                return;
-            const apiMessages = this.buildApiMessages(turnMessages);
-            await this.agentLoop(apiMessages, token, approvalContext);
-        })().catch((err) => {
+        void this.runTurn(token, turnMessages, approvalContext).catch((err) => {
             if (token === this.turnToken)
                 this.failTurn(err);
         });
@@ -658,6 +839,10 @@ export class ChatScreen extends Screen {
         this.retainStreamingContent();
         this.messages.push({ role: "assistant", content: `[Error: ${describeError(err)}]` });
         this.streamingContent = null;
+        // The turn died outside the loop, so the step it was on never reported back.
+        const active = this.plan?.steps.findIndex((step) => step.status === "active") ?? -1;
+        if (active >= 0)
+            advancePlan(this.plan, active, "failed");
         try {
             this.onTurnFinished();
         }
@@ -674,8 +859,11 @@ export class ChatScreen extends Screen {
             }
         }
     }
-    buildApiMessages(messages = this.messages) {
-        const api = [{ role: "system", content: loadPrompt() }];
+    buildApiMessages(messages = this.messages, directive = "") {
+        // A step directive extends the system prompt rather than adding a user
+        // message: the plan is an instruction, not something the user just said.
+        const system = directive ? `${loadPrompt()}\n\n${directive}` : loadPrompt();
+        const api = [{ role: "system", content: system }];
         for (const m of modelHistory(messages, this.context)) {
             if (m.role === "user" || m.role === "assistant") {
                 api.push({ role: m.role, content: m.content });
@@ -687,11 +875,19 @@ export class ChatScreen extends Screen {
         }
         return api;
     }
+    /**
+     * One agent conversation: request, tool calls, request again, until the model
+     * answers without asking for a tool.
+     *
+     * Returns true when the model finished on its own and false when the turn was
+     * cut short (paused, superseded, or failed). The caller owns the turn's end,
+     * because a planned turn runs this once per step.
+     */
     async agentLoop(apiMessages, token, approvalContext) {
         try {
             while (true) {
                 if (token !== this.turnToken)
-                    return;
+                    return false;
                 // Keep the payload inside budget during a long single turn: once the
                 // context is too large, drop the body of older tool results.
                 apiMessages = this.trimApiMessages(apiMessages);
@@ -699,7 +895,19 @@ export class ChatScreen extends Screen {
                 let content = "";
                 let hasContent = false;
                 let aborted = false;
-                for await (const chunk of client.streamTurn(apiMessages, TOOLS)) {
+                for await (const chunk of client.streamTurn(apiMessages, TOOLS, {
+                    // A retried request can go quiet for up to 160s, so the status line
+                    // says why instead of looking hung. The moment the user pauses or a
+                    // newer turn takes over, the backoff is dropped instead of waited out.
+                    onRetry: (notice) => {
+                        this.retryNotice =
+                            `Network hiccup — retrying in ${formatDelay(notice.delayMs)} ` +
+                                `(attempt ${notice.attempt}/${notice.attempts}): ${notice.reason}`;
+                        this.app.render();
+                    },
+                    cancelled: () => token !== this.turnToken || this.paused,
+                })) {
+                    this.retryNotice = null;
                     if (token !== this.turnToken || this.paused) {
                         aborted = true;
                         break;
@@ -711,10 +919,11 @@ export class ChatScreen extends Screen {
                     this.app.render();
                     this.publishLive();
                 }
+                this.retryNotice = null;
                 if (token !== this.turnToken) {
                     // Pause already retained the partial reply. A stale stream must not
                     // overwrite the buffer belonging to a newer turn.
-                    return;
+                    return false;
                 }
                 if (client.usage) {
                     this.tokens.prompt += client.usage.prompt;
@@ -729,8 +938,7 @@ export class ChatScreen extends Screen {
                         this.messages.push({ role: "assistant", content });
                     this.streamingContent = null;
                     this.app.render();
-                    this.onTurnFinished(false);
-                    return;
+                    return false;
                 }
                 const toolCalls = client.toolCalls;
                 if (toolCalls.length === 0) {
@@ -754,7 +962,7 @@ export class ChatScreen extends Screen {
                 });
                 for (const tc of toolCalls) {
                     if (token !== this.turnToken || this.paused)
-                        return;
+                        return false;
                     const args = parseArgs(tc.arguments);
                     const toolMsg = { role: "tool", name: tc.name, arguments: args, result: "" };
                     this.messages.push(toolMsg);
@@ -768,7 +976,7 @@ export class ChatScreen extends Screen {
                         context: captureApprovalContext(apiMessages).context,
                     });
                     if (token !== this.turnToken || this.paused)
-                        return;
+                        return false;
                     if (decision.source !== "prompt" && decision.source !== "input") {
                         this.approvals.set(toolMsg, decision);
                     }
@@ -787,28 +995,28 @@ export class ChatScreen extends Screen {
                         this.app.render();
                         continue;
                     }
-                    const result = await executeTool(tc.name, args, this.liveDir);
+                    const result = await this.runTool(tc.name, args, toolMsg, token, apiMessages, approvalContext);
                     // A clear starts a different transcript while an old tool may finish.
                     if (!this.messages.includes(toolMsg))
-                        return;
+                        return false;
                     toolMsg.result = result;
                     this.save();
                     if (token !== this.turnToken || this.paused)
-                        return;
+                        return false;
                     apiMessages.push({ role: "tool", tool_call_id: tc.id, content: result });
                     this.publishLive();
                     this.app.render();
                 }
             }
-            this.onTurnFinished();
+            return true;
         }
         catch (e) {
             if (token !== this.turnToken)
-                return;
+                return false;
             const err = describeError(e);
             this.messages.push({ role: "assistant", content: (this.streamingContent ?? "") + `\n[Error: ${err}]` });
             this.streamingContent = null;
-            this.onTurnFinished();
+            return false;
         }
     }
     /**
@@ -871,6 +1079,10 @@ export class ChatScreen extends Screen {
         return new Promise((resolve) => {
             this.pendingApproval = { tool, args, risk, resolve };
             this.app.state.approval = { tool, level: risk.level };
+            // The card floats over the same corner the approval card needs on a short
+            // terminal, and a decision the user cannot see is not a decision. The plan
+            // stays open one click away.
+            this.showInfo = false;
             this.app.bell?.("approval");
             this.app.render();
             this.publishLive();
@@ -949,6 +1161,69 @@ export class ChatScreen extends Screen {
             deny: { x: denyX, y: by, w: deny.length },
         };
     }
+    // ---- sub-agents ------------------------------------------------------
+    /**
+     * Run one approved tool call. `delegate` is handled here rather than inside
+     * tools.ts: a sub-agent has to share this turn's model, approval gate, working
+     * directory and abort signal, and only the session knows about those.
+     */
+    async runTool(name, args, toolMsg, token, apiMessages, approvalContext) {
+        if (name !== DELEGATE_TOOL)
+            return executeTool(name, args, this.liveDir);
+        return this.delegate(args, toolMsg, token, apiMessages, approvalContext);
+    }
+    /**
+     * Run a sub-agent for one `delegate` call and return its report.
+     *
+     * The child gets its own conversation, the parent's tools (minus delegation)
+     * and the parent's approval gate; what it does in between is deliberately not
+     * part of this transcript. While it runs, its current phase is shown in the
+     * status line and in the tool block, so a quiet log still has an explanation.
+     */
+    async delegate(args, toolMsg, token, apiMessages, approvalContext) {
+        const task = String(args.task ?? "").trim();
+        if (!task)
+            return "[Error: delegate needs a task: what should the sub-agent do?]";
+        const context = typeof args.context === "string" ? args.context.trim() : "";
+        const approval = { ...approvalContext, context: captureApprovalContext(apiMessages).context };
+        const run = await runSubAgentTask({
+            createClient: () => new LLMClient(this.model, this.modelProvider, this.intensity),
+            system: loadSubAgentPrompt(),
+            task: buildSubAgentTask({ task, context, cwd: this.liveDir }),
+            tools: SUB_AGENT_TOOLS,
+            approve: (name, callArgs) => this.requestApproval(name, callArgs, approval),
+            execute: (name, callArgs) => name === DELEGATE_TOOL
+                ? Promise.resolve("[Error: sub-agents cannot delegate further]")
+                : executeTool(name, callArgs, this.liveDir),
+            onProgress: (label) => {
+                this.subagent = label;
+                // The tool block is what a reader of the transcript sees while the child
+                // works; the status line says the same thing at the top of the screen.
+                toolMsg.result = `… ${label}`;
+                this.app.render();
+                this.publishLive();
+            },
+            onUsage: (usage) => {
+                this.tokens.prompt += usage.prompt;
+                this.tokens.completion += usage.completion;
+            },
+            onRetry: (notice) => {
+                this.retryNotice =
+                    `Sub-agent — network hiccup, retrying in ${formatDelay(notice.delayMs)} ` +
+                        `(attempt ${notice.attempt}/${notice.attempts})`;
+                this.app.render();
+            },
+            cancelled: () => token !== this.turnToken || this.paused,
+        });
+        // The final report replaces the live marker, and the status line goes back
+        // to the parent's own state.
+        this.subagent = null;
+        this.retryNotice = null;
+        toolMsg.result = "";
+        this.app.render();
+        this.publishLive();
+        return formatSubAgentResult(run);
+    }
     // ---- turn folding ----------------------------------------------------
     /** First message index of every turn: a turn starts at a user message and
      *  ends where the next one begins. */
@@ -1129,7 +1404,7 @@ export class ChatScreen extends Screen {
         const snapshotLen = this.messages.length;
         let summary = "";
         try {
-            summary = await this.summarizeTranscript(transcript);
+            summary = await this.summarizeTranscript(transcript, () => token !== this.turnToken);
         }
         catch {
             summary = "";
@@ -1157,9 +1432,11 @@ export class ChatScreen extends Screen {
      * Summarise a transcript produced by `transcriptFor`. Split out so tests can
      * stub it without touching the network.
      */
-    async summarizeTranscript(transcript) {
+    async summarizeTranscript(transcript, cancelled) {
         const client = new LLMClient(this.model, this.modelProvider, this.intensity);
-        const text = await client.summarize(transcript);
+        // Compression runs before the turn proper: a pause or a newer message must
+        // be able to abandon it instead of waiting out the retry backoff.
+        const text = await client.summarize(transcript, { cancelled });
         if (client.usage) {
             this.tokens.prompt += client.usage.prompt;
             this.tokens.completion += client.usage.completion;
@@ -1217,7 +1494,7 @@ export class ChatScreen extends Screen {
         if (chatMessages.length === 0)
             return true;
         try {
-            this.sessionId = saveSession(chatMessages, this.model.name, this.modelProvider, this.intensity, this.liveDir, this.sessionId ?? undefined, this.tokens, this.context, this.approvalMode);
+            this.sessionId = saveSession(chatMessages, this.model.name, this.modelProvider, this.intensity, this.liveDir, this.sessionId ?? undefined, this.tokens, this.context, this.approvalMode, this.plan);
             this.saveError = null;
             return true;
         }
@@ -1311,7 +1588,9 @@ export class ChatScreen extends Screen {
                 // Header + the command/path always show; the (often huge) output body is
                 // collapsed by default and toggled by clicking the block.
                 add({ spans: [{ text: `⚙ ${m.name}`, style: { fg: C.toolHeader, bold: true } }] }, mi);
-                const argText = sanitizeText(m.arguments.command ?? m.arguments.path ?? "", { singleLine: true });
+                // The line under the tool name is the call's own material: a command, a
+                // path, or — for `delegate` — the task handed to the sub-agent.
+                const argText = sanitizeText(m.arguments.command ?? m.arguments.path ?? m.arguments.task ?? "", { singleLine: true });
                 if (argText)
                     add({ spans: [{ text: "  " + argText, style: { fg: C.dim } }] }, mi);
                 const decision = this.approvals.get(m);
@@ -1368,6 +1647,10 @@ export class ChatScreen extends Screen {
             status = "Compressing context…";
             statusStyle = { fg: C.amber, bold: true };
         }
+        else if (this.planning) {
+            status = "Planning the steps…";
+            statusStyle = { fg: C.accent, bold: true };
+        }
         else if (this.queued) {
             status = "Will send when paused or idle...";
             statusStyle = { fg: C.amber };
@@ -1376,6 +1659,14 @@ export class ChatScreen extends Screen {
             status = "PAUSED — press ESC ESC to resume";
             statusStyle = { fg: C.amber, bold: true };
         }
+        else if (this.retryNotice) {
+            status = this.retryNotice;
+            statusStyle = { fg: C.amber, bold: true };
+        }
+        else if (this.subagent) {
+            status = `Sub-agent — ${this.subagent}`;
+            statusStyle = { fg: C.green, bold: true };
+        }
         else if (this.busy) {
             status = "Streaming... press Ctrl+C or ESC ESC to pause";
             statusStyle = { fg: C.dim };
@@ -1437,7 +1728,7 @@ export class ChatScreen extends Screen {
             placeholder: "Type a message...",
         });
         const hintY = h - 1;
-        const hints = "Enter send · Ctrl+C pause · ESC ESC pause · Ctrl+A approval · Ctrl+B menu · Ctrl+L clear · drag to copy";
+        const hints = "Enter send · Ctrl+P plan · Ctrl+C pause · ESC ESC pause · Ctrl+A approval · Ctrl+B menu · Ctrl+L clear · drag to copy";
         const hintW = displayWidth(hints);
         const hintX = Math.max(0, w - 1 - hintW);
         const pathAvail = Math.max(0, hintX - 2);
@@ -1447,30 +1738,57 @@ export class ChatScreen extends Screen {
     }
     renderInfoOverlay(buf) {
         const w = buf.width;
-        buf.set(w - 2, 0, "ⓘ", { fg: C.accent, bg: C.highlightBg, bold: true });
+        const h = buf.height;
+        // A plan in flight tints the corner marker, so the card stays findable once
+        // the user has closed it.
+        const running = this.plan?.steps.some((step) => step.status === "active") ?? false;
+        buf.set(w - 2, 0, "ⓘ", running
+            ? { fg: C.black, bg: C.accent, bold: true }
+            : { fg: C.accent, bg: C.highlightBg, bold: true });
         if (!this.showInfo)
             return;
-        const total = this.tokens.prompt + this.tokens.completion;
-        const lines = [
-            "Tokens",
-            `Prompt: ${this.tokens.prompt}`,
-            `Completion: ${this.tokens.completion}`,
-            `Total: ${total}`,
-        ];
-        let contentW = 8;
-        for (const l of lines)
-            contentW = Math.max(contentW, displayWidth(l));
-        let boxW = contentW + 4;
-        if (boxW > w - 2)
-            boxW = Math.max(6, w - 2);
-        const boxX = w - 1 - boxW;
+        // The card floats in the top-right corner of the log. It is never wider than
+        // the conversation and never taller than the space above the input box, so a
+        // long step title or a short terminal cannot push it over the composer.
+        const contentW = Math.max(18, Math.min(56, w - 6));
+        const maxRows = Math.max(1, h - 8);
+        const rows = this.infoCardRows(contentW, maxRows);
+        const boxW = Math.min(Math.max(6, w - 2), Math.max(14, planRowsWidth(rows) + 4));
+        const boxH = Math.min(rows.length + 2, Math.max(3, h - 6));
+        const boxX = Math.max(0, w - 1 - boxW);
         const boxY = 1;
-        const boxH = lines.length + 2;
         buf.fillRect(boxX, boxY, boxW, boxH, { bg: C.black });
         buf.drawBox(boxX, boxY, boxW, boxH, { fg: C.accent });
-        for (let i = 0; i < lines.length; i++) {
-            const style = i === 0 ? { fg: C.accent, bg: C.black, bold: true } : { fg: C.assistant, bg: C.black };
-            buf.writeText(boxX + 2, boxY + 1 + i, lines[i].slice(0, boxW - 4), style);
+        for (let i = 0; i < rows.length; i++) {
+            const y = boxY + 1 + i;
+            if (y >= boxY + boxH - 1)
+                break;
+            if (rows[i].kind === "step-active") {
+                // The running step is a full-width bar rather than coloured text: it is
+                // the one row the reader should find without reading the list.
+                buf.fillRect(boxX + 1, y, boxW - 2, 1, { bg: C.highlightBg });
+            }
+            buf.writeText(boxX + 2, y, ellipsize(rows[i].text, Math.max(1, boxW - 4)), planRowStyle(rows[i].kind));
         }
     }
+    /**
+     * What the card shows: the plan as a vertical timeline, then the token counts.
+     * Without a plan it is exactly the token card it has always been. One row is
+     * kept for the counts, so a long plan cannot push them out of the card.
+     */
+    infoCardRows(width, maxRows) {
+        const plan = this.plan;
+        if (!plan) {
+            const total = this.tokens.prompt + this.tokens.completion;
+            return [
+                { kind: "header", text: "Tokens" },
+                { kind: "line", text: `Prompt: ${this.tokens.prompt}` },
+                { kind: "line", text: `Completion: ${this.tokens.completion}` },
+                { kind: "line", text: `Total: ${total}` },
+            ];
+        }
+        const rows = planCardRows(plan, { width, maxRows: Math.max(1, maxRows - 1) });
+        rows.push({ kind: "line", text: `Tokens ${this.tokens.prompt} → ${this.tokens.completion}` });
+        return rows;
+    }
 }