@wrongstack/tui 0.10.2 → 0.24.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { PassThrough } from 'stream';
+import { Readable } from 'stream';
 import { Box, Text, render, useApp, useStdout, measureElement, Static, useInput, useStdin } from 'ink';
-import React4, { useState, useEffect, useReducer, useRef, useMemo, useLayoutEffect } from 'react';
+import React4, { useState, useEffect, useReducer, useRef, useMemo, useCallback, useLayoutEffect } from 'react';
 import * as fs2 from 'fs/promises';
 import * as path2 from 'path';
 import { InputBuilder, DefaultSessionRewinder, formatTodosList, buildGoalPreamble, buildChildEnv } from '@wrongstack/core';
@@ -35,6 +35,8 @@ var theme = Object.freeze({
   diffAddBg: "greenBright",
   diffDelBg: "redBright"
 });
+var COMPACT_THRESHOLD = 50;
+var COMFORTABLE_THRESHOLD = 90;
 function StatusBar({
   model,
   version,
@@ -58,6 +60,18 @@ function StatusBar({
   eternalStage,
   goalSummary
 }) {
+  const { stdout } = useStdout();
+  const [termWidth, setTermWidth] = useState(stdout?.columns ?? 90);
+  useEffect(() => {
+    const handleResize = () => setTermWidth(stdout?.columns ?? 90);
+    handleResize();
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, [stdout]);
+  const isCompact = termWidth < COMPACT_THRESHOLD;
+  const isComfortable = termWidth >= COMFORTABLE_THRESHOLD;
   const hiddenSet = new Set(hiddenItems);
   const usage = tokenCounter?.total();
   const cost = tokenCounter?.estimateCost();
@@ -77,74 +91,87 @@ function StatusBar({
       borderLeft: false,
       borderRight: false,
       children: [
-        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 2, children: [
-          version ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(Text, { children: [
-              /* @__PURE__ */ jsx(Text, { color: "blue", bold: true, children: "WS" }),
-              /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-                " v",
-                version
-              ] })
+        /* @__PURE__ */ jsx(Box, { flexDirection: "row", gap: 2, children: isCompact ? (
+          // Ultra-compact: state · model
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Text, { color: stateColor, children: [
+              "\u25CF",
+              stateLabel
+            ] }),
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\xB7" }),
+            /* @__PURE__ */ jsx(Text, { color: "magenta", children: model })
+          ] })
+        ) : (
+          // Full mode: version · state · model · context · tokens · cost · queue · processes · hint
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            version ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(Text, { children: [
+                /* @__PURE__ */ jsx(Text, { color: "blue", bold: true, children: "WS" }),
+                /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+                  " v",
+                  version
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" })
+            ] }) : null,
+            /* @__PURE__ */ jsxs(Text, { color: stateColor, children: [
+              "\u25CF ",
+              stateLabel
             ] }),
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" })
-          ] }) : null,
-          /* @__PURE__ */ jsxs(Text, { color: stateColor, children: [
-            "\u25CF ",
-            stateLabel
-          ] }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-          /* @__PURE__ */ jsx(Text, { color: "magenta", children: model }),
-          context && context.max > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsx(ContextChip, { ctx: context })
-          ] }) : null,
-          usage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsxs(Text, { children: [
-              "\u2191",
-              " ",
-              /* @__PURE__ */ jsx(Text, { color: "cyan", children: fmtTok(usage.input + (usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0)) }),
-              " ",
-              "\u2193 ",
-              /* @__PURE__ */ jsx(Text, { color: "cyan", children: fmtTok(usage.output) })
-            ] })
-          ] }) : null,
-          cache2 && cache2.hitRatio > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-              "cache ",
-              (cache2.hitRatio * 100).toFixed(0),
-              "%"
-            ] })
-          ] }) : null,
-          cost && cost.total > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
-              "$",
-              cost.total.toFixed(4)
-            ] })
-          ] }) : null,
-          queueCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
-              "\u231B queued: ",
-              queueCount
-            ] })
-          ] }) : null,
-          typeof processCount === "number" && processCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsxs(Text, { color: "red", children: [
-              "\u26A1 ",
-              processCount,
-              " process",
-              processCount === 1 ? "" : "es"
-            ] })
-          ] }) : null,
-          hint ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint })
-          ] }) : null
-        ] }),
+            /* @__PURE__ */ jsx(Text, { color: "magenta", children: model }),
+            context && context.max > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsx(ContextChip, { ctx: context })
+            ] }) : null,
+            usage && isComfortable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsxs(Text, { children: [
+                "\u2191",
+                " ",
+                /* @__PURE__ */ jsx(Text, { color: "cyan", children: fmtTok(usage.input + (usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0)) }),
+                " ",
+                "\u2193 ",
+                /* @__PURE__ */ jsx(Text, { color: "cyan", children: fmtTok(usage.output) })
+              ] })
+            ] }) : null,
+            cache2 && cache2.hitRatio > 0 && isComfortable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+                "cache ",
+                (cache2.hitRatio * 100).toFixed(0),
+                "%"
+              ] })
+            ] }) : null,
+            cost && cost.total > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+                "$",
+                cost.total.toFixed(4)
+              ] })
+            ] }) : null,
+            queueCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
+                "\u231B queued: ",
+                queueCount
+              ] })
+            ] }) : null,
+            typeof processCount === "number" && processCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsxs(Text, { color: "red", children: [
+                "\u26A1 ",
+                processCount,
+                " process",
+                processCount === 1 ? "" : "es"
+              ] })
+            ] }) : null,
+            hint ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint })
+            ] }) : null
+          ] })
+        ) }),
         hasSecondLine ? /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 2, children: [
           yolo ? /* @__PURE__ */ jsx(Text, { color: "red", bold: true, children: "\u26A0 YOLO" }) : null,
           autonomy && autonomy !== "off" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -855,21 +882,58 @@ function AgentsMonitor({
   ] });
 }
 var AUTONOMY_OPTIONS = [
-  { mode: "off", label: "OFF", description: "Agent stops after each turn (normal interactive mode)", color: "green" },
-  { mode: "suggest", label: "SUGGEST", description: "Shows next-step suggestions after each turn", color: "cyan" },
-  { mode: "auto", label: "AUTO", description: "Self-driving \u2014 agent picks next step and continues", color: "yellow" },
-  { mode: "eternal", label: "ETERNAL", description: "Goal-driven loop \u2014 requires /goal set first", color: "red" },
-  { mode: "eternal-parallel", label: "PARALLEL", description: "Fan-out 4\u20138 subagents per tick \u2014 requires /goal", color: "magenta" }
+  {
+    mode: "off",
+    label: "OFF",
+    description: "Agent stops after each turn (normal interactive mode)",
+    color: "green"
+  },
+  {
+    mode: "suggest",
+    label: "SUGGEST",
+    description: "Shows next-step suggestions after each turn",
+    color: "cyan"
+  },
+  {
+    mode: "auto",
+    label: "AUTO",
+    description: "Self-driving \u2014 agent picks next step and continues",
+    color: "yellow"
+  },
+  {
+    mode: "eternal",
+    label: "ETERNAL",
+    description: "Goal-driven loop \u2014 requires /goal set first",
+    color: "red"
+  },
+  {
+    mode: "eternal-parallel",
+    label: "PARALLEL",
+    description: "Fan-out 4\u20138 subagents per tick \u2014 requires /goal",
+    color: "magenta"
+  }
 ];
