whale-code 6.4.0 → 6.5.0

package/dist/cli/shared/markdown.js

@@ -1,39 +1,42 @@
 /**
- * Markdown rendering — Apple-polished terminal output
+ * Markdown rendering — polished terminal output with shiki syntax highlighting
  *
- * Syntax theme: purples, blues, pinks — no yellow.
- * Financials: green for gains, red for losses/deductions.
- * Uses marked + marked-terminal + cli-highlight.
+ * Uses shiki for VS Code-quality syntax highlighting.
+ * All chalk instances are rebuilt on theme switch via rebuildMarkdownRenderer().
+ * Uses marked + marked-terminal for markdown structure.
  */
 import { Marked } from "marked";
 import { markedTerminal } from "marked-terminal";
 import chalk from "chalk";
-import { createRequire } from "module";
 import { colors } from "./Theme.js";
+import { highlightCode, setRebuildCallback } from "./theme-manager.js";
 import { diffWords } from "diff";
 // Note: chalk.level is auto-detected by supports-color.
 // Apple_Terminal → level 2 (256-color), iTerm.app v3+ → level 3 (24-bit).
 // Do NOT force level 3 — Terminal.app can't render 24-bit codes (shows gray).
-const require = createRequire(import.meta.url);
-const { highlight } = require("cli-highlight");
 // ============================================================================
-// Apple Dark palette — derived from Theme.tsx (respects ~/.swagmanager/theme.json)
+// Palette factory — rebuilt on theme switch
 // ============================================================================
-const systemBlue = chalk.hex(colors.brand);
-const systemCyan = chalk.hex(colors.info);
-const systemPink = chalk.hex(colors.pink);
-const systemPurple = chalk.hex(colors.purple);
-const systemIndigo = chalk.hex(colors.indigo);
-const systemGreen = chalk.hex(colors.success);
-const systemMint = chalk.hex(colors.mint);
-const systemRed = chalk.hex(colors.error);
-const systemOrange = chalk.hex(colors.warning);
-const text = chalk.hex(colors.text);
-const secondary = chalk.hex(colors.secondary);
-const tertiary = chalk.hex(colors.tertiary);
-const separator = chalk.hex(colors.separator);
-const lavender = chalk.hex(colors.lavender);
-const roseGold = chalk.hex(colors.roseGold);
+function buildPalette() {
+    return {
+        systemBlue: chalk.hex(colors.brand),
+        systemCyan: chalk.hex(colors.info),
+        systemPink: chalk.hex(colors.pink),
+        systemPurple: chalk.hex(colors.purple),
+        systemIndigo: chalk.hex(colors.indigo),
+        systemGreen: chalk.hex(colors.success),
+        systemMint: chalk.hex(colors.mint),
+        systemRed: chalk.hex(colors.error),
+        systemOrange: chalk.hex(colors.warning),
+        text: chalk.hex(colors.text),
+        secondary: chalk.hex(colors.secondary),
+        tertiary: chalk.hex(colors.tertiary),
+        separator: chalk.hex(colors.separator),
+        lavender: chalk.hex(colors.lavender),
+        roseGold: chalk.hex(colors.roseGold),
+    };
+}
+let p = buildPalette();
 // ============================================================================
 // Terminal width helpers — single source of truth for layout widths
 // ============================================================================
@@ -49,20 +52,6 @@ export function toolContentWidth() {
     return termWidth() - 6;
 }
 // ============================================================================
-// console.warn suppression — safe in single-threaded Node.js
-// ============================================================================
-/** Suppress console.warn during a synchronous function call. */
-function withSuppressedWarnings(fn) {
-    const orig = console.warn;
-    console.warn = () => { };
-    try {
-        return fn();
-    }
-    finally {
-        console.warn = orig;
-    }
-}
-// ============================================================================
 // OSC 8 hyperlinks — only in terminals that support them
 // ============================================================================
 /** Detect if terminal supports OSC 8 clickable hyperlinks */
