numux 2.16.2 → 2.17.1

package/dist/numux.js

@@ -246,6 +246,7 @@ export default defineConfig({
 | \`--no-watch\` | Disable file watching even if config has watch patterns |
 | \`-t,\` \`--timestamps\` \`[<format>]\` | Add timestamps to output (default HH:mm:ss.SSS, or pass a format string) |
 | \`--log-dir\` \`<path>\` | Write per-process logs to directory |
+| \`--theme\` \`<light|dark|auto>\` | TUI theme (auto detects terminal background) |
 | \`--debug\` | Enable debug logging to .numux/debug.log |
 | \`-h,\` \`--help\` | Show this help |
 | \`-v,\` \`--version\` | Show version |
@@ -290,6 +291,7 @@ numux logs api | tail -f           # Follow process log output
 | \`killOthersOnFail\` | \`boolean\` | Kill all processes when any one exits with a non-zero exit code |
 | \`noWatch\` | \`boolean\` | Disable file watching even if processes have watch patterns |
 | \`logDir\` | \`string\` | Directory to write per-process log files |
+| \`theme\` | \`ThemePref\` | TUI color theme. \`'auto'\` detects the terminal background via OSC 11 (falling back to \`COLORFGBG\` then dark). \`'light'\`/\`'dark'\` skip detection. |
 <!-- /generated:config-global -->
 
 \`\`\`ts
@@ -502,6 +504,341 @@ Search mode (after pressing \`F\`):
   };
 });
 
+// node_modules/clone/clone.js
+var require_clone = __commonJS((exports, module) => {
+  var clone = function() {
+    function clone2(parent, circular, depth, prototype) {
+      var filter;
+      if (typeof circular === "object") {
+        depth = circular.depth;
+        prototype = circular.prototype;
+        filter = circular.filter;
+        circular = circular.circular;
+      }
+      var allParents = [];
+      var allChildren = [];
+      var useBuffer = typeof Buffer != "undefined";
+      if (typeof circular == "undefined")
+        circular = true;
+      if (typeof depth == "undefined")
+        depth = Infinity;
+      function _clone(parent2, depth2) {
+        if (parent2 === null)
+          return null;
+        if (depth2 == 0)
+          return parent2;
+        var child;
+        var proto;
+        if (typeof parent2 != "object") {
+          return parent2;
+        }
+        if (clone2.__isArray(parent2)) {
+          child = [];
+        } else if (clone2.__isRegExp(parent2)) {
+          child = new RegExp(parent2.source, __getRegExpFlags(parent2));
+          if (parent2.lastIndex)
+            child.lastIndex = parent2.lastIndex;
+        } else if (clone2.__isDate(parent2)) {
+          child = new Date(parent2.getTime());
+        } else if (useBuffer && Buffer.isBuffer(parent2)) {
+          if (Buffer.allocUnsafe) {
+            child = Buffer.allocUnsafe(parent2.length);
+          } else {
+            child = new Buffer(parent2.length);
+          }
+          parent2.copy(child);
+          return child;
+        } else {
+          if (typeof prototype == "undefined") {
+            proto = Object.getPrototypeOf(parent2);
+            child = Object.create(proto);
+          } else {
+            child = Object.create(prototype);
+            proto = prototype;
+          }
+        }
+        if (circular) {
+          var index = allParents.indexOf(parent2);
+          if (index != -1) {
+            return allChildren[index];
+          }
+          allParents.push(parent2);
+          allChildren.push(child);
+        }
+        for (var i in parent2) {
+          var attrs;
+          if (proto) {
+            attrs = Object.getOwnPropertyDescriptor(proto, i);
+          }
+          if (attrs && attrs.set == null) {
+            continue;
+          }
+          child[i] = _clone(parent2[i], depth2 - 1);
+        }
+        return child;
+      }
+      return _clone(parent, depth);
+    }
+    clone2.clonePrototype = function clonePrototype(parent) {
+      if (parent === null)
+        return null;
+      var c = function() {};
+      c.prototype = parent;
+      return new c;
+    };
+    function __objToStr(o) {
+      return Object.prototype.toString.call(o);
+    }
+    clone2.__objToStr = __objToStr;
+    function __isDate(o) {
+      return typeof o === "object" && __objToStr(o) === "[object Date]";
+    }
+    clone2.__isDate = __isDate;
+    function __isArray(o) {
+      return typeof o === "object" && __objToStr(o) === "[object Array]";
+    }
+    clone2.__isArray = __isArray;
+    function __isRegExp(o) {
+      return typeof o === "object" && __objToStr(o) === "[object RegExp]";
+    }
+    clone2.__isRegExp = __isRegExp;
+    function __getRegExpFlags(re) {
+      var flags = "";
+      if (re.global)
+        flags += "g";
+      if (re.ignoreCase)
+        flags += "i";
+      if (re.multiline)
+        flags += "m";
+      return flags;
+    }
+    clone2.__getRegExpFlags = __getRegExpFlags;
+    return clone2;
+  }();
+  if (typeof module === "object" && module.exports) {
+    module.exports = clone;
+  }
+});
+
+// node_modules/defaults/index.js
+var require_defaults = __commonJS((exports, module) => {
+  var clone = require_clone();
+  module.exports = function(options, defaults) {
+    options = options || {};
+    Object.keys(defaults).forEach(function(key) {
+      if (typeof options[key] === "undefined") {
+        options[key] = clone(defaults[key]);
+      }
+    });
+    return options;
+  };
+});
+
+// node_modules/wcwidth/combining.js
+var require_combining = __commonJS((exports, module) => {
+  module.exports = [
+    [768, 879],
+    [1155, 1158],
+    [1160, 1161],
+    [1425, 1469],
+    [1471, 1471],
+    [1473, 1474],
+    [1476, 1477],
+    [1479, 1479],
+    [1536, 1539],
+    [1552, 1557],
+    [1611, 1630],
+    [1648, 1648],
+    [1750, 1764],
+    [1767, 1768],
+    [1770, 1773],
+    [1807, 1807],
+    [1809, 1809],
+    [1840, 1866],
+    [1958, 1968],
+    [2027, 2035],
+    [2305, 2306],
+    [2364, 2364],
+    [2369, 2376],
+    [2381, 2381],
+    [2385, 2388],
+    [2402, 2403],
+    [2433, 2433],
+    [2492, 2492],
+    [2497, 2500],
+    [2509, 2509],
+    [2530, 2531],
+    [2561, 2562],
+    [2620, 2620],
+    [2625, 2626],
+    [2631, 2632],
+    [2635, 2637],
+    [2672, 2673],
+    [2689, 2690],
+    [2748, 2748],
+    [2753, 2757],
+    [2759, 2760],
+    [2765, 2765],
+    [2786, 2787],
+    [2817, 2817],
+    [2876, 2876],
+    [2879, 2879],
+    [2881, 2883],
+    [2893, 2893],
+    [2902, 2902],
+    [2946, 2946],
+    [3008, 3008],
+    [3021, 3021],
+    [3134, 3136],
+    [3142, 3144],
+    [3146, 3149],
+    [3157, 3158],
+    [3260, 3260],
+    [3263, 3263],
+    [3270, 3270],
+    [3276, 3277],
+    [3298, 3299],
+    [3393, 3395],
+    [3405, 3405],
+    [3530, 3530],
+    [3538, 3540],
+    [3542, 3542],
+    [3633, 3633],
+    [3636, 3642],
+    [3655, 3662],
+    [3761, 3761],
+    [3764, 3769],
+    [3771, 3772],
+    [3784, 3789],
+    [3864, 3865],
+    [3893, 3893],
+    [3895, 3895],
+    [3897, 3897],
+    [3953, 3966],
+    [3968, 3972],
+    [3974, 3975],
+    [3984, 3991],
+    [3993, 4028],
+    [4038, 4038],
+    [4141, 4144],
+    [4146, 4146],
+    [4150, 4151],
+    [4153, 4153],
+    [4184, 4185],
+    [4448, 4607],
+    [4959, 4959],
+    [5906, 5908],
+    [5938, 5940],
+    [5970, 5971],
+    [6002, 6003],
+    [6068, 6069],
+    [6071, 6077],
+    [6086, 6086],
+    [6089, 6099],
+    [6109, 6109],
+    [6155, 6157],
+    [6313, 6313],
+    [6432, 6434],
+    [6439, 6440],
+    [6450, 6450],
+    [6457, 6459],
+    [6679, 6680],
+    [6912, 6915],
+    [6964, 6964],
+    [6966, 6970],
+    [6972, 6972],
+    [6978, 6978],
+    [7019, 7027],
+    [7616, 7626],
+    [7678, 7679],
+    [8203, 8207],
+    [8234, 8238],
+    [8288, 8291],
+    [8298, 8303],
+    [8400, 8431],
+    [12330, 12335],
+    [12441, 12442],
+    [43014, 43014],
+    [43019, 43019],
+    [43045, 43046],
+    [64286, 64286],
+    [65024, 65039],
+    [65056, 65059],
+    [65279, 65279],
+    [65529, 65531],
+    [68097, 68099],
+    [68101, 68102],
+    [68108, 68111],
+    [68152, 68154],
+    [68159, 68159],
+    [119143, 119145],
+    [119155, 119170],
+    [119173, 119179],
+    [119210, 119213],
+    [119362, 119364],
+    [917505, 917505],
+    [917536, 917631],
+    [917760, 917999]
+  ];
+});
+
+// node_modules/wcwidth/index.js
+var require_wcwidth = __commonJS((exports, module) => {
+  var defaults = require_defaults();
+  var combining = require_combining();
+  var DEFAULTS = {
+    nul: 0,
+    control: 0
+  };
+  module.exports = function wcwidth2(str) {
+    return wcswidth(str, DEFAULTS);
+  };
+  module.exports.config = function(opts) {
+    opts = defaults(opts || {}, DEFAULTS);
+    return function wcwidth2(str) {
+      return wcswidth(str, opts);
+    };
+  };
+  function wcswidth(str, opts) {
+    if (typeof str !== "string")
+      return wcwidth(str, opts);
+    var s = 0;
+    for (var i = 0;i < str.length; i++) {
+      var n = wcwidth(str.charCodeAt(i), opts);
+      if (n < 0)
+        return -1;
+      s += n;
+    }
+    return s;
+  }
+  function wcwidth(ucs, opts) {
+    if (ucs === 0)
+      return opts.nul;
+    if (ucs < 32 || ucs >= 127 && ucs < 160)
+      return opts.control;
+    if (bisearch(ucs))
+      return 0;
+    return 1 + (ucs >= 4352 && (ucs <= 4447 || ucs == 9001 || ucs == 9002 || ucs >= 11904 && ucs <= 42191 && ucs != 12351 || ucs >= 44032 && ucs <= 55203 || ucs >= 63744 && ucs <= 64255 || ucs >= 65040 && ucs <= 65049 || ucs >= 65072 && ucs <= 65135 || ucs >= 65280 && ucs <= 65376 || ucs >= 65504 && ucs <= 65510 || ucs >= 131072 && ucs <= 196605 || ucs >= 196608 && ucs <= 262141));
+  }
+  function bisearch(ucs) {
+    var min = 0;
+    var max = combining.length - 1;
+    var mid;
+    if (ucs < combining[0][0] || ucs > combining[max][1])
+      return false;
+    while (max >= min) {
+      mid = Math.floor((min + max) / 2);
+      if (ucs > combining[mid][1])
+        min = mid + 1;
+      else if (ucs < combining[mid][0])
+        max = mid - 1;
+      else
+        return true;
+    }
+    return false;
+  }
+});
+
 // src/help.ts
 var exports_help = {};
 __export(exports_help, {
@@ -548,7 +885,7 @@ var init_help = __esm(() => {
 var require_package = __commonJS((exports, module) => {
   module.exports = {
     name: "numux",
-    version: "2.16.2",
+    version: "2.17.1",
     description: "Terminal multiplexer with dependency orchestration",
     type: "module",
     license: "MIT",
@@ -593,8 +930,8 @@ var require_package = __commonJS((exports, module) => {
       "dist/"
     ],
     dependencies: {
-      "@opentui/core": "^0.1.88",
-      "ghostty-opentui": "^1.4.7"
+      "@opentui/core": "^0.4.1",
+      "ghostty-opentui": "^1.5.0"
     },
     devDependencies: {
       "@biomejs/biome": "^2.4.4",
@@ -602,9 +939,6 @@ var require_package = __commonJS((exports, module) => {
       "@commitlint/config-conventional": "^20.4.2",
       "@types/bun": "^1.3.9",
       "marked-man": "^2.1.0"
-    },
-    patchedDependencies: {
-      "ghostty-opentui@1.4.7": "patches/ghostty-opentui@1.4.7.patch"
     }
   };
 });
@@ -876,6 +1210,20 @@ var FLAGS = [
     valueName: "<path>",
     completionHint: "directory"
   },
+  {
+    type: "value",
+    long: "--theme",
+    key: "theme",
+    description: "TUI theme (auto detects terminal background)",
+    valueName: "<light|dark|auto>",
+    completionHint: "none",
+    parse(raw, flag) {
+      if (raw !== "light" && raw !== "dark" && raw !== "auto") {
+        throw new Error(`${flag} must be light, dark, or auto. Got "${raw}"`);
+      }
+      return raw;
+    }
+  },
   {
     type: "boolean",
     long: "--debug",
@@ -1704,10 +2052,11 @@ function resolveColor(color) {
     return color[0];
   return;
 }
-function buildProcessColorMap(names, config) {
+function buildProcessColorMap(names, config, palette = DEFAULT_PALETTE) {
   const map = new Map;
   if ("NO_COLOR" in process.env)
     return map;
+  const ansiPalette = palette === DEFAULT_PALETTE ? DEFAULT_ANSI_COLORS : palette.map(hexToAnsi);
   let paletteIndex = 0;
   for (const name of names) {
     const explicit = resolveColor(config.processes[name]?.color);
@@ -1716,15 +2065,15 @@ function buildProcessColorMap(names, config) {
       if (hex)
         map.set(name, hexToAnsi(hex));
       else
-        map.set(name, DEFAULT_ANSI_COLORS[paletteIndex++ % DEFAULT_ANSI_COLORS.length]);
+        map.set(name, ansiPalette[paletteIndex++ % ansiPalette.length]);
     } else {
-      map.set(name, DEFAULT_ANSI_COLORS[paletteIndex % DEFAULT_ANSI_COLORS.length]);
+      map.set(name, ansiPalette[paletteIndex % ansiPalette.length]);
       paletteIndex++;
     }
   }
   return map;
 }
-function buildProcessHexColorMap(names, config) {
+function buildProcessHexColorMap(names, config, palette = DEFAULT_PALETTE) {
   const map = new Map;
   if ("NO_COLOR" in process.env)
     return map;
@@ -1736,9 +2085,9 @@ function buildProcessHexColorMap(names, config) {
       if (hex)
         map.set(name, hex);
       else
-        map.set(name, DEFAULT_PALETTE[paletteIndex++ % DEFAULT_PALETTE.length]);
+        map.set(name, palette[paletteIndex++ % palette.length]);
     } else {
-      map.set(name, DEFAULT_PALETTE[paletteIndex % DEFAULT_PALETTE.length]);
+      map.set(name, palette[paletteIndex % palette.length]);
       paletteIndex++;
     }
   }
@@ -1783,6 +2132,7 @@ function validateConfig(raw, _warnings) {
   const killOthersOnFail = config.killOthersOnFail === true ? true : undefined;
   const noWatch = config.noWatch === true ? true : undefined;
   const logDir = typeof config.logDir === "string" && config.logDir.trim() ? config.logDir.trim() : undefined;
+  const theme = validateTheme(config.theme);
   const validated = {};
   for (const name of names) {
     let proc = processes[name];
@@ -1881,9 +2231,19 @@ function validateConfig(raw, _warnings) {
     ...killOthersOnFail ? { killOthersOnFail } : {},
     ...noWatch ? { noWatch } : {},
     ...logDir ? { logDir } : {},
+    ...theme ? { theme } : {},
     processes: validated
   };
 }
+var VALID_THEME_VALUES = new Set(["light", "dark", "auto"]);
+function validateTheme(value) {
+  if (value === undefined)
+    return;
+  if (typeof value !== "string" || !VALID_THEME_VALUES.has(value)) {
+    throw new Error(`theme must be one of: light, dark, auto. Got "${String(value)}"`);
+  }
+  return value;
+}
 function validateStringOrStringArray(value) {
   if (typeof value === "string")
     return value;
@@ -2949,6 +3309,178 @@ function setupShutdownHandlers(app, logWriter) {
   });
 }
 
+// src/utils/theme.ts
+var DARK_THEME = {
+  mode: "dark",
+  statusBarBg: "#1a1a1a",
+  statusBarText: "#cccccc",
+  helpBackdropBg: "#000000",
+  helpBoxBg: "#1a1a2e",
+  helpBorder: "#444444",
+  helpText: "#cccccc",
+  sidebarBg: "#1a1a1a",
+  sidebarBorder: "#444444",
+  tabSelectedBg: "#334455",
+  tabSelectedText: "#ffffff",
+  tabText: "#888888",
+  tabDescriptionText: "#888888",
+  tabSelectedDescriptionText: "#cccccc",
+  scrollTrackBg: "#252527",
+  scrollThumbBg: "#9a9ea3",
+  searchCurrentBg: "#b58900",
+  searchMatchBg: "#073642",
+  palette: ["#00cccc", "#cccc00", "#cc00cc", "#5577ff", "#00cc00", "#ff5555", "#ffa500", "#cc88ff"],
+  status: {
+    ready: "#00cc00",
+    failed: "#ff5555",
+    stopped: "#888888",
+    finished: "#66aa66",
+    skipped: "#888888"
+  },
+  inputWaiting: "#ffaa00",
+  errorIndicator: "#ff5555",
+  searchMatchTab: "#b58900",
+  iconDefault: "#888888"
+};
+var LIGHT_THEME = {
+  mode: "light",
+  statusBarBg: "#e8e8e8",
+  statusBarText: "#000000",
+  helpBackdropBg: "#ffffff",
+  helpBoxBg: "#f5f5f5",
+  helpBorder: "#aaaaaa",
+  helpText: "#1a1a1a",
+  sidebarBg: "#f0f0f0",
+  sidebarBorder: "#aaaaaa",
+  tabSelectedBg: "#7a9bbf",
+  tabSelectedText: "#ffffff",
+  tabText: "#444444",
+  tabDescriptionText: "#666666",
+  tabSelectedDescriptionText: "#e8e8e8",
+  scrollTrackBg: "#d0d0d0",
+  scrollThumbBg: "#888888",
+  searchCurrentBg: "#ffaa33",
+  searchMatchBg: "#d0e4b8",
+  palette: ["#008888", "#886600", "#880088", "#0033aa", "#006600", "#aa0000", "#cc5500", "#6622aa"],
+  status: {
+    ready: "#006600",
+    failed: "#aa0000",
+    stopped: "#666666",
+    finished: "#2a7a2a",
+    skipped: "#666666"
+  },
+  inputWaiting: "#cc7a00",
+  errorIndicator: "#aa0000",
+  searchMatchTab: "#cc7a00",
+  iconDefault: "#666666"
+};
+function themeFor(mode) {
+  return mode === "light" ? LIGHT_THEME : DARK_THEME;
+}
+function relativeLuminance(r, g, b) {
+  const norm = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * norm(r) + 0.7152 * norm(g) + 0.0722 * norm(b);
+}
+function isLightRgb(r, g, b) {
+  return relativeLuminance(r, g, b) > 0.5;
+}
+function parseOSC11Response(data) {
+  const match = data.match(/rgb:([0-9a-f]+)\/([0-9a-f]+)\/([0-9a-f]+)/i);
+  if (!match)
+    return null;
+  const scale = (hex) => {
+    if (hex.length === 0 || hex.length > 4)
+      return Number.NaN;
+    const val = Number.parseInt(hex, 16);
+    if (Number.isNaN(val))
+      return Number.NaN;
+    const max = 16 ** hex.length - 1;
+    return Math.round(val / max * 255);
+  };
+  const r = scale(match[1]);
+  const g = scale(match[2]);
+  const b = scale(match[3]);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b))
+    return null;
+  return { r, g, b };
+}
+function parseColorFgBg(value) {
+  if (!value)
+    return null;
+  const parts = value.split(";");
+  if (parts.length < 2)
+    return null;
+  const bgRaw = parts[parts.length - 1].trim();
+  const bg = Number.parseInt(bgRaw, 10);
+  if (Number.isNaN(bg))
+    return null;
+  return bg >= 7 && bg <= 15 ? "light" : "dark";
+}
+function queryOSC11(timeoutMs = 100) {
+  const stdin = process.stdin;
+  const stdout = process.stdout;
+  if (!(stdin.isTTY && stdout.isTTY))
+    return Promise.resolve(null);
+  return new Promise((resolve8) => {
+    let settled = false;
+    let buf = "";
+    let timer = null;
+    const wasRaw = stdin.isRaw;
+    const finish = (result) => {
+      if (settled)
+        return;
+      settled = true;
+      if (timer)
+        clearTimeout(timer);
+      stdin.off("data", onData);
+      try {
+        if (!wasRaw)
+          stdin.setRawMode(false);
+      } catch {}
+      stdin.pause();
+      resolve8(result);
+    };
+    const onData = (chunk) => {
+      buf += chunk.toString("utf8");
+      const match = buf.match(/\x1b\]1[01];rgb:[0-9a-f/]+(?:\x07|\x1b\\)/i);
+      if (!match)
+        return;
+      const parsed = parseOSC11Response(match[0]);
+      if (!parsed) {
+        finish(null);
+        return;
+      }
+      finish(isLightRgb(parsed.r, parsed.g, parsed.b) ? "light" : "dark");
+    };
+    try {
+      stdin.setRawMode(true);
+      stdin.resume();
+      stdin.on("data", onData);
+      timer = setTimeout(() => finish(null), timeoutMs);
+      stdout.write("\x1B]11;?\x1B\\");
+    } catch {
+      finish(null);
+    }
+  });
+}
+async function detectThemeMode(timeoutMs = 100) {
+  const osc = await queryOSC11(timeoutMs);
+  if (osc)
+    return osc;
+  return parseColorFgBg(process.env.COLORFGBG);
+}
+async function resolveTheme(pref = "auto") {
+  if (pref === "light")
+    return LIGHT_THEME;
+  if (pref === "dark")
+    return DARK_THEME;
+  const detected = await detectThemeMode();
+  return themeFor(detected ?? "dark");
+}
+
 // src/ui/help-overlay.ts
 import { BoxRenderable, TextRenderable } from "@opentui/core";
 
@@ -3002,7 +3534,7 @@ var STATUS_BAR_TEXT = STATUS_HINTS_COMPACT.map((h) => {
 class HelpOverlay {
   renderable;
   textRenderable;
-  constructor(renderer) {
+  constructor(renderer, theme = DARK_THEME) {
     this.renderable = new BoxRenderable(renderer, {
       id: "help-overlay",
       position: "absolute",
@@ -3018,7 +3550,7 @@ class HelpOverlay {
       position: "absolute",
       width: "100%",
       height: "100%",
-      backgroundColor: "#000000",
+      backgroundColor: theme.helpBackdropBg,
       opacity: 0.7
     });
     const box = new BoxRenderable(renderer, {
@@ -3026,9 +3558,9 @@ class HelpOverlay {
       flexDirection: "column",
       padding: 1,
       paddingX: 5,
-      backgroundColor: "#1a1a2e",
+      backgroundColor: theme.helpBoxBg,
       border: true,
-      borderColor: "#444",
+      borderColor: theme.helpBorder,
       zIndex: 101
     });
     const lines = [
@@ -3045,7 +3577,7 @@ class HelpOverlay {
       id: "help-text",
       content: lines.join(`
 `),
-      fg: "#cccccc"
+      fg: theme.helpText
     });
     box.add(this.textRenderable);
     this.renderable.add(backdrop);
@@ -3085,6 +3617,7 @@ function resolveTimestampFormat(timestamps) {
 }
 
 // node_modules/ghostty-opentui/src/terminal-buffer.ts
+var import_wcwidth = __toESM(require_wcwidth(), 1);
 import {
   TextBufferRenderable,
   StyledText,
@@ -3093,6 +3626,22 @@ import {
 import { ptyToJson, PersistentTerminal, hasPersistentTerminalSupport, StyleFlags } from "ghostty-opentui";
 var DEFAULT_FG = RGBA.fromHex("#d4d4d4");
 var DEFAULT_BG = RGBA.fromHex("#1e1e1e");
+function getChunkCellWidth(chunk) {
+  return "cellWidth" in chunk && typeof chunk.cellWidth === "number" ? chunk.cellWidth : import_wcwidth.default(chunk.text);
+}
+function cellColToStringIndex(text, cellCol) {
+  if (cellCol <= 0)
+    return 0;
+  let col = 0;
+  let strIdx = 0;
+  for (const ch of text) {
+    if (col >= cellCol)
+      break;
+    col += import_wcwidth.default(ch);
+    strIdx += ch.length;
+  }
+  return strIdx;
+}
 var TextAttributes = {
   BOLD: 1 << 0,
   DIM: 1 << 1,
@@ -3103,8 +3652,11 @@ var TextAttributes = {
   HIDDEN: 1 << 6,
   STRIKETHROUGH: 1 << 7
 };
+function getLineStarts(lineInfo) {
+  return lineInfo.lineStarts ?? lineInfo.lineStartCols ?? [];
+}
 function convertSpanToChunk(span) {
-  const { text, fg, bg, flags } = span;
+  const { text, fg, bg, flags, width } = span;
   let fgColor = fg ? RGBA.fromHex(fg) : DEFAULT_FG;
   let bgColor = bg ? RGBA.fromHex(bg) : undefined;
   if (flags & StyleFlags.INVERSE) {
@@ -3123,7 +3675,7 @@ function convertSpanToChunk(span) {
     attributes |= TextAttributes.STRIKETHROUGH;
   if (flags & StyleFlags.FAINT)
     attributes |= TextAttributes.DIM;
-  return { __isChunk: true, text, fg: fgColor, bg: bgColor, attributes };
+  return { __isChunk: true, text, fg: fgColor, bg: bgColor, attributes, cellWidth: width };
 }
 function applyHighlightsToLine(chunks, highlights) {
   if (highlights.length === 0)
@@ -3131,63 +3683,56 @@ function applyHighlightsToLine(chunks, highlights) {
   const result = [];
   let col = 0;
   for (const chunk of chunks) {
+    const w = getChunkCellWidth(chunk);
     const chunkStart = col;
-    const chunkEnd = col + chunk.text.length;
-    const overlappingHighlights = highlights.filter((hl) => hl.start < chunkEnd && hl.end > chunkStart);
-    if (overlappingHighlights.length === 0) {
+    const chunkEnd = col + w;
+    const overlapping = highlights.filter((hl) => hl.start < chunkEnd && hl.end > chunkStart).sort((a, b) => a.start - b.start);
+    if (overlapping.length === 0) {
       result.push(chunk);
       col = chunkEnd;
       continue;
     }
-    let pos = 0;
-    const text = chunk.text;
-    const sortedHighlights = [...overlappingHighlights].sort((a, b) => a.start - b.start);
-    for (const hl of sortedHighlights) {
-      const hlStartInChunk = Math.max(0, hl.start - chunkStart);
-      const hlEndInChunk = Math.min(text.length, hl.end - chunkStart);
-      if (pos < hlStartInChunk) {
-        result.push({
-          __isChunk: true,
-          text: text.slice(pos, hlStartInChunk),
-          fg: chunk.fg,
-          bg: chunk.bg,
-          attributes: chunk.attributes
-        });
+    let cellPos = 0;
+    for (const hl of overlapping) {
+      const hlStartLocal = Math.max(0, hl.start - chunkStart);
+      const hlEndLocal = Math.min(w, hl.end - chunkStart);
+      if (cellPos < hlStartLocal) {
+        const startStr = cellColToStringIndex(chunk.text, cellPos);
+        const endStr = cellColToStringIndex(chunk.text, hlStartLocal);
+        result.push({ ...chunk, text: chunk.text.slice(startStr, endStr), cellWidth: hlStartLocal - cellPos });
       }
-      if (hlStartInChunk < hlEndInChunk) {
-        const highlightedText = text.slice(hlStartInChunk, hlEndInChunk);
-        const displayText = hl.replaceWithX ? "x".repeat(highlightedText.length) : highlightedText;
+      if (hlStartLocal < hlEndLocal) {
+        const startStr = cellColToStringIndex(chunk.text, hlStartLocal);
+        const endStr = cellColToStringIndex(chunk.text, hlEndLocal);
+        const hlText = chunk.text.slice(startStr, endStr);
+        const cellWidth = hlEndLocal - hlStartLocal;
         result.push({
-          __isChunk: true,
-          text: displayText,
-          fg: chunk.fg,
+          ...chunk,
+          text: hl.replaceWithX ? "x".repeat(cellWidth) : hlText,
           bg: RGBA.fromHex(hl.backgroundColor),
-          attributes: chunk.attributes
+          cellWidth
         });
       }
-      pos = hlEndInChunk;
-    }
-    if (pos < text.length) {
-      result.push({
-        __isChunk: true,
-        text: text.slice(pos),
-        fg: chunk.fg,
-        bg: chunk.bg,
-        attributes: chunk.attributes
-      });
+      cellPos = hlEndLocal;
+    }
+    if (cellPos < w) {
+      const startStr = cellColToStringIndex(chunk.text, cellPos);
+      result.push({ ...chunk, text: chunk.text.slice(startStr), cellWidth: w - cellPos });
     }
     col = chunkEnd;
   }
   return result;
 }
 function makeCursorChunk(char, style, original) {
+  const cellWidth = Math.max(1, import_wcwidth.default(char));
   if (style === "block") {
     return {
       __isChunk: true,
       text: char,
       fg: original?.bg || RGBA.fromHex("#1e1e1e"),
       bg: original?.fg || DEFAULT_FG,
-      attributes: original?.attributes ?? 0
+      attributes: original?.attributes ?? 0,
+      cellWidth
     };
   }
   return {
@@ -3195,30 +3740,35 @@ function makeCursorChunk(char, style, original) {
     text: char,
     fg: original?.fg || DEFAULT_FG,
     bg: original?.bg,
-    attributes: (original?.attributes ?? 0) | TextAttributes.UNDERLINE
+    attributes: (original?.attributes ?? 0) | TextAttributes.UNDERLINE,
+    cellWidth
   };
 }
 function applyCursorToLine(chunks, cursorX, cursorStyle) {
-  const totalLen = chunks.reduce((sum, c) => sum + c.text.length, 0);
+  const totalLen = chunks.reduce((sum, chunk) => sum + getChunkCellWidth(chunk), 0);
   if (cursorX >= totalLen) {
     const gap = cursorX - totalLen;
     if (gap > 0) {
-      return [...chunks, { __isChunk: true, text: " ".repeat(gap), attributes: 0 }, makeCursorChunk(" ", cursorStyle)];
+      return [...chunks, { __isChunk: true, text: " ".repeat(gap), attributes: 0, cellWidth: gap }, makeCursorChunk(" ", cursorStyle)];
     }
     return [...chunks, makeCursorChunk(" ", cursorStyle)];
   }
   const result = [];
   let col = 0;
   for (const chunk of chunks) {
-    const chunkEnd = col + chunk.text.length;
+    const w = getChunkCellWidth(chunk);
+    const chunkEnd = col + w;
     if (cursorX >= col && cursorX < chunkEnd) {
-      const pos = cursorX - col;
-      if (pos > 0) {
-        result.push({ ...chunk, text: chunk.text.slice(0, pos) });
+      const localCol = cursorX - col;
+      const strIdx = cellColToStringIndex(chunk.text, localCol);
+      const cursorChar = String.fromCodePoint(chunk.text.codePointAt(strIdx));
+      const strEnd = strIdx + cursorChar.length;
+      if (strIdx > 0) {
+        result.push({ ...chunk, text: chunk.text.slice(0, strIdx) });
       }
-      result.push(makeCursorChunk(chunk.text[pos], cursorStyle, chunk));
-      if (pos + 1 < chunk.text.length) {
-        result.push({ ...chunk, text: chunk.text.slice(pos + 1) });
+      result.push(makeCursorChunk(cursorChar, cursorStyle, chunk));
+      if (strEnd < chunk.text.length) {
+        result.push({ ...chunk, text: chunk.text.slice(strEnd) });
       }
     } else {
       result.push(chunk);
@@ -3273,7 +3823,13 @@ class GhosttyTerminalRenderable extends TextBufferRenderable {
   _ansiDirty = false;
   _lineCount = 0;
   _showCursor = false;
-  _cursorStyle = "block";
+  _cursorStyle = undefined;
+  _renderCursor = {
+    x: 0,
+    y: 0,
+    visible: false,
+    style: "default"
+  };
   _persistent = false;
   _persistentTerminal = null;
   constructor(ctx, options) {
@@ -3290,7 +3846,10 @@ class GhosttyTerminalRenderable extends TextBufferRenderable {
     this._highlights = options.highlights;
     this._persistent = options.persistent ?? false;
     this._showCursor = options.showCursor ?? false;
-    this._cursorStyle = options.cursorStyle ?? "block";
+    this._cursorStyle = options.cursorStyle;
+    if (options.focusable) {
+      this._focusable = true;
+    }
     if (this._persistent && hasPersistentTerminalSupport()) {
       this._persistentTerminal = new PersistentTerminal({
         cols: this._cols,
@@ -3434,6 +3993,35 @@ class GhosttyTerminalRenderable extends TextBufferRenderable {
     }
     super.destroy();
   }
+  onRemove() {
+    if (this._focused || !this._focusable) {
+      this.hideTerminalCursor();
+    }
+  }
+  hideTerminalCursor() {
+    this.ctx.setCursorPosition(0, 0, false);
+  }
+  renderTerminalCursor() {
+    if (!this._renderCursor.visible || this._focusable && !this._focused) {
+      this.hideTerminalCursor();
+      return;
+    }
+    const style = this._cursorStyle ?? this._renderCursor.style;
+    this.ctx.setCursorStyle({
+      style,
+      blinking: false
+    });
+    this.ctx.setCursorPosition(this.x + this._renderCursor.x + 1, this.y + this._renderCursor.y + 1, true);
+  }
+  focus() {
+    super.focus();
+    this.requestRender();
+  }
+  blur() {
+    super.blur();
+    this.hideTerminalCursor();
+    this.requestRender();
+  }
   renderSelf(buffer) {
     if (this._ansiDirty) {
       let data;
@@ -3457,26 +4045,29 @@ class GhosttyTerminalRenderable extends TextBufferRenderable {
           data.lines.pop();
         }
       }
-      const cursor = this._showCursor ? {
-        x: data.cursor[0],
-        y: Math.max(0, data.totalLines - data.rows + data.cursor[1] - data.offset),
-        style: this._cursorStyle
-      } : undefined;
-      const styledText = terminalDataToStyledText(data, this._highlights, cursor);
-      this.textBuffer.setStyledText(styledText);
+      this.textBuffer.setStyledText(terminalDataToStyledText(data, this._highlights));
       this.updateTextInfo();
-      const lineInfo = this.textBufferView.logicalLineInfo;
-      if (lineInfo) {
-        this._lineCount = lineInfo.lineStartCols?.length ?? lineInfo.lineStarts?.length ?? this._lineCount;
+      if (this._showCursor) {
+        const cursorY = Math.max(0, data.totalLines - data.rows + data.cursor[1] - data.offset);
+        this._renderCursor.x = data.cursor[0];
+        this._renderCursor.y = cursorY;
+        this._renderCursor.visible = data.cursorVisible && cursorY < data.lines.length;
+        const ts = data.cursorStyle;
+        this._renderCursor.style = ts === "default" ? "default" : ts === "bar" ? "line" : ts === "underline" ? "underline" : "block";
+      } else {
+        this._renderCursor.visible = false;
       }
+      const lineInfo = this.textBufferView.logicalLineInfo;
+      this._lineCount = getLineStarts(lineInfo).length;
       this._ansiDirty = false;
     }
     super.renderSelf(buffer);
+    this.renderTerminalCursor();
   }
   getScrollPositionForLine(lineNumber) {
     const clampedLine = Math.max(0, Math.min(lineNumber, this._lineCount - 1));
     const lineInfo = this.textBufferView.logicalLineInfo;
-    const lineStarts = lineInfo?.lineStartCols ?? lineInfo?.lineStarts;
+    const lineStarts = getLineStarts(lineInfo);
     let lineYOffset = clampedLine;
     if (lineStarts && lineStarts.length > clampedLine) {
       lineYOffset = lineStarts[clampedLine];
@@ -3484,13 +4075,6 @@ class GhosttyTerminalRenderable extends TextBufferRenderable {
     return this.y + lineYOffset;
   }
 }
-var EMPTY_LINE_INFO = { lineStarts: [], lineStartCols: [], lineWidthColsMax: 0, lineSources: [] };
-Object.defineProperty(GhosttyTerminalRenderable.prototype, "lineInfo", {
-  get() {
-    return this.textBufferView?.logicalLineInfo ?? EMPTY_LINE_INFO;
-  },
-  configurable: true
-});
 
 // src/ui/tailing-terminal.ts
 class TailingTerminal extends GhosttyTerminalRenderable {
@@ -3576,8 +4160,10 @@ class Pane {
   _onScroll = null;
   _onCopy = null;
   _onLinkClick = null;
-  constructor(renderer, name, cols, rows, interactive = false) {
+  theme;
+  constructor(renderer, name, cols, rows, interactive = false, theme = DARK_THEME) {
     this.renderer = renderer;
+    this.theme = theme;
     this.scrollBox = new ScrollBoxRenderable(renderer, {
       id: `pane-${name}`,
       flexGrow: 1,
@@ -3585,7 +4171,13 @@ class Pane {
       stickyScroll: true,
       stickyStart: "bottom",
       visible: false,
-      onMouseScroll: () => this._onScroll?.()
+      onMouseScroll: () => this._onScroll?.(),
+      scrollbarOptions: {
+        trackOptions: {
+          backgroundColor: theme.scrollTrackBg,
+          foregroundColor: theme.scrollThumbBg
+        }
+      }
     });
     this.terminal = new TailingTerminal(renderer, {
       id: `term-${name}`,
@@ -3721,7 +4313,7 @@ class Pane {
         line: m.line,
         start: m.start,
         end: m.end,
-        backgroundColor: i === currentIndex ? "#b58900" : "#073642"
+        backgroundColor: i === currentIndex ? this.theme.searchCurrentBg : this.theme.searchMatchBg
       });
     }
     this.terminal.highlights = regions;
@@ -4026,11 +4618,11 @@ class StatusBar {
   _tempMessage = null;
   _tempTimer = null;
   _inputMode = false;
-  constructor(renderer) {
+  constructor(renderer, theme = DARK_THEME) {
     this.renderable = new BoxRenderable2(renderer, {
       id: "status-bar",
       width: "100%",
-      backgroundColor: "#1a1a1a",
+      backgroundColor: theme.statusBarBg,
       paddingX: 1,
       minHeight: 1
     });
@@ -4038,6 +4630,7 @@ class StatusBar {
       id: "status-bar-text",
       width: "100%",
       wrapMode: "word",
+      fg: theme.statusBarText,
       content: this.buildContent()
     });
     this.text.selectable = false;
@@ -4123,13 +4716,15 @@ var STATUS_ICONS = {
   failed: "\u2716",
   skipped: "\u2298"
 };
-var STATUS_ICON_HEX = {
-  ready: "#00cc00",
-  finished: "#66aa66",
-  failed: "#ff5555",
-  stopped: "#888888",
-  skipped: "#888888"
-};
+function getStatusIconHex(theme) {
+  return {
+    ready: theme.status.ready,
+    finished: theme.status.finished,
+    failed: theme.status.failed,
+    stopped: theme.status.stopped,
+    skipped: theme.status.skipped
+  };
+}
 var TERMINAL_STATUSES = new Set(["finished", "stopped", "failed", "skipped"]);
 function getDisplayOrder(originalNames, statuses) {
   const active = originalNames.filter((n) => !TERMINAL_STATUSES.has(statuses.get(n)));
@@ -4149,16 +4744,17 @@ function formatDescription(status, exitCode, restartCount) {
   }
   return desc;
 }
-function resolveOptionColors(names, statuses, processColors, inputWaiting, erroredProcesses, searchMatchProcesses) {
+function resolveOptionColors(names, statuses, processColors, inputWaiting, erroredProcesses, theme, searchMatchProcesses) {
+  const statusIconHex = getStatusIconHex(theme);
   return names.map((name) => {
     const status = statuses.get(name);
     const waiting = inputWaiting.has(name);
     const errored = erroredProcesses.has(name);
     const hasSearchMatch = searchMatchProcesses?.has(name);
-    const statusHex = hasSearchMatch ? "#b58900" : waiting ? "#ffaa00" : errored ? "#ff5555" : STATUS_ICON_HEX[status];
+    const statusHex = hasSearchMatch ? theme.searchMatchTab : waiting ? theme.inputWaiting : errored ? theme.errorIndicator : statusIconHex[status];
     const processHex = processColors.get(name);
     return {
-      iconHex: statusHex ?? processHex ?? "#888888",
+      iconHex: statusHex ?? processHex ?? theme.iconDefault,
       nameHex: processHex ?? null
     };
   });
@@ -4242,13 +4838,15 @@ class TabBar {
   inputWaiting = new Set;
   erroredProcesses = new Set;
   searchMatchCounts = new Map;
-  constructor(renderer, names, colors, reorderByStatus = false) {
+  theme;
+  constructor(renderer, names, colors, theme = DARK_THEME, reorderByStatus = false) {
     this.originalNames = names;
     this.names = [...names];
     this.reorderByStatus = reorderByStatus;
     this.statuses = new Map(names.map((n) => [n, "pending"]));
     this.baseDescriptions = new Map(names.map((n) => [n, "pending"]));
     this.processColors = colors ?? new Map;
+    this.theme = theme;
     this.renderable = new ColoredSelectRenderable(renderer, {
       id: "tab-bar",
       width: "100%",
@@ -4257,9 +4855,13 @@ class TabBar {
         name: formatTab(n, "pending"),
         description: "pending"
       })),
-      selectedBackgroundColor: "#334455",
-      selectedTextColor: "#fff",
-      textColor: "#888",
+      backgroundColor: theme.sidebarBg,
+      focusedBackgroundColor: theme.sidebarBg,
+      selectedBackgroundColor: theme.tabSelectedBg,
+      selectedTextColor: theme.tabSelectedText,
+      textColor: theme.tabText,
+      descriptionColor: theme.tabDescriptionText,
+      selectedDescriptionColor: theme.tabSelectedDescriptionText,
       showDescription: true,
       wrapSelection: true
     });
@@ -4343,7 +4945,7 @@ class TabBar {
   }
   updateOptionColors() {
     const searchProcesses = this.searchMatchCounts.size > 0 ? new Set(this.searchMatchCounts.keys()) : undefined;
-    const resolved = resolveOptionColors(this.names, this.statuses, this.processColors, this.inputWaiting, this.erroredProcesses, searchProcesses);
+    const resolved = resolveOptionColors(this.names, this.statuses, this.processColors, this.inputWaiting, this.erroredProcesses, this.theme, searchProcesses);
     const colors = resolved.map((c) => ({
       icon: parseColor(c.iconHex),
       name: c.nameHex ? parseColor(c.nameHex) : null
@@ -4376,6 +4978,7 @@ class App {
   sidebarWidth = 20;
   config;
   logWriter;
+  theme = DARK_THEME;
   resizeTimer = null;
   inputWaitTimers = new Map;
   awaitingInput = new Set;
@@ -4386,6 +4989,9 @@ class App {
     this.names = manager.getProcessNames();
   }
   async start() {
+    log(`theme detect: pref=${this.config.theme ?? "auto"} stdin.isTTY=${process.stdin.isTTY} stdout.isTTY=${process.stdout.isTTY} COLORFGBG=${process.env.COLORFGBG ?? "(unset)"}`);
+    this.theme = await resolveTheme(this.config.theme);
+    log(`theme resolved: ${this.theme.mode}`);
     this.renderer = await createCliRenderer({
       exitOnCtrlC: false,
       useMouse: true,
@@ -4404,8 +5010,8 @@ class App {
       height: "100%",
       border: false
     });
-    const processHexColors = buildProcessHexColorMap(this.names, this.config);
-    this.tabBar = new TabBar(this.renderer, this.names, processHexColors, this.config.sort === "status");
+    const processHexColors = buildProcessHexColorMap(this.names, this.config, this.theme.palette);
+    this.tabBar = new TabBar(this.renderer, this.names, processHexColors, this.theme, this.config.sort === "status");
     const contentRow = new BoxRenderable3(this.renderer, {
       id: "content-row",
       flexDirection: "row",
@@ -4418,7 +5024,8 @@ class App {
       width: this.sidebarWidth,
       height: "100%",
       border: ["right"],
-      borderColor: "#444"
+      borderColor: this.theme.sidebarBorder,
+      backgroundColor: this.theme.sidebarBg
     });
     sidebar.add(this.tabBar.renderable);
     const paneContainer = new BoxRenderable3(this.renderer, {
@@ -4426,8 +5033,8 @@ class App {
       flexGrow: 1,
       border: false
     });
-    this.statusBar = new StatusBar(this.renderer);
-    this.helpOverlay = new HelpOverlay(this.renderer);
+    this.statusBar = new StatusBar(this.renderer, this.theme);
+    this.helpOverlay = new HelpOverlay(this.renderer, this.theme);
     this.search = new SearchController({
       logWriter: this.logWriter,
       statusBar: this.statusBar,
@@ -4437,7 +5044,7 @@ class App {
     });
     for (const name of this.names) {
       const interactive = this.config.processes[name].interactive === true;
-      const pane = new Pane(this.renderer, name, termCols, termRows, interactive);
+      const pane = new Pane(this.renderer, name, termCols, termRows, interactive, this.theme);
       if (this.config.timestamps) {
         pane.setTimestamps(this.config.timestamps);
       }
@@ -5455,6 +6062,9 @@ async function main() {
   if (parsed.only || parsed.exclude) {
     config = filterConfig(config, parsed.only, parsed.exclude);
   }
+  if (parsed.theme) {
+    config.theme = parsed.theme;
+  }
   if (parsed.autoColors) {
     for (const [name, proc] of Object.entries(config.processes)) {
       if (!proc.color) {