@standardagents/code 0.6.6 → 0.7.1

package/dist/index.js

@@ -1916,6 +1916,90 @@ var SystemEvents = class {
   }
 };
 
+// src/subagent-streams.ts
+var MAX_PHRASE = 120;
+function cleanPhrase(raw) {
+  const s = raw.replace(/\s+/g, " ").trim();
+  return s.length > MAX_PHRASE ? `${s.slice(0, MAX_PHRASE - 1)}\u2026` : s;
+}
+function prettyToolName(name) {
+  return name.replace(/^provider:/, "").replace(/[_:-]+/g, " ").trim();
+}
+var SubagentActivity = class {
+  constructor(api, onChange, makeStream = (threadId, hooks) => new MessageStream(api, threadId, hooks)) {
+    this.onChange = onChange;
+    this.makeStream = makeStream;
+  }
+  onChange;
+  makeStream;
+  entries = /* @__PURE__ */ new Map();
+  /** The current activity phrase for a subagent's child thread, if any. */
+  phraseFor(threadId) {
+    return this.entries.get(threadId)?.phrase ?? null;
+  }
+  /**
+   * Reconcile the open streams against the authoritative set of RUNNING
+   * subagent child-thread ids (from the parent's registry): open newcomers,
+   * close and forget departed ones.
+   */
+  sync(activeIds) {
+    const want = new Set(activeIds);
+    for (const [id, entry] of [...this.entries]) {
+      if (!want.has(id)) {
+        entry.stream.close();
+        this.entries.delete(id);
+      }
+    }
+    for (const id of want) {
+      if (!this.entries.has(id)) this.open(id);
+    }
+  }
+  open(threadId) {
+    const entry = { stream: null, steps: /* @__PURE__ */ new Map(), phrase: null };
+    const setPhrase = (phrase) => {
+      if (phrase === entry.phrase) return;
+      entry.phrase = phrase;
+      this.onChange(threadId);
+    };
+    const phraseFromSteps = () => {
+      let last = null;
+      for (const v of entry.steps.values()) last = v;
+      return last ?? entry.phrase;
+    };
+    entry.stream = this.makeStream(threadId, {
+      // Streamed output with no tool in flight means the model is composing —
+      // reasoning reads as "thinking", visible answer text as "writing". These
+      // only fire on TRANSITIONS (phrase comparison), not per chunk.
+      onChunk: () => {
+        if (entry.steps.size === 0) setPhrase("writing");
+      },
+      onReasoningChunk: () => {
+        if (entry.steps.size === 0) setPhrase("thinking");
+      },
+      onAssistantText: () => {
+      },
+      onEvent: (eventType, data) => {
+        if (eventType === "tool_call_started" && data?.id) {
+          entry.steps.set(String(data.id), cleanPhrase(String(data.progress || prettyToolName(String(data.name || "")) || "working")));
+          setPhrase(phraseFromSteps());
+        } else if (eventType === "tool_call_done" && data?.id) {
+          entry.steps.delete(String(data.id));
+          setPhrase(phraseFromSteps());
+        }
+      },
+      onError: () => {
+      }
+    });
+    this.entries.set(threadId, entry);
+    void entry.stream.connect();
+  }
+  /** Close every stream (session teardown). */
+  closeAll() {
+    for (const entry of this.entries.values()) entry.stream.close();
+    this.entries.clear();
+  }
+};
+
 // src/wordmill.ts
 var MILL_WORDS = [
   "Working",
@@ -2144,6 +2228,92 @@ async function readClipboardImage() {
 function imagePlaceholder(seq) {
   return `[#Image ${seq}]`;
 }
+var INPUT_BOX_MARGIN = 1;
+function inputBoxBorderColor() {
+  return "\x1B[38;5;240m";
+}
+function borderLevelDots(level) {
+  const n = Math.max(1, Math.min(5, level));
+  return "\u25CF".repeat(n) + "\u25CB".repeat(5 - n);
+}
+function borderLevelDotsStyled(level, levelColor, emptyColor = "\x1B[38;5;240m", reset = "\x1B[0m") {
+  const n = Math.max(1, Math.min(5, level));
+  let out = "";
+  for (let i = 1; i <= 5; i++) {
+    out += i <= n ? `${levelColor}\u25CF${reset}` : `${emptyColor}\u25CB${reset}`;
+  }
+  return out;
+}
+function inputBoxGeometry(cols2) {
+  const margin = INPUT_BOX_MARGIN;
+  const boxW = Math.max(12, cols2 - 1 - margin);
+  const contentW = Math.max(4, boxW - 4);
+  const leftPad = margin + 2;
+  return { margin, boxW, contentW, leftPad };
+}
+function boxVisibleWidth(s) {
+  let w = 0;
+  for (const ch of s.replace(/\x1b\[[0-9;]*m/g, "")) {
+    const cp = ch.codePointAt(0);
+    w += isWideCodePoint(cp) ? 2 : 1;
+  }
+  return w;
+}
+function buildBoxTop(boxW, levelText, borderColor, levelColor, reset = "\x1B[0m", levelStyled) {
+  const labelPlain = ` ${levelText} `;
+  const rightFill = 1;
+  const budget = Math.max(1, boxW - 2 - rightFill);
+  const plain = labelPlain.length > budget ? labelPlain.slice(0, Math.max(1, budget)) : labelPlain;
+  const leftFill = Math.max(1, boxW - 2 - plain.length - rightFill);
+  const mid = levelStyled !== void 0 ? ` ${levelStyled} ` : `${levelColor}${plain}${reset}`;
+  return `${borderColor}\u256D${"\u2500".repeat(leftFill)}${reset}` + mid + `${borderColor}${"\u2500".repeat(rightFill)}\u256E${reset}`;
+}
+function buildBoxBottom(boxW, borderColor, reset = "\x1B[0m") {
+  return `${borderColor}\u2570${"\u2500".repeat(Math.max(1, boxW - 2))}\u256F${reset}`;
+}
+function buildBoxTopPlain(boxW, borderColor, reset = "\x1B[0m") {
+  return `${borderColor}\u256D${"\u2500".repeat(Math.max(1, boxW - 2))}\u256E${reset}`;
+}
+function buildBoxBody(content, contentW, borderColor, reset = "\x1B[0m") {
+  const vw = boxVisibleWidth(content);
+  const pad = Math.max(0, contentW - vw);
+  return `${borderColor}\u2502${reset} ${content}${" ".repeat(pad)} ${borderColor}\u2502${reset}`;
+}
+function wrapInputBodyLines(inputBuffer, prefix, prefixWidth, contentW) {
+  const indent = " ".repeat(Math.max(0, prefixWidth));
+  const lines = inputBuffer.split("\n");
+  const out = [];
+  let isFirstPhysical = true;
+  for (let i = 0; i < lines.length; i++) {
+    const text = lines[i];
+    let remaining = text;
+    do {
+      const lead = isFirstPhysical ? prefix : indent;
+      const avail = Math.max(0, contentW - prefixWidth);
+      let take = Math.min(remaining.length, avail);
+      if (take === 0 && avail === 0 && remaining.length > 0) take = 1;
+      const chunk = remaining.slice(0, take);
+      remaining = remaining.slice(take);
+      out.push(lead + chunk);
+      isFirstPhysical = false;
+      if (remaining.length === 0) break;
+    } while (remaining.length > 0);
+  }
+  if (out.length === 0) out.push(prefix);
+  return out;
+}
+function buildInputBoxRows(opts) {
+  const { cols: cols2, inputBuffer, prefix, prefixWidth, level, levelColor } = opts;
+  const borderColor = opts.borderColor ?? inputBoxBorderColor();
+  const geo = inputBoxGeometry(cols2);
+  const body = wrapInputBodyLines(inputBuffer, prefix, prefixWidth, geo.contentW);
+  const dots = borderLevelDots(level);
+  const dotsStyled = borderLevelDotsStyled(level, levelColor);
+  const top = buildBoxTop(geo.boxW, dots, borderColor, levelColor, "\x1B[0m", dotsStyled);
+  const bottom = buildBoxBottom(geo.boxW, borderColor);
+  const pad = " ".repeat(geo.margin);
+  return [pad + top, ...body.map((b) => pad + buildBoxBody(b, geo.contentW, borderColor)), pad + bottom];
+}
 var C = {
   reset: "\x1B[0m",
   dim: "\x1B[2m",
@@ -2331,10 +2501,21 @@ var Tui = class _Tui {
   }
   /** Tear down the bottom region and restore the terminal (called on quit). */
   end() {
+    this.started = false;
+    this.working = false;
+    this.subagents = [];
     if (this.quitTimer) clearTimeout(this.quitTimer);
     this.quitTimer = null;
     if (this.streamIdleTimer) clearTimeout(this.streamIdleTimer);
     this.streamIdleTimer = null;
+    if (this.streamRedrawTimer) {
+      clearTimeout(this.streamRedrawTimer);
+      this.streamRedrawTimer = null;
+    }
+    if (this.spinnerTimer) {
+      clearInterval(this.spinnerTimer);
+      this.spinnerTimer = null;
+    }
     this.clearBottom();
     process.stdout.write("\x1B[?2004l\x1B[?25h");
   }
@@ -2567,45 +2748,58 @@ var Tui = class _Tui {
   }
   // ─── input layout + vertical caret movement ────────────────────────────────
   /**
-   * The input's physical rows (same wrapping math as renderBottom: logical
-   * lines split on "\n", line 0 led by the prompt prefix, each wrapping at the
-   * terminal width) plus where the caret sits among them. Each row records the
-   * buffer index of its first character, its character count, and the visual
-   * column its first character renders at (only row 0 is offset, by the
-   * prompt). Drives ↑/↓: row 0 is "the top line" (history recall territory),
-   * anything below moves the caret instead.
+   * The input's physical rows (same wrapping math as the boxed input body:
+   * logical lines split on "\n", line 0 led by the prompt prefix, each wrapping
+   * at the box content width) plus where the caret sits among them. Each row
+   * records the buffer index of its first character, its character count, and
+   * the visual column its first character renders at (only the first physical
+   * row of line 0 is offset, by the prompt). Drives ↑/↓: row 0 is "the top
+   * line" (history recall territory), anything below moves the caret instead.
    */
   inputLayout() {
     const cols2 = process.stdout.columns || 80;
+    const { contentW } = inputBoxGeometry(cols2);
     const pw = this.visibleWidth(this.promptPrefix());
     const lines = this.inputBuffer.split("\n");
     const rows = [];
     let offset = 0;
     for (let i = 0; i < lines.length; i++) {
-      const lead = i === 0 ? pw : 0;
       const len = lines[i].length;
-      const nRows = Math.max(1, Math.ceil((lead + len) / cols2));
-      for (let j = 0; j < nRows; j++) {
-        const charStart = Math.max(0, j * cols2 - lead);
-        const charEnd = Math.min(len, (j + 1) * cols2 - lead);
-        rows.push({ start: offset + charStart, len: Math.max(0, charEnd - charStart), colOffset: j === 0 ? lead : 0 });
-      }
+      let remaining = len;
+      let charStart = 0;
+      do {
+        const avail = Math.max(0, contentW - pw);
+        let take = Math.min(remaining, avail);
+        if (take === 0 && avail === 0 && remaining > 0) take = 1;
+        rows.push({ start: offset + charStart, len: take, colOffset: pw });
+        charStart += take;
+        remaining -= take;
+      } while (remaining > 0);
       offset += len + 1;
     }
-    let pos = this.cursorPos;
-    let caretLine = 0;
-    while (caretLine < lines.length - 1 && pos > lines[caretLine].length) {
-      pos -= lines[caretLine].length + 1;
-      caretLine++;
+    let caretRow = 0;
+    let caretCol = 0;
+    let found = false;
+    for (let r = 0; r < rows.length; r++) {
+      const row = rows[r];
+      const rowEnd = row.start + row.len;
+      const isLast = r === rows.length - 1;
+      const nextStart = isLast ? rowEnd : rows[r + 1].start;
+      if (this.cursorPos < rowEnd || this.cursorPos === rowEnd && (isLast || nextStart > rowEnd)) {
+        caretRow = r;
+        caretCol = row.colOffset + (this.cursorPos - row.start);
+        found = true;
+        break;
+      }
+    }
+    if (!found && rows.length) {
+      caretRow = rows.length - 1;
+      const row = rows[caretRow];
+      caretCol = row.colOffset + row.len;
     }
-    const caretCell = (caretLine === 0 ? pw : 0) + pos;
-    let caretRow = Math.floor(caretCell / cols2);
-    for (let i = 0; i < caretLine; i++) {
-      const lead = i === 0 ? pw : 0;
-      caretRow += Math.max(1, Math.ceil((lead + lines[i].length) / cols2));
+    while (caretRow >= rows.length) {
+      rows.push({ start: this.inputBuffer.length, len: 0, colOffset: 0 });
     }
-    const caretCol = caretCell % cols2;
-    while (caretRow >= rows.length) rows.push({ start: this.inputBuffer.length, len: 0, colOffset: 0 });
     return { rows, caretRow, caretCol, rowCount: rows.length };
   }
   /** Move the caret one visual row up/down, keeping the column when possible. */
@@ -2730,19 +2924,19 @@ var Tui = class _Tui {
     return parts.length ? `${C.gray}${parts.join(" ")}${C.reset}` : "";
   }
   /**
-   * Understated context gauge, right-aligned on the summary line: just "N%",
-   * dim, and INVISIBLE until the conversation is more than 85% of the way to
-   * the compaction point (the percentage is scaled so 100% = where background
-   * compaction triggers, not the raw model window). Most sessions never see it.
+   * Context-to-compaction gauge, right-aligned on the status line: just "N%"
+   * in dull grey. Shown whenever we know a value (any fill — 5%, 10%, 20%…).
+   * The percentage is scaled so 100% = where background compaction triggers,
+   * not the raw model window.
    */
   contextGaugeText() {
-    if (this.contextPct == null || this.contextPct <= 85) return "";
-    return `${C.dim}${C.gray}${this.contextPct}%${C.reset}`;
+    if (this.contextPct == null) return "";
+    return `\x1B[38;5;240m${this.contextPct}%${C.reset}`;
   }
   /**
    * 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).
+   * Driven by the runtime's `context_usage` KV, scaled to the compaction
+   * trigger (see index.ts poll). Always painted on the status line far right.
    */
   setContextPct(pct) {
     const next = pct == null ? null : Math.max(0, Math.min(100, Math.round(pct)));
@@ -2940,10 +3134,14 @@ var Tui = class _Tui {
     if (up > 0) process.stdout.write(`\x1B[${up}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.
+   * Render the bottom region: status + subagents above a side-margined expanding
+   * input box (level in the top border far right), with the caret on the input
+   * body. Uses only relative cursor moves so it survives terminal scrolling when
+   * the region grows near the bottom of the screen.
+   *
+   * Layout (top → bottom):
+   *   preview · ruler · notice · quit · status · subagents · goal ·
+   *   box top (level) · box body · box bottom · palette
    */
   renderBottom() {
     if (!this.started || this.takeoverHandler) return;
@@ -2959,69 +3157,66 @@ var Tui = class _Tui {
     };
     const previewLines = this.streamPreviewLines(cols2);
     for (const line of previewLines) writeHudRow(line);
-    const rulerRows = 1;
     writeHudRow(`${C.dim}${"\u2500".repeat(cols2)}${C.reset}`);
+    const geo = inputBoxGeometry(cols2);
+    const workPad = " ".repeat(geo.margin);
+    const workCols = Math.max(8, cols2 - geo.margin);
     const noticeLine = this.connected ? null : `${C.yellow}\u26A0 lost connection to the workspace \u2014 reconnecting\u2026${C.reset}`;
-    const noticeRows = noticeLine ? 1 : 0;
-    if (noticeLine) writeHudRow(noticeLine);
+    if (noticeLine) writeHudRow(workPad + noticeLine);
     const quitLine = this.quitArmed ? `${C.dim}Press Control-C again to exit${C.reset}` : null;
-    const quitRows = quitLine ? 1 : 0;
-    if (quitLine) writeHudRow(quitLine);
+    if (quitLine) writeHudRow(workPad + quitLine);
+    const statusLine = this.statusLineText(workCols);
+    if (statusLine) writeHudRow(workPad + statusLine);
     const frame = FRAMES[Math.floor(Date.now() / SPINNER_MS) % FRAMES.length];
     for (const sub of this.subagents) {
       const color = sub.agentName === COMPACTION_AGENT ? COMPACTION_COLOR : SUBAGENT_COLORS[this.subagentColorByID.get(sub.id) ?? 0];
-      const budget = cols2 - 10;
+      const budget = workCols - 10;
       let label = sub.label;
       if (budget < 1) label = "";
       else if (label.length > budget) label = label.slice(0, Math.max(0, budget - 1)) + "\u2026";
       const line = `${color}${frame}${C.reset} ${color}${label}${C.reset} ${C.dim}working${C.reset}`;
-      writeHudRow(line);
-    }
-    const statusLine = this.statusLineText(cols2);
-    const statusRows = statusLine ? 1 : 0;
-    if (statusLine) writeHudRow(statusLine);
-    const goalLines = this.goalLines(cols2);
-    for (const line of goalLines) writeHudRow(line);
-    const aboveRows = previewLines.length + rulerRows + noticeRows + quitRows + this.subagents.length + statusRows + goalLines.length;
+      writeHudRow(workPad + line);
+    }
+    const goalLines = this.goalLines(workCols);
+    for (const line of goalLines) writeHudRow(workPad + line);
     const prefix = this.promptPrefix();
     const pw = this.visibleWidth(prefix);
-    const lines = this.inputBuffer.split("\n");
-    const tail = [prefix + lines[0]];
-    for (let i = 1; i < lines.length; i++) tail.push("\r\n" + lines[i]);
-    const rowsOf = (len, lead) => Math.max(1, Math.ceil((lead + len) / cols2));
-    const lineRows = lines.map((l, i) => rowsOf(l.length, i === 0 ? pw : 0));
-    const inputRows = lineRows.reduce((a, b) => a + b, 0);
-    let pos = this.cursorPos;
-    let caretLine = 0;
-    while (caretLine < lines.length - 1 && pos > lines[caretLine].length) {
-      pos -= lines[caretLine].length + 1;
-      caretLine++;
-    }
-    const caretCell = (caretLine === 0 ? pw : 0) + pos;
-    let caretRow = Math.floor(caretCell / cols2);
-    for (let i = 0; i < caretLine; i++) caretRow += lineRows[i];
-    const caretCol = caretCell % cols2;
+    const boxRows = buildInputBoxRows({
+      cols: cols2,
+      inputBuffer: this.inputBuffer,
+      prefix,
+      prefixWidth: pw,
+      level: this.level,
+      levelColor: this.levelColor(),
+      borderColor: inputBoxBorderColor()
+    });
+    const boxTop = boxRows[0];
+    const boxBottom = boxRows[boxRows.length - 1];
+    const boxBody = boxRows.slice(1, -1);
+    writeHudRow(boxTop);
+    const aboveBodyWidths = hudWidths.slice();
+    const aboveBodyRows = aboveBodyWidths.length;
+    for (const row of boxBody) writeHudRow(row);
+    writeHudRow(boxBottom);
     const paletteBlock = this.paletteBlockLines(cols2);
-    for (const line of paletteBlock) tail.push("\r\n" + line);
-    if (paletteBlock.length > 0) {
-      tail.push("\r");
-      const up = inputRows - 1 + paletteBlock.length - caretRow;
-      if (up > 0) tail.push(`\x1B[${up}A`);
-      if (caretCol > 0) tail.push(`\x1B[${caretCol}C`);
-      this.lastCursorRow = aboveRows + caretRow;
-    } else if (this.cursorPos < this.inputBuffer.length) {
-      tail.push("\r");
-      const up = inputRows - 1 - caretRow;
-      if (up > 0) tail.push(`\x1B[${up}A`);
-      if (caretCol > 0) tail.push(`\x1B[${caretCol}C`);
-      this.lastCursorRow = aboveRows + caretRow;
-    } else {
-      this.lastCursorRow = aboveRows + (inputRows - 1);
-    }
-    this.drawnHudWidths = hudWidths;
+    for (const line of paletteBlock) writeHudRow(line);
+    const layout = this.inputLayout();
+    const bodyRowCount = Math.max(1, boxBody.length);
+    const caretBodyRow = Math.max(0, Math.min(layout.caretRow, bodyRowCount - 1));
+    const caretRegionRow = aboveBodyRows + caretBodyRow;
+    const caretScreenCol = Math.min(rowCap - 1, geo.leftPad + layout.caretCol);
+    this.lastCursorRow = caretRegionRow;
+    this.drawnHudWidths = aboveBodyWidths;
     this.lastDrawnCols = cols2;
     this.bottomDrawn = true;
-    const out = "\x1B[J" + hudRows.join("\r\n") + "\r\n" + tail.join("");
+    const totalRows = hudRows.length;
+    const up = Math.max(0, totalRows - 1 - caretRegionRow);
+    let out = "\x1B[J" + hudRows.join("\r\n");
+    if (totalRows > 0) {
+      out += "\r";
+      if (up > 0) out += `\x1B[${up}A`;
+      if (caretScreenCol > 0) out += `\x1B[${caretScreenCol}C`;
+    }
     process.stdout.write(out);
   }
   clearBottom() {
@@ -3436,44 +3631,62 @@ var Tui = class _Tui {
       };
     });
   }
-  /** Arrow-key selection menu (slash menu, process menu, resume). Pauses input. */
+  /**
+   * Arrow-key selection menu (slash menu, process menu, resume). Pauses input.
+   * Boxed chrome matches the bottom input HUD: side margin + grey rounded
+   * border, selected row with a brand-tinted pointer.
+   */
   select(title, items) {
     return new Promise((resolve) => {
       let idx = 0;
       this.beginTakeover();
+      const cols2 = process.stdout.columns || 80;
+      const geo = inputBoxGeometry(cols2);
+      const border = inputBoxBorderColor();
+      const pad = " ".repeat(geo.margin);
+      const rowCap = Math.max(1, cols2 - 1);
       if (title) process.stdout.write(`
-${title}
-
+${pad}${title}
 `);
-      const renderLine = (i) => {
-        const w = process.stdout.columns || 80;
+      else process.stdout.write("\n");
+      const renderItemContent = (i) => {
         const it = items[i];
         const sel = i === idx;
         const hint = it.hint ?? "";
         const hintW = hint.length;
         const pointerW = 2;
-        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) + "\u2026";
+        const labelMax = Math.max(4, geo.contentW - pointerW - (hintW ? hintW + 2 : 0));
+        let label = it.label.replace(/\s+/g, " ").trim();
+        if (label.length > labelMax) label = label.slice(0, Math.max(0, labelMax - 1)) + "\u2026";
         const pointer = sel ? `${C.magenta}\u276F${C.reset} ` : "  ";
-        const styledLabel = sel ? `${C.bold}${C.cyan}${label}${C.reset}` : label;
-        let line = `${pointer}${styledLabel}`;
+        const styledLabel = sel ? `${C.bold}${C.cyan}${label}${C.reset}` : `${C.dim}${label}${C.reset}`;
+        let content = `${pointer}${styledLabel}`;
         if (hintW) {
-          const gap = Math.max(2, w - 2 - pointerW - label.length - hintW);
-          line += `${" ".repeat(gap)}${C.gray}${hint}${C.reset}`;
+          const used = pointerW + label.length;
+          const gap = Math.max(1, geo.contentW - used - hintW);
+          content += `${" ".repeat(gap)}${sel ? C.gray : C.dim}${hint}${C.reset}`;
         }
-        return line;
+        return content;
       };
-      const draw = (moveUp) => {
-        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)}
+      const writeRow = (line) => {
+        const row = this.clampVisible(sanitizeHudRow(line), rowCap);
+        process.stdout.write(`\r\x1B[K${row}
 `);
       };
+      const draw = (moveUp) => {
+        if (moveUp) process.stdout.write(`\x1B[${items.length + 1}A`);
+        else writeRow(pad + buildBoxTopPlain(geo.boxW, border));
+        for (let i = 0; i < items.length; i++) {
+          writeRow(pad + buildBoxBody(renderItemContent(i), geo.contentW, border));
+        }
+        writeRow(pad + buildBoxBottom(geo.boxW, border));
+      };
       draw(false);
-      const titleRows = title ? 3 : 0;
+      const titleRows = title ? 2 : 1;
+      const boxRows = 1 + items.length + 1;
       const erase = () => {
         process.stdout.write("\r");
-        const up = titleRows + items.length;
+        const up = titleRows + boxRows;
         if (up > 0) process.stdout.write(`\x1B[${up}A`);
         process.stdout.write("\x1B[J");
       };
@@ -4449,11 +4662,12 @@ function printAssistant(tui, text) {
 }
 function startLoader(label) {
   const frames = ["\u28F7", "\u28EF", "\u28DF", "\u287F", "\u28BF", "\u28FB", "\u28FD", "\u28FE"];
+  const pad = " ".repeat(INPUT_BOX_MARGIN);
   stdout.write("\x1B[?25l");
   const draw = () => {
     const now = Date.now();
     const f = frames[Math.floor(now / 70) % frames.length];
-    stdout.write(`\r\x1B[K${brandCycleColor(now)}${f}${c.reset} ${c.dim}${label}\u2026${c.reset}`);
+    stdout.write(`\r\x1B[K${pad}${brandCycleColor(now)}${f}${c.reset} ${c.dim}${label}\u2026${c.reset}`);
   };
   draw();
   const timer = setInterval(draw, 70);
@@ -4776,7 +4990,7 @@ ${c.dim}Press Control-C again to exit${c.reset}
     const tilde = projectDir.startsWith(home) ? "~" + projectDir.slice(home.length) : projectDir;
     const shortDir = tilde.length > 38 ? "\u2026" + tilde.slice(-37) : tilde;
     const picked = await tui.select(
-      `${c.bold}${c.magenta}Resume a session${c.reset}  ${c.gray}${shortDir}${c.reset}  ${c.dim}\u2191\u2193 \xB7 enter \xB7 esc to cancel${c.reset}`,
+      `${c.bold}${gradientText("Resume a session")}${c.reset}  ${c.gray}${shortDir}${c.reset}  ${c.dim}\u2191\u2193 \xB7 enter \xB7 esc${c.reset}`,
       items
     );
     if (typeof picked === "string") {
@@ -5025,8 +5239,12 @@ ${c.bold}why: ${req.requestPermission}${c.reset}` : ""}`,
   const agentTitlesReady = api.listAgents().then((list) => list.forEach((a) => agentTitles.set(a.name, a.title))).catch(() => {
   });
   const pushSubagents = () => tui.setSubagents(
-    [...activeSubagents.entries()].map(([id, s]) => ({ id, label: s.label, agentName: s.agentName }))
+    [...activeSubagents.entries()].map(([id, s]) => {
+      const detail = subActivity.phraseFor(id) ?? s.registryDetail;
+      return { id, label: `${s.title}${detail ? ` \u2014 ${detail}` : ""}`, agentName: s.agentName };
+    })
   );
+  const subActivity = new SubagentActivity(api, () => pushSubagents());
   const reconcileSubagents = async () => {
     try {
       await agentTitlesReady;
@@ -5036,12 +5254,13 @@ ${c.bold}why: ${req.requestPermission}${c.reset}` : ""}`,
         const status = (s.status || "").trim();
         if (status === "idle" || status === "terminated") continue;
         const oneLineStatus = status.replace(/\s+/g, " ");
-        const detail = oneLineStatus && oneLineStatus !== "running" ? ` \u2014 ${oneLineStatus.slice(0, 80)}` : "";
         activeSubagents.set(s.id, {
-          label: `${subagentLabel(s, agentTitles)}${detail}`,
+          title: subagentLabel(s, agentTitles),
+          registryDetail: oneLineStatus && oneLineStatus !== "running" ? oneLineStatus.slice(0, 80) : "",
           agentName: s.agent_name ?? void 0
         });
       }
+      subActivity.sync(activeSubagents.keys());
       pushSubagents();
     } catch {
     }
@@ -5088,6 +5307,7 @@ ${c.bold}why: ${req.requestPermission}${c.reset}` : ""}`,
     bridge.close();
     stream.close();
     events.close();
+    subActivity.closeAll();
     mcp.closeAll();
     const [, killed2] = await Promise.race([
       Promise.all([stopped2, procsStopped2]),
@@ -5508,6 +5728,7 @@ ${c.bold}why: ${req.requestPermission}${c.reset}` : ""}`,
   bridge.close();
   stream.close();
   events.close();
+  subActivity.closeAll();
   mcp.closeAll();
   const [, killed] = await Promise.race([
     Promise.all([stopped, procsStopped]),