@oxecli/oxe 1.0.50 → 1.0.52

package/dist/ui.js

@@ -28,10 +28,6 @@ export function disableRawStdin() {
         catch {
             /* ignore */
         }
-        // Do NOT pause stdin here: askBottomPrompt re-acquires raw mode and
-        // resumes the stream itself. Pausing can race with that resume and drop
-        // keypress events on some terminals (prompt appearing "locked" after an
-        // interactive help/picker).
         showCursor();
     }
 }
@@ -40,7 +36,7 @@ export function waitRawKey() {
     return new Promise((resolve) => {
         const onKeypress = (str, key) => {
             process.stdin.removeListener("keypress", onKeypress);
-            resolve({ name: key?.name ?? "", str: str ?? "", ctrl: !!(key?.ctrl) });
+            resolve({ name: key?.name ?? "", str: str ?? "", ctrl: !!key?.ctrl });
         };
         process.stdin.on("keypress", onKeypress);
     });
@@ -52,22 +48,25 @@ export function isWindows() {
     return process.platform === "win32";
 }
 export function enableAnsi() {
-    // Node's tty on Windows Terminal / modern conhost supports ANSI automatically.
-    // No native SetConsoleMode available without a native module; rely on the host.
+    // Modern Windows Terminal and host consoles support ANSI automatically.
 }
 export function clearScreen() {
-    if (isWindows()) {
-        // crude but reliable clear
-        process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
-    }
-    else {
-        process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
-    }
+    process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
 }
 export function terminalWidth() {
     return process.stdout.columns || 80;
 }
 // ---------------------------------------------------------------------------
+// ANSI and plain text length helpers
+// ---------------------------------------------------------------------------
+export const ANSI_RE = /\x1b\[[0-9;]*[a-zA-Z]|\x1b\].*?\x07|\x1b[()][AB012]|\x1b\[\?[0-9]+[a-zA-Z]|\x1b\[>[0-9]+[a-zA-Z]/g;
+export function stripAnsi(s) {
+    return s.replace(ANSI_RE, "");
+}
+export function plainLen(s) {
+    return stripAnsi(s).length;
+}
+// ---------------------------------------------------------------------------
 // Markup tag -> ANSI
 // ---------------------------------------------------------------------------
 const TAG_MAP = {
@@ -82,9 +81,17 @@ const TAG_MAP = {
     magenta: "\x1b[35m",
     cyan: "\x1b[36m",
     white: "\x1b[37m",
+    bright_black: "\x1b[90m",
+    bright_red: "\x1b[91m",
+    bright_green: "\x1b[92m",
+    bright_yellow: "\x1b[93m",
+    bright_blue: "\x1b[94m",
+    bright_magenta: "\x1b[95m",
+    bright_cyan: "\x1b[96m",
+    bright_white: "\x1b[97m",
 };
 const RESET = "\x1b[0m";
-const MARKUP_RE = /\[(\/?)([a-z0-9 ]+)\]/gi;
+const MARKUP_RE = /\[(\/?)([a-z0-9_ ]+)\]/gi;
 export function escapeMarkup(text) {
     return text.replace(/\[/g, "\\[").replace(/\]/g, "\\]");
 }
@@ -115,90 +122,143 @@ export function markupToAnsi(text) {
     });
 }
 // ---------------------------------------------------------------------------
-// Lightweight markdown -> ANSI
+// Syntax Highlighter for Code Blocks
 // ---------------------------------------------------------------------------
-export function markdownToAnsi(text) {
-    const width = Math.max(terminalWidth() || 80, 1);
-    const lines = text.split("\n").flatMap((raw) => {
-        if (!raw || raw.length <= width)
-            return [raw];
-        const indent = raw.match(/^\s*/)?.[0] ?? "";
-        const words = raw.trim().split(/\s+/);
-        const wrapped = [];
-        let current = indent;
-        for (const word of words) {
-            if (word.length > width) {
-                if (current.trim())
-                    wrapped.push(current);
-                current = "";
-                for (let i = 0; i < word.length; i += width) {
-                    const part = word.slice(i, i + width);
-                    if (part.length === width)
-                        wrapped.push(part);
-                    else
-                        current = part;
-                }
-                continue;
-            }
-            const next = current.trim() ? `${current} ${word}` : `${current}${word}`;
-            if (current.trim() && next.length > width) {
-                wrapped.push(current);
-                current = `${indent}${word}`;
-            }
-            else {
-                current = next;
-            }
-        }
-        if (current || !wrapped.length)
-            wrapped.push(current);
-        return wrapped;
+const KEYWORDS = new Set([
+    "const", "let", "var", "function", "class", "import", "export", "from",
+    "return", "if", "else", "for", "while", "do", "switch", "case", "break",
+    "continue", "async", "await", "try", "catch", "finally", "throw", "new",
+    "typeof", "instanceof", "interface", "type", "enum", "extends", "implements",
+    "public", "private", "protected", "readonly", "static", "def", "self",
+    "lambda", "with", "as", "yield", "pass", "None", "True", "False", "null",
+    "undefined", "true", "false", "fn", "struct", "pub", "impl", "mut", "use",
+]);
+function highlightCodeLine(line, _lang = "") {
+    if (!line)
+        return "";
+    // Comments
+    if (/^\s*(\/\/|#|\/\*)/.test(line)) {
+        return `\x1b[2;37m${line}\x1b[0m`;
+    }
+    // Tokenize words, strings, numbers
+    return line.replace(/("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)|(\b\d+\.?\d*\b)|(\b[a-zA-Z_$][\w$]*\b)|(\/\/[^\n]*|#[^\n]*)/g, (m, str, num, ident, comment) => {
+        if (str)
+            return `\x1b[32m${str}\x1b[0m`;
+        if (num)
+            return `\x1b[33m${num}\x1b[0m`;
+        if (comment)
+            return `\x1b[2;37m${comment}\x1b[0m`;
+        if (ident && KEYWORDS.has(ident))
+            return `\x1b[1;36m${ident}\x1b[0m`;
+        return m;
     });
+}
+// ---------------------------------------------------------------------------
+// Rich Markdown -> ANSI Terminal Renderer
+// ---------------------------------------------------------------------------
+export function markdownToAnsi(text) {
+    const width = Math.max(terminalWidth() - 2, 40);
+    const rawLines = text.split("\n");
     const out = [];
     let inCode = false;
-    let codeBuf = [];
-    const flushCode = () => {
-        if (codeBuf.length) {
-            out.push(`\x1b[2m${codeBuf.join("\n")}\x1b[0m`);
-            codeBuf = [];
+    let codeLang = "";
+    let codeBuffer = [];
+    const flushCodeBlock = () => {
+        if (!codeBuffer.length && !codeLang)
+            return;
+        const badge = codeLang ? ` \x1b[1;36m${codeLang}\x1b[0m ` : " ";
+        const barLen = Math.max(10, Math.min(width - plainLen(badge) - 4, 60));
+        out.push(`\x1b[90m┌─${badge}${"─".repeat(barLen)}┐\x1b[0m`);
+        for (const cline of codeBuffer) {
+            const highlighted = highlightCodeLine(cline, codeLang);
+            out.push(`\x1b[90m│\x1b[0m  ${highlighted}`);
         }
+        out.push(`\x1b[90m└${"─".repeat(barLen + plainLen(badge) + 2)}┘\x1b[0m`);
+        codeBuffer = [];
+        codeLang = "";
     };
-    for (const raw of lines) {
-        const line = raw;
-        const fence = line.match(/^(`{3,})/);
-        if (fence) {
+    for (let i = 0; i < rawLines.length; i++) {
+        const raw = rawLines[i];
+        const fenceMatch = raw.match(/^(`{3,})(.*)$/);
+        if (fenceMatch) {
             if (!inCode) {
                 inCode = true;
+                codeLang = fenceMatch[2].trim().toLowerCase();
+                codeBuffer = [];
                 continue;
             }
             else {
                 inCode = false;
-                flushCode();
+                flushCodeBlock();
                 continue;
             }
         }
         if (inCode) {
-            codeBuf.push(line);
+            codeBuffer.push(raw);
             continue;
         }
-        let s = line;
-        // inline code
-        s = s.replace(/`([^`]+)`/g, (_, c) => `\x1b[2m${c}\x1b[0m`);
-        // bold
-        s = s.replace(/\*\*([^*]+)\*\*/g, "\x1b[1m$1\x1b[0m");
-        // italic
-        s = s.replace(/(^|[^\w*])\*([^*\n]+)\*(?=$|[^\w*])/g, "$1\x1b[3m$2\x1b[0m");
-        // headers
-        const h = s.match(/^(#{1,6})\s+(.*)$/);
-        if (h) {
-            s = `\x1b[1m${h[2]}\x1b[0m`;
+        let line = raw;
+        // Headers
+        const h1 = line.match(/^#\s+(.+)$/);
+        if (h1) {
+            out.push(`\x1b[1;36m# ${h1[1]}\x1b[0m`);
+            continue;
+        }
+        const h2 = line.match(/^##\s+(.+)$/);
+        if (h2) {
+            out.push(`\x1b[1;34m## ${h2[1]}\x1b[0m`);
+            continue;
         }
-        // links
-        s = s.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
-        // leading list markers
-        s = s.replace(/^(\s*)([-*+]\s)/, "$1· ");
-        out.push(s);
+        const h3 = line.match(/^###\s+(.+)$/);
+        if (h3) {
+            out.push(`\x1b[1;37m### ${h3[1]}\x1b[0m`);
+            continue;
+        }
+        // Blockquote
+        const bq = line.match(/^>\s*(.+)$/);
+        if (bq) {
+            out.push(`\x1b[90m│\x1b[0m \x1b[3m${bq[1]}\x1b[0m`);
+            continue;
+        }
+        // Unordered List item
+        line = line.replace(/^(\s*)[-*+]\s+(.+)$/, "$1\x1b[36m•\x1b[0m $2");
+        // Ordered List item
+        line = line.replace(/^(\s*)(\d+)\.\s+(.+)$/, "$1\x1b[36m$2.\x1b[0m $3");
+        // Inline formatting:
+        // Bold + Italic (***text*** or ___text___)
+        line = line.replace(/\*\*\*([^*]+)\*\*\*/g, "\x1b[1;3m$1\x1b[0m");
+        // Bold (**text** or __text__)
+        line = line.replace(/\*\*([^*]+)\*\*/g, "\x1b[1m$1\x1b[0m");
+        // Italic (*text* or _text_)
+        line = line.replace(/(^|[^\w*])\*([^*\n]+)\*(?=$|[^\w*])/g, "$1\x1b[3m$2\x1b[0m");
+        // Inline code (`code`)
+        line = line.replace(/`([^`]+)`/g, "\x1b[1;36m`$1`\x1b[0m");
+        // Links [text](url) -> text (url)
+        line = line.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "\x1b[4;36m$1\x1b[0m \x1b[2m($2)\x1b[0m");
+        // Word wrap paragraph line if too long
+        if (plainLen(line) > width && !line.startsWith(" ")) {
+            const words = line.split(" ");
+            let cur = "";
+            for (const w of words) {
+                if (plainLen(cur) + plainLen(w) + 1 > width) {
+                    if (cur)
+                        out.push(cur);
+                    cur = w;
+                }
+                else {
+                    cur = cur ? `${cur} ${w}` : w;
+                }
+            }
+            if (cur)
+                out.push(cur);
+        }
+        else {
+            out.push(line);
+        }
+    }
+    if (inCode) {
+        flushCodeBlock();
     }
-    flushCode();
     return out.join("\n");
 }
 export function aiMarkdown(text) {
@@ -212,39 +272,27 @@ export function mutedMarkdown(text) {
     return markdownToAnsi(dimmed);
 }
 // ---------------------------------------------------------------------------
-// Panel
+// Panel Rendering
 // ---------------------------------------------------------------------------
-/**
- * Render a rich-style rounded panel.
- *
- * Matches rich's Panel behavior:
- *  - `expand=false` shrinks the frame to fit the content (banner/auth).
- *  - title/subtitle are embedded in the top/bottom borders, centered by
- *    default (rich default) or left-aligned.
- */
-function panelString(content, title = "", subtitle = "", expand = true, borderStyle = "90", // 90 = bright black (grey50)
-titleAlign = "center") {
+function panelString(content, title = "", subtitle = "", expand = true, borderStyle = "90", titleAlign = "center") {
     const styled = markupToAnsi(content);
     const styledLines = styled.split("\n");
-    const plainLines = styled.replace(/\x1b\[[0-9;]*m/g, "").split("\n");
-    // Inner width = widest content line + 1 space padding each side.
-    let contentW = 0;
+    const plainLines = styledLines.map((l) => stripAnsi(l));
+    let maxLineW = 0;
     for (const p of plainLines)
-        contentW = Math.max(contentW, p.length);
-    contentW = Math.max(contentW, 1);
-    let innerW = contentW + 2;
+        maxLineW = Math.max(maxLineW, p.length);
     if (title)
-        innerW = Math.max(innerW, plainLen(title) + 2);
+        maxLineW = Math.max(maxLineW, plainLen(title) + 4);
     if (subtitle)
-        innerW = Math.max(innerW, plainLen(subtitle) + 2);
-    const w = terminalWidth();
-    innerW = expand ? Math.max(w - 4, 10) : Math.min(innerW, w - 4);
-    // Build a border run of `innerW` chars with `text` embedded.
+        maxLineW = Math.max(maxLineW, plainLen(subtitle) + 4);
+    const termW = terminalWidth();
+    const boxW = expand ? Math.max(termW - 4, 20) : Math.min(maxLineW + 4, termW - 4);
+    const innerW = boxW - 4;
     const embed = (text, align) => {
         if (!text)
-            return "─".repeat(innerW);
+            return "─".repeat(boxW - 2);
         const inner = ` ${text} `;
-        const fill = Math.max(innerW - plainLen(text) - 2, 0);
+        const fill = Math.max(boxW - 2 - plainLen(inner), 0);
         if (align === "left") {
             return `${inner}${"─".repeat(fill)}`;
         }
@@ -258,39 +306,32 @@ titleAlign = "center") {
     for (let i = 0; i < styledLines.length; i++) {
         const line = styledLines[i];
         const plain = plainLines[i] ?? "";
-        // Keep exactly one space padding each side; only pad the right to fill.
-        const pad = Math.max(innerW - plain.length - 2, 0);
+        const pad = Math.max(innerW - plain.length, 0);
         out.push(`\x1b[${borderStyle}m│\x1b[0m ${line}${" ".repeat(pad)} \x1b[${borderStyle}m│\x1b[0m`);
     }
     const bottom = `╰${embed(subtitle, "center")}╯`;
     out.push(`\x1b[${borderStyle}m${bottom}\x1b[0m`);
     return out.join("\n");
 }
-export function renderPanel(content, title = "", subtitle = "", expand = true, borderStyle = "90", // 90 = bright black (grey50)
-titleAlign = "center") {
+export function renderPanel(content, title = "", subtitle = "", expand = true, borderStyle = "90", titleAlign = "center") {
     process.stdout.write(panelString(content, title, subtitle, expand, borderStyle, titleAlign) + "\n");
 }
-function plainLen(s) {
-    return s.replace(/\x1b\[[0-9;]*m/g, "").length;
-}
-/**
- * Render a rich-style bordered table panel (mirrors rich's Table + Panel).
- *
- * `rows` is a list of {cells, style?} where `style` (ANSI prefix) is applied to
- * the whole row. Columns are left-aligned and padded; `colWidths` can fix a
- * column's width (used for the selection gutter).
- */
+// ---------------------------------------------------------------------------
+// Table Panel Rendering
+// ---------------------------------------------------------------------------
 export function renderTableString(rows, opts = {}) {
     const ncols = Math.max(0, ...rows.map((r) => r.cells.length));
-    if (ncols === 0)
+    if (ncols === 0) {
         return panelString("", opts.title ?? "", opts.subtitle ?? "", opts.expand, opts.borderStyle, opts.titleAlign);
+    }
     const colGap = opts.colGap ?? 2;
     const widths = [];
     for (let c = 0; c < ncols; c++) {
         let mw = 0;
-        for (const r of rows)
+        for (const r of rows) {
             if (r.cells[c])
                 mw = Math.max(mw, plainLen(r.cells[c]));
+        }
         widths.push(Math.max(mw, opts.colWidths?.[c] ?? 0));
     }
     const contentLines = [];
@@ -307,7 +348,7 @@ export function renderTableString(rows, opts = {}) {
     return panelString(contentLines.join("\n"), opts.title ?? "", opts.subtitle ?? "", opts.expand, opts.borderStyle, opts.titleAlign);
 }
 // ---------------------------------------------------------------------------
-// Durations
+// Durations & Text Formatting
 // ---------------------------------------------------------------------------
 export function formatDuration(seconds) {
     const total = Math.max(0, Math.round(seconds));
@@ -325,22 +366,14 @@ export function formatDuration(seconds) {
     return parts.join(" ");
 }
 export function tickDuration(seconds) {
-    // Durations are status values, not code. Keep the surrounding text muted
-    // while making values such as `0s` readable in normal white intensity.
-    // Restore dim afterward so the following labels keep their muted styling.
     return `\x1b[22;37m${formatDuration(seconds)}\x1b[2m`;
 }
-// ---------------------------------------------------------------------------
-// Text helpers
-// ---------------------------------------------------------------------------
-const FENCE_MARKER_RE = /`{3,}/g;
 export function printAiChunk(chunk) {
-    // Streaming commits are slices of the model's exact text. Do not trim or
-    // append newlines here, otherwise paragraph breaks from the AI disappear.
     if (!chunk)
         return;
     process.stdout.write(markdownToAnsi(chunk));
 }
+const FENCE_MARKER_RE = /`{3,}/g;
 export function safeCommitPoint(text) {
     let idx = text.lastIndexOf("\n\n");
     while (idx !== -1) {
@@ -353,14 +386,15 @@ export function safeCommitPoint(text) {
 }
 export function truncateEllipsis(text, maxChars, label = "text") {
     if (text.length > maxChars) {
-        return text.slice(0, maxChars) + ` …(${label} truncated: ${text.length.toLocaleString()} chars total)`;
+        return (text.slice(0, maxChars) +
+            ` …(${label} truncated: ${text.length.toLocaleString()} chars total)`);
     }
     return text;
 }
 export function displayRows(text) {
     if (!text)
         return 1;
-    const plain = text.replace(/\x1b\[[0-9;]*m/g, "").replace(/`/g, "");
+    const plain = stripAnsi(text);
     const width = Math.max(terminalWidth() || 80, 1);
     let rows = 0;
     const lines = plain.split("\n");
@@ -372,7 +406,7 @@ export function displayRows(text) {
     return rows;
 }
 // ---------------------------------------------------------------------------
-// Cursor + spinner helpers (mirror rich's console.status spinner="dots")
+// Cursor & Spinner
 // ---------------------------------------------------------------------------
 let cursorHidden = false;
 export function hideCursor() {
@@ -388,11 +422,6 @@ export function showCursor() {
     }
 }
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-/**
- * A transient status line with an animated dot spinner, updated in place
- * (no new lines appended on every tick). On stop() the line is erased.
- * Mirrors rich's console.status(..., spinner="dots").
- */
 export class Spinner {
     timer = null;
     frame = 0;
@@ -415,7 +444,7 @@ export class Spinner {
         this.timer = setInterval(() => {
             this.frame++;
             this.draw();
-        }, 120);
+        }, 80);
         this.draw();
     }
     update(text) {
@@ -424,24 +453,20 @@ export class Spinner {
             this.draw();
     }
     draw() {
-        const rendered = mutedMarkdown(`${SPINNER_FRAMES[this.frame % SPINNER_FRAMES.length]} ${this.text}`);
+        const icon = SPINNER_FRAMES[this.frame % SPINNER_FRAMES.length];
+        const rendered = `\x1b[36m${icon}\x1b[0m \x1b[2m${this.text}\x1b[0m`;
         const newRows = Math.max(1, displayRows(rendered));
         const clearRows = Math.max(this.rows, newRows, 1);
-        // Cursor is always at the home position (col 0) after each draw. Clear
-        // `clearRows` lines downward from home, rewrite the content, then return
-        // the cursor to home (col 0) so the next frame overwrites in place.
         for (let i = 0; i < clearRows; i++) {
             process.stdout.write("\r\x1b[2K");
             if (i < clearRows - 1)
                 process.stdout.write("\n");
         }
-        // Cursor is now `clearRows-1` lines below home; move back to home.
         if (clearRows > 1)
             process.stdout.write(`\x1b[${clearRows - 1}A\r`);
         else
             process.stdout.write("\r");
         process.stdout.write(rendered);
-        // Return cursor to home (col 0) for the next draw.
         if (newRows > 1)
             process.stdout.write(`\x1b[${newRows - 1}A\r`);
         else
@@ -454,7 +479,6 @@ export class Spinner {
             this.timer = null;
         }
         if (this.enabled && this.rows > 0) {
-            // Cursor is at home (col 0); clear the rendered rows downward.
             for (let i = 0; i < this.rows; i++) {
                 process.stdout.write("\r\x1b[2K");
                 if (i < this.rows - 1)
@@ -469,7 +493,7 @@ export class Spinner {
     }
 }
 // ---------------------------------------------------------------------------
-// Tool action formatter
+// Tool Action Formatter
 // ---------------------------------------------------------------------------
 export function formatToolAction(name, argumentsJson, status = "ok") {
     let args = {};
@@ -492,19 +516,19 @@ export function formatToolAction(name, argumentsJson, status = "ok") {
             const start = args["start_line"];
             const end = args["end_line"];
             const span = start != null || end != null
-                ? `, lines ${start ?? 1} to ${end ?? "end"}`
+                ? ` (lines ${start ?? 1} to ${end ?? "end"})`
                 : "";
             return phrase("Read", "Reading", "Failed to read", `${p}${span}`);
         }
         case "write_file":
-            return phrase("Wrote", "Writing", "Failed to write", `${p} (${String(args["content"] ?? "").length} chars)`);
+            return phrase("Wrote", "Writing", "Failed to write", `${p} (${String(args["content"] ?? "").length.toLocaleString()} chars)`);
         case "edit_file": {
             const suffix = args["replace_all"] ? " (replace all)" : "";
             return phrase("Edited", "Editing", "Failed to edit", `${p}${suffix}`);
         }
         case "bash": {
             const cwd = args["cwd"];
-            const location = cwd ? ` in ${cwd}` : "";
+            const location = cwd ? ` [in ${cwd}]` : "";
             const command = truncateEllipsis(String(args["command"] ?? ""), 400, "command");
             if (status === "started")
                 return `Running command${location}: ${command}`;
@@ -515,27 +539,27 @@ export function formatToolAction(name, argumentsJson, status = "ok") {
         case "glob": {
             const detail = String(args["pattern"] ?? "");
             if (status === "failed")
-                return `Search failed for ${detail}`;
-            return phrase("Searched for", "Searching for", "", detail);
+                return `Search failed for: ${detail}`;
+            return phrase("Searched files for", "Searching files for", "Search failed for", detail);
         }
         case "grep": {
             const detail = String(args["pattern"] ?? "");
             if (status === "failed")
-                return `Grep failed for ${detail}`;
-            return phrase("Grepped for", "Grepping for", "", detail);
+                return `Grep failed for: ${detail}`;
+            return phrase("Grepped for", "Grepping for", "Grep failed for", detail);
         }
         case "load_skill": {
             const skill = String(args["skill_name"] ?? "");
             return phrase("Loaded skill", "Loading skill", "Failed to load skill", skill);
         }
         default:
-            return phrase("Invoked internal routine", "Invoking internal routine", "Internal routine failed", name);
+            return phrase("Executed", "Executing", "Failed to execute", name);
     }
 }
 // ---------------------------------------------------------------------------
-// Prompt editing / interactive input
+// Prompt Editing & Interactive Input
 // ---------------------------------------------------------------------------
-export const PROMPT_PLACEHOLDER = "Describe a coding task, or type /help to see available commands";
+export const PROMPT_PLACEHOLDER = "Describe a coding task, or type /help for commands";
 const MAX_PROMPT_DISPLAY_LINES = 12;
 const MAX_PROMPT_PASTE_CHARS = 400;
 function shouldCollapsePaste(text) {
@@ -577,13 +601,7 @@ export function splitBlocks(buffer, pasteSpans) {
     }
     return segs;
 }
-const PROMPT_CARET = "\u0000"; // sentinel marking the caret position
-/**
- * Wrap styled runs into physical rows of `width` visible columns, wrapping long
- * lines so the panel box stays rectangular (mirrors rich's Panel auto-wrap).
- * Returns the styled rows (no borders) and the caret's (row, col) in content
- * coordinates, or (-1,-1) if no caret sentinel is present.
- */
+const PROMPT_CARET = "\u0000";
 function wrapRuns(runs, width) {
     const rows = [];
     let cur = "";
@@ -597,8 +615,6 @@ function wrapRuns(runs, width) {
     };
     for (const run of runs) {
         if (run.text === PROMPT_CARET) {
-            // Caret occupies one visible column; if the current row is full, move it
-            // to the start of the next row so it stays inside the box.
             if (curLen >= width)
                 flush();
             caretRow = rows.length;
@@ -609,7 +625,6 @@ function wrapRuns(runs, width) {
         }
         let text = run.text;
         while (text) {
-            // Split off the leading run up to the next newline (if any).
             const nl = text.indexOf("\n");
             const seg = nl === -1 ? text : text.slice(0, nl);
             let rest = seg;
@@ -617,9 +632,6 @@ function wrapRuns(runs, width) {
                 if (curLen >= width)
                     flush();
                 let take = Math.min(rest.length, width - curLen);
-                // Keep normal text readable by wrapping at a word boundary. A single
-                // oversized token still falls back to a hard wrap so the frame stays
-                // within its width.
                 if (take < rest.length && curLen > 0) {
                     const lastSpace = rest.slice(0, take).lastIndexOf(" ");
                     if (lastSpace > 0)
@@ -643,32 +655,27 @@ function wrapRuns(runs, width) {
     return { rows, caretRow, caretCol };
 }
 export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor) {
-    const w = terminalWidth();
-    const borderW = Math.max(w - 4, 10);
-    // Content width inside the box (between `│ ` and ` │`).
-    const innerW = borderW - 2;
-    // Build styled runs: prefix, then the text with the `▏` block caret always
-    // drawn at the cursor position (mirrors the original rich frame).
+    const termW = terminalWidth();
+    const boxW = Math.max(termW - 4, 16);
+    // Content inside border: `│ ` on left (2 chars) and ` │` on right (2 chars)
+    const innerW = boxW - 4;
     const runs = [];
-    runs.push({ text: prefix, style: "\x1b[1m" });
+    runs.push({ text: prefix, style: "\x1b[1;36m" });
     runs.push({ text: " ", style: "" });
     if (!buffer) {
-        runs.push({ text: PROMPT_CARET, style: "\x1b[1m" });
-        runs.push({ text: PROMPT_PLACEHOLDER, style: "\x1b[2m" });
+        runs.push({ text: PROMPT_CARET, style: "\x1b[1;36m" });
+        runs.push({ text: PROMPT_PLACEHOLDER, style: "\x1b[2;37m" });
     }
     else {
         const segs = splitBlocks(buffer, pasteSpans);
-        // Recompute each segment's buffer range [a, b) so we can locate the cursor.
         const ranges = [];
         {
-            let pos = 0;
             const pts = new Set([0, buffer.length]);
             for (const [s, e] of pasteSpans) {
                 pts.add(s);
                 pts.add(e);
             }
             const sorted = [...pts].sort((a, b) => a - b);
-            const isPaste = (a, b) => pasteSpans.some(([s, e]) => s <= a && b <= e);
             const used = new Set();
             for (const seg of segs) {
                 for (let i = 0; i < sorted.length - 1; i++) {
@@ -682,12 +689,13 @@ export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor
                 }
             }
         }
-        // Determine the target segment + inside offset (mirrors Python).
         let target = -1;
         let inside = 0;
         if (cursor >= buffer.length) {
             target = segs.length - 1;
-            inside = ranges.length ? ranges[ranges.length - 1][1] - ranges[ranges.length - 1][0] : 0;
+            inside = ranges.length
+                ? ranges[ranges.length - 1][1] - ranges[ranges.length - 1][0]
+                : 0;
         }
         else {
             for (let i = 0; i < ranges.length; i++) {
@@ -700,7 +708,9 @@ export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor
             }
             if (target === -1) {
                 target = segs.length - 1;
-                inside = ranges.length ? ranges[ranges.length - 1][1] - ranges[ranges.length - 1][0] : 0;
+                inside = ranges.length
+                    ? ranges[ranges.length - 1][1] - ranges[ranges.length - 1][0]
+                    : 0;
             }
         }
         for (let i = 0; i < segs.length; i++) {
@@ -709,41 +719,44 @@ export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor
                 runs.push({ text: " ", style: "" });
             if (i === target) {
                 if (kind === "collapsed") {
-                    runs.push({ text: disp, style: "\x1b[1m\x1b[36m" });
+                    runs.push({ text: disp, style: "\x1b[1;36m" });
                     if (!endsWithWs(disp))
                         runs.push({ text: " ", style: "" });
-                    runs.push({ text: PROMPT_CARET, style: "\x1b[1m" });
+                    runs.push({ text: PROMPT_CARET, style: "\x1b[1;36m" });
                 }
                 else {
                     const before = disp.slice(0, inside);
                     const after = disp.slice(inside);
                     if (before)
                         runs.push({ text: before, style: "" });
-                    runs.push({ text: PROMPT_CARET, style: "\x1b[1m" });
+                    runs.push({ text: PROMPT_CARET, style: "\x1b[1;36m" });
                     if (after)
                         runs.push({ text: after, style: "" });
                 }
             }
             else {
-                runs.push({ text: disp, style: kind === "collapsed" ? "\x1b[1m\x1b[36m" : "" });
+                runs.push({
+                    text: disp,
+                    style: kind === "collapsed" ? "\x1b[1;36m" : "",
+                });
             }
         }
     }
     const { rows, caretRow, caretCol } = wrapRuns(runs, innerW);
-    // Top border with the label embedded on the left.
-    const topPad = Math.max(borderW - label.length - 3, 0);
-    const top = `\x1b[90m╭─ ${label} ${"─".repeat(topPad)}╮\x1b[0m`;
-    // Body rows.
+    // Math for exact box alignment:
+    // Top: `╭─ ` (3 chars) + `label` (L chars) + ` ` (1 char) + topPad + `╮` (1 char) = boxW
+    const labelLen = plainLen(label);
+    const topPad = Math.max(0, boxW - labelLen - 5);
+    const top = `\x1b[90m╭─ \x1b[1m\x1b[36m${label}\x1b[0m\x1b[90m ${"─".repeat(topPad)}╮\x1b[0m`;
     const body = [];
     for (const l of rows) {
-        const plain = l.replace(/\x1b\[[0-9;]*m/g, "");
-        const pad = Math.max(borderW - 2 - plain.length, 0);
+        const plain = stripAnsi(l);
+        const pad = Math.max(0, innerW - plain.length);
         body.push(`\x1b[90m│\x1b[0m ${l}${" ".repeat(pad)} \x1b[90m│\x1b[0m`);
     }
-    const bottom = `\x1b[90m╰${"─".repeat(borderW)}╯\x1b[0m`;
+    // Bottom: `╰` (1 char) + `─` * (boxW - 2) + `╯` (1 char) = boxW
+    const bottom = `\x1b[90m╰${"─".repeat(Math.max(0, boxW - 2))}╯\x1b[0m`;
     const frame = [top, ...body, bottom].join("\n");
-    // Cursor placement: one row below the top border. The body prefix (`│ `)
-    // shifts the content right by 2 columns, so add 2 to the wrapped caret col.
     const cursorRow = (caretRow === -1 ? 0 : caretRow) + 1;
     const cursorCol = (caretCol === -1 ? 0 : caretCol) + 2;
     const totalRows = body.length + 2;
@@ -753,14 +766,14 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
     return new Promise((resolve, reject) => {
         const isTTY = process.stdin.isTTY;
         if (!isTTY) {
-            // Non-interactive: read a line from stdin
             const chunks = [];
             process.stdin.setEncoding("utf-8");
             process.stdin.on("data", (d) => chunks.push(Buffer.from(String(d))));
             process.stdin.on("end", () => {
-                const text = Buffer.concat(chunks).toString().replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-                // Piped input commonly ends with the transport newline from the
-                // shell. Preserve every newline the user supplied before it.
+                const text = Buffer.concat(chunks)
+                    .toString()
+                    .replace(/\r\n/g, "\n")
+                    .replace(/\r/g, "\n");
                 resolve([text.endsWith("\n") ? text.slice(0, -1) : text, []]);
             });
             return;
@@ -778,12 +791,7 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         readline.emitKeypressEvents(process.stdin);
         if (process.stdin.isTTY) {
             process.stdin.setRawMode(true);
-            // Ask the terminal to wrap clipboard input in explicit paste markers.
-            // This makes embedded newlines unambiguous instead of relying on timing.
             process.stdout.write("\x1b[?2004h");
-            // Enable the kitty keyboard protocol (CSI u) so Windows Terminal / modern
-            // terminals send distinct sequences for Shift+Enter / Ctrl+Enter
-            // (\x1b[13;<mod>u) instead of an indistinguishable plain \r.
             process.stdout.write("\x1b[>1u");
         }
         process.stdin.resume();
@@ -792,11 +800,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         let lastCursorRow = 0;
         let lastTotalRows = 0;
         let prevFrameLines = null;
-        // Erase the prompt region: a leading blank line + the box. Cursor sits at
-        // lastCursorRow inside the box; move up to the box's top border, erase the
-        // box rows, then erase the leading blank line, leaving the cursor on that
-        // blank row. The caller's single leading newline then yields exactly ONE
-        // blank row before the echoed user prompt / message.
         const clearBox = () => {
             process.stdout.write(`\x1b[${lastCursorRow}A`);
             for (let i = 0; i < lastTotalRows; i++) {
@@ -828,11 +831,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
             const { frame, cursorRow, cursorCol, totalRows } = renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor);
             const newLines = frame.split("\n");
             if (isFirst) {
-                // The caller's content always ends with "\n", so the cursor sits at the
-                // start of a fresh (blank) line — that line is the leading blank
-                // separator (mirrors the original's Group(Text(""), panel)). Move down
-                // one line so the box starts below that blank; do NOT emit a second
-                // blank here (it caused a double gap above the box / on cancel).
                 process.stdout.write("\n");
                 for (let i = 0; i < newLines.length; i++) {
                     process.stdout.write(newLines[i]);
@@ -842,16 +840,10 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 prevFrameLines = newLines;
                 lastCursorRow = cursorRow;
                 lastTotalRows = totalRows;
-                // Cursor sits on the bottom border line; move it up to the input row.
                 const up = totalRows - 1 - cursorRow;
                 process.stdout.write(`\x1b[${up}A\r\x1b[${cursorCol}C`);
-                return;
             }
             else {
-                // Cursor currently sits at the previous input position (lastCursorRow
-                // inside the box). Move up to the top border, then rewrite ONLY the
-                // lines whose content actually changed, leaving the static borders
-                // untouched — this avoids the whole-box flicker on every keystroke.
                 process.stdout.write(`\x1b[${lastCursorRow}A\r`);
                 const oldLines = prevFrameLines ?? [];
                 const maxLen = Math.max(oldLines.length, newLines.length);
@@ -862,8 +854,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                     if (i < maxLen - 1)
                         process.stdout.write("\n");
                 }
-                // Cursor now sits at line (maxLen-1), column 0. Move it to the target
-                // input row (cursorRow), handling line-count changes in either direction.
                 const atLine = maxLen - 1;
                 if (atLine > cursorRow)
                     process.stdout.write(`\x1b[${atLine - cursorRow}A`);
@@ -873,7 +863,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 prevFrameLines = newLines;
                 lastCursorRow = cursorRow;
                 lastTotalRows = totalRows;
-                return;
             }
         };
         const shiftSpansAfterInsert = (pos, delta) => {
@@ -897,12 +886,7 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
             }
             const pasteStart = cursor;
             buffer = buffer.slice(0, cursor) + text + buffer.slice(cursor);
-            // Keep existing paste spans valid across the insertion point.
             pasteSpans = shiftSpansAfterInsert(cursor, text.length);
-            // A real paste records a span so the prompt box can collapse it (mirrors
-            // Python's handle_paste). splitBlocks only collapses segments inside a
-            // span that meet the threshold, so small pastes stay expanded but remain
-            // tagged for cursor/backspace handling.
             if (isPaste) {
                 pasteSpans.push([pasteStart, pasteStart + text.length]);
                 pasteSpans.sort((a, b) => a[0] - b[0]);
@@ -916,9 +900,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 draft = { buffer, cursor, spans: pasteSpans.slice() };
                 histIdx = hist.length;
             }
-            // A collapsed paste is one editable unit. Backspace removes the entire
-            // pasted block, matching the Python prompt rather than deleting only its
-            // final character.
             const containing = pasteSpans.find(([s, e]) => s < cursor && cursor <= e);
             if (containing) {
                 const [start, end] = containing;
@@ -930,14 +911,11 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 cursor = start;
                 return;
             }
-            // remove one grapheme before cursor
             const before = Array.from(buffer.slice(0, cursor));
             before.pop();
             buffer = before.join("") + buffer.slice(cursor);
             const deletedAt = cursor - 1;
             cursor -= 1;
-            // Adjust spans: shrink any span covering the deleted char, shift spans
-            // that start after it left by one.
             const adjusted = [];
             for (const [s, e] of pasteSpans) {
                 if (deletedAt >= s && deletedAt < e) {
@@ -957,8 +935,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         const moveLeft = () => {
             if (cursor <= 0)
                 return;
-            // Jump the caret to the start of a paste span it sits just past (mirrors
-            // Python), so a collapsed block is treated as one unit.
             for (const [s, e] of pasteSpans) {
                 if (s < cursor && cursor <= e) {
                     cursor = s;
@@ -980,7 +956,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         };
         const moveUp = () => {
             if (!buffer.includes("\n")) {
-                // Single row: navigate command history.
                 if (!hist.length)
                     return;
                 if (histIdx === hist.length) {
@@ -994,7 +969,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 }
                 return;
             }
-            // Multi row: move the caret up to the previous line, preserving column.
             if (cursor > 0) {
                 let lineStart = buffer.lastIndexOf("\n", cursor - 1);
                 lineStart = lineStart !== -1 ? lineStart : 0;
@@ -1006,7 +980,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         };
         const moveDown = () => {
             if (!buffer.includes("\n")) {
-                // Single row: navigate command history.
                 if (histIdx === hist.length || !draft)
                     return;
                 histIdx += 1;
@@ -1022,7 +995,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 }
                 return;
             }
-            // Multi row: move the caret down to the next line, preserving column.
             if (cursor < buffer.length) {
                 const [, col] = cursorLineCol(buffer, cursor);
                 let nextStart = buffer.indexOf("\n", cursor);
@@ -1040,23 +1012,17 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         const isNewlineKey = (key) => {
             if (!key)
                 return false;
-            // Bare \n / Ctrl+J = newline.
             if (key.ctrl && key.name === "j")
                 return true;
             if (key.name === "enter")
                 return !!(key.shift || key.ctrl || key.meta);
-            // Enter with a modifier (Shift/Ctrl/Alt/Meta) = newline.
             if (key.name === "return")
                 return !!(key.shift || key.ctrl || key.meta);
-            // Kitty-keyboard-protocol / CSI-u modified Enter: \x1b[13;<m>u where
-            // <m> is a modifier bitmask (2=Shift, 3=Alt, 5=Ctrl, 6=Shift+Ctrl, ...).
-            // Also the legacy \x1b[13;<m>~ form. ANY modifier > 1 on Enter = newline.
             const seq = key.sequence || "";
             if (/^\x1b\[13;([2-9]|\d{2,})u$/.test(seq))
                 return true;
             if (/^\x1b\[13;([2-9]|\d{2,})~$/.test(seq))
                 return true;
-            // Legacy Shift+Enter decoded by Node as F3 with shift.
             if (key.name === "f3" && key.shift)
                 return true;
             return false;
@@ -1064,23 +1030,20 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         const isModifiedEnterInput = (str, key) => {
             const value = str || "";
             const sequence = key?.sequence || "";
-            // Some Windows terminals do not preserve modifier flags when readline
-            // decodes Ctrl+J or Ctrl/Shift+Enter. Inspect the original bytes too.
             if (value === "\n" || value === "\x0a")
                 return true;
             if (key?.name === "linefeed" || (key?.ctrl && key?.name === "j"))
                 return true;
-            return /^\x1b\[13;(?:[2-9]|\d{2,})(?:u|~)$/.test(value) ||
-                /^\x1b\[13;(?:[2-9]|\d{2,})(?:u|~)$/.test(sequence);
+            return (/^\x1b\[13;(?:[2-9]|\d{2,})(?:u|~)$/.test(value) ||
+                /^\x1b\[13;(?:[2-9]|\d{2,})(?:u|~)$/.test(sequence));
         };
-        // True for a plain (unmodified) Enter: Node's "return" without modifiers,
-        // or the kitty-protocol encodings \x1b[13u / \x1b[13;1u (modifier flags = 1
-        // meaning none).
         const isSubmitEnterKey = (key) => {
             if (!key)
                 return false;
-            if ((key.name === "return" || key.name === "enter") && !(key.shift || key.ctrl || key.meta))
+            if ((key.name === "return" || key.name === "enter") &&
+                !(key.shift || key.ctrl || key.meta)) {
                 return true;
+            }
             const seq = key.sequence || "";
             if (seq === "\x1b[13u" || /^\x1b\[13;1u$/.test(seq))
                 return true;
@@ -1094,12 +1057,19 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
             if (!bracketedPaste && (sequence === start || value === start)) {
                 bracketedPaste = true;
                 bracketedPasteBuffer = "";
-                const inline = value === start ? "" : value.startsWith(start) ? value.slice(start.length) : "";
+                const inline = value === start
+                    ? ""
+                    : value.startsWith(start)
+                        ? value.slice(start.length)
+                        : "";
                 if (inline)
                     bracketedPasteBuffer = inline;
                 if (inline.includes(end)) {
                     const endAt = inline.indexOf(end);
-                    const pasted = inline.slice(0, endAt).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+                    const pasted = inline
+                        .slice(0, endAt)
+                        .replace(/\r\n/g, "\n")
+                        .replace(/\r/g, "\n");
                     bracketedPaste = false;
                     bracketedPasteBuffer = "";
                     if (pasted)
@@ -1111,7 +1081,9 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
             if (!bracketedPaste)
                 return false;
             if (sequence === end || value === end) {
-                const pasted = bracketedPasteBuffer.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+                const pasted = bracketedPasteBuffer
+                    .replace(/\r\n/g, "\n")
+                    .replace(/\r/g, "\n");
                 bracketedPaste = false;
                 bracketedPasteBuffer = "";
                 if (pasted)
@@ -1119,12 +1091,15 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 repaint();
                 return true;
             }
-            const chunk = value || (sequence && !sequence.startsWith("\x1b[") ? sequence : "");
+            const chunk = value ||
+                (sequence && !sequence.startsWith("\x1b[") ? sequence : "");
             if (chunk) {
                 const endAt = chunk.indexOf(end);
                 if (endAt >= 0) {
                     bracketedPasteBuffer += chunk.slice(0, endAt);
-                    const pasted = bracketedPasteBuffer.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+                    const pasted = bracketedPasteBuffer
+                        .replace(/\r\n/g, "\n")
+                        .replace(/\r/g, "\n");
                     bracketedPaste = false;
                     bracketedPasteBuffer = "";
                     if (pasted)
@@ -1149,9 +1124,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
         const onKeypress = (str, key) => {
             if (consumeBracketedPaste(str, key))
                 return;
-            // A normal typed character after an unbracketed paste ends the fallback
-            // window, so the next Enter can submit immediately. Multi-character
-            // clipboard chunks keep the window alive until their rows arrive.
             if (pasteBurst && str && str.length === 1 && !key?.ctrl && !key?.meta) {
                 pasteBurst = false;
                 if (pasteBurstTimer)
@@ -1166,18 +1138,13 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 settle(new Error("eof"), true);
                 return;
             }
-            // Any modified Enter (Shift/Ctrl+Enter) inserts a newline. This check
-            // must happen before plain submit detection because some terminals expose
-            // Shift+Enter as `return` while keeping the modifier only in the escape
-            // sequence.
-            if (isNewlineKey(key) || isModifiedEnterInput(str, key) || (pasteBurst && isSubmitEnterKey(key))) {
+            if (isNewlineKey(key) ||
+                isModifiedEnterInput(str, key) ||
+                (pasteBurst && isSubmitEnterKey(key))) {
                 insert("\n");
                 repaint();
                 return;
             }
-            // Plain Enter submits; any modified Enter (Shift/Ctrl+Enter) inserts a
-            // newline, mirroring the Python original's _read_input_event (which maps
-            // \x1b[13;2u / \x1b[13;5u / Shift+\r to "\n").
             if (isSubmitEnterKey(key)) {
                 if (buffer.trim()) {
                     settle([buffer, pasteSpans], false);
@@ -1210,7 +1177,7 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 return;
             }
             if (key && key.name === "tab") {
-                insert("    ");
+                insert("  ");
                 repaint();
                 return;
             }
@@ -1220,8 +1187,6 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
                 return;
             }
             if (str) {
-                // Multi-char sequence = a paste (single-char typed keys arrive one per
-                // event). Tag it so the prompt box collapses it when it meets the rules.
                 const isPaste = str.length > 1;
                 insert(str.replace(/\r\n/g, "\n").replace(/\r/g, "\n"), isPaste);
                 if (isPaste)
@@ -1234,14 +1199,9 @@ export function askBottomPrompt(label = "You", prefix = "❯", history = []) {
     });
 }
 // ---------------------------------------------------------------------------
-// User display + message text
+// User Display & Message Text Helpers
 // ---------------------------------------------------------------------------
 export function userDisplayText(payload, pasteSpans) {
-    // Mirror the prompt field exactly: collapse ONLY segments that fall inside a
-    // paste span and exceed the collapse threshold (via splitBlocks). Content that
-    // the user typed (no paste span) is never collapsed in the prompt, so it must
-    // not be collapsed here either — keeping the echoed message consistent with
-    // what the prompt box displayed.
     if (pasteSpans && pasteSpans.length) {
         const segs = splitBlocks(payload, pasteSpans);
         let out = "";
@@ -1249,7 +1209,7 @@ export function userDisplayText(payload, pasteSpans) {
             const [, kind, disp] = segs[i];
             if (i && !endsWithWs(segs[i - 1][2]))
                 out += " ";
-            out += kind === "collapsed" ? `\x1b[1m\x1b[36m${disp}\x1b[0m` : disp;
+            out += kind === "collapsed" ? `\x1b[1;36m${disp}\x1b[0m` : disp;
         }
         return out;
     }