@rind-ai/cli 0.6.1 → 0.7.0

package/lib/rendering.js

@@ -1,10 +1,363 @@
-import { clipCells, middleClipCells, textWidth, wrapTextCells } from "./text-width.js";
+import { clipCells, graphemes, middleClipCells, stripAnsi, textWidth, wrapTextCells } from "./text-width.js";
+import { formatDuration } from "./tool-display.js";
 import { paint, flavorSwatch } from "./theme.js";
 import { homedir } from "node:os";
 
 const MAX_STARTUP_BANNER_WIDTH = 80;
 const MAX_COMPOSER_WIDTH = 78;
 const MAX_FILE_CHANGE_LINES = 20;
+const BOARD_MIN_WIDTH = 60;
+const BOARD_MAX_WIDTH = 100;
+const BOARD_PALETTE_ROLES = ["accent", "success", "warning", "danger", "notice", "path", "code", "fence"];
+const BOARD_SECTION_SHORT_LABELS = {
+  chat_user: "user",
+  chat_assistant: "chat",
+  reasoning: "reasoning",
+  system_prompt: "system",
+  skill_catalog: "skills",
+  rind_docs: "RIND",
+  rind_docs_user: "RIND",
+  rind_docs_project: "RIND",
+  compaction_handoff: "compact",
+  goal_policy: "goal",
+  delegate: "delegate",
+  team_agent_catalog: "team",
+  "tool:other": "other",
+};
+
+export function boardWidth(width) {
+  const columns = Number(width ?? process.stdout.columns);
+  if (!Number.isFinite(columns) || columns <= 0) {
+    return BOARD_MAX_WIDTH;
+  }
+  return Math.max(BOARD_MIN_WIDTH, Math.min(BOARD_MAX_WIDTH, Math.floor(columns)));
+}
+
+export function occupancyTone(percent) {
+  const value = Number(percent);
+  if (!Number.isFinite(value)) {
+    return "neutral";
+  }
+  if (value > 0.85) {
+    return "err";
+  }
+  if (value >= 0.6) {
+    return "warn";
+  }
+  return "neutral";
+}
+
+const BOARD_FOOTER = "Tab switch page · Esc exit";
+
+export function contextBoardText(page = {}, width) {
+  const frameWidth = boardWidth(width);
+  const breakdown = isBoardRecord(page.breakdown) ? page.breakdown : null;
+  const usage = isBoardRecord(page.latest_usage) ? page.latest_usage : null;
+  const plain = page.plain === true;
+  const title = "Context · last sampling";
+  if (!breakdown || !Array.isArray(breakdown.sections) || !breakdown.sections.length) {
+    return boardPanel({
+      title,
+      lines: boardEmptyLines(frameWidth, "No context sampled yet"),
+      footer: BOARD_FOOTER,
+      page,
+      frameWidth,
+      plain,
+    });
+  }
+  const windowTokens = boardNumber(breakdown.context_window_tokens);
+  const estimated = boardNumber(breakdown.estimated_total);
+  const measured = Math.max(0, boardNumber(usage?.input_tokens));
+  const usedPercent = windowTokens > 0 ? estimated / windowTokens : 0;
+  const lines = contextMetaLines(windowTokens, usedPercent, measured, estimated, frameWidth - 4);
+  const innerWidth = frameWidth - 4;
+  if (windowTokens > 0) {
+    lines.push(stackedShareBar(breakdown.sections, windowTokens, innerWidth));
+    lines.push(barUnderline(breakdown.sections, windowTokens, innerWidth));
+  }
+  lines.push(...contextSectionRows(breakdown.sections, estimated, innerWidth));
+  return boardPanel({
+    title: contextTitle(breakdown, title),
+    lines,
+    footer: BOARD_FOOTER,
+    page,
+    frameWidth,
+    plain,
+  });
+}
+
+export function usageBoardText(page = {}, width) {
+  const frameWidth = boardWidth(width);
+  const summary = isBoardRecord(page.summary) ? page.summary : {};
+  const totals = isBoardRecord(summary.totals) ? summary.totals : {};
+  const plain = page.plain === true;
+  const days = boardNumber(summary.days) || 7;
+  const title = `Token usage · last ${days} day${days === 1 ? "" : "s"}`;
+  if (!boardNumber(totals.samples)) {
+    return boardPanel({
+      title,
+      lines: boardEmptyLines(frameWidth, "No usage recorded yet"),
+      footer: BOARD_FOOTER,
+      page,
+      frameWidth,
+      plain,
+    });
+  }
+  const lines = usageHeroLines(totals, frameWidth - 4);
+  lines.push(dim(`${boardNumber(totals.samples)} samples`));
+  const byDay = Array.isArray(summary.by_day) ? summary.by_day : [];
+  if (byDay.length) {
+    lines.push("", bold("By day"), ...byDayRows(byDay, frameWidth - 4));
+  }
+  const byModel = Array.isArray(summary.by_model) ? summary.by_model : [];
+  if (byModel.length) {
+    lines.push("", bold("By model"), ...rightRows(byModel.map((row) => [boardText(row?.model), boardCompact(row?.tokens)]), frameWidth - 4));
+  }
+  const sessions = Array.isArray(summary.recent_sessions) ? summary.recent_sessions : [];
+  if (sessions.length) {
+    lines.push(
+      "",
+      bold(`By session (latest ${sessions.length})`),
+      ...rightRows(sessions.map((row) => [sessionRowLabel(row), boardCompact(row?.tokens)]), frameWidth - 4),
+    );
+  }
+  const compactions = boardNumber(totals.compactions);
+  const footer = compactions > 0
+    ? `${formatBoardNumber(compactions)} compaction call${compactions === 1 ? "" : "s"} · ${BOARD_FOOTER}`
+    : BOARD_FOOTER;
+  return boardPanel({ title, lines, footer, page, frameWidth, plain });
+}
+
+function contextTitle(breakdown, fallback) {
+  const turn = boardText(breakdown.turn_id);
+  const time = boardText(breakdown.captured_at).slice(11, 19);
+  const parts = [fallback];
+  if (turn) {
+    parts.push(`turn ${turn.slice(0, 4)}`);
+  }
+  if (/^\d{2}:\d{2}:\d{2}$/.test(time)) {
+    parts.push(time);
+  }
+  return parts.join(" · ");
+}
+
+function contextMetaLines(windowTokens, usedPercent, measured, estimated, inner) {
+  const tone = occupancyTone(usedPercent);
+  const paintTone = tone === "err" ? red : tone === "warn" ? paint.warning : (text) => text;
+  const windowPart = `Window ${formatBoardNumber(windowTokens)} · ${paintTone(`used ${Math.round(usedPercent * 100)}%`)}`;
+  const measuredPart = measured > 0
+    ? `measured ${formatBoardNumber(measured)} · estimated ~${formatBoardNumber(estimated)} ${estimatedDeviation(measured, estimated)}`
+    : "";
+  if (measuredPart && textWidth(`${windowPart}   ${measuredPart}`) > inner) {
+    return [windowPart, measuredPart];
+  }
+  return [measuredPart ? `${windowPart}   ${measuredPart}` : windowPart];
+}
+
+function estimatedDeviation(measured, estimated) {
+  if (estimated <= 0) {
+    return "";
+  }
+  const percent = Math.round(((measured - estimated) / estimated) * 100);
+  return `(${percent >= 0 ? "+" : ""}${percent}%)`;
+}
+
+function stackedShareBar(sections, windowTokens, cells) {
+  const spans = boardSpans(sections, windowTokens, cells);
+  const remaining = Math.max(0, cells - spans.reduce((sum, span) => sum + span.cells, 0));
+  const bar = spans.map((span, index) => (
+    boardPalette(index)(BOARD_BAR_CELL.repeat(span.cells))
+  )).join("");
+  return `${bar}${dim(BOARD_REMAINDER_CELL.repeat(remaining))}`;
+}
+
+function barUnderline(sections, windowTokens, cells) {
+  const spans = boardSpans(sections, windowTokens, cells);
+  const pieces = [];
+  for (const [index, span] of spans.entries()) {
+    const label = boardShortLabel(span);
+    const labelWidth = textWidth(label);
+    if (label && span.cells >= labelWidth + 1) {
+      pieces.push(boardPalette(index)(label));
+      pieces.push(dim(BOARD_UNDERLINE_CELL.repeat(span.cells - labelWidth)));
+    } else {
+      pieces.push(dim(BOARD_UNDERLINE_CELL.repeat(span.cells)));
+    }
+  }
+  pieces.push(dim(BOARD_UNDERLINE_CELL.repeat(Math.max(0, cells - spans.reduce((sum, span) => sum + span.cells, 0)))));
+  return pieces.join("");
+}
+
+function boardSpans(sections, windowTokens, cells) {
+  return sections.map((section, index) => ({
+    ...section,
+    paletteIndex: index,
+    cells: Math.max(0, Math.round((boardNumber(section.tokens) / windowTokens) * cells)),
+  }));
+}
+
+function contextSectionRows(sections, total, innerWidth) {
+  const nameWidth = Math.min(
+    Math.max(12, ...sections.map((section) => textWidth(boardText(section.label)))),
+    Math.max(12, innerWidth - 24),
+  );
+  const tokenTexts = sections.map((section) => formatBoardNumber(section.tokens));
+  const tokenWidth = Math.max(6, ...tokenTexts.map(textWidth));
+  const messageTexts = sections.map((section) => boardMessagesLabel(section.messages));
+  const messageWidth = Math.max(6, ...messageTexts.map(textWidth));
+  return sections.map((section, index) => {
+    const percent = total > 0 ? Math.round((boardNumber(section.tokens) / total) * 100) : 0;
+    return [
+      `  ${padRight(clipSingleLine(section.label, nameWidth), nameWidth)}`,
+      padLeft(tokenTexts[index], tokenWidth),
+      padLeft(`${percent}%`, 4),
+      padLeft(messageTexts[index], messageWidth),
+    ].join("  ");
+  });
+}
+
+function boardMessagesLabel(count) {
+  const value = Math.max(0, boardNumber(count));
+  return `${formatBoardNumber(value)} ${value === 1 ? "msg" : "msgs"}`;
+}
+
+function usageHeroLine(totals) {
+  const input = Math.max(0, boardNumber(totals.input));
+  const cached = Math.max(0, boardNumber(totals.cached));
+  const hit = input > 0 ? Math.round((cached / input) * 100) : 0;
+  return [
+    `Input ${boardCompact(totals.input)}`,
+    `Cache hit ${boardCompact(cached)}·${hit}%`,
+    `Output ${boardCompact(totals.output)}`,
+    `Reasoning ${boardCompact(totals.reasoning)}`,
+  ].join("   ");
+}
+
+function usageHeroLines(totals, inner) {
+  const line = usageHeroLine(totals);
+  if (textWidth(stripAnsi(line)) <= inner) {
+    return [line];
+  }
+  return [
+    `Input ${boardCompact(totals.input)}   Cache hit ${boardCompact(totals.cached)}`,
+    `Output ${boardCompact(totals.output)}   Reasoning ${boardCompact(totals.reasoning)}`,
+  ];
+}
+
+function byDayRows(byDay, innerWidth) {
+  const values = byDay.map((row) => boardCompact(row?.tokens));
+  const valueWidth = Math.max(5, ...values.map(textWidth));
+  const peak = Math.max(1, ...byDay.map((row) => Math.max(0, boardNumber(row?.tokens))));
+  const barCells = Math.max(3, innerWidth - 11 - valueWidth);
+  return byDay.map((row, index) => {
+    const filled = Math.max(row && boardNumber(row.tokens) > 0 ? 1 : 0, Math.round((Math.max(0, boardNumber(row?.tokens)) / peak) * barCells));
+    const bar = accent(BOARD_BAR_CELL.repeat(Math.min(barCells, filled)));
+    const region = bar + " ".repeat(Math.max(0, barCells - Math.min(barCells, filled)));
+    return `  ${boardDayLabel(row?.day)}  ${region}  ${padLeft(values[index], valueWidth)}`;
+  });
+}
+
+function boardDayLabel(day) {
+  const text = boardText(day);
+  return /^\d{2}-\d{2}$/.test(text) ? text : " ".repeat(5);
+}
+
+function rightRows(rows, innerWidth) {
+  const valueWidth = Math.max(5, ...rows.map((row) => textWidth(row[1])));
+  const labelWidth = Math.max(1, innerWidth - 2 - valueWidth - 2);
+  const clipped = rows.map((row) => clipSingleLine(row[0], labelWidth));
+  const columnWidth = Math.max(1, ...clipped.map(textWidth));
+  return rows.map((row, index) => `  ${padRight(clipped[index], columnWidth)}  ${padLeft(row[1], valueWidth)}`);
+}
+
+function sessionRowLabel(row) {
+  const updated = boardText(row?.updated_at);
+  const day = /^\d{4}-\d{2}-\d{2}/.test(updated) ? updated.slice(5, 10) : "";
+  return [day, boardText(row?.session_id)].filter(Boolean).join(" ");
+}
+
+function boardShortLabel(section) {
+  if (BOARD_SECTION_SHORT_LABELS[section.key]) {
+    return BOARD_SECTION_SHORT_LABELS[section.key];
+  }
+  if (String(section.key || "").startsWith("tool:")) {
+    return String(section.key).slice(5);
+  }
+  const label = boardText(section.label);
+  return label.split("·")[0].trim().slice(0, 12);
+}
+
+function boardPalette(index) {
+  const painter = paint[BOARD_PALETTE_ROLES[index % BOARD_PALETTE_ROLES.length]];
+  return typeof painter === "function" ? painter : (text) => text;
+}
+
+function boardPanel({ title, lines, footer, page, frameWidth, plain }) {
+  const index = Math.max(1, boardNumber(page?.index) || 1);
+  const count = Math.max(index, boardNumber(page?.count) || 1);
+  if (plain) {
+    // Interaction hints are meaningless in frame-less pipe output.
+    return [bold(clipSingleLine(title, frameWidth)), ...lines].join("\n");
+  }
+  const inner = frameWidth - 4;
+  const pageLabel = count > 1 ? `${index}/${count}` : "";
+  const titlePart = ` ${clipSingleLine(title, inner - pageLabel.length - 4)} `;
+  const dashes = Math.max(1, frameWidth - 2 - textWidth(titlePart) - (pageLabel ? pageLabel.length + 2 : 0));
+  const top = `┌${accent(titlePart)}${dim("─".repeat(dashes))}${pageLabel ? ` ${dim(pageLabel)} ` : ""}┐`;
+  const footerLines = footer ? [dim(footer)] : [];
+  const bodyRows = [...lines, ...footerLines].map((line) => `${dim("│")} ${padRight(line, inner)} ${dim("│")}`);
+  const bottom = `${dim("└")}${dim("─".repeat(frameWidth - 2))}${dim("┘")}`;
+  return [top, ...bodyRows, bottom].join("\n");
+}
+
+function boardEmptyLines(frameWidth, label) {
+  const inner = frameWidth - 4;
+  return [
+    boardCentered(bold(label || "Nothing sampled yet"), inner),
+    boardCentered(dim("Send a message first, then try again."), inner),
+  ];
+}
+
+function boardCentered(text, inner) {
+  return `${" ".repeat(Math.max(0, Math.floor((inner - textWidth(text)) / 2)))}${text}`;
+}
+
+function isBoardRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function boardText(value) {
+  return String(value ?? "").replace(/\s+/g, " ").trim();
+}
+
+function boardNumber(value) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : 0;
+}
+
+function formatBoardNumber(value) {
+  const number = Math.max(0, Math.round(boardNumber(value)));
+  return String(number).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+function boardCompact(value) {
+  const number = Math.max(0, boardNumber(value));
+  if (number >= 1e6) {
+    return `${(number / 1e6).toFixed(2)}M`;
+  }
+  if (number >= 1e5) {
+    return `${Math.round(number / 1e3)}K`;
+  }
+  if (number >= 1e3) {
+    return `${(number / 1e3).toFixed(1)}K`.replace(/\.0K$/, "K");
+  }
+  return String(Math.round(number));
+}
+
+const BOARD_BAR_CELL = "█";
+const BOARD_REMAINDER_CELL = "░";
+const BOARD_UNDERLINE_CELL = "▔";
+
 
 export function startupText(info = {}, width) {
   const header = startupBannerText(info, width);
@@ -14,8 +367,8 @@ export function startupText(info = {}, width) {
   return sections.filter(Boolean).join("\n\n");
 }
 
-export function promptText(info = {}, _stats = {}, state = {}, frameWidth) {
-  return inputPromptFrame(promptHeaderLine(info, frameWidth), state, frameWidth);
+export function promptText(info = {}, stats = {}, state = {}, frameWidth) {
+  return inputPromptFrame(promptHeaderLine(info, stats, frameWidth), state, frameWidth);
 }
 
 export function promptActivityLine(state = {}) {
@@ -27,11 +380,23 @@ export function promptActivityLine(state = {}) {
   return `  ${accent(activityFrame(state.frame))} ${bold(label)} ${dim(`(${elapsed}) ctrl+c interrupt`)}`;
 }
 
+export function promptHintLine(state = {}) {
+  if (state.menuOpen) {
+    return "";
+  }
+  const text = state.inputMode === "question"
+    ? "  ↑↓ choose · enter confirm · esc cancel"
+    : state.running
+      ? "  enter steer · tab queue · ctrl+c stop · ctrl+b tasks"
+      : "  enter send · ↑↓ history · / commands · ? help";
+  return dim(clipCells(text, composerWidth(state.frameWidth)));
+}
+
 export function promptPlaceholderText() {
   return "Ask Rind to do anything";
 }
 
-export function userInputText(text, width) {
+export function userInputText(text, width, source = "") {
   const lines = messageLines(text);
   if (!lines.length) {
     return "";
@@ -40,7 +405,8 @@ export function userInputText(text, width) {
   const physicalLines = lines.flatMap((line) => (
     wrapTextCells(line, contentWidth, contentWidth).map((chunk) => `  ${chunk.text}`)
   ));
-  return `${accent("▷")} ${bold("You")}\n${physicalLines.join("\n")}`;
+  const origin = source ? dim(` · via ${source}`) : "";
+  return `${accent("▷")} ${bold("You")}${origin}\n${physicalLines.join("\n")}`;
 }
 
 export function assistantHeaderText() {
@@ -197,6 +563,7 @@ export function questionMenuFrame(
   editing = false,
   customLabel = "Type your own answer",
   width = 76,
+  editorCursor = null,
 ) {
   const entries = [
     ...(Array.isArray(options) ? options : []),
@@ -230,14 +597,24 @@ export function questionMenuFrame(
       lastPushedLine = lines.length - 1;
     }
     if (active && editing && isCustom) {
-      const cursorLine = customText ? Math.max(0, lastPushedLine) : Math.max(0, firstPushedLine);
-      const cursorColumn = customText
-        ? textWidth(lines[cursorLine])
-        : firstPrefixWidth;
-      cursor = {
-        line: cursorLine,
-        column: Math.max(0, cursorColumn),
-      };
+      if (editorCursor) {
+        cursor = customAnswerCursor(
+          customText,
+          editorCursor,
+          Math.max(0, firstPushedLine),
+          firstPrefixWidth,
+          Math.max(1, width - 4),
+        );
+      } else {
+        const cursorLine = customText ? Math.max(0, lastPushedLine) : Math.max(0, firstPushedLine);
+        const cursorColumn = customText
+          ? textWidth(lines[cursorLine])
+          : firstPrefixWidth;
+        cursor = {
+          line: cursorLine,
+          column: Math.max(0, cursorColumn),
+        };
+      }
     }
     if (option.description) {
       const descriptionLines = wrapQuestionLines(option.description, Math.max(1, width - 6));
@@ -257,6 +634,23 @@ function wrapQuestionLines(value, width) {
   return wrapTextCells(text, Math.max(1, width), Math.max(1, width)).map((chunk) => chunk.text);
 }
 
+function customAnswerCursor(customText, editorCursor, firstRow, prefixWidth, labelWidth) {
+  const rawLines = String(customText || "").split("\n");
+  const line = Math.min(rawLines.length - 1, Math.max(0, Math.floor(Number(editorCursor.line) || 0)));
+  const column = Math.min(
+    graphemes(rawLines[line]).length,
+    Math.max(0, Math.floor(Number(editorCursor.column) || 0)),
+  );
+  const before = [...rawLines.slice(0, line), graphemes(rawLines[line]).slice(0, column).join("")]
+    .join(" ")
+    .trim();
+  const chunks = wrapTextCells(before, Math.max(1, labelWidth), Math.max(1, labelWidth));
+  return {
+    line: firstRow + chunks.length - 1,
+    column: prefixWidth + textWidth(chunks[chunks.length - 1].text),
+  };
+}
+
 export function backgroundMonitorText(tasks = [], selectedIndex = 0, selectedTask = null, width = 76) {
   const items = Array.isArray(tasks) ? tasks : [];
   const lines = [dim("  ←→ page · ↑↓/j/k select · esc/ctrl+b close")];
@@ -433,10 +827,6 @@ export function commandResultText(text, detail = "") {
   return `${green("✓")} ${bold(clipSingleLine(text, 96))}${extra ? dim(` — ${extra}`) : ""}`;
 }
 
-export function modelUsageText() {
-  return notice("Model command", "/model set <name>");
-}
-
 export function contextBuiltLine(event) {
   const decisions = event.decisions && typeof event.decisions === "object" ? event.decisions : {};
   if (!decisions.rind_docs_truncated) {
@@ -448,10 +838,6 @@ export function contextBuiltLine(event) {
   return notice("Context trimmed", `RIND.md: ${clipSingleLine(scopes, 96)}`);
 }
 
-export function unknownCommandText() {
-  return notice("Unknown command", "type / to browse commands or ? for shortcuts");
-}
-
 function notice(label, ...details) {
   const lines = [`${accent("◆")} ${bold(label)}`];
   for (const detail of details.flat()) {
@@ -462,18 +848,18 @@ function notice(label, ...details) {
   return lines.join("\n");
 }
 
-export function toolRequestedLine(event) {
+export function toolRequestedLine(event) {
   const name = event.tool_name || "unknown";
   const detail = toolDetail(name, parseJsonObject(event.args_preview));
   const label = toolLabel(name);
   const line = `${accent("◌")} ${bold("Tool")} ${dim("·")} ${toolActiveVerb(name)} ${label}`;
-  return indentToolText(detail ? `${line}\n${dim(toolDetailLine(name, detail))}` : line);
-}
+  return indentToolText(detail ? `${line}\n${dim(toolDetailLine(name, detail))}` : line);
+}
 
-export function toolStartedLine(event) {
-  const name = event.tool_name || "tool";
-  return indentToolText(`${accent("◌")} ${bold("Tool")} ${dim("·")} ${toolActiveVerb(name)} ${toolLabel(name)}`);
-}
+export function toolStartedLine(event) {
+  const name = event.tool_name || "tool";
+  return indentToolText(`${accent("◌")} ${bold("Tool")} ${dim("·")} ${toolActiveVerb(name)} ${toolLabel(name)}`);
+}
 
 export function toolResultLine(event, fileChange) {
   const name = event.tool_name || "unknown";
@@ -483,7 +869,7 @@ export function toolResultLine(event, fileChange) {
     const suffix = event.error_type ? ` (${event.error_type})` : "";
     const detail = toolErrorDetail(event.result);
     const line = `${red("⊘")} ${bold("Tool")} ${dim("·")} ${label} failed in ${duration}${suffix}`;
-    return indentToolText(detail ? `${line}\n${dim(detailLine(detail))}` : line);
+    return indentToolText(detail ? `${line}\n${dim(detailLine(detail))}` : line);
   }
   const result = toolResultSummary(event.result);
   if (result.status === "running" && (name === "bash" || name === "bash_output")) {
@@ -492,53 +878,41 @@ export function toolResultLine(event, fileChange) {
       : "command running in background";
     const line = `${accent("◌")} ${bold("Tool")} ${dim("·")} ${runningText} in ${duration}`;
     const output = result.output;
-    return indentToolText([line, output ? dim(detailLine(output)) : "", fileChangeLine(fileChange)]
-      .filter(Boolean)
-      .join("\n"));
+    return indentToolText([line, output ? dim(detailLine(output)) : "", fileChangeLine(fileChange)]
+      .filter(Boolean)
+      .join("\n"));
   }
   const line = result.exitCode
     ? `${red("⊘")} ${bold("Tool")} ${dim("·")} ${label} exited ${result.exitCode} in ${duration}`
     : `${green("◉")} ${bold("Tool")} ${dim("·")} ${completedToolText(name, label)} in ${duration}`;
   const output = result.output;
-  return indentToolText([line, output ? dim(detailLine(output)) : "", fileChangeLine(fileChange)]
-    .filter(Boolean)
-    .join("\n"));
-}
-
-function indentToolText(value) {
-  return String(value || "")
-    .split("\n")
-    .map((line) => `  ${line}`)
-    .join("\n");
-}
-
-export function planUpdatedLine(plan) {
-  const items = Array.isArray(plan) ? plan : [];
-  if (!items.length) {
-    return `  ${green("◉")} ${bold("Plan cleared")}`;
-  }
-
-  const lines = [`  ${green("◉")} ${bold("Plan updated")}`];
-  for (const item of items) {
-    const step = clipSingleLine(item?.step, detailTextWidth());
-    if (step) {
-      lines.push(`    ${planStatusIcon(item?.status)} ${step}`);
-    }
-  }
-  return lines.join("\n");
+  return indentToolText([line, output ? dim(detailLine(output)) : "", fileChangeLine(fileChange)]
+    .filter(Boolean)
+    .join("\n"));
 }
 
-export function goalContinuedLine(round) {
-  return `${accent("◌")} ${bold("Goal continued")} ${dim(`· round ${Number(round) || 0}`)}`;
+function indentToolText(value) {
+  return String(value || "")
+    .split("\n")
+    .map((line) => `  ${line}`)
+    .join("\n");
 }
 
-export function toolProgressLine(event) {
-  const name = event.tool_name || "tool";
-  const message = progressMessage(event.payload);
-  return message
-    ? indentToolText(`${accent("◌")} ${bold("Tool")} ${dim("·")} ${toolLabel(name)}\n${dim(`  ↳ ${message}`)}`)
-    : "";
-}
+export function planUpdatedLine(plan) {
+  const items = Array.isArray(plan) ? plan : [];
+  if (!items.length) {
+    return `  ${green("◉")} ${bold("Plan cleared")}`;
+  }
+
+  const lines = [`  ${green("◉")} ${bold("Plan updated")}`];
+  for (const item of items) {
+    const step = clipSingleLine(item?.step, detailTextWidth());
+    if (step) {
+      lines.push(`    ${planStatusIcon(item?.status)} ${step}`);
+    }
+  }
+  return lines.join("\n");
+}
 
 export function errorLine(error) {
   const detail = clipSingleLine(error, 120);
@@ -966,19 +1340,6 @@ function nonZeroExitCode(value) {
   return Number.isInteger(code) && code !== 0 ? code : 0;
 }
 
-function progressMessage(payload) {
-  if (!payload || typeof payload !== "object") {
-    return "";
-  }
-  for (const key of ["message", "status", "text"]) {
-    const value = clipSingleLine(payload[key], 120);
-    if (value) {
-      return value;
-    }
-  }
-  return "";
-}
-
 function fileChangeLine(fileChange) {
   if (!fileChange || typeof fileChange !== "object") {
     return "";
@@ -1062,23 +1423,6 @@ function userInputContentWidth(width) {
   return Number.isFinite(columns) && columns > 0 ? Math.max(1, Math.floor(columns - 2)) : 78;
 }
 
-function formatDuration(durationMs) {
-  const value = Number(durationMs || 0);
-  if (!Number.isFinite(value) || value <= 0) {
-    return "0ms";
-  }
-  if (value < 1000) {
-    return `${Math.trunc(value)}ms`;
-  }
-  if (value >= 60000) {
-    const totalSeconds = Math.round(value / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = String(totalSeconds % 60).padStart(2, "0");
-    return `${minutes}m ${seconds}s`;
-  }
-  return `${(value / 1000).toFixed(2)}s`;
-}
-
 function formatActivityDuration(durationMs) {
   const value = Math.max(0, Number(durationMs || 0));
   if (!Number.isFinite(value) || value < 60000) {
@@ -1193,6 +1537,10 @@ function inputPromptFrame(header = "", state = {}, frameWidth) {
   if (header) {
     lines.push(header);
   }
+  const hint = promptHintLine({ ...state, frameWidth });
+  if (hint) {
+    lines.push(hint);
+  }
   lines.push(inputDivider(frameWidth));
   lines.push("  ▷ ");
   return lines.join("\n");
@@ -1226,6 +1574,7 @@ function pendingInputLines(entries, frameWidth) {
   const hints = [];
   if (entries.some((entry) => entry?.mode === "follow_up")) {
     hints.push("alt+up recall queue");
+    hints.push("alt+right steer now");
   }
   if (entries.some((entry) => entry?.mode === "steering")) {
     hints.push("alt+down recall steer");
@@ -1246,11 +1595,15 @@ function padRight(text, width) {
   return `${text}${" ".repeat(Math.max(0, width - visibleLength(text)))}`;
 }
 
+function padLeft(text, width) {
+  return `${" ".repeat(Math.max(0, width - visibleLength(text)))}${text}`;
+}
+
 function visibleLength(text) {
   return textWidth(text);
 }
 
-function promptHeaderLine(info, frameWidth) {
+function promptHeaderLine(info, stats = {}, frameWidth) {
   const backgroundCount = Number(info.background_count);
   const delegateCount = Number(info.delegate_count);
   const taskHints = [];
@@ -1263,6 +1616,7 @@ function promptHeaderLine(info, frameWidth) {
   const taskHint = taskHints.length
     ? dim(` · ${taskHints.join(" ")} (ctrl+b monitor)`)
     : "";
+  const ctxSegment = contextUsageSegment(stats);
   const model = singleLine(info.model);
   const effort = singleLine(info.reasoning_effort);
   const cwd = middleClip(info.cwd, 56);
@@ -1270,15 +1624,25 @@ function promptHeaderLine(info, frameWidth) {
   const effortSegment = effort ? `${dim(" · ")}${promptModel(effort)}` : "";
   if (model && cwd) {
     const separator = " · ";
-    const pathWidth = width - visibleLength(model) - visibleLength(separator) - visibleLength(taskHint) - visibleLength(effortSegment);
+    const pathWidth = width - visibleLength(model) - visibleLength(separator) - visibleLength(taskHint) - visibleLength(effortSegment) - visibleLength(ctxSegment);
     if (pathWidth > 0) {
-      return `  ${promptModel(clipSingleLine(model, width))}${effortSegment}${dim(separator)}${promptPath(clipSingleLine(cwd, pathWidth))}${taskHint}`;
+      return `  ${promptModel(clipSingleLine(model, width))}${effortSegment}${dim(separator)}${promptPath(clipSingleLine(cwd, pathWidth))}${taskHint}${ctxSegment}`;
     }
   }
   if (model) {
-    return `  ${promptModel(clipSingleLine(model, width))}${taskHint}`;
+    return `  ${promptModel(clipSingleLine(model, width))}${taskHint}${ctxSegment}`;
+  }
+  return cwd ? `  ${promptPath(clipSingleLine(cwd, width))}${taskHint}${ctxSegment}` : "";
+}
+
+function contextUsageSegment(stats) {
+  const ratio = Number(stats.context_usage_percent);
+  if (!Number.isFinite(ratio) || ratio <= 0) {
+    return "";
   }
-  return cwd ? `  ${promptPath(clipSingleLine(cwd, width))}${taskHint}` : "";
+  const percent = `ctx ${Math.round(ratio * 100)}%`;
+  const tone = occupancyTone(ratio);
+  return `${dim(" · ")}${tone === "err" ? red(percent) : tone === "warn" ? paint.warning(percent) : percent}`;
 }
 
 function composerWidth(frameWidth) {