@vincemakes/kiso-tui 0.1.23 → 0.1.25

package/dist/body.d.ts

@@ -84,6 +84,15 @@ export declare class Body {
     constructor(opts: BodyOptions);
     /** Teardown — flush a pending frame, stop the timers. */
     close(): void;
+    /**
+     * TUI v4 #16a: a resize reflows the terminal's scrollback — the frozen
+     * rows' positions are no longer what we tracked (and the frozen CONTENT
+     * is never re-emitted: the terminal reflowed it, we only redraw the
+     * dock + active tail). The counters reset so the next render writes new
+     * frozen lines through the REAL-LF scroll path above the tail, never at
+     * a stale CUP row (the drag-garbage the #16 user saw).
+     */
+    onResize(): void;
     /** The last COMPLETE thinking block, for /think. */
     lastThinking(): string | null;
     /** The last completed tool call, for /last. */

package/dist/body.js

@@ -25,7 +25,7 @@
  */
 import { truncateDiff } from "./diff.js";
 import { displayWidth } from "./editor.js";
-import { escapeTerminal, foldResult, foldThinking, palette, renderTerminalGap, renderToolSummary, } from "./render.js";
+import { colorInlineCode, escapeTerminal, foldResult, foldThinking, palette, renderTerminalGap, renderToolSummary, } from "./render.js";
 /** The spinner glyphs, cycled by the heartbeat (v3 §05 — the working family). */
 const SPINNER = ["▖", "▘", "▝", "▗"];
 const TOOL_SUMMARY_MAX = 60; // the tool line's parameter summary, chars
@@ -48,11 +48,21 @@ export class Body {
     #pipeBuf = ""; // the passthrough's thinking buffer — the cell model needs no buffer
     #toolCells = new Map(); // callId → cell index (parallel tools)
     #write;
+    #resizeHandler = null;
     constructor(opts) {
         this.#opts = opts;
         this.#write = opts.write ?? ((s) => process.stdout.write(s));
         this.#active = opts.active();
         if (this.#isActive()) {
+            // TUI v4 #16a: the resize event — the terminal reflows its
+            // scrollback, so OUR row bookkeeping is stale. The frozen
+            // content is never re-emitted (the terminal reflowed it); the
+            // counters reset so the next render lands new frozen lines via
+            // the REAL-LF scroll path (just above the tail), never at stale
+            // CUP rows — the overwrite garbage after a drag (the #16
+            // defect). The dock redraws its own chrome on the same event.
+            this.#resizeHandler = () => this.onResize();
+            process.stdout.on("resize", this.#resizeHandler);
             this.#heartbeat = setInterval(() => {
                 // #14/#15: the idle heartbeat PAINTS NOTHING unless an
                 // ANIMATION advances — only a RUNNING tool's glyph/elapsed
@@ -86,9 +96,32 @@ export class Body {
             clearInterval(this.#heartbeat);
             this.#heartbeat = null;
         }
+        if (this.#resizeHandler !== null) {
+            process.stdout.off("resize", this.#resizeHandler);
+            this.#resizeHandler = null;
+        }
         if (this.#dirty)
             this.render();
     }
+    /**
+     * TUI v4 #16a: a resize reflows the terminal's scrollback — the frozen
+     * rows' positions are no longer what we tracked (and the frozen CONTENT
+     * is never re-emitted: the terminal reflowed it, we only redraw the
+     * dock + active tail). The counters reset so the next render writes new
+     * frozen lines through the REAL-LF scroll path above the tail, never at
+     * a stale CUP row (the drag-garbage the #16 user saw).
+     */
+    onResize() {
+        if (!this.#isActive())
+            return;
+        this.#frozenRows = Number.MAX_SAFE_INTEGER; // the frozen area is "full" — the next line scrolls
+        this.#oldTailTop = 0; // the reflowed tail's old rows are gone — clear only the new area
+        // NO #dirty: an immediate frame would re-render the ACTIVE TAIL —
+        // re-emitting its bytes (the terminal already reflowed the tail's
+        // content; a re-print duplicates the text in the byte stream — the
+        // #16 storm gate's "response text exactly once"). The geometry
+        // reset takes effect at the next NATURAL render (the next event).
+    }
     /** The last COMPLETE thinking block, for /think. */
     lastThinking() {
         return this.#lastThinking;
@@ -103,7 +136,7 @@ export class Body {
             this.#closeOpenThinking();
             this.#closeOpenText();
             const p = palette();
-            this.#write(`${p.blue}you> ${escapeTerminal(text)}${p.reset}\n`);
+            this.#write(`${p.bold}you> ${escapeTerminal(text)}${p.reset}\n`);
             return;
         }
         this.#closeOpenThinking();
@@ -372,10 +405,12 @@ export class Body {
         const p = palette();
         switch (cell.kind) {
             case "user":
-                // v3 §02: the user message is a SGR BACKGROUND block, no
-                // prefix — every line carries the block's background
-                // (multi-line whole; resize-safe). Pipes stay plain.
-                return cell.text.split("\n").map((l) => `${p.bg}${escapeTerminal(l)}${p.reset}`);
+                // v3 §02, TUI v5 #16f (v4.1 design): the user message is a left
+                // rail — a bright-white BOLD ▍ per line, then the text (the
+                // reverse-video block is RETIRED: it washed out on light
+                // themes). Multi-line whole: every line carries the rail
+                // (多行连贯); resize-safe; NO_COLOR → the rail renders plain.
+                return cell.text.split("\n").map((l) => `${p.bold}▍${p.reset} ${escapeTerminal(l)}`);
             case "thinking": {
                 const block = cell.text;
                 const trimmed = escapeTerminal(block.trim());
@@ -393,11 +428,11 @@ export class Body {
                         return [`${p.red}✗ ${name} (${err}, ${elapsed}s)${p.reset}`];
                     }
                     const delta = cell.added + cell.removed > 0 ? `, +${cell.added} -${cell.removed}` : "";
-                    return [`${p.blue}✓ ${name}${p.reset} (${summary}${delta}, ${elapsed}s)`];
+                    return [`${p.bold}✓ ${name}${p.reset} (${summary}${delta}, ${elapsed}s)`];
                 }
                 if (cell.state === "approval") {
-                    const lines = [`→ ${name} ${summary} ${p.blue}⏸${p.reset}`];
-                    // v2e: the mini-diff — ▎ blue edge (the brick motif), - red /
+                    const lines = [`→ ${name} ${summary} ${p.bold}⏸${p.reset}`];
+                    // v2e: the mini-diff — ▎ bold edge (the brick motif), - red /
                     // + green / context dim; NO_COLOR keeps the ± prefixes plain.
                     if (cell.diff !== null) {
                         for (const d of cell.diff) {
@@ -406,26 +441,39 @@ export class Body {
                                 : d.kind === "+"
                                     ? `${p.green}+ ${escapeTerminal(d.text)}${p.reset}`
                                     : `${p.dim}  ${escapeTerminal(d.text)}${p.reset}`;
-                            lines.push(`${p.blue}▎${p.reset}${body}`);
+                            lines.push(`${p.bold}▎${p.reset}${body}`);
                         }
                     }
                     return lines;
                 }
                 if (cell.state === "running") {
                     const elapsed = cell.startedAt !== null ? Math.max(1, Math.round((Date.now() - cell.startedAt) / 1000)) : 1;
-                    return [`→ ${name} ${summary} ${p.blue}${SPINNER[this.#spinnerI % SPINNER.length]}${p.reset} ${elapsed}s`];
+                    return [`→ ${name} ${summary} ${p.bold}${SPINNER[this.#spinnerI % SPINNER.length]}${p.reset} ${elapsed}s`];
                 }
                 return [`→ ${name} ${summary}`];
             }
             case "text": {
                 const text = escapeTerminal(cell.text);
                 const wrapped = this.#wrap(text, W);
-                return wrapped.length > 0 ? wrapped : [""];
+                // TUI v5 #16e: the inline-code tint — backtick spans in
+                // assistant body text, matched PER LINE after the wrap (a
+                // span opened on one line and closed on another does NOT
+                // match — 跨行不匹配). NO_COLOR → the codes are empty →
+                // byte-identical.
+                return wrapped.length > 0 ? wrapped.map((l) => colorInlineCode(l)) : [""];
             }
             case "notice":
                 return [escapeTerminal(cell.text)];
             case "raw":
-                return cell.lines.map((l) => escapeTerminal(l));
+                // TUI v4 #16b: the raw cell carries the CLI's OWN pre-rendered
+                // lines (the banner, the recap, slash-command output) — the
+                // SGR is applied at COMPOSITION time (renderRecap/startupBanner),
+                // and model/tool content was already escapeTerminal'd there.
+                // Re-escaping at render STRIPPED the ESC from the SGR — the
+                // literal "[38;5;75m▞[0m" garbage the user saw (the #16 乱码,
+                // also the banner's dim). Verbatim: the injection guard lives
+                // at composition, not here.
+                return cell.lines;
             case "terminal":
                 // the honest label (done / aborted / error) + the status + the
                 // rhythm gap blank

package/dist/dock.d.ts

@@ -69,7 +69,8 @@ export declare class Dock {
     /** The bottom four rows, wrapped in CSI 2026 (synchronized output —
      *  the pi trick against flicker). The cursor ends at the input line's
      *  edit position. v3 §03: the upper ╌ row, the input row, the lower
-     *  ╌ row, the status row — the status is dim (blue accents inside
-     *  come from the CLI's composition). */
+     *  ╌ row, the status row — the status is dim (bold accents inside
+     *  come from the CLI's composition). TUI v5 #16g: the idle status
+     *  row carries the right-aligned "/ commands · ↑ history" hint. */
     redraw(): void;
 }

package/dist/dock.js

@@ -52,7 +52,7 @@ export class Dock {
      *  mode — the bottom three rows need room to exist. */
     enter() {
         const rows = process.stdout.rows ?? 0;
-        if (process.stdout.isTTY !== true || palette().blue === "" || rows < 4)
+        if (process.stdout.isTTY !== true || palette().bold === "" || rows < 4)
             return;
         this.#active = true;
         this.#height = rows;
@@ -134,8 +134,9 @@ export class Dock {
     /** The bottom four rows, wrapped in CSI 2026 (synchronized output —
      *  the pi trick against flicker). The cursor ends at the input line's
      *  edit position. v3 §03: the upper ╌ row, the input row, the lower
-     *  ╌ row, the status row — the status is dim (blue accents inside
-     *  come from the CLI's composition). */
+     *  ╌ row, the status row — the status is dim (bold accents inside
+     *  come from the CLI's composition). TUI v5 #16g: the idle status
+     *  row carries the right-aligned "/ commands · ↑ history" hint. */
     redraw() {
         if (!this.#active)
             return;
@@ -144,7 +145,7 @@ export class Dock {
         const W = this.#width;
         const sep = `${p.dim}${"╌".repeat(W)}${p.reset}`;
         const status = `${this.#status}${this.#tail === "" ? "" : ` · ${this.#tail}`}`;
-        const statusLine = this.#question ?? `${p.dim}${status}${p.reset}`;
+        const statusLine = this.#question ?? this.#statusRow(status, p, W);
         const inp = this.#inputState();
         const out = [];
         // P3 (审查): the DEC private-mode SET/RESET needs the "?" prefix —
@@ -160,7 +161,7 @@ export class Dock {
                 const item = menu.items[i];
                 const row = H - 4 - (menu.items.length - 1 - i);
                 const text = i === menu.selected
-                    ? `${p.blue}▸ ${item.name}${p.reset} ${item.desc}`
+                    ? `${p.bold}▸ ${item.name}${p.reset} ${item.desc}`
                     : `${p.dim}  ${item.name} ${item.desc}${p.reset}`;
                 out.push(`\x1b[${row};1H\x1b[0K${text}`);
             }
@@ -173,4 +174,20 @@ export class Dock {
         out.push("\x1b[?2026l"); // synchronized output OFF
         process.stdout.write(out.join(""));
     }
+    /** TUI v5 #16g: the status row — the base status left-aligned, the
+     *  "/ commands · ↑ history" hint right-aligned in the idle state
+     *  (tail empty, no takeover question). The hint is CUT FIRST when
+     *  the width is short — the status itself is never truncated for it;
+     *  the running state carries its own esc hint in the status text, so
+     *  the non-empty tail suppresses this one. */
+    #statusRow(status, p, W) {
+        const hint = this.#tail === "" && this.#question === null ? " / commands · ↑ history" : "";
+        if (hint === "")
+            return `${p.dim}${status}${p.reset}`;
+        const statusW = displayWidth(status.replace(/\x1b\[[0-9;]*m/g, ""));
+        const hintW = displayWidth(hint);
+        if (statusW + hintW > W)
+            return `${p.dim}${status}${p.reset}`;
+        return `${p.dim}${status}${" ".repeat(W - statusW - hintW)}${hint}${p.reset}`;
+    }
 }

package/dist/editor.d.ts

@@ -22,7 +22,7 @@ export declare function charWidth(cp: number): number;
 export declare function widthOf(chars: readonly number[]): number;
 /** Display width of a string. */
 export declare function displayWidth(text: string): number;
-export declare const PROMPT = "\u258Cyou> ";
+export declare const PROMPT = "\u258C ";
 export declare const PROMPT_WIDTH: number;
 /** v3 §04 — the slash-command menu's command table (English one-liners). */
 export interface MenuItem {

package/dist/editor.js

@@ -67,7 +67,10 @@ export function displayWidth(text) {
     return w;
 }
 import { palette } from "./render.js";
-export const PROMPT = "▌you> "; // the kiso brick motif: one blue half-block, then you>
+// TUI v4 #16d: the input row is the blue brick + the edit area — the
+// "you>" text is gone (the brick IS the prompt; the pipe path's readline
+// prompt keeps its own "you> " — v2a line mode, byte-for-byte).
+export const PROMPT = "▌ ";
 export const PROMPT_WIDTH = displayWidth(PROMPT);
 export const MENU_ITEMS = [
     { name: "/mode", desc: "switch the approval tier (manual/default/accept-edits/plan/bypass)" },
@@ -209,7 +212,7 @@ export class Editor {
         const st = this.dockState();
         const W = (process.stdout.columns ?? 0) || 80; // a degenerate 0 size (no TIOCSWINSZ) falls back
         const cursorCol = Math.min(1 + PROMPT_WIDTH + st.cursor, W);
-        process.stdout.write(`\r\x1b[0K${p.blue}${PROMPT}${p.reset}${st.line}\x1b[${cursorCol}G`);
+        process.stdout.write(`\r\x1b[0K${p.bold}${PROMPT}${p.reset}${st.line}\x1b[${cursorCol}G`);
     }
     // ---- input ----
     /** Feed raw stdin bytes — the parser. Public for unit tests. */

package/dist/render.d.ts

@@ -8,20 +8,23 @@
  * package has ZERO kiso-core imports: input is data, output is bytes.
  */
 /**
- * v2a — the palette, centralized (no hard-coded codes elsewhere): ONE
- * accent — blue, ANSI 256 color 75 — for the identity accents (the you>
- * prompt, the banner tagline, ✓ marks, slash-command names); red for
- * errors; dim for metadata. NO_COLOR set, or a non-TTY output → every
- * code is empty, so pipes and CI carry ZERO ANSI (the existing byte-level
- * e2e assertions guard it). Everything not listed here is plain.
- * v3: `bg` — the user-message block background (SGR 48, dark gray 237).
+ * v2a — the palette, centralized (no hard-coded codes elsewhere); v5
+ * (TUI v5 #16e, the v4.1 design): the decorative blue (38;5;75) is
+ * RETIRED — the identity accents (the you> prompt, the banner tagline,
+ * ✓ marks, slash-command names, the ▍ user rail, the input brick) are
+ * bright-white BOLD (SGR 1); `code` is the content semantic tint for
+ * inline code spans in assistant text (256-color 110 — the cube color
+ * nearest the design's #8fb4d8); red for errors, dim for metadata,
+ * green for the diff additions. NO_COLOR set, or a non-TTY output →
+ * every code is empty, so pipes and CI carry ZERO ANSI (the existing
+ * byte-level e2e assertions guard it). Everything not listed is plain.
  */
 export interface Palette {
-    readonly blue: string;
+    readonly bold: string;
     readonly dim: string;
     readonly red: string;
     readonly green: string;
-    readonly bg: string;
+    readonly code: string;
     readonly reset: string;
 }
 export declare const COLOR_ON: Palette;
@@ -34,6 +37,15 @@ export declare function palette(): Palette;
  * EVERY externally-sourced string must pass through this before any output.
  */
 export declare function escapeTerminal(text: string): string;
+/**
+ * TUI v5 #16e: the inline-code tint — backtick spans in ONE line of
+ * assistant body text get the `code` color. Deliberately NOT a markdown
+ * engine: single level only (`[^`]*` cannot nest), a span never matches
+ * across lines (the caller passes one line; an opener without a closer
+ * on the same line stays plain). NO_COLOR / pipes → the codes are empty
+ * strings → the line passes through byte-identical.
+ */
+export declare function colorInlineCode(line: string): string;
 /** The canonical-path resolver for the approval detail — injected by the
  *  caller (the CLI passes the tools' own resolution). The tui package is
  *  pure terminal: input is data, output is bytes, zero runtime deps. */

package/dist/render.js

@@ -7,8 +7,8 @@
  * kiso-core's Event — the CLI translates Event → RenderInput. The tui
  * package has ZERO kiso-core imports: input is data, output is bytes.
  */
-export const COLOR_ON = { blue: "\x1b[38;5;75m", dim: "\x1b[2m", red: "\x1b[31m", green: "\x1b[32m", bg: "\x1b[48;5;237m", reset: "\x1b[0m" };
-export const COLOR_OFF = { blue: "", dim: "", red: "", green: "", bg: "", reset: "" };
+export const COLOR_ON = { bold: "\x1b[1m", dim: "\x1b[2m", red: "\x1b[31m", green: "\x1b[32m", code: "\x1b[38;5;110m", reset: "\x1b[0m" };
+export const COLOR_OFF = { bold: "", dim: "", red: "", green: "", code: "", reset: "" };
 export function palette() {
     return process.env.NO_COLOR === undefined && process.stdout.isTTY ? COLOR_ON : COLOR_OFF;
 }
@@ -26,6 +26,20 @@ export function escapeTerminal(text) {
         .replace(/[\u0080-\u009f]/g, "") // C1
         .replace(/[\u202a-\u202e\u2066-\u2069]/g, ""); // bidi
 }
+/**
+ * TUI v5 #16e: the inline-code tint — backtick spans in ONE line of
+ * assistant body text get the `code` color. Deliberately NOT a markdown
+ * engine: single level only (`[^`]*` cannot nest), a span never matches
+ * across lines (the caller passes one line; an opener without a closer
+ * on the same line stays plain). NO_COLOR / pipes → the codes are empty
+ * strings → the line passes through byte-identical.
+ */
+export function colorInlineCode(line) {
+    const p = palette();
+    if (p.code === "" || p.reset === "")
+        return line;
+    return line.replace(/`([^`]*)`/g, `${p.code}\`$1\`${p.reset}`);
+}
 /**
  * Render one event. `text` may be a continuation (text_delta appends to the
  * current line); `newline` says whether the line is complete.
@@ -58,9 +72,9 @@ export function renderEvent(ev, prevThinking = false, resolvePath = (p) => p) {
     const p = palette();
     switch (ev.type) {
         case "user_input":
-            // v2a: blue (the identity accent — the interactive prompt echoes
-            // itself; this render is the REPLAY path).
-            return { text: `${p.blue}you> ${escapeTerminal(typeof ev.content === "string" ? ev.content : "(content)")}${p.reset}\n`, newline: true, prompt: false };
+            // v2a/v5: bold (the identity accent — the interactive prompt
+            // echoes itself; this render is the REPLAY path).
+            return { text: `${p.bold}you> ${escapeTerminal(typeof ev.content === "string" ? ev.content : "(content)")}${p.reset}\n`, newline: true, prompt: false };
         case "text_delta":
             return { text: escapeTerminal(ev.text), newline: false, prompt: false };
         case "text_end":
@@ -164,9 +178,9 @@ function approvalDetail(name, input, resolvePath) {
  * code; failures (isError) are ✗. Pure and deterministic.
  */
 export function renderToolSummary(name, input, result) {
-    // v2a: ✓ is a blue identity accent; ✗ stays red.
+    // v2a/v5: ✓ is a bold identity accent; ✗ stays red.
     const p = palette();
-    const mark = result.isError ? `${p.red}✗${p.reset}` : `${p.blue}✓${p.reset}`;
+    const mark = result.isError ? `${p.red}✗${p.reset}` : `${p.bold}✓${p.reset}`;
     const shortName = name.replace("_file", "");
     const detail = toolSummaryDetail(name, input, result);
     return `${mark} ${escapeTerminal(`${shortName} ${detail}`)}`;
@@ -315,7 +329,7 @@ export function renderRecap(s) {
     }
     if (s.ctxLeftPct !== null)
         parts.push(`ctx left ~${Math.round(s.ctxLeftPct)}%`);
-    return `${p.blue}▞${p.reset} ${parts.join(" · ")}\n`;
+    return `${p.bold}▞${p.reset} ${parts.join(" · ")}\n`;
 }
 /** One-line summary of a session, for `kiso sessions`. */
 export function renderSessionLine(meta) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vincemakes/kiso-tui",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "kiso tui \u2014 the pure terminal layer (cell renderer, dock, raw editor, diff, palette). Zero runtime dependencies: input is data, output is bytes.",
   "type": "module",
   "license": "MIT",