@@ -83,37 +72,37 @@ function hyperlink(url, text) {
     // mailto: → clean email address, no protocol prefix, no OSC 8
     if (url.startsWith("mailto:")) {
         const email = text || url.slice(7);
-        return systemCyan(email);
+        return p.systemCyan(email);
     }
     // tel: → clean phone number
     if (url.startsWith("tel:")) {
-        return systemCyan(text || url.slice(4));
+        return p.systemCyan(text || url.slice(4));
     }
     const display = text || url;
     // OSC 8 clickable links — only where terminal supports them
     if (supportsOsc8) {
-        return `\x1B]8;;${url}\x07${systemCyan.underline(display)}\x1B]8;;\x07`;
+        return `\x1B]8;;${url}\x07${p.systemCyan.underline(display)}\x1B]8;;\x07`;
     }
     // Fallback: colored underlined text (no escape sequences)
-    return systemCyan.underline(display);
+    return p.systemCyan.underline(display);
 }
 // ============================================================================
 // Path helpers
 // ============================================================================
 /** Shorten a file path for code block headers */
 function shortenPathForHeader(fullPath, maxLen = 40) {
-    let p = fullPath;
+    let fp = fullPath;
     const cwd = process.cwd();
     const home = process.env.HOME || "";
-    if (p.startsWith(cwd + "/"))
-        p = p.slice(cwd.length + 1);
-    else if (p.startsWith(cwd))
-        p = p.slice(cwd.length);
-    else if (home && p.startsWith(home))
-        p = "~" + p.slice(home.length);
-    if (p.length <= maxLen)
-        return p;
-    const parts = p.split("/");
+    if (fp.startsWith(cwd + "/"))
+        fp = fp.slice(cwd.length + 1);
+    else if (fp.startsWith(cwd))
+        fp = fp.slice(cwd.length);
+    else if (home && fp.startsWith(home))
+        fp = "~" + fp.slice(home.length);
+    if (fp.length <= maxLen)
+        return fp;
+    const parts = fp.split("/");
     const file = parts.pop();
     if (file.length >= maxLen - 4)
         return "…/" + file.slice(-(maxLen - 4));
@@ -121,64 +110,6 @@ function shortenPathForHeader(fullPath, maxLen = 40) {
     return parent ? "…/" + parent + "/" + file : "…/" + file;
 }
 // ============================================================================
-// Syntax highlighting — purples / blues / pinks
-// ============================================================================
-const appleTheme = {
-    // Keywords — pink bold
-    keyword: systemPink.bold,
-    built_in: systemPurple,
-    type: systemCyan,
-    literal: systemIndigo,
-    number: systemMint,
-    regexp: systemPink,
-    // Strings — lavender
-    string: lavender,
-    subst: systemCyan,
-    symbol: systemPurple,
-    // Functions & classes — blue
-    class: systemCyan.bold,
-    function: systemBlue,
-    title: systemBlue.bold,
-    params: roseGold,
-    // Comments — tertiary italic
-    comment: tertiary.italic,
-    doctag: secondary.italic,
-    meta: systemIndigo,
-    "meta-keyword": systemPink,
-    "meta-string": lavender,
-    // Tags (HTML/JSX)
-    tag: systemPink,
-    name: systemCyan,
-    attr: systemPurple,
-    attribute: systemPurple,
-    // Variables & properties
-    variable: systemCyan,
-    property: systemBlue,
-    // Diff
-    addition: systemGreen,
-    deletion: systemRed,
-    // Lists & markup
-    bullet: systemPurple,
-    code: systemPink,
-    emphasis: chalk.italic,
-    strong: chalk.bold,
-    link: systemCyan.underline,
-    quote: secondary.italic,
-    // Selectors (CSS)
-    "selector-tag": systemPink,
-    "selector-id": systemBlue,
-    "selector-class": systemPurple,
-    "selector-pseudo": systemCyan,
-    "selector-attr": lavender,
-    // Template
-    "template-tag": systemPink,
-    "template-variable": systemCyan,
-    // JSON property names — purple
-    section: systemPurple,
-    // Fallback
-    default: (s) => s,
-};
-// ============================================================================
 // Financial coloring
 // ============================================================================
 function colorizeFinancials(str) {
@@ -186,72 +117,150 @@ function colorizeFinancials(str) {
         // NOTE: URL hyperlinking is handled by marked's GFM autolink + link/href handlers.
         // Do NOT add URL patterns here — it causes links to render 3-5x.
         // Negative dollar amounts → red  (-$1,234.56) — require digit after $
-        .replace(/(-\$\d[\d,]*\.?\d*)/g, (m) => systemRed(m))
+        .replace(/(-\$\d[\d,]*\.?\d*)/g, (m) => p.systemRed(m))
         // Positive dollar amounts → green  ($1,234.56) — require digit after $
-        .replace(/((?:^|[^-])\$\d[\d,]*\.?\d*)/g, (m) => systemGreen(m))
+        .replace(/((?:^|[^-])\$\d[\d,]*\.?\d*)/g, (m) => p.systemGreen(m))
         // Negative percentages → red
-        .replace(/(-\d+\.?\d*%)/g, (m) => systemRed(m))
+        .replace(/(-\d+\.?\d*%)/g, (m) => p.systemRed(m))
         // Positive percentages → cyan
-        .replace(/((?:^|[^-])\d+\.?\d*%)/g, (m) => systemCyan(m))
+        .replace(/((?:^|[^-])\d+\.?\d*%)/g, (m) => p.systemCyan(m))
         // Explicit positive → green
-        .replace(/(\+\$?[\d,]+\.?\d*)/g, (m) => systemGreen(m))
+        .replace(/(\+\$?[\d,]+\.?\d*)/g, (m) => p.systemGreen(m))
         // Financial-specific words → green (no generic words like running/ready/started)
-        .replace(/\b(profit|revenue|gain|in stock|available)\b/gi, (m) => systemGreen(m))
+        .replace(/\b(profit|revenue|gain|in stock|available)\b/gi, (m) => p.systemGreen(m))
         // Financial/status negatives → red
-        .replace(/\b(loss|deduction|deficit|expense|out of stock|low stock|overdue|expired|cancelled|failed|error|crashed|EADDRINUSE|ENOENT)\b/gi, (m) => systemRed(m));
+        .replace(/\b(loss|deduction|deficit|expense|out of stock|low stock|overdue|expired|cancelled|failed|error|crashed|EADDRINUSE|ENOENT)\b/gi, (m) => p.systemRed(m));
 }
 // ============================================================================
-// Markdown renderer
+// Markdown renderer factory — rebuilt on theme switch
 // ============================================================================
-// ── Isolated marked instance (no global side effects) ──
-const md = new Marked();
-md.use(markedTerminal({
-    // Headings — bold blue
-    firstHeading: systemBlue.bold,
-    heading: systemBlue.bold,
-    // Inline
-    codespan: systemPink,
-    strong: text.bold,
-    em: lavender.italic,
-    // Blocks
-    blockquote: secondary.italic,
-    paragraph: (body) => colorizeFinancials(body),
-    hr: () => separator("─".repeat(50)),
-    // Links — OSC 8 clickable (single source of truth for URL rendering)
-    // NOTE: Only use `link` handler, NOT `href` — having both causes double-hyperlinking
-    link: (href, _title, text) => hyperlink(href, text !== href ? text : undefined),
-    // Lists — purple bullets, financial-aware
-    list: (body, ordered) => {
-        if (ordered) {
-            let n = 0;
-            return body.replace(/^\* /gm, () => {
-                n++;
-                return `${systemIndigo(String(n) + ".")} `;
-            });
-        }
-        return body.replace(/^\* /gm, `${systemPurple("●")} `);
-    },
-    listitem: (itemText) => {
-        return colorizeFinancials(itemText);
-    },
-    // Layout — adapt to terminal width
-    reflowText: false,
-    showSectionPrefix: false,
-    width: Math.min(120, contentWidth()),
-    tab: 2,
-}, {
-    // cli-highlight — purple/blue/pink syntax theme
-    theme: appleTheme,
-    ignoreIllegals: true,
-}));
+function buildMarkedInstance() {
+    const md = new Marked();
+    md.use(markedTerminal({
+        // Headings — bold blue
+        firstHeading: p.systemBlue.bold,
+        heading: p.systemBlue.bold,
+        // Inline
+        codespan: p.systemPink,
+        strong: p.text.bold,
+        em: p.lavender.italic,
+        // Blocks
+        blockquote: p.secondary.italic,
+        paragraph: (body) => colorizeFinancials(body),
+        hr: () => p.separator("─".repeat(50)),
+        // Links — OSC 8 clickable (single source of truth for URL rendering)
+        // NOTE: Only use `link` handler, NOT `href` — having both causes double-hyperlinking
+        link: (href, _title, text) => hyperlink(href, text !== href ? text : undefined),
+        // Lists — purple bullets, financial-aware
+        list: (body, ordered) => {
+            if (ordered) {
+                let n = 0;
+                return body.replace(/^\* /gm, () => {
+                    n++;
+                    return `${p.systemIndigo(String(n) + ".")} `;
+                });
+            }
+            return body.replace(/^\* /gm, `${p.systemPurple("●")} `);
+        },
+        listitem: (itemText) => {
+            return colorizeFinancials(itemText);
+        },
+        // Layout — adapt to terminal width
+        reflowText: false,
+        showSectionPrefix: false,
+        width: Math.min(120, contentWidth()),
+        tab: 2,
+    }));
+    // Register chart + table + code block extensions
+    md.use({
+        renderer: {
+            code(token) {
+                const rawLang = token.lang || "";
+                const code = token.text;
+                // Parse lang:subtitle (e.g. "typescript:src/foo.ts")
+                const colonIdx = rawLang.indexOf(":");
+                const lang = colonIdx > 0 ? rawLang.slice(0, colonIdx) : rawLang;
+                const subtitle = colonIdx > 0 ? rawLang.slice(colonIdx + 1) : "";
+                if (lang === "chart" || lang === "bar") {
+                    return renderBarChart(code);
+                }
+                if (lang === "diff") {
+                    return renderDiff(code);
+                }
+                {
+                    // Command output mode: bash without subtitle = run_command output
+                    // → no line numbers, wider content area, clean indent
+                    const isCommandOutput = (lang === "bash" || lang === "terminal") && !subtitle;
+                    const highlightLang = lang === "terminal" ? "bash" : lang;
+                    // Build header: ── lang ── subtitle ──────
+                    const cw = contentWidth();
+                    const headerWidth = Math.max(20, cw - 6);
+                    const displayLang = isCommandOutput ? "bash" : lang;
+                    let header;
+                    if (displayLang && subtitle) {
+                        const shortSub = shortenPathForHeader(subtitle, headerWidth - displayLang.length - 10);
+                        const pad = Math.max(2, headerWidth - displayLang.length - shortSub.length - 6);
+                        header = p.separator("  ── ") + p.tertiary(displayLang) + p.separator(" ── ") + p.secondary(shortSub) + p.separator(` ${"─".repeat(pad)}`);
+                    }
+                    else if (displayLang) {
+                        const pad = Math.max(2, headerWidth - displayLang.length - 3);
+                        header = p.separator("  ── ") + p.tertiary(displayLang) + p.separator(` ${"─".repeat(pad)}`);
+                    }
+                    else {
+                        header = p.separator("  ──" + "─".repeat(headerWidth - 2));
+                    }
+                    // Calculate max line width to prevent wrapping
+                    const lineCount = code.split("\n").length;
+                    const gutterW = isCommandOutput ? 0 : String(lineCount).length;
+                    const gutterOverhead = isCommandOutput ? 4 : (2 + gutterW + 3); // "    " or "  123 │ "
+                    const maxLineWidth = Math.max(20, cw - gutterOverhead - 2);
+                    // Pre-truncate lines BEFORE highlighting (avoids cutting ANSI codes)
+                    const truncatedCode = code.split("\n").map((line) => {
+                        if (line.length > maxLineWidth) {
+                            return line.slice(0, maxLineWidth - 1) + "…";
+                        }
+                        return line;
+                    }).join("\n");
+                    // Highlight with shiki
+                    const highlighted = highlightLang
+                        ? highlightCode(truncatedCode, highlightLang)
+                        : truncatedCode;
+                    const hLines = highlighted.split("\n");
+                    if (isCommandOutput) {
+                        // Command output: no line numbers, 4-space indent
+                        const body = hLines.map(l => "    " + l).join("\n");
+                        return "\n" + header + "\n" + body + "\n";
+                    }
+                    else {
+                        // Code with line numbers + gutter
+                        const numbered = hLines.map((l, i) => {
+                            const num = p.tertiary(String(i + 1).padStart(gutterW));
+                            return "  " + num + p.separator(" │ ") + l;
+                        }).join("\n");
+                        return "\n" + header + "\n" + numbered + "\n";
+                    }
+                }
+            },
+            table(token) {
+                return renderTable(token);
+            },
+        },
+    });
+    return md;
+}
+let md = buildMarkedInstance();
 // ============================================================================
 // Diff renderer — background colors + word-level diff (Claude Code parity)
 // ============================================================================
-// Background colors for diff lines — derived from Theme (256-color safe cube values)
-const diffAddedBg = chalk.bgHex(colors.diffAddedBg).white;
-const diffRemovedBg = chalk.bgHex(colors.diffRemovedBg).white;
-const diffWordAdded = chalk.bgHex(colors.diffWordAdded).whiteBright.bold;
-const diffWordRemoved = chalk.bgHex(colors.diffWordRemoved).whiteBright.bold;
+function buildDiffStyles() {
+    return {
+        diffAddedBg: chalk.bgHex(colors.diffAddedBg).white,
+        diffRemovedBg: chalk.bgHex(colors.diffRemovedBg).white,
+        diffWordAdded: chalk.bgHex(colors.diffWordAdded).whiteBright.bold,
+        diffWordRemoved: chalk.bgHex(colors.diffWordRemoved).whiteBright.bold,
+    };
+}
+let d = buildDiffStyles();
 /** Compute word-level diff between two lines using the `diff` library. */
 function wordDiff(oldLine, newLine) {
     const changes = diffWords(oldLine, newLine);
@@ -353,16 +362,16 @@ function renderDiff(code) {
                     const wd = wordDiff(r.content, a.content);
                     // Removed line with word highlights
                     const rPad = Math.max(0, tw - rPrefix.length - r.content.length);
-                    out.push(diffRemovedBg(rPrefix) + renderSegments(wd.old, diffWordRemoved, diffRemovedBg) + diffRemovedBg(" ".repeat(rPad)));
+                    out.push(d.diffRemovedBg(rPrefix) + renderSegments(wd.old, d.diffWordRemoved, d.diffRemovedBg) + d.diffRemovedBg(" ".repeat(rPad)));
                     // Added line with word highlights
                     const aPad = Math.max(0, tw - aPrefix.length - a.content.length);
-                    out.push(diffAddedBg(aPrefix) + renderSegments(wd.new, diffWordAdded, diffAddedBg) + diffAddedBg(" ".repeat(aPad)));
+                    out.push(d.diffAddedBg(aPrefix) + renderSegments(wd.new, d.diffWordAdded, d.diffAddedBg) + d.diffAddedBg(" ".repeat(aPad)));
                 }
                 else {
                     // Unpaired remove
                     const raw = rPrefix + r.content;
                     const pad = Math.max(0, tw - raw.length);
-                    out.push(diffRemovedBg(raw + " ".repeat(pad)));
+                    out.push(d.diffRemovedBg(raw + " ".repeat(pad)));
                 }
             }
             // Unpaired adds
@@ -371,7 +380,7 @@ function renderDiff(code) {
                 const prefix = `${String(a.lineNo).padStart(gutterW)} + `;
                 const raw = prefix + a.content;
                 const pad = Math.max(0, tw - raw.length);
-                out.push(diffAddedBg(raw + " ".repeat(pad)));
+                out.push(d.diffAddedBg(raw + " ".repeat(pad)));
             }
             continue;
         }
@@ -380,12 +389,12 @@ function renderDiff(code) {
             const prefix = `${String(seg.lineNo).padStart(gutterW)} + `;
             const raw = prefix + seg.content;
             const pad = Math.max(0, tw - raw.length);
-            out.push(diffAddedBg(raw + " ".repeat(pad)));
+            out.push(d.diffAddedBg(raw + " ".repeat(pad)));
             i++;
             continue;
         }
         // Context line — dim line number, plain content, no background
-        const prefix = tertiary(`${String(seg.lineNo).padStart(gutterW)}   `);
+        const prefix = p.tertiary(`${String(seg.lineNo).padStart(gutterW)}   `);
         out.push(prefix + seg.content);
         i++;
     }
