@vincemakes/kiso-tui 0.1.24 → 0.1.26

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
@@ -136,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();
@@ -405,13 +405,12 @@ export class Body {
         const p = palette();
         switch (cell.kind) {
             case "user":
-                // v3 §02: the user message is a SGR block, no prefix — every
-                // line carries the block's highlight (multi-line whole;
-                // resize-safe). TUI v4 #16c: the fixed dark background
-                // (48;5;237) is GONE — reverse video (7m) swaps foreground/
-                // background, so the block follows the terminal theme (light
-                // theme → dark text on light). Pipes stay plain.
-                return cell.text.split("\n").map((l) => `${p.rev}${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());
@@ -429,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) {
@@ -442,21 +441,26 @@ 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)];

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.js

@@ -212,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,22 +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: `rev` — the user-message block highlight (SGR 7 reverse video,
- * TUI v4 #16c: the fixed dark background is GONE — reverse follows the
- * terminal theme).
+ * 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 rev: string;
+    readonly code: string;
     readonly reset: string;
 }
 export declare const COLOR_ON: Palette;
@@ -36,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", rev: "\x1b[7m", reset: "\x1b[0m" };
-export const COLOR_OFF = { blue: "", dim: "", red: "", green: "", rev: "", 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.24",
+  "version": "0.1.26",
   "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",