bunmicro 0.9.23 → 0.9.25

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.9.25] - 2026-06-10
+- Fixed colorscheme: aligned with go
+- Added colorcolumn taberror showchars
+  * e.g. showchars = tab=>,space=.
+- linter underline
+- set hltrailingws on : whitespace
+- Added tests/pty-demo.js
+  * Demo of the whole bunmicro App
+  * bun tests/pty-demo.js
+
 ## [0.9.23] - 2026-06-10
 - Fixed mouse close prompt cursor move
 - Fixed set filetype doesn't apply instantly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bunmicro",
-  "version": "0.9.23",
+  "version": "0.9.25",
   "description": "Bun JavaScript rewrite of the micro editor originally in Golang",
   "type": "module",
   "main": "./src/index.js",
@@ -10,7 +10,8 @@
   },
   "scripts": {
     "start": "bun ./src/index.js",
-    "check": "node --check ./src/index.js"
+    "check": "node --check ./src/index.js",
+    "demo:pty": "bun ./tests/pty-demo.js"
   },
   "dependencies": {
     "wasmoon": "^1.16.0"

package/src/config/colorscheme.js

@@ -7,17 +7,6 @@ export const DEFAULT_STYLE = {
   underline: false,
 };
 
-// Built-in fallback styles for color groups not defined in a colorscheme.
-// Matches Go micro's default group colours.
-const BUILTIN_GROUPS = {
-  "diff-added":    { ...DEFAULT_STYLE, fg: "green" },
-  "diff-modified": { ...DEFAULT_STYLE, fg: "yellow" },
-  "diff-deleted":  { ...DEFAULT_STYLE, fg: "red" },
-  "gutter-error":  { ...DEFAULT_STYLE, fg: "red" },
-  "gutter-warning":{ ...DEFAULT_STYLE, fg: "yellow" },
-  "gutter-info":   { ...DEFAULT_STYLE, fg: "brightblue" },
-};
-
 const COLOR_LINK = /color-link\s+(\S*)\s+"(.*)"/;
 const INCLUDE = /include\s+"(.*)"/;
 
@@ -47,10 +36,11 @@ export class Colorscheme {
       if (include) {
         const includeName = include[1];
         if (!parsed.has(includeName)) {
-          const child = new Colorscheme(this.runtime);
-          await child.load(includeName, parsed);
-          for (const [key, value] of child.styles) styles.set(key, value);
-          if (child.styles.has("default")) this.defaultStyle = child.styles.get("default");
+          const file = this.runtime.find(0, includeName);
+          if (!file) throw new Error(`${includeName} is not a valid colorscheme`);
+          parsed.add(includeName);
+          const includedStyles = await this.parse(includeName, await file.text(), parsed);
+          for (const [key, value] of includedStyles) styles.set(key, value);
         }
         continue;
       }
@@ -76,7 +66,7 @@ export class Colorscheme {
         if (this.styles.has(cur)) style = this.styles.get(cur);
       }
     }
-    return style ?? BUILTIN_GROUPS[group] ?? stringToStyle(group, this.defaultStyle);
+    return style ?? stringToStyle(group, this.defaultStyle);
   }
 }
 
@@ -87,10 +77,10 @@ export function stringToStyle(input, base = DEFAULT_STYLE) {
   return {
     fg: stringToColor(fgRaw.trim(), base.fg),
     bg: stringToColor(bgRaw.trim(), base.bg),
-    bold: text.includes("bold"),
-    italic: text.includes("italic"),
-    reverse: text.includes("reverse"),
-    underline: text.includes("underline"),
+    bold: base.bold || text.includes("bold"),
+    italic: base.italic || text.includes("italic"),
+    reverse: base.reverse || text.includes("reverse"),
+    underline: base.underline || text.includes("underline"),
   };
 }
 

package/src/index.js

@@ -101,7 +101,11 @@ const DEFAULT_SETTINGS = {
   fileformat: process.platform === "win32" ? "dos" : "unix",
   "comment.type": "",
   commenttype: "",
-  trailingws: false,
+  hltrailingws: false,
+  hltaberrors: false,
+  colorcolumn: 0,
+  showchars: "",
+  indentchar: " ",
 };
 
 const LONG_LINE_REHIGHLIGHT_LIMIT = 300;
@@ -647,7 +651,11 @@ class BufferModel {
       reload: DEFAULT_SETTINGS.reload,
       eofnewline: DEFAULT_SETTINGS.eofnewline,
       fileformat: this.fileformat,
-      trailingws: DEFAULT_SETTINGS.trailingws,
+      hltrailingws: DEFAULT_SETTINGS.hltrailingws,
+      hltaberrors: DEFAULT_SETTINGS.hltaberrors,
+      colorcolumn: DEFAULT_SETTINGS.colorcolumn,
+      showchars: DEFAULT_SETTINGS.showchars,
+      indentchar: DEFAULT_SETTINGS.indentchar,
       encoding: this.encoding,
       readonly,
     };
