coding-usage-bar 0.3.0 → 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/kimi.js

@@ -16,11 +16,16 @@ function asNumber(value) {
 }
 // Kimi reports limit/used/remaining per window. Prefer the used/limit ratio;
 // when limit is 0 or missing, derive the total from used + remaining instead of
-// falling back to 0% while a real signal exists.
+// falling back to 0% while a real signal exists. Kimi also omits zero-valued
+// fields entirely (proto3 JSON): a fresh window with no usage reports only
+// limit + remaining, so derive used from limit - remaining instead of failing.
 function percentFromDetail(detail) {
     const limit = asNumber(detail.limit);
-    const used = asNumber(detail.used);
+    let used = asNumber(detail.used);
     const remaining = asNumber(detail.remaining);
+    if (used === null && limit !== null && remaining !== null) {
+        used = Math.max(0, limit - remaining);
+    }
     if (limit !== null && limit > 0 && used !== null) {
         return Math.max(0, Math.min(100, (used / limit) * 100));
     }

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<{