@oxecli/oxe 1.0.115 → 1.0.117

package/dist/ui.js

@@ -140,11 +140,85 @@ export const ANSI_RE = /\x1b\[[0-9;]*[a-zA-Z]|\x1b\].*?\x07|\x1b[()][AB012]|\x1b
 export function stripAnsi(s) {
     return s.replace(ANSI_RE, "");
 }
+// ---------------------------------------------------------------------------
+// Display width (wcwidth-style) helpers
+//
+// plainLen() historically counted JS characters, but wide characters (CJK,
+// fullwidth forms, emoji) occupy two terminal columns while counting as one
+// string character. That made table columns, panel borders, wrapping and
+// truncation overflow by the number of wide glyphs. These helpers measure
+// real terminal display width so every frame stays aligned.
+// ---------------------------------------------------------------------------
+/** Wide (double-width) code-point ranges. */
+const WIDE_RANGES = [
+    [0x1100, 0x115f], // Hangul Jamo
+    [0x2e80, 0xa4cf], // CJK radicals, Kangxi, CJK symbols, Hiragana/Katakana, Yi
+    [0xac00, 0xd7a3], // Hangul syllables
+    [0xf900, 0xfaff], // CJK compatibility
+    [0xfe30, 0xfe4f], // CJK compatibility forms
+    [0xff00, 0xff60], // fullwidth forms
+    [0xffe0, 0xffe6], // fullwidth signs
+    [0x1f300, 0x1f64f], // emoji / misc pictographs
+    [0x1f680, 0x1f6ff], // transport & map symbols
+    [0x1f900, 0x1f9ff], // supplemental symbols & pictographs
+    [0x1fa70, 0x1faff], // symbols & pictographs extended-A
+    [0x20000, 0x3fffd], // CJK extension B+ (astral)
+];
+const WIDE_POINTS = new Set([
+    0x231a, 0x231b, 0x23e9, 0x23ea, 0x23eb, 0x23ec, 0x23f0, 0x23f3, 0x25fd,
+    0x25fe, 0x2614, 0x2615, 0x2648, 0x2649, 0x264a, 0x264b, 0x264c, 0x264d,
+    0x264e, 0x264f, 0x2650, 0x2651, 0x2652, 0x2653, 0x267f, 0x2693, 0x26a1,
+    0x26aa, 0x26ab, 0x26bd, 0x26be, 0x26c4, 0x26c5, 0x26ce, 0x26d4, 0x26ea,
+    0x26f2, 0x26f3, 0x26f5, 0x26fa, 0x26fd, 0x2705, 0x270a, 0x270b, 0x2728,
+    0x274c, 0x274e, 0x2753, 0x2754, 0x2755, 0x2757, 0x2795, 0x2796, 0x2797,
+    0x27b0, 0x27bf, 0x2b1b, 0x2b1c, 0x2b50, 0x2b55, 0x2329, 0x232a, 0x303f,
+]);
+/** Terminal columns occupied by a single character (0 combining, 1 normal,
+ *  2 wide). */
+export function charWidth(ch) {
+    const c = ch.codePointAt(0);
+    if (c == null)
+        return 0;
+    // Combining marks occupy no columns of their own.
+    if ((c >= 0x0300 && c <= 0x036f) ||
+        (c >= 0x1ab0 && c <= 0x1aff) ||
+        (c >= 0x1dc0 && c <= 0x1dff) ||
+        (c >= 0x20d0 && c <= 0x20ff) ||
+        (c >= 0xfe20 && c <= 0xfe2f))
+        return 0;
+    for (const [lo, hi] of WIDE_RANGES)
+        if (c >= lo && c <= hi)
+            return 2;
+    if (WIDE_POINTS.has(c))
+        return 2;
+    return 1;
+}
+/** Terminal display width of a plain (ANSI-stripped) string. */
+export function dispLen(s) {
+    let w = 0;
+    for (const ch of s)
+        w += charWidth(ch);
+    return w;
+}
 export function plainLen(s) {
-    return stripAnsi(s).length;
+    return dispLen(stripAnsi(s));
+}
+/** Take as many characters as fit within maxW terminal columns, never cutting a
+ *  wide glyph in half. */
+function takeVisible(s, maxW) {
+    let w = 0;
+    let out = "";
+    for (const ch of s) {
+        const cw = charWidth(ch);
+        if (w + cw > maxW)
+            break;
+        out += ch;
+        w += cw;
+    }
+    return out;
 }