@@ -1879,7 +1887,9 @@ class App {
     const ft = (buf?.filetype && buf.filetype !== "unknown") ? buf.filetype : "?";
     const fmt = buf?.fileformat ?? "unix";
     const enc = buf?.encoding ?? "utf-8";
-    const baseStatus = { ...defaultStyle, reverse: true };
+    const baseStatus = this.context.colorscheme?.styles?.has("statusline")
+      ? this.context.colorscheme.get("statusline")
+      : { ...defaultStyle, reverse: true };
     const redStatus = { ...baseStatus, fg: "red" };
     // Fill entire row with base style first
     putText(this.screen, 0, statusRow, " ".repeat(this.cols), baseStatus, this.cols);
@@ -2010,8 +2020,9 @@ class App {
   }
 
   renderMessageRow(defaultStyle, row, message) {
-    const statusStyle = this.context.colorscheme?.get("statusline") ?? { ...defaultStyle, reverse: true };
-    const style = { ...statusStyle, reverse: false };
+    const style = this.context.colorscheme?.styles?.has("message")
+      ? this.context.colorscheme.get("message")
+      : defaultStyle;
     putText(this.screen, 0, row, " ".repeat(this.cols), style, this.cols);
     this._messageRowY = row;
     this._messageRowClickZone = null;
@@ -2041,15 +2052,15 @@ class App {
   }
 
   renderSuggestions(defaultStyle, row, suggestions, curIdx) {
-    const suggestionStyle = this.context.colorscheme?.get("statusline.suggestions")
-      ?? this.context.colorscheme?.get("statusline")
-      ?? defaultStyle;
-    const baseStyle = { ...suggestionStyle, reverse: false };
+    const cs = this.context.colorscheme;
+    const baseStyle = cs?.styles?.has("statusline.suggestions")
+      ? cs.get("statusline.suggestions")
+      : cs?.styles?.has("statusline")
+        ? cs.get("statusline")
+        : { ...defaultStyle, reverse: true };
     const selStyle = {
       ...baseStyle,
-      fg: baseStyle.bg === "default" ? "black" : baseStyle.bg,
-      bg: baseStyle.fg === "default" ? "brightwhite" : baseStyle.fg,
-      reverse: false,
+      reverse: true,
     };
 
     // Compute each item's position in the virtual (pre-scroll) space.
@@ -2172,9 +2183,16 @@ class App {
     const softwrap = buf.Settings?.softwrap ?? false;
     const wordwrap = softwrap && (buf.Settings?.wordwrap ?? false);
     const tabsize = buf.Settings?.tabsize ?? DEFAULT_SETTINGS.tabsize;
-    const gutterStyle = { ...defaultStyle, fg: "brightblack" };
-    const dirtyGutterStyle = { ...gutterStyle, fg: "red" };
     const isActivePane = pane === this.tab.activePane;
+    const gutterStyle = this.context.colorscheme?.styles?.has("line-number")
+      ? this.context.colorscheme.get("line-number")
+      : defaultStyle;
+    const cursorlineOn = buf.Settings?.cursorline ?? DEFAULT_SETTINGS.cursorline;
+    const csHasCurNum = this.context.colorscheme?.styles?.has("current-line-number");
+    const curNumStyle = !csHasCurNum
+      ? defaultStyle
+      : (cursorlineOn ? this.context.colorscheme.get("current-line-number") : gutterStyle);
+    const dirtyGutterStyle = { ...gutterStyle, fg: "red" };
     const useCursorline = (buf.Settings?.cursorline ?? DEFAULT_SETTINGS.cursorline) && isActivePane;
     const clBg = (useCursorline && this.context.colorscheme?.styles?.has("cursor-line"))
       ? (this.context.colorscheme.get("cursor-line")?.fg ?? null)
@@ -2187,12 +2205,12 @@ class App {
     const diffCol   = (buf.Settings?.diffgutter ?? false) ? 1 : 0;
     const lineNumW  = gutterW - msgW - diffCol;
     const cs = this.context.colorscheme;
-    const diffAddStyle = cs?.get("diff-added")    ?? { ...defaultStyle, fg: "green" };
-    const diffModStyle = cs?.get("diff-modified") ?? { ...defaultStyle, fg: "yellow" };
-    const diffDelStyle = cs?.get("diff-deleted")  ?? { ...defaultStyle, fg: "red" };
-    const msgInfoStyle  = cs?.get("gutter-info")    ?? { ...defaultStyle, fg: "cyan" };
-    const msgWarnStyle  = cs?.get("gutter-warning") ?? { ...defaultStyle, fg: "yellow" };
-    const msgErrStyle   = cs?.get("gutter-error")   ?? { ...defaultStyle, fg: "red" };
+    const diffAddStyle = cs?.styles?.has("diff-added") ? cs.get("diff-added") : null;
+    const diffModStyle = cs?.styles?.has("diff-modified") ? cs.get("diff-modified") : null;
+    const diffDelStyle = cs?.styles?.has("diff-deleted") ? cs.get("diff-deleted") : null;
+    const msgInfoStyle = cs?.styles?.has("gutter-info") ? cs.get("gutter-info") : defaultStyle;
+    const msgWarnStyle = cs?.styles?.has("gutter-warning") ? cs.get("gutter-warning") : defaultStyle;
+    const msgErrStyle = cs?.styles?.has("gutter-error") ? cs.get("gutter-error") : defaultStyle;
 
     const renderGutter = (lineNo, row, screenRow, subRow = 0) => {
       // Message indicator: 2 cols, '> ' with kind-based style (Go: drawGutter)
@@ -2209,19 +2227,22 @@ class App {
         }
         putText(this.screen, pane.x, screenRow, msgCh + " ", msgSt, 2);
       }
+      const isCurrentLine = isActivePane && !pane.selection && lineNo === buf.cursor.y;
+      const lineStyle = isCurrentLine ? curNumStyle : gutterStyle;
       if (diffCol > 0) {
         const m = diffMarks?.[lineNo] ?? 0;
-        const [ch, st] = m === 1 ? ["▌", diffAddStyle]
-                       : m === 2 ? ["▌", diffModStyle]
-                       : m === 3 ? ["▔", diffDelStyle]
-                       : [" ", gutterStyle];
+        const [ch, colorStyle] = m === 1 ? ["▌", diffAddStyle]
+                              : m === 2 ? ["▌", diffModStyle]
+                              : m === 3 ? ["▔", diffDelStyle]
+                              : [" ", null];
+        const st = colorStyle ? { ...lineStyle, fg: colorStyle.fg } : lineStyle;
         putText(this.screen, pane.x + msgW, screenRow, subRow === 0 ? ch : " ", st, 1);
       }
       if (lineNumW > 0) {
         const prefix = subRow === 0
           ? lineNumberText(buf, lineNo, row, lineNumW)
           : visualLineNumberText(subRow, lineNumW);
-        putText(this.screen, pane.x + msgW + diffCol, screenRow, prefix, isDirtyLongLine(buf, lineNo) ? dirtyGutterStyle : gutterStyle, lineNumW);
+        putText(this.screen, pane.x + msgW + diffCol, screenRow, prefix, isDirtyLongLine(buf, lineNo) ? dirtyGutterStyle : lineStyle, lineNumW);
       }
     };
 
@@ -2305,7 +2326,11 @@ class App {
 
   renderDividers(node, defaultStyle) {
     if (node instanceof Pane) return;
-    const divStyle = { ...defaultStyle, fg: "brightblack" };
+    const divReverse = this.context.config?.globalSettings?.divreverse ?? true;
+    const baseDiv = this.context.colorscheme?.styles?.has("divider")
+      ? this.context.colorscheme.get("divider")
+      : defaultStyle;
+    const divStyle = divReverse ? { ...baseDiv, reverse: true } : baseDiv;
     for (let i = 0; i < node.children.length - 1; i++) {
       const child = node.children[i];
       if (node.dir === "h") {
@@ -2322,21 +2347,37 @@ class App {
   }
 
   renderTabbar(defaultStyle) {
-    const tabBarStyle = this.context.colorscheme?.get("tabbar") ?? { ...defaultStyle, reverse: true };
-    const activeStyle = this.context.colorscheme?.get("tabbar.active") ?? { ...tabBarStyle, bold: true };
+    const cs = this.context.colorscheme;
+    const gs = this.context.config?.globalSettings;
+    const tabReverse = gs?.tabreverse ?? true;
+    const tabHighlight = gs?.tabhighlight ?? false;
+    const tabCharReverse = (tabReverse || tabHighlight) && !(tabReverse && tabHighlight);
+
+    const stylesFor = (reverse) => {
+      const base = cs?.styles?.has("tabbar")
+        ? cs.get("tabbar")
+        : { ...defaultStyle, reverse };
+      const active = cs?.styles?.has("tabbar.active")
+        ? cs.get("tabbar.active")
+        : base;
+      return [base, active];
+    };
+    const [sepStyle] = stylesFor(tabReverse);
+    const [charBase, charActive] = stylesFor(tabCharReverse);
+
     let x = 0;
     for (let i = 0; i < this.tabs.length && x < this.cols; i++) {
       const name = this.tabs[i].name || "No name";
       const isActive = i === this.activeTabIdx;
       const label = isActive ? `[${name}]` : ` ${name} `;
-      const style = isActive ? activeStyle : tabBarStyle;
+      const style = isActive ? charActive : charBase;
       const start = x;
       x = putText(this.screen, x, 0, label, style, this.cols - x);
       this.tabRects.push({ index: i, start, end: x });
       if (i < this.tabs.length - 1 && x < this.cols)
-        x = putText(this.screen, x, 0, "  ", tabBarStyle, this.cols - x);
+        x = putText(this.screen, x, 0, "  ", sepStyle, this.cols - x);
     }
-    if (x < this.cols) putText(this.screen, x, 0, " ".repeat(this.cols - x), tabBarStyle, this.cols - x);
+    if (x < this.cols) putText(this.screen, x, 0, " ".repeat(this.cols - x), sepStyle, this.cols - x);
   }
 
   updateScrollForPane(pane) {
@@ -6047,22 +6088,75 @@ function renderHighlightedCells(buf, lineNo, scrollX, maxWidth, colorscheme, sel
   // Go: cursor-line bg is skipped when a syntax style already has a non-default background (preservebg)
   const defBg = colorscheme?.defaultStyle?.bg ?? "default";
 
-  const showTrailingWs = buf.Settings?.trailingws ?? false;
+  const showTrailingWs = buf.Settings?.hltrailingws ?? false;
   let trailingWsIdx = raw.length;
   if (showTrailingWs) {
     let k = raw.length - 1;
     while (k >= 0 && (raw[k] === " " || raw[k] === "\t")) k--;
     trailingWsIdx = k + 1;
   }
-  const trailingWsStyle = showTrailingWs
-    ? (colorscheme?.get("trailingws") ?? { fg: "red", underline: true })
+  const trailingWsColor = showTrailingWs && colorscheme?.styles?.has("trailingws")
+    ? colorscheme.get("trailingws")?.fg
+    : null;
+
+  // showchars parsing (Go bufwindow.go:455-476)
+  const indentchar = buf.Settings?.indentchar ?? " ";
+  let spacechars = " ";
+  let tabchars = indentchar;
+  let indentspacechars = "";
+  let indenttabchars = "";
+  for (const entry of String(buf.Settings?.showchars ?? "").split(",")) {
+    const eq = entry.indexOf("=");
+    if (eq < 0) continue;
+    const key = entry.slice(0, eq);
+    const val = entry.slice(eq + 1);
+    if (key === "space") spacechars = val;
+    else if (key === "tab") tabchars = val;
+    else if (key === "ispace") indentspacechars = val;
+    else if (key === "itab") indenttabchars = val;
+  }
+  // leadingwsEnd: index of first non-whitespace char (raw code-unit index)
+  let leadingwsEnd = 0;
+  while (leadingwsEnd < raw.length && (raw[leadingwsEnd] === " " || raw[leadingwsEnd] === "\t")) leadingwsEnd++;
+
+  const hltaberrors = buf.Settings?.hltaberrors ?? false;
+  const tabstospaces = buf.Settings?.tabstospaces ?? false;
+  const tabErrorFg = hltaberrors && colorscheme?.styles?.has("tab-error")
+    ? colorscheme.get("tab-error")?.fg
+    : null;
+  const indentCharFg = colorscheme?.styles?.has("indent-char")
+    ? colorscheme.get("indent-char")?.fg
     : null;
+  const colorcolumn = Number(buf.Settings?.colorcolumn ?? 0) | 0;
+  const colorColumnBg = colorcolumn > 0 && colorscheme?.styles?.has("color-column")
+    ? colorscheme.get("color-column")?.fg
+    : null;
+  const tabsize = buf.Settings?.tabsize ?? DEFAULT_SETTINGS.tabsize;
+
+  // scrollVisualCol: visual column of raw[0..scrollX). Uses displayWidth (tab = full
+  // tabsize, not aligned-to-boundary) to stay consistent with cursor/scroll math.
+  const scrollVisualCol = displayWidth(raw.slice(0, scrollX));
+
+  // Linter messages overlapping this line (Go bufwindow.go:662-668)
+  const lineMessages = (buf.Messages ?? []).filter((m) => {
+    const sy = m.Start?.Y ?? 0, ey = m.End?.Y ?? 0;
+    return sy <= lineNo && ey >= lineNo;
+  });
+  const inMessageAt = (charIdx) => {
+    for (const m of lineMessages) {
+      const sY = m.Start?.Y ?? 0, sX = m.Start?.X ?? 0;
+      const eY = m.End?.Y ?? 0, eX = m.End?.X ?? 0;
+      const ge = lineNo > sY || (lineNo === sY && charIdx >= sX);
+      const lt = lineNo < eY || (lineNo === eY && charIdx < eX);
+      if (ge && lt) return true;
+    }
+    return false;
+  };
 
   let changeIndex = 0;
   let searchIdx = 0;
   let i = scrollX;
   while (i < raw.length && width < maxWidth) {
-    const cp = raw.codePointAt(i);
     const unit = displayUnitAt(raw, i);
     const ch = unit.text;
     const charLen = unit.length;
@@ -6071,16 +6165,30 @@ function renderHighlightedCells(buf, lineNo, scrollX, maxWidth, colorscheme, sel
     while (changeIndex + 1 < changes.length && i >= changes[changeIndex + 1][0]) changeIndex++;
     const group = changes[changeIndex]?.[1] ?? "default";
     const syntaxStyle = colorscheme?.get(group) ?? colorscheme?.defaultStyle ?? {};
-    const preservebg = cursorLineBg != null && syntaxStyle.bg !== undefined && syntaxStyle.bg !== defBg;
-    const baseStyle = (cursorLineBg && !preservebg) ? { ...syntaxStyle, bg: cursorLineBg } : syntaxStyle;
+    let preservebg = syntaxStyle.bg !== undefined && syntaxStyle.bg !== defBg;
+    let baseStyle = (cursorLineBg && !preservebg) ? { ...syntaxStyle, bg: cursorLineBg } : syntaxStyle;
     while (searchIdx < searchRanges.length && searchRanges[searchIdx][1] <= i) searchIdx++;
     const inSearch = searchIdx < searchRanges.length && i >= searchRanges[searchIdx][0] && i < searchRanges[searchIdx][1];
     const selected = isSelected(selection, lineNo, i, i + charLen);
     const braceMatched = braceMatches?.has(String(lineNo) + ":" + String(i));
-    let style = (showTrailingWs && i >= trailingWsIdx) ? trailingWsStyle : baseStyle;
+
+    // tab-error in leading whitespace
+    let style = baseStyle;
+    const inLeading = i < leadingwsEnd;
+    if (tabErrorFg != null && inLeading) {
+      if ((tabstospaces && ch === "\t") || (!tabstospaces && ch === " ")) {
+        style = { ...style, bg: tabErrorFg };
+        preservebg = true;
+      }
+    }
+    if (trailingWsColor != null && i >= trailingWsIdx) {
+      style = { ...style, bg: trailingWsColor };
+      preservebg = true;
+    }
     if (inSearch) {
       const searchStyle = colorscheme?.styles?.has("hlsearch") ? colorscheme.get("hlsearch") : null;
-      style = searchStyle ?? { ...baseStyle, reverse: !baseStyle.reverse };
+      style = searchStyle ?? { ...(colorscheme?.defaultStyle ?? {}), reverse: true };
+      if ((style.bg ?? "default") !== defBg) preservebg = true;
     }
     if (braceMatched) {
       if ((buf.Settings?.matchbracestyle ?? DEFAULT_SETTINGS.matchbracestyle) === "highlight") {
@@ -6091,22 +6199,73 @@ function renderHighlightedCells(buf, lineNo, scrollX, maxWidth, colorscheme, sel
       }
     }
     if (selected) {
-      style = { ...style, reverse: !style.reverse };
+      const selectionStyle = colorscheme?.styles?.has("selection") ? colorscheme.get("selection") : null;
+      style = selectionStyle ?? { ...(colorscheme?.defaultStyle ?? {}), reverse: true };
+    }
+    if (lineMessages.length > 0 && inMessageAt(i)) {
+      style = { ...style, underline: true };
+    }
+
+    // Visualize whitespace
+    let displayCh = ch;
+    let useIndentCharFg = false;
+    if (ch === " ") {
+      // Go bufwindow.go:554-559: ispace only kicks in at tabsize boundaries (indent guide).
+      const visualCol = scrollVisualCol + width;
+      const useIspace = inLeading && indentspacechars && (visualCol % tabsize === 0);
+      const candidate = useIspace ? indentspacechars : spacechars;
+      if (candidate && candidate !== " ") {
+        displayCh = candidate[0] ?? " ";
+        useIndentCharFg = true;
+      }
+    } else if (ch === "\t") {
+      const candidate = (inLeading && indenttabchars) ? indenttabchars : tabchars;
+      if (candidate && candidate !== " ") {
+        displayCh = candidate[0] ?? " ";
+        useIndentCharFg = true;
+      } else {
+        displayCh = " ";
+      }
+    }
+    if (useIndentCharFg && indentCharFg != null) {
+      style = { ...style, fg: indentCharFg };
     }
+
+    const ccAt = (visualCol) => {
+      if (colorColumnBg == null || preservebg) return null;
+      return visualCol === colorcolumn ? colorColumnBg : null;
+    };
+
     if (ch === "\t") {
-      const spaces = Math.min(DEFAULT_SETTINGS.tabsize, maxWidth - width);
-      for (let j = 0; j < spaces; j++) cells.push({ ch: " ", style });
-      width += spaces;
+      const spaces = Math.min(tabsize, maxWidth - width);
+      for (let j = 0; j < spaces; j++) {
+        const visualCol = scrollVisualCol + width;
+        const cellCh = j === 0 ? displayCh : " ";
+        const ccBg = ccAt(visualCol);
+        const cellStyle = ccBg != null ? { ...style, bg: ccBg } : style;
+        cells.push({ ch: cellCh, style: cellStyle });
+        width++;
+      }
     } else if (w > 0 && width + w <= maxWidth) {
-      cells.push({ ch, style, width: w });
+      const visualCol = scrollVisualCol + width;
+      const ccBg = ccAt(visualCol);
+      const cellStyle = ccBg != null ? { ...style, bg: ccBg } : style;
+      cells.push({ ch: displayCh, style: cellStyle, width: w });
       width += w;
     }
     i += charLen;
   }
-  // Fill rest of line with cursorline background
-  if (cursorLineBg) {
-    const padStyle = { ...(colorscheme?.defaultStyle ?? {}), bg: cursorLineBg };
-    while (width < maxWidth) { cells.push({ ch: " ", style: padStyle }); width++; }
+  // Trailing fill: cursor-line bg and color-column always apply (Go bufwindow.go:807-826)
+  while (width < maxWidth) {
+    const visualCol = scrollVisualCol + width;
+    let padStyle = cursorLineBg
+      ? { ...(colorscheme?.defaultStyle ?? {}), bg: cursorLineBg }
+      : (colorscheme?.defaultStyle ?? {});
+    if (colorColumnBg != null && visualCol === colorcolumn) {
+      padStyle = { ...padStyle, bg: colorColumnBg };
+    }
+    cells.push({ ch: " ", style: padStyle });
+    width++;
   }
   return cells;
 }

package/tests/pty-demo.js

@@ -0,0 +1,492 @@
+#!/usr/bin/env bun
+/**
+ * Visual PTY demo for bunmicro.
+ *
+ * Child terminal output is forwarded directly to the current TTY.
+ * stdin is not forwarded; press q, Ctrl-Q, or Esc to stop the demo.
+ *
+ * Usage:
+ *   bun tests/pty-demo.js
+ *   bun tests/pty-demo.js --delay 700 --type-delay 45 --term-delay 1800
+ */
+
+import { mkdir, mkdtemp, readdir, rm } from "node:fs/promises";
+import { join, resolve,dirname,basename } from "node:path";
+import { tmpdir } from "node:os";
+
+const isAnci = Bun.env.TMPK_HOME && Bun.which('ldcustom')
+
+const ROOT = resolve(import.meta.dir, "..");
+const BUNMICRO = join(ROOT, "src", "index.js");
+
+const DEMO_ONE_TEXT = `
+
+# BUNMICRO PTY DEMO
+"Use q, Ctrl-Q, or Esc to stop this demo."
+`;
+
+const DEMO_TWO_LONG_LINE = "This deliberately long line demonstrates soft wrapping across the editor viewport without real newline characters. 中文段落用來測試寬字元、游標移動與自動換行是否正確，並確認每一個漢字都能完整顯示。日本語の文章では、ひらがな、カタカナ、漢字を混ぜて、表示幅と折り返し位置を確認します。さらに長い一行を維持したまま、画面端で自然に折り返される動作を丁寧に実演します。中文日本語🚀✨🧪確認。";
+const DEMO_TWO_TEXT = [
+  "SECOND TAB",
+  DEMO_TWO_LONG_LINE,
+  "",
+].join("\n");
+if ([...DEMO_TWO_LONG_LINE].length !== 250) throw new Error("demo two long line must be exactly 250 characters");
+const options = {
+  delay: numberArg("--delay", 500),
+  typeDelay: numberArg("--type-delay", 100),
+  startupDelay: numberArg("--startup-delay", 5000),
+  termDelay: numberArg("--term-delay", 1400),
+  cols: numberArg("--cols", process.stdout.columns || 100),
+  rows: numberArg("--rows", process.stdout.rows || 30),
+};
+
+if (process.argv.includes("--help")) {
+  console.log(`Usage: bun tests/pty-demo.js [options]
+
+Options:
+  --delay MS          Delay after each action (default: ${options.delay})
+  --type-delay MS     Delay between typed characters (default: ${options.typeDelay})
+  --startup-delay MS  Initial editor startup delay (default: ${options.startupDelay})
+  --term-delay MS     Extra delay for terminal pane startup (default: ${options.termDelay})
+  --cols N            PTY columns (default: current TTY width)
+  --rows N            PTY rows (default: current TTY height)
+
+stdin is not forwarded to bunmicro. Press q, Ctrl-Q, or Esc to stop.`);
+  process.exit(0);
+}
+
+if (!process.stdin.isTTY || !process.stdout.isTTY) {
+  console.error("pty-demo requires stdin and stdout to be TTYs.");
+  process.exit(1);
+}
+
+let stopped = false;
+let resolveStopped;
+const stoppedPromise = new Promise((resolve) => { resolveStopped = resolve; });
+let terminal = null;
+let proc = null;
+let temp = "";
+let originalRaw = false;
+
+function requestStop() {
+  if (stopped) return;
+  stopped = true;
+  resolveStopped();
+}
+
+function onInput(data) {
+  const bytes = Buffer.from(data);
+  if (bytes.includes(0x71) || bytes.includes(0x11) || bytes.includes(0x1b)) requestStop();
+}
+
+function onResize() {
+  if (!terminal || terminal.closed) return;
+  terminal.resize(process.stdout.columns || options.cols, process.stdout.rows || options.rows);
+}
+
+async function pause(ms = options.delay) {
+  if (stopped) throw new Error("demo stopped");
+  await Promise.race([Bun.sleep(ms), stoppedPromise]);
+  if (stopped) throw new Error("demo stopped");
+}
+
+function setTitle(title) {
+  process.stdout.write(`\x1b]0;bunmicro demo: ${title}\x07`);
+}
+
+async function send(data, wait = options.delay) {
+  if (stopped) throw new Error("demo stopped");
+  terminal.write(data);
+  await pause(wait);
+}
+
+async function type(text, wait = options.delay) {
+  for (const ch of text) {
+    if (stopped) throw new Error("demo stopped");
+    terminal.write(ch);
+    await pause(options.typeDelay);
+  }
+  await pause(wait);
+}
+
+async function paste(text, wait = options.delay) {
+  await send(`\x1b[200~${text}\x1b[201~`, wait);
+}
+
+async function action(title, fn, waitBefore = Math.min(250, options.delay)) {
+  setTitle(title);
+  await pause(waitBefore);
+  await fn();
+}
+
+async function command(value, wait = options.delay) {
+  await send("\x05", Math.min(350, options.delay)); // Ctrl-E
+  await type(`${value}\r`, wait);
+}
+
+function click(x, y, button = 0) {
+  return `\x1b[<${button};${x + 1};${y + 1}M\x1b[<${button};${x + 1};${y + 1}m`;
+}
+
+async function runDemo({ file2, unknownFile, redetectedFile, crlfShell, themeCount }) {
+  await action("bracketed paste JavaScript sample", async () => {
+    await send("\x1b[F", 150);
+    await paste([
+      "",
+      "alpha one",
+      "alpha two",
+      "foo bar foo",
+      "",
+      "async function loadProfile(userId) {",
+      "  const enabled = true;",
+      "  const retries = 3;",
+      '  const greeting = "hello from bunmicro";',
+      "  const tags = [\"editor\", \"javascript\", \"demo\"];",
+      "  const profile = { userId, enabled, retries, tags };",
+      "  await new Promise((resolve) => setTimeout(resolve, 250));",
+      "  if (!profile.enabled) throw new Error(\"disabled profile\");",
+      "  return { ...profile, greeting };",
+      "}",
+      "",
+      "loadProfile(42).then(console.log).catch(console.error);",
+      "mouse target",
+    ].join("\n"), 1000);
+  });
+
+  await action("cursor movement and edit", async () => {
+    await send("\x1b[A\x1b[A\x1b[H", 200);
+    await type("[edited] ");
+    await send("\x1b[F", 150);
+    await type(" !");
+  });
+
+  await action("undo and redo", async () => {
+    await send("\x1a", 350);
+    await send("\x19", 500);
+  });
+
+  await action("set filetype applies syntax instantly", async () => {
+    await command("set filetype javascript", 1100);
+  });
+
+  await action("theme picker: preview every theme with Down", async () => {
+    await send("\x05", 250); // Ctrl-E
+    await type("theme");
+    setTitle("theme picker: Space opens theme completions");
+    await send(" ", 350);
+    setTitle("theme picker: Tab previews first theme");
+    await send("\t", 850);
+    for (let i = 1; i < themeCount; i++) {
+      setTitle(`theme picker: Down ${i}/${themeCount - 1}`);
+      await send("\x1b[B", 650);
+    }
+    setTitle("theme picker: reached final theme");
+    await pause(1000);
+    await send("\x1b", 500); // Cancel preview and restore original theme
+  });
+
+  await action("select fixed theme: dracula-tc", async () => {
+    await command("theme darcula", 1000);
+  });
+
+  await action("find alpha", async () => {
+    await send("\x06", 300);
+    await type("alpha");
+    await send("\r", 500);
+    await send("\x0e", 500);
+  });
+
+  await action("interactive replace foo", async () => {
+    await send("\x1bh", 300);
+    await type("foo FIRST");
+    await send("\r", 700);
+    setTitle("interactive replace: accept first match");
+    await send("y", 700);
+    setTitle("interactive replace: skip second match");
+    await send("n", 700);
+  });
+
+  await action("replace all alpha", async () => {
+    await command("replaceall alpha 阿爾法", 650);
+  });
+
+  await action("show whitespace and trailing spaces", async () => {
+    await command("set showchars tab=>,space=.", 450);
+    await command("set hltrailingws true", 450);
+    await command("set colorcolumn 30", 600);
+    await command("set hltaberrors true", 450);
+    await command("set tabstospaces true", 850);
+    await send("\x1b[F", 120);
+    await type("   ");
+  });
+
+  await action("save", async () => {
+    await send("\x13", 650);
+  });
+
+  await action("unknown filetype saves as .js and redetects", async () => {
+    await command(`open ${unknownFile}`, 850);
+    await command(`save ${redetectedFile}`, 1200);
+  });
+
+  await action("select all and eval js", async () => {
+    await send("\x01", 900); // Ctrl-A
+
+    if(isAnci)
+      await command("js Object.getOwnPropertyNames(''.__proto__)", 2500);      
+    else
+      await command("eval js", 2500);
+    setTitle("eval js result: press Enter to continue");
+    await send("\r", 1000);
+  });
+
+  await action("DOS CRLF shell script warning", async () => {
+    await command(`open ${crlfShell}`, 1200);
+  });
+
+  await action("open second file in another tab", async () => {
+    await command(`open ${file2}`, 800);
+  });
+
+  await action("enable softwrap for long line", async () => {
+    await command("set softwrap on", 1200);
+  });
+
+  await action("previous and next tab", async () => {
+    await send("\x1bp", 650);
+    await send("\x1bt", 650);
+  });
+
+  await action("new scratch tab", async () => {
+    await send("\x14", 600);
+    await type("scratch tab\ncreated by PTY demo");
+  });
+
+  await action("mouse click unsaved star opens save command", async () => {
+    await send(click(9, options.rows - 1), 750);
+    await send("\x1b", 500);
+  });
+
+  await action("mouse command and shell icons toggle prompts", async () => {
+    await send(click(25, options.rows - 1), 650); // € opens command prompt
+    await send(click(25, options.rows - 2), 650); // € closes command prompt
+    await send(click(32, options.rows - 1), 650); // $ opens shell prompt
+    await send(click(32, options.rows - 2), 650); // $ closes shell prompt
+  });
+
+  await action("mouse click first tab", async () => {
+    await send(click(2, 0), 800);
+  });
+
+  await action("vertical split and pane switch", async () => {
+    await command("vsplit", 800);
+    await send("\x17", 650);
+  });
+
+  await action("mouse click editor pane", async () => {
+    await send(click(Math.floor(options.cols * 0.75), 5), 700);
+  });
+
+  await action("horizontal split and pane switch", async () => {
+    await command("hsplit", 800);
+    await send("\x17", 650);
+  });
+
+  await action("Ctrl-B interactive shell", async () => {
+    await send("\x02", 350); // Ctrl-B
+    await type("echo BUNMICRO_CTRL_B_SHELL");
+    await send("\r", options.termDelay);
+    setTitle("Ctrl-B shell: press Enter to return");
+    await send("\r", 900);
+  });
+
+  await action("open terminal pane", async () => {
+    await command("term", options.termDelay);
+    await type("printf 'BUNMICRO_TERM_DEMO\\n'\r", options.termDelay);
+    await send("\x1b", 800);
+  });
+
+  await action("mouse wheel and editor click", async () => {
+    await send(click(10, 8, 65), 500);
+    await send(click(10, 8, 64), 500);
+    await send(click(12, 6), 700);
+  });
+
+  await action("final tab switching", async () => {
+    await send("\x1bp", 600);
+    await send("\x1bt", 900);
+  });
+}
+
+async function cleanup() {
+  process.stdin.off("data", onInput);
+  process.stdout.off("resize", onResize);
+
+  if (proc?.exitCode === null) {
+    // Let bunmicro restore the terminal itself first. Escape closes a possible
+    // terminal pane; repeated Ctrl-Q/n handles panes, tabs, and save prompts.
+    terminal?.write("\x1b");
+    await Bun.sleep(250);
+    for (let i = 0; i < 12 && proc.exitCode === null; i++) {
+      terminal?.write("\x11"); // Ctrl-Q
+      await Bun.sleep(180);
+      terminal?.write("n");
+      await Bun.sleep(120);
+    }
+    await Promise.race([proc.exited, Bun.sleep(700)]);
+  }
+  if (proc?.exitCode === null) {
+    proc.kill();
+    await Promise.race([proc.exited, Bun.sleep(500)]);
+  }
+  if (terminal && !terminal.closed) terminal.close();
+  
+  
+  let udroot="";
+  
+  if(isAnci)
+  {
+    udroot=join(Bun.env.HOME,'.udocker/containers/alpine-toolbox/ROOT')
+  }
+
+  if (temp) await rm(udroot+temp, { recursive: true, force: true });
+
+
+  // Defensive reset in case the child was killed before emitting its teardown.
+  process.stdout.write([
+    "\x1b[?1000l", // normal mouse tracking
+    "\x1b[?1001l", // highlight mouse tracking
+    "\x1b[?1002l", // button-event mouse tracking
+    "\x1b[?1003l", // any-event mouse tracking
+    "\x1b[?1004l", // focus events
+    "\x1b[?1005l", // UTF-8 mouse encoding
+    "\x1b[?1006l", // SGR mouse encoding
+    "\x1b[?1007l", // alternate scroll mode
+    "\x1b[?1015l", // urxvt mouse encoding
+    "\x1b[?1016l", // SGR pixel mouse encoding
+    "\x1b[?2004l", // bracketed paste
+    "\x1b[?2026l", // synchronized output
+    "\x1b[>4;0m",  // xterm modifyOtherKeys
+    "\x1b[<u",     // pop kitty keyboard protocol
+    "\x1b[0m",
+    "\x1b[?25h",
+    "\x1b[?1049l", // leave alternate screen last
+  ].join(""));
+  if (process.stdin.isTTY) process.stdin.setRawMode(originalRaw);
+  process.stdin.pause();
+  setTitle(stopped ? "stopped" : "complete");
+  process.stdout.write("\n");
+}
+
+async function main() {
+
+  let udroot="";
+  if(isAnci)
+  {
+    await Bun.spawn(['fish','-c echo Using fish shell!'],{env:Bun.env}).exited
+
+    temp = '/tmp/bunmicro-pty-demo-'+Bun.randomUUIDv7().slice(0,8);
+    udroot=join(Bun.env.HOME,'.udocker/containers/alpine-toolbox/ROOT')
+  }
+  else
+    temp = await mkdtemp(join(tmpdir(), "bunmicro-pty-demo-"));
+    
+  const configDir = join(temp, "config");
+  const file1 = join(temp, "pty-demo-one.txt");
+  const file2 = join(temp, "pty-demo-two.txt");
+  const unknownFile = join(temp, "pty-demo-redetect");
+  const redetectedFile = join(temp, "pty-demo-redetected.js");
+  const crlfShell = join(temp, "pty-demo-crlf.sh");
+  const syntaxDir = join(configDir, "syntax");
+  const themeCount = (await readdir(join(ROOT, "runtime", "colorschemes")))
+    .filter((name) => name.endsWith(".micro")).length;
+  await mkdir(udroot+configDir, { recursive: true });
+  await mkdir(udroot+syntaxDir, { recursive: true });
+  await Bun.write(join(udroot,configDir, "settings.json"), JSON.stringify({
+    colorscheme: "default",
+    mouse: true,
+    savecursor: false,
+    savehistory: false,
+  }, null, 2)); 
+
+  await Bun.write(udroot+file1, DEMO_ONE_TEXT);
+  await Bun.write(udroot+file2, DEMO_TWO_TEXT);
+  await Bun.write(udroot+unknownFile, `
+async function hello(){
+  const redetected = 'yes';
+  console.log(
+    Object.getOwnPropertyNames(
+    	  redetected.__proto__
+    )
+  );
+}
+
+await hello();
+`);
+  await Bun.write(udroot+crlfShell, "#!/bin/sh\r\necho CRLF_SHELL_WARNING\r\n");
+  await Bun.write(join(udroot,syntaxDir, "javascript.yaml"), "filetype: javascript\nrules: [invalid yaml");
+
+  console.log([
+    "NOTE: The upcoming JavaScript YAML parse failure is intentional.",
+    "It demonstrates fallback to bunmicro's built-in JavaScript syntax.",
+  ].join("\n"));
+
+  originalRaw = process.stdin.isRaw ?? false;
+  process.stdin.setRawMode(true);
+  process.stdin.resume();
+  process.stdin.on("data", onInput);
+  process.stdout.on("resize", onResize);
+
+  terminal = new Bun.Terminal({
+    cols: options.cols,
+    rows: options.rows,
+    data(_terminal, data) {
+      process.stdout.write(data);
+    },
+  });
+
+  let bunArr
+  if(isAnci)
+  {
+    bunArr=['fish','-c',`/android/bin/ldcustom --library-path /android/glibc:/android/bun /android/bun/bun-linux-aarch64 $argv`,'--']
+  }
+  else
+    bunArr=['bun'];
+  
+  proc = Bun.spawn({
+    cmd: [...bunArr, BUNMICRO, "-config-dir", configDir, file1],
+    cwd: ROOT,
+    terminal,
+    env: {
+      ...process.env,
+      TERM: process.env.TERM || "xterm-256color",
+      COLORTERM: process.env.COLORTERM || "truecolor",
+      COLUMNS: String(options.cols),
+      LINES: String(options.rows),
+    },
+  });
+
+  setTitle("startup - press q to stop");
+  await pause(options.startupDelay);
+  await runDemo({ file2, unknownFile, redetectedFile, crlfShell, themeCount });
+  await pause(1000);
+}
+
+try {
+  await main();
+} catch (error) {
+  if (!stopped) throw error;
+} finally {
+  await cleanup();
+}
+
+function numberArg(name, fallback) {
+  const eqArg = process.argv.find((arg) => arg.startsWith(`${name}=`));
+  const index = process.argv.indexOf(name);
+  const raw = eqArg?.slice(name.length + 1) ?? (index >= 0 ? process.argv[index + 1] : undefined);
+  if (raw === undefined) return fallback;
+  const value = Number(raw);
+  if (!Number.isFinite(value) || value < 0) throw new Error(`${name} must be a non-negative number`);
+  return Math.floor(value);
+}