@wrongstack/tui 0.10.2 → 0.10.3

package/dist/index.js

@@ -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: [
@@ -1029,8 +1056,19 @@ function highlight(path3, _query) {
   return path3;
 }
 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 +1088,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 +1107,7 @@ function FleetPanel({ entries, totalCost, collabSession }) {
       "+",
       overflow,
       ": ",
-      running[3]?.name?.slice(0, 12) ?? "agent",
+      running[3]?.name?.slice(0, nameMaxLen - 2) ?? "agent",
       "\u2026"
     ] }) : null
   ] });
@@ -1631,6 +1669,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 +1690,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 +1702,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 +1710,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 +1743,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 +1809,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 = [];
@@ -5760,6 +5899,12 @@ function App({
   }, [agent.ctx.meta]);
   const prevAnyOverlayOpen = useRef(false);
   const prevEntriesCount = useRef(0);
+  const eraseLiveRegion = () => {
+    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 +5912,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,
@@ -5781,6 +5923,13 @@ function App({
     state.confirmQueue.length,
     state.entries.length
   ]);
+  useEffect(() => {
+    const handleResize = () => eraseLiveRegion();
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, []);
   useEffect(() => {
     const detected = detectAtToken(state.buffer, state.cursor);
     if (!detected) {