@bastani/atomic 0.8.4 → 0.8.5-0

package/dist/builtin/workflows/src/tui/stage-chat-view.ts

@@ -19,13 +19,15 @@
  *  - **Running** stage with a live stream: Enter calls `handle.steer(text)`
  *    (interrupt mid-turn). Ctrl+F always queues a follow-up via
  *    `handle.followUp(text)`.
- *  - **Ctrl+P** calls `handle.pause()`; while paused, Enter calls
- *    `handle.resume(text)`.
- *  - **Ctrl+D** detaches (back to graph); **Escape** closes the popup.
+ *  - **Escape** mirrors the main coding-agent chat interrupt path for active
+ *    live stages: it requests a controlled pause/abort while keeping the
+ *    composer active. While paused, Enter calls `handle.resume(text)`.
+ *  - **Ctrl+D** detaches (back to graph); **Escape** closes the popup when idle.
  *  - **Blocked** stage: keystrokes absorbed; BLOCKED banner names the
  *    upstream awaiter.
- *  - **Settled** stage (no handle, completed/failed): editor renders in a
- *    disabled visual state and the hint strip collapses to back/close.
+ *  - **Settled** stage with a live handle remains a normal chat session:
+ *    Enter sends `handle.prompt(text)` and Escape interrupts any active
+ *    post-stage response without mutating workflow dependencies.
  *
  * cross-ref:
  *  - ui/stage-chat-mockup.html (canonical visual)
@@ -39,25 +41,34 @@
 import {
   ChatTranscriptComponent,
   CustomEditor,
+  FooterComponent,
   ScrollableComponentViewport,
   SessionManager,
   LiveChatEntriesController,
-  chatEntriesFromAgentMessages,
+  UsageMeterComponent,
+  WorkingStatusComponent,
+  pickWhimsicalWorkingMessage,
   renderChatMessageEntry,
   type AgentSession,
   type AgentSessionEvent,
   type ChatMessageEntry,
   type ChatMessageRenderOptions,
-  type ChatTranscriptRole,
+  type ReadonlyFooterDataProvider,
 } from "@bastani/atomic";
-import { Box, Container, Spacer, Text } from "@earendil-works/pi-tui";
-import type { Component, EditorComponent, EditorTheme, TUI } from "@earendil-works/pi-tui";
+import { Box, Spacer, Text } from "@earendil-works/pi-tui";
+import type {
+  Component,
+  EditorComponent,
+  EditorTheme,
+  Focusable,
+  TUI,
+} from "@earendil-works/pi-tui";
 import type { Store } from "../shared/store.js";
 import type { StageNotice, StageSnapshot } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import type { StageControlHandle } from "../runs/foreground/stage-control-registry.js";
 import { BOLD, RESET, hexBg, hexToAnsi, lerpColor } from "./color-utils.js";