-// Truncate styled text to a max number of visible characters while keeping
-// ANSI escape sequences intact (never cut mid-sequence).
+// Truncate styled text to a max number of visible terminal columns while
+// keeping ANSI escape sequences intact (never cut mid-sequence).
 export function truncateStyled(text, maxVisible) {
     if (maxVisible <= 0)
         return "";
@@ -159,11 +233,9 @@ export function truncateStyled(text, maxVisible) {
     while ((m = re.exec(text)) !== null) {
         if (m.index > last) {
             const seg = text.slice(last, m.index);
-            const room = maxVisible - visible;
-            if (room <= 0)
-                return out;
-            out += seg.slice(0, room);
-            visible += Math.min(seg.length, room);
+            const taken = takeVisible(seg, maxVisible - visible);
+            out += taken;
+            visible += dispLen(taken);
             if (visible >= maxVisible)
                 return out;
         }
@@ -171,7 +243,7 @@ export function truncateStyled(text, maxVisible) {
         last = m.index + m[0].length;
     }
     if (visible < maxVisible) {
-        out += text.slice(last, last + (maxVisible - visible));
+        out += takeVisible(text.slice(last), maxVisible - visible);
     }
     return out;
 }
@@ -234,11 +306,11 @@ function wrapStyledToWidth(line, width) {
         const isSpace = /\s/.test(a.ch);
         if (isSpace) {
             cur.push(a);
-            curLen++;
+            curLen += charWidth(a.ch);
             breakAt = cur.length - 1;
             continue;
         }
-        if (curLen + 1 > width) {
+        if (curLen + charWidth(a.ch) > width) {
             if (breakAt >= 0) {
                 // Break after the whitespace at breakAt: keep the whitespace's ANSI
                 // prefix (often a reset) so style never leaks onto the continuation.
@@ -260,7 +332,7 @@ function wrapStyledToWidth(line, width) {
             }
         }
         cur.push(a);
-        curLen++;
+        curLen += charWidth(a.ch);
     }
     if (cur.length)
         rows.push(cur);
@@ -441,10 +513,20 @@ export function markdownToAnsi(text) {
         const badge = codeLang ? ` \x1b[1;36m${codeLang}\x1b[0m ` : "";
         const barLen = Math.max(10, Math.min(width - plainLen(badge) - (codeLang ? 4 : 2), 60));
         const topPrefix = codeLang ? "─" : "";
+        // Full width of the framed box = the top border's column span, used to
+        // truncate body lines so they never run off the right edge past the border.
+        const borderW = 1 + (codeLang ? 1 : 0) + plainLen(badge) + barLen + 1;
+        // Body prefix is "│  " (3 columns). Content (incl. a trailing ellipsis)
+        // must fit in borderW - 3 so a truncated line ends flush with the border.
+        const contentMax = Math.max(borderW - 3, 1);
         out.push(`\x1b[90m╭${topPrefix}${badge}${"─".repeat(barLen)}╮\x1b[0m`);
         for (const cline of codeBuffer) {
             const highlighted = highlightCodeLine(cline, codeLang);
-            out.push(`\x1b[90m│\x1b[0m  ${highlighted}`);
+            // Truncate so a long code line never overflows the box's right edge
+            // (borders are only drawn at top/bottom, so a longer line would stick
+            // out past the closing ╯).
+            const body = plainLen(highlighted) > contentMax ? truncateStyled(highlighted, Math.max(contentMax - 1, 1)) + "…" : highlighted;
+            out.push(`\x1b[90m│\x1b[0m  ${body}`);
         }
         out.push(`\x1b[90m╰${"─".repeat(barLen + plainLen(badge) + (codeLang ? 1 : 0))}╯\x1b[0m`);
         codeBuffer = [];
@@ -498,26 +580,29 @@ export function markdownToAnsi(text) {
             continue;
         }
         let line = raw;
-        // Headers (render as styled headings with the '#' markers stripped)
+        // Headers (render as styled headings with the '#' markers stripped). Wrapped
+        // so a long heading never runs off the right edge.
         const h1 = line.match(/^#\s+(.+)$/);
         if (h1) {
-            out.push(`\x1b[1;36m${formatInlineMarkdown(h1[1])}\x1b[0m`);
+            out.push(...wrapStyledToWidth(`\x1b[1;36m${formatInlineMarkdown(h1[1])}\x1b[0m`, width));
             continue;
         }
         const h2 = line.match(/^##\s+(.+)$/);
         if (h2) {
-            out.push(`\x1b[1;36m${formatInlineMarkdown(h2[1])}\x1b[0m`);
+            out.push(...wrapStyledToWidth(`\x1b[1;36m${formatInlineMarkdown(h2[1])}\x1b[0m`, width));
             continue;
         }
         const h3 = line.match(/^###\s+(.+)$/);
         if (h3) {
-            out.push(`\x1b[1;37m${formatInlineMarkdown(h3[1])}\x1b[0m`);
+            out.push(...wrapStyledToWidth(`\x1b[1;37m${formatInlineMarkdown(h3[1])}\x1b[0m`, width));
             continue;
         }
-        // Blockquote
+        // Blockquote. Wrapped inside the "│ " gutter so a long quote never runs off
+        // the right edge.
         const bq = line.match(/^>\s*(.+)$/);
         if (bq) {
-            out.push(`\x1b[90m│\x1b[0m \x1b[3m${formatInlineMarkdown(bq[1])}\x1b[0m`);
+            const wrapped = wrapStyledToWidth(`\x1b[3m${formatInlineMarkdown(bq[1])}\x1b[0m`, Math.max(width - 2, 1));
+            out.push(...wrapped.map((l) => `\x1b[90m│\x1b[0m ${l}`));
             continue;
         }
         // Unordered List item
@@ -565,7 +650,7 @@ function panelString(content, title = "", subtitle = "", expand = true, borderSt
     const plainLines = styledLines.map((l) => stripAnsi(l));
     let maxLineW = 0;
     for (const p of plainLines)
-        maxLineW = Math.max(maxLineW, p.length);
+        maxLineW = Math.max(maxLineW, plainLen(p));
     if (title)
         maxLineW = Math.max(maxLineW, plainLen(title) + 4);
     if (subtitle)
@@ -599,8 +684,8 @@ function panelString(content, title = "", subtitle = "", expand = true, borderSt
     for (let i = 0; i < styledLines.length; i++) {
         const line = styledLines[i];
         const plain = plainLines[i] ?? "";
-        const pad = Math.max(innerW - plain.length, 0);
-        const display = plain.length > innerW ? truncateStyled(line, innerW) : line;
+        const pad = Math.max(innerW - plainLen(plain), 0);
+        const display = plainLen(plain) > innerW ? truncateStyled(line, innerW) : line;
         out.push(`\x1b[${borderStyle}m│\x1b[0m ${display}${" ".repeat(pad)} \x1b[${borderStyle}m│\x1b[0m`);
     }
     const bottom = `╰${embed(subtitle, "center")}╯`;
@@ -715,7 +800,7 @@ export function displayRows(text) {
     if (!lines.length)
         return 1;
     for (const line of lines) {
-        rows += Math.max(1, Math.ceil(line.length / width));
+        rows += Math.max(1, Math.ceil(dispLen(line) / width));
     }
     return rows;
 }
@@ -1084,12 +1169,12 @@ export class Spinner {
         const first = parts[0];
         const rest = parts.slice(1);
         const plain = stripAnsi(first);
-        const pad = Math.max(0, this.lastLen - plain.length);
+        const pad = Math.max(0, this.lastLen - plainLen(plain));
         process.stdout.write("\r" + first + " ".repeat(pad) + "\r\n");
         if (rest.length)
             process.stdout.write(rest.join("\n") + "\n");
         this.rows = 0;
-        this.lastLen = plain.length;
+        this.lastLen = plainLen(plain);
     }
     update(text) {
         if (this.timer) {
@@ -1113,9 +1198,9 @@ export class Spinner {
             // cells (spinner frame, trailing timer) actually change on screen. Pad
             // with spaces so a shorter line clears any previously longer text.
             const plain = stripAnsi(rendered);
-            const pad = Math.max(0, this.lastLen - plain.length);
+            const pad = Math.max(0, this.lastLen - plainLen(plain));
             process.stdout.write("\r" + rendered + " ".repeat(pad) + "\r");
-            this.lastLen = plain.length;
+            this.lastLen = plainLen(plain);
         }
         else {
             // Multi-row wrapped text: fall back to an erase-based redraw.
@@ -1235,7 +1320,7 @@ export function formatToolResult(rawResult, failed) {
     const allLines = clean.split("\n");
     const lines = allLines
         .slice(0, TOOL_RESULT_MAX_LINES)
-        .map((ln) => (ln.length > lineMax ? ln.slice(0, lineMax) + "…" : ln));
+        .map((ln) => (plainLen(ln) > lineMax ? truncateStyled(ln, lineMax) + "…" : ln));
     if (allLines.length > TOOL_RESULT_MAX_LINES)
         lines.push("…");
     const styleOpen = failed ? "\x1b[31m" : "\x1b[90m";
@@ -1379,7 +1464,7 @@ function wrapRuns(runs, width) {
             caretCol = lineLen;
         }
         line.push(u);
-        lineLen += 1;
+        lineLen += charWidth(u.ch);
     };
     let i = 0;
     while (i < units.length) {
@@ -1398,7 +1483,8 @@ function wrapRuns(runs, width) {
             continue;
         }
         if (isWs(u)) {
-            if (lineLen + 1 > width)
+            const w = charWidth(u.ch);
+            if (lineLen + w > width)
                 flushLine();
             // Never start a line with whitespace: if the space lands at the start of
             // a fresh line, drop it (it was the fill of the previous full line).
@@ -1413,28 +1499,38 @@ function wrapRuns(runs, width) {
         // Start of a word (which may contain the caret). Find its full extent in
         // the flattened stream so we never wrap mid-word.
         let j = i;
-        let wordLen = 0; // each unit (including a caret) occupies one column
+        let wordW = 0; // display width of the whole word
         while (j < units.length && !isWs(units[j])) {
-            wordLen += 1;
+            wordW += charWidth(units[j].ch);
             j++;
         }
-        if (wordLen === 0) {
+        if (wordW === 0) {
             i++;
             continue;
         }
         if (lineLen === 0) {
-            if (wordLen > width) {
+            if (wordW > width) {
                 // Overlong word: split into width-sized chunks, keeping the caret in
                 // the chunk that contains it.
                 let from = i;
-                let remaining = wordLen;
-                while (remaining > 0) {
-                    const n = Math.min(width, remaining);
+                let used = 0;
+                while (used < wordW) {
+                    let n = 0;
+                    let chunkW = 0;
+                    while (from + n < j && chunkW + charWidth(units[from + n].ch) <= width) {
+                        chunkW += charWidth(units[from + n].ch);
+                        n++;
+                    }
+                    if (n === 0) {
+                        // A single glyph is wider than the line; emit it alone.
+                        n = 1;
+                        chunkW = charWidth(units[from].ch);
+                    }
                     for (let k = 0; k < n; k++)
                         addUnit(units[from + k]);
                     flushLine();
                     from += n;
-                    remaining -= n;
+                    used += chunkW;
                 }
             }
             else {
@@ -1444,7 +1540,7 @@ function wrapRuns(runs, width) {
             i = j;
         }
         else {
-            if (lineLen + wordLen > width) {
+            if (lineLen + wordW > width) {
                 // Word doesn't fit on the current line; move the whole word to a new
                 // line (leaving any trailing space from the previous word behind).
                 flushLine();
@@ -1565,7 +1661,7 @@ export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor
     const body = [];
     for (const l of rows) {
         const plain = stripAnsi(l);
-        const pad = Math.max(0, innerW - plain.length);
+        const pad = Math.max(0, innerW - plainLen(plain));
         body.push(`\x1b[90m│\x1b[0m ${l}${" ".repeat(pad)} \x1b[90m│\x1b[0m`);
     }
     const bottom = `\x1b[90m╰${"─".repeat(Math.max(0, boxW - 2))}╯\x1b[0m`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxecli/oxe",
-  "version": "1.0.115",
+  "version": "1.0.117",
   "publishConfig": {
     "access": "public"
   },