@standardagents/code 0.0.2-dev.b3cdaaf → 0.1.1

package/src/tui.ts

@@ -1,911 +0,0 @@
-/**
- * Terminal UI with a persistent bottom input line.
- *
- * The input line stays anchored at the bottom and is always editable — you can
- * type while the agent works. All transcript output is printed ABOVE it via
- * print(). A spinner prefix on the input line indicates the agent's turn is
- * active ("whose turn it is"), so the working indicator never disappears, even
- * during long tool calls. Approvals and menus temporarily take over the bottom.
- */
-import readline from "node:readline";
-import { LEVELS, levelLabel, type Level } from "./types.ts";
-
-const C = {
-  reset: "\x1b[0m",
-  dim: "\x1b[2m",
-  bold: "\x1b[1m",
-  cyan: "\x1b[36m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  red: "\x1b[31m",
-  blue: "\x1b[34m",
-  magenta: "\x1b[35m",
-  gray: "\x1b[90m",
-  teal: "\x1b[38;5;37m",
-};
-
-// Dense braille frames — they fill more of the cell, so the spinner reads
-// clearly instead of looking like faint dots.
-const FRAMES = ["⣷", "⣯", "⣟", "⡿", "⢿", "⣻", "⣽", "⣾"];
-
-type KeyHandler = (str: string | undefined, key: readline.Key) => void;
-
-/**
- * A slash command shown in the inline command palette. `name` is the word typed
- * after `/` (e.g. "compact"); typing filters the list by it. `hint` may be a
- * function so dynamic state (counts, level) stays fresh as the palette redraws.
- */
-export interface SlashCommand {
-  name: string;
-  label: string;
-  hint?: string | (() => string);
-  run: () => void | Promise<void>;
-}
-
-export class Tui {
-  // input + indicators
-  private inputBuffer = "";
-  private cursorPos = 0; // caret index within inputBuffer (0..length)
-  private lastCursorRow = 0; // caret's row offset from the input region top, last render
-  private working = false;
-  private workingStart = 0;
-  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
-  private bgCount = 0;
-  private queuedCount = 0;
-  private subagents: string[] = []; // labels of subagents currently working (one line each)
-  private tokensIn = 0; // cumulative input tokens
-  private tokensOut = 0; // cumulative output tokens (includes the in-progress live count)
-  private contextPct: number | null = null; // % of the model context window currently used
-
-  // Inline slash-command palette: when the input starts with "/", the filtered
-  // command list renders above the prompt and arrows/enter/tab drive it.
-  private commands: SlashCommand[] = [];
-  private slashIdx = 0; // highlighted index within the FILTERED command list
-  private step: string | null = null; // current step label (e.g. "writing index.html")
-  private stepStart = 0; // when the current step began (for the step's own elapsed)
-  private stepOut = 0; // output tokens produced during the current step
-  private connected = true;
-  private bottomDrawn = false;
-  private started = false;
-
-  // takeover (approval / menu) state
-  private takeoverHandler: KeyHandler | null = null;
-  private bufferedPrints: string[] = [];
-
-  // double-press-to-quit state: the first ctrl-c arms a brief window and shows a
-  // transient hint; a second ctrl-c within the window actually quits.
-  private quitArmed = false;
-  private quitTimer: ReturnType<typeof setTimeout> | null = null;
-
-  // bracketed-paste state
-  private pasting = false;
-  private pasteTimer: ReturnType<typeof setTimeout> | null = null;
-
-  // event hooks (wired by index.ts)
-  onSubmit: (text: string) => void = () => {};
-  onInterrupt: () => void = () => {};
-  onUpArrow: () => void = () => {};
-  private onQuit: () => void = () => process.exit(0);
-  private levelListeners: ((l: Level) => void)[] = [];
-
-  constructor(public level: Level = 1) {
-    readline.emitKeypressEvents(process.stdin);
-    if (process.stdin.isTTY) process.stdin.setRawMode(true);
-    process.stdin.on("keypress", (str, key) => this.dispatch(str, key));
-    process.stdin.resume();
-    // Enable bracketed paste so a paste arrives atomically (newlines inside a
-    // paste don't fire a premature submit) and restore it on exit.
-    process.stdout.write("\x1b[?2004h");
-    // Restore bracketed paste + the cursor on exit (e.g. ctrl-c mid-menu).
-    process.on("exit", () => process.stdout.write("\x1b[?2004l\x1b[?25h"));
-  }
-
-  get colors() {
-    return C;
-  }
-
-  setQuitHandler(fn: () => void): void {
-    this.onQuit = fn;
-  }
-
-  /**
-   * Handle a ctrl-c. The first press arms a 2-second window and surfaces a
-   * transient "Press Control-C again to exit" hint in the bottom region; a
-   * second press within the window quits. After the window lapses the hint
-   * clears and the next ctrl-c starts over — so it always takes two.
-   */
-  requestQuit(): void {
-    if (this.quitArmed) {
-      if (this.quitTimer) clearTimeout(this.quitTimer);
-      this.quitTimer = null;
-      this.quitArmed = false;
-      this.onQuit();
-      return;
-    }
-    this.quitArmed = true;
-    this.renderBottom();
-    this.quitTimer = setTimeout(() => {
-      this.quitArmed = false;
-      this.quitTimer = null;
-      this.renderBottom();
-    }, 2000);
-  }
-
-  /** Tear down the bottom region and restore the terminal (called on quit). */
-  end(): void {
-    if (this.quitTimer) clearTimeout(this.quitTimer);
-    this.quitTimer = null;
-    this.clearBottom();
-    process.stdout.write("\x1b[?2004l\x1b[?25h");
-  }
-  onLevelChange(fn: (l: Level) => void): void {
-    this.levelListeners.push(fn);
-  }
-
-  /** Carrot colour by level — cooler/safer (low) to warmer/permissive (high). */
-  levelColor(): string {
-    return { 1: C.cyan, 2: C.green, 3: C.yellow, 4: C.magenta, 5: C.red }[this.level];
-  }
-
-  // ─── key dispatch ──────────────────────────────────────────────────────────
-
-  private dispatch(str: string | undefined, key: readline.Key): void {
-    if (key && key.ctrl && key.name === "c") {
-      this.requestQuit();
-      return;
-    }
-    if (key && key.name === "tab" && key.shift) {
-      this.cycleLevel();
-      return;
-    }
-    // Bracketed paste: everything between the start/end markers is literal text,
-    // even newlines. Handle it before any other key logic so a pasted Return
-    // doesn't submit and a pasted "/" doesn't open the menu.
-    const seq = (key && key.sequence) || str || "";
-    if (!this.pasting && seq.includes("\x1b[200~")) {
-      this.pasting = true;
-      this.armPasteSafety();
-      this.handlePasteChunk(seq.slice(seq.indexOf("\x1b[200~") + 6));
-      return;
-    }
-    if (this.pasting) {
-      this.armPasteSafety();
-      this.handlePasteChunk(seq);
-      return;
-    }
-
-    // A takeover (approval/menu) owns the keyboard while active.
-    if (this.takeoverHandler) {
-      this.takeoverHandler(str, key);
-      return;
-    }
-    if (!key) return;
-
-    // Inline slash-command palette owns navigation while the input starts with
-    // "/". Editing keys (printable/backspace/left/right) fall through to the
-    // normal input logic below, which re-filters the palette on the next render.
-    if (this.paletteOpen()) {
-      const matches = this.filteredCommands();
-      const cur = matches.length ? Math.min(this.slashIdx, matches.length - 1) : 0;
-      if (key.name === "up") {
-        if (matches.length) {
-          this.slashIdx = (cur - 1 + matches.length) % matches.length;
-          this.renderBottom();
-        }
-        return;
-      }
-      if (key.name === "down") {
-        if (matches.length) {
-          this.slashIdx = (cur + 1) % matches.length;
-          this.renderBottom();
-        }
-        return;
-      }
-      if (key.name === "tab") {
-        if (matches.length) {
-          this.inputBuffer = "/" + matches[cur].name;
-          this.cursorPos = this.inputBuffer.length;
-          this.slashIdx = 0;
-          this.renderBottom();
-        }
-        return;
-      }
-      if (key.name === "return" || key.name === "enter") {
-        if (matches.length) this.runCommand(matches[cur]);
-        return; // never submit a "/…" line as a chat message
-      }
-      if (key.name === "escape") {
-        this.inputBuffer = "";
-        this.cursorPos = 0;
-        this.slashIdx = 0;
-        this.renderBottom();
-        return;
-      }
-      // any other key falls through to normal editing (palette re-filters live)
-    }
-
-    if (key.name === "escape") {
-      this.onInterrupt();
-      return;
-    }
-    // Caret movement within the (possibly wrapped) input.
-    if (key.name === "left") {
-      if (this.cursorPos > 0) {
-        this.cursorPos--;
-        this.renderBottom();
-      }
-      return;
-    }
-    if (key.name === "right") {
-      if (this.cursorPos < this.inputBuffer.length) {
-        this.cursorPos++;
-        this.renderBottom();
-      }
-      return;
-    }
-    if (key.name === "home" || (key.ctrl && key.name === "a")) {
-      this.cursorPos = 0;
-      this.renderBottom();
-      return;
-    }
-    if (key.name === "end" || (key.ctrl && key.name === "e")) {
-      this.cursorPos = this.inputBuffer.length;
-      this.renderBottom();
-      return;
-    }
-    // Up with an empty input edits the last queued message (see onUpArrow).
-    if (key.name === "up") {
-      this.onUpArrow();
-      return;
-    }
-    if (key.name === "return" || key.name === "enter") {
-      const text = this.inputBuffer;
-      this.inputBuffer = "";
-      this.cursorPos = 0;
-      this.renderBottom();
-      if (text.trim()) this.onSubmit(text.trim());
-      return;
-    }
-    if (key.name === "backspace") {
-      if (this.cursorPos > 0) {
-        this.inputBuffer =
-          this.inputBuffer.slice(0, this.cursorPos - 1) + this.inputBuffer.slice(this.cursorPos);
-        this.cursorPos--;
-        this.slashIdx = 0;
-        this.renderBottom();
-      }
-      return;
-    }
-    if (key.name === "delete") {
-      if (this.cursorPos < this.inputBuffer.length) {
-        this.inputBuffer =
-          this.inputBuffer.slice(0, this.cursorPos) + this.inputBuffer.slice(this.cursorPos + 1);
-        this.slashIdx = 0;
-        this.renderBottom();
-      }
-      return;
-    }
-    if (key.ctrl || key.meta || key.name === "tab") return;
-    if (str && str >= " ") {
-      this.insertAtCursor(str);
-    }
-  }
-
-  private insertAtCursor(text: string): void {
-    this.inputBuffer = this.inputBuffer.slice(0, this.cursorPos) + text + this.inputBuffer.slice(this.cursorPos);
-    this.cursorPos += text.length;
-    this.slashIdx = 0; // re-anchor the palette highlight to the top match as the filter changes
-    this.renderBottom();
-  }
-
-  /** Insert a paste fragment at the caret; collapse newlines (single-line input). */
-  private handlePasteChunk(chunk: string): void {
-    const end = chunk.indexOf("\x1b[201~");
-    const content = (end >= 0 ? chunk.slice(0, end) : chunk).replace(/[\r\n]+/g, " ");
-    if (content) {
-      this.inputBuffer =
-        this.inputBuffer.slice(0, this.cursorPos) + content + this.inputBuffer.slice(this.cursorPos);
-      this.cursorPos += content.length;
-    }
-    if (end >= 0) {
-      this.pasting = false;
-      if (this.pasteTimer) {
-        clearTimeout(this.pasteTimer);
-        this.pasteTimer = null;
-      }
-    }
-    this.renderBottom();
-  }
-
-  /** Never let a missed end-marker wedge the input: clear paste mode shortly. */
-  private armPasteSafety(): void {
-    if (this.pasteTimer) clearTimeout(this.pasteTimer);
-    this.pasteTimer = setTimeout(() => {
-      this.pasting = false;
-      this.pasteTimer = null;
-      this.renderBottom();
-    }, 2000);
-  }
-
-  private cycleLevel(): void {
-    const idx = LEVELS.indexOf(this.level);
-    this.setLevel(LEVELS[(idx + 1) % LEVELS.length]);
-  }
-
-  setLevel(level: Level): void {
-    if (level === this.level) return;
-    this.level = level;
-    this.levelListeners.forEach((fn) => fn(this.level));
-    this.print(`${this.levelColor()}${levelLabel(this.level)}${C.reset}`);
-  }
-
-  // ─── bottom input line ───────────────────────────────────────────────────
-
-  /** Begin showing the persistent input line. */
-  start(): void {
-    this.started = true;
-    this.renderBottom();
-  }
-
-  /** Format an elapsed millisecond span as 45s / 2m 05s / 1h 05m. */
-  private formatElapsed(ms: number): string {
-    const s = Math.floor(ms / 1000);
-    if (s < 60) return `${s}s`;
-    const m = Math.floor(s / 60);
-    if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
-    const h = Math.floor(m / 60);
-    return `${h}h ${String(m % 60).padStart(2, "0")}m`;
-  }
-
-  /** Compact token count: 945 → "945", 12345 → "12.35k", 1_250_000 → "1.25M". */
-  private fmtTokens(n: number): string {
-    if (n < 1000) return String(n);
-    if (n < 1_000_000) return `${(n / 1000).toFixed(2)}k`;
-    return `${(n / 1_000_000).toFixed(2)}M`;
-  }
-
-  private spinnerFrame(): string {
-    return `${C.bold}${C.cyan}${FRAMES[Math.floor(Date.now() / 100) % FRAMES.length]}${C.reset}`;
-  }
-
-  /**
-   * "↑X ↓Y" cumulative token totals (greyed — low-priority), plus a context
-   * window gauge "ctx N%" when known. The gauge colour ramps with fill (green →
-   * yellow → red) so the user can see compaction approaching at a glance.
-   */
-  private tokensText(): string {
-    const parts: string[] = [];
-    if (this.tokensIn > 0) parts.push(`↑${this.fmtTokens(this.tokensIn)}`);
-    if (this.tokensOut > 0) parts.push(`↓${this.fmtTokens(this.tokensOut)}`);
-    let out = parts.length ? `${C.gray}${parts.join(" ")}${C.reset}` : "";
-    if (this.contextPct != null) {
-      const pct = this.contextPct;
-      const col = pct >= 85 ? C.red : pct >= 70 ? C.yellow : C.green;
-      const gauge = `${col}ctx ${pct}%${C.reset}`;
-      out = out ? `${out} ${gauge}` : gauge;
-    }
-    return out;
-  }
-
-  /**
-   * Set the context-window fill percentage (0–100), or null to hide it.
-   * Driven by the runtime's `context_usage` KV (latest request input tokens ÷
-   * model context window).
-   */
-  setContextPct(pct: number | null): void {
-    const next = pct == null ? null : Math.max(0, Math.min(100, Math.round(pct)));
-    if (next === this.contextPct) return;
-    this.contextPct = next;
-    this.renderBottom();
-  }
-
-  /** Plain "ctx N%" label (no ANSI) for menu hints, or "" when unknown. */
-  contextPctLabel(): string {
-    return this.contextPct == null ? "" : `ctx ${this.contextPct}%`;
-  }
-
-  /** Register the slash commands shown in the inline `/` palette. */
-  setCommands(commands: SlashCommand[]): void {
-    this.commands = commands;
-  }
-
-  /** Is the `/` command palette currently showing? (input starts with "/".) */
-  private paletteOpen(): boolean {
-    return this.started && !this.takeoverHandler && this.commands.length > 0 && this.inputBuffer.startsWith("/");
-  }
-
-  /** Commands matching the text typed after "/", in declared order. */
-  private filteredCommands(): SlashCommand[] {
-    if (!this.inputBuffer.startsWith("/")) return [];
-    const q = this.inputBuffer.slice(1).trim().toLowerCase();
-    if (q === "") return this.commands;
-    return this.commands.filter(
-      (c) => c.name.startsWith(q) || c.name.includes(q) || c.label.toLowerCase().includes(q)
-    );
-  }
-
-  private runCommand(cmd: SlashCommand): void {
-    this.inputBuffer = "";
-    this.cursorPos = 0;
-    this.slashIdx = 0;
-    this.renderBottom();
-    void Promise.resolve(cmd.run()).catch(() => {});
-  }
-
-  /**
-   * The summary line ABOVE the prompt. While working it reads
-   * `⣷ Working <step> <elapsed> ↑in ↓out`; when idle it keeps the cumulative
-   * token totals visible (`↑in ↓out`) so they live in the summary rather than
-   * crowding the prompt. Null when idle with nothing counted yet.
-   */
-  private statusLineText(cols: number): string | null {
-    const tk = this.tokensText();
-    if (this.working) {
-      const el = this.formatElapsed(Date.now() - this.workingStart);
-      const right = `${C.dim}${el}${C.reset}${tk ? " " + tk : ""}`;
-      const head = `${this.spinnerFrame()} ${C.bold}Working${C.reset}`;
-      const avail = Math.max(0, cols - this.visibleWidth(head) - this.visibleWidth(right) - 2);
-      let stepPart = "";
-      if (this.step && avail > 1) {
-        let s = this.step;
-        if (s.length > avail) s = s.slice(0, avail - 1) + "…";
-        stepPart = ` ${C.dim}${s}${C.reset}`;
-      }
-      return `${head}${stepPart} ${right}`;
-    }
-    return tk ? tk : null;
-  }
-
-  /** The prompt line prefix (with ANSI colour) that precedes the typed text. */
-  private promptPrefix(): string {
-    // Just the queue/bg badges and the level carrot — metrics live on the summary
-    // line above so they never crowd the input.
-    const q = this.queuedCount > 0 ? `${C.yellow}[⏳ ${this.queuedCount} queued]${C.reset} ` : "";
-    const bg = this.bgCount > 0 ? `${C.cyan}[⚙ ${this.bgCount} bg]${C.reset} ` : "";
-    return `${q}${bg}${this.levelColor()}›${C.reset} `;
-  }
-
-  private visibleWidth(s: string): number {
-    // eslint-disable-next-line no-control-regex
-    return s.replace(/\x1b\[[0-9;]*m/g, "").length;
-  }
-
-  /**
-   * Build the slash-palette rows for the current filter. Each row is clamped to
-   * ONE physical line (a wrapped row would desync the move-up redraw), with the
-   * `/name` highlighted, the label dimmed, and the hint right-aligned.
-   */
-  private paletteLines(cols: number): string[] {
-    if (!this.paletteOpen()) return [];
-    const matches = this.filteredCommands();
-    if (matches.length === 0) return [`  ${C.gray}no matching command${C.reset}`];
-    const cur = Math.min(this.slashIdx, matches.length - 1);
-    const pointerW = 2;
-    return matches.map((cmd, i) => {
-      const sel = i === cur;
-      const hint = (typeof cmd.hint === "function" ? cmd.hint() : cmd.hint) ?? "";
-      const hintW = hint.length;
-      const name = `/${cmd.name}`;
-      let visible = `${name}  ${cmd.label}`;
-      const labelMax = Math.max(6, cols - pointerW - (hintW ? hintW + 2 : 0));
-      if (visible.length > labelMax) visible = visible.slice(0, labelMax - 1) + "…";
-      const desc = visible.slice(name.length); // "  <label…>" (or "…" if name was clipped)
-      const pointer = sel ? `${C.magenta}❯${C.reset} ` : "  ";
-      const nameStyled = sel ? `${C.bold}${C.cyan}${name}${C.reset}` : `${C.cyan}${name}${C.reset}`;
-      let line = `${pointer}${nameStyled}${C.gray}${desc}${C.reset}`;
-      if (hintW) {
-        const gap = Math.max(2, cols - pointerW - visible.length - hintW);
-        line += `${" ".repeat(gap)}${C.gray}${hint}${C.reset}`;
-      }
-      return line;
-    });
-  }
-
-  /** Move the cursor to the top-left of the current bottom region. */
-  private moveToRegionTop(): void {
-    process.stdout.write("\r");
-    if (this.bottomDrawn && this.lastCursorRow > 0) process.stdout.write(`\x1b[${this.lastCursorRow}A`);
-  }
-
-  /**
-   * Render the bottom region: an optional step line, then the prompt + input
-   * (wrapping across as many rows as needed), with the caret placed at cursorPos.
-   * Uses only relative cursor moves so it survives terminal scrolling when the
-   * region grows near the bottom of the screen.
-   */
-  private renderBottom(): void {
-    if (!this.started || this.takeoverHandler) return; // not yet active, or a takeover owns the bottom
-    const cols = process.stdout.columns || 80;
-
-    this.moveToRegionTop();
-    process.stdout.write("\x1b[J"); // clear the old region (cursor → end of screen)
-
-    // Transient disconnect notice (one row, above everything). It lives in the
-    // bottom region, so it shows while we're reconnecting and CLEARS itself the
-    // moment we reconnect — no lingering "lost connection" line in the transcript.
-    const noticeLine = this.connected
-      ? null
-      : `${C.yellow}⚠ lost connection to the workspace — reconnecting…${C.reset}`;
-    const noticeRows = noticeLine ? 1 : 0;
-    if (noticeLine) process.stdout.write(noticeLine + "\r\n");
-
-    // Transient "press again to exit" hint (one row), cleared when the window
-    // lapses or a second ctrl-c quits.
-    const quitLine = this.quitArmed ? `${C.dim}Press Control-C again to exit${C.reset}` : null;
-    const quitRows = quitLine ? 1 : 0;
-    if (quitLine) process.stdout.write(quitLine + "\r\n");
-
-    // Subagent lines (one per active subagent), above the summary line. A magenta
-    // spinner distinguishes background subagent work from the main agent's loader.
-    const frame = FRAMES[Math.floor(Date.now() / 100) % FRAMES.length];
-    for (const label of this.subagents) {
-      const line = `${C.magenta}${frame}${C.reset} ${C.magenta}${label}${C.reset} ${C.dim}working${C.reset}`;
-      process.stdout.write(line + "\r\n");
-    }
-
-    // Summary line (one physical row, above the prompt): working state + tokens.
-    const statusLine = this.statusLineText(cols);
-    const statusRows = statusLine ? 1 : 0;
-    if (statusLine) process.stdout.write(statusLine + "\r\n");
-
-    // Inline slash-command palette (one clamped physical row per command), just
-    // above the prompt so it reads like an autocomplete. Filters as you type.
-    const paletteLines = this.paletteLines(cols);
-    for (const line of paletteLines) process.stdout.write(line + "\r\n");
-
-    const aboveRows = noticeRows + quitRows + this.subagents.length + statusRows + paletteLines.length;
-
-    // Prompt + input (wraps).
-    const prefix = this.promptPrefix();
-    const pw = this.visibleWidth(prefix);
-    const buf = this.inputBuffer;
-    process.stdout.write(prefix + buf);
-
-    const inputRows = Math.max(1, Math.ceil((pw + buf.length) / cols));
-    if (this.cursorPos < buf.length) {
-      // Caret is inside the text — reposition from the last physical row.
-      const curCell = pw + this.cursorPos;
-      const cursorRowInInput = Math.floor(curCell / cols);
-      const cursorCol = curCell % cols;
-      process.stdout.write("\r"); // col 0 of the last physical row (cancels pending-wrap)
-      const up = inputRows - 1 - cursorRowInInput;
-      if (up > 0) process.stdout.write(`\x1b[${up}A`);
-      if (cursorCol > 0) process.stdout.write(`\x1b[${cursorCol}C`);
-      this.lastCursorRow = aboveRows + cursorRowInInput;
-    } else {
-      // Caret at the end — leave it where writing left it.
-      this.lastCursorRow = aboveRows + (inputRows - 1);
-    }
-    this.bottomDrawn = true;
-  }
-
-  private clearBottom(): void {
-    if (!this.bottomDrawn) return;
-    this.moveToRegionTop();
-    process.stdout.write("\x1b[J");
-    this.bottomDrawn = false;
-  }
-
-  /** Print a line of transcript above the persistent input. */
-  print(text: string): void {
-    if (this.takeoverHandler) {
-      this.bufferedPrints.push(text);
-      return;
-    }
-    this.clearBottom();
-    process.stdout.write(text + "\n");
-    this.renderBottom();
-  }
-
-  /** Multi-line convenience. */
-  printLines(lines: string[]): void {
-    for (const l of lines) this.print(l);
-  }
-
-  /**
-   * Print a user message as a highlighted block so it stands out in the
-   * transcript (à la Codex). The bar is sized to the text (not full width, which
-   * would wrap awkwardly), padded with a space on each side and a blank line
-   * above and below, and a teal `›` marks the first row.
-   */
-  printUserMessage(text: string): void {
-    const cols = Math.max(20, process.stdout.columns || 80);
-    const bg = "\x1b[48;5;238m"; // dark-gray background bar (visible against the terminal)
-    const limit = Math.max(8, cols - 6); // wrap width, leaving room for padding
-    const words = text.replace(/\s+/g, " ").trim().split(" ");
-    const lines: string[] = [];
-    let cur = "";
-    for (let w of words) {
-      while (w.length > limit) {
-        if (cur) {
-          lines.push(cur);
-          cur = "";
-        }
-        lines.push(w.slice(0, limit));
-        w = w.slice(limit);
-      }
-      if (!cur) cur = w;
-      else if (cur.length + 1 + w.length <= limit) cur += " " + w;
-      else {
-        lines.push(cur);
-        cur = w;
-      }
-    }
-    if (cur || !lines.length) lines.push(cur);
-    // Width the bar to the longest line + the 2-col marker/indent.
-    const innerW = 2 + Math.max(...lines.map((l) => l.length));
-    this.print(""); // padding above
-    lines.forEach((line, i) => {
-      const rowText = (i === 0 ? "› " : "  ") + line;
-      const padded = rowText.padEnd(innerW);
-      // recolor the leading marker; one space of padding inside the bar each side
-      const inner = i === 0 ? `${C.teal}›${C.reset}${bg}${padded.slice(1)}` : padded;
-      this.print(`${bg} ${inner} ${C.reset}`);
-    });
-    this.print(""); // padding below
-  }
-
-  // ─── working indicator (turn state) ───────────────────────────────────────
-
-  setWorking(on: boolean): void {
-    if (on && !this.working) {
-      this.working = true;
-      this.workingStart = Date.now();
-    } else if (!on) {
-      this.working = false;
-    }
-    this.syncSpinner();
-    this.renderBottom();
-  }
-
-  /** Labels of subagents currently working, one persistent line each. */
-  setSubagents(labels: string[]): void {
-    this.subagents = labels;
-    this.syncSpinner();
-    this.renderBottom();
-  }
-
-  /** Run the spinner animation while anything (the agent or a subagent) is active. */
-  private syncSpinner(): void {
-    const spinning = this.working || this.subagents.length > 0;
-    if (spinning && !this.spinnerTimer) {
-      this.spinnerTimer = setInterval(() => this.renderBottom(), 100);
-    } else if (!spinning && this.spinnerTimer) {
-      clearInterval(this.spinnerTimer);
-      this.spinnerTimer = null;
-    }
-  }
-
-  get isWorking(): boolean {
-    return this.working;
-  }
-
-  setBackgroundCount(n: number): void {
-    this.bgCount = n;
-    this.renderBottom();
-  }
-  setQueuedCount(n: number): void {
-    this.queuedCount = n;
-    this.renderBottom();
-  }
-  setConnected(connected: boolean): void {
-    this.connected = connected;
-    this.renderBottom();
-  }
-
-  // ─── input buffer access (for up-arrow editing of queued messages) ─────────
-
-  getInput(): string {
-    return this.inputBuffer;
-  }
-  setInput(text: string): void {
-    this.inputBuffer = text;
-    this.cursorPos = text.length;
-    this.renderBottom();
-  }
-
-  /** Cumulative token totals shown on the prompt line (`outTokens` includes live). */
-  setTokens(inTokens: number, outTokens: number): void {
-    this.tokensIn = inTokens;
-    this.tokensOut = outTokens;
-    this.renderBottom();
-  }
-
-  /**
-   * Current step the agent is working on, shown on the line above the prompt.
-   * `outTokens` is the output produced during this step. The step's own timer
-   * resets whenever the label changes.
-   */
-  setStep(label: string | null, outTokens: number): void {
-    const next = label && label.trim() ? label.trim() : null;
-    if (next !== this.step) {
-      this.step = next;
-      this.stepStart = Date.now();
-    }
-    this.stepOut = outTokens;
-    this.renderBottom();
-  }
-
-  // ─── takeover helpers (approval / menus) ───────────────────────────────────
-
-  private beginTakeover(): void {
-    this.clearBottom();
-    process.stdout.write("\r\x1b[K");
-    process.stdout.write("\x1b[?25l"); // hide the text cursor while a menu/prompt owns the screen
-    this.bottomDrawn = false;
-  }
-
-  private endTakeover(): void {
-    this.takeoverHandler = null;
-    process.stdout.write("\x1b[?25h"); // restore the cursor
-    const buffered = this.bufferedPrints;
-    this.bufferedPrints = [];
-    for (const t of buffered) {
-      process.stdout.write(t + "\n");
-    }
-    this.renderBottom();
-  }
-
-  /** Approval prompt: arrow-navigable with y/a/l/n shortcuts. Pauses input. */
-  approval(question: string, risk: number): Promise<"allow" | "deny" | "always" | "always_risk"> {
-    return new Promise((resolve) => {
-      const options: { value: "allow" | "always" | "always_risk" | "deny"; label: string; shortcut: string; color: string }[] = [
-        { value: "allow", label: "Allow once", shortcut: "y", color: C.green },
-        { value: "always", label: "Always allow this tool", shortcut: "a", color: C.cyan },
-        { value: "always_risk", label: `Allow all level ${risk} this session`, shortcut: "l", color: C.cyan },
-        { value: "deny", label: "Deny", shortcut: "n", color: C.red },
-      ];
-      let idx = 0;
-      const riskBar = `${C.red}${"●".repeat(risk)}${C.gray}${"○".repeat(5 - risk)}${C.reset}`;
-
-      this.beginTakeover();
-      process.stdout.write(
-        `\n${C.yellow}┃${C.reset} ${C.bold}Permission needed${C.reset}  risk ${riskBar}\n` +
-          `${C.yellow}┃${C.reset} ${question}\n`
-      );
-      const renderLine = (i: number): string => {
-        const o = options[i];
-        const sel = i === idx;
-        const pointer = sel ? `${o.color}❯${C.reset}` : " ";
-        const label = sel ? `${C.bold}${o.label}${C.reset}` : o.label;
-        return `${C.yellow}┃${C.reset} ${pointer} ${label} ${C.gray}(${o.shortcut})${C.reset}`;
-      };
-      const draw = (moveUp: boolean) => {
-        if (moveUp) process.stdout.write(`\x1b[${options.length}A`);
-        for (let i = 0; i < options.length; i++) process.stdout.write(`\r\x1b[K${renderLine(i)}\n`);
-      };
-      draw(false);
-
-      const finish = (choice: "allow" | "deny" | "always" | "always_risk") => {
-        this.endTakeover();
-        resolve(choice);
-      };
-      this.takeoverHandler = (str, key) => {
-        if (key?.name === "up" || str === "k") {
-          idx = (idx - 1 + options.length) % options.length;
-          draw(true);
-        } else if (key?.name === "down" || str === "j") {
-          idx = (idx + 1) % options.length;
-          draw(true);
-        } else if (key?.name === "return" || key?.name === "enter") {
-          finish(options[idx].value);
-        } else {
-          const k = (str || "").toLowerCase();
-          if (k === "y") finish("allow");
-          else if (k === "a") finish("always");
-          else if (k === "l") finish("always_risk");
-          else if (k === "n" || key?.name === "escape") finish("deny");
-        }
-      };
-    });
-  }
-
-  /** Arrow-key selection menu (slash menu, process menu, resume). Pauses input. */
-  select<T>(title: string, items: { label: string; hint?: string; value: T }[]): Promise<T | undefined> {
-    return new Promise((resolve) => {
-      let idx = 0;
-      this.beginTakeover();
-      if (title) process.stdout.write(`\n${title}\n\n`);
-      // Each row is clamped to ONE physical line (preview left, hint right-aligned)
-      // so long session previews can't wrap — a wrapped row would desync the
-      // "move up N lines" redraw and corrupt the menu on every keystroke.
-      const renderLine = (i: number): string => {
-        const w = process.stdout.columns || 80;
-        const it = items[i];
-        const sel = i === idx;
-        const hint = it.hint ?? "";
-        const hintW = hint.length;
-        const pointerW = 2; // "❯ " or "  "
-        const labelMax = Math.max(6, w - 2 - pointerW - (hintW ? hintW + 2 : 0));
-        let label = it.label;
-        if (label.length > labelMax) label = label.slice(0, labelMax - 1) + "…";
-        const pointer = sel ? `${C.magenta}❯${C.reset} ` : "  ";
-        const styledLabel = sel ? `${C.bold}${C.cyan}${label}${C.reset}` : label;
-        let line = `${pointer}${styledLabel}`;
-        if (hintW) {
-          const gap = Math.max(2, w - 2 - pointerW - label.length - hintW);
-          line += `${" ".repeat(gap)}${C.gray}${hint}${C.reset}`;
-        }
-        return line;
-      };
-      const draw = (moveUp: boolean) => {
-        if (moveUp) process.stdout.write(`\x1b[${items.length}A`);
-        for (let i = 0; i < items.length; i++) process.stdout.write(`\r\x1b[K${renderLine(i)}\n`);
-      };
-      draw(false);
-      // Erase the whole menu block (title + rows) when it closes so it doesn't
-      // linger in the scrollback. After draw the cursor sits one row below the
-      // last item; the title block above occupies 3 rows (blank/title/blank).
-      const titleRows = title ? 3 : 0;
-      const erase = () => {
-        process.stdout.write("\r");
-        const up = titleRows + items.length;
-        if (up > 0) process.stdout.write(`\x1b[${up}A`);
-        process.stdout.write("\x1b[J");
-      };
-      const close = (value: T | undefined) => {
-        erase();
-        this.endTakeover();
-        resolve(value);
-      };
-      this.takeoverHandler = (str, key) => {
-        if (!key) return;
-        if (key.name === "up" || str === "k") {
-          idx = (idx - 1 + items.length) % items.length;
-          draw(true);
-        } else if (key.name === "down" || str === "j") {
-          idx = (idx + 1) % items.length;
-          draw(true);
-        } else if (key.name === "return" || key.name === "enter") {
-          close(items[idx].value);
-        } else if (key.name === "escape") {
-          close(undefined);
-        }
-      };
-    });
-  }
-
-  /**
-   * Free-text prompt (single line). Pauses the main input and reads a line —
-   * used where a menu can't, e.g. entering an MCP server command. Enter submits,
-   * Escape (or empty submit) cancels with null.
-   */
-  prompt(question: string, placeholder = ""): Promise<string | null> {
-    return new Promise((resolve) => {
-      let buf = "";
-      this.beginTakeover();
-      process.stdout.write("\x1b[?25h"); // we want a visible caret while typing
-      process.stdout.write(`\n${C.cyan}┃${C.reset} ${question}\n`);
-      if (placeholder) process.stdout.write(`${C.gray}┃ e.g. ${placeholder}${C.reset}\n`);
-      const draw = () => {
-        process.stdout.write(`\r\x1b[K${C.cyan}┃${C.reset} ${C.bold}›${C.reset} ${buf}`);
-      };
-      draw();
-      const finish = (value: string | null) => {
-        process.stdout.write("\n");
-        this.endTakeover();
-        resolve(value);
-      };
-      this.takeoverHandler = (str, key) => {
-        if (key?.name === "escape") return finish(null);
-        if (key?.name === "return" || key?.name === "enter") return finish(buf.trim() || null);
-        if (key?.name === "backspace") {
-          buf = buf.slice(0, -1);
-          draw();
-          return;
-        }
-        // Ignore control keys; accept printable input (including pasted text).
-        if (str && !key?.ctrl && !key?.meta && str >= " ") {
-          buf += str;
-          draw();
-        }
-      };
-    });
-  }
-
-  banner(lines: string[]): void {
-    this.clearBottom();
-    process.stdout.write("\n");
-    for (const l of lines) process.stdout.write(l + "\n");
-  }
-}