-import { truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { matchesKey, truncateToWidth, visibleWidth } from "./text-helpers.js";
 
 // ---------------------------------------------------------------------------
 // Options & types
@@ -85,13 +96,21 @@ export interface StageChatViewOpts {
   piTui?: TUI;
   piKeybindings?: unknown;
   /** Currently installed host editor factory, inherited from extension `ctx.ui.setEditorComponent()`. */
-  piEditorFactory?: (tui: TUI, theme: EditorTheme, keybindings: unknown) => EditorComponent;
+  piEditorFactory?: (
+    tui: TUI,
+    theme: EditorTheme,
+    keybindings: unknown,
+  ) => EditorComponent;
   /** Parent chat rendering settings and extension renderers inherited from the host UI. */
-  getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">> | undefined;
+  getChatRenderSettings?: () =>
+    | Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">>
+    | undefined;
+  /** Parent footer data provider inherited from the host UI for core footer/usage rendering. */
+  footerData?: ReadonlyFooterDataProvider;
   /**
    * Optional accessor returning the current terminal row count. The chat
    * surface expands its body band to roughly `viewportRows` minus the fixed
-   * header / loader / editor / footer / hint rows so the popup fills the
+   * header / loader / editor / footer rows so the popup fills the
    * terminal under pi-tui's `width: "100%" / maxHeight: "100%"` geometry.
    * Returning `undefined` falls back to the constant 32-row frame.
    */
@@ -103,46 +122,16 @@ export interface StageChatViewOpts {
  * that read `_transcript` (tests, future serialisers) can recover the
  * canonical user-visible string without knowing about the Pi-box payload.
  */
-interface BaseEntry {
-  readonly role: ChatTranscriptRole;
-  readonly text: string;
-}
-interface UserEntry extends BaseEntry {
-  readonly role: "user";
-}
-interface AssistantEntry extends BaseEntry {
-  readonly role: "assistant";
-}
-interface ThinkingEntry extends BaseEntry {
-  readonly role: "thinking";
-}
-interface SystemEntry extends BaseEntry {
-  readonly role: "system";
-}
-interface ToolEntry extends BaseEntry {
-  readonly role: "tool";
-  readonly name: string;
-  readonly toolCallId?: string;
-  readonly args?: string;
-  readonly output?: string;
-  readonly state: "pending" | "success" | "error";
-}
-interface NoticeEntry extends BaseEntry {
+interface NoticeEntry {
   readonly role: "notice";
+  readonly text: string;
   readonly noticeId: string;
   readonly kind: StageNotice["kind"];
   readonly value: string;
   readonly from?: string;
   readonly meta?: string;
 }
-type TranscriptEntry =
-  | UserEntry
-  | AssistantEntry
-  | ThinkingEntry
-  | SystemEntry
-  | ToolEntry
-  | NoticeEntry
-  | ChatMessageEntry;
+type TranscriptEntry = NoticeEntry | ChatMessageEntry;
 type AgentSnapshotMessage = AgentSession["messages"][number];
 
 // ---------------------------------------------------------------------------
@@ -160,15 +149,13 @@ const VIEW_LINE_COUNT = 32;
 const HEADER_ROWS = 1;
 /** Single dim rule between header and body. */
 const SEP_ROWS = 1;
-/** Footer: two dim lines. */
-const FOOTER_ROWS = 2;
-/** Hint strip: dashed rule + key bindings line. */
-const HINTS_ROWS = 2;
-
 /** Spinner glyphs — Braille spinner at 80ms per frame. */
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 /** Pi's Loader advances at 80ms; use the same cadence for embedded stage chats. */
 const ANIMATION_FRAME_MS = 80;
+const STREAMING_RENDER_THROTTLE_MS = 80;
+const STREAMING_TEXT_TAIL_LINES = 240;
+const STREAMING_TEXT_TAIL_CHARS = 16_000;
 
 const ITALIC = "\x1b[3m";
 const FG_RESET = "\x1b[39m";
@@ -179,7 +166,8 @@ const ITALIC_RESET = "\x1b[23m";
 // StageChatView
 // ---------------------------------------------------------------------------
 
-export class StageChatView implements Component {
+export class StageChatView implements Component, Focusable {
+  focused = true;
   private store: Store;
   private theme: GraphTheme;
   private runId: string;
@@ -191,7 +179,10 @@ export class StageChatView implements Component {
   private requestRender: (() => void) | undefined;
   private getViewportRows?: () => number | undefined;
   private editor: EditorComponent | undefined;
-  private getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">> | undefined;
+  private getChatRenderSettings?: () =>
+    | Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">>
+    | undefined;
+  private footerData?: ReadonlyFooterDataProvider;
 
   private inputBuffer = "";
   private transcript: TranscriptEntry[] = [];
@@ -204,15 +195,14 @@ export class StageChatView implements Component {
   private attachedAt = Date.now();
   /** True after SDK `agent_start` until `agent_end`; mirrors Pi's working-loader lifecycle. */
   private sdkBusy = false;
-  /** Stable row pointers for the current streaming assistant message. */
-  private streamingAssistantIndex: number | undefined;
-  private streamingThinkingIndex: number | undefined;
-  /** Stable tool-call rows keyed exactly like Pi's `pendingTools` map. */
-  private toolEntryIndexes = new Map<string, number>();
+  /** Pi-style per-turn working message, populated from coding-agent's message picker. */
+  private workingMessage: string | undefined;
   /** User rows optimistically appended by this embedded editor, de-duped on SDK echo. */
   private optimisticUserSignatures = new Set<string>();
   /** Chat-mode repaint driver for Pi-style loaders/spinners. */
   private animationTimer: ReturnType<typeof setInterval> | undefined;
+  /** Coalesces high-frequency SDK deltas while the fixed overlay is streaming. */
+  private renderThrottleTimer: ReturnType<typeof setTimeout> | undefined;
   /** Scrollable fixed-height body viewport for attached chat history. */
   private bodyViewport = new ScrollableComponentViewport();
   private liveChat: LiveChatEntriesController;
@@ -232,8 +222,13 @@ export class StageChatView implements Component {
     this.requestRender = opts.requestRender;
     this.getViewportRows = opts.getViewportRows;
     this.getChatRenderSettings = opts.getChatRenderSettings;
+    this.footerData = opts.footerData;
     this.liveChat = new LiveChatEntriesController(this.transcript);
-    this.editor = this._createEditor(opts.piTui, opts.piKeybindings, opts.piEditorFactory);
+    this.editor = this._createEditor(
+      opts.piTui,
+      opts.piKeybindings,
+      opts.piEditorFactory,
+    );
 
     // Seed transcript from the live SDK session at attach time, plus any
     // stage notices the workflow body has already recorded.
@@ -264,7 +259,7 @@ export class StageChatView implements Component {
       this._unsubscribeHandle = this.handle.subscribe((event) => {
         const changed = this._appendEvent(event);
         this._syncAnimationTick();
-        if (changed) this.requestRender?.();
+        if (changed) this._requestEventRender();
       });
     }
     this._syncAnimationTick();
@@ -273,16 +268,28 @@ export class StageChatView implements Component {
   private _createEditor(
     tui: TUI | undefined,
     keybindings: unknown,
-    editorFactory: ((tui: TUI, theme: EditorTheme, keybindings: unknown) => EditorComponent) | undefined,
+    editorFactory:
+      | ((
+          tui: TUI,
+          theme: EditorTheme,
+          keybindings: unknown,
+        ) => EditorComponent)
+      | undefined,
   ): EditorComponent | undefined {
     if (!tui || !keybindings) return undefined;
     const editorTheme = editorThemeFromGraphTheme(this.theme);
-    const editor = this._createInheritedEditor(tui, editorTheme, keybindings, editorFactory) ??
+    const editor =
+      this._createInheritedEditor(
+        tui,
+        editorTheme,
+        keybindings,
+        editorFactory,
+      ) ??
       new CustomEditor(
         tui,
         editorTheme,
         keybindings as ConstructorParameters<typeof CustomEditor>[2],
-        { paddingX: 1, autocompleteMaxVisible: 5 },
+        { paddingX: 0, autocompleteMaxVisible: 5 },
       );
     editor.onChange = (text) => {
       this.inputBuffer = text;
@@ -297,7 +304,13 @@ export class StageChatView implements Component {
     tui: TUI,
     editorTheme: EditorTheme,
     keybindings: unknown,
-    editorFactory: ((tui: TUI, theme: EditorTheme, keybindings: unknown) => EditorComponent) | undefined,
+    editorFactory:
+      | ((
+          tui: TUI,
+          theme: EditorTheme,
+          keybindings: unknown,
+        ) => EditorComponent)
+      | undefined,
   ): EditorComponent | undefined {
     if (!editorFactory) return undefined;
     try {
@@ -316,14 +329,17 @@ export class StageChatView implements Component {
     this.liveChat.appendMessages(this.handle.messages);
   }
 
-  private _snapshotMessagesFromSessionFile(stage: StageSnapshot | undefined): void {
+  private _snapshotMessagesFromSessionFile(
+    stage: StageSnapshot | undefined,
+  ): void {
     if (this.transcript.length > 0) return;
     const sessionFile = this.handle?.sessionFile ?? stage?.sessionFile;
     if (sessionFile === undefined) return;
 
     let messages: readonly AgentSnapshotMessage[];
     try {
-      messages = SessionManager.open(sessionFile).buildSessionContext().messages as readonly AgentSnapshotMessage[];
+      messages = SessionManager.open(sessionFile).buildSessionContext()
+        .messages as readonly AgentSnapshotMessage[];
     } catch {
       return;
     }
@@ -339,103 +355,55 @@ export class StageChatView implements Component {
     if (type === "message_start") {
       const message = (event as { message?: unknown }).message;
       if (isUserMessageLike(message)) {
-        const signature = userMessageSignature(extractMessageText(message.content));
+        const signature = userMessageSignature(
+          extractMessageText(message.content),
+        );
         if (this.optimisticUserSignatures.delete(signature)) return false;
       }
     }
     if (isSharedLiveChatEvent(type)) {
-      return this.liveChat.applyEvent(event);
+      const changed = this.liveChat.applyEvent(event);
+      const toolCallEvent = assistantToolCallEvent(event);
+      const changedByToolCall = toolCallEvent !== undefined
+        ? this.liveChat.applyEvent(toolCallEvent)
+        : false;
+      return changed || changedByToolCall;
     }
     switch (type) {
       case "agent_start":
         this.sdkBusy = true;
-        this.toolEntryIndexes.clear();
         this.liveChat.clearPendingTools();
         this.statusMessage = "";
         return true;
 
       case "agent_end":
         this.sdkBusy = false;
-        this.streamingAssistantIndex = undefined;
-        this.streamingThinkingIndex = undefined;
+        this.workingMessage = undefined;
         this.liveChat.clearPendingTools();
         this.statusMessage = "";
         return true;
 
-      case "message_start":
-        return this._handleMessageStart((event as { message?: unknown }).message);
-
-      case "message_update":
-        return this._handleMessageUpdate(event);
-
-      case "message_end":
-        return this._handleMessageEnd((event as { message?: unknown }).message);
-
-      case "tool_execution_start": {
-        const payload = event as { toolCallId?: unknown; toolName?: unknown; args?: unknown };
-        const name = typeof payload.toolName === "string" ? payload.toolName : "tool";
-        const toolCallId = typeof payload.toolCallId === "string" ? payload.toolCallId : undefined;
-        const args = summariseArgs(payload.args);
-        this._upsertToolEntry({ toolCallId, name, args, state: "pending" });
-        return true;
-      }
-
-      case "tool_execution_update": {
-        const payload = event as { toolCallId?: unknown; toolName?: unknown; partialResult?: unknown };
-        const partialOutput = extractToolResultText(payload.partialResult);
-        if (!partialOutput) return false;
-        this._upsertToolEntry({
-          toolCallId: typeof payload.toolCallId === "string" ? payload.toolCallId : undefined,
-          name: typeof payload.toolName === "string" ? payload.toolName : "tool",
-          output: partialOutput,
-          state: "pending",
-        });
+      case "turn_start":
+        this.workingMessage = pickWhimsicalWorkingMessage();
         return true;
-      }
 
-      case "tool_execution_end": {
-        const payload = event as { toolCallId?: unknown; toolName?: unknown; result?: unknown; isError?: unknown };
-        const toolCallId = typeof payload.toolCallId === "string" ? payload.toolCallId : undefined;
-        const output = extractToolResultText(payload.result);
-        this._upsertToolEntry({
-          toolCallId,
-          name: typeof payload.toolName === "string" ? payload.toolName : "tool",
-          output,
-          state: payload.isError === true ? "error" : "success",
-        });
-        if (toolCallId) this.toolEntryIndexes.delete(toolCallId);
+      case "turn_end":
+        this.workingMessage = undefined;
         return true;
-      }
 
+      // Compatibility with older/headless shims that predate the SDK's
+      // tool_execution_* events. Project these shims into coding-agent's live
+      // controller rather than maintaining a second workflow tool renderer.
       case "tool_call":
-      case "tool_use": {
-        const name = String((event as { name?: unknown }).name ?? "tool");
-        const args = summariseArgs((event as { input?: unknown }).input);
-        this._upsertToolEntry({ name, args, state: "pending" });
-        return true;
-      }
+      case "tool_use":
+        return this.liveChat.applyEvent(legacyToolStartEvent(event));
 
-      case "tool_result": {
-        const name = String((event as { name?: unknown }).name ?? "tool");
-        const rawOutput = (event as { output?: unknown }).output;
-        const output = typeof rawOutput === "string" ? rawOutput : extractMessageText(rawOutput);
-        this._upsertToolEntry({
-          name,
-          output,
-          state: Boolean((event as { isError?: unknown }).isError) ? "error" : "success",
-        });
-        return true;
-      }
+      case "tool_result":
+        return this.liveChat.applyEvent(legacyToolResultEvent(event));
 
       case "thinking_delta":
-      case "thinking": {
-        const delta = String(
-          (event as { delta?: unknown }).delta ?? (event as { text?: unknown }).text ?? "",
-        );
-        if (!delta) return false;
-        this._appendTextDelta("thinking", delta);
-        return true;
-      }
+      case "thinking":
+        return this.liveChat.applyEvent(legacyThinkingEvent(event));
 
       case "compaction_start":
         this.sdkBusy = true;
@@ -461,115 +429,6 @@ export class StageChatView implements Component {
     }
   }
 
-  private _handleMessageStart(message: unknown): boolean {
-    if (!isMessageLike(message)) return false;
-    if (message.role === "assistant") {
-      this.streamingAssistantIndex = undefined;
-      this.streamingThinkingIndex = undefined;
-      return this._updateAssistantFromMessage(message);
-    }
-
-    const entry = transcriptEntryFromSnapshotMessage(message as AgentSnapshotMessage);
-    if (!entry) return false;
-    if (entry.role === "user") {
-      const signature = userMessageSignature(entry.text);
-      if (this.optimisticUserSignatures.delete(signature)) return false;
-    }
-    this.transcript.push(entry);
-    return true;
-  }
-
-  private _handleMessageUpdate(event: AgentSessionEvent): boolean {
-    const message = (event as { message?: unknown }).message;
-    const hasAssistantSnapshot = isMessageLike(message) && message.role === "assistant";
-    const snapshotHasPayload = hasAssistantSnapshot && assistantContentHasRenderablePayload(message.content);
-    let changed = false;
-    if (hasAssistantSnapshot) {
-      changed = this._updateAssistantFromMessage(message) || changed;
-    }
-
-    const assistantEvent = (event as { assistantMessageEvent?: { type?: unknown; delta?: unknown } }).assistantMessageEvent;
-    const streamType = String(assistantEvent?.type ?? "");
-    const delta = typeof assistantEvent?.delta === "string" ? assistantEvent.delta : "";
-    // Prefer Pi's full assistant message snapshot when it contains visible
-    // payload; use deltas only for delta-only SDK shims/events.
-    if (!changed && !snapshotHasPayload && streamType === "text_delta" && delta) {
-      this._appendTextDelta("assistant", delta);
-      changed = true;
-    } else if (!changed && !snapshotHasPayload && streamType === "thinking_delta" && delta) {
-      this._appendTextDelta("thinking", delta);
-      changed = true;
-    }
-
-    return changed;
-  }
-
-  private _handleMessageEnd(message: unknown): boolean {
-    let changed = false;
-    if (isMessageLike(message) && message.role === "assistant") {
-      changed = this._updateAssistantFromMessage(message) || changed;
-      for (const [toolCallId, index] of this.toolEntryIndexes.entries()) {
-        const entry = this.transcript[index];
-        if (isLocalToolEntry(entry) && entry.state === "pending") {
-          this.transcript[index] = { ...entry, text: entry.text };
-        }
-        this.toolEntryIndexes.set(toolCallId, index);
-      }
-    }
-    this.streamingAssistantIndex = undefined;
-    this.streamingThinkingIndex = undefined;
-    return changed || isMessageLike(message);
-  }
-
-  private _updateAssistantFromMessage(message: { role?: unknown; content?: unknown; stopReason?: unknown; errorMessage?: unknown }): boolean {
-    const projection = projectAssistantContent(message.content);
-    let changed = false;
-    if (projection.thinking) {
-      changed = this._upsertStreamingText("thinking", projection.thinking) || changed;
-    }
-    if (projection.text) {
-      changed = this._upsertStreamingText("assistant", projection.text) || changed;
-    }
-    const stopReason = typeof message.stopReason === "string" ? message.stopReason : "";
-    if (stopReason === "aborted" || stopReason === "error") {
-      const errorText = typeof message.errorMessage === "string" && message.errorMessage
-        ? message.errorMessage
-        : stopReason === "aborted"
-        ? "Operation aborted"
-        : "Unknown error";
-      changed = this._failPendingToolEntries(errorText) || changed;
-      if (!projection.toolCalls.length) {
-        changed = this._upsertStreamingText("system", stopReason === "error" ? `Error: ${errorText}` : errorText) || changed;
-      }
-    }
-    for (const toolCall of projection.toolCalls) {
-      changed = this._upsertToolEntry(toolCall) || changed;
-    }
-    return changed;
-  }
-
-  private _upsertStreamingText(
-    role: "assistant" | "thinking" | "system",
-    text: string,
-  ): boolean {
-    if (!text) return false;
-    if (role === "system") {
-      this._upsertTextLastByRole("system", text);
-      return true;
-    }
-    const index = role === "assistant" ? this.streamingAssistantIndex : this.streamingThinkingIndex;
-    if (index !== undefined && isLocalTextRoleEntry(this.transcript[index], role)) {
-      if (this.transcript[index]?.text === text) return false;
-      this.transcript[index] = { role, text } as TranscriptEntry;
-      return true;
-    }
-    this.transcript.push({ role, text } as TranscriptEntry);
-    const nextIndex = this.transcript.length - 1;
-    if (role === "assistant") this.streamingAssistantIndex = nextIndex;
-    else this.streamingThinkingIndex = nextIndex;
-    return true;
-  }
-
   private _absorbStageNotices(stage: StageSnapshot | undefined): boolean {
     const notices = stage?.notices;
     if (!notices) return false;
@@ -591,89 +450,6 @@ export class StageChatView implements Component {
     return changed;
   }
 
-  private _upsertTextLastByRole(
-    role: "user" | "assistant" | "thinking" | "system",
-    text: string,
-  ): void {
-    const last = this.transcript[this.transcript.length - 1];
-    if (isLocalTextRoleEntry(last, role)) {
-      this.transcript[this.transcript.length - 1] = { role, text } as TranscriptEntry;
-    } else {
-      this.transcript.push({ role, text } as TranscriptEntry);
-    }
-  }
-
-  private _appendTextDelta(
-    role: "assistant" | "thinking",
-    delta: string,
-  ): void {
-    const index = role === "assistant" ? this.streamingAssistantIndex : this.streamingThinkingIndex;
-    if (index !== undefined && isLocalTextRoleEntry(this.transcript[index], role)) {
-      const current = this.transcript[index];
-      this.transcript[index] = { role, text: current.text + delta } as TranscriptEntry;
-      return;
-    }
-    this.transcript.push({ role, text: delta } as TranscriptEntry);
-    const nextIndex = this.transcript.length - 1;
-    if (role === "assistant") this.streamingAssistantIndex = nextIndex;
-    else this.streamingThinkingIndex = nextIndex;
-  }
-
-  private _failPendingToolEntries(errorText: string): boolean {
-    let changed = false;
-    for (const [toolCallId, index] of this.toolEntryIndexes.entries()) {
-      const entry = this.transcript[index];
-      if (!isLocalToolEntry(entry) || entry.state !== "pending") continue;
-      changed = this._upsertToolEntry({
-        toolCallId,
-        name: entry.name,
-        output: errorText,
-        state: "error",
-      }) || changed;
-    }
-    this.toolEntryIndexes.clear();
-    return changed;
-  }
-
-  private _upsertToolEntry(update: {
-    toolCallId?: string;
-    name: string;
-    args?: string;
-    output?: string;
-    state: "pending" | "success" | "error";
-  }): boolean {
-    const mappedIndex = update.toolCallId ? this.toolEntryIndexes.get(update.toolCallId) : undefined;
-    const index = mappedIndex ?? findToolEntryIndex(this.transcript, update.toolCallId, update.name);
-    const existing = index !== undefined && index >= 0 ? this.transcript[index] : undefined;
-    const previous = isLocalToolEntry(existing) ? existing : undefined;
-    const output = update.output || previous?.output;
-    const name = previous?.name ?? update.name;
-    const args = update.args ?? previous?.args;
-    const summary = output ? truncateToWidth(output.replace(/\s+/g, " "), 80) : "";
-    const next: ToolEntry = {
-      role: "tool",
-      name,
-      toolCallId: previous?.toolCallId ?? update.toolCallId,
-      args,
-      output,
-      state: update.state,
-      text: summary
-        ? `← ${name} ${summary}`
-        : args
-        ? `→ ${name} ${args}`
-        : `→ ${name}`,
-    };
-    if (previous && shallowToolEntryEqual(previous, next)) return false;
-    if (index !== undefined && index >= 0) {
-      this.transcript[index] = next;
-      if (next.toolCallId) this.toolEntryIndexes.set(next.toolCallId, index);
-    } else {
-      this.transcript.push(next);
-      if (next.toolCallId) this.toolEntryIndexes.set(next.toolCallId, this.transcript.length - 1);
-    }
-    return true;
-  }
-
   private _currentStage(): StageSnapshot | undefined {
     const snap = this.store.snapshot();
     const run = snap.runs.find((r) => r.id === this.runId);
@@ -703,12 +479,12 @@ export class StageChatView implements Component {
   }
 
   private _hasPendingToolEntries(): boolean {
-    return this.liveChat.pendingToolIds().length > 0 ||
-      this.transcript.some((entry) => isLocalToolEntry(entry) && entry.state === "pending");
+    return this.liveChat.pendingToolIds().length > 0;
   }
 
   private _syncAnimationTick(): void {
-    const shouldAnimate = this._isStreaming() || (this.sdkBusy && this._hasPendingToolEntries());
+    const shouldAnimate =
+      this._isStreaming() || (this.sdkBusy && this._hasPendingToolEntries());
     if (shouldAnimate && !this.animationTimer) {
       this.animationTimer = setInterval(() => {
         this.requestRender?.();
@@ -722,66 +498,68 @@ export class StageChatView implements Component {
     }
   }
 
+  private _requestEventRender(): void {
+    if (!this._isStreaming()) {
+      this.requestRender?.();
+      return;
+    }
+    if (this.renderThrottleTimer) return;
+    this.renderThrottleTimer = setTimeout(() => {
+      this.renderThrottleTimer = undefined;
+      this.requestRender?.();
+    }, STREAMING_RENDER_THROTTLE_MS);
+    this.renderThrottleTimer.unref?.();
+  }
+
   private _isBlocked(): boolean {
     return this._currentStage()?.status === "blocked";
   }
 
-  private _isSettled(stage: StageSnapshot | undefined): boolean {
-    if (!stage) return !this.handle;
-    return stage.status === "completed" || stage.status === "failed";
+  private _isPaused(
+    stage: StageSnapshot | undefined = this._currentStage(),
+  ): boolean {
+    return this.localPaused || stage?.status === "paused";
   }
 
   // -------------------------------------------------------------------------
-  // Top-level render — composes header / body / loader / editor / footer / hints
+  // Top-level render — composes header / body / usage / editor / footer
   // -------------------------------------------------------------------------
 
   render(width: number): string[] {
     const w = Math.max(40, width);
     const stage = this._currentStage();
     const blocked = this._isBlocked();
-    const settled = this._isSettled(stage);
-    const streaming = this._isStreaming() && !blocked && !settled;
-    const paused = this.localPaused || stage?.status === "paused";
+    const streaming = this._isStreaming() && !blocked;
 
     const headerLines = this._renderHeader(w, stage);
     const sepLines = [this._sepRule(w)];
-    const loaderLines = streaming ? this._renderLoader(w, stage) : [];
-    // When the loader sits above the editor, the loader's bottom rule and
-    // the editor's top rule collapse into a single shared divider — matches
-    // the mockup's `pi-loader` + `pi-editor` stack and saves one row.
-    const editorLines = this._renderEditor(w, {
-      paused,
-      streaming,
-      settled,
-      blocked,
-      omitTopRule: loaderLines.length > 0,
-    });
-    const hintsLines = this._renderHints(w, { paused, streaming, settled });
+    const workingLines = this._renderWorkingStatus(w, stage, { streaming });
+    const usageLines = this._renderUsage(w);
+    const editorLines = this._renderEditor(w, blocked);
+    const footerLines = this._renderFooter(w);
 
     const fixed =
       HEADER_ROWS +
       SEP_ROWS +
-      loaderLines.length +
+      workingLines.length +
+      usageLines.length +
       editorLines.length +
-      FOOTER_ROWS +
-      HINTS_ROWS;
+      footerLines.length;
     const totalRows = this._viewLineCount();
     const bodyBudget = Math.max(1, totalRows - fixed);
     this.bodyViewport.setVisibleRows(bodyBudget);
     if (blocked) this.bodyViewport.scrollToBottom();
     const bodyLines = blocked
       ? this._renderBlockedBody(w, bodyBudget, stage)
-      : this._renderBody(w, bodyBudget, stage, { paused, streaming, settled });
-    const footerLines = this._renderFooter(w, stage, { paused, streaming, settled });
-
+      : this._renderBody(w, bodyBudget);
     const lines = [
       ...headerLines,
       ...sepLines,
       ...bodyLines,
-      ...loaderLines,
+      ...workingLines,
+      ...usageLines,
       ...editorLines,
       ...footerLines,
-      ...hintsLines,
     ];
     while (lines.length < totalRows) lines.push(this._blank(w));
     if (lines.length > totalRows) lines.length = totalRows;
@@ -792,7 +570,10 @@ export class StageChatView implements Component {
   // Header
   // -------------------------------------------------------------------------
 
-  private _renderHeader(width: number, stage: StageSnapshot | undefined): string[] {
+  private _renderHeader(
+    width: number,
+    stage: StageSnapshot | undefined,
+  ): string[] {
     const t = this.theme;
     const stageName = stage?.name ?? "stage";
     const status = stage?.status ?? (this.handle ? "pending" : "completed");
@@ -811,7 +592,11 @@ export class StageChatView implements Component {
     const pill = this._statusPill(status);
     const right = (meta ? paint(meta, t.dim) + "  " : "") + pill.styled + " ";
 
-    const leftW = visibleWidth(this.workflowName) + visibleWidth(stageName) + visibleWidth("  STAGE   /  ") + 1;
+    const leftW =
+      visibleWidth(this.workflowName) +
+      visibleWidth(stageName) +
+      visibleWidth("  STAGE   /  ") +
+      1;
     const rightW = visibleWidth(meta) + (meta ? 2 : 0) + pill.width + 1;
     const gap = Math.max(1, width - leftW - rightW);
     return [left + " ".repeat(gap) + right];
@@ -836,11 +621,31 @@ export class StageChatView implements Component {
     const t = this.theme;
     const map: Record<string, { fg: string; bg: string; label: string }> = {
       pending: { fg: t.dim, bg: blendBg(t.bg, t.dim, 0.18), label: "pending" },
-      running: { fg: t.accent, bg: blendBg(t.bg, t.accent, 0.18), label: "running" },
-      paused: { fg: t.warning, bg: blendBg(t.bg, t.warning, 0.18), label: "paused" },
-      blocked: { fg: t.warning, bg: blendBg(t.bg, t.warning, 0.18), label: "blocked" },
-      completed: { fg: t.success, bg: blendBg(t.bg, t.success, 0.18), label: "completed" },
-      failed: { fg: t.error, bg: blendBg(t.bg, t.error, 0.18), label: "failed" },
+      running: {
+        fg: t.accent,
+        bg: blendBg(t.bg, t.accent, 0.18),
+        label: "running",
+      },
+      paused: {
+        fg: t.warning,
+        bg: blendBg(t.bg, t.warning, 0.18),
+        label: "paused",
+      },
+      blocked: {
+        fg: t.warning,
+        bg: blendBg(t.bg, t.warning, 0.18),
+        label: "blocked",
+      },
+      completed: {
+        fg: t.success,
+        bg: blendBg(t.bg, t.success, 0.18),
+        label: "completed",
+      },
+      failed: {
+        fg: t.error,
+        bg: blendBg(t.bg, t.error, 0.18),
+        label: "failed",
+      },
     };
     const cfg = map[status] ?? map.pending!;
     const body = ` ● ${cfg.label} `;
@@ -858,25 +663,39 @@ export class StageChatView implements Component {
   // Body — welcome panel / banner + transcript / blocked
   // -------------------------------------------------------------------------
 
-  private _renderBlockedBody(width: number, budget: number, stage: StageSnapshot | undefined): string[] {
+  private _renderBlockedBody(
+    width: number,
+    budget: number,
+    stage: StageSnapshot | undefined,
+  ): string[] {
     const t = this.theme;
     const upstream = stage?.blockedByStageId ?? "upstream stage";
     const lines: string[] = [];
     // Yellow banner — uses the same chrome vocabulary as paused/completed.
-    lines.push(...this._bannerLines(width, "warning", "↑", "BLOCKED", `waiting on ${upstream}`));
+    lines.push(
+      ...this._bannerLines(
+        width,
+        "warning",
+        "↑",
+        "BLOCKED",
+        `waiting on ${upstream}`,
+      ),
+    );
     lines.push(this._blank(width));
     lines.push(
       ...new Text(
-        paint("This stage is waiting for the upstream stage to resume.", t.textMuted),
+        paint(
+          "This stage is waiting for the upstream stage to resume.",
+          t.textMuted,
+        ),
         2,
         0,
       ).render(width),
     );
     lines.push(
       ...new Text(
-        paint("Press ", t.textMuted) +
-          paint("Ctrl+D", t.accent, { bold: true }) +
-          paint(" to return to the graph.", t.textMuted),
+        paint("ctrl+d", t.accent, { bold: true }) +
+          paint(" return to graph", t.textMuted),
         2,
         0,
       ).render(width),
@@ -889,109 +708,31 @@ export class StageChatView implements Component {
   private _renderBody(
     width: number,
     budget: number,
-    stage: StageSnapshot | undefined,
-    flags: { paused: boolean; streaming: boolean; settled: boolean },
   ): string[] {
-    // Empty + not paused + not settled + not streaming → welcome panel.
-    const transcriptEmpty = this.transcript.length === 0;
-    if (transcriptEmpty && !flags.paused && !flags.settled && !flags.streaming) {
-      return this._fitToBudget(this._renderWelcome(width, stage), budget, width);
-    }
-
     const components: Component[] = [];
-    if (flags.paused) {
-      components.push(
-        this._banner(
-          "warning",
-          "❚❚",
-          "PAUSED",
-          "stopped between turns · type to resume, or Ctrl+P to release without input",
-        ),
-      );
-      components.push(new Spacer(1));
-    } else if (flags.settled && stage?.status === "completed") {
-      components.push(this._banner("success", "✓", "COMPLETED", this._completedMeta(stage)));
-      components.push(new Spacer(1));
-    } else if (flags.settled && stage?.status === "failed") {
-      components.push(
-        this._banner(
-          "error",
-          "✗",
-          "FAILED",
-          stage?.error?.replace(/\s+/g, " ") ?? "stage exited with an error",
-        ),
-      );
-      components.push(new Spacer(1));
-    }
-
     // Base chat body: delegate transcript composition to the Pi-style
     // transcript component so the attached stage chat uses the same message
     // spacing and coding-agent message widgets as the main interactive chat.
     if (this.transcript.length > 0) {
       components.push(
-        new ChatTranscriptComponent(this.transcript, (entry) => this._renderEntry(entry)),
+        new ChatTranscriptComponent(this.transcript, (entry) =>
+          this._renderEntry(entry),
+        ),
       );
     }
 
     // Stream a static status message (e.g. "pausing…") as a dim trailing row.
     if (this.statusMessage) {
       components.push(new Spacer(1));
-      components.push(new Text(paint(this.statusMessage, this.theme.dim), 2, 0));
+      components.push(
+        new Text(paint(this.statusMessage, this.theme.dim), 2, 0),
+      );
     }
 
     this.bodyViewport.setComponents(components);
     return this.bodyViewport.render(width);
   }
 
-  private _fitToBudget(lines: string[], budget: number, width: number): string[] {
-    if (lines.length >= budget) return lines.slice(lines.length - budget);
-    const out = lines.slice();
-    while (out.length < budget) out.push(this._blank(width));
-    return out;
-  }
-
-  // -------------------------------------------------------------------------
-  // Welcome panel — first attach, no transcript yet
-  // -------------------------------------------------------------------------
-
-  private _renderWelcome(width: number, stage: StageSnapshot | undefined): string[] {
-    const t = this.theme;
-    const sessionId = this.handle?.sessionId ?? stage?.sessionId;
-    const sessionFile = this.handle?.sessionFile ?? stage?.sessionFile;
-    const status = stage?.status ?? "pending";
-
-    const out: string[] = [];
-    out.push(...new Spacer(1).render(width));
-    out.push(centred(paint("▎", t.mauve, { bold: true }), width));
-    out.push(
-      centred(
-        paint("Attached to ", t.text) +
-          paint(this.workflowName, t.textMuted) +
-          paint(" / ", t.dim) +
-          paint(stage?.name ?? "stage", t.text, { bold: true }),
-        width,
-      ),
-    );
-    out.push(...new Spacer(1).render(width));
-    const sub =
-      "This stage is idle. Press ↵ to send the first prompt — the SDK session " +
-      "will be created on submit. The workflow body keeps running in the " +
-      "background; closing this overlay does not kill the run.";
-    out.push(...new Text(paint(sub, t.textMuted), 4, 0).render(width));
-    out.push(...new Spacer(1).render(width));
-
-    const grid: Array<[string, string]> = [
-      ["session", sessionId ? shortenId(sessionId) : "(not yet realised)"],
-      ["status", status],
-    ];
-    if (sessionFile) grid.push(["session file", shortenFile(sessionFile)]);
-    for (const [k, v] of grid) {
-      const row = paint(k.padEnd(13), t.dim) + paint(v, t.text);
-      out.push(...new Text(row, 8, 0).render(width));
-    }
-    return out;
-  }
-
   // -------------------------------------------------------------------------
   // Transcript entry → pi/coding-agent Component. Stage chat deliberately uses
   // the same exported message/tool components as the main interactive chat
@@ -1000,56 +741,34 @@ export class StageChatView implements Component {
 
   private _renderEntry(entry: TranscriptEntry): Component {
     if (isChatMessageEntry(entry)) {
-      return renderChatMessageEntry(entry, this._chatMessageRenderOptions());
-    }
-    switch (entry.role) {
-      case "user":
-        return renderChatMessageEntry(
-          { role: "user", kind: "user", text: entry.text },
-          this._chatMessageRenderOptions(),
-        );
-      case "assistant":
-        return renderChatMessageEntry(
-          { role: "assistant", kind: "assistant", message: assistantMessageForText(entry.text) },
-          this._chatMessageRenderOptions(),
-        );
-      case "thinking":
-        return renderChatMessageEntry(
-          { role: "assistant", kind: "assistant", message: assistantMessageForThinking(entry.text) },
-          this._chatMessageRenderOptions(),
-        );
-      case "tool":
-        return renderChatMessageEntry(this._toolEntryToChatMessage(entry), this._chatMessageRenderOptions());
-      case "notice":
-        return this._noticeRow(entry);
-      case "system":
-        return renderChatMessageEntry(
-          { role: "system", kind: "system", text: entry.text },
-          this._chatMessageRenderOptions(),
-        );
+      return renderChatMessageEntry(
+        this._streamingWindowedEntry(entry),
+        this._chatMessageRenderOptions(),
+      );
     }
+    return this._noticeRow(entry);
   }
 
-  private _toolEntryToChatMessage(entry: ToolEntry): ChatMessageEntry {
-    const toolCallId = entry.toolCallId ?? `workflow-${entry.name}`;
+  private _streamingWindowedEntry(entry: ChatMessageEntry): ChatMessageEntry {
+    if (!this._isStreaming() || this.bodyViewport.getScrollFromBottom() !== 0) {
+      return entry;
+    }
+    if (entry.kind !== "assistant") return entry;
+    const content = entry.message.content.map((item) => {
+      if (item.type === "text") {
+        return { ...item, text: tailStreamingText(item.text) };
+      }
+      if (item.type === "thinking") {
+        return { ...item, thinking: tailStreamingText(item.thinking) };
+      }
+      return item;
+    });
     return {
-      role: "tool",
-      kind: "tool",
-      toolName: entry.name,
-      toolCallId,
-      args: toolArgsForRender(entry),
-      isPartial: entry.state === "pending",
-      result:
-        entry.state !== "pending" || entry.output
-          ? {
-              role: "toolResult",
-              toolCallId,
-              toolName: entry.name,
-              content: entry.output ? [{ type: "text", text: entry.output }] : [],
-              isError: entry.state === "error",
-              timestamp: Date.now(),
-            }
-          : undefined,
+      ...entry,
+      message: {
+        ...entry.message,
+        content,
+      },
     };
   }
 
@@ -1058,7 +777,7 @@ export class StageChatView implements Component {
     return {
       ...inherited,
       ui: this._toolTui(),
-      cwd: process.cwd(),
+      cwd: this.handle?.agentSession?.sessionManager.getCwd() ?? process.cwd(),
       showImages: inherited?.showImages ?? true,
     };
   }
@@ -1094,8 +813,9 @@ export class StageChatView implements Component {
     meta: string,
   ): Component {
     const t = this.theme;
-    const fg = kind === "warning" ? t.warning : kind === "success" ? t.success : t.error;
-    const bg = blendBg(t.bg, fg, 0.10);
+    const fg =
+      kind === "warning" ? t.warning : kind === "success" ? t.success : t.error;
+    const bg = blendBg(t.bg, fg, 0.1);
     const head =
       paintOnFill(glyph, fg, { bold: true }) +
       "  " +
@@ -1121,215 +841,98 @@ export class StageChatView implements Component {
     return this._banner(kind, glyph, label, meta).render(width);
   }
 
-  // -------------------------------------------------------------------------
-  // Loader — top rule + spinner row + bottom rule
-  // -------------------------------------------------------------------------
-
-  private _renderLoader(width: number, stage: StageSnapshot | undefined): string[] {
-    const t = this.theme;
-    const rule = hexToAnsi(t.border) + "─".repeat(width) + RESET;
-    const dur = stageDurationText(stage);
-    const msg = `Working${dur ? "  · " + dur : ""}`;
-    const escapeHint = paint("Esc", t.text, { bold: true }) + " " + paint("interrupt", t.dim);
-    const left = " " + paint(spinnerFrame(), t.accent, { bold: true }) + "  " + paint(msg, t.textMuted) + " ";
-    const leftW = visibleWidth(spinnerFrame()) + 4 + visibleWidth(msg);
-    const rightW = visibleWidth("Esc interrupt");
-    const gap = Math.max(1, width - leftW - rightW - 2);
-    const body = left + " ".repeat(gap) + escapeHint + " ";
-    // No closing rule — the editor's top rule (or the editor's body when
-    // `omitTopRule: true`) sits directly underneath and provides the divider.
-    return [rule, body];
-  }
-
   // -------------------------------------------------------------------------
   // Editor — top rule + ` ❯ … ` + bottom rule
   // -------------------------------------------------------------------------
 
-  private _renderEditor(
-    width: number,
-    flags: {
-      paused: boolean;
-      streaming: boolean;
-      settled: boolean;
-      blocked: boolean;
-      /**
-       * When `true`, drop the editor's top rule — the loader directly above
-       * already paints a horizontal rule and we don't want a doubled border.
-       */
-      omitTopRule: boolean;
-    },
-  ): string[] {
+  private _renderEditor(width: number, blocked: boolean): string[] {
     const t = this.theme;
-    // Disabled (settled or blocked) uses surface1 rules + dim placeholder.
-    const disabled = flags.settled || flags.blocked || !this.handle;
+    // Disabled only when no live chat handle exists or workflow dependencies
+    // are blocked. A settled attached stage remains a regular chat session.
+    const disabled = blocked || !this.handle;
+    const ruleHex = this._editorRuleColor(disabled);
     if (!disabled && this.editor) {
+      setEditorFocused(this.editor, this.focused);
+      setEditorPlaceholder(this.editor, undefined);
+      setEditorBorderColor(this.editor, ruleHex);
       return this.editor.render(width);
     }
-    const ruleHex = disabled ? t.borderDim : t.border;
+    if (this.editor) setEditorFocused(this.editor, false);
     const rule = hexToAnsi(ruleHex) + "─".repeat(width) + RESET;
 
     const glyphHex = disabled ? t.dim : t.accent;
-    const placeholder = flags.blocked
-      ? "blocked · upstream stage owns the prompt"
-      : flags.settled || !this.handle
-      ? "read-only · stage has no live handle"
-      : flags.paused
-      ? "type to resume, or Ctrl+P to release without input…"
-      : flags.streaming
-      ? "type to steer the current turn… (queues with ↵)"
-      : "type a message…";
-
+    const available = Math.max(1, width - 3);
     const value = this.inputBuffer
-      ? paint(truncateToWidth(this.inputBuffer, Math.max(8, width - 6)), t.text) + paint("▌", t.text)
-      : paint(placeholder, t.dim, { italic: true });
-
-    const tag = flags.streaming
-      ? paint("streaming", t.accent, { bold: true })
-      : flags.paused
-      ? paint("paused", t.warning, { bold: true })
-      : flags.settled
-      ? paint("settled", t.success, { bold: true })
-      : paint("idle", t.dim);
-    const tagWidth = visibleWidth(stripAnsi(tag));
-    const left = " " + paint("❯", glyphHex, { bold: true }) + "  " + value;
-    const valueWidth = visibleWidth(this.inputBuffer || placeholder);
-    const leftWidth = 1 + 1 + 2 + valueWidth + (this.inputBuffer ? 1 : 0);
-    const gap = Math.max(1, width - leftWidth - tagWidth - 2);
-    const body = left + " ".repeat(gap) + tag + " ";
-    return flags.omitTopRule ? [body, rule] : [rule, body, rule];
+      ? paint(truncateToWidth(this.inputBuffer, available), t.text) + cursorBlock()
+      : disabled
+        ? ""
+        : cursorBlock();
+
+    const left = paint("❯", glyphHex, { bold: true }) + " " + value;
+    const gap = Math.max(0, width - visibleWidth(stripAnsi(left)));
+    const body = left + " ".repeat(gap);
+    return [rule, body, rule];
+  }
+
+  private _editorRuleColor(disabled: boolean): string {
+    if (disabled) return this.theme.borderDim;
+    const level = this.handle?.agentSession?.state.thinkingLevel ?? "off";
+    switch (level) {
+      case "minimal":
+        return this.theme.borderDim;
+      case "low":
+        return this.theme.info;
+      case "medium":
+        return this.theme.accent;
+      case "high":
+        return this.theme.mauve;
+      case "xhigh":
+        return this.theme.error;
+      case "off":
+      default:
+        return this.theme.border;
+    }
   }
 
   // -------------------------------------------------------------------------
-  // Footer — two dim lines mirroring Pi's FooterComponent
+  // Working, usage + footer — mirrors the main chat composer stack
   // -------------------------------------------------------------------------
 
-  private _renderFooter(
+  private _renderWorkingStatus(
     width: number,
     stage: StageSnapshot | undefined,
-    flags: { paused: boolean; streaming: boolean; settled: boolean },
+    flags: { streaming: boolean },
   ): string[] {
+    if (!flags.streaming) return [];
     const t = this.theme;
-    const sessionId = this.handle?.sessionId ?? stage?.sessionId;
-    const messages = this.handle?.messages.length ?? this.transcript.length;
-    const dur = stageDurationText(stage) ?? "";
-
-    // Top line — left: workflow / stage tag; right: session id
-    const lTop = paint(`pi-workflows/${this.workflowName}/${stage?.name ?? "stage"}`, t.dim);
-    const rTop = sessionId
-      ? paint("session ", t.dim) + paint(shortenId(sessionId), t.textMuted)
-      : paint("session not yet realised", t.dim);
-    const top = layoutRow(width, " ", " " + lTop, rTop + " ", t);
-
-    // Bottom line — left: messages / duration; right: caption
-    const history = this.bodyViewport.getMaxScroll() > 0
-      ? this.bodyViewport.getScrollFromBottom() > 0
-        ? ` · history ↑${this.bodyViewport.getScrollFromBottom()}`
-        : " · history bottom"
-      : "";
-    const lBot =
-      paint(`◇ ${messages} messages`, t.dim) +
-      (dur ? "  " + paint(`· ${dur}`, t.dim) : "") +
-      paint(history, t.dim);
-    const rBot = flags.streaming
-      ? paint("streaming · live", t.accent)
-      : flags.paused
-      ? paint("paused · ready to resume", t.warning)
-      : flags.settled && stage?.status === "completed"
-      ? paint("completed · session persisted", t.success)
-      : flags.settled && stage?.status === "failed"
-      ? paint("failed · see error", t.error)
-      : paint(this.statusMessage || "idle · awaiting input", t.dim);
-    const bot = layoutRow(width, " ", " " + lBot, rBot + " ", t);
-    return [top, bot];
+    const dur = stageDurationText(stage);
+    const message = this.workingMessage ?? `Working${dur ? "  · " + dur : ""}`;
+    return new WorkingStatusComponent({
+      spinner: spinnerFrame(),
+      message,
+      spinnerColor: (text) => paint(text, t.accent, { bold: true }),
+      messageColor: (text) => paint(text, t.textMuted),
+    }).render(width);
   }
 
-  // -------------------------------------------------------------------------
-  // Hints — dashed rule + key bindings
-  // -------------------------------------------------------------------------
-
-  private _renderHints(
-    width: number,
-    flags: { paused: boolean; streaming: boolean; settled: boolean },
-  ): string[] {
-    const t = this.theme;
-    const dash = hexToAnsi(t.borderDim) + "╌".repeat(width) + RESET;
-    const hints = this._hintSet(flags);
-    const sep = paint(" · ", t.dim);
-    const rendered = hints
-      .map(({ key, label, emphasis }) =>
-        paint(key, t.text, { bold: true }) +
-        " " +
-        paint(label, emphasis ? t.textMuted : t.dim, emphasis ? { bold: true } : {}),
-      )
-      .join(sep);
-    const tagPlain = `pi-workflows/${this.workflowName}`;
-    const renderedW = visibleWidth(stripAnsi(rendered));
-    const tagW = visibleWidth(tagPlain);
-    // Right-side tag is "nice to have". When the hint line + tag overflows
-    // the chrome, drop the tag — the hints are the load-bearing affordance.
-    if (renderedW + tagW + 3 > width) {
-      const gap = Math.max(1, width - renderedW - 1);
-      return [dash, " " + rendered + " ".repeat(gap)];
-    }
-    const tag = paint(tagPlain, t.dim);
-    const gap = Math.max(1, width - renderedW - tagW - 2);
-    return [dash, " " + rendered + " ".repeat(gap) + tag + " "];
+  private _renderUsage(width: number): string[] {
+    const agentSession = this.handle?.agentSession;
+    if (!agentSession) return [];
+    return new UsageMeterComponent(agentSession).render(width);
   }
 
-  private _hintSet(flags: {
-    paused: boolean;
-    streaming: boolean;
-    settled: boolean;
-  }): Array<{ key: string; label: string; emphasis?: boolean }> {
-    const historyHint = { key: "PgUp/PgDn", label: "history" };
-    if (flags.settled) {
-      return [
-        historyHint,
-        { key: "Ctrl+D", label: "back to graph", emphasis: true },
-        { key: "Esc", label: "close" },
-      ];
-    }
-    if (flags.paused) {
-      return [
-        { key: "↵", label: "resume with message", emphasis: true },
-        { key: "Ctrl+P", label: "resume empty" },
-        historyHint,
-        { key: "Ctrl+D", label: "back" },
-        { key: "Esc", label: "close" },
-      ];
-    }
-    if (flags.streaming) {
-      return [
-        { key: "↵", label: "steer", emphasis: true },
-        { key: "Ctrl+F", label: "follow-up", emphasis: true },
-        { key: "Ctrl+P", label: "pause" },
-        historyHint,
-        { key: "Ctrl+D", label: "back" },
-        { key: "Esc", label: "interrupt" },
-      ];
+  private _renderFooter(width: number): string[] {
+    const agentSession = this.handle?.agentSession;
+    if (agentSession && this.footerData) {
+      return new FooterComponent(agentSession, this.footerData).render(width);
     }
-    return [
-      { key: "↵", label: "send", emphasis: true },
-      { key: "Ctrl+F", label: "follow-up" },
-      { key: "Ctrl+P", label: "pause" },
-      historyHint,
-      { key: "Ctrl+D", label: "back" },
-      { key: "Esc", label: "close" },
-    ];
+    return [];
   }
 
   // -------------------------------------------------------------------------
   // Small helpers
   // -------------------------------------------------------------------------
 
-  private _completedMeta(stage: StageSnapshot | undefined): string {
-    const dur = stageDurationText(stage);
-    const parts: string[] = ["stage settled"];
-    if (dur) parts.push(dur);
-    if (stage?.sessionFile) parts.push(`session ${shortenFile(stage.sessionFile)}`);
-    return parts.join(" · ");
-  }
-
   private _blank(width: number): string {
     return " ".repeat(width);
   }
@@ -1350,20 +953,19 @@ export class StageChatView implements Component {
       this.onDetach();
       return true;
     }
-    if (data === "\x1b") {
-      if (this._isStreaming() && !this._isBlocked()) {
+    if (matchesKey(data, "escape")) {
+      if (this._canPause()) {
         void this._pause();
       } else {
         this.onClose();
       }
       return true;
     }
-    const blocked = this._isBlocked();
-    if (data === "\x10") {
-      if (blocked) return true;
-      void this._pause();
+    if (data === "\x03") {
+      this.onClose();
       return true;
     }
+    const blocked = this._isBlocked();
     if (data === "\x06") {
       if (blocked) return true;
       void this._submit("followUp");
@@ -1392,6 +994,13 @@ export class StageChatView implements Component {
     return false;
   }
 
+  private _canPause(): boolean {
+    if (!this.handle || this.localPaused || this._isBlocked()) return false;
+    const stage = this._currentStage();
+    if (stage?.status === "paused") return false;
+    return this._isStreaming();
+  }
+
   private async _pause(): Promise<void> {
     if (!this.handle) {
       this.statusMessage = "no live handle on this stage";
@@ -1404,7 +1013,7 @@ export class StageChatView implements Component {
     try {
       await this.handle.pause();
       this.sdkBusy = false;
-      this.statusMessage = "paused";
+      this.statusMessage = "";
     } catch (err) {
       this.statusMessage = `pause failed: ${err instanceof Error ? err.message : String(err)}`;
       this.localPaused = false;
@@ -1414,7 +1023,35 @@ export class StageChatView implements Component {
     }
   }
 
-  private async _submit(mode: "auto" | "followUp", submittedText?: string): Promise<void> {
+  private async _resume(message?: string): Promise<void> {
+    if (!this.handle) {
+      this.statusMessage = "no live handle on this stage";
+      this.requestRender?.();
+      return;
+    }
+    this.localPaused = true;
+    this.sdkBusy = true;
+    this.statusMessage = "resuming…";
+    this._syncAnimationTick();
+    this.requestRender?.();
+    try {
+      await this.handle.resume(message);
+      this.localPaused = false;
+      this.sdkBusy = false;
+      this.statusMessage = "";
+    } catch (err) {
+      this.sdkBusy = false;
+      this.statusMessage = `resume failed: ${err instanceof Error ? err.message : String(err)}`;
+    } finally {
+      this._syncAnimationTick();
+      this.requestRender?.();
+    }
+  }
+
+  private async _submit(
+    mode: "auto" | "followUp",
+    submittedText?: string,
+  ): Promise<void> {
     const text = (submittedText ?? this.inputBuffer).trim();
     if (!text) return;
     this.inputBuffer = "";
@@ -1423,6 +1060,7 @@ export class StageChatView implements Component {
       this.statusMessage = "no live handle on this stage";
       this.transcript.push({
         role: "system",
+        kind: "system",
         text: "(no live handle — message dropped)",
       });
       this.requestRender?.();
@@ -1433,13 +1071,8 @@ export class StageChatView implements Component {
     this.optimisticUserSignatures.add(userMessageSignature(text));
     this.requestRender?.();
     try {
-      if (this.localPaused) {
-        this.sdkBusy = true;
-        this._syncAnimationTick();
-        await this.handle.resume(text);
-        this.localPaused = false;
-        this.statusMessage = "resumed";
-        this.requestRender?.();
+      if (this._isPaused()) {
+        await this._resume(text);
         return;
       }
       if (mode === "followUp") {
@@ -1475,6 +1108,10 @@ export class StageChatView implements Component {
       clearInterval(this.animationTimer);
       this.animationTimer = undefined;
     }
+    if (this.renderThrottleTimer) {
+      clearTimeout(this.renderThrottleTimer);
+      this.renderThrottleTimer = undefined;
+    }
     this.editor = undefined;
   }
 
@@ -1482,22 +1119,8 @@ export class StageChatView implements Component {
   get _inputBuffer(): string {
     return this.inputBuffer;
   }
-  get _transcript(): ReadonlyArray<
-    TranscriptEntry & {
-      readonly text: string;
-      readonly toolCallId: string;
-      readonly state: string;
-      readonly output: string;
-    }
-  > {
-    return this.transcript.flatMap((entry) => transcriptDebugEntries(entry)) as ReadonlyArray<
-      TranscriptEntry & {
-        readonly text: string;
-        readonly toolCallId: string;
-        readonly state: string;
-        readonly output: string;
-      }
-    >;
+  get _transcript(): ReadonlyArray<TranscriptDebugEntry> {
+    return this.transcript.flatMap((entry) => transcriptDebugEntries(entry));
   }
   get _statusMessage(): string {
     return this.statusMessage;
@@ -1520,29 +1143,41 @@ export class StageChatView implements Component {
 // Module-private helpers
 // ---------------------------------------------------------------------------
 
-type AssistantComponentMessage = Extract<ChatMessageEntry, { kind: "assistant" }>["message"];
-
-function transcriptDebugEntries(entry: TranscriptEntry): Array<TranscriptEntry & {
+interface TranscriptDebugEntry {
+  readonly role: string;
   readonly text: string;
   readonly toolCallId: string;
   readonly state: string;
   readonly output: string;
-}> {
+}
+
+function transcriptDebugEntries(entry: TranscriptEntry): TranscriptDebugEntry[] {
   if (isChatMessageEntry(entry) && entry.kind === "assistant") {
-    const entries: Array<TranscriptEntry & { text: string; toolCallId: string; state: string; output: string }> = [];
+    const entries: TranscriptDebugEntry[] = [];
     const thinking = extractThinkingText(entry.message.content);
     const text = extractMessageText(entry.message.content);
-    if (thinking) entries.push({ role: "thinking", text: thinking, toolCallId: "", state: "", output: "" } as TranscriptEntry & { text: string; toolCallId: string; state: string; output: string });
-    if (text || entries.length === 0) entries.push({ ...entry, text, toolCallId: "", state: "", output: "" });
+    if (thinking)
+      entries.push({
+        role: "thinking",
+        text: thinking,
+        toolCallId: "",
+        state: "",
+        output: "",
+      });
+    if (text || entries.length === 0)
+      entries.push({ ...entry, text, toolCallId: "", state: "", output: "" });
     return entries;
   }
-  return [{
-    ...entry,
-    text: transcriptDebugText(entry),
-    toolCallId: transcriptDebugToolCallId(entry),
-    state: transcriptDebugToolState(entry),
-    output: transcriptDebugToolOutput(entry),
-  } as TranscriptEntry & { text: string; toolCallId: string; state: string; output: string }];
+  return [
+    {
+      ...entry,
+      role: entry.role,
+      text: transcriptDebugText(entry),
+      toolCallId: transcriptDebugToolCallId(entry),
+      state: transcriptDebugToolState(entry),
+      output: transcriptDebugToolOutput(entry),
+    },
+  ];
 }
 
 function transcriptDebugText(entry: TranscriptEntry): string {
@@ -1571,8 +1206,10 @@ function transcriptDebugText(entry: TranscriptEntry): string {
 }
 
 function transcriptDebugToolCallId(entry: TranscriptEntry): string {
-  if (isChatMessageEntry(entry) && entry.kind === "tool") return entry.toolCallId;
-  if ("toolCallId" in entry && typeof entry.toolCallId === "string") return entry.toolCallId;
+  if (isChatMessageEntry(entry) && entry.kind === "tool")
+    return entry.toolCallId;
+  if ("toolCallId" in entry && typeof entry.toolCallId === "string")
+    return entry.toolCallId;
   return "";
 }
 
@@ -1586,64 +1223,63 @@ function transcriptDebugToolState(entry: TranscriptEntry): string {
 }
 
 function transcriptDebugToolOutput(entry: TranscriptEntry): string {
-  if (isChatMessageEntry(entry) && entry.kind === "tool") return entry.result ? extractToolResultText(entry.result) : "";
-  if ("output" in entry && typeof entry.output === "string") return entry.output;
+  if (isChatMessageEntry(entry) && entry.kind === "tool")
+    return entry.result ? extractToolResultText(entry.result) : "";
+  if ("output" in entry && typeof entry.output === "string")
+    return entry.output;
   return "";
 }
 
-function isSharedLiveChatEvent(type: string): boolean {
-  return type === "message_start" ||
-    type === "message_update" ||
-    type === "message_end" ||
-    type === "tool_execution_start" ||
-    type === "tool_execution_update" ||
-    type === "tool_execution_end";
-}
-
-function isChatMessageEntry(entry: TranscriptEntry): entry is ChatMessageEntry {
-  return "kind" in entry && entry.role !== "notice";
+function setEditorPlaceholder(
+  editor: EditorComponent,
+  placeholder: string | undefined,
+): void {
+  const candidate = editor as EditorComponent & {
+    setPlaceholder?: (value: string | undefined) => void;
+  };
+  candidate.setPlaceholder?.(placeholder);
 }
 
-function isLocalToolEntry(entry: TranscriptEntry | undefined): entry is ToolEntry {
-  return entry?.role === "tool" && !("kind" in entry);
+function cursorBlock(): string {
+  return "\x1b[7m \x1b[0m";
 }
 
-function isLocalTextRoleEntry<T extends "user" | "assistant" | "thinking" | "system">(
-  entry: TranscriptEntry | undefined,
-  role: T,
-): entry is Extract<TranscriptEntry, { role: T; text: string }> {
-  return entry?.role === role && !("kind" in entry) && "text" in entry;
+function setEditorBorderColor(editor: EditorComponent, hex: string): void {
+  const candidate = editor as EditorComponent & {
+    borderColor?: (text: string) => string;
+  };
+  if (candidate.borderColor !== undefined) {
+    candidate.borderColor = (text: string) => hexToAnsi(hex) + text + RESET;
+  }
 }
 
-function assistantMessageForText(text: string): AssistantComponentMessage {
-  return {
-    role: "assistant",
-    content: [{ type: "text", text }],
-    stopReason: "stop",
-  } as AssistantComponentMessage;
+function setEditorFocused(editor: EditorComponent, focused: boolean): void {
+  const candidate = editor as EditorComponent & Partial<Focusable>;
+  if ("focused" in candidate) candidate.focused = focused;
 }
 
-function assistantMessageForThinking(text: string): AssistantComponentMessage {
-  return {
-    role: "assistant",
-    content: [{ type: "thinking", thinking: text }],
-    stopReason: "stop",
-  } as AssistantComponentMessage;
+function isSharedLiveChatEvent(type: string): boolean {
+  return (
+    type === "message_start" ||
+    type === "message_update" ||
+    type === "message_end" ||
+    type === "tool_execution_start" ||
+    type === "tool_execution_update" ||
+    type === "tool_execution_end"
+  );
 }
 
-function toolArgsForRender(entry: ToolEntry): Record<string, unknown> {
-  if (!entry.args) return {};
-  if (entry.name === "bash") {
-    return { command: entry.args.replace(/^command=/, "") };
-  }
-  return { input: entry.args };
+function isChatMessageEntry(entry: TranscriptEntry): entry is ChatMessageEntry {
+  return "kind" in entry && entry.role !== "notice";
 }
 
-function isMessageLike(message: unknown): message is { role?: unknown; content?: unknown; stopReason?: unknown; errorMessage?: unknown } {
+function isMessageLike(message: unknown): message is { role?: unknown; content?: unknown } {
   return message !== null && typeof message === "object" && "role" in message;
 }
 
-function isUserMessageLike(message: unknown): message is { role: "user"; content?: unknown } {
+function isUserMessageLike(
+  message: unknown,
+): message is { role: "user"; content?: unknown } {
   return isMessageLike(message) && message.role === "user";
 }
 
@@ -1651,136 +1287,115 @@ function userMessageSignature(text: string): string {
   return text.trim();
 }
 
-interface AssistantProjection {
-  text: string;
-  thinking: string;
-  toolCalls: Array<{ toolCallId?: string; name: string; args?: string; state: "pending" }>;
+function assistantToolCallEvent(event: AgentSessionEvent): {
+  type: "tool_execution_start";
+  toolCallId: string;
+  toolName: string;
+  args: unknown;
+} | undefined {
+  const assistantEvent = (event as {
+    assistantMessageEvent?: {
+      type?: unknown;
+      contentIndex?: unknown;
+      partial?: unknown;
+      toolCall?: unknown;
+    };
+  }).assistantMessageEvent;
+  const streamType = String(assistantEvent?.type ?? "");
+  if (!streamType.startsWith("toolcall_")) return undefined;
+
+  const explicit = toolCallPayload(assistantEvent?.toolCall);
+  if (explicit) return explicit;
+
+  const contentIndex = typeof assistantEvent?.contentIndex === "number" ? assistantEvent.contentIndex : undefined;
+  if (contentIndex === undefined) return undefined;
+  const partial = assistantEvent?.partial;
+  if (!isMessageLike(partial) || partial.role !== "assistant") return undefined;
+  const content = partial.content;
+  if (!Array.isArray(content)) return undefined;
+  return toolCallPayload(content[contentIndex]);
 }
 
-function assistantContentHasRenderablePayload(content: unknown): boolean {
-  if (typeof content === "string") return content.length > 0;
-  if (!Array.isArray(content)) return false;
-  return content.some((item) => {
-    if (typeof item === "string") return item.length > 0;
-    if (item == null || typeof item !== "object") return false;
-    const obj = item as { type?: unknown; text?: unknown; thinking?: unknown };
-    return (obj.type === "text" && typeof obj.text === "string" && obj.text.length > 0) ||
-      (obj.type === "thinking" && typeof obj.thinking === "string" && obj.thinking.length > 0) ||
-      obj.type === "toolCall";
-  });
+function toolCallPayload(value: unknown): {
+  type: "tool_execution_start";
+  toolCallId: string;
+  toolName: string;
+  args: unknown;
+} | undefined {
+  if (value === null || typeof value !== "object") return undefined;
+  const candidate = value as { type?: unknown; id?: unknown; name?: unknown; arguments?: unknown };
+  if (candidate.type !== "toolCall") return undefined;
+  if (typeof candidate.id !== "string" || typeof candidate.name !== "string") return undefined;
+  return {
+    type: "tool_execution_start",
+    toolCallId: candidate.id,
+    toolName: candidate.name,
+    args: candidate.arguments ?? {},
+  };
 }
 
-function projectAssistantContent(content: unknown): AssistantProjection {
-  const projection: AssistantProjection = { text: "", thinking: "", toolCalls: [] };
-  if (!Array.isArray(content)) {
-    projection.text = typeof content === "string" ? content : "";
-    return projection;
-  }
-  const textParts: string[] = [];
-  const thinkingParts: string[] = [];
-  for (const item of content) {
-    if (item == null) continue;
-    if (typeof item === "string") {
-      textParts.push(item);
-      continue;
-    }
-    if (typeof item !== "object") continue;
-    const obj = item as {
-      type?: unknown;
-      text?: unknown;
-      thinking?: unknown;
-      id?: unknown;
-      name?: unknown;
-      arguments?: unknown;
-      args?: unknown;
-    };
-    if (obj.type === "text" && typeof obj.text === "string") {
-      textParts.push(obj.text);
-      continue;
-    }
-    if (obj.type === "thinking" && typeof obj.thinking === "string") {
-      thinkingParts.push(obj.thinking);
-      continue;
-    }
-    if (obj.type === "toolCall") {
-      const name = typeof obj.name === "string" ? obj.name : "tool";
-      const toolCallId = typeof obj.id === "string" ? obj.id : undefined;
-      const args = summariseArgs(obj.arguments ?? obj.args);
-      projection.toolCalls.push({ toolCallId, name, args, state: "pending" });
-    }
-  }
-  projection.text = textParts.join("");
-  projection.thinking = thinkingParts.join("\n\n");
-  return projection;
+function legacyToolStartEvent(event: AgentSessionEvent): {
+  type: "tool_execution_start";
+  toolCallId: string;
+  toolName: string;
+  args: unknown;
+} {
+  const payload = event as { toolCallId?: unknown; name?: unknown; input?: unknown; args?: unknown };
+  const toolName = typeof payload.name === "string" ? payload.name : "tool";
+  const toolCallId =
+    typeof payload.toolCallId === "string" ? payload.toolCallId : `live-${toolName}`;
+  return {
+    type: "tool_execution_start",
+    toolCallId,
+    toolName,
+    args: payload.input ?? payload.args ?? {},
+  };
 }
 
-function shallowToolEntryEqual(a: ToolEntry, b: ToolEntry): boolean {
-  return a.role === b.role &&
-    a.text === b.text &&
-    a.name === b.name &&
-    a.toolCallId === b.toolCallId &&
-    a.args === b.args &&
-    a.output === b.output &&
-    a.state === b.state;
+function legacyToolResultEvent(event: AgentSessionEvent): {
+  type: "tool_execution_end";
+  toolCallId: string;
+  toolName: string;
+  result: unknown;
+  isError: boolean;
+} {
+  const payload = event as {
+    toolCallId?: unknown;
+    name?: unknown;
+    output?: unknown;
+    isError?: unknown;
+  };
+  const toolName = typeof payload.name === "string" ? payload.name : "tool";
+  const toolCallId =
+    typeof payload.toolCallId === "string" ? payload.toolCallId : `live-${toolName}`;
+  const output = payload.output;
+  return {
+    type: "tool_execution_end",
+    toolCallId,
+    toolName,
+    result:
+      output !== null && typeof output === "object" && "content" in output
+        ? output
+        : { content: typeof output === "string" ? [{ type: "text", text: output }] : [] },
+    isError: payload.isError === true,
+  };
 }
 
-function transcriptEntryFromSnapshotMessage(
-  message: AgentSnapshotMessage,
-): TranscriptEntry | undefined {
-  switch (message.role) {
-    case "user": {
-      const text = extractMessageText(message.content);
-      return text ? { role: "user", text } : undefined;
-    }
-    case "assistant": {
-      const text = extractMessageText(message.content);
-      return text ? { role: "assistant", text } : undefined;
-    }
-    case "toolResult": {
-      const output = extractMessageText(message.content);
-      const summary = output ? truncateToWidth(output.replace(/\s+/g, " "), 80) : "";
-      return {
-        role: "tool",
-        name: message.toolName,
-        output,
-        state: message.isError ? "error" : "success",
-        text: summary ? `← ${message.toolName} ${summary}` : `← ${message.toolName}`,
-      };
-    }
-    case "bashExecution": {
-      const state =
-        message.cancelled || (message.exitCode !== undefined && message.exitCode !== 0)
-          ? "error"
-          : "success";
-      const summary = message.output ? truncateToWidth(message.output.replace(/\s+/g, " "), 80) : "";
-      return {
-        role: "tool",
-        name: "bash",
-        args: truncateToWidth(message.command.replace(/\s+/g, " "), 60),
-        output: message.output,
-        state,
-        text: summary ? `← bash ${summary}` : `→ bash ${message.command}`,
-      };
-    }
-    case "custom": {
-      if (!message.display) return undefined;
-      const text = extractMessageText(message.content);
-      return text ? { role: "system", text } : undefined;
-    }
-    case "branchSummary": {
-      const text = `Branch summary: ${message.summary}`;
-      return { role: "system", text };
-    }
-    case "compactionSummary": {
-      const text = `Compaction summary: ${message.summary}`;
-      return { role: "system", text };
-    }
-    default:
-      // The SDK message union is extensible. Snapshot unknown roles must be
-      // skipped here instead of being cast into `TranscriptEntry`; `_renderBody`
-      // only flattens the closed set of components returned by `_renderEntry`.
-      return undefined;
-  }
+function legacyThinkingEvent(event: AgentSessionEvent): {
+  type: "message_update";
+  assistantMessageEvent: { type: "thinking_delta"; delta: string };
+  message: { role: "assistant"; content: [] };
+} {
+  const delta = String(
+    (event as { delta?: unknown }).delta ??
+      (event as { text?: unknown }).text ??
+      "",
+  );
+  return {
+    type: "message_update",
+    assistantMessageEvent: { type: "thinking_delta", delta },
+    message: { role: "assistant", content: [] },
+  };
 }
 
 function extractThinkingText(content: unknown): string {
@@ -1789,7 +1404,11 @@ function extractThinkingText(content: unknown): string {
   for (const item of content) {
     if (item == null || typeof item !== "object") continue;
     const thinking = (item as { type?: unknown; thinking?: unknown }).thinking;
-    if ((item as { type?: unknown }).type === "thinking" && typeof thinking === "string") parts.push(thinking);
+    if (
+      (item as { type?: unknown }).type === "thinking" &&
+      typeof thinking === "string"
+    )
+      parts.push(thinking);
   }
   return parts.join("\n\n");
 }
@@ -1806,7 +1425,8 @@ function extractMessageText(content: unknown): string {
     }
     const obj = item as { type?: unknown; text?: unknown };
     if (typeof obj.text === "string") parts.push(obj.text);
-    else if (obj.type === "text" && typeof obj.text === "string") parts.push(obj.text);
+    else if (obj.type === "text" && typeof obj.text === "string")
+      parts.push(obj.text);
   }
   return parts.join("");
 }
@@ -1818,43 +1438,27 @@ function extractToolResultText(result: unknown): string {
   return extractMessageText(content);
 }
 
-function findToolEntryIndex(
-  entries: readonly TranscriptEntry[],
-  toolCallId: string | undefined,
-  name: string,
-): number {
-  if (toolCallId !== undefined) {
-    for (let i = entries.length - 1; i >= 0; i--) {
-      const entry = entries[i];
-      if (isLocalToolEntry(entry) && entry.toolCallId === toolCallId) return i;
-    }
-  }
-  for (let i = entries.length - 1; i >= 0; i--) {
-    const entry = entries[i];
-    if (isLocalToolEntry(entry) && entry.name === name && entry.state === "pending") return i;
-  }
-  return -1;
-}
-
-function summariseArgs(input: unknown): string {
-  if (input == null) return "";
-  if (typeof input === "string") return truncateToWidth(input.replace(/\s+/g, " "), 60);
-  if (typeof input !== "object") return String(input);
-  const obj = input as Record<string, unknown>;
-  const keys = Object.keys(obj);
-  if (keys.length === 0) return "";
-  const head = keys[0]!;
-  const value = obj[head];
-  const summary = typeof value === "string" ? value : JSON.stringify(value);
-  const formatted = `${head}=${summary}`;
-  return truncateToWidth(formatted.replace(/\s+/g, " "), 60);
-}
-
 function noticeSummary(n: StageNotice): string {
   const base = `~ ${n.kind} → ${n.to}`;
   return n.from ? `${base} (was ${n.from})` : base;
 }
 
+function tailStreamingText(text: string): string {
+  if (
+    text.length <= STREAMING_TEXT_TAIL_CHARS &&
+    text.split("\n").length <= STREAMING_TEXT_TAIL_LINES
+  ) {
+    return text;
+  }
+  const byChars = text.slice(-STREAMING_TEXT_TAIL_CHARS);
+  const lines = byChars.split("\n");
+  const tail =
+    lines.length > STREAMING_TEXT_TAIL_LINES
+      ? lines.slice(-STREAMING_TEXT_TAIL_LINES).join("\n")
+      : byChars;
+  return `[earlier streaming output hidden while attached]\n\n${tail.trimStart()}`;
+}
+
 function stageDurationText(stage: StageSnapshot | undefined): string {
   if (!stage?.startedAt) return "";
   const end = stage.endedAt ?? Date.now();
@@ -1878,15 +1482,6 @@ function shortenId(id: string): string {
   return id.length > 10 ? id.slice(0, 8) : id;
 }
 
-function shortenFile(path: string): string {
-  if (path.length <= 36) return path;
-  // Keep the basename and an ellipsis prefix so the user can still recognise
-  // which session file we're pointing at.
-  const slash = path.lastIndexOf("/");
-  if (slash < 0) return "…" + path.slice(-35);
-  return "…" + path.slice(Math.max(slash - 12, 0));
-}
-
 function spinnerFrame(): string {
   const idx = Math.floor(Date.now() / 80) % SPINNER_FRAMES.length;
   return SPINNER_FRAMES[idx]!;
@@ -1898,7 +1493,8 @@ function bgFn(hex: string): (text: string) => string {
 }
 
 function editorThemeFromGraphTheme(t: GraphTheme): EditorTheme {
-  const selected = (text: string): string => hexBg(t.backgroundPanel) + hexToAnsi(t.text) + text + RESET;
+  const selected = (text: string): string =>
+    hexBg(t.backgroundPanel) + hexToAnsi(t.text) + text + RESET;
   const normal = (text: string): string => hexToAnsi(t.text) + text + RESET;
   return {
     borderColor: (text: string) => hexToAnsi(t.border) + text + RESET,
@@ -1948,31 +1544,6 @@ function stripAnsi(s: string): string {
   return s.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, "");
 }
 
-function centred(content: string, width: number): string {
-  const w = visibleWidth(stripAnsi(content));
-  if (w >= width) return content;
-  const left = Math.floor((width - w) / 2);
-  const right = width - w - left;
-  return " ".repeat(left) + content + " ".repeat(right);
-}
-
-/**
- * Compose a two-column row of `${prefix}${left}…${right}` padded to width.
- * Used by the footer to lay out left/right slabs without losing ANSI runs.
- */
-function layoutRow(
-  width: number,
-  _prefix: string,
-  left: string,
-  right: string,
-  _theme: GraphTheme,
-): string {
-  const lw = visibleWidth(stripAnsi(left));
-  const rw = visibleWidth(stripAnsi(right));
-  const gap = Math.max(1, width - lw - rw);
-  return left + " ".repeat(gap) + right;
-}
-
 /**
  * Approximate a tinted background by mixing the base canvas with a saturated
  * hue at low alpha. Used for status pills and tool-bar tints. Returns a hex