@@ -394,16 +403,19 @@ function renderDiff(code) {
 // ============================================================================
 // Bar chart renderer — ```chart code blocks
 // ============================================================================
-const barGradient = [
-    chalk.hex("#BF5AF2"), // purple
-    chalk.hex("#5E5CE6"), // indigo
-    chalk.hex("#0A84FF"), // blue
-    chalk.hex("#64D2FF"), // cyan
-    chalk.hex("#6AC4DC"), // teal
-    chalk.hex("#30D158"), // green
-    chalk.hex("#FF9F0A"), // orange
-    chalk.hex("#FF375F"), // pink
-];
+function buildBarGradient() {
+    return [
+        chalk.hex(colors.purple),
+        chalk.hex(colors.indigo),
+        chalk.hex(colors.brand),
+        chalk.hex(colors.info),
+        chalk.hex(colors.teal),
+        chalk.hex(colors.success),
+        chalk.hex(colors.warning),
+        chalk.hex(colors.pink),
+    ];
+}
+let barGradient = buildBarGradient();
 function renderBarChart(code) {
     const lines = code.trim().split("\n").filter(l => l.trim());
     // Optional title — first line without "label: number" pattern
@@ -428,41 +440,64 @@ function renderBarChart(code) {
     if (entries.length === 0)
         return code;
     const maxVal = Math.max(...entries.map(e => e.value));
-    const maxLabel = Math.max(...entries.map(e => e.label.length));
     const maxRaw = Math.max(...entries.map(e => e.raw.length));
     const cw = contentWidth();
-    const barWidth = Math.min(36, Math.max(12, cw - 8 - maxLabel - maxRaw));
+    // Responsive label width — truncate labels to fit
+    const idealLabelW = Math.max(...entries.map(e => e.label.length));
+    // Fixed overhead: indent(2) + gap(2) + gap(2) + value(maxRaw) + safety(2)
+    const fixedOverhead = 2 + 2 + 2 + maxRaw + 2;
+    const spaceForLabelAndBar = cw - fixedOverhead;
+    // Allocate: label gets up to half, bar gets the rest (min 4)
+    const maxLabelW = Math.min(idealLabelW, Math.max(6, Math.floor(spaceForLabelAndBar * 0.4)));
+    const barWidth = Math.max(4, spaceForLabelAndBar - maxLabelW);
+    // If even 4-char bars don't fit, fall back to compact list (no bars)
+    const compact = spaceForLabelAndBar < 12;
     const out = [];
     if (title) {
-        out.push(`  ${systemBlue.bold(title)}`);
+        const displayTitle = title.length > cw - 4 ? title.slice(0, cw - 5) + "…" : title;
+        out.push(`  ${p.systemBlue.bold(displayTitle)}`);
         out.push("");
     }
-    for (let i = 0; i < entries.length; i++) {
-        const e = entries[i];
-        const ratio = maxVal > 0 ? e.value / maxVal : 0;
-        const filled = Math.round(ratio * barWidth);
-        const color = barGradient[i % barGradient.length];
-        const label = secondary(e.label.padStart(maxLabel));
-        const bar = color("█".repeat(filled)) + chalk.hex("#2C2C2E")("░".repeat(barWidth - filled));
-        const val = e.raw.includes("$")
-            ? systemGreen(e.raw.padStart(maxRaw))
-            : e.raw.includes("%")
-                ? systemCyan(e.raw.padStart(maxRaw))
-                : systemMint(e.raw.padStart(maxRaw));
-        out.push(`  ${label}  ${bar}  ${val}`);
+    function colorVal(raw) {
+        return raw.includes("$") ? p.systemGreen(raw)
+            : raw.includes("%") ? p.systemCyan(raw)
+                : p.systemMint(raw);
+    }
+    if (compact) {
+        // Compact mode: just "label  value" with color dot
+        for (let i = 0; i < entries.length; i++) {
+            const e = entries[i];
+            const color = barGradient[i % barGradient.length];
+            const labelStr = e.label.length > cw - maxRaw - 8
+                ? e.label.slice(0, cw - maxRaw - 9) + "…"
+                : e.label;
+            out.push(`  ${color("●")} ${p.secondary(labelStr)}  ${colorVal(e.raw)}`);
+        }
+    }
+    else {
+        for (let i = 0; i < entries.length; i++) {
+            const e = entries[i];
+            const ratio = maxVal > 0 ? e.value / maxVal : 0;
+            const filled = Math.round(ratio * barWidth);
+            const color = barGradient[i % barGradient.length];
+            const labelStr = e.label.length > maxLabelW
+                ? e.label.slice(0, maxLabelW - 1) + "…"
+                : e.label;
+            const label = p.secondary(labelStr.padStart(maxLabelW));
+            const bar = color("█".repeat(filled)) + chalk.hex("#2C2C2E")("░".repeat(barWidth - filled));
+            const val = colorVal(e.raw.padStart(maxRaw));
+            out.push(`  ${label}  ${bar}  ${val}`);
+        }
     }
     return "\n" + out.join("\n") + "\n";
 }
 function getRowTone(cells) {
     for (const cell of cells) {
         const t = cell.trim();
-        // Negative financial → red row
         if (/^-\$[\d,]+/.test(t) || /^-\d+\.?\d*%/.test(t))
             return "negative";
-        // Explicit positive delta → green row
         if (/^\+\d/.test(t) || /^\+\$/.test(t))
             return "positive";
-        // Status badges
         if (/^`?[✕✗]/.test(t) || /cancelled|failed|rejected|error|out of stock|low stock/i.test(t))
             return "negative";
         if (/^`?[✓●]/.test(t) || /completed|received|approved|active|success|paid|published/i.test(t))
@@ -470,72 +505,90 @@ function getRowTone(cells) {
     }
     return "neutral";
 }
-// Background tints for row-level coloring
-const rowBgPositive = chalk.bgHex("#0d1f14"); // subtle green tint
-const rowBgNegative = chalk.bgHex("#1f0d10"); // subtle red tint
-function colorizeCell(val, isHeader, rowTone = "neutral") {
+/** Detect if a column is numeric (for right-alignment) */
+function isNumericColumn(rows, colIndex) {
+    let numericCount = 0;
+    let total = 0;
+    for (const row of rows) {
+        const val = (row[colIndex] || "").trim();
+        if (!val)
+            continue;
+        total++;
+        if (/^[+\-]?\$?[\d,]+\.?\d*%?$/.test(val))
+            numericCount++;
+    }
+    return total > 0 && numericCount / total > 0.5;
+}
+/** Blend two hex colors by ratio (0 = colorA, 1 = colorB) */
+function blendHex(a, b, ratio) {
+    const parse = (h) => {
+        const c = h.replace("#", "");
+        return [parseInt(c.slice(0, 2), 16), parseInt(c.slice(2, 4), 16), parseInt(c.slice(4, 6), 16)];
+    };
+    const [ar, ag, ab] = parse(a);
+    const [br, bg, bb] = parse(b);
+    const r = Math.round(ar + (br - ar) * ratio);
+    const g = Math.round(ag + (bg - ag) * ratio);
+    const bv = Math.round(ab + (bb - ab) * ratio);
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${bv.toString(16).padStart(2, "0")}`;
+}
+function colorizeCell(val, isHeader) {
     const trimmed = val.trim();
     if (!trimmed)
-        return text("");
+        return p.text("");
     if (isHeader)
-        return systemIndigo.bold(trimmed);
+        return p.systemBlue.bold(trimmed);
     // Badge format: `✓ status` or `◆ status` or `○ status` or `✕ status`
     const badgeMatch = trimmed.match(/^`([✓●◆○✕◦])\s+(.+)`$/);
     if (badgeMatch) {
         const [, icon, label] = badgeMatch;
         if (icon === "✓" || icon === "●")
-            return systemGreen(`${icon} ${label}`);
+            return p.systemGreen(`${icon} ${label}`);
         if (icon === "◆")
-            return systemCyan(`${icon} ${label}`);
+            return p.systemCyan(`${icon} ${label}`);
         if (icon === "○")
-            return systemOrange(`${icon} ${label}`);
+            return p.systemOrange(`${icon} ${label}`);
         if (icon === "✕")
-            return systemRed(`${icon} ${label}`);
-        return secondary(`${icon} ${label}`);
+            return p.systemRed(`${icon} ${label}`);
+        return p.secondary(`${icon} ${label}`);
     }
-    // Inline code (UUID, SKU, transfer number) — subtle style
+    // Inline code (UUID, SKU, transfer number)
     if (trimmed.startsWith("`") && trimmed.endsWith("`")) {
-        return systemPurple(trimmed.slice(1, -1));
+        return p.systemPurple(trimmed.slice(1, -1));
     }
     // Bold text
     if (trimmed.startsWith("**") && trimmed.endsWith("**")) {
-        return text.bold(trimmed.slice(2, -2));
+        return p.text.bold(trimmed.slice(2, -2));
     }
     // Negative values → red
     if (/^-\$?[\d,]+\.?\d*$/.test(trimmed) || /^-\d+\.?\d*%$/.test(trimmed)) {
-        return systemRed(trimmed);
+        return p.systemRed(trimmed);
     }
     // Positive financial → green
     if (/^\+?\$[\d,]+\.?\d*$/.test(trimmed) || /^\$[\d,]+\.?\d*$/.test(trimmed)) {
-        return systemGreen(trimmed);
+        return p.systemGreen(trimmed);
     }
     // Percentages → cyan
     if (/^\d+\.?\d*%$/.test(trimmed)) {
-        return systemCyan(trimmed);
+        return p.systemCyan(trimmed);
     }
     // Plain numbers → mint
     if (/^[\d,]+\.?\d*$/.test(trimmed)) {
-        return systemMint(trimmed);
+        return p.systemMint(trimmed);
     }
     // Status words
     if (/^(active|success|complete|approved|in stock|available)/i.test(trimmed)) {
-        return systemGreen(trimmed);
+        return p.systemGreen(trimmed);
     }
     if (/^(inactive|error|failed|cancelled|out of stock|low|overdue|expired)/i.test(trimmed)) {
-        return systemRed(trimmed);
+        return p.systemRed(trimmed);
     }
     if (/^(pending|draft|processing)/i.test(trimmed)) {
-        return systemOrange(trimmed);
-    }
-    // Apply row tone tint to text cells
-    if (rowTone === "positive")
-        return rowBgPositive(text(trimmed));
-    if (rowTone === "negative")
-        return rowBgNegative(text(trimmed));
-    return text(trimmed);
+        return p.systemOrange(trimmed);
+    }
+    return p.text(trimmed);
 }
 function renderTable(token) {
-    // Extract cell text from token — handles both inline tokens and plain text
     function getCellText(cell) {
         if (!cell)
             return "";
@@ -552,136 +605,125 @@ function renderTable(token) {
     const rows = (token.rows || []).map((row) => row.map((cell) => getCellText(cell)));
     if (headers.length === 0)
         return "";
-    // Responsive column widths based on terminal width
     const cw = contentWidth();
     const N = headers.length;
-    // Overhead: "  ╭" (3) + N+1 border chars + N*2 cell padding + "╮"
-    const overhead = 3 + (N + 1) + (N * 2);
+    // ── Check if box table can fit ──
+    // Minimum box table width: indent(2) + borders(N+1) + N * (minCol + 2 padding)
+    const MIN_COL = 3;
+    const minBoxWidth = 2 + (N + 1) + N * (MIN_COL + 2);
+    if (minBoxWidth > cw) {
+        // ── Card layout — graceful fallback for narrow terminals ──
+        return renderTableCards(headers, rows, cw);
+    }
+    // ── Box table layout ──
+    const overhead = 2 + 1 + (N - 1) + 1 + (N * 2);
     const availableForContent = cw - overhead;
-    // Scale minimum column width down for narrow terminals
-    const minCol = cw < 70 ? 3 : cw < 90 ? 4 : 6;
+    const minCol = cw < 70 ? MIN_COL : cw < 90 ? 5 : 6;
     const maxPerCol = Math.max(minCol, Math.floor(availableForContent / N));
+    // Detect numeric columns for right-alignment
+    const numericCols = headers.map((_, i) => isNumericColumn(rows, i));
+    // Size columns: fit content up to maxPerCol, respect minCol
     const colWidths = headers.map((h, i) => {
         const dataMax = rows.reduce((max, row) => Math.max(max, (row[i] || "").length), 0);
         return Math.min(maxPerCol, Math.max(minCol, h.length, dataMax) + 2);
     });
-    const border = chalk.hex("#48484A");
+    // Double-check total width won't overflow (defensive)
+    const totalWidth = 2 + 1 + colWidths.reduce((s, w) => s + w + 2, 0) + (N - 1) + 1;
+    if (totalWidth > cw) {
+        // Shrink largest columns until we fit
+        let excess = totalWidth - cw;
+        while (excess > 0) {
+            const maxIdx = colWidths.indexOf(Math.max(...colWidths));
+            if (colWidths[maxIdx] <= MIN_COL)
+                break; // can't shrink further
+            colWidths[maxIdx]--;
+            excess--;
+        }
+    }
+    // ── Colors ──
+    const borderColor = blendHex(colors.separator, colors.brand, 0.25);
+    const border = chalk.hex(borderColor);
+    const headerBg = chalk.bgHex(blendHex(colors.panel, colors.brand, 0.15));
+    const evenRowBg = chalk.bgHex(blendHex(colors.panel, colors.text, 0.04));
+    const oddRowBg = chalk.bgHex(colors.panel);
+    const positiveBg = chalk.bgHex(blendHex(colors.panel, colors.success, 0.12));
+    const negativeBg = chalk.bgHex(blendHex(colors.panel, colors.error, 0.12));
     const out = [];
-    // Top border: ╭──────┬──────╮
+    // Top border
     out.push(border("  ╭" + colWidths.map((w) => "─".repeat(w + 2)).join("┬") + "╮"));
-    // Header row (truncate headers to fit)
-    const hdrLine = headers.map((h, i) => {
+    // Header row
+    const hdrCells = headers.map((h, i) => {
         const display = h.length > colWidths[i] ? h.slice(0, colWidths[i] - 1) + "…" : h;
-        return " " + systemIndigo.bold(display.padEnd(colWidths[i])) + " ";
+        const padded = numericCols[i] ? display.padStart(colWidths[i]) : display.padEnd(colWidths[i]);
+        return headerBg(" " + chalk.hex(colors.brand).bold(padded) + " ");
     }).join(border("│"));
-    out.push(border("  │") + hdrLine + border("│"));
-    // Header/body divider: ├──────┼──────┤
-    out.push(border("  ├" + colWidths.map((w) => "─".repeat(w + 2)).join("┼") + "┤"));
-    // Data rows (truncate values to fit, with row-level background tinting)
-    for (const row of rows) {
+    out.push(border("  │") + hdrCells + border("│"));
+    // Header divider
+    out.push(border("  ├" + colWidths.map((w) => "━".repeat(w + 2)).join("┿") + "┤"));
+    // Data rows
+    for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+        const row = rows[rowIdx];
         const tone = getRowTone(row);
+        const rowBg = tone === "positive" ? positiveBg
+            : tone === "negative" ? negativeBg
+                : rowIdx % 2 === 0 ? evenRowBg : oddRowBg;
         const cells = headers.map((_, i) => {
             const raw = row[i] || "";
             const display = raw.length > colWidths[i] ? raw.slice(0, colWidths[i] - 1) + "…" : raw;
-            const colored = colorizeCell(display, false, tone);
+            const colored = colorizeCell(display, false);
             const extraPad = Math.max(0, colWidths[i] - display.length);
-            const cellContent = " " + colored + " ".repeat(extraPad) + " ";
-            // Apply subtle background tint to the entire cell for positive/negative rows
-            if (tone === "positive")
-                return rowBgPositive(cellContent);
-            if (tone === "negative")
-                return rowBgNegative(cellContent);
-            return cellContent;
+            if (numericCols[i]) {
+                return rowBg(" ".repeat(extraPad) + " " + colored + " ");
+            }
+            return rowBg(" " + colored + " ".repeat(extraPad) + " ");
         }).join(border("│"));
         out.push(border("  │") + cells + border("│"));
     }
-    // Bottom border: ╰──────┴──────╯
+    // Bottom border
     out.push(border("  ╰" + colWidths.map((w) => "─".repeat(w + 2)).join("┴") + "╯"));
     return "\n" + out.join("\n") + "\n";
 }
-// Register chart + table extensions — intercepts before markedTerminal
-md.use({
-    renderer: {
-        code(token) {
-            const rawLang = token.lang || "";
-            const code = token.text;
-            // Parse lang:subtitle (e.g. "typescript:src/foo.ts")
-            const colonIdx = rawLang.indexOf(":");
-            const lang = colonIdx > 0 ? rawLang.slice(0, colonIdx) : rawLang;
-            const subtitle = colonIdx > 0 ? rawLang.slice(colonIdx + 1) : "";
-            if (lang === "chart" || lang === "bar") {
-                return renderBarChart(code);
-            }
-            if (lang === "diff") {
-                return renderDiff(code);
-            }
-            {
-                // Command output mode: bash without subtitle = run_command output
-                // → no line numbers, wider content area, clean indent
-                const isCommandOutput = (lang === "bash" || lang === "terminal") && !subtitle;
-                const highlightLang = lang === "terminal" ? "bash" : lang;
-                // Build header: ── lang ── subtitle ──────
-                const cw = contentWidth();
-                const headerWidth = Math.max(20, cw - 6);
-                const displayLang = isCommandOutput ? "bash" : lang;
-                let header;
-                if (displayLang && subtitle) {
-                    const shortSub = shortenPathForHeader(subtitle, headerWidth - displayLang.length - 10);
-                    const pad = Math.max(2, headerWidth - displayLang.length - shortSub.length - 6);
-                    header = separator("  ── ") + tertiary(displayLang) + separator(" ── ") + secondary(shortSub) + separator(` ${"─".repeat(pad)}`);
-                }
-                else if (displayLang) {
-                    const pad = Math.max(2, headerWidth - displayLang.length - 3);
-                    header = separator("  ── ") + tertiary(displayLang) + separator(` ${"─".repeat(pad)}`);
-                }
-                else {
-                    header = separator("  ──" + "─".repeat(headerWidth - 2));
-                }
-                // Calculate max line width to prevent wrapping
-                const lineCount = code.split("\n").length;
-                const gutterW = isCommandOutput ? 0 : String(lineCount).length;
-                const gutterOverhead = isCommandOutput ? 4 : (2 + gutterW + 3); // "    " or "  123 │ "
-                const maxLineWidth = Math.max(20, cw - gutterOverhead - 2);
-                // Pre-truncate lines BEFORE highlighting (avoids cutting ANSI codes)
-                const truncatedCode = code.split("\n").map((line) => {
-                    if (line.length > maxLineWidth) {
-                        return line.slice(0, maxLineWidth - 1) + "…";
-                    }
-                    return line;
-                }).join("\n");
-                let highlighted;
-                if (highlightLang) {
-                    try {
-                        highlighted = withSuppressedWarnings(() => highlight(truncatedCode, { language: highlightLang, ignoreIllegals: true, theme: appleTheme }));
-                    }
-                    catch {
-                        highlighted = truncatedCode;
-                    }
-                }
-                else {
-                    highlighted = truncatedCode;
-                }
-                const hLines = highlighted.split("\n");
-                if (isCommandOutput) {
-                    // Command output: no line numbers, 4-space indent
-                    const body = hLines.map(l => "    " + l).join("\n");
-                    return "\n" + header + "\n" + body + "\n";
-                }
-                else {
-                    // Code with line numbers + gutter
-                    const numbered = hLines.map((l, i) => {
-                        const num = tertiary(String(i + 1).padStart(gutterW));
-                        return "  " + num + separator(" │ ") + l;
-                    }).join("\n");
-                    return "\n" + header + "\n" + numbered + "\n";
-                }
-            }
-        },
-        table(token) {
-            return renderTable(token);
-        },
-    },
-});
+/** Card layout fallback — renders each row as a key: value block. Never overflows. */
+function renderTableCards(headers, rows, cw) {
+    const border = chalk.hex(blendHex(colors.separator, colors.brand, 0.25));
+    const out = [];
+    const innerW = Math.max(8, cw - 6); // indent(2) + border(2) + padding(2)
+    const divider = border("  " + "─".repeat(innerW + 2));
+    // Find longest header for label alignment
+    const maxHdrLen = Math.min(Math.max(...headers.map(h => h.length)), Math.floor(innerW * 0.4));
+    out.push(divider);
+    for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+        const row = rows[rowIdx];
+        if (rowIdx > 0)
+            out.push(divider);
+        for (let i = 0; i < headers.length; i++) {
+            const hdr = headers[i].length > maxHdrLen
+                ? headers[i].slice(0, maxHdrLen - 1) + "…"
+                : headers[i];
+            const val = row[i] || "";
+            const maxValLen = innerW - maxHdrLen - 3; // "  label  value"
+            const displayVal = val.length > maxValLen
+                ? val.slice(0, maxValLen - 1) + "…"
+                : val;
+            const labelStr = p.tertiary(hdr.padEnd(maxHdrLen));
+            const valStr = colorizeCell(displayVal, false);
+            out.push(`    ${labelStr}  ${valStr}`);
+        }
+    }
+    out.push(divider);
+    return "\n" + out.join("\n") + "\n";
+}
+// ============================================================================
+// Rebuild — called on theme switch to refresh all chalk instances
+// ============================================================================
+export function rebuildMarkdownRenderer() {
+    p = buildPalette();
+    d = buildDiffStyles();
+    barGradient = buildBarGradient();
+    md = buildMarkedInstance();
+}
+// Register rebuild callback with theme manager
+setRebuildCallback(rebuildMarkdownRenderer);
 // ============================================================================
 // Streaming fence closure — state-tracking approach
 // ============================================================================