mu-agent 0.1.7 → 0.1.10

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

@@ -1,11 +1,14 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { backgroundAnsi, colorToHex, colorToOklch, colorToRgb, foregroundAnsi, getTerminalColorMode, indexedColor, parseColor, rgbColor, styleTextWithAnsi, } from "@earendil-works/pi-tui";
+import { backgroundAnsi, colorToHex, colorToOklch, foregroundAnsi, getTerminalColorMode, indexedColor, mixColors, 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";
 import { highlight, supportsLanguage } from "../../../utils/syntax-highlight.js";
 import { stripBom } from "../../../utils/text.js";
+import { generateSystemThemeColors, SYSTEM_THEME_NAME, terminalAppearance } from "./system-theme.js";
+import { THEME_TOKENS, } from "./theme-tokens.js";
+export { SYSTEM_THEME_NAME } from "./system-theme.js";
 let themeJsonValidator;
 /**
  * Install full theme validation. Without it, documents are accepted as-is, which is what built-in
@@ -19,7 +22,7 @@ export function setThemeJsonValidator(validator) {
 // Color Utilities
 // ============================================================================
 function resolveVarRefs(value, vars, visited = new Set()) {
-    if (typeof value === "number" || value === "" || value.startsWith("#") || /^oklch\(/i.test(value)) {
+    if (typeof value === "number" || value === "" || value.startsWith("#") || /^ok(lch|hsl)\(/i.test(value)) {
         return value;
     }
     if (visited.has(value)) {
@@ -38,22 +41,45 @@ function resolveThemeColors(colors, vars = {}) {
     }
     return resolved;
 }
-function withThemeColorFallbacks(colors) {
-    return {
-        ...colors,
-        scrollbarTrack: colors.scrollbarTrack ?? colors.muted,
-        scrollbarThumb: colors.scrollbarThumb ?? colors.text,
-        thinkingMax: colors.thinkingMax ?? colors.thinkingXhigh,
-        searchMatchBg: colors.searchMatchBg ?? colors.selectedBg,
-        searchMatchText: colors.searchMatchText ?? colors.text,
-    };
+function withThemeTokenFallbacks(values) {
+    const resolved = { ...values };
+    for (const [rawName, descriptor] of Object.entries(THEME_TOKENS)) {
+        if (!("fallback" in descriptor))
+            continue;
+        const name = rawName;
+        if (resolved[name] !== undefined)
+            continue;
+        const fallback = descriptor.fallback;
+        const fallbackValue = resolved[fallback];
+        if (fallbackValue === undefined) {
+            throw new Error(`Theme token ${rawName} has unresolved fallback ${descriptor.fallback}`);
+        }
+        resolved[name] = fallbackValue;
+    }
+    return resolved;
 }
-// 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) };
+// The terminal's reported colors. Replaced (never mutated) on update, so themes can cache resolved colors
+// by identity.
+let terminalColors = {};
+// While the terminal color query is in flight, the system theme renders in grayscale.
+let terminalColorsPending = false;
+// The terminal's last light/dark report (mode 2031). Only used while it has not reported a background.
+let terminalColorScheme;
+/**
+ * Record the terminal's reported colors. Themes use the default colors for tokens set to "" (terminal
+ * default); the system theme is generated from all of them. Ends the pending state.
+ */
+export function setTerminalColors(colors) {
+    terminalColors = { ...colors };
+    terminalColorsPending = false;
+}
+/** Record the terminal's light/dark report, the fallback for terminals that do not report their background. */
+export function setTerminalColorScheme(scheme) {
+    terminalColorScheme = scheme;
+}
+/** Render the system theme in grayscale until `setTerminalColors()` reports the terminal's colors. */
+export function markTerminalColorsPending() {
+    terminalColorsPending = true;
 }
 /** Assumed terminal default colors when the terminal does not report them. */
 const GUESSED_DEFAULT_COLORS = {
@@ -94,6 +120,8 @@ export class Theme {
     concreteColors = {};
     defaultForegroundTokens = [];
     defaultBackgroundTokens = [];
+    // Foreground tokens rendered faint (SGR 2) on top of their color.
+    dimTokens;
     ownAppearance;
     resolvedColors;
     constructor(fgColors, bgColors, mode, options = {}) {
@@ -101,14 +129,8 @@ export class Theme {
         this.sourcePath = options.sourcePath;
         this.sourceInfo = options.sourceInfo;
         this.mode = mode;
-        const foregrounds = {
-            ...fgColors,
-            scrollbarTrack: fgColors.scrollbarTrack ?? fgColors.muted,
-            scrollbarThumb: fgColors.scrollbarThumb ?? fgColors.text,
-            thinkingMax: fgColors.thinkingMax ?? fgColors.thinkingXhigh,
-            searchMatchText: fgColors.searchMatchText ?? fgColors.text,
-        };
-        const backgrounds = { ...bgColors, searchMatchBg: bgColors.searchMatchBg ?? bgColors.selectedBg };
+        this.dimTokens = new Set(options.dim);
+        const { fgColors: foregrounds, bgColors: backgrounds } = splitThemeColors(withThemeTokenFallbacks({ ...fgColors, ...bgColors }));
         const concreteForegrounds = [];
         const concreteBackgrounds = [];
         // Returns the escape sequence for the token's own slot.
@@ -132,33 +154,41 @@ export class Theme {
     }
     /**
      * 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.
+     * or, for themes without usable colors, the terminal's appearance.
      */
     get appearance() {
-        if (this.ownAppearance)
-            return this.ownAppearance;
-        const background = terminalDefaultColors.background;
-        return background ? getThemeForRgbColor(colorToRgb(background)) : "dark";
+        return this.ownAppearance ?? getTerminalTheme();
     }
     /**
      * 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.
+     * default colors, or a guess based on `appearance` when the terminal did not report them. Faint
+     * tokens are approximated by mixing their color toward the background.
      */
     get colors() {
-        const terminal = terminalDefaultColors;
+        const terminal = terminalColors;
         if (this.resolvedColors?.terminal !== terminal) {
             const guess = GUESSED_DEFAULT_COLORS[this.appearance];
+            const toColor = (rgb, fallback) => rgb ? rgbColor(rgb.r, rgb.g, rgb.b) : fallback;
+            const foreground = toColor(terminal.foreground, guess.foreground);
+            const background = toColor(terminal.background, guess.background);
             const colors = { ...this.concreteColors };
             for (const token of this.defaultForegroundTokens)
-                colors[token] = terminal.foreground ?? guess.foreground;
+                colors[token] = foreground;
             for (const token of this.defaultBackgroundTokens)
-                colors[token] = terminal.background ?? guess.background;
+                colors[token] = background;
+            for (const token of this.dimTokens) {
+                const color = colors[token];
+                if (color)
+                    colors[token] = mixColors(color, background, 0.4);
+            }
             this.resolvedColors = { terminal, colors: Object.freeze(colors) };
         }
         return this.resolvedColors.colors;
     }
     style(text, options) {
         const { fg, bg } = options;
+        if (typeof fg === "string" && this.dimTokens.has(fg))
+            options = { ...options, dim: true };
         return styleTextWithAnsi(text, fg === undefined
             ? undefined
             : typeof fg === "string"
@@ -171,6 +201,8 @@ export class Theme {
     }
     fg(color, text) {
         const ansi = this.tokenAnsi(this.fgAnsi, color);
+        if (this.dimTokens.has(color))
+            return `${ansi}\x1b[2m${text}\x1b[22;39m`;
         return `${ansi}${text}\x1b[39m`;
     }
     bg(color, text) {
@@ -198,8 +230,10 @@ export class Theme {
     strikethrough(text) {
         return chalk.strikethrough(text);
     }
+    /** Opening escape sequence for a foreground token. Faint tokens include SGR 2, which `\x1b[22m` closes. */
     getFgAnsi(color) {
-        return this.tokenAnsi(this.fgAnsi, color);
+        const ansi = this.tokenAnsi(this.fgAnsi, color);
+        return this.dimTokens.has(color) ? `${ansi}\x1b[2m` : ansi;
     }
     getBgAnsi(color) {
         return this.tokenAnsi(this.bgAnsi, color);
@@ -262,7 +296,8 @@ export function getAvailableThemesWithPaths() {
         seen.add(themeInfo.name);
         result.push(themeInfo);
     };
-    // Built-in themes
+    // Built-in themes. The system theme is generated, so it has no file.
+    addTheme({ name: SYSTEM_THEME_NAME, path: undefined });
     for (const name of Object.keys(getBuiltinThemes())) {
         addTheme({ name, path: path.join(themesDir, `${name}.json`) });
     }
@@ -273,7 +308,8 @@ export function getAvailableThemesWithPaths() {
     for (const [name, theme] of registeredThemes.entries()) {
         addTheme({ name, path: theme.sourcePath });
     }
-    return result.sort((a, b) => a.name.localeCompare(b.name));
+    // The system theme comes first: it is the default and adapts to every terminal.
+    return result.sort((a, b) => a.name === SYSTEM_THEME_NAME ? -1 : b.name === SYSTEM_THEME_NAME ? 1 : a.name.localeCompare(b.name));
 }
 function getCustomThemeInfos() {
     const customThemesDir = getCustomThemesDir();
@@ -343,40 +379,52 @@ function loadThemeJson(name) {
     const content = fs.readFileSync(themePath, "utf-8");
     return parseThemeJsonContent(name, content);
 }
-function createTheme(themeJson, mode, sourcePath) {
-    const colorMode = mode ?? getTerminalColorMode();
-    const resolvedColors = resolveThemeColors(withThemeColorFallbacks(themeJson.colors), themeJson.vars);
+function splitThemeColors(colors) {
     const fgColors = {};
     const bgColors = {};
-    const bgColorKeys = new Set([
-        "selectedBg",
-        "searchMatchBg",
-        "userMessageBg",
-        "customMessageBg",
-        "toolPendingBg",
-        "toolSuccessBg",
-        "toolErrorBg",
-    ]);
-    for (const [key, value] of Object.entries(resolvedColors)) {
-        if (bgColorKeys.has(key)) {
+    for (const [key, value] of Object.entries(colors)) {
+        if (THEME_TOKENS[key].slot === "background") {
             bgColors[key] = value;
         }
         else {
             fgColors[key] = value;
         }
     }
+    return { fgColors, bgColors };
+}
+function createTheme(themeJson, mode, sourcePath) {
+    const colorMode = mode ?? getTerminalColorMode();
+    const resolvedColors = withThemeTokenFallbacks(resolveThemeColors(themeJson.colors, themeJson.vars));
+    const { fgColors, bgColors } = splitThemeColors(resolvedColors);
     return new Theme(fgColors, bgColors, colorMode, {
         name: themeJson.name,
         sourcePath,
         appearance: themeJson.appearance,
     });
 }
+/** Generate the system theme from the terminal's reported colors (grayscale while they are pending). */
+function createSystemTheme(mode) {
+    const generated = generateSystemThemeColors({
+        ...terminalColors,
+        saturation: terminalColorsPending ? 0 : 1,
+        appearanceHint: getTerminalTheme(),
+    });
+    const { fgColors, bgColors } = splitThemeColors(withThemeTokenFallbacks(generated.colors));
+    return new Theme(fgColors, bgColors, mode ?? getTerminalColorMode(), {
+        name: SYSTEM_THEME_NAME,
+        appearance: generated.appearance,
+        dim: generated.dim,
+    });
+}
 export function loadThemeFromPath(themePath, mode) {
     const content = fs.readFileSync(themePath, "utf-8");
     const themeJson = parseThemeJsonContent(themePath, content);
     return createTheme(themeJson, mode, themePath);
 }
 function loadTheme(name, mode) {
+    // The system theme name is reserved: it takes precedence over custom themes of the same name.
+    if (name === SYSTEM_THEME_NAME)
+        return createSystemTheme(mode);
     const registeredTheme = registeredThemes.get(name);
     if (registeredTheme) {
         return registeredTheme;
@@ -417,95 +465,45 @@ export function resolveThemeSetting(themeSetting, terminalTheme) {
         return themeSetting;
     return undefined;
 }
-function getColorFgBgBackgroundIndex(colorfgbg) {
-    const parts = colorfgbg.split(";");
-    for (let i = parts.length - 1; i >= 0; i--) {
-        const bg = parseInt(parts[i].trim(), 10);
-        if (Number.isInteger(bg) && bg >= 0 && bg <= 255) {
-            return bg;
-        }
-    }
-    return undefined;
-}
-function getRgbColorLuminance({ r, g, b }) {
-    const toLinear = (channel) => {
-        const value = channel / 255;
-        return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
-    };
-    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-}
-function getAnsiColorLuminance(index) {
-    return getRgbColorLuminance(colorToRgb(indexedColor(index)));
-}
-export function getThemeForRgbColor(rgb) {
-    return getRgbColorLuminance(rgb) >= 0.5 ? "light" : "dark";
-}
-export function detectTerminalBackgroundFromEnv(options = {}) {
-    const env = options.env ?? process.env;
-    const colorfgbg = env.COLORFGBG || "";
-    const bg = getColorFgBgBackgroundIndex(colorfgbg);
-    if (bg !== undefined) {
-        return {
-            theme: getAnsiColorLuminance(bg) >= 0.5 ? "light" : "dark",
-            source: "COLORFGBG",
-            detail: `background color index ${bg}`,
-            confidence: "high",
-        };
-    }
-    return {
-        theme: "dark",
-        source: "fallback",
-        detail: "no terminal background hint found",
-        confidence: "low",
-    };
-}
-export async function detectTerminalBackgroundTheme({ ui, timeoutMs, env, }) {
-    try {
-        const rgb = await ui.queryTerminalBackgroundColor({ timeoutMs });
-        if (rgb) {
-            return {
-                theme: getThemeForRgbColor(rgb),
-                source: "terminal background",
-                detail: `OSC 11 background rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`,
-                confidence: "high",
-            };
-        }
-    }
-    catch {
-        // Fall back to environment-based detection when the terminal query fails.
-    }
-    return detectTerminalBackgroundFromEnv({ env });
+/**
+ * Dark or light from the `COLORFGBG` environment variable some terminals set, or undefined without a
+ * usable background index. The value is `fg;bg` or `fg;xpm;bg` (rxvt), where a field is an ANSI color
+ * index or `default` when the color is not in the palette. The index refers to the terminal's own palette,
+ * whose colors are unknown here, so it is classified by index like Vim does: 0-6 and 8 (bright black, e.g.
+ * Solarized Dark's background) are dark, 7 and 9-15 are light.
+ */
+export function detectColorFgBgTheme(env = process.env) {
+    const bg = env.COLORFGBG?.split(";").at(-1)?.trim();
+    if (!bg || !/^\d{1,2}$/.test(bg))
+        return undefined;
+    const index = Number(bg);
+    if (index > 15)
+        return undefined;
+    return index <= 6 || index === 8 ? "dark" : "light";
 }
-export async function detectTerminalThemeForAuto({ ui, timeoutMs, env, }) {
-    let colorSchemePromise;
-    try {
-        colorSchemePromise = ui.queryTerminalColorScheme?.({ timeoutMs });
-    }
-    catch {
-        // Fall back to OSC 11 / COLORFGBG detection when starting the color-scheme query fails.
-    }
-    const backgroundThemePromise = detectTerminalBackgroundTheme({ ui, timeoutMs, env });
-    try {
-        const colorScheme = await colorSchemePromise;
-        if (colorScheme)
-            return colorScheme;
-    }
-    catch {
-        // Fall back to the concurrently queried OSC 11 / COLORFGBG detection.
-    }
-    return (await backgroundThemePromise).theme;
+/**
+ * Whether the terminal is dark or light. The background it renders decides, classified the same way the
+ * system theme does. Without a reported background: the terminal's light/dark report, then COLORFGBG,
+ * then dark.
+ */
+export function detectTerminalTheme(colors = {}, reportedScheme, env = process.env) {
+    const { background, foreground } = colors;
+    if (background)
+        return terminalAppearance(background, foreground);
+    return reportedScheme ?? detectColorFgBgTheme(env) ?? "dark";
 }
-export function getDefaultTheme() {
-    return detectTerminalBackgroundFromEnv().theme;
+/** Whether the terminal is dark or light, from everything it reported so far. See `detectTerminalTheme()`. */
+export function getTerminalTheme() {
+    return detectTerminalTheme(terminalColors, terminalColorScheme);
 }
 // ============================================================================
 // Global Theme Instance
 // ============================================================================
-// Use globalThis to share theme across module loaders (tsx + jiti in dev mode)
+// Use globalThis to share theme across module loaders (node + jiti in dev mode)
 const THEME_KEY = Symbol.for("@earendil-works/pi-coding-agent:theme");
 const THEME_KEY_OLD = Symbol.for("@mariozechner/pi-coding-agent:theme");
 // Export theme as a getter that reads from globalThis
-// This ensures all module instances (tsx, jiti) see the same theme
+// This ensures all module instances (node, jiti) see the same theme
 export const theme = new Proxy({}, {
     get(_target, prop) {
         const t = globalThis[THEME_KEY];
@@ -533,7 +531,7 @@ export function setRegisteredThemes(themes) {
     }
 }
 export function initTheme(themeName, enableWatcher = false) {
-    const name = themeName ?? getDefaultTheme();
+    const name = themeName ?? SYSTEM_THEME_NAME;
     currentThemeName = name;
     try {
         setGlobalTheme(loadTheme(name));
@@ -542,9 +540,9 @@ export function initTheme(themeName, enableWatcher = false) {
         }
     }
     catch (_error) {
-        // Theme is invalid - fall back to dark theme silently
-        currentThemeName = "dark";
-        setGlobalTheme(loadTheme("dark"));
+        // Theme is invalid - fall back to the system theme silently
+        currentThemeName = SYSTEM_THEME_NAME;
+        setGlobalTheme(loadTheme(SYSTEM_THEME_NAME));
         // Don't start watcher for fallback theme
     }
 }
@@ -561,9 +559,9 @@ export function setTheme(name, enableWatcher = false) {
         return { success: true };
     }
     catch (error) {
-        // Theme is invalid - fall back to dark theme
-        currentThemeName = "dark";
-        setGlobalTheme(loadTheme("dark"));
+        // Theme is invalid - fall back to the system theme
+        currentThemeName = SYSTEM_THEME_NAME;
+        setGlobalTheme(loadTheme(SYSTEM_THEME_NAME));
         // Don't start watcher for fallback theme
         return {
             success: false,
@@ -585,7 +583,10 @@ export function onThemeChange(callback) {
 function startThemeWatcher() {
     stopThemeWatcher();
     // Only watch if it's a custom theme (not built-in)
-    if (!currentThemeName || currentThemeName === "dark" || currentThemeName === "light") {
+    if (!currentThemeName ||
+        currentThemeName === "dark" ||
+        currentThemeName === "light" ||
+        currentThemeName === SYSTEM_THEME_NAME) {
         return;
     }
     const customThemesDir = getCustomThemesDir();
@@ -659,28 +660,30 @@ export function stopThemeWatcher() {
  * Used by HTML export to generate CSS custom properties.
  */
 export function getResolvedThemeColors(themeName) {
-    const colors = loadTheme(themeName ?? currentThemeName ?? getDefaultTheme()).colors;
+    const colors = loadTheme(themeName ?? currentThemeName ?? SYSTEM_THEME_NAME).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) {
-    return loadTheme(themeName ?? currentThemeName ?? getDefaultTheme()).appearance === "light";
+    return loadTheme(themeName ?? currentThemeName ?? SYSTEM_THEME_NAME).appearance === "light";
 }
 /**
  * Get explicit export colors from theme JSON, if specified.
  * Returns undefined for each color that isn't explicitly set.
  */
 export function getThemeExportColors(themeName) {
-    const name = themeName ?? currentThemeName ?? getDefaultTheme();
+    const name = themeName ?? currentThemeName ?? SYSTEM_THEME_NAME;
+    if (name === SYSTEM_THEME_NAME)
+        return {};
     try {
         const themeJson = loadThemeJson(name);
         const exportSection = themeJson.export;
         if (!exportSection)
             return {};
         const vars = themeJson.vars ?? {};
-        // Export colors end up in CSS, which understands hex, rgb() and oklch() values directly.
+        // Export colors end up in CSS, which understands hex and oklch() values directly but not okhsl().
         const resolve = (value) => {
             if (value === undefined)
                 return undefined;
@@ -689,6 +692,8 @@ export function getThemeExportColors(themeName) {
                 return colorToHex(indexedColor(resolved));
             if (resolved === "")
                 return undefined;
+            if (/^okhsl\(/i.test(resolved))
+                return colorToHex(parseColor(resolved));
             return resolved;
         };
         return {
@@ -711,6 +716,7 @@ function buildCliHighlightTheme(t) {
         number: (s) => t.fg("syntaxNumber", s),
         regexp: (s) => t.fg("syntaxString", s),
         string: (s) => t.fg("syntaxString", s),
+        subst: (s) => t.fg("text", s),
         comment: (s) => t.fg("syntaxComment", s),
         doctag: (s) => t.fg("syntaxComment", s),
         meta: (s) => t.fg("muted", s),