coding-usage-bar 0.3.1 → 0.4.1

package/dist/menubar-render.d.ts

@@ -1,3 +1,22 @@
+import { DecodedPNG } from "./png.js";
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+export declare function parseHex(hex: string): Rgb;
+export declare class Canvas {
+    readonly width: number;
+    readonly height: number;
+    private readonly data;
+    constructor(width: number, height: number);
+    private composite;
+    fillRoundedRect(ax: number, ay: number, aw: number, ah: number, radius: number, color: Rgb, alpha: number): void;
+    drawGlyphCell(atlas: DecodedPNG, srcX: number, srcW: number, ax: number, ay: number, color: Rgb, alpha: number): void;
+    drawIcon(icon: DecodedPNG, ax: number, ay: number, size: number): void;
+    toPNGBase64(): string;
+}
+export declare function loadIcon(iconPath: string): DecodedPNG | null;
 export interface TitleSegment {
     provider: string;
     bars: Array<{

package/dist/menubar-render.js

@@ -8,7 +8,7 @@ import { encodePNG, decodePNG } from "./png.js";
 // (bottom-left origin) coordinate system mirror the old AppKit code exactly so
 // the rendered images stay visually identical.
 const SUPERSAMPLE = 4; // 4x4 coverage sampling for anti-aliased rounded corners
-function parseHex(hex) {
+export function parseHex(hex) {
     const v = hex.replace("#", "");
     return {
         r: parseInt(v.slice(0, 2), 16) / 255,
@@ -16,7 +16,7 @@ function parseHex(hex) {
         b: parseInt(v.slice(4, 6), 16) / 255,
     };
 }
-class Canvas {
+export class Canvas {
     width;
     height;
     data; // straight-alpha RGBA, 0..1
@@ -59,20 +59,31 @@ class Canvas {
         const pxMax = Math.min(this.width, Math.ceil(ax + aw));
         const pyMin = Math.max(0, Math.floor(H - (ay + ah)));
         const pyMax = Math.min(H, Math.ceil(H - ay));
+        const sdf = (sx, sy) => {
+            const qx = Math.abs(sx - cx) - halfW;
+            const qy = Math.abs(sy - cy) - halfH;
+            const dxo = Math.max(qx, 0);
+            const dyo = Math.max(qy, 0);
+            return Math.sqrt(dxo * dxo + dyo * dyo) + Math.min(Math.max(qx, qy), 0) - r;
+        };
         for (let py = pyMin; py < pyMax; py++) {
             for (let px = pxMin; px < pxMax; px++) {
+                // Fast path keeps large fills (the full card background) cheap:
+                // supersample only within one pixel of the shape edge.
+                const center = sdf(px + 0.5, H - (py + 0.5));
+                if (center <= -0.71) {
+                    this.composite(px, py, color, alpha);
+                    continue;
+                }
+                if (center >= 0.71) {
+                    continue;
+                }
                 let hits = 0;
                 for (let j = 0; j < SUPERSAMPLE; j++) {
                     for (let i = 0; i < SUPERSAMPLE; i++) {
                         const sx = px + (i + 0.5) / SUPERSAMPLE;
                         const sPngY = py + (j + 0.5) / SUPERSAMPLE;
-                        const sy = H - sPngY; // back to AppKit y-up
-                        const qx = Math.abs(sx - cx) - halfW;
-                        const qy = Math.abs(sy - cy) - halfH;
-                        const dxo = Math.max(qx, 0);
-                        const dyo = Math.max(qy, 0);
-                        const dist = Math.sqrt(dxo * dxo + dyo * dyo) + Math.min(Math.max(qx, qy), 0) - r;
-                        if (dist <= 0)
+                        if (sdf(sx, H - sPngY) <= 0)
                             hits++;
                     }
                 }
@@ -82,6 +93,31 @@ class Canvas {
             }
         }
     }
+    // Blit one glyph cell from a baked atlas 1:1, tinting the (white, alpha
+    // anti-aliased) glyph pixels with `color`. AppKit coords: `ax`/`ay` place
+    // the cell's bottom-left corner.
+    drawGlyphCell(atlas, srcX, srcW, ax, ay, color, alpha) {
+        const H = this.height;
+        const cellH = atlas.height;
+        const x0 = Math.round(ax);
+        const y0 = Math.round(ay);
+        for (let sy = 0; sy < cellH; sy++) {
+            // Atlas rows are top-down; canvas rows are addressed top-down too, but
+            // the destination rect is expressed y-up from `ay`.
+            const py = H - (y0 + cellH) + sy;
+            if (py < 0 || py >= H)
+                continue;
+            for (let sx = 0; sx < srcW; sx++) {
+                const px = x0 + sx;
+                if (px < 0 || px >= this.width)
+                    continue;
+                const a = atlas.data[(sy * atlas.width + (srcX + sx)) * 4 + 3] / 255;
+                if (a > 0) {
+                    this.composite(px, py, color, a * alpha);
+                }
+            }
+        }
+    }
     // Draw an RGBA source image upright into an AppKit-space rect (bottom-left
     // origin), bilinearly scaled to `size` x `size`. Mirrors NSImage.drawInRect.
     drawIcon(icon, ax, ay, size) {
@@ -150,7 +186,7 @@ function bilinear(data, w, h, fx, fy) {
     };
 }
 const iconCache = new Map();
-function loadIcon(iconPath) {
+export function loadIcon(iconPath) {
     if (iconCache.has(iconPath)) {
         return iconCache.get(iconPath) ?? null;
     }

package/dist/menubar.d.ts

@@ -1,4 +1,5 @@
 import { RuntimePaths, StatusSnapshot } from "./types.js";
+export declare function resetGlyphSetCache(): void;
 export declare function readCompactMode(paths?: RuntimePaths): boolean;
 export declare function toggleCompactMode(paths?: RuntimePaths): boolean;
 export declare function swiftBarPluginPath(paths?: RuntimePaths): {

package/dist/menubar.js

@@ -7,7 +7,9 @@ import { formatProviderLabel, formatResetTime } from "./format.js";
 import { buildPaths } from "./paths.js";
 import { stableNodeExecutable } from "./node-runtime.js";
 import { loadDisplayStatusSnapshot } from "./runtime.js";
-import { renderTitleImage, renderDropdownBars } from "./menubar-render.js";
+import { renderTitleImage } from "./menubar-render.js";
+import { loadGlyphSet } from "./glyphs.js";
+import { renderUsageCard } from "./menubar-card.js";
 const MARKER = "coding-usage-bar managed SwiftBar plugin";
 const SWIFTBAR_APP_PATHS = ["/Applications/SwiftBar.app", path.join(process.env.HOME ?? "", "Applications", "SwiftBar.app")];
 const STATE_LABEL = {
@@ -66,33 +68,53 @@ const ASSET_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..
 const imageCache = new Map();
 const TITLE_IMAGE_SCALE = 2;
 const titleImageCache = new Map();
-const dropdownBarCache = new Map();
-function renderDropdownBarImages(bars) {
-    if (bars.length === 0) {
-        return [];
+// The dropdown card is the ONLY image in the dropdown. Never go back to
+// per-row images: SwiftBar rebuilds the whole menu on any output change, and
+// its cost scales with the number of image-bearing menu items (17 images =
+// 6-8s WindowServer storm per data refresh; title + one card = <2s blip).
+const usageCardCache = new Map();
+let cachedGlyphSet;
+function glyphSetFor(paths) {
+    if (cachedGlyphSet === undefined) {
+        cachedGlyphSet = loadGlyphSet(paths);
+    }
+    return cachedGlyphSet;
+}
+// Test seam: forces the next glyphSetFor() call to re-read from disk.
+export function resetGlyphSetCache() {
+    cachedGlyphSet = undefined;
+}
+// SwiftBar's comma-pair light/dark selection for dropdown images is
+// version-dependent: pre-2.1 mishandled it (#399) and 2.1.x fixed it
+// inverted — a light menu gets the dark half, which renders white text on a
+// light menu. So never emit a pair for the card; read the system appearance
+// here and emit the single matching image (a lone image renders identically
+// on every SwiftBar version). CODING_USAGE_BAR_APPEARANCE=light|dark
+// overrides for tests and manual forcing.
+function systemPrefersDark() {
+    const override = process.env.CODING_USAGE_BAR_APPEARANCE?.toLowerCase();
+    if (override === "dark") {
+        return true;
     }
-    const payload = {
-        bars,
-        scale: TITLE_IMAGE_SCALE,
-        barWidth: 80,
-        barHeight: 10,
-        barRadius: 3,
-        light: { barBgColor: "000000", barBgAlpha: 0.15 },
-        dark: { barBgColor: "FFFFFF", barBgAlpha: 0.2 },
-    };
-    const cacheKey = JSON.stringify(payload);
-    if (dropdownBarCache.has(cacheKey)) {
-        const cached = dropdownBarCache.get(cacheKey);
-        return cached ? cached.images.map((img) => ({ image: img, width: cached.width, height: cached.height })) : [];
+    if (override === "light") {
+        return false;
     }
     try {
-        const result = renderDropdownBars(payload);
-        dropdownBarCache.set(cacheKey, result);
-        return result.images.map((img) => ({ image: img, width: result.width, height: result.height }));
+        // `defaults` writes a timestamped PID line plus a "does not exist" error
+        // to stderr even on a successful read; in light mode the key is missing,
+        // so the child exits non-zero and execFileSync attaches that stderr to
+        // the thrown Error. Pipe-discard for stderr prevents either path from
+        // leaking into render output and breaking SwiftBar byte-stability.
+        const style = execFileSync("defaults", ["read", "-g", "AppleInterfaceStyle"], {
+            encoding: "utf8",
+            timeout: 3000,
+            stdio: ["ignore", "pipe", "ignore"],
+        });
+        return style.trim() === "Dark";
     }
     catch {
-        dropdownBarCache.set(cacheKey, null);
-        return [];
+        // The key is absent in light appearance.
+        return false;
     }
 }
 function appCliPath(paths) {
@@ -363,7 +385,12 @@ function providerIconPath(provider) {
     const iconPath = path.join(ASSET_DIR, asset);
     return fs.existsSync(iconPath) ? iconPath : null;
 }
-function titleImageValue(providers) {
+// Emits a single appearance-matched image (no light,dark pair) for the same
+// reason as the dropdown card: SwiftBar's pair selection is inverted in
+// 2.1.x, which would e.g. put the white dark-mode GLM mark on a light menu
+// bar. The dark title variant only differs in bar tones and dark logo marks,
+// but an inverted pick still degrades it.
+function titleImageValue(providers, prefersDark) {
     const segments = providers.map((provider) => {
         const p = provider.usage.provider;
         const darkAsset = PROVIDER_ICON_DARK_ASSET[p];
@@ -405,17 +432,18 @@ function titleImageValue(providers) {
             barBgAlpha: 0.25,
         },
     };
-    const cacheKey = JSON.stringify(payload);
+    const cacheKey = `${prefersDark ? "dark" : "light"}:${JSON.stringify(payload)}`;
     if (titleImageCache.has(cacheKey)) {
         return titleImageCache.get(cacheKey);
     }
     try {
         const images = renderTitleImage(payload);
-        const value = images.light?.image && images.dark?.image && images.light.width && images.light.height
+        const chosen = prefersDark ? images.dark : images.light;
+        const value = chosen?.image && chosen.width && chosen.height
             ? {
-                image: `${images.light.image},${images.dark.image}`,
-                width: images.light.width,
-                height: images.light.height,
+                image: chosen.image,
+                width: chosen.width,
+                height: chosen.height,
             }
             : null;
         titleImageCache.set(cacheKey, value);
@@ -452,18 +480,8 @@ function coloredMeter(usedPercent, fillColor, width = METER_WIDTH) {
     return (filled > 0 ? ansiRGB(fillColor, "█".repeat(filled)) : "")
         + (empty > 0 ? ansiRGB(MUTED_COLOR, "░".repeat(empty)) : "");
 }
-function usageLine(label, usedPercent, resetsAt, color, now, barImage) {
+function usageLine(label, usedPercent, resetsAt, color, now) {
     const percent = `${Math.round(usedPercent).toString().padStart(3)}%`;
-    if (barImage) {
-        return line(`${label}  ${percent}  reset ${formatResetTime(resetsAt, now)}`, {
-            image: barImage.image,
-            width: barImage.width,
-            height: barImage.height,
-            color,
-            font: ROW_FONT,
-            size: 12,
-        });
-    }
     const bar = coloredMeter(usedPercent, color);
     return line(`${label}  ${bar}  ${ansiRGB(color, percent)}  reset ${formatResetTime(resetsAt, now)}`, {
         ansi: true,
@@ -478,11 +496,10 @@ function providerBadge(provider) {
     }
     return `${Math.round(fiveHour.usedPercent)}%`;
 }
+// Text-fallback rows must stay image-free (see the dropdown card comment), so
+// provider rows always use SF Symbols here; PNG marks appear only inside the
+// title image and the composite card.
 function providerIconParams(provider) {
-    const image = imageAssetBase64(PROVIDER_ICON_ASSET[provider] ?? "");
-    if (image) {
-        return { image };
-    }
     return { sfimage: PROVIDER_ICON_FALLBACK[provider] ?? "terminal.fill" };
 }
 function titleIconParams() {
@@ -519,6 +536,130 @@ function issueLabel(code) {
     }
     return code.replaceAll("_", " ").toLowerCase();
 }
+// Compact one-liners for the card: the state pill already carries the
+// verdict, so the message only keeps the numbers that inform the next action.
+function shortCardMessage(provider) {
+    if (provider.usage.blocked) {
+        return "Monthly quota exhausted — frozen until the next billing cycle.";
+    }
+    const target = provider.analysis.target;
+    const range = target ? `${target.minPercent.toFixed(1)}%-${target.maxPercent.toFixed(1)}%` : null;
+    switch (provider.analysis.state) {
+        case "LIMIT_RISK":
+            return "Near plan limit — switch provider or slow down.";
+        case "OVER_BURN":
+            return range ? `Burning fast (target ${range}).` : "Burning fast — consider slowing down.";
+        case "UNDER_BURN":
+            return range ? `Below target (${range}).` : "Below burn target.";
+        case "ON_TRACK":
+            return range ? `On pace (target ${range}).` : "On pace.";
+        default:
+            return "Learning burn pattern — advice once samples suffice.";
+    }
+}
+function cardUpdatedLabel(snapshot) {
+    const generated = new Date(snapshot.generatedAt);
+    if (Number.isNaN(generated.getTime())) {
+        return "";
+    }
+    const clock = `${String(generated.getHours()).padStart(2, "0")}:${String(generated.getMinutes()).padStart(2, "0")}`;
+    return `${generated.getMonth() + 1}/${generated.getDate()} ${clock}`;
+}
+// Per-provider observation timestamp shown next to the advice line. This
+// replaces the old stale-usage WARNING text rows: a visible "updated ..."
+// that lags tells the same story without stretching the menu wider than the
+// card (SwiftBar sizes the menu to its widest row).
+function observedUpdatedLabel(item, now) {
+    const observed = new Date(item.meta.observedAt);
+    if (Number.isNaN(observed.getTime())) {
+        return null;
+    }
+    const clock = `${String(observed.getHours()).padStart(2, "0")}:${String(observed.getMinutes()).padStart(2, "0")}`;
+    const sameDay = observed.getFullYear() === now.getFullYear()
+        && observed.getMonth() === now.getMonth()
+        && observed.getDate() === now.getDate();
+    return `updated ${sameDay ? clock : `${observed.getMonth() + 1}/${observed.getDate()} ${clock}`}`;
+}
+function cardProviderBlock(item, now) {
+    const providerId = item.usage.provider;
+    const balanceOnly = Boolean(item.usage.balance && item.usage.windows.length === 0);
+    const blocked = Boolean(item.usage.blocked);
+    const colorPair = blocked
+        ? MUTED_COLOR
+        : balanceOnly
+            ? (item.usage.balance?.isAvailable ? OK_COLOR : ALERT_COLOR)
+            : STATE_COLOR[item.analysis.state];
+    const [lightColor, darkColor] = colorPair.split(",");
+    const darkAsset = PROVIDER_ICON_DARK_ASSET[providerId];
+    const darkPath = darkAsset ? path.join(ASSET_DIR, darkAsset) : null;
+    if (balanceOnly && item.usage.balance) {
+        const currency = item.usage.balance.currency === "CNY" ? "¥" : "$";
+        return {
+            name: formatProviderLabel(providerId),
+            iconPath: providerIconPath(providerId),
+            iconPathDark: darkPath && fs.existsSync(darkPath) ? darkPath : null,
+            stateLabel: item.usage.balance.isAvailable ? "Balance" : "Depleted",
+            lightColor,
+            darkColor,
+            headline: `${currency}${item.usage.balance.total}`,
+            rows: [],
+            note: "Pay-as-you-go · no windowed quota",
+            message: null,
+            updated: observedUpdatedLabel(item, now),
+        };
+    }
+    const five = windowByName(item, "five_hour");
+    const seven = windowByName(item, "seven_day");
+    const rows = [];
+    if (five) {
+        rows.push({ label: "5h", pct: Math.round(five.usedPercent), resetLabel: `reset ${formatResetTime(five.resetsAt, now)}` });
+    }
+    if (seven) {
+        rows.push({ label: "7d", pct: Math.round(seven.usedPercent), resetLabel: `reset ${formatResetTime(seven.resetsAt, now)}` });
+    }
+    const headlinePct = five ?? seven;
+    return {
+        name: formatProviderLabel(providerId),
+        iconPath: providerIconPath(providerId),
+        iconPathDark: darkPath && fs.existsSync(darkPath) ? darkPath : null,
+        stateLabel: blocked ? "Frozen" : STATE_LABEL[item.analysis.state],
+        lightColor,
+        darkColor,
+        headline: headlinePct ? `${Math.round(headlinePct.usedPercent)}%` : STATE_LABEL[item.analysis.state],
+        rows,
+        note: null,
+        message: shortCardMessage(item),
+        updated: observedUpdatedLabel(item, now),
+    };
+}
+function usageCardValue(snapshot, providers, glyphs, now, prefersDark) {
+    const payload = {
+        profile: snapshot.profile.toUpperCase(),
+        updatedLabel: cardUpdatedLabel(snapshot),
+        providers: providers.map((item) => cardProviderBlock(item, now)),
+        scale: TITLE_IMAGE_SCALE,
+    };
+    const cacheKey = `${prefersDark ? "dark" : "light"}:${JSON.stringify(payload)}`;
+    if (usageCardCache.has(cacheKey)) {
+        return usageCardCache.get(cacheKey) ?? null;
+    }
+    try {
+        const chosen = renderUsageCard(payload, glyphs, prefersDark ? "dark" : "light");
+        const value = chosen?.image
+            ? {
+                image: chosen.image,
+                width: chosen.width,
+                height: chosen.height,
+            }
+            : null;
+        usageCardCache.set(cacheKey, value);
+        return value;
+    }
+    catch {
+        usageCardCache.set(cacheKey, null);
+        return null;
+    }
+}
 // `now` only feeds low-frequency decisions (reset due/day prefix). The output
 // must stay byte-identical across renders while the snapshot is unchanged, so
 // SwiftBar's content guard can skip the menu rebuild and menu bar repaint;
@@ -548,7 +689,8 @@ export function renderMenuBar(snapshot = loadDisplayStatusSnapshot(), paths = bu
     }
     const topState = [...providers].sort((left, right) => (STATE_PRIORITY[left.analysis.state] - STATE_PRIORITY[right.analysis.state]))[0]?.analysis.state
         ?? "RAW";
-    const titleImage = titleImageValue(providers);
+    const prefersDark = systemPrefersDark();
+    const titleImage = titleImageValue(providers, prefersDark);
     const lines = [
         compact
             ? line("", {
@@ -570,76 +712,80 @@ export function renderMenuBar(snapshot = loadDisplayStatusSnapshot(), paths = bu
                     dropdown: false,
                 }),
         "---",
-        line("Coding Usage Bar", {
+    ];
+    const glyphs = glyphSetFor(paths);
+    const card = glyphs ? usageCardValue(snapshot, providers, glyphs, now, prefersDark) : null;
+    if (card) {
+        lines.push(line("", {
+            image: card.image,
+            width: card.width,
+            height: card.height,
+        }));
+        lines.push("---");
+    }
+    else {
+        // Text-only fallback when glyph atlases are missing (never baked or
+        // unreadable): zero dropdown images so the storm cannot come back.
+        lines.push(line("Coding Usage Bar", {
             color: TEXT_COLOR,
             size: 15,
             sfimage: "flame.fill",
             sfcolor: STATE_COLOR[topState],
             badge: snapshot.profile.toUpperCase(),
-        }),
-        muted(anyProviderStale(snapshot) ? "Data stale" : "Data fresh"),
-        "---",
-    ];
-    const barDataList = [];
-    for (const item of providers) {
-        if (item.usage.balance && item.usage.windows.length === 0) {
-            continue;
-        }
-        const [lc, dc] = (item.usage.blocked ? MUTED_COLOR : STATE_COLOR[item.analysis.state]).split(",");
-        const f = windowByName(item, "five_hour");
-        const s = windowByName(item, "seven_day");
-        if (f) {
-            barDataList.push({ pct: Math.round(f.usedPercent), lightColor: lc, darkColor: dc });
-        }
-        if (s) {
-            barDataList.push({ pct: Math.round(s.usedPercent), lightColor: lc, darkColor: dc });
-        }
-    }
-    const dropdownBars = renderDropdownBarImages(barDataList);
-    let barIdx = 0;
-    for (const item of providers) {
-        const color = STATE_COLOR[item.analysis.state];
-        const five = windowByName(item, "five_hour");
-        const seven = windowByName(item, "seven_day");
-        if (item.usage.balance && item.usage.windows.length === 0) {
-            const currency = item.usage.balance.currency === "CNY" ? "¥" : "$";
-            const balanceText = `${currency}${item.usage.balance.total}`;
-            const availableLabel = item.usage.balance.isAvailable ? "Available" : "Depleted";
-            lines.push(line(`${formatProviderLabel(item.usage.provider)}  ${availableLabel}`, {
+        }));
+        lines.push(muted(anyProviderStale(snapshot) ? "Data stale" : "Data fresh"));
+        lines.push("---");
+        for (const item of providers) {
+            const five = windowByName(item, "five_hour");
+            const seven = windowByName(item, "seven_day");
+            if (item.usage.balance && item.usage.windows.length === 0) {
+                const currency = item.usage.balance.currency === "CNY" ? "¥" : "$";
+                const balanceText = `${currency}${item.usage.balance.total}`;
+                const availableLabel = item.usage.balance.isAvailable ? "Available" : "Depleted";
+                lines.push(line(`${formatProviderLabel(item.usage.provider)}  ${availableLabel}`, {
+                    ...providerIconParams(item.usage.provider),
+                    color: TEXT_COLOR,
+                    size: 14,
+                    badge: balanceText,
+                }));
+                lines.push(line(`Balance  ${balanceText}`, {
+                    color: TEXT_COLOR,
+                    font: ROW_FONT,
+                    size: 12,
+                }));
+                lines.push(line(item.analysis.message, { color: MUTED_COLOR, size: 12, length: 84 }));
+                lines.push("---");
+                continue;
+            }
+            lines.push(line(`${formatProviderLabel(item.usage.provider)}  ${item.usage.blocked ? "Blocked" : STATE_LABEL[item.analysis.state]}`, {
                 ...providerIconParams(item.usage.provider),
                 color: TEXT_COLOR,
                 size: 14,
-                badge: balanceText,
-            }));
-            lines.push(line(`Balance  ${balanceText}`, {
-                color: TEXT_COLOR,
-                font: ROW_FONT,
-                size: 12,
+                badge: item.usage.blocked ? "Frozen" : providerBadge(item),
             }));
+            if (five) {
+                lines.push(usageLine("5h", five.usedPercent, five.resetsAt, TEXT_COLOR, now));
+            }
+            if (seven) {
+                lines.push(usageLine("7d", seven.usedPercent, seven.resetsAt, TEXT_COLOR, now));
+            }
+            if (item.usage.blocked) {
+                lines.push(muted(`Blocked  ${item.usage.blocked.reason}. 5h/7d numbers above still reflect the window quotas.`));
+            }
+            lines.push(muted(targetLabel(item)));
             lines.push(line(item.analysis.message, { color: MUTED_COLOR, size: 12, length: 84 }));
             lines.push("---");
-            continue;
-        }
-        lines.push(line(`${formatProviderLabel(item.usage.provider)}  ${item.usage.blocked ? "Blocked" : STATE_LABEL[item.analysis.state]}`, {
-            ...providerIconParams(item.usage.provider),
-            color: TEXT_COLOR,
-            size: 14,
-            badge: item.usage.blocked ? "Frozen" : providerBadge(item),
-        }));
-        if (five) {
-            lines.push(usageLine("5h", five.usedPercent, five.resetsAt, TEXT_COLOR, now, dropdownBars[barIdx++]));
-        }
-        if (seven) {
-            lines.push(usageLine("7d", seven.usedPercent, seven.resetsAt, TEXT_COLOR, now, dropdownBars[barIdx++]));
         }
-        if (item.usage.blocked) {
-            lines.push(muted(`Blocked  ${item.usage.blocked.reason}. 5h/7d numbers above still reflect the window quotas.`));
-        }
-        lines.push(muted(targetLabel(item)));
-        lines.push(line(item.analysis.message, { color: MUTED_COLOR, size: 12, length: 84 }));
-        lines.push("---");
     }
-    for (const issue of snapshot.issues) {
+    // Card mode folds staleness into the per-provider "updated ..." labels, so
+    // warning-severity issue rows (stale usage, cache fallback) are dropped
+    // there; error-severity rows (setup problems the card cannot express) stay.
+    // Long issue messages are length-capped so they can never stretch the menu
+    // wider than the card image.
+    const visibleIssues = card
+        ? snapshot.issues.filter((issue) => issue.severity === "error")
+        : snapshot.issues;
+    for (const issue of visibleIssues) {
         const color = issue.severity === "error" ? ALERT_COLOR : WARNING_COLOR;
         lines.push(line(`${issue.severity.toUpperCase()}  ${issueLabel(issue.code)}`, {
             color,
@@ -647,9 +793,9 @@ export function renderMenuBar(snapshot = loadDisplayStatusSnapshot(), paths = bu
             sfimage: "exclamationmark.triangle.fill",
             sfcolor: color,
         }));
-        lines.push(muted(issue.message));
+        lines.push(line(issue.message, { color: MUTED_COLOR, size: 12, length: 84 }));
     }
-    if (snapshot.issues.length > 0) {
+    if (visibleIssues.length > 0) {
         lines.push("---");
     }
     lines.push(line(compact ? "Expand" : "Collapse", toggleParams));

package/dist/notifier.d.ts

@@ -3,5 +3,6 @@ export declare function commandExists(command: string): boolean;
 export declare function notificationBackend(): "osascript" | "terminal-notifier" | "burnt-toast" | "notify-send" | "unsupported";
 export declare function shouldNotify(analysis: BurnAnalysis, paths?: RuntimePaths, now?: Date): boolean;
 export declare function markNotified(analysis: BurnAnalysis, paths?: RuntimePaths, now?: Date): void;
+export declare function markRecovered(analysis: BurnAnalysis, paths?: RuntimePaths): void;
 export declare function iconForAnalysis(analysis: BurnAnalysis): string;
 export declare function sendNotification(analysis: BurnAnalysis, dryRun?: boolean): string;