mu-agent 0.1.4 → 0.1.7

package/dist/modes/interactive/theme/theme.js

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { getCapabilities, } from "@earendil-works/pi-tui";
+import { backgroundAnsi, colorToHex, colorToOklch, colorToRgb, foregroundAnsi, getTerminalColorMode, indexedColor, parseColor, rgbColor, styleTextWithAnsi, } from "@earendil-works/pi-tui";
 import chalk from "chalk";
 import { getCustomThemesDir, getThemesDir } from "../../../config.js";
 import { closeWatcher, watchWithErrorHandler } from "../../../utils/fs-watch.js";
@@ -18,122 +18,8 @@ export function setThemeJsonValidator(validator) {
 // ============================================================================
 // Color Utilities
 // ============================================================================
-function hexToRgb(hex) {
-    const cleaned = hex.replace("#", "");
-    if (cleaned.length !== 6) {
-        throw new Error(`Invalid hex color: ${hex}`);
-    }
-    const r = parseInt(cleaned.substring(0, 2), 16);
-    const g = parseInt(cleaned.substring(2, 4), 16);
-    const b = parseInt(cleaned.substring(4, 6), 16);
-    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-        throw new Error(`Invalid hex color: ${hex}`);
-    }
-    return { r, g, b };
-}
-// The 6x6x6 color cube channel values (indices 0-5)
-const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
-// Grayscale ramp values (indices 232-255, 24 grays from 8 to 238)
-const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
-function findClosestCubeIndex(value) {
-    let minDist = Infinity;
-    let minIdx = 0;
-    for (let i = 0; i < CUBE_VALUES.length; i++) {
-        const dist = Math.abs(value - CUBE_VALUES[i]);
-        if (dist < minDist) {
-            minDist = dist;
-            minIdx = i;
-        }
-    }
-    return minIdx;
-}
-function findClosestGrayIndex(gray) {
-    let minDist = Infinity;
-    let minIdx = 0;
-    for (let i = 0; i < GRAY_VALUES.length; i++) {
-        const dist = Math.abs(gray - GRAY_VALUES[i]);
-        if (dist < minDist) {
-            minDist = dist;
-            minIdx = i;
-        }
-    }
-    return minIdx;
-}
-function colorDistance(r1, g1, b1, r2, g2, b2) {
-    // Weighted Euclidean distance (human eye is more sensitive to green)
-    const dr = r1 - r2;
-    const dg = g1 - g2;
-    const db = b1 - b2;
-    return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
-}
-function rgbTo256(r, g, b) {
-    // Find closest color in the 6x6x6 cube
-    const rIdx = findClosestCubeIndex(r);
-    const gIdx = findClosestCubeIndex(g);
-    const bIdx = findClosestCubeIndex(b);
-    const cubeR = CUBE_VALUES[rIdx];
-    const cubeG = CUBE_VALUES[gIdx];
-    const cubeB = CUBE_VALUES[bIdx];
-    const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
-    const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
-    // Find closest grayscale
-    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
-    const grayIdx = findClosestGrayIndex(gray);
-    const grayValue = GRAY_VALUES[grayIdx];
-    const grayIndex = 232 + grayIdx;
-    const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
-    // Check if color has noticeable saturation (hue matters)
-    // If max-min spread is significant, prefer cube to preserve tint
-    const maxC = Math.max(r, g, b);
-    const minC = Math.min(r, g, b);
-    const spread = maxC - minC;
-    // Only consider grayscale if color is nearly neutral (spread < 10)
-    // AND grayscale is actually closer
-    if (spread < 10 && grayDist < cubeDist) {
-        return grayIndex;
-    }
-    return cubeIndex;
-}
-function hexTo256(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    return rgbTo256(r, g, b);
-}
-function fgAnsi(color, mode) {
-    if (color === "")
-        return "\x1b[39m";
-    if (typeof color === "number")
-        return `\x1b[38;5;${color}m`;
-    if (color.startsWith("#")) {
-        if (mode === "truecolor") {
-            const { r, g, b } = hexToRgb(color);
-            return `\x1b[38;2;${r};${g};${b}m`;
-        }
-        else {
-            const index = hexTo256(color);
-            return `\x1b[38;5;${index}m`;
-        }
-    }
-    throw new Error(`Invalid color value: ${color}`);
-}
-function bgAnsi(color, mode) {
-    if (color === "")
-        return "\x1b[49m";
-    if (typeof color === "number")
-        return `\x1b[48;5;${color}m`;
-    if (color.startsWith("#")) {
-        if (mode === "truecolor") {
-            const { r, g, b } = hexToRgb(color);
-            return `\x1b[48;2;${r};${g};${b}m`;
-        }
-        else {
-            const index = hexTo256(color);
-            return `\x1b[48;5;${index}m`;
-        }
-    }
-    throw new Error(`Invalid color value: ${color}`);
-}
 function resolveVarRefs(value, vars, visited = new Set()) {
-    if (typeof value === "number" || value === "" || value.startsWith("#")) {
+    if (typeof value === "number" || value === "" || value.startsWith("#") || /^oklch\(/i.test(value)) {
         return value;
     }
     if (visited.has(value)) {
@@ -162,6 +48,37 @@ function withThemeColorFallbacks(colors) {
         searchMatchText: colors.searchMatchText ?? colors.text,
     };
 }
+// Replaced (never mutated) on update, so themes can cache resolved colors by identity.
+let terminalDefaultColors = {};
+/** Record the terminal's reported default colors. Themes use them for tokens set to "" (terminal default). */
+export function setTerminalDefaultColors(colors) {
+    const toColor = (rgb) => rgb && rgbColor(rgb.r, rgb.g, rgb.b);
+    terminalDefaultColors = { foreground: toColor(colors.foreground), background: toColor(colors.background) };
+}
+/** Assumed terminal default colors when the terminal does not report them. */
+const GUESSED_DEFAULT_COLORS = {
+    dark: { foreground: parseColor("#e5e5e7"), background: parseColor("#000000") },
+    light: { foreground: parseColor("#000000"), background: parseColor("#ffffff") },
+};
+function averageLightness(colors) {
+    // Palette colors 0-15 follow the user's terminal palette, so they say nothing about the theme.
+    const fixed = colors.filter((color) => color.kind !== "indexed" || color.index >= 16);
+    if (fixed.length === 0)
+        return undefined;
+    return fixed.reduce((sum, color) => sum + colorToOklch(color).l, 0) / fixed.length;
+}
+/** Detect the background a theme is designed for from the lightness of its own colors. */
+function detectAppearance(foregrounds, backgrounds) {
+    const fg = averageLightness(foregrounds);
+    const bg = averageLightness(backgrounds);
+    if (fg !== undefined && bg !== undefined)
+        return bg < fg ? "dark" : "light";
+    if (bg !== undefined)
+        return bg < 0.5 ? "dark" : "light";
+    if (fg !== undefined)
+        return fg > 0.5 ? "dark" : "light";
+    return undefined;
+}
 // ============================================================================
 // Theme Class
 // ============================================================================
@@ -169,45 +86,102 @@ export class Theme {
     name;
     sourcePath;
     sourceInfo;
-    fgColors;
-    bgColors;
     mode;
+    // Precomputed escape sequences keep fg()/bg() on the render hot path to a lookup and concat.
+    fgAnsi = new Map();
+    bgAnsi = new Map();
+    // Tokens set to "" have no color of their own; `colors` fills them from the terminal defaults.
+    concreteColors = {};
+    defaultForegroundTokens = [];
+    defaultBackgroundTokens = [];
+    ownAppearance;
+    resolvedColors;
     constructor(fgColors, bgColors, mode, options = {}) {
         this.name = options.name;
         this.sourcePath = options.sourcePath;
         this.sourceInfo = options.sourceInfo;
         this.mode = mode;
-        this.fgColors = new Map();
-        const colors = {
+        const foregrounds = {
             ...fgColors,
             scrollbarTrack: fgColors.scrollbarTrack ?? fgColors.muted,
             scrollbarThumb: fgColors.scrollbarThumb ?? fgColors.text,
             thinkingMax: fgColors.thinkingMax ?? fgColors.thinkingXhigh,
             searchMatchText: fgColors.searchMatchText ?? fgColors.text,
         };
-        for (const [key, value] of Object.entries(colors)) {
-            this.fgColors.set(key, fgAnsi(value, mode));
-        }
-        this.bgColors = new Map();
-        const backgrounds = {
-            ...bgColors,
-            searchMatchBg: bgColors.searchMatchBg ?? bgColors.selectedBg,
+        const backgrounds = { ...bgColors, searchMatchBg: bgColors.searchMatchBg ?? bgColors.selectedBg };
+        const concreteForegrounds = [];
+        const concreteBackgrounds = [];
+        // Returns the escape sequence for the token's own slot.
+        const addToken = (token, value, isBackground) => {
+            if (value === "") {
+                (isBackground ? this.defaultBackgroundTokens : this.defaultForegroundTokens).push(token);
+                return isBackground ? "\x1b[49m" : "\x1b[39m";
+            }
+            const color = parseColor(value);
+            this.concreteColors[token] = color;
+            (isBackground ? concreteBackgrounds : concreteForegrounds).push(color);
+            return isBackground ? backgroundAnsi(color, mode) : foregroundAnsi(color, mode);
         };
-        for (const [key, value] of Object.entries(backgrounds)) {
-            this.bgColors.set(key, bgAnsi(value, mode));
+        for (const [token, value] of Object.entries(foregrounds)) {
+            this.fgAnsi.set(token, addToken(token, value, false));
+        }
+        for (const [token, value] of Object.entries(backgrounds)) {
+            this.bgAnsi.set(token, addToken(token, value, true));
+        }
+        this.ownAppearance = options.appearance ?? detectAppearance(concreteForegrounds, concreteBackgrounds);
+    }
+    /**
+     * The background the theme is designed for: declared in the theme JSON, detected from its colors,
+     * or, for themes without usable colors, taken from the terminal background.
+     */
+    get appearance() {
+        if (this.ownAppearance)
+            return this.ownAppearance;
+        const background = terminalDefaultColors.background;
+        return background ? getThemeForRgbColor(colorToRgb(background)) : "dark";
+    }
+    /**
+     * Concrete colors for all tokens. Tokens set to "" (terminal default) use the terminal's reported
+     * default colors, or a guess based on `appearance` when the terminal did not report them.
+     */
+    get colors() {
+        const terminal = terminalDefaultColors;
+        if (this.resolvedColors?.terminal !== terminal) {
+            const guess = GUESSED_DEFAULT_COLORS[this.appearance];
+            const colors = { ...this.concreteColors };
+            for (const token of this.defaultForegroundTokens)
+                colors[token] = terminal.foreground ?? guess.foreground;
+            for (const token of this.defaultBackgroundTokens)
+                colors[token] = terminal.background ?? guess.background;
+            this.resolvedColors = { terminal, colors: Object.freeze(colors) };
         }
+        return this.resolvedColors.colors;
+    }
+    style(text, options) {
+        const { fg, bg } = options;
+        return styleTextWithAnsi(text, fg === undefined
+            ? undefined
+            : typeof fg === "string"
+                ? this.tokenAnsi(this.fgAnsi, fg)
+                : foregroundAnsi(fg, this.mode), bg === undefined
+            ? undefined
+            : typeof bg === "string"
+                ? this.tokenAnsi(this.bgAnsi, bg)
+                : backgroundAnsi(bg, this.mode), options);
     }
     fg(color, text) {
-        const ansi = this.fgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme color: ${color}`);
-        return `${ansi}${text}\x1b[39m`; // Reset only foreground color
+        const ansi = this.tokenAnsi(this.fgAnsi, color);
+        return `${ansi}${text}\x1b[39m`;
     }
     bg(color, text) {
-        const ansi = this.bgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme background color: ${color}`);
-        return `${ansi}${text}\x1b[49m`; // Reset only background color
+        const ansi = this.tokenAnsi(this.bgAnsi, color);
+        return `${ansi}${text}\x1b[49m`;
+    }
+    tokenAnsi(ansi, token) {
+        const value = ansi.get(token);
+        if (value === undefined)
+            throw new Error(`Unknown theme color: ${token}`);
+        return value;
     }
     bold(text) {
         return chalk.bold(text);
@@ -225,16 +199,10 @@ export class Theme {
         return chalk.strikethrough(text);
     }
     getFgAnsi(color) {
-        const ansi = this.fgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme color: ${color}`);
-        return ansi;
+        return this.tokenAnsi(this.fgAnsi, color);
     }
     getBgAnsi(color) {
-        const ansi = this.bgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme background color: ${color}`);
-        return ansi;
+        return this.tokenAnsi(this.bgAnsi, color);
     }
     getColorMode() {
         return this.mode;
@@ -376,7 +344,7 @@ function loadThemeJson(name) {
     return parseThemeJsonContent(name, content);
 }
 function createTheme(themeJson, mode, sourcePath) {
-    const colorMode = mode ?? (getCapabilities().trueColor ? "truecolor" : "256color");
+    const colorMode = mode ?? getTerminalColorMode();
     const resolvedColors = resolveThemeColors(withThemeColorFallbacks(themeJson.colors), themeJson.vars);
     const fgColors = {};
     const bgColors = {};
@@ -400,6 +368,7 @@ function createTheme(themeJson, mode, sourcePath) {
     return new Theme(fgColors, bgColors, colorMode, {
         name: themeJson.name,
         sourcePath,
+        appearance: themeJson.appearance,
     });
 }
 export function loadThemeFromPath(themePath, mode) {
@@ -466,7 +435,7 @@ function getRgbColorLuminance({ r, g, b }) {
     return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
 }
 function getAnsiColorLuminance(index) {
-    return getRgbColorLuminance(hexToRgb(ansi256ToHex(index)));
+    return getRgbColorLuminance(colorToRgb(indexedColor(index)));
 }
 export function getThemeForRgbColor(rgb) {
     return getRgbColorLuminance(rgb) >= 0.5 ? "light" : "dark";
@@ -685,81 +654,19 @@ export function stopThemeWatcher() {
 // ============================================================================
 // HTML Export Helpers
 // ============================================================================
-/**
- * Convert a 256-color index to hex string.
- * Indices 0-15: basic colors (approximate)
- * Indices 16-231: 6x6x6 color cube
- * Indices 232-255: grayscale ramp
- */
-function ansi256ToHex(index) {
-    // Basic colors (0-15) - approximate common terminal values
-    const basicColors = [
-        "#000000",
-        "#800000",
-        "#008000",
-        "#808000",
-        "#000080",
-        "#800080",
-        "#008080",
-        "#c0c0c0",
-        "#808080",
-        "#ff0000",
-        "#00ff00",
-        "#ffff00",
-        "#0000ff",
-        "#ff00ff",
-        "#00ffff",
-        "#ffffff",
-    ];
-    if (index < 16) {
-        return basicColors[index];
-    }
-    // Color cube (16-231): 6x6x6 = 216 colors
-    if (index < 232) {
-        const cubeIndex = index - 16;
-        const r = Math.floor(cubeIndex / 36);
-        const g = Math.floor((cubeIndex % 36) / 6);
-        const b = cubeIndex % 6;
-        const toHex = (n) => (n === 0 ? 0 : 55 + n * 40).toString(16).padStart(2, "0");
-        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-    }
-    // Grayscale (232-255): 24 shades
-    const gray = 8 + (index - 232) * 10;
-    const grayHex = gray.toString(16).padStart(2, "0");
-    return `#${grayHex}${grayHex}${grayHex}`;
-}
 /**
  * Get resolved theme colors as CSS-compatible hex strings.
  * Used by HTML export to generate CSS custom properties.
  */
 export function getResolvedThemeColors(themeName) {
-    const name = themeName ?? currentThemeName ?? getDefaultTheme();
-    const isLight = name === "light";
-    const themeJson = loadThemeJson(name);
-    const resolved = resolveThemeColors(withThemeColorFallbacks(themeJson.colors), themeJson.vars);
-    // Default text color for empty values (terminal uses default fg color)
-    const defaultText = isLight ? "#000000" : "#e5e5e7";
-    const cssColors = {};
-    for (const [key, value] of Object.entries(resolved)) {
-        if (typeof value === "number") {
-            cssColors[key] = ansi256ToHex(value);
-        }
-        else if (value === "") {
-            // Empty means default terminal color - use sensible fallback for HTML
-            cssColors[key] = defaultText;
-        }
-        else {
-            cssColors[key] = value;
-        }
-    }
-    return cssColors;
+    const colors = loadTheme(themeName ?? currentThemeName ?? getDefaultTheme()).colors;
+    return Object.fromEntries(Object.entries(colors).map(([token, color]) => [token, colorToHex(color)]));
 }
 /**
  * Check if a theme is a "light" theme (for CSS that needs light/dark variants).
  */
 export function isLightTheme(themeName) {
-    // Currently just check the name - could be extended to analyze colors
-    return themeName === "light";
+    return loadTheme(themeName ?? currentThemeName ?? getDefaultTheme()).appearance === "light";
 }
 /**
  * Get explicit export colors from theme JSON, if specified.
@@ -773,12 +680,13 @@ export function getThemeExportColors(themeName) {
         if (!exportSection)
             return {};
         const vars = themeJson.vars ?? {};
+        // Export colors end up in CSS, which understands hex, rgb() and oklch() values directly.
         const resolve = (value) => {
             if (value === undefined)
                 return undefined;
             const resolved = resolveVarRefs(value, vars);
             if (typeof resolved === "number")
-                return ansi256ToHex(resolved);
+                return colorToHex(indexedColor(resolved));
             if (resolved === "")
                 return undefined;
             return resolved;
@@ -940,7 +848,7 @@ export function getMarkdownTheme() {
         bold: (text) => theme.bold(text),
         italic: (text) => theme.italic(text),
         underline: (text) => theme.underline(text),
-        strikethrough: (text) => chalk.strikethrough(text),
+        strikethrough: (text) => theme.strikethrough(text),
         highlightCode: (code, lang) => {
             // Validate language before highlighting to avoid stderr spam from cli-highlight
             const validLang = lang && supportsLanguage(lang) ? lang : undefined;