mixdog 0.9.43 → 0.9.44

package/src/tui/index.jsx

@@ -15,6 +15,7 @@ import { App } from './App.jsx';
 import { createEngineSession } from './engine.mjs';
 import { scheduleRenderFrameAck } from './engine/render-timing.mjs';
 import { installProcessSignalCleanup } from '../runtime/shared/process-shutdown.mjs';
+import { rgbSgr } from '../ui/ansi.mjs';
 import { emitTerminalBackground, loadThemeSettingFromConfig, theme } from './theme.mjs';
 import { POP_KITTY, DISABLE_MODIFY_OTHER_KEYS } from './keyboard-protocol.mjs';
 import { displayWidth } from './display-width.mjs';
@@ -259,10 +260,10 @@ function resolveTuiStderrLogPath() {
     || join(process.env.MIXDOG_RUNTIME_ROOT || join(tmpdir(), 'mixdog'), 'mixdog-tui.stderr.log');
 }
 
-/** `rgb(r,g,b)` → truecolor SGR prefix ('' when unparsable). */
+/** `rgb(r,g,b)` → supported RGB SGR prefix ('' when unparsable). */
 function ansiFg(rgb) {
   const m = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/.exec(String(rgb || ''));
-  return m ? `\x1b[38;2;${m[1]};${m[2]};${m[3]}m` : '';
+  return m ? rgbSgr(m[1], m[2], m[3]) : '';
 }
 
 /**

package/src/tui/markdown/streaming-markdown.mjs

@@ -7,6 +7,8 @@ import { configureMarked, hasMarkdownSyntax } from './render-ansi.mjs';
 import { trimPartialClosingFences, findOpenFenceStart } from './stream-fence.mjs';
 
 const stablePrefixByStreamKey = new Map();
+// Reuse the current normalized-text split across measure → render → harvest.
+const resolvedPartsByStreamKey = new Map();
 const STABLE_PREFIX_LRU_MAX = 32;
 
 /** Lockstep with App streaming row estimate (leading/trailing newline trim). */
@@ -37,6 +39,25 @@ function getStablePrefixKey(key) {
   return value;
 }
 