-function AutonomyPicker({ options, selected, hint }) {
+function AutonomyPicker({
+  options,
+  selected,
+  hint
+}) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
     /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "\u2501\u2501 Autonomy Mode \u2501\u2501" }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191/\u2193 navigate \xB7 Enter select \xB7 Esc cancel \xB7 Ctrl+C exit" }),
-    options.map((opt, i) => /* @__PURE__ */ jsxs(Text, { color: i === selected ? opt.color : void 0, inverse: i === selected, children: [
-      i === selected ? "\u203A " : "  ",
-      /* @__PURE__ */ jsx(Text, { bold: true, children: opt.label.padEnd(12) }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: opt.description })
-    ] }, opt.mode)),
+    options.map((opt, i) => /* @__PURE__ */ jsxs(
+      Text,
+      {
+        color: i === selected ? opt.color : void 0,
+        inverse: i === selected,
+        children: [
+          i === selected ? "\u203A " : "  ",
+          /* @__PURE__ */ jsx(Text, { bold: true, children: opt.label.padEnd(12) }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: opt.description })
+        ]
+      },
+      opt.mode
+    )),
     hint ? /* @__PURE__ */ jsx(Text, { color: "yellow", children: hint }) : null
   ] });
 }
@@ -907,7 +971,8 @@ function CheckpointTimeline({
           new Date(cp.ts).toLocaleTimeString()
         ] }),
         cp.fileCount > 0 && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-          " \xB7 ",
+          " ",
+          "\xB7 ",
           cp.fileCount,
           " file",
           cp.fileCount !== 1 ? "s" : ""
