coding-usage-bar 0.3.1 → 0.4.0

package/dist/cli.js

@@ -8,6 +8,7 @@ import { runDaemonOnce } from "./daemon.js";
 import { doctorHasFailures, formatDoctor, runDoctor } from "./doctor.js";
 import { installMenuBar, renderMenuBar, uninstallMenuBar, toggleCompactMode } from "./menubar.js";
 import { buildPaths } from "./paths.js";
+import { bakeGlyphAtlases } from "./glyphs.js";
 import { maybePromptForStar } from "./star.js";
 function hasFlag(args, flag) {
     return args.includes(flag);
@@ -24,6 +25,7 @@ Usage:
   coding-usage-bar menubar install [--dry-run]
   coding-usage-bar menubar uninstall [--dry-run]
   coding-usage-bar menubar toggle-compact
+  coding-usage-bar menubar bake-glyphs [--dry-run]
   coding-usage-bar ingest claude-statusline
   coding-usage-bar daemon [--once] [--dry-run]
 `);
@@ -108,6 +110,10 @@ async function main() {
             console.log(isCompact ? "Compact" : "Expanded");
             return;
         }
+        if (command === "menubar" && subcommand === "bake-glyphs") {
+            console.log(bakeGlyphAtlases(buildPaths(), { dryRun }).join("\n"));
+            return;
+        }
         if (command === "ingest" && subcommand === "claude-statusline") {
             const input = await readStdin();
             const parsed = JSON.parse(input);

package/dist/daemon.js

@@ -1,10 +1,13 @@
 import { collectStatusSnapshot } from "./runtime.js";
-import { markNotified, sendNotification, shouldNotify } from "./notifier.js";
+import { markNotified, markRecovered, sendNotification, shouldNotify } from "./notifier.js";
 export async function runDaemonOnce(options = {}) {
     const snapshot = await collectStatusSnapshot();
     const messages = [];
     for (const { analysis } of snapshot.providers) {
         if (!shouldNotify(analysis)) {
+            if (!options.dryRun) {
+                markRecovered(analysis);
+            }
             continue;
         }
         messages.push(sendNotification(analysis, options.dryRun));

package/dist/glm.d.ts

@@ -4,7 +4,7 @@ interface GlmLimit {
     unit?: number;
     number?: number;
     percentage: number;
-    nextResetTime: number;
+    nextResetTime?: number;
 }
 interface GlmQuotaResponse {
     success: boolean;

package/dist/glm.js

@@ -16,24 +16,54 @@ export async function fetchGlmQuota(config) {
     }
     return (await response.json());
 }
+function resetTimeIso(value) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+        return null;
+    }
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+// GLM identifies windows by shape: unit 3 + number 5 is the 5-hour window,
+// unit 6 + number 1 is the weekly window. Matching on shape (with a
+// reset-time sort as fallback) matters because sorting alone breaks when a
+// window omits nextResetTime — which GLM does for a fresh window with zero
+// usage (same proto-style field omission as Kimi's zero `used`). The zero
+// percentage is a real signal and must not be dropped; a missing reset time
+// falls back to `observedAt`, which renders as "reset due".
+function pickTokenWindows(limits) {
+    const tokenLimits = limits.filter((limit) => limit.type === "TOKENS_LIMIT");
+    if (tokenLimits.length < 2) {
+        return null;
+    }
+    let five = tokenLimits.find((limit) => limit.unit === 3 && limit.number === 5) ?? null;
+    let seven = tokenLimits.find((limit) => limit.unit === 6 && limit.number === 1) ?? null;
+    if (!five || !seven) {
+        const rest = tokenLimits
+            .filter((limit) => limit !== five && limit !== seven)
+            .sort((a, b) => (a.nextResetTime ?? 0) - (b.nextResetTime ?? 0));
+        five = five ?? rest.shift() ?? null;
+        seven = seven ?? rest.shift() ?? null;
+    }
+    return five && seven ? { five, seven } : null;
+}
 export function usageFromGlmQuota(quota, options) {
     if (!quota.success || !quota.data) {
         return null;
     }
-    const tokenLimits = quota.data.limits.filter((limit) => limit.type === "TOKENS_LIMIT");
-    if (tokenLimits.length < 2) {
+    const picked = pickTokenWindows(quota.data.limits);
+    if (!picked) {
         return null;
     }
-    const sortedByReset = [...tokenLimits].sort((a, b) => a.nextResetTime - b.nextResetTime);
-    const fiveHourRaw = sortedByReset[0];
-    const sevenDayRaw = sortedByReset[1];
+    // new Date(undefined).toISOString() throws RangeError("Invalid time value"),
+    // which used to fail the whole live collection; never convert unchecked.
+    const fallbackIso = options.observedAt ?? new Date().toISOString();
     const fiveHour = normalizeWindow("five_hour", {
-        used_percent: fiveHourRaw.percentage,
-        resets_at: new Date(fiveHourRaw.nextResetTime).toISOString(),
+        used_percent: picked.five.percentage,
+        resets_at: resetTimeIso(picked.five.nextResetTime) ?? fallbackIso,
     }, 300);
     const sevenDay = normalizeWindow("seven_day", {
-        used_percent: sevenDayRaw.percentage,
-        resets_at: new Date(sevenDayRaw.nextResetTime).toISOString(),
+        used_percent: picked.seven.percentage,
+        resets_at: resetTimeIso(picked.seven.nextResetTime) ?? fallbackIso,
     }, 10080);
     if (!fiveHour || !sevenDay) {
         return null;

package/dist/glyphs.d.ts

@@ -0,0 +1,68 @@
+import { DecodedPNG } from "./png.js";
+import { RuntimePaths } from "./types.js";
+export declare const GLYPH_STYLES: readonly [{
+    readonly key: "r22";
+    readonly px: 22;
+    readonly weight: "regular";
+}, {
+    readonly key: "r24";
+    readonly px: 24;
+    readonly weight: "regular";
+}, {
+    readonly key: "s22";
+    readonly px: 22;
+    readonly weight: "semibold";
+}, {
+    readonly key: "s28";
+    readonly px: 28;
+    readonly weight: "semibold";
+}, {
+    readonly key: "b20";
+    readonly px: 20;
+    readonly weight: "bold";
+}, {
+    readonly key: "b24";
+    readonly px: 24;
+    readonly weight: "bold";
+}, {
+    readonly key: "b26";
+    readonly px: 26;
+    readonly weight: "bold";
+}, {
+    readonly key: "b38";
+    readonly px: 38;
+    readonly weight: "bold";
+}];
+export type GlyphStyleKey = (typeof GLYPH_STYLES)[number]["key"];
+export declare function glyphCharset(): string[];
+export interface GlyphCell {
+    x: number;
+    w: number;
+    adv: number;
+}
+export interface GlyphStyleMetrics {
+    px: number;
+    weight: string;
+    ascent: number;
+    descent: number;
+    pad: number;
+    cellH: number;
+    glyphs: Record<string, GlyphCell>;
+}
+export interface GlyphMetricsFile {
+    version: number;
+    styles: Record<string, GlyphStyleMetrics>;
+}
+export interface LoadedGlyphStyle {
+    metrics: GlyphStyleMetrics;
+    atlas: DecodedPNG;
+}
+export type GlyphSet = Record<string, LoadedGlyphStyle>;
+export declare function glyphMetricsPath(paths: RuntimePaths): string;
+export declare function glyphAtlasPath(paths: RuntimePaths, styleKey: string): string;
+export declare function bakeGlyphAtlases(paths: RuntimePaths, options?: {
+    dryRun?: boolean;
+}): string[];
+export declare function loadGlyphSet(paths: RuntimePaths): GlyphSet | null;
+export declare function measureText(style: LoadedGlyphStyle, text: string): number;
+export declare function ellipsize(style: LoadedGlyphStyle, text: string, maxWidth: number): string;

package/dist/glyphs.js

@@ -0,0 +1,176 @@
+import fs from "node:fs";
+import path from "node:path";
+import { execFileSync } from "node:child_process";
+import { decodePNG } from "./png.js";
+// Glyph atlases let the pure-JS card renderer draw native-looking SF text
+// without ever spawning AppKit at render time. Baking runs osascript exactly
+// once, at install time, on the user's own machine (the SF fonts live there;
+// nothing font-derived ships in the npm package). Render-time consumers only
+// read the baked PNG + metrics files; when they are missing the menu bar
+// falls back to text-only rows, so a failed bake can never break rendering.
+// All sizes are physical pixels (2x point sizes; the card renders at scale 2).
+export const GLYPH_STYLES = [
+    { key: "r22", px: 22, weight: "regular" },
+    { key: "r24", px: 24, weight: "regular" },
+    { key: "s22", px: 22, weight: "semibold" },
+    { key: "s28", px: 28, weight: "semibold" },
+    { key: "b20", px: 20, weight: "bold" },
+    { key: "b24", px: 24, weight: "bold" },
+    { key: "b26", px: 26, weight: "bold" },
+    { key: "b38", px: 38, weight: "bold" },
+];
+// Printable ASCII plus the few extras the card actually renders.
+export function glyphCharset() {
+    const chars = [];
+    for (let code = 32; code <= 126; code++) {
+        chars.push(String.fromCharCode(code));
+    }
+    chars.push("¥", "·", "—", "…");
+    return chars;
+}
+export function glyphMetricsPath(paths) {
+    return path.join(paths.glyphsDir, "metrics.json");
+}
+export function glyphAtlasPath(paths, styleKey) {
+    return path.join(paths.glyphsDir, `${styleKey}.png`);
+}
+// JXA program executed by `osascript -l JavaScript`. It renders every charset
+// glyph for every style into one horizontal PNG strip per style (white text on
+// transparent, monospacedDigit variant so numbers stay tabular) and returns
+// the metrics JSON on stdout. Kept dependency-free and side-effect-scoped to
+// the output directory it is handed.
+const BAKE_JXA = `
+ObjC.import("Cocoa");
+function run(argv) {
+  const spec = JSON.parse(argv[0]);
+  const weights = {
+    regular: $.NSFontWeightRegular,
+    semibold: $.NSFontWeightSemibold,
+    bold: $.NSFontWeightBold,
+  };
+  const out = { version: 1, styles: {} };
+  for (const style of spec.styles) {
+    const font = $.NSFont.monospacedDigitSystemFontOfSizeWeight(style.px, weights[style.weight]);
+    const attrs = $.NSDictionary.dictionaryWithObjectsForKeys(
+      $([font, $.NSColor.whiteColor]),
+      $([$.NSFontAttributeName, $.NSForegroundColorAttributeName]),
+    );
+    const ascent = Math.ceil(font.ascender);
+    const descent = Math.ceil(Math.abs(font.descender));
+    const pad = 2;
+    const cellH = ascent + descent + pad * 2;
+    const cells = [];
+    let stripW = 0;
+    for (const ch of spec.chars) {
+      const adv = $(ch).sizeWithAttributes(attrs).width;
+      const w = Math.ceil(adv) + pad * 2;
+      cells.push({ ch, x: stripW, w, adv });
+      stripW += w;
+    }
+    const rep = $.NSBitmapImageRep.alloc.initWithBitmapDataPlanesPixelsWidePixelsHighBitsPerSampleSamplesPerPixelHasAlphaIsPlanarColorSpaceNameBytesPerRowBitsPerPixel(
+      null, stripW, cellH, 8, 4, true, false, $.NSDeviceRGBColorSpace, 0, 0,
+    );
+    $.NSGraphicsContext.saveGraphicsState;
+    $.NSGraphicsContext.setCurrentContext($.NSGraphicsContext.graphicsContextWithBitmapImageRep(rep));
+    for (const cell of cells) {
+      $(cell.ch).drawAtPointWithAttributes($.NSMakePoint(cell.x + pad, pad), attrs);
+    }
+    $.NSGraphicsContext.restoreGraphicsState;
+    const png = rep.representationUsingTypeProperties($.NSBitmapImageFileTypePNG, $.NSDictionary.dictionary);
+    png.writeToFileAtomically($(spec.outDir + "/" + style.key + ".png"), true);
+    const glyphs = {};
+    for (const cell of cells) {
+      glyphs[cell.ch] = { x: cell.x, w: cell.w, adv: cell.adv };
+    }
+    out.styles[style.key] = {
+      px: style.px,
+      weight: style.weight,
+      ascent, descent, pad, cellH,
+      glyphs,
+    };
+  }
+  return JSON.stringify(out);
+}
+`;
+export function bakeGlyphAtlases(paths, options = {}) {
+    if (process.platform !== "darwin") {
+        return ["Glyph atlas baking requires macOS; menu bar card rendering will use the text fallback."];
+    }
+    if (options.dryRun) {
+        return [`[dry-run] would bake ${GLYPH_STYLES.length} glyph atlases into ${paths.glyphsDir}`];
+    }
+    fs.mkdirSync(paths.glyphsDir, { recursive: true });
+    const spec = {
+        outDir: paths.glyphsDir,
+        chars: glyphCharset(),
+        styles: GLYPH_STYLES.map((style) => ({ key: style.key, px: style.px, weight: style.weight })),
+    };
+    const stdout = execFileSync("osascript", ["-l", "JavaScript", "-e", BAKE_JXA, JSON.stringify(spec)], {
+        encoding: "utf8",
+        timeout: 60_000,
+    });
+    const metrics = JSON.parse(stdout.trim());
+    for (const style of GLYPH_STYLES) {
+        if (!metrics.styles[style.key] || !fs.existsSync(glyphAtlasPath(paths, style.key))) {
+            throw new Error(`Glyph bake incomplete: missing atlas for style ${style.key}`);
+        }
+    }
+    fs.writeFileSync(glyphMetricsPath(paths), `${JSON.stringify(metrics)}\n`, "utf8");
+    return [`Baked ${GLYPH_STYLES.length} glyph atlases: ${paths.glyphsDir}`];
+}
+// Returns null when any piece is missing or unreadable; callers treat null as
+// "use the text-only fallback", never as an error.
+export function loadGlyphSet(paths) {
+    let metrics;
+    try {
+        metrics = JSON.parse(fs.readFileSync(glyphMetricsPath(paths), "utf8"));
+    }
+    catch {
+        return null;
+    }
+    const set = {};
+    for (const style of GLYPH_STYLES) {
+        const styleMetrics = metrics.styles?.[style.key];
+        if (!styleMetrics) {
+            return null;
+        }
+        try {
+            const atlas = decodePNG(fs.readFileSync(glyphAtlasPath(paths, style.key)));
+            set[style.key] = { metrics: styleMetrics, atlas };
+        }
+        catch {
+            return null;
+        }
+    }
+    return set;
+}
+export function measureText(style, text) {
+    let width = 0;
+    for (const ch of text) {
+        const cell = style.metrics.glyphs[ch] ?? style.metrics.glyphs["?"];
+        if (cell) {
+            width += cell.adv;
+        }
+    }
+    return width;
+}
+// Trims `text` with a trailing ellipsis so it fits within maxWidth pixels.
+export function ellipsize(style, text, maxWidth) {
+    if (measureText(style, text) <= maxWidth) {
+        return text;
+    }
+    const ellipsis = "…";
+    const ellipsisWidth = measureText(style, ellipsis);
+    let result = "";
+    let width = 0;
+    for (const ch of text) {
+        const cell = style.metrics.glyphs[ch] ?? style.metrics.glyphs["?"];
+        const adv = cell ? cell.adv : 0;
+        if (width + adv + ellipsisWidth > maxWidth) {
+            break;
+        }
+        result += ch;
+        width += adv;
+    }
+    return `${result.trimEnd()}${ellipsis}`;
+}

package/dist/install.js

@@ -6,6 +6,7 @@ import { claudeStatusLineHasIngest, getClaudeStatusLineCommand, readClaudeSettin
 import { ensureConfig, readConfig } from "./config.js";
 import { ensureDir, isFile, readJsonFile, writeJsonAtomic } from "./fs-util.js";
 import { addSwiftBarToLoginItems, ensureSwiftBarInstalled, installMenuBar, openSwiftBar, uninstallMenuBar } from "./menubar.js";
+import { bakeGlyphAtlases } from "./glyphs.js";
 import { buildPaths } from "./paths.js";
 import { stableNodeExecutable } from "./node-runtime.js";
 export const LAUNCHD_LABEL = "com.duying.coding-usage-bar";
@@ -354,6 +355,15 @@ export function install(options = {}) {
             messages.push("  Get your key at: https://open.bigmodel.cn");
         }
     }
+    // The dropdown card needs baked glyph atlases; a failed bake must not fail
+    // the install — rendering falls back to text-only rows until a bake works.
+    try {
+        messages.push(...bakeGlyphAtlases(paths, { dryRun }));
+    }
+    catch (error) {
+        messages.push(`Glyph atlas bake failed: ${error instanceof Error ? error.message : String(error)}`);
+        messages.push("The menu bar dropdown will use the text-only fallback; retry with: coding-usage-bar menubar bake-glyphs");
+    }
     messages.push(...ensureSwiftBarInstalled({ dryRun }));
     messages.push(...installMenuBar({ dryRun }));
     if (!dryRun) {
@@ -400,6 +410,15 @@ export function uninstall(options = {}) {
         messages.push(`CLI shim is user-managed; leaving it unchanged: ${paths.cliBinFile}`);
     }
     messages.push(...uninstallMenuBar({ dryRun }));
+    if (fs.existsSync(paths.glyphsDir)) {
+        if (dryRun) {
+            messages.push(`[dry-run] would remove glyph atlases: ${paths.glyphsDir}`);
+        }
+        else {
+            fs.rmSync(paths.glyphsDir, { recursive: true, force: true });
+            messages.push(`Removed glyph atlases: ${paths.glyphsDir}`);
+        }
+    }
     const settings = readClaudeSettings(paths.claudeSettingsFile);
     const existing = getClaudeStatusLineCommand(settings);
     if (existing === paths.claudeStatusLineScript && settings) {

package/dist/menubar-card.d.ts

@@ -0,0 +1,30 @@
+import { GlyphSet } from "./glyphs.js";
+export interface CardBarRow {
+    label: string;
+    pct: number;
+    resetLabel: string;
+}
+export interface CardProviderBlock {
+    name: string;
+    iconPath: string | null;
+    iconPathDark: string | null;
+    stateLabel: string;
+    lightColor: string;
+    darkColor: string;
+    headline: string;
+    rows: CardBarRow[];
+    note: string | null;
+    message: string | null;
+    updated: string | null;
+}
+export interface UsageCardPayload {
+    profile: string;
+    updatedLabel: string;
+    providers: CardProviderBlock[];
+    scale: number;
+}
+export declare function renderUsageCard(payload: UsageCardPayload, glyphs: GlyphSet, mode: "light" | "dark"): {
+    image: string;
+    width: number;
+    height: number;
+};

package/dist/menubar-card.js

@@ -0,0 +1,189 @@
+import { Canvas, parseHex, loadIcon } from "./menubar-render.js";
+import { measureText, ellipsize } from "./glyphs.js";
+const LIGHT = {
+    text: parseHex("111827"),
+    muted: parseHex("6B7280"),
+    msg: parseHex("8E8E93"),
+    track: parseHex("000000"),
+    trackAlpha: 0.10,
+    sep: parseHex("000000"),
+    sepAlpha: 0.08,
+};
+const DARK = {
+    text: parseHex("F9FAFB"),
+    muted: parseHex("A1A1AA"),
+    msg: parseHex("7C7C82"),
+    track: parseHex("FFFFFF"),
+    trackAlpha: 0.12,
+    sep: parseHex("FFFFFF"),
+    sepAlpha: 0.09,
+};
+// Layout in points (multiplied by payload.scale when drawing). PAD_X is tiny
+// because the menu item's own content inset already provides the left/right
+// margin; the image's content edge then lines up with native item text.
+const W = 460;
+const PAD_X = 2;
+const TOP_PAD = 8;
+const HEADER_H = 18;
+const HEADER_GAP = 12;
+const BLOCK_PAD_Y = 10;
+const HEAD_H = 24;
+const ROW_H = 21;
+const MSG_GAP = 6;
+const MSG_H = 14;
+const BOTTOM_PAD = 4;
+const RIGHT_EDGE = W - PAD_X;
+const RESET_COL_W = 104;
+const PCT_COL_W = 36;
+const COL_GAP = 8;
+const TRACK_X = PAD_X + 18 + 16;
+const PILL_H = 16;
+const PILL_PAD_X = 7;
+const PILL_RADIUS = 8;
+function blockHeight(block) {
+    let h = BLOCK_PAD_Y * 2 + HEAD_H;
+    h += block.rows.length * ROW_H;
+    if (block.note) {
+        h += ROW_H;
+    }
+    if (block.message) {
+        h += MSG_GAP + MSG_H;
+    }
+    return h;
+}
+function cardHeight(payload) {
+    let h = TOP_PAD + HEADER_H + HEADER_GAP;
+    payload.providers.forEach((block, idx) => {
+        h += blockHeight(block);
+        if (idx < payload.providers.length - 1) {
+            h += 1;
+        }
+    });
+    return h + BOTTOM_PAD;
+}
+function style(ctx, key) {
+    const loaded = ctx.glyphs[key];
+    if (!loaded) {
+        throw new Error(`Glyph style missing from atlas set: ${key}`);
+    }
+    return loaded;
+}
+// `baselineTopPt` is the distance from the card's top edge to the text
+// baseline, in points; conversion to the canvas' bottom-left origin happens
+// here so the layout code can think strictly top-down.
+function drawText(ctx, styleKey, text, xPt, baselineTopPt, color, alpha = 1) {
+    const loaded = style(ctx, styleKey);
+    const { atlas, metrics } = loaded;
+    const s = ctx.scale;
+    const cellBottom = ctx.heightPt * s - (baselineTopPt * s + metrics.descent + metrics.pad);
+    let cursor = xPt * s;
+    for (const ch of text) {
+        const cell = metrics.glyphs[ch] ?? metrics.glyphs["?"];
+        if (!cell) {
+            continue;
+        }
+        ctx.canvas.drawGlyphCell(atlas, cell.x, cell.w, cursor - metrics.pad, cellBottom, color, alpha);
+        cursor += cell.adv;
+    }
+    return cursor / s;
+}
+function textWidthPt(ctx, styleKey, text) {
+    return measureText(style(ctx, styleKey), text) / ctx.scale;
+}
+function fillRect(ctx, xPt, topPt, wPt, hPt, radiusPt, color, alpha) {
+    const s = ctx.scale;
+    ctx.canvas.fillRoundedRect(xPt * s, (ctx.heightPt - topPt - hPt) * s, wPt * s, hPt * s, radiusPt * s, color, alpha);
+}
+function drawPill(ctx, xPt, topPt, text, color) {
+    const textW = textWidthPt(ctx, "b20", text);
+    const pillW = textW + PILL_PAD_X * 2;
+    fillRect(ctx, xPt, topPt, pillW, PILL_H, PILL_RADIUS, color, 0.13);
+    drawText(ctx, "b20", text, xPt + PILL_PAD_X, topPt + 11.5, color);
+    return pillW;
+}
+function drawProviderBlock(ctx, block, topPt, mode, variant) {
+    const color = parseHex(mode === "dark" ? block.darkColor : block.lightColor);
+    let y = topPt + BLOCK_PAD_Y;
+    const iconFile = mode === "dark" && block.iconPathDark ? block.iconPathDark : block.iconPath;
+    if (iconFile) {
+        const icon = loadIcon(iconFile);
+        if (icon) {
+            const s = ctx.scale;
+            ctx.canvas.drawIcon(icon, PAD_X * s, (ctx.heightPt - (y + 3) - 18) * s, 18 * s);
+        }
+    }
+    const nameEnd = drawText(ctx, "s28", block.name, PAD_X + 26, y + 17, variant.text);
+    drawPill(ctx, nameEnd + 8, y + 4, block.stateLabel, color);
+    const headlineW = textWidthPt(ctx, "b38", block.headline);
+    drawText(ctx, "b38", block.headline, RIGHT_EDGE - headlineW, y + 19, color);
+    y += HEAD_H;
+    for (const row of block.rows) {
+        const baseline = y + 14;
+        drawText(ctx, "s22", row.label, PAD_X, baseline, variant.muted);
+        const trackW = RIGHT_EDGE - RESET_COL_W - COL_GAP - PCT_COL_W - COL_GAP - TRACK_X;
+        const trackTop = y + 7.5;
+        fillRect(ctx, TRACK_X, trackTop, trackW, 6, 3, variant.track, variant.trackAlpha);
+        const pct = Math.max(0, Math.min(100, row.pct));
+        if (pct > 0) {
+            const fillW = Math.max(6, (trackW * pct) / 100);
+            fillRect(ctx, TRACK_X, trackTop, fillW, 6, 3, color, 1);
+        }
+        const pctText = `${Math.round(pct)}%`;
+        const pctW = textWidthPt(ctx, "b24", pctText);
+        drawText(ctx, "b24", pctText, RIGHT_EDGE - RESET_COL_W - COL_GAP - pctW, baseline, color);
+        const resetW = textWidthPt(ctx, "r22", row.resetLabel);
+        drawText(ctx, "r22", row.resetLabel, RIGHT_EDGE - resetW, baseline, variant.muted);
+        y += ROW_H;
+    }
+    if (block.note) {
+        drawText(ctx, "r24", block.note, PAD_X, y + 14, variant.muted);
+        if (block.updated) {
+            const updatedW = textWidthPt(ctx, "r22", block.updated);
+            drawText(ctx, "r22", block.updated, RIGHT_EDGE - updatedW, y + 14, variant.msg);
+        }
+        y += ROW_H;
+    }
+    if (block.message) {
+        const baseline = y + MSG_GAP + 11;
+        let messageMaxPt = W - PAD_X * 2;
+        if (block.updated) {
+            const updatedW = textWidthPt(ctx, "r22", block.updated);
+            drawText(ctx, "r22", block.updated, RIGHT_EDGE - updatedW, baseline, variant.msg);
+            messageMaxPt -= updatedW + 12;
+        }
+        const fitted = ellipsize(style(ctx, "r22"), block.message, messageMaxPt * ctx.scale);
+        drawText(ctx, "r22", fitted, PAD_X, baseline, variant.msg);
+    }
+}
+function drawCard(payload, glyphs, mode) {
+    const variant = mode === "dark" ? DARK : LIGHT;
+    const heightPt = cardHeight(payload);
+    const s = payload.scale || 2;
+    const canvas = new Canvas(Math.round(W * s), Math.round(heightPt * s));
+    const ctx = { canvas, glyphs, scale: s, heightPt };
+    const titleEnd = drawText(ctx, "b26", "Coding Usage Bar", PAD_X, TOP_PAD + 14, variant.text);
+    drawPill(ctx, titleEnd + 8, TOP_PAD + 1, payload.profile, variant.muted);
+    const updatedW = textWidthPt(ctx, "r22", payload.updatedLabel);
+    drawText(ctx, "r22", payload.updatedLabel, RIGHT_EDGE - updatedW, TOP_PAD + 13, variant.muted);
+    let top = TOP_PAD + HEADER_H + HEADER_GAP;
+    payload.providers.forEach((block, idx) => {
+        drawProviderBlock(ctx, block, top, mode, variant);
+        top += blockHeight(block);
+        if (idx < payload.providers.length - 1) {
+            fillRect(ctx, PAD_X, top, W - PAD_X * 2, 0.5, 0, variant.sep, variant.sepAlpha * 2);
+            top += 1;
+        }
+    });
+    return {
+        image: canvas.toPNGBase64(),
+        width: W,
+        height: Math.round(heightPt),
+    };
+}
+// Renders a single appearance variant: the caller picks light or dark from
+// the current system appearance (see systemPrefersDark in menubar.ts) instead
+// of shipping a SwiftBar light,dark pair, whose selection is broken in
+// several SwiftBar versions.
+export function renderUsageCard(payload, glyphs, mode) {
+    return drawCard(payload, glyphs, mode);
+}

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;

package/dist/notifier.js

@@ -6,6 +6,14 @@ import { readJsonFile, writeJsonAtomic } from "./fs-util.js";
 import { buildPaths, installedAssetPath } from "./paths.js";
 import { formatDurationUntil } from "./format.js";
 import { writeNotificationCard } from "./card.js";
+// State is keyed by provider. Legacy records were keyed `provider:state` and
+// re-notified on a cooldown, which spammed osascript spawns all day; dropping
+// those keys makes each provider re-notify once after upgrade, then follow the
+// transition-based rules.
+function readNotificationState(paths) {
+    const raw = readJsonFile(paths.notificationStateFile) ?? {};
+    return Object.fromEntries(Object.entries(raw).filter(([key]) => !key.includes(":")));
+}
 export function commandExists(command) {
     const result = spawnSync("/bin/sh", ["-c", `command -v ${command}`], {
         stdio: "ignore",
@@ -24,33 +32,56 @@ export function notificationBackend() {
 function cooldownMinutes(profile) {
     return profile === "high" ? 15 : 30;
 }
-function notificationKey(analysis) {
-    return `${analysis.provider}:${analysis.state}`;
-}
+// Notify only on a state transition or when the 5h window resets while the
+// alert persists — never on a periodic cooldown. The cooldown only acts as a
+// per-provider floor between notifications so a flapping state cannot spam.
 export function shouldNotify(analysis, paths = buildPaths(), now = new Date()) {
     if (analysis.state === "RAW" || analysis.state === "ON_TRACK") {
         return false;
     }
-    const state = readJsonFile(paths.notificationStateFile) ?? {};
-    const key = notificationKey(analysis);
-    const previous = state[key];
-    const resetAt = analysis.fiveHour?.resetsAt;
+    const previous = readNotificationState(paths)[analysis.provider];
     if (!previous) {
         return true;
     }
-    if (previous.resetAt && resetAt && previous.resetAt !== resetAt) {
+    if (previous.state === analysis.state) {
+        const resetAt = analysis.fiveHour?.resetsAt;
+        const sameWindow = !previous.resetAt || !resetAt || previous.resetAt === resetAt;
+        if (sameWindow) {
+            return false;
+        }
+    }
+    if (!previous.notifiedAt) {
         return true;
     }
     const elapsedMinutes = (now.getTime() - Date.parse(previous.notifiedAt)) / 60_000;
     return elapsedMinutes >= cooldownMinutes(analysis.profile);
 }
 export function markNotified(analysis, paths = buildPaths(), now = new Date()) {
-    const state = readJsonFile(paths.notificationStateFile) ?? {};
-    state[notificationKey(analysis)] = {
-        notifiedAt: now.toISOString(),
-        resetAt: analysis.fiveHour?.resetsAt,
-    };
-    writeJsonAtomic(paths.notificationStateFile, state);
+    const state = readNotificationState(paths);
+    writeJsonAtomic(paths.notificationStateFile, {
+        ...state,
+        [analysis.provider]: {
+            state: analysis.state,
+            notifiedAt: now.toISOString(),
+            resetAt: analysis.fiveHour?.resetsAt,
+        },
+    });
+}
+// Record recovery so the next entry into an alert state counts as a transition
+// and notifies again. Keeps notifiedAt so the anti-flap floor still applies.
+export function markRecovered(analysis, paths = buildPaths()) {
+    if (analysis.state !== "ON_TRACK") {
+        return;
+    }
+    const state = readNotificationState(paths);
+    const previous = state[analysis.provider];
+    if (!previous || previous.state === "ON_TRACK") {
+        return;
+    }
+    writeJsonAtomic(paths.notificationStateFile, {
+        ...state,
+        [analysis.provider]: { ...previous, state: "ON_TRACK" },
+    });
 }
 function notificationText(analysis) {
     const provider = analysis.provider === "claude" ? "Claude" : analysis.provider === "glm" ? "GLM" : analysis.provider === "minimax" ? "MiniMax" : analysis.provider === "deepseek" ? "DeepSeek" : analysis.provider === "kimi" ? "Kimi" : "Codex";

package/dist/paths.js

@@ -22,6 +22,7 @@ export function buildPaths(homeDir = os.homedir()) {
         launchAgentFile: path.join(homeDir, "Library", "LaunchAgents", "com.duying.coding-usage-bar.plist"),
         claudeSettingsFile: path.join(homeDir, ".claude", "settings.json"),
         claudeStatusLineScript: path.join(stateDir, "claude", "statusline.sh"),
+        glyphsDir: path.join(stateDir, "glyphs"),
     };
 }
 export function installedAssetPath(homeDir, assetName) {

package/dist/types.d.ts

@@ -78,6 +78,7 @@ export interface RuntimePaths {
     launchAgentFile: string;
     claudeSettingsFile: string;
     claudeStatusLineScript: string;
+    glyphsDir: string;
 }
 export interface ProviderStatus {
     usage: ProviderUsage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-usage-bar",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "macOS menu bar usage monitor for Claude Code, Codex, GLM, DeepSeek, and MiniMax.",
   "author": "hanzhangzzz",
   "license": "MIT",