+function getResolvedPartsKey(key, text) {
+  if (!key) return null;
+  const entry = resolvedPartsByStreamKey.get(key);
+  if (!entry || entry.text !== text) return null;
+  return entry.parts;
+}
+
+function cacheResolvedPartsKey(key, text, parts) {
+  if (!key) return parts;
+  if (resolvedPartsByStreamKey.has(key)) resolvedPartsByStreamKey.delete(key);
+  resolvedPartsByStreamKey.set(key, { text, parts });
+  while (resolvedPartsByStreamKey.size > STABLE_PREFIX_LRU_MAX) {
+    const oldest = resolvedPartsByStreamKey.keys().next().value;
+    if (oldest === undefined) break;
+    resolvedPartsByStreamKey.delete(oldest);
+  }
+  return parts;
+}
+
 function hasOpenFence(text) {
   let ticks = 0;
   let tildes = 0;
@@ -93,35 +114,40 @@ export function balanceStreamingMarkdown(text) {
 
 export function resetStreamingMarkdownStablePrefix(streamKey) {
   if (streamKey == null || streamKey === '') return;
-  stablePrefixByStreamKey.delete(String(streamKey));
+  const key = String(streamKey);
+  stablePrefixByStreamKey.delete(key);
+  resolvedPartsByStreamKey.delete(key);
 }
 
 export function resetAllStreamingMarkdownStablePrefixes() {
   stablePrefixByStreamKey.clear();
+  resolvedPartsByStreamKey.clear();
 }
 
 export function resolveStreamingMarkdownParts(text, streamKey) {
   const t = streamingLayoutText(text);
   const key = streamKey == null || streamKey === '' ? null : String(streamKey);
+  const cachedParts = getResolvedPartsKey(key, t);
+  if (cachedParts) return cachedParts;
 
   if (!t) {
     if (key) stablePrefixByStreamKey.delete(key);
-    return {
+    return cacheResolvedPartsKey(key, t, {
       plain: true,
       stablePrefix: '',
       unstableSuffix: '',
       unstableForRender: '',
-    };
+    });
   }
 
   if (!hasMarkdownSyntax(t)) {
     if (key) stablePrefixByStreamKey.delete(key);
-    return {
+    return cacheResolvedPartsKey(key, t, {
       plain: true,
       stablePrefix: '',
       unstableSuffix: t,
       unstableForRender: t,
-    };
+    });
   }
 
   let stablePrefix = key ? getStablePrefixKey(key) : '';
@@ -141,13 +167,13 @@ export function resolveStreamingMarkdownParts(text, streamKey) {
     if (key && openPrefix) touchStablePrefixKey(key, openPrefix);
     else if (key) stablePrefixByStreamKey.delete(key);
     const unstableSuffix = t.substring(openPrefix.length);
-    return {
+    return cacheResolvedPartsKey(key, t, {
       plain: false,
       openFence: true,
       stablePrefix: openPrefix,
       unstableSuffix,
       unstableForRender: unstableSuffix,
-    };
+    });
   }
 
   try {
@@ -179,10 +205,10 @@ export function resolveStreamingMarkdownParts(text, streamKey) {
   if (isWhitespaceOnlyText(stablePrefix)) stablePrefix = '';
 
   const unstableSuffix = t.substring(stablePrefix.length);
-  return {
+  return cacheResolvedPartsKey(key, t, {
     plain: false,
     stablePrefix,
     unstableSuffix,
     unstableForRender: balanceStreamingMarkdown(unstableSuffix),
-  };
+  });
 }

package/src/tui/statusline-ansi-bridge.mjs

@@ -6,6 +6,8 @@
  * normalizes that at display time so `/theme` can re-tone without touching ui/.
  */
 
+import { rgbToAnsi256 } from '../ui/ansi.mjs';
+
 const RESET = '\x1b[0m';
 
 /** Truecolor SGR sequences emitted by the shared statusline stack (not theme). */
@@ -23,6 +25,14 @@ function truecolorSgr(r, g, b) {
   return `\x1b[38;2;${r};${g};${b}m`;
 }
 
+function ansi256Sgr(r, g, b) {
+  return `\x1b[38;5;${rgbToAnsi256(r, g, b)}m`;
+}
+
+function canonicalSgrVariants(rgb) {
+  return [truecolorSgr(...rgb), ansi256Sgr(...rgb)];
+}
+
 function footerLocalNum(value) {
   const n = Number(value);
   return Number.isFinite(n) ? n : 0;
@@ -139,13 +149,13 @@ export function applyDefaultStatusForegroundAfterReset(text, STATUS, reset = RES
 export function remapCanonicalStatuslineTruecolor(text, colors) {
   const c = STATUSLINE_CANONICAL_TRUECOLOR;
   const pairs = [
-    [truecolorSgr(...c.statusText), colors.STATUS],
-    [truecolorSgr(...c.subtle), colors.SUBTLE],
-    [truecolorSgr(...c.success), colors.SUCCESS],
-    [truecolorSgr(...c.successBright), colors.SUCCESS],
-    [truecolorSgr(...c.warning), colors.WARNING],
-    [truecolorSgr(...c.warningBright), colors.WARNING],
-    [truecolorSgr(...c.error), colors.ERROR],
+    ...canonicalSgrVariants(c.statusText).map((from) => [from, colors.STATUS]),
+    ...canonicalSgrVariants(c.subtle).map((from) => [from, colors.SUBTLE]),
+    ...canonicalSgrVariants(c.success).map((from) => [from, colors.SUCCESS]),
+    ...canonicalSgrVariants(c.successBright).map((from) => [from, colors.SUCCESS]),
+    ...canonicalSgrVariants(c.warning).map((from) => [from, colors.WARNING]),
+    ...canonicalSgrVariants(c.warningBright).map((from) => [from, colors.WARNING]),
+    ...canonicalSgrVariants(c.error).map((from) => [from, colors.ERROR]),
   ];
   let out = String(text || '');
   for (const [from, to] of pairs) {

package/src/ui/ansi.mjs

@@ -12,7 +12,7 @@
  * The decision is computed once at import time but can be recomputed via
  * `refreshColorSupport()` (used by tests / when output is rebound).
  */
-import { stdout, env } from 'node:process';
+import { stdout, env, platform } from 'node:process';
 
 let COLOR_ENABLED = computeColorEnabled();
 
@@ -39,12 +39,92 @@ export function colorEnabled() {
 const ESC = '\x1b[';
 const RESET = `${ESC}0m`;
 
+/**
+ * Whether the terminal can render 24-bit SGR colors.
+ *
+ * Apple Terminal is the one explicit negative because it advertises a normal
+ * xterm TERM while not implementing truecolor. Unknown terminals retain the
+ * historical truecolor default.
+ */
+export function supportsTruecolor(environment = env, platformName = platform) {
+  const termProgram = String(environment?.TERM_PROGRAM || '').trim().toLowerCase();
+  if (termProgram === 'apple_terminal') return false;
+
+  const colorTerm = String(environment?.COLORTERM || '').trim().toLowerCase();
+  if (colorTerm === 'truecolor' || colorTerm === '24bit') return true;
+  if (environment?.WT_SESSION !== undefined && environment.WT_SESSION !== '') return true;
+  if (['iterm.app', 'wezterm', 'ghostty', 'vscode'].includes(termProgram)) return true;
+  if (/(?:direct|truecolor)/i.test(String(environment?.TERM || ''))) return true;
+  if (platformName === 'win32') return true;
+  return true;
+}
+
+const ANSI_256_CUBE_LEVELS = Object.freeze([0, 95, 135, 175, 215, 255]);
+
+function colorByte(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? Math.max(0, Math.min(255, Math.round(n))) : 0;
+}
+
+function nearestCubeLevel(value) {
+  let best = 0;
+  let bestDistance = Infinity;
+  for (let i = 0; i < ANSI_256_CUBE_LEVELS.length; i++) {
+    const distance = Math.abs(value - ANSI_256_CUBE_LEVELS[i]);
+    if (distance < bestDistance) {
+      best = i;
+      bestDistance = distance;
+    }
+  }
+  return best;
+}
+
+/** Convert an RGB triplet to the nearest stable xterm 256-color palette index. */
+export function rgbToAnsi256(r, g, b) {
+  const red = colorByte(r);
+  const green = colorByte(g);
+  const blue = colorByte(b);
+
+  const redLevel = nearestCubeLevel(red);
+  const greenLevel = nearestCubeLevel(green);
+  const blueLevel = nearestCubeLevel(blue);
+  const cubeRed = ANSI_256_CUBE_LEVELS[redLevel];
+  const cubeGreen = ANSI_256_CUBE_LEVELS[greenLevel];
+  const cubeBlue = ANSI_256_CUBE_LEVELS[blueLevel];
+  const cubeDistance = ((red - cubeRed) ** 2)
+    + ((green - cubeGreen) ** 2)
+    + ((blue - cubeBlue) ** 2);
+
+  const average = (red + green + blue) / 3;
+  const grayLevel = Math.max(0, Math.min(23, Math.round((average - 8) / 10)));
+  const grayValue = 8 + (grayLevel * 10);
+  const grayDistance = ((red - grayValue) ** 2)
+    + ((green - grayValue) ** 2)
+    + ((blue - grayValue) ** 2);
+
+  if (grayDistance < cubeDistance) return 232 + grayLevel;
+  return 16 + (36 * redLevel) + (6 * greenLevel) + blueLevel;
+}
+
+/** Raw RGB SGR prefix, downsampled to 256 colors when truecolor is unavailable. */
+export function rgbSgr(r, g, b, background = false) {
+  const channel = background ? 48 : 38;
+  if (supportsTruecolor()) return `${ESC}${channel};2;${r};${g};${b}m`;
+  return `${ESC}${channel};5;${rgbToAnsi256(r, g, b)}m`;
+}
+
+function supportedSgrOpen(open) {
+  const match = /^(38|48);2;([^;]+);([^;]+);([^;]+)$/.exec(String(open));
+  if (!match || supportsTruecolor()) return open;
+  return `${match[1]};5;${rgbToAnsi256(match[2], match[3], match[4])}`;
+}
+
 /** Build a `(text) => string` wrapper for the given SGR open code(s). */
 function sgr(open) {
-  const openSeq = `${ESC}${open}m`;
   return (text) => {
     if (!COLOR_ENABLED) return String(text ?? '');
     const s = String(text ?? '');
+    const openSeq = `${ESC}${supportedSgrOpen(open)}m`;
     // Re-open after any nested reset so composed styles survive concatenation.
     return openSeq + s.replace(/\x1b\[0m/g, RESET + openSeq) + RESET;
   };
@@ -84,9 +164,9 @@ export const bgGray = sgr('100');
 export const bgBlack = sgr('40');
 export const bgBlue = sgr('44');
 
-// --- Truecolor (24-bit) -----------------------------------------------------
-// The TUI palette uses explicit rgb() values. 16-color SGR can't reproduce them, so we emit
-// 24-bit SGR. Honors NO_COLOR / TTY exactly like the named helpers above.
+// --- RGB colors --------------------------------------------------------------
+// Emit 24-bit SGR where supported, otherwise use the nearest 256-color entry.
+// Honors NO_COLOR / TTY exactly like the named helpers above.
 
 /** Foreground truecolor wrapper: `rgb(215,119,87)('x')`. */
 export function rgb(r, g, b) {

package/src/ui/statusline-format.mjs

@@ -5,7 +5,7 @@
  * bar/segment formatters, small numeric helpers, and the TUI-independent
  * formatElapsed() replica. No behavior change — statusline.mjs re-imports these.
  */
-import { colorEnabled, rgb } from './ansi.mjs';
+import { colorEnabled, rgb, rgbSgr } from './ansi.mjs';
 import { displayModelName, shortenModelName } from './model-display.mjs';
 import { getModelMetadataSync } from '../runtime/agent/orchestrator/providers/model-catalog.mjs';
 
@@ -23,12 +23,12 @@ function sgr(code) {
 
 export const R = sgr('0');
 export const B = sgr('1');
-export const D = sgr('38;2;136;136;136');
-export const GRN = sgr('38;2;0;170;75');
-export const YLW = sgr('38;2;255;193;7');
-export const RED = sgr('38;2;220;70;88');
-export const CYN = sgr('38;2;136;136;136');
-export const GREY = sgr('38;2;136;136;136');
+export const D = colorEnabled() ? rgbSgr(136, 136, 136) : '';
+export const GRN = colorEnabled() ? rgbSgr(0, 170, 75) : '';
+export const YLW = colorEnabled() ? rgbSgr(255, 193, 7) : '';
+export const RED = colorEnabled() ? rgbSgr(220, 70, 88) : '';
+export const CYN = colorEnabled() ? rgbSgr(136, 136, 136) : '';
+export const GREY = colorEnabled() ? rgbSgr(136, 136, 136) : '';
 
 export function terminalColumns() {
   const cols = Number(process.stdout?.columns);