@@ -1028,9 +1093,24 @@ function FilePicker({ query, matches, selected }) {
 function highlight(path3, _query) {
   return path3;
 }
-function FleetPanel({ entries, totalCost, collabSession }) {
+function FleetPanel({
+  entries,
+  totalCost,
+  collabSession
+}) {
+  const { stdout } = useStdout();
+  const [termWidth, setTermWidth] = useState(stdout?.columns ?? 90);
+  useEffect(() => {
+    const handleResize = () => setTermWidth(stdout?.columns ?? 90);
+    handleResize();
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, [stdout]);
   const list = Object.values(entries);
   if (list.length === 0 && !collabSession) return null;
+  const nameMaxLen = Math.max(6, Math.min(14, termWidth - 30));
   const leader = list.find((e) => e.id === "leader");
   const subagents = list.filter((e) => e.id !== "leader");
   const running = subagents.filter((e) => e.status === "running");
@@ -1050,16 +1130,16 @@ function FleetPanel({ entries, totalCost, collabSession }) {
     ] }),
     hasCollab && leader ? /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
       /* @__PURE__ */ jsx(Text, { color: "yellow", children: "\u25CF" }),
-      /* @__PURE__ */ jsx(Text, { children: leader.name.slice(0, 14).padEnd(14) }),
+      /* @__PURE__ */ jsx(Text, { children: leader.name.slice(0, nameMaxLen) }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2192" }),
       /* @__PURE__ */ jsx(Text, { color: "yellow", children: leaderTool })
     ] }) : null,
     shown.map((entry) => {
-      const name = entry.name && entry.name !== entry.id ? entry.name : entry.id.slice(0, 8);
+      const name = entry.name && entry.name !== entry.id ? entry.name : entry.id.slice(0, nameMaxLen);
       const tool = entry.currentTool?.name ?? "\u2014";
       return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
         /* @__PURE__ */ jsx(Text, { color: "green", children: "\u25CF" }),
-        /* @__PURE__ */ jsx(Text, { children: name.slice(0, 14).padEnd(14) }),
+        /* @__PURE__ */ jsx(Text, { children: name.slice(0, nameMaxLen) }),
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2192" }),
         /* @__PURE__ */ jsx(Text, { color: "cyan", children: tool })
       ] }, entry.id);
@@ -1069,7 +1149,7 @@ function FleetPanel({ entries, totalCost, collabSession }) {
       "+",
       overflow,
       ": ",
-      running[3]?.name?.slice(0, 12) ?? "agent",
+      running[3]?.name?.slice(0, nameMaxLen - 2) ?? "agent",
       "\u2026"
     ] }) : null
   ] });
@@ -1542,7 +1622,8 @@ function tokenizePython(line, carry) {
 }
 function tokenizeDiff(line) {
   if (line.startsWith("@@")) return [{ text: line, color: C.diffMeta }];
-  if (line.startsWith("+++") || line.startsWith("---")) return [{ text: line, color: C.diffMeta, dim: true }];
+  if (line.startsWith("+++") || line.startsWith("---"))
+    return [{ text: line, color: C.diffMeta, dim: true }];
   if (line.startsWith("+")) return [{ text: line, color: C.diffAdd }];
   if (line.startsWith("-")) return [{ text: line, color: C.diffDel }];
   return [{ text: line, dim: true }];
@@ -1631,6 +1712,14 @@ function parseAlign(sep2) {
   if (right) return "right";
   return "left";
 }
+function parseSeparatorWidths(sepCells) {
+  return sepCells.map((cell) => {
+    const trimmed = cell.trim();
+    const dashes = trimmed.replace(/:/g, "");
+    if (/^-+$/.test(dashes)) return dashes.length;
+    return null;
+  });
+}
 function renderTable(tableLines, maxWidth) {
   const header = parseCells(tableLines[0] ?? "");
   const sepCells = parseCells(tableLines[1] ?? "");
@@ -1644,7 +1733,8 @@ function renderTable(tableLines, maxWidth) {
     while (row.length < cols) row.push("");
     row.length = cols;
   }
-  const widths = computeWidths([header, ...dataRows], cols, maxWidth);
+  const sepWidths = parseSeparatorWidths(sepCells);
+  const widths = computeWidths([header, ...dataRows], cols, maxWidth, sepWidths);
   const lines = [];
   lines.push(border("\u250C", "\u252C", "\u2510", widths));
   lines.push(...renderRow(header, widths, aligns));
@@ -1655,7 +1745,7 @@ function renderTable(tableLines, maxWidth) {
   lines.push(border("\u2514", "\u2534", "\u2518", widths));
   return lines.join("\n");
 }
-function computeWidths(allRows, cols, maxWidth) {
+function computeWidths(allRows, cols, maxWidth, sepWidths) {
   const overhead = 3 * cols + 1;
   const avail = Math.max(cols * MIN_COL_WIDTH, maxWidth - overhead);
   const natural = new Array(cols).fill(0);
@@ -1663,9 +1753,16 @@ function computeWidths(allRows, cols, maxWidth) {
     for (let c = 0; c < cols; c++) {
       const cell = row[c] ?? "";
       const w = longestWord(cell);
-      const total = cell.length;
-      natural[c] = Math.max(natural[c], total);
-      if (w > natural[c]) natural[c] = Math.min(total + 1, w);
+      const total = strWidth(cell);
+      natural[c] = Math.max(natural[c], w, total);
+    }
+  }
+  if (sepWidths) {
+    for (let c = 0; c < cols && c < sepWidths.length; c++) {
+      const sepW = sepWidths[c];
+      if (sepW != null) {
+        natural[c] = Math.max(natural[c], sepW);
+      }
     }
   }
   const sumNatural = natural.reduce((s2, n) => s2 + n, 0);
@@ -1689,9 +1786,51 @@ function computeWidths(allRows, cols, maxWidth) {
   return widths;
 }
 var MIN_COL_WIDTH = 4;
+function strWidth(s2) {
+  let width = 0;
+  for (const cp of s2) {
+    const code = cp.codePointAt(0);
+    if (code < 32 || code >= 127 && code < 160) {
+      continue;
+    }
+    if (code >= 126976 || // Supplementary Pictographs (U+1F000-U+1FFFF)
+    code >= 9728 && code <= 10175 || // Miscellaneous Symbols, Dingbats
+    code >= 8960 && code <= 9215 || // Miscellaneous Technical
+    code >= 11088 && code <= 11093 || // Stars and similar
+    code >= 10548 && code <= 10549 || // Arrow forms
+    code >= 8592 && code <= 8703 || // Arrows
+    code >= 9632 && code <= 9727 || // Geometric Shapes
+    code >= 9664 && code <= 9726 || // More Geometric Shapes (includes ▶)
+    code >= 9984 && code <= 10175) {
+      width += 2;
+      continue;
+    }
+    if (code >= 4352 && code <= 4447 || // Hangul Jamo
+    code === 9001 || // LEFT-POINTING ANGLE BRACKET
+    code === 9002 || // RIGHT-POINTING ANGLE BRACKET
+    code >= 11904 && code <= 12350 || // CJK Radicals Supplement
+    code >= 12352 && code <= 42191 || // Hiragana, Katakana, CJK
+    code >= 44032 && code <= 55203 || // Hangul Syllables
+    code >= 63744 && code <= 64249 || // CJK Compatibility Ideographs
+    code >= 65040 && code <= 65055 || // Vertical forms
+    code >= 65072 && code <= 65135 || // CJK Compatibility Forms
+    code >= 65280 && code <= 65376 || // Fullwidth Forms
+    code >= 65504 && code <= 65510 || // Halfwidth and Fullwidth Forms
+    code >= 131072 && code <= 196605 || // CJK Extension B+
+    code >= 196608 && code <= 262141) {
+      width += 2;
+      continue;
+    }
+    width += 1;
+  }
+  return width;
+}
 function longestWord(s2) {
   let max = 0;
-  for (const w of s2.split(/\s+/)) if (w.length > max) max = w.length;
+  for (const w of s2.split(/\s+/)) {
+    const visualWidth = strWidth(w);
+    if (visualWidth > max) max = visualWidth;
+  }
   return max;
 }
 function border(left, mid, right, widths) {
@@ -1713,43 +1852,86 @@ function renderRow(cells, widths, aligns) {
   return out;
 }
 function wrapCell(text, width) {
-  if (text.length <= width) return [text];
+  if (strWidth(text) <= width) return [text];
   const out = [];
   const words = text.split(/(\s+)/);
   let cur = "";
+  let curWidth = 0;
   for (const word of words) {
     if (!word) continue;
-    if (cur.length + word.length <= width) {
+    const wordWidth = strWidth(word);
+    if (curWidth + wordWidth <= width) {
       cur += word;
+      curWidth += wordWidth;
       continue;
     }
     if (cur) {
-      out.push(cur.trimEnd());
+      out.push(padVisual(cur, width));
       cur = "";
+      curWidth = 0;
     }
-    if (word.length > width) {
+    if (wordWidth > width) {
       let rest = word;
-      while (rest.length > width) {
-        out.push(rest.slice(0, width));
-        rest = rest.slice(width);
+      let restWidth = wordWidth;
+      while (restWidth > width) {
+        let collected = "";
+        let collectedWidth = 0;
+        for (const cp of rest) {
+          const cpWidth = strWidth(cp);
+          if (collectedWidth + cpWidth > width) break;
+          collected += cp;
+          collectedWidth += cpWidth;
+        }
+        out.push(padVisual(collected, width));
+        rest = rest.slice([...collected].join("").length);
+        restWidth = strWidth(rest);
       }
       cur = rest;
+      curWidth = strWidth(rest);
     } else if (!/^\s+$/.test(word)) {
       cur = word;
+      curWidth = wordWidth;
     }
   }
-  if (cur) out.push(cur.trimEnd());
+  if (cur) out.push(padVisual(cur, width));
   return out.length === 0 ? [""] : out;
 }
+function padVisual(text, targetWidth) {
+  const w = strWidth(text);
+  if (w >= targetWidth) {
+    let taken = 0;
+    let endIdx = 0;
+    for (const cp of text) {
+      const cpw = strWidth(cp);
+      if (taken + cpw > targetWidth) break;
+      taken += cpw;
+      endIdx += [...cp].join("").length;
+    }
+    return text.slice(0, endIdx);
+  }
+  return text + " ".repeat(targetWidth - w);
+}
 function padCell(text, width, align) {
-  if (text.length >= width) return text.slice(0, width);
-  const pad = width - text.length;
-  if (align === "right") return " ".repeat(pad) + text;
+  const visualLen = strWidth(text);
+  let displayText = text;
+  if (visualLen > width) {
+    let takenWidth = 0;
+    let endIdx = 0;
+    for (const cp of text) {
+      const cpWidth = strWidth(cp);
+      if (takenWidth + cpWidth > width) break;
+      takenWidth += cpWidth;
+      endIdx += [...cp].join("").length;
+    }
+    displayText = text.slice(0, endIdx);
+  }
+  const pad = width - strWidth(displayText);
+  if (align === "right") return " ".repeat(pad) + displayText;
   if (align === "center") {
     const l = Math.floor(pad / 2);
-    return " ".repeat(l) + text + " ".repeat(pad - l);
+    return " ".repeat(l) + displayText + " ".repeat(pad - l);
   }
-  return text + " ".repeat(pad);
+  return displayText + " ".repeat(pad);
 }
 function parseInline(text) {
   const tokens = [];
@@ -1857,7 +2039,7 @@ function MarkdownView({
     if (quote && line.startsWith(">")) {
       rows.push(
         /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502 " }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " }),
           /* @__PURE__ */ jsx(InlineLine, { tokens: parseInline(quote[1] ?? ""), dim: true })
         ] }, `q${key++}`)
       );
@@ -1982,13 +2164,13 @@ function splitFencedBlocks(text) {
 function CodeBlock({
   code,
   lang,
-  termWidth
+  contentWidth
 }) {
   let lines = code.replace(/\n+$/, "").split("\n");
   const hidden = Math.max(0, lines.length - MAX_CODE_LINES);
   if (hidden > 0) lines = lines.slice(0, MAX_CODE_LINES);
   const gutterW = String(lines.length).length;
-  const maxW = Math.max(20, Math.min(termWidth - 8 - gutterW - 1, 120));
+  const maxW = Math.max(20, Math.min(contentWidth - 6 - gutterW - 1, 120));
   let carry = {};
   const rows = lines.map((raw) => {
     const display = raw.length > maxW ? `${raw.slice(0, maxW - 1)}\u2026` : raw;
@@ -1996,20 +2178,31 @@ function CodeBlock({
     carry = r.carry;
     return r.tokens;
   });
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: 2, marginY: 0, borderStyle: "round", borderColor: theme.borderDefault, paddingX: 1, children: [
-    lang !== "plain" ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: lang }) : null,
-    rows.map((tokens, i) => (
-      // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional
-      /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: `${String(i + 1).padStart(gutterW, " ")} ` }),
-        tokens.length === 0 ? " " : tokens.map((t, j) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: token order is stable per line
-          /* @__PURE__ */ jsx(Text, { color: t.color, dimColor: t.dim, bold: t.bold, children: t.text }, j)
-        ))
-      ] }, i)
-    )),
-    hidden > 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, italic: true, children: `\u2026 +${hidden} more line${hidden === 1 ? "" : "s"}` }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      marginLeft: 2,
+      marginY: 0,
+      borderStyle: "round",
+      borderColor: theme.borderDefault,
+      paddingX: 1,
+      children: [
+        lang !== "plain" ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: lang }) : null,
+        rows.map((tokens, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional
+          /* @__PURE__ */ jsxs(Text, { children: [
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: `${String(i + 1).padStart(gutterW, " ")} ` }),
+            tokens.length === 0 ? " " : tokens.map((t, j) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: token order is stable per line
+              /* @__PURE__ */ jsx(Text, { color: t.color, dimColor: t.dim, bold: t.bold, children: t.text }, j)
+            ))
+          ] }, i)
+        )),
+        hidden > 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, italic: true, children: `\u2026 +${hidden} more line${hidden === 1 ? "" : "s"}` }) : null
+      ]
+    }
+  );
 }
 function AssistantBody({
   text,
@@ -2021,7 +2214,7 @@ function AssistantBody({
   return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: segments.map(
     (seg, i) => seg.type === "code" ? (
       // biome-ignore lint/suspicious/noArrayIndexKey: segment order is stable
-      /* @__PURE__ */ jsx(CodeBlock, { code: seg.text, lang: seg.lang ?? "plain", termWidth }, i)
+      /* @__PURE__ */ jsx(CodeBlock, { code: seg.text, lang: seg.lang ?? "plain", contentWidth: inner }, i)
     ) : (
       // biome-ignore lint/suspicious/noArrayIndexKey: segment order is stable
       /* @__PURE__ */ jsx(MarkdownView, { text: seg.text, termWidth: inner }, i)
@@ -2150,14 +2343,7 @@ var Entry = React4.memo(function Entry2({
           paddingLeft: 1,
           children: [
             /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsx(Text, { bold: true, color: theme.assistant, children: "ASSISTANT" }) }),
-            /* @__PURE__ */ jsx(
-              AssistantBody,
-              {
-                text: entry.text,
-                termWidth,
-                contentWidth
-              }
-            )
+            /* @__PURE__ */ jsx(AssistantBody, { text: entry.text, termWidth, contentWidth })
           ]
         }
       );
@@ -3272,8 +3458,10 @@ function fmtRecentTool(tool) {
   const name = tool.name.length > 18 ? `${tool.name.slice(0, 17)}...` : tool.name;
   const parts = [status, name];
   if (typeof tool.durationMs === "number") parts.push(fmtElapsed2(tool.durationMs));
-  if (typeof tool.outputBytes === "number" && tool.outputBytes > 0) parts.push(fmtBytes2(tool.outputBytes));
-  if (typeof tool.outputLines === "number" && tool.outputLines > 0) parts.push(`${tool.outputLines}L`);
+  if (typeof tool.outputBytes === "number" && tool.outputBytes > 0)
+    parts.push(fmtBytes2(tool.outputBytes));
+  if (typeof tool.outputLines === "number" && tool.outputLines > 0)
+    parts.push(`${tool.outputLines}L`);
   return parts.join(" ");
 }
 function fmtRecentMessage(message) {
@@ -3406,7 +3594,9 @@ function PhaseMonitor({
     if (key.escape) onClose();
   });
   const phaseList = Object.values(phases);
-  const running = phaseList.filter((p) => runningPhaseIds.includes(Object.keys(phases).find((k) => phases[k] === p) ?? ""));
+  const running = phaseList.filter(
+    (p) => runningPhaseIds.includes(Object.keys(phases).find((k) => phases[k] === p) ?? "")
+  );
   const done = phaseList.filter((p) => p.status === "completed" || p.status === "skipped");
   const failed = phaseList.filter((p) => p.status === "failed");
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
@@ -3617,7 +3807,7 @@ function ScrollableHistory({
       lastReported.current = height;
       onMeasure(height);
     }
-  });
+  }, [onMeasure]);
   const vp = Math.max(1, viewportRows);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
     /* @__PURE__ */ jsx(
@@ -3853,7 +4043,9 @@ function WorktreePanel({
 }) {
   const list = Object.values(worktrees);
   if (list.length === 0) return null;
-  const active = list.filter((w) => w.status === "active" || w.status === "committing" || w.status === "merging").length;
+  const active = list.filter(
+    (w) => w.status === "active" || w.status === "committing" || w.status === "merging"
+  ).length;
   const merged = list.filter((w) => w.status === "merged").length;
   const failed = list.filter((w) => w.status === "failed" || w.status === "needs-review").length;
   return /* @__PURE__ */ jsxs(
@@ -3897,7 +4089,8 @@ function WorktreePanel({
             /* @__PURE__ */ jsx(Text, { children: w.branch.replace(/^wstack\/ap\//, "").slice(0, 18).padEnd(18) }),
             /* @__PURE__ */ jsx(Text, { dimColor: true, children: w.ownerLabel.slice(0, 12) }),
             conflict ? /* @__PURE__ */ jsx(Text, { color: "magenta", children: " CONFLICT" }) : /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-              " +",
+              " ",
+              "+",
               w.insertions,
               "/-",
               w.deletions,
@@ -4061,13 +4254,18 @@ function createKillSlashCommand() {
       if (sub === "all") {
         const pids = getProcessRegistry().killAll();
         if (pids.length === 0) return { message: "No processes to kill." };
-        return { message: `Killed ${pids.length} process${pids.length === 1 ? "" : "es"}: ${pids.join(", ")}` };
+        return {
+          message: `Killed ${pids.length} process${pids.length === 1 ? "" : "es"}: ${pids.join(", ")}`
+        };
       }
       if (sub === "force") {
         getProcessRegistry().forceBreakerOpen();
         const pids = getProcessRegistry().killAll({ force: true });
-        if (pids.length === 0) return { message: "Circuit breaker forced open. No processes to kill." };
-        return { message: `Force-killed ${pids.length} process${pids.length === 1 ? "" : "es"}: ${pids.join(", ")}` };
+        if (pids.length === 0)
+          return { message: "Circuit breaker forced open. No processes to kill." };
+        return {
+          message: `Force-killed ${pids.length} process${pids.length === 1 ? "" : "es"}: ${pids.join(", ")}`
+        };
       }
       if (sub === "reset") {
         getProcessRegistry().forceBreakerReset();
@@ -5236,6 +5434,7 @@ function App({
   switchProviderAndModel,
   getSettings,
   saveSettings,
+  predictNext,
   switchAutonomy,
   effectiveMaxContext,
   onExit,
@@ -5261,8 +5460,12 @@ function App({
   const [hiddenItems, setHiddenItems] = useState(statuslineHiddenItems);
   const { stdout } = useStdout();
   const [termRows, setTermRows] = useState(stdout?.rows ?? 24);
+  const [termCols, setTermCols] = useState(stdout?.columns ?? 80);
   useEffect(() => {
-    const onResize = () => setTermRows(process.stdout.rows ?? 24);
+    const onResize = () => {
+      setTermRows(process.stdout.rows ?? 24);
+      setTermCols(process.stdout.columns ?? 80);
+    };
     process.stdout.on("resize", onResize);
     return () => {
       process.stdout.off("resize", onResize);
@@ -5412,7 +5615,7 @@ function App({
     if (vp !== s2.viewportRows) {
       dispatch({ type: "setViewportRows", rows: vp });
     }
-  });
+  }, [managedLive, termRows]);
   const handleKeyRef = useRef(null);
   const pendingClickConfirmRef = useRef(null);
   const openModelPickerRef = useRef(null);
@@ -5460,7 +5663,7 @@ function App({
           }
           return;
         }
-        const cols = process.stdout.columns ?? 0;
+        const cols = termCols || 80;
         const onScrollbar = cols > 0 && ev.x >= cols - 2 && ev.y >= 1 && ev.y <= rows;
         if (onScrollbar && s2.totalLines > rows) {
           scrollbarDragRef.current = true;
@@ -5548,7 +5751,7 @@ function App({
       if (!picker || picker.count === 0) {
         const inputDisabled = s2.status === "aborting" && !s2.steeringPending;
         if (!inputDisabled) {
-          const cols = process.stdout.columns ?? 80;
+          const cols = termCols || 80;
           const inputTop = s2.viewportRows + affordance + liveStripRowsRef.current + 1;
           const inputRows = layoutInputRows(INPUT_PROMPT, s2.buffer, s2.cursor, cols).length;
           const rowIdx = ev.y - inputTop;
@@ -5591,7 +5794,8 @@ function App({
       }
     },
     // dispatch is stable (useReducer); refs are mutable — no reactive deps.
-    []
+    // termCols is stable (useState + resize effect).
+    [termCols]
   );
   useEffect(() => {
     if (!subscribeMouse) return;
@@ -5760,6 +5964,12 @@ function App({
   }, [agent.ctx.meta]);
   const prevAnyOverlayOpen = useRef(false);
   const prevEntriesCount = useRef(0);
+  const eraseLiveRegion = useCallback(() => {
+    try {
+      process.stdout.write("\x1B[J");
+    } catch {
+    }
+  }, []);
   useEffect(() => {
     const anyOpenNow = state.picker.open || state.slashPicker.open || state.modelPicker.open || state.autonomyPicker.open || state.settingsPicker.open || state.confirmQueue.length > 0;
     const overlayClosed = prevAnyOverlayOpen.current && !anyOpenNow;
@@ -5767,10 +5977,7 @@ function App({
     prevAnyOverlayOpen.current = anyOpenNow;
     prevEntriesCount.current = state.entries.length;
     if (overlayClosed || newEntryCommitted) {
-      try {
-        process.stdout.write("\x1B[J");
-      } catch {
-      }
+      eraseLiveRegion();
     }
   }, [
     state.picker.open,
@@ -5779,8 +5986,16 @@ function App({
     state.autonomyPicker.open,
     state.settingsPicker.open,
     state.confirmQueue.length,
-    state.entries.length
+    state.entries.length,
+    eraseLiveRegion
   ]);
+  useEffect(() => {
+    const handleResize = () => eraseLiveRegion();
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, [eraseLiveRegion]);
   useEffect(() => {
     const detected = detectAtToken(state.buffer, state.cursor);
     if (!detected) {
@@ -7754,6 +7969,22 @@ function App({
           }
         });
       }
+      if (result.status === "done" && predictNext) {
+        try {
+          const userRequest = blocks.filter((b) => b.type === "text").map((b) => b.text).join(" ").trim();
+          const predictions = await predictNext({
+            userRequest,
+            assistantSummary: result.finalText ?? ""
+          });
+          if (predictions.length > 0) {
+            const text = ["\u21B3 likely next:", ...predictions.map((p, i) => `  ${i + 1}. ${p}`)].join(
+              "\n"
+            );
+            dispatch({ type: "addEntry", entry: { kind: "turn-summary", text } });
+          }
+        } catch {
+        }
+      }
     } catch (err) {
       dispatch({
         type: "addEntry",
@@ -8397,8 +8628,48 @@ async function runTui(opts) {
   let inkStdin = stdin;
   let detachMouse = null;
   if (useMouse) {
-    const proxy = new PassThrough();
-    const p = proxy;
+    class KeyboardReadable extends Readable {
+      pendingChunks = [];
+      // eslint-disable-next-line no-useless-constructor
+      constructor() {
+        super({ encoding: "utf8", highWaterMark: 64 * 1024 });
+      }
+      _read(_size) {
+        this.flushPending();
+      }
+      flushPending() {
+        while (this.pendingChunks.length > 0) {
+          const chunk = this.pendingChunks[0];
+          const ok = this.push(chunk);
+          this.pendingChunks.shift();
+          if (!ok) {
+            break;
+          }
+        }
+      }
+      /** Called by the stdin data handler when keyboard bytes are available. */
+      doPush(chunk) {
+        if (chunk.length === 0) return;
+        const ok = this.push(chunk);
+        if (ok) {
+          if (this.pendingChunks.length > 0) {
+            this.flushPending();
+          }
+        } else {
+          if (this.pendingChunks.length >= 100) {
+            this.pendingChunks.shift();
+          }
+          this.pendingChunks.push(chunk);
+        }
+      }
+      /** Called on shutdown so the stream closes cleanly. */
+      doEnd() {
+        this.pendingChunks = [];
+        this.push(null);
+      }
+    }
+    const keyboardStream = new KeyboardReadable();
+    const p = keyboardStream;
     p.isTTY = true;
     p.setRawMode = (mode) => {
       try {
@@ -8429,10 +8700,13 @@ async function runTui(opts) {
         }
       }
       const rest = stripSgrMouse(chunk);
-      if (rest.length > 0) proxy.write(rest);
+      keyboardStream.doPush(rest);
     };
     stdin.on("data", onData);
-    detachMouse = () => stdin.off("data", onData);
+    detachMouse = () => {
+      stdin.off("data", onData);
+      keyboardStream.doEnd();
+    };
     inkStdin = p;
   }
   const subscribeMouse = useMouse ? (fn) => {
@@ -8551,6 +8825,7 @@ async function runTui(opts) {
           projectRoot: opts.projectRoot,
           getSettings: opts.getSettings,
           saveSettings: opts.saveSettings,
+          predictNext: opts.predictNext,
           mouse: useMouse,
           subscribeMouse,
           // Managed viewport (in-app scroll + collapsibility) follows