@multiclawcli/dashboard 0.4.0 → 0.5.1

package/dist/tui.js

@@ -3,8 +3,8 @@ import { render } from "ink";
 import { createElement } from "react";
 
 // src/tui/App.tsx
-import * as path from "path";
-import { isAbortError, Orchestrator } from "@multiclawcli/core";
+import * as path2 from "path";
+import { describeResumePlan, isAbortError, Orchestrator } from "@multiclawcli/core";
 import { Box as Box5, Text as Text5, useApp, useInput, useWindowSize } from "ink";
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 
@@ -15,7 +15,8 @@ var COMMANDS = [
     name: "focus",
     args: "<id>",
     description: "Focus an agent by id",
-    availability: "always"
+    availability: "always",
+    completes: "agent"
   },
   { name: "clear", description: "Clear the focused agent's log", availability: "always" },
   {
@@ -23,6 +24,46 @@ var COMMANDS = [
     description: "Browse finished turns",
     availability: "always"
   },
+  {
+    name: "verbose",
+    description: "Toggle tool detail in the stream",
+    availability: "always"
+  },
+  {
+    name: "retry",
+    args: "[id]",
+    description: "Re-run a failed agent (or all of them)",
+    availability: "idle"
+  },
+  {
+    name: "replay",
+    args: "[turn]",
+    description: "Run an earlier turn again",
+    availability: "idle"
+  },
+  {
+    name: "fork",
+    args: "[turn]",
+    description: "Edit an earlier turn's requirement",
+    availability: "always"
+  },
+  {
+    name: "export",
+    args: "[turn] [path]",
+    description: "Export a finished turn as Markdown",
+    availability: "always"
+  },
+  {
+    name: "search",
+    args: "<text>",
+    description: "Search the focused stream",
+    availability: "always"
+  },
+  {
+    name: "latest",
+    description: "Jump the stream to latest output",
+    availability: "always"
+  },
   {
     name: "cancel",
     description: "Cancel the running turn and its queue",
@@ -35,6 +76,16 @@ function availableCommands(running) {
   const phase = running ? "running" : "idle";
   return COMMANDS.filter((c) => c.availability === "always" || c.availability === phase);
 }
+function canRun(name, running) {
+  const command = COMMANDS.find((c) => c.name === name);
+  if (!command) return true;
+  return availableCommands(running).includes(command);
+}
+function unavailableReason(name, running) {
+  const command = COMMANDS.find((c) => c.name === name);
+  if (!command || availableCommands(running).includes(command)) return void 0;
+  return running ? `/${name} waits for the current turn to finish` : `/${name} only applies while a turn is running`;
+}
 function matchCommands(query, running) {
   const q = query.trim().toLowerCase();
   const pool = availableCommands(running);
@@ -60,16 +111,117 @@ function parseCommand(text) {
   const [name = "", ...args] = text.slice(1).trim().split(/\s+/);
   return name ? { name, args } : void 0;
 }
+function paletteRows(commands) {
+  return commands.map((command) => ({
+    key: command.name,
+    label: command.args ? `/${command.name} ${command.args}` : `/${command.name}`,
+    description: command.description
+  }));
+}
+function argQuery(text) {
+  if (!isCommandLine(text)) return void 0;
+  const match = /^(\S+)\s+(\S*)$/.exec(text);
+  if (!match) return void 0;
+  const command = COMMANDS.find((c) => c.name === match[1].slice(1));
+  if (!command?.completes) return void 0;
+  return { command, partial: match[2] };
+}
+function completeAgents(partial, ids, limit = 8) {
+  const query = partial.toLowerCase();
+  const matches = query ? ids.filter((id) => id.toLowerCase().startsWith(query)) : [...ids];
+  return matches.slice(0, limit);
+}
+function resolveAgentId(input, ids) {
+  if (ids.includes(input)) return { id: input };
+  const query = input.toLowerCase();
+  const hits = ids.filter((id) => id.toLowerCase().startsWith(query));
+  if (hits.length === 1) return { id: hits[0] };
+  if (hits.length === 0) return { error: `unknown agent: ${input}` };
+  return { error: `ambiguous: ${hits.join(", ")}` };
+}
 
 // src/tui/components/chrome.tsx
 import { Box, Text } from "ink";
 
 // src/tui/format.ts
+import stringWidth from "string-width";
 function truncate(text, max) {
   if (max <= 0) return "";
   if (text.length <= max) return text;
   return `${text.slice(0, Math.max(0, max - 1))}\u2026`;
 }
+function displayWidth(text) {
+  return stringWidth(text);
+}
+function wrapLine(line, width) {
+  const limit = Math.max(1, width);
+  if (line === "") return [""];
+  const rows = [];
+  let row = "";
+  let empty = true;
+  const flush = () => {
+    if (!empty) rows.push(row);
+    row = "";
+    empty = true;
+  };
+  const overflow = (word) => {
+    const chunks = splitByWidth(word, limit);
+    for (const chunk of chunks.slice(0, -1)) rows.push(chunk);
+    row = chunks[chunks.length - 1];
+    empty = row === "";
+  };
+  for (const word of line.split(" ")) {
+    const candidate = empty ? word : `${row} ${word}`;
+    if (displayWidth(candidate) <= limit) {
+      row = candidate;
+      empty = false;
+      continue;
+    }
+    const head = breakableHead(empty ? "" : row, word, limit);
+    if (head === 0) {
+      flush();
+      overflow(word);
+      continue;
+    }
+    rows.push(empty ? word.slice(0, head) : `${row} ${word.slice(0, head)}`);
+    overflow(word.slice(head));
+  }
+  flush();
+  return rows;
+}
+var CLOSERS = "\u3002\uFF0C\u3001\uFF1B\uFF1A\uFF1F\uFF01\uFF09\uFF3D\uFF5D\u300D\u300F\u3011\u300B\u3009\u201D\u2019\u2026\u2014\xB7";
+function breakableHead(row, word, limit) {
+  const chars = [...word];
+  let used = row === "" ? 0 : displayWidth(row) + 1;
+  let head = 0;
+  for (let i = 0; i < chars.length; i++) {
+    const charWidth = displayWidth(chars[i]);
+    if (used + charWidth > limit) break;
+    used += charWidth;
+    const next = chars[i + 1];
+    if (next !== void 0 && CLOSERS.includes(next)) continue;
+    if (charWidth >= 2 || next !== void 0 && displayWidth(next) >= 2) head = i + 1;
+  }
+  return head;
+}
+function splitByWidth(text, width) {
+  const chunks = [];
+  let chunk = "";
+  let used = 0;
+  for (const char of text) {
+    const charWidth = displayWidth(char);
+    if (chunk !== "" && used + charWidth > width) {
+      chunks.push(chunk);
+      chunk = char;
+      used = charWidth;
+    } else {
+      chunk += char;
+      used += charWidth;
+    }
+  }
+  chunks.push(chunk);
+  return chunks;
+}
 function formatDuration(ms) {
   if (!Number.isFinite(ms) || ms < 0) return "\u2014";
   if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
@@ -86,6 +238,22 @@ function circled(n) {
 function padRight(text, width) {
   return text.length >= width ? text : text + " ".repeat(width - text.length);
 }
+function oneDecimal(value) {
+  const fixed = value.toFixed(1);
+  return fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed;
+}
+function formatTokens(n) {
+  if (!Number.isFinite(n) || n < 0) return "\u2014";
+  if (n < 1e3) return String(Math.round(n));
+  if (n < 1e6) return `${oneDecimal(n / 1e3)}k`;
+  return `${oneDecimal(n / 1e6)}M`;
+}
+function formatCost(usd) {
+  if (!Number.isFinite(usd) || usd < 0) return "\u2014";
+  if (usd === 0) return "$0.00";
+  if (usd < 0.01) return "<$0.01";
+  return `$${usd.toFixed(2)}`;
+}
 
 // src/tui/layout.ts
 var MIN_COLUMNS = 40;
@@ -129,18 +297,23 @@ function computeLayout(input) {
   queueRows + menuRows + 1 + // prompt
   1;
   const bodyHeight = Math.max(MIN_BODY_ROWS, rows - reserved);
+  const showTeam = !compact;
+  const teamWidth = Math.min(30, Math.max(18, Math.floor(columns * 0.24)));
+  const streamChrome = (showTeam ? teamWidth + 1 : 0) + 1;
+  const streamWidth = Math.max(1, columns - streamChrome - 1);
   return {
     columns,
     rows,
     compact,
-    showTeam: !compact,
+    showTeam,
     showRail,
     railRows,
     welcome,
     bodyHeight,
     // The stream spends one of the body's rows on its own header.
     logViewport: Math.max(1, bodyHeight - 1),
-    teamWidth: Math.min(30, Math.max(18, Math.floor(columns * 0.24))),
+    teamWidth,
+    streamWidth,
     menuRows,
     queueRows
   };
@@ -160,6 +333,9 @@ var STATUS = {
   retrying: { glyph: "\u21BB", color: COLOR.warn, label: "retrying" },
   success: { glyph: "\u2713", color: COLOR.ok, label: "done" },
   failed: { glyph: "\u2717", color: COLOR.error, label: "failed" },
+  // Stopped, not broken: a filled square reads as "halted" and shares the muted
+  // treatment of a skip, so a Ctrl-C does not paint the roster red.
+  cancelled: { glyph: "\u25A0", color: COLOR.muted, dim: true, label: "cancelled" },
   skipped: { glyph: "\u2298", color: COLOR.muted, dim: true, label: "skipped" }
 };
 var SPINNER = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
@@ -187,7 +363,16 @@ var GLYPH = {
   /** The leader is asking for a decision rather than reporting one. */
   ask: "?",
   /** A mid-turn warning that rides alongside the outcome rather than hiding it. */
-  warn: "\u26A0"
+  warn: "\u26A0",
+  /**
+   * A pasted line break, drawn in the one-line prompt.
+   *
+   * MUST be exactly one column wide. `Prompt` maps `\n` to this glyph 1:1 — one
+   * character in, one character out — so its caret index stays valid; a glyph
+   * that rendered as two columns would push the caret off by one for every
+   * newline before it. If a terminal disagrees, this single glyph is the fix.
+   */
+  newline: "\u21B5"
 };
 
 // src/tui/components/chrome.tsx
@@ -304,7 +489,8 @@ var initialState = {
   leaderIds: [],
   autoFollow: true,
   scroll: 0,
-  history: []
+  history: [],
+  verbose: false
 };
 function stripAnsi(text) {
   return text.replace(ANSI_PATTERN, "");
@@ -346,19 +532,20 @@ function seedAgents(config) {
   }
   return agents;
 }
-function createInitialState(config) {
+function createInitialState(config, history = []) {
   const agents = seedAgents(config);
   return {
     phase: "idle",
     name: config.name,
-    turn: 0,
+    turn: history[history.length - 1]?.turn ?? 0,
     stages: [],
     leaderIds: leaderAgentIds(config),
     agents,
     focusId: Object.keys(agents)[0],
     autoFollow: true,
     scroll: 0,
-    history: []
+    history,
+    verbose: false
   };
 }
 function mergeStageAgents(agents, stages) {
@@ -393,6 +580,7 @@ function reduceEvent(state, event) {
         phase: "running",
         name: event.payload.name,
         requirement: event.payload.requirement ?? state.requirement,
+        reason: event.payload.selectionReason,
         stages: event.payload.stages,
         agents: mergeStageAgents(state.agents, event.payload.stages)
       };
@@ -441,7 +629,8 @@ function reduceEvent(state, event) {
       };
     }
     case "agent:output": {
-      const { agentId, chunk } = event.payload;
+      const { agentId, chunk, kind } = event.payload;
+      if (kind === "tool-detail" && !state.verbose) return state;
       const existing = state.agents[agentId];
       if (!existing) return state;
       return {
@@ -455,20 +644,19 @@ function reduceEvent(state, event) {
     case "agent:complete":
     case "agent:failed": {
       const result = event.payload;
-      const status = event.type === "agent:complete" ? "success" : "failed";
-      const existing = state.agents[result.agentId];
-      const next = existing ? {
-        ...existing,
-        status,
-        duration: result.duration,
-        attempts: result.attempts,
-        error: result.error
-      } : blankAgent(result.agentId, result.agentName, {
-        status,
+      const patch = {
+        status: result.status,
         duration: result.duration,
         attempts: result.attempts,
-        error: result.error
-      });
+        error: result.error,
+        usage: result.usage,
+        costUsd: result.costUsd,
+        // Present only on the success path; a failed agent has no session to
+        // continue, so `/retry` re-runs it cold.
+        sessionId: result.sessionId
+      };
+      const existing = state.agents[result.agentId];
+      const next = existing ? { ...existing, ...patch } : blankAgent(result.agentId, result.agentName, patch);
       return { ...state, agents: { ...state.agents, [result.agentId]: next } };
     }
     case "agent:skipped": {
@@ -495,6 +683,7 @@ function reduceEvent(state, event) {
         phase: "complete",
         success: event.payload.success,
         totalDuration: event.payload.totalDuration,
+        totalCostUsd: event.payload.totalCostUsd,
         endedAt: epoch(event.timestamp) ?? Date.now(),
         reply: event.payload.reply
       };
@@ -502,9 +691,12 @@ function reduceEvent(state, event) {
       return state;
   }
 }
-function focusedLineCount(turn) {
+function wrapLog(logs, width) {
+  return logs.split("\n").flatMap((line) => wrapLine(line, width));
+}
+function focusedRowCount(turn, width) {
   const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
-  return agent?.logs ? agent.logs.split("\n").length : 0;
+  return agent?.logs ? wrapLog(agent.logs, width).length : 0;
 }
 function snapshot(state) {
   return {
@@ -521,6 +713,8 @@ function snapshot(state) {
     scroll: state.scroll,
     success: state.success,
     totalDuration: state.totalDuration,
+    totalCostUsd: state.totalCostUsd,
+    reason: state.reason,
     warning: state.warning,
     reply: state.reply
   };
@@ -533,9 +727,12 @@ function mapShown(state, fn) {
   const next = fn(state);
   return next === state ? state : { ...state, ...next };
 }
+function recordedTurns(state) {
+  return [...state.history, ...state.phase === "complete" ? [snapshot(state)] : []];
+}
 function conversationTurns(state) {
   const turns = [];
-  for (const turn of [...state.history, snapshot(state)]) {
+  for (const turn of recordedTurns(state)) {
     if (turn.phase !== "complete" || !turn.requirement) continue;
     turns.push(
       turn.reply ? { requirement: turn.requirement, reply: turn.reply } : { requirement: turn.requirement }
@@ -549,7 +746,7 @@ function tuiReducer(state, action) {
       return reduceEvent(state, action.event);
     case "turn:start": {
       const ids = Object.keys(action.agents);
-      const history = state.turn > 0 ? [...state.history, snapshot(state)].slice(-MAX_HISTORY) : state.history;
+      const history = state.requirement !== void 0 ? [...state.history, snapshot(state)].slice(-MAX_HISTORY) : state.history;
       return {
         phase: "running",
         name: state.name,
@@ -563,11 +760,15 @@ function tuiReducer(state, action) {
         autoFollow: true,
         scroll: 0,
         history,
-        // A new requirement replaces the previous answer; leaving it up would
-        // make the old reply look like the response to the new request. Reading
-        // a past turn ends for the same reason — the panes belong to the run.
+        // A new requirement also replaces the previous leader metadata; leaving
+        // it up would make the old answer or routing reason look like the
+        // response to the new request. Reading a past turn ends for the same
+        // reason — the panes belong to the run.
+        reason: void 0,
         reply: void 0,
-        view: void 0
+        view: void 0,
+        // A console setting, carried across turns rather than reset with them.
+        verbose: state.verbose
       };
     }
     case "focus:cycle":
@@ -587,11 +788,35 @@ function tuiReducer(state, action) {
       });
     case "stream:scroll":
       return mapShown(state, (turn) => {
-        const lines = focusedLineCount(turn);
-        const maxScroll = Math.max(0, lines - Math.max(1, action.viewport));
+        const rows = focusedRowCount(turn, action.width);
+        const maxScroll = Math.max(0, rows - Math.max(1, action.viewport));
         const next = Math.min(Math.max(0, turn.scroll + action.delta), maxScroll);
         return next === turn.scroll ? turn : { ...turn, scroll: next };
       });
+    case "stream:search":
+      return mapShown(state, (turn) => {
+        const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
+        if (!agent?.logs || action.query === "") return turn;
+        const rows = wrapLog(agent.logs, action.width);
+        const needle = action.query.toLowerCase();
+        let index = -1;
+        for (let i = rows.length - 1; i >= 0; i--) {
+          if (rows[i].toLowerCase().includes(needle)) {
+            index = i;
+            break;
+          }
+        }
+        if (index === -1) return turn;
+        const height = Math.max(1, action.viewport);
+        const maxScroll = Math.max(0, rows.length - height);
+        const scroll = Math.min(Math.max(0, rows.length - 1 - index), maxScroll);
+        return scroll === turn.scroll && !turn.autoFollow ? turn : { ...turn, scroll, autoFollow: false };
+      });
+    case "stream:latest":
+      return mapShown(
+        state,
+        (turn) => turn.scroll === 0 && turn.autoFollow ? turn : { ...turn, scroll: 0, autoFollow: true }
+      );
     case "stream:clear":
       return mapShown(state, (turn) => {
         const id = turn.focusId;
@@ -605,6 +830,8 @@ function tuiReducer(state, action) {
     }
     case "view:close":
       return state.view ? { ...state, view: void 0 } : state;
+    case "verbose:toggle":
+      return { ...state, verbose: !state.verbose };
   }
 }
 function stageStatus(stage, agents) {
@@ -613,9 +840,15 @@ function stageStatus(stage, agents) {
   if (statuses.some((s) => s === "running" || s === "retrying")) return "running";
   if (statuses.length > 0 && statuses.every((s) => s === "success")) return "success";
   if (statuses.length > 0 && statuses.every((s) => s === "skipped")) return "skipped";
+  if (statuses.length > 0 && statuses.every((s) => s === "cancelled")) return "cancelled";
   return "pending";
 }
-var SETTLED = /* @__PURE__ */ new Set(["success", "failed", "skipped"]);
+var SETTLED = /* @__PURE__ */ new Set([
+  "success",
+  "failed",
+  "cancelled",
+  "skipped"
+]);
 function progress(turn) {
   const agents = Object.values(turn.agents);
   return { done: agents.filter((a) => SETTLED.has(a.status)).length, total: agents.length };
@@ -632,15 +865,15 @@ function turnElapsed(turn, now) {
   const end = turn.phase === "running" ? now : turn.endedAt ?? now;
   return Math.max(0, end - turn.startedAt);
 }
-function visibleLog(turn, viewport) {
+function visibleLog(turn, viewport, width) {
   const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
-  const all = agent?.logs ? agent.logs.split("\n") : [];
+  const all = agent?.logs ? wrapLog(agent.logs, width) : [];
   const height = Math.max(1, viewport);
   const maxScroll = Math.max(0, all.length - height);
   const scrolledBack = Math.min(Math.max(0, turn.scroll), maxScroll);
   const end = all.length - scrolledBack;
   return {
-    lines: all.slice(Math.max(0, end - height), end),
+    rows: all.slice(Math.max(0, end - height), end),
     scrolledBack,
     following: scrolledBack === 0
   };
@@ -672,9 +905,9 @@ var HELP_GROUPS = [
     title: "commands",
     rows: [
       ["/", "Command menu"],
-      ["/history", "Browse finished turns"],
       ["?", "This help"],
-      ["ctrl+c", "Cancel the turn and its queue \xB7 again to quit"]
+      ["ctrl+c", "Cancel the turn and its queue \xB7 again to quit"],
+      ["/<command>", `All ${COMMANDS.length} commands \u2014 type / to browse`]
     ]
   }
 ];
@@ -684,7 +917,7 @@ var HISTORY_CHROME_ROWS = 4;
 function historyCapacity(maxRows) {
   return Math.max(1, Math.floor((maxRows - HISTORY_CHROME_ROWS) / TURN_ROWS));
 }
-function historyWindowStart(selected, total, capacity) {
+function listWindowStart(selected, total, capacity) {
   const maxStart = Math.max(0, total - capacity);
   return Math.min(Math.max(0, Math.min(selected, selected - capacity + 1)), maxStart);
 }
@@ -722,7 +955,7 @@ function HistoryOverlay({
   maxRows
 }) {
   const capacity = historyCapacity(maxRows);
-  const start = historyWindowStart(selected, turns.length, capacity);
+  const start = listWindowStart(selected, turns.length, capacity);
   const visible = turns.slice(start, start + capacity);
   const range = turns.length > capacity ? ` \xB7 showing ${start + 1}\u2013${start + visible.length} of ${turns.length}` : "";
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexShrink: 0, paddingLeft: 2, paddingTop: 1, width, children: [
@@ -803,7 +1036,11 @@ function TeamRow({
           glyph,
           " ",
           agent.icon ? `${agent.icon} ` : "",
-          agent.name
+          agent.name,
+          agent.taskTitle ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+            " ",
+            agent.taskTitle
+          ] }) : null
         ]
       }
     ) }),
@@ -856,18 +1093,19 @@ function Divider() {
 function StreamPanel({
   turn,
   height,
+  width,
   now,
   spinner
 }) {
   const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
   const viewport = Math.max(1, height - 1);
-  const window = visibleLog(turn, viewport);
+  const window = visibleLog(turn, viewport, width);
   const style = agent ? STATUS[agent.status] : void 0;
   const elapsed = agent ? agentElapsed(agent, now) : void 0;
   return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexGrow: 1, height, paddingLeft: 1, children: [
     /* @__PURE__ */ jsxs3(Box3, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs3(Box3, { flexShrink: 1, children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, wrap: "truncate-end", children: agent?.name ?? "\u2014" }),
+      /* @__PURE__ */ jsx3(Box3, { flexShrink: 1, children: /* @__PURE__ */ jsxs3(Text3, { wrap: "truncate-end", children: [
+        /* @__PURE__ */ jsx3(Text3, { bold: true, children: agent?.name ?? "\u2014" }),
         agent?.model ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
           " \xB7 ",
           agent.model
@@ -875,8 +1113,23 @@ function StreamPanel({
         agent && style ? /* @__PURE__ */ jsxs3(Fragment, { children: [
           /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: " \xB7 " }),
           /* @__PURE__ */ jsx3(Text3, { color: style.color, dimColor: style.dim, children: agent.status === "running" ? `${spinner} ${style.label}` : style.label })
+        ] }) : null,
+        agent?.taskTitle ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+          " \xB7 ",
+          agent.taskTitle
+        ] }) : null,
+        agent?.usage?.contextTokens !== void 0 && agent.usage.contextSize !== void 0 ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+          " ",
+          "\xB7 ctx ",
+          formatTokens(agent.usage.contextTokens),
+          "/",
+          formatTokens(agent.usage.contextSize)
+        ] }) : null,
+        agent?.costUsd !== void 0 ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+          " \xB7 ",
+          formatCost(agent.costUsd)
         ] }) : null
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxs3(Box3, { flexShrink: 0, children: [
         elapsed === void 0 ? null : /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
           formatDuration(elapsed),
@@ -885,11 +1138,28 @@ function StreamPanel({
         /* @__PURE__ */ jsx3(Text3, { color: window.following ? COLOR.accent : COLOR.warn, children: window.following ? GLYPH.live : `${GLYPH.paused} ${window.scrolledBack}\u2191` })
       ] })
     ] }),
-    window.lines.length === 0 ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: turn.phase === "running" ? "waiting for output\u2026" : "no output yet" }) : window.lines.map((line, index) => (
-      // Log lines are an append-only tail; position is the identity.
-      // biome-ignore lint/suspicious/noArrayIndexKey: positional log tail
-      /* @__PURE__ */ jsx3(Text3, { wrap: "truncate-end", children: line }, index)
-    ))
+    window.rows.length === 0 ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: turn.phase === "running" ? "waiting for output\u2026" : "no output yet" }) : (
+      // The tail, already wrapped to `width` by `visibleLog` — the pane draws
+      // rows, and one log line is several of them. `visibleLog` also picks
+      // which rows, so the content here is exactly the pane's height and the
+      // oldest rows are the ones already gone: nothing is left to clip, which
+      // is why this box is not bottom-pinned. Pinning it would only leave a
+      // gap under the header whenever an agent has not said much yet.
+      //
+      // Rows are rendered with `truncate-end` rather than letting Ink wrap
+      // them again: they are supposed to fit, and if `width` was ever
+      // optimistic the failure should be a shaved row, not a re-wrap that
+      // overflows the pane and pushes the newest output out of sight.
+      //
+      // `flexShrink={0}` stops Yoga compressing the rows into each other,
+      // and `overflow="hidden"` is the backstop if any of the above is ever
+      // wrong.
+      /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", flexShrink: 0, height: viewport, overflow: "hidden", children: window.rows.map((row, index) => (
+        // Rows are an append-only tail; position is the identity.
+        // biome-ignore lint/suspicious/noArrayIndexKey: positional log tail
+        /* @__PURE__ */ jsx3(Box3, { flexShrink: 0, children: /* @__PURE__ */ jsx3(Text3, { wrap: "truncate-end", children: row }) }, index)
+      )) })
+    )
   ] });
 }
 function ReplyPanel({ reply, width }) {
@@ -909,6 +1179,19 @@ function ReplyPanel({ reply, width }) {
     ] })
   );
 }
+function ErrorPanel({ message, width }) {
+  return (
+    // `flexShrink={0}` — see ReplyPanel. A compressed column box folds its own
+    // text rows into each other before the body gets a chance to clip them.
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexShrink: 0, paddingLeft: 2, paddingTop: 1, width, children: [
+      /* @__PURE__ */ jsxs3(Text3, { color: COLOR.error, bold: true, children: [
+        GLYPH.warn,
+        " the run stopped"
+      ] }),
+      /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text3, { color: COLOR.error, children: message }) })
+    ] })
+  );
+}
 function WelcomePanel({ turn, width }) {
   const agents = Object.values(turn.agents);
   const leaderId = turn.leaderIds[0];
@@ -951,10 +1234,11 @@ function Prompt({
   caretVisible,
   placeholder
 }) {
+  const shown = value.replace(/\r/g, "").replace(/\n/g, GLYPH.newline);
   const ghost = value === "";
-  const before = value.slice(0, cursor);
-  const cell = ghost ? placeholder.slice(0, 1) : value.slice(cursor, cursor + 1);
-  const tail = ghost ? placeholder.slice(1) : value.slice(cursor + 1);
+  const before = shown.slice(0, cursor);
+  const cell = ghost ? placeholder.slice(0, 1) : shown.slice(cursor, cursor + 1);
+  const tail = ghost ? placeholder.slice(1) : shown.slice(cursor + 1);
   return /* @__PURE__ */ jsxs4(Box4, { flexShrink: 0, children: [
     /* @__PURE__ */ jsxs4(Text4, { color: COLOR.accent, children: [
       GLYPH.caret,
@@ -965,14 +1249,10 @@ function Prompt({
     /* @__PURE__ */ jsx4(Text4, { dimColor: ghost, children: tail })
   ] });
 }
-function CommandMenu({ commands, selected }) {
-  const nameWidth = Math.max(
-    1,
-    ...commands.map((c) => c.name.length + (c.args ? c.args.length + 1 : 0))
-  );
-  return /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", paddingLeft: 2, children: commands.map((command, index) => {
+function CommandMenu({ rows, selected }) {
+  const labelWidth = Math.max(1, ...rows.map((row) => row.label.length));
+  return /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", paddingLeft: 2, children: rows.map((row, index) => {
     const active = index === selected;
-    const label = command.args ? `${command.name} ${command.args}` : command.name;
     return /* @__PURE__ */ jsxs4(
       Text4,
       {
@@ -981,17 +1261,82 @@ function CommandMenu({ commands, selected }) {
         wrap: "truncate-end",
         children: [
           active ? GLYPH.caret : " ",
-          " /",
-          padRight(label, nameWidth),
           " ",
-          command.description
+          padRight(row.label, labelWidth),
+          " ",
+          row.description
         ]
       },
-      command.name
+      row.key
     );
   }) });
 }
 
+// src/tui/history.ts
+import * as fs from "fs";
+import * as path from "path";
+var CONSOLE_DIR = "console";
+var HISTORY_FILE = "history.json";
+var EXPORT_DIR = "exports";
+function historyPath(workDir) {
+  return path.join(workDir, ".multiclaw", CONSOLE_DIR, HISTORY_FILE);
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null;
+}
+function isTurnView(value) {
+  if (!isObject(value)) return false;
+  const turn = value;
+  return typeof turn.turn === "number" && typeof turn.phase === "string" && isObject(turn.agents) && Object.values(turn.agents).every(isObject) && Array.isArray(turn.stages) && turn.stages.every(isObject) && Array.isArray(turn.leaderIds);
+}
+function loadHistory(workDir) {
+  try {
+    const raw = fs.readFileSync(historyPath(workDir), "utf-8");
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(isTurnView).slice(-MAX_HISTORY);
+  } catch {
+    return [];
+  }
+}
+async function saveHistory(workDir, turns) {
+  const target = historyPath(workDir);
+  await fs.promises.mkdir(path.dirname(target), { recursive: true });
+  const tmp = `${target}.tmp`;
+  await fs.promises.writeFile(tmp, JSON.stringify(turns), "utf-8");
+  await fs.promises.rename(tmp, target);
+}
+function exportPath(workDir, turn) {
+  return path.join(workDir, ".multiclaw", CONSOLE_DIR, EXPORT_DIR, `turn-${turn}.md`);
+}
+async function exportTurn(turn, filePath) {
+  await fs.promises.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.promises.writeFile(filePath, formatTurnMarkdown(turn), "utf-8");
+}
+function formatTurnMarkdown(turn) {
+  const lines = [`# Turn ${turn.turn}`, ""];
+  if (turn.requirement) lines.push("## Requirement", "", turn.requirement, "");
+  if (turn.reply) {
+    lines.push("## Reply", "", `_${turn.reply.mode}_`, "", turn.reply.message, "");
+  } else {
+    lines.push("## Result", "", `Status: ${turn.success ? "success" : "failed"}`, "");
+  }
+  const agents = Object.values(turn.agents);
+  if (agents.length > 0) {
+    lines.push("## Agents", "");
+    for (const agent of agents) {
+      lines.push(`- ${agent.id}: ${agent.name} \u2014 ${agent.status}`);
+    }
+    lines.push("");
+    lines.push("## Logs", "");
+    for (const agent of agents) {
+      lines.push(`### ${agent.id}: ${agent.name}`, "", "```", agent.logs ?? "", "```", "");
+    }
+  }
+  return `${lines.join("\n").trimEnd()}
+`;
+}
+
 // src/tui/App.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FLUSH_INTERVAL_MS = 80;
@@ -1000,6 +1345,19 @@ var BLINK_INTERVAL_MS = 530;
 var INPUT_PLACEHOLDER = "describe what the team should do\u2026";
 var RUNNING_PLACEHOLDER = "type to queue a follow-up\u2026";
 var EMPTY_LINE = { text: "", cursor: 0 };
+function pickRecordedTurn(state, raw, whenEmpty) {
+  const turns = recordedTurns(state);
+  if (turns.length === 0) return { error: whenEmpty };
+  const target = raw === void 0 ? turns[turns.length - 1] : turns.find((t) => String(t.turn) === raw);
+  if (!target) return { error: `no turn ${raw}` };
+  return { record: target };
+}
+function pickTurn(state, raw, whenEmpty) {
+  const target = pickRecordedTurn(state, raw, whenEmpty);
+  if ("error" in target) return target;
+  if (!target.record.requirement) return { error: `turn ${target.record.turn} has no requirement` };
+  return { record: target.record, requirement: target.record.requirement };
+}
 function StatusLine({
   state,
   running,
@@ -1037,8 +1395,10 @@ function StatusLine({
   if (state.phase === "complete") {
     const time = state.totalDuration === void 0 ? "" : ` ${formatDuration(state.totalDuration)}`;
     const outcome2 = state.success ? `${STATUS.success.glyph} done${time}` : `${STATUS.failed.glyph} finished with failures${time}`;
+    const cost = state.totalCostUsd === void 0 ? "" : ` \xB7 ${formatCost(state.totalCostUsd)}`;
     return /* @__PURE__ */ jsxs5(Text5, { color: state.success ? COLOR.ok : COLOR.error, wrap: "truncate-end", children: [
       outcome2,
+      cost,
       state.warning ? ` \xB7 ${GLYPH.warn} ${state.warning}` : ""
     ] });
   }
@@ -1053,7 +1413,11 @@ function StatusLine({
 function App({ config, onTurnStart }) {
   const { exit } = useApp();
   const { columns, rows } = useWindowSize();
-  const [state, dispatch] = useReducer(tuiReducer, config, createInitialState);
+  const [state, dispatch] = useReducer(
+    tuiReducer,
+    config,
+    (c) => createInitialState(c, loadHistory(c.workDir))
+  );
   const stateRef = useRef(state);
   stateRef.current = state;
   const [line, setLine] = useState(EMPTY_LINE);
@@ -1092,8 +1456,19 @@ function App({ config, onTurnStart }) {
     const timer = setInterval(() => setCaretOn((on) => !on), BLINK_INTERVAL_MS);
     return () => clearInterval(timer);
   }, [running, line.text]);
+  const lastSaved = useRef(void 0);
+  useEffect(() => {
+    const turns = recordedTurns(stateRef.current).slice(-MAX_HISTORY);
+    if (turns.length === 0) return;
+    const json = JSON.stringify(turns);
+    if (json === lastSaved.current) return;
+    lastSaved.current = json;
+    void saveHistory(config.workDir, turns).catch(
+      (err) => setNotice(`history not saved: ${err.message}`)
+    );
+  }, [state.history, state.phase]);
   const startTurn = useCallback(
-    async (requirement) => {
+    async (requirement, opts) => {
       setError(void 0);
       setCancelled(false);
       setNotice(void 0);
@@ -1106,14 +1481,16 @@ function App({ config, onTurnStart }) {
         startedAt: Date.now()
       });
       const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
-      const logDir = path.join(config.workDir, ".multiclaw", "runs", `run-${stamp}`, "logs");
+      const logDir = path2.join(config.workDir, ".multiclaw", "runs", `run-${stamp}`, "logs");
       const runConfig = {
         ...config,
         context: { ...config.context, requirement },
         // An answer only reads as a requirement next to the question it answers,
         // so the leader is handed the turns behind this one as well.
         history: earlierTurns,
-        logDir
+        logDir,
+        // Only a retry carries this; a normal turn lets the leader route.
+        ...opts?.resume ? { resume: opts.resume } : {}
       };
       const controller = new AbortController();
       abortRef.current = controller;
@@ -1145,9 +1522,49 @@ function App({ config, onTurnStart }) {
     setQueue(rest);
     void startTurn(next);
   }, [running, queue, startTurn]);
+  const query = menuQuery(line.text);
+  const matches = useMemo(
+    () => query === void 0 ? [] : matchCommands(query, running),
+    [query, running]
+  );
+  const historyTurns = useMemo(() => [...state.history].reverse(), [state.history]);
+  const historyIndex = historyTurns.length === 0 ? 0 : Math.min(historyCursor, historyTurns.length - 1);
+  const shown = state.view ?? state;
+  const arg = argQuery(line.text);
+  const argRows = arg ? completeAgents(arg.partial, Object.keys(shown.agents)).map((id) => ({
+    key: id,
+    label: id,
+    // The static role, not the per-turn task title: while completing, the
+    // user is asking "which agent is this", not "what is it doing now".
+    description: shown.agents[id]?.description ?? shown.agents[id]?.name ?? id
+  })) : [];
+  const allRows = arg ? argRows : paletteRows(matches);
+  const paletteKey = arg ? `${arg.command.name} ${arg.partial}` : query;
+  const paletteTotal = allRows.length;
+  const menuIndex = menuCursor.query === paletteKey ? menuCursor.index : 0;
+  const selected = paletteTotal === 0 ? 0 : Math.min(menuIndex, paletteTotal - 1);
+  const menuOpen = !helpOpen && !historyOpen && query !== void 0 && matches.length > 0;
+  const argOpen = !helpOpen && !historyOpen && arg !== void 0 && argRows.length > 0;
+  const paletteOpen = menuOpen || argOpen;
+  const layout = computeLayout({
+    columns,
+    rows,
+    turn: state.turn,
+    overlay: helpOpen || historyOpen,
+    menuRows: paletteOpen ? paletteTotal : 0,
+    queueRows: queue.length,
+    notice: notice !== void 0,
+    viewing: state.view !== void 0,
+    hasRail: shown.leaderIds.length > 0 || shown.stages.length > 0,
+    railCells: railCellWidths(shown)
+  });
   const runCommand = useCallback(
     (name, args) => {
       setLine(EMPTY_LINE);
+      if (!canRun(name, running)) {
+        setNotice(unavailableReason(name, running));
+        return;
+      }
       const shown2 = state.view ?? state;
       switch (name) {
         case "agents":
@@ -1156,17 +1573,18 @@ function App({ config, onTurnStart }) {
           );
           return;
         case "focus": {
-          const id = args[0];
-          if (!id) {
+          const input = args[0];
+          if (!input) {
             setNotice("usage: /focus <agent id>");
             return;
           }
-          if (!shown2.agents[id]) {
-            setNotice(`unknown agent: ${id}`);
+          const resolved = resolveAgentId(input, Object.keys(shown2.agents));
+          if ("error" in resolved) {
+            setNotice(resolved.error);
             return;
           }
-          dispatch({ type: "focus:set", agentId: id });
-          setNotice(`focused ${id}`);
+          dispatch({ type: "focus:set", agentId: resolved.id });
+          setNotice(`focused ${resolved.id}`);
           return;
         }
         case "clear":
@@ -1186,6 +1604,97 @@ function App({ config, onTurnStart }) {
           setHistoryCursor(0);
           setHistoryOpen(true);
           return;
+        case "verbose":
+          dispatch({ type: "verbose:toggle" });
+          setNotice(state.verbose ? "verbose off" : "verbose on \u2014 showing tool detail");
+          return;
+        case "retry": {
+          if (state.phase !== "complete" || !state.requirement) {
+            setNotice("nothing to retry yet");
+            return;
+          }
+          let ids;
+          if (args[0]) {
+            const resolved = resolveAgentId(args[0], Object.keys(state.agents));
+            if ("error" in resolved) {
+              setNotice(resolved.error);
+              return;
+            }
+            ids = [resolved.id];
+          } else {
+            ids = Object.values(state.agents).filter((agent) => agent.status === "failed").map((agent) => agent.id);
+          }
+          if (ids.length === 0) {
+            setNotice("nothing failed");
+            return;
+          }
+          const sessions = Object.fromEntries(
+            ids.filter((id) => state.agents[id]?.sessionId).map((id) => [id, state.agents[id].sessionId])
+          );
+          void startTurn(state.requirement, {
+            resume: {
+              agents: ids,
+              ...Object.keys(sessions).length > 0 ? { sessions } : {}
+            }
+          });
+          setNotice(
+            `retrying ${ids.join(", ")} \u2014 ${describeResumePlan({
+              agents: ids,
+              sessions,
+              team: config.agents
+            })}`
+          );
+          return;
+        }
+        case "replay": {
+          const target = pickTurn(state, args[0], "nothing to replay yet");
+          if ("error" in target) {
+            setNotice(target.error);
+            return;
+          }
+          void startTurn(target.requirement);
+          setNotice(`replaying turn ${target.record.turn}`);
+          return;
+        }
+        case "fork": {
+          const target = pickTurn(state, args[0], "nothing to fork yet");
+          if ("error" in target) {
+            setNotice(target.error);
+            return;
+          }
+          setLine({ text: target.requirement, cursor: target.requirement.length });
+          setNotice(`editing turn ${target.record.turn} \u2014 enter to run`);
+          return;
+        }
+        case "export": {
+          const target = pickRecordedTurn(state, args[0], "nothing to export yet");
+          if ("error" in target) {
+            setNotice(target.error);
+            return;
+          }
+          const file = args[1] ? path2.resolve(config.workDir, args[1]) : exportPath(config.workDir, target.record.turn);
+          void exportTurn(target.record, file).then(() => setNotice(`exported turn ${target.record.turn} to ${file}`)).catch((err) => setNotice(`export failed: ${err.message}`));
+          return;
+        }
+        case "search": {
+          const text = args.join(" ");
+          if (!text) {
+            setNotice("usage: /search <text>");
+            return;
+          }
+          dispatch({
+            type: "stream:search",
+            query: text,
+            viewport: layout.logViewport,
+            width: layout.streamWidth
+          });
+          setNotice(`searched for ${text}`);
+          return;
+        }
+        case "latest":
+          dispatch({ type: "stream:latest" });
+          setNotice("showing latest output");
+          return;
         case "cancel": {
           if (!abortRef.current) {
             setNotice("nothing to cancel");
@@ -1209,7 +1718,7 @@ function App({ config, onTurnStart }) {
           setNotice(`unknown command: /${name}`);
       }
     },
-    [config, exit, queue.length, state]
+    [config, exit, layout.logViewport, layout.streamWidth, queue.length, running, state, startTurn]
   );
   const submit = useCallback(() => {
     const text = line.text.trim();
@@ -1249,31 +1758,9 @@ function App({ config, onTurnStart }) {
   const moveTo = useCallback((cursor) => {
     setLine((l) => ({ ...l, cursor }));
   }, []);
-  const query = menuQuery(line.text);
-  const matches = useMemo(
-    () => query === void 0 ? [] : matchCommands(query, running),
-    [query, running]
-  );
-  const menuIndex = menuCursor.query === query ? menuCursor.index : 0;
-  const selected = matches.length === 0 ? 0 : Math.min(menuIndex, matches.length - 1);
-  const menuOpen = !helpOpen && !historyOpen && query !== void 0 && matches.length > 0;
-  const historyTurns = useMemo(() => [...state.history].reverse(), [state.history]);
-  const historyIndex = historyTurns.length === 0 ? 0 : Math.min(historyCursor, historyTurns.length - 1);
-  const shown = state.view ?? state;
-  const layout = computeLayout({
-    columns,
-    rows,
-    turn: state.turn,
-    overlay: helpOpen || historyOpen,
-    menuRows: menuOpen ? matches.length : 0,
-    queueRows: queue.length,
-    notice: notice !== void 0,
-    viewing: state.view !== void 0,
-    hasRail: shown.leaderIds.length > 0 || shown.stages.length > 0,
-    railCells: railCellWidths(shown)
-  });
-  const menuWindow = matches.slice(0, layout.menuRows);
-  const menuSelected = Math.min(selected, Math.max(0, menuWindow.length - 1));
+  const windowStart = listWindowStart(selected, paletteTotal, layout.menuRows);
+  const paletteWindow = allRows.slice(windowStart, windowStart + layout.menuRows);
+  const paletteSelected = selected - windowStart;
   const now = Date.now();
   const spinner = SPINNER[tick % SPINNER.length];
   const handleKey = (char, key) => {
@@ -1340,13 +1827,13 @@ function App({ config, onTurnStart }) {
       dispatch({ type: "focus:cycle", delta: key.shift ? -1 : 1 });
       return;
     }
-    if (menuOpen) {
+    if (paletteOpen) {
       if (key.upArrow) {
-        setMenuCursor({ query, index: (menuIndex - 1 + matches.length) % matches.length });
+        setMenuCursor({ query: paletteKey, index: (menuIndex - 1 + paletteTotal) % paletteTotal });
         return;
       }
       if (key.downArrow) {
-        setMenuCursor({ query, index: (menuIndex + 1) % matches.length });
+        setMenuCursor({ query: paletteKey, index: (menuIndex + 1) % paletteTotal });
         return;
       }
       if (key.escape) {
@@ -1354,24 +1841,45 @@ function App({ config, onTurnStart }) {
         return;
       }
       if (key.return) {
-        runCommand(matches[selected].name, []);
+        if (arg) runCommand(arg.command.name, [allRows[selected].key]);
+        else runCommand(matches[selected].name, []);
         return;
       }
     }
     if (key.upArrow) {
-      dispatch({ type: "stream:scroll", delta: 1, viewport: layout.logViewport });
+      dispatch({
+        type: "stream:scroll",
+        delta: 1,
+        viewport: layout.logViewport,
+        width: layout.streamWidth
+      });
       return;
     }
     if (key.downArrow) {
-      dispatch({ type: "stream:scroll", delta: -1, viewport: layout.logViewport });
+      dispatch({
+        type: "stream:scroll",
+        delta: -1,
+        viewport: layout.logViewport,
+        width: layout.streamWidth
+      });
       return;
     }
     if (key.pageUp) {
-      dispatch({ type: "stream:scroll", delta: layout.logViewport, viewport: layout.logViewport });
+      dispatch({
+        type: "stream:scroll",
+        delta: layout.logViewport,
+        viewport: layout.logViewport,
+        width: layout.streamWidth
+      });
       return;
     }
     if (key.pageDown) {
-      dispatch({ type: "stream:scroll", delta: -layout.logViewport, viewport: layout.logViewport });
+      dispatch({
+        type: "stream:scroll",
+        delta: -layout.logViewport,
+        viewport: layout.logViewport,
+        width: layout.streamWidth
+      });
       return;
     }
     if (char === "?" && line.text === "" && !running) {
@@ -1399,6 +1907,10 @@ function App({ config, onTurnStart }) {
       return;
     }
     if (key.escape) {
+      if (error) {
+        setError(void 0);
+        return;
+      }
       if (state.view) {
         dispatch({ type: "view:close" });
         return;
@@ -1415,12 +1927,12 @@ function App({ config, onTurnStart }) {
       deleteForward();
       return;
     }
-    if (char && !key.ctrl && !key.meta) insert(char.replace(/[\r\n]+/g, " "));
+    if (char && !key.ctrl && !key.meta) insert(char.replace(/\r\n?/g, "\n"));
   };
   const handlerRef = useRef(handleKey);
   handlerRef.current = handleKey;
   useInput((char, key) => handlerRef.current(char, key));
-  const keys = helpOpen ? "esc close" : historyOpen ? "\u2191\u2193 select \xB7 enter open \xB7 esc close" : menuOpen ? "\u2191\u2193 select \xB7 enter run \xB7 esc close" : running ? "enter queues \xB7 ctrl+c cancel" : state.view ? "esc live \xB7 tab agent \xB7 ? help" : state.reply ? "enter sends \xB7 / commands \xB7 ? help" : "tab switch \xB7 / commands \xB7 ? help";
+  const keys = helpOpen ? "esc close" : historyOpen ? "\u2191\u2193 select \xB7 enter open \xB7 esc close" : argOpen ? `\u2191\u2193 select \xB7 enter ${arg?.command.name} \xB7 esc close` : menuOpen ? "\u2191\u2193 select \xB7 enter run \xB7 esc close" : running ? "enter queues \xB7 ctrl+c cancel" : state.view ? "esc live \xB7 tab agent \xB7 ? help" : state.reply ? "enter sends \xB7 / commands \xB7 ? help" : "tab switch \xB7 / commands \xB7 ? help";
   return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", height: layout.rows, children: [
     /* @__PURE__ */ jsx5(
       Header,
@@ -1437,6 +1949,7 @@ function App({ config, onTurnStart }) {
       // the chrome below it off the screen.
       /* @__PURE__ */ jsx5(Box5, { marginTop: 1, height: layout.railRows, overflow: "hidden", flexShrink: 0, children: /* @__PURE__ */ jsx5(PipelineRail, { turn: shown, spinner }) })
     ) : null,
+    shown.reason ? /* @__PURE__ */ jsx5(Text5, { dimColor: true, wrap: "truncate-end", children: `  reason: ${shown.reason}` }) : null,
     /* @__PURE__ */ jsx5(
       Box5,
       {
@@ -1453,12 +1966,26 @@ function App({ config, onTurnStart }) {
             width: layout.columns,
             maxRows: layout.bodyHeight
           }
-        ) : layout.welcome ? /* @__PURE__ */ jsx5(WelcomePanel, { turn: state, width: layout.columns }) : shown.reply ? /* @__PURE__ */ jsx5(ReplyPanel, { reply: shown.reply, width: layout.columns }) : /* @__PURE__ */ jsxs5(Box5, { height: layout.bodyHeight, flexShrink: 0, flexDirection: "row", children: [
+        ) : layout.welcome ? /* @__PURE__ */ jsx5(WelcomePanel, { turn: state, width: layout.columns }) : error ? (
+          // The error wins over a reply: a run that stopped with an error is the
+          // most urgent thing on screen, and a stale answer underneath it would
+          // read as the outcome. The status line keeps a one-line version too.
+          /* @__PURE__ */ jsx5(ErrorPanel, { message: error, width: layout.columns })
+        ) : shown.reply ? /* @__PURE__ */ jsx5(ReplyPanel, { reply: shown.reply, width: layout.columns }) : /* @__PURE__ */ jsxs5(Box5, { height: layout.bodyHeight, flexShrink: 0, flexDirection: "row", children: [
           layout.showTeam ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
             /* @__PURE__ */ jsx5(TeamPanel, { turn: shown, width: layout.teamWidth, now, spinner }),
             /* @__PURE__ */ jsx5(Divider, {})
           ] }) : null,
-          /* @__PURE__ */ jsx5(StreamPanel, { turn: shown, height: layout.bodyHeight, now, spinner })
+          /* @__PURE__ */ jsx5(
+            StreamPanel,
+            {
+              turn: shown,
+              height: layout.bodyHeight,
+              width: layout.streamWidth,
+              now,
+              spinner
+            }
+          )
         ] })
       }
     ),
@@ -1468,7 +1995,7 @@ function App({ config, onTurnStart }) {
       notice
     ] }) : null,
     /* @__PURE__ */ jsx5(QueueStrip, { items: queue, max: layout.queueRows }),
-    menuOpen ? /* @__PURE__ */ jsx5(CommandMenu, { commands: menuWindow, selected: menuSelected }) : null,
+    paletteOpen ? /* @__PURE__ */ jsx5(CommandMenu, { rows: paletteWindow, selected: paletteSelected }) : null,
     /* @__PURE__ */ jsx5(
       Prompt,
       {
@@ -1537,6 +2064,7 @@ export {
   measureRailRows,
   plannedAgents,
   progress,
+  recordedTurns,
   reduceEvent,
   seedAgents,
   stageStatus,