hacklab 0.3.1 → 0.4.2

package/dist/share-card.js

@@ -1,36 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "satori/jsx/jsx-runtime";
 import { execSync } from 'node:child_process';
-import { mkdir, writeFile } from 'node:fs/promises';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
 import { Resvg } from '@resvg/resvg-js';
 import satori from 'satori';
-const BELT_COLORS = {
-    white: '#E8E8E8',
-    orange: '#FF8C00',
-    red: '#DC2626',
-    blue: '#2563EB',
-    cyan: '#06B6D4',
-    yellow: '#EAB308',
-    lime: '#84CC16',
-    green: '#22C55E',
-    pink: '#EC4899',
-    purple: '#A855F7',
-    black: '#FFFFFF',
-};
-const TITLE_KANJI = {
-    gaijin: '\u5916\u4eba',
-    deshi: '\u5F1F\u5B50',
-    ronin: '\u6D6A\u4EBA',
-    shinobi: '\u5FCD',
-    samurai: '\u4F8D',
-    senpai: '\u5148\u8F29',
-    tatsujin: '\u9054\u4EBA',
-    kensei: '\u5263\u8056',
-    oni: '\u9B3C',
-    ryujin: '\u9F8D\u795E',
-    sensei: '\u5E2B\u7BC4',
-};
+// ── Design tokens (DESIGN.md) ──────────────────────────────────────────────
+// Phosphor Mint is the one signal colour: corner brackets, the belt progress
+// bar, the ASCII proficiency bars, and the lit heatmap cells. Everything else
+// is neutral graphite + grey. Numbers + the nametag are Orbitron; every other
+// glyph is JetBrains Mono.
+const ACCENT = '#82F5C6';
+const ACCENT_TRACK = 'rgba(130,245,198,0.1)'; // unfilled bar / belt track
+const PAGE_BG = '#0B0D0C';
+const CARD_BG = '#101513';
+const BORDER = '#1D221F';
+const WHITE = '#FFFFFF';
+const LABEL = '#B4B4B4';
+const LABEL_DIM = '#9A9A9A';
+const FOOTER_FG = '#8A8A8A';
+// Activity heatmap: 26 weeks × 7 days, matching the web profile (column = week,
+// row = day-of-week), so the CLI card and the site read identically.
+const HEAT_COLS = 26;
+const HEAT_ROWS = 7;
+const HEAT_CELL = 14;
+const HEAT_GAP = 3;
 function formatTokens(n) {
     if (n >= 1_000_000_000)
         return `${(n / 1_000_000_000).toFixed(1)}B`;
@@ -40,304 +34,347 @@ function formatTokens(n) {
         return `${(n / 1_000).toFixed(0)}K`;
     return String(n);
 }
-function Heatmap({ data, accent, }) {
-    // Build 12-week grid (84 days)
-    const now = new Date();
-    const cells = [];
-    for (let i = 83; i >= 0; i--) {
-        const d = new Date(now);
-        d.setUTCDate(d.getUTCDate() - i);
-        const dateStr = d.toISOString().split('T')[0];
-        const entry = data.find((e) => e.date === dateStr);
-        cells.push({ date: dateStr, tokens: entry?.tokens ?? 0 });
+// Fold a raw model id into a short display label, keeping the version:
+//   "claude-opus-4-1-20250805" → "OPUS 4.1"
+//   "claude-3-5-sonnet-latest" → "SONNET 3.5"
+//   "gpt-5.3-codex"            → "GPT-5.3-CODEX"
+export function shortModelName(raw) {
+    const s = raw.trim().toLowerCase();
+    if (!s)
+        return '';
+    // Drop a trailing release date (…-20250805) so it doesn't crowd the label.
+    const t = s.replace(/[-_]?\d{8}$/, '');
+    const tier = t.includes('opus')
+        ? 'opus'
+        : t.includes('sonnet')
+            ? 'sonnet'
+            : t.includes('haiku')
+                ? 'haiku'
+                : null;
+    if (tier) {
+        const ver = t
+            .split(/[-_.\s]+/)
+            .filter((p) => /^\d+$/.test(p))
+            .slice(0, 2)
+            .join('.');
+        return (ver ? `${tier} ${ver}` : tier).toUpperCase();
+    }
+    return t.toUpperCase().slice(0, 16);
+}
+// ── Heatmap ─────────────────────────────────────────────────────────────────
+// Opacity per intensity tier (0 = empty), matching the web's 18/38/62/100% mix.
+const TIER_OPACITY = [0, 0.18, 0.38, 0.62, 1];
+// Build the HEAT_ROWS × HEAT_COLS grid from real daily usage. Mirrors the web
+// profile's buildRecentWeeks: columns are the latest 26 weeks ending on the
+// Saturday on/after today, rows are Sun→Sat, intensity bucketed vs the window
+// max. matrix[day][week] holds the tier for that date.
+function buildMatrix(daily) {
+    const perDay = new Map();
+    for (const e of daily) {
+        perDay.set(e.date, (perDay.get(e.date) ?? 0) + e.tokens);
     }
-    const maxTokens = Math.max(...cells.map((c) => c.tokens), 1);
-    const cellSize = 10;
-    const gap = 2;
-    // Organize into weeks (columns of 7)
-    const weeks = [];
-    for (let i = 0; i < cells.length; i += 7) {
-        weeks.push(cells.slice(i, i + 7));
+    const today = new Date();
+    const gridEnd = new Date(today);
+    gridEnd.setUTCDate(today.getUTCDate() + (6 - today.getUTCDay()));
+    const gridStart = new Date(gridEnd);
+    gridStart.setUTCDate(gridEnd.getUTCDate() - HEAT_COLS * 7 + 1);
+    const values = [];
+    let max = 0;
+    for (let d = 0; d < HEAT_ROWS; d++) {
+        const row = [];
+        for (let w = 0; w < HEAT_COLS; w++) {
+            const date = new Date(gridStart);
+            date.setUTCDate(gridStart.getUTCDate() + w * 7 + d);
+            const v = perDay.get(date.toISOString().slice(0, 10)) ?? 0;
+            row.push(v);
+            if (v > max)
+                max = v;
+        }
+        values.push(row);
     }
-    return (_jsx("div", { style: { display: 'flex', gap }, children: weeks.map((week) => (
-        // biome-ignore lint/correctness/useJsxKeyInIterable: satori JSX types don't support key
-        _jsx("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                gap,
-            }, children: week.map((day) => {
-                const ratio = day.tokens / maxTokens;
-                let opacity = 0;
-                if (ratio > 0)
-                    opacity = 0.2;
-                if (ratio > 0.25)
-                    opacity = 0.4;
-                if (ratio > 0.5)
-                    opacity = 0.7;
-                if (ratio > 0.75)
-                    opacity = 1.0;
-                return (
-                // biome-ignore lint/correctness/useJsxKeyInIterable: satori JSX types don't support key
-                _jsx("div", { style: {
+    return values.map((row) => row.map((v) => {
+        if (v <= 0 || max === 0)
+            return 0;
+        const r = v / max;
+        return r > 0.75 ? 4 : r > 0.5 ? 3 : r > 0.25 ? 2 : 1;
+    }));
+}
+function Heatmap({ matrix }) {
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: HEAT_GAP }, children: matrix.map((row) => (
+        // biome-ignore lint/correctness/useJsxKeyInIterable: satori has no keys
+        _jsx("div", { style: { display: 'flex', gap: HEAT_GAP }, children: row.map((tier) => tier === 0 ? (
+            // Empty slot: a tiny centred dot, not a full cell.
+            // biome-ignore lint/correctness/useJsxKeyInIterable: satori has no keys
+            _jsx("div", { style: {
+                    display: 'flex',
+                    width: HEAT_CELL,
+                    height: HEAT_CELL,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx("div", { style: {
                         display: 'flex',
-                        width: cellSize,
-                        height: cellSize,
-                        backgroundColor: day.tokens === 0 ? '#1a1a1a' : accent,
-                        opacity: day.tokens === 0 ? 1 : opacity,
-                        borderRadius: 2,
-                    } }));
-            }) }))) }));
+                        width: 3,
+                        height: 3,
+                        backgroundColor: 'rgba(130,245,198,0.35)',
+                    } }) })) : (
+            // biome-ignore lint/correctness/useJsxKeyInIterable: satori has no keys
+            _jsx("div", { style: {
+                    display: 'flex',
+                    width: HEAT_CELL,
+                    height: HEAT_CELL,
+                    backgroundColor: `rgba(130,245,198,${TIER_OPACITY[tier]})`,
+                } }))) }))) }));
 }
-function ShareCard({ data }) {
-    const accent = BELT_COLORS[data.beltColor] ?? '#06B6D4';
-    const kanji = TITLE_KANJI[data.title] ?? '';
-    const total = data.tokensTotal;
-    const darkText = data.beltColor === 'yellow' ||
-        data.beltColor === 'lime' ||
-        data.beltColor === 'white'
-        ? '#000'
-        : '#FFF';
-    const tools = [
-        {
-            label: 'Claude Code',
-            short: 'CC',
-            tokens: data.toolBreakdown.claudeCode,
-        },
-        { label: 'Codex', short: 'CDX', tokens: data.toolBreakdown.codex },
-        { label: 'Cursor', short: 'CUR', tokens: data.toolBreakdown.cursor },
-    ].filter((t) => t.tokens > 0);
-    const toolMax = Math.max(...tools.map((t) => t.tokens), 1);
-    const modelMax = data.models.length > 0 ? data.models[0]?.tokens : 1;
+// ── Proficiency bar: solid mint fill over a 10%-mint track. ──────────────────
+function Bar({ pct }) {
+    const fill = Math.max(0, Math.min(100, pct));
+    return (_jsx("div", { style: {
+            display: 'flex',
+            width: 64,
+            height: 6,
+            backgroundColor: ACCENT_TRACK,
+        }, children: _jsx("div", { style: {
+                display: 'flex',
+                height: 6,
+                width: `${fill}%`,
+                backgroundColor: ACCENT,
+            } }) }));
+}
+function StatCard({ value, label }) {
     return (_jsxs("div", { style: {
-            width: '100%',
-            height: '100%',
             display: 'flex',
             flexDirection: 'column',
-            backgroundColor: '#000000',
-            fontFamily: 'monospace',
-            padding: 48,
-            color: '#FFFFFF',
-        }, children: [_jsxs("div", { style: {
+            flex: 1,
+            justifyContent: 'center',
+            backgroundColor: CARD_BG,
+            border: `1px solid ${BORDER}`,
+            paddingLeft: 16,
+            gap: 20,
+        }, children: [_jsx("div", { style: {
                     display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 24,
-                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    backgroundColor: accent,
-                                    color: darkText,
-                                    padding: '6px 14px',
-                                    fontSize: 18,
-                                    fontWeight: 700,
-                                }, children: [kanji, " ", data.title, " lv.", data.level] }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 22,
-                                    color: '#A3A3A3',
-                                }, children: ["@", data.handle] })] }), _jsxs("div", { style: { display: 'flex', fontSize: 20, color: accent }, children: ["#", data.rank] })] }), _jsxs("div", { style: {
+                    fontFamily: 'Orbitron',
+                    fontWeight: 700,
+                    fontSize: 33,
+                    lineHeight: 1,
+                    letterSpacing: 0.5,
+                    color: WHITE,
+                }, children: value }), _jsx("div", { style: {
                     display: 'flex',
+                    fontSize: 16,
+                    letterSpacing: 2,
+                    color: LABEL,
+                }, children: label })] }));
+}
+function PillStat({ value, label }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            backgroundColor: CARD_BG,
+            border: `1px solid ${BORDER}`,
+            paddingLeft: 17,
+            paddingRight: 17,
+        }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    fontFamily: 'Orbitron',
+                    fontWeight: 700,
+                    fontSize: 20,
+                    letterSpacing: 0.5,
+                    color: WHITE,
+                }, children: value }), _jsx("div", { style: {
+                    display: 'flex',
+                    fontSize: 16,
+                    letterSpacing: 2,
+                    color: LABEL,
+                }, children: label })] }));
+}
+function CornerBracket({ pos }) {
+    const arm = 11;
+    const thick = 2;
+    const inset = 0;
+    const vert = pos[0] === 't' ? 'top' : 'bottom';
+    const horiz = pos[1] === 'l' ? 'left' : 'right';
+    return (_jsx("div", { style: {
+            display: 'flex',
+            position: 'absolute',
+            width: arm,
+            height: arm,
+            [vert]: inset,
+            [horiz]: inset,
+            [`border${vert === 'top' ? 'Top' : 'Bottom'}`]: `${thick}px solid ${ACCENT}`,
+            [`border${horiz === 'left' ? 'Left' : 'Right'}`]: `${thick}px solid ${ACCENT}`,
+        } }));
+}
+function ShareCard({ data, matrix, avatar, }) {
+    const models = data.models.slice(0, 4);
+    const modelMax = models.length > 0 ? (models[0]?.tokens ?? 1) : 1;
+    const cost = Math.round(data.estimatedCost).toLocaleString('en-US');
+    const progress = Math.max(0, Math.min(100, data.progressPercent));
+    const initial = (data.handle[0] ?? '?').toUpperCase();
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: 800,
+            height: 500,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: PAGE_BG,
+            padding: 16,
+            fontFamily: 'JetBrains Mono',
+            color: WHITE,
+        }, children: [_jsx(CornerBracket, { pos: 'tl' }), _jsx(CornerBracket, { pos: 'tr' }), _jsx(CornerBracket, { pos: 'bl' }), _jsx(CornerBracket, { pos: 'br' }), _jsxs("div", { style: {
+                    display: 'flex',
+                    height: 70,
+                    alignItems: 'center',
                     justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                    marginBottom: 28,
-                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
+                    backgroundColor: CARD_BG,
+                    border: `1px solid ${BORDER}`,
+                    paddingLeft: 12,
+                    paddingRight: 16,
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 18 }, children: [_jsx("div", { style: {
                                     display: 'flex',
-                                    fontSize: 64,
-                                    fontWeight: 700,
-                                    color: accent,
-                                    lineHeight: 1,
-                                }, children: formatTokens(total) }), _jsx("div", { style: {
+                                    width: 46,
+                                    height: 46,
+                                    border: `1px solid ${BORDER}`,
+                                    backgroundColor: '#0C100E',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    overflow: 'hidden',
+                                }, children: avatar ? (
+                                // biome-ignore lint/performance/noImgElement: satori rasterises to SVG, not a DOM img
+                                _jsx("img", { src: avatar, width: 46, height: 46, alt: '' })) : (_jsx("div", { style: {
+                                        display: 'flex',
+                                        fontFamily: 'Orbitron',
+                                        fontWeight: 700,
+                                        fontSize: 22,
+                                        color: ACCENT,
+                                    }, children: initial })) }), _jsxs("div", { style: {
                                     display: 'flex',
+                                    fontFamily: 'Orbitron',
+                                    fontWeight: 700,
                                     fontSize: 20,
-                                    color: '#525252',
-                                    marginTop: 4,
-                                }, children: "tokens burned" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("div", { style: {
+                                    letterSpacing: 0.5,
+                                    color: WHITE,
+                                }, children: ["@", data.handle.toUpperCase()] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 14 }, children: [_jsxs("div", { style: {
                                     display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                }, children: "ACTIVITY" }), _jsx(Heatmap, { data: data.dailyActivity, accent: accent })] })] }), _jsxs("div", { style: {
-                    display: 'flex',
-                    gap: 32,
-                    marginBottom: 24,
-                }, children: [_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            gap: 6,
-                        }, children: [_jsx("div", { style: {
+                                    fontFamily: 'Orbitron',
+                                    fontWeight: 700,
+                                    fontSize: 17,
+                                    letterSpacing: 1,
+                                    color: WHITE,
+                                }, children: ["L", data.level] }), _jsx("div", { style: {
                                     display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                    marginBottom: 4,
-                                }, children: "PROVIDERS" }), tools.map((tool) => {
-                                const pct = Math.round((tool.tokens / toolMax) * 100);
-                                return (
-                                // biome-ignore lint/correctness/useJsxKeyInIterable: satori JSX types don't support key
-                                _jsxs("div", { style: {
+                                    width: 104,
+                                    height: 8,
+                                    backgroundColor: ACCENT_TRACK,
+                                }, children: _jsx("div", { style: {
                                         display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 8,
-                                    }, children: [_jsx("div", { style: {
-                                                display: 'flex',
-                                                fontSize: 13,
-                                                color: '#525252',
-                                                width: 32,
-                                            }, children: tool.short }), _jsx("div", { style: {
-                                                display: 'flex',
-                                                flex: 1,
-                                                height: 16,
-                                                backgroundColor: '#171717',
-                                            }, children: _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    width: `${pct}%`,
-                                                    height: '100%',
-                                                    backgroundColor: accent,
-                                                } }) }), _jsx("div", { style: {
-                                                display: 'flex',
-                                                fontSize: 13,
-                                                color: '#A3A3A3',
-                                                width: 60,
-                                                justifyContent: 'flex-end',
-                                            }, children: formatTokens(tool.tokens) })] }));
-                            })] }), _jsxs("div", { style: {
+                                        width: `${progress}%`,
+                                        height: 8,
+                                        backgroundColor: ACCENT,
+                                    } }) })] })] }), _jsxs("div", { style: { display: 'flex', height: 114, gap: 26, marginTop: 18 }, children: [_jsx(StatCard, { value: formatTokens(data.tokensTotal), label: 'TOKENS BURNED' }), _jsx(StatCard, { value: `${data.streak}D`, label: 'STREAK' }), _jsx(StatCard, { value: `$${cost}`, label: 'EST. COST' })] }), _jsxs("div", { style: { display: 'flex', height: 142, gap: 18, marginTop: 18 }, children: [_jsx("div", { style: {
                             display: 'flex',
+                            width: 284,
                             flexDirection: 'column',
-                            flex: 1,
-                            gap: 6,
-                        }, children: [_jsx("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                    marginBottom: 4,
-                                }, children: "MODELS" }), data.models.slice(0, 4).map((model) => {
-                                const pct = Math.round((model.tokens / modelMax) * 100);
-                                const shortName = model.name.length > 18 ? model.name.slice(0, 18) : model.name;
-                                return (
-                                // biome-ignore lint/correctness/useJsxKeyInIterable: satori JSX types don't support key
-                                _jsxs("div", { style: {
+                            justifyContent: 'center',
+                            backgroundColor: CARD_BG,
+                            border: `1px solid ${BORDER}`,
+                            paddingLeft: 17,
+                            paddingRight: 17,
+                            gap: 14,
+                        }, children: models.map((m) => (
+                        // biome-ignore lint/correctness/useJsxKeyInIterable: satori has no keys
+                        _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                            }, children: [_jsx("div", { style: {
                                         display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 8,
-                                    }, children: [_jsx("div", { style: {
-                                                display: 'flex',
-                                                fontSize: 11,
-                                                color: '#525252',
-                                                width: 110,
-                                            }, children: shortName }), _jsx("div", { style: {
-                                                display: 'flex',
-                                                flex: 1,
-                                                height: 16,
-                                                backgroundColor: '#171717',
-                                            }, children: _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    width: `${pct}%`,
-                                                    height: '100%',
-                                                    backgroundColor: accent,
-                                                    opacity: 0.7,
-                                                } }) }), _jsx("div", { style: {
-                                                display: 'flex',
-                                                fontSize: 11,
-                                                color: '#A3A3A3',
-                                                width: 50,
-                                                justifyContent: 'flex-end',
-                                            }, children: formatTokens(model.tokens) })] }));
-                            })] })] }), _jsxs("div", { style: { display: 'flex', gap: 16, marginBottom: 24 }, children: [_jsxs("div", { style: {
+                                        fontSize: 15,
+                                        letterSpacing: 0.4,
+                                        color: LABEL_DIM,
+                                    }, children: shortModelName(m.name) }), _jsx(Bar, { pct: (m.tokens / modelMax) * 100 })] }))) }), _jsx("div", { style: {
                             display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            backgroundColor: '#0a0a0a',
-                            border: '1px solid #262626',
-                            padding: 16,
-                            alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                }, children: "STREAK" }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 28,
-                                    fontWeight: 700,
-                                    color: accent,
-                                }, children: [data.streak, "d"] })] }), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            backgroundColor: '#0a0a0a',
-                            border: '1px solid #262626',
-                            padding: 16,
-                            alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                }, children: "BEST STREAK" }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 28,
-                                    fontWeight: 700,
-                                    color: accent,
-                                }, children: [data.longestStreak, "d"] })] }), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            backgroundColor: '#0a0a0a',
-                            border: '1px solid #262626',
-                            padding: 16,
-                            alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                }, children: "EST. COST" }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 28,
-                                    fontWeight: 700,
-                                    color: accent,
-                                }, children: ["$", Math.round(data.estimatedCost)] })] }), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
                             flex: 1,
-                            backgroundColor: '#0a0a0a',
-                            border: '1px solid #262626',
-                            padding: 16,
                             alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 11,
-                                    color: '#525252',
-                                }, children: "RANK" }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    fontSize: 28,
-                                    fontWeight: 700,
-                                    color: accent,
-                                }, children: ["#", data.rank] })] })] }), _jsxs("div", { style: {
+                            justifyContent: 'center',
+                            backgroundColor: CARD_BG,
+                            border: `1px solid ${BORDER}`,
+                        }, children: _jsx(Heatmap, { matrix: matrix }) })] }), _jsxs("div", { style: { display: 'flex', height: 42, gap: 17, marginTop: 18 }, children: [_jsx(PillStat, { value: `${data.longestStreak}D`, label: 'BEST STREAK' }), _jsx(PillStat, { value: `#${data.rank}`, label: 'RANK' }), _jsx(PillStat, { value: String(data.followers ?? 0), label: 'FOLLOWERS' })] }), _jsxs("div", { style: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                    alignItems: 'center',
                     marginTop: 'auto',
-                    borderTop: '1px solid #262626',
-                    paddingTop: 12,
-                }, children: [_jsxs("div", { style: { display: 'flex', fontSize: 14, color: '#525252' }, children: ["hacklab.so/", data.handle] }), _jsx("div", { style: { display: 'flex', fontSize: 14, color: '#525252' }, children: "#SweatySunday" })] })] }));
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                }, children: [_jsxs("div", { style: { display: 'flex', fontSize: 15, color: FOOTER_FG }, children: ["hacklab.so/", data.handle] }), _jsx("div", { style: { display: 'flex', fontSize: 15, color: FOOTER_FG }, children: "#sweatysunday" })] })] }));
+}
+// ── Font loading (disk-cached so repeat renders are offline + fast) ──────────
+const FONT_SOURCES = {
+    'orbitron-700.woff': 'https://cdn.jsdelivr.net/fontsource/fonts/orbitron@latest/latin-700-normal.woff',
+    'jetbrains-400.woff': 'https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff',
+    'jetbrains-500.woff': 'https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-500-normal.woff',
+};
+async function loadFont(name) {
+    const dir = join(homedir(), '.hacklab', 'fonts');
+    const file = join(dir, name);
+    try {
+        const cached = await readFile(file);
+        return cached.buffer.slice(cached.byteOffset, cached.byteOffset + cached.byteLength);
+    }
+    catch {
+        const url = FONT_SOURCES[name];
+        if (!url)
+            throw new Error(`unknown font: ${name}`);
+        const buf = await fetch(url).then((r) => r.arrayBuffer());
+        await mkdir(dir, { recursive: true });
+        await writeFile(file, Buffer.from(buf));
+        return buf;
+    }
+}
+async function loadAvatar(url) {
+    if (!url)
+        return null;
+    try {
+        const res = await fetch(url);
+        if (!res.ok)
+            return null;
+        const type = res.headers.get('content-type') ?? 'image/png';
+        const buf = Buffer.from(await res.arrayBuffer());
+        return `data:${type};base64,${buf.toString('base64')}`;
+    }
+    catch {
+        return null;
+    }
 }
 export async function generateShareCard(data) {
-    const fontUrl = 'https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff';
-    const fontBoldUrl = 'https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-700-normal.woff';
-    const [fontData, fontBoldData] = await Promise.all([
-        fetch(fontUrl).then((r) => r.arrayBuffer()),
-        fetch(fontBoldUrl).then((r) => r.arrayBuffer()),
+    const [orbitron700, jetbrains400, jetbrains500, avatar] = await Promise.all([
+        loadFont('orbitron-700.woff'),
+        loadFont('jetbrains-400.woff'),
+        loadFont('jetbrains-500.woff'),
+        loadAvatar(data.avatarUrl),
     ]);
-    const svg = await satori(_jsx(ShareCard, { data: data }), {
-        width: 900,
-        height: 600,
+    const matrix = buildMatrix(data.dailyActivity);
+    const svg = await satori(_jsx(ShareCard, { data: data, matrix: matrix, avatar: avatar }), {
+        width: 800,
+        height: 500,
         fonts: [
-            { name: 'monospace', data: fontData, weight: 400, style: 'normal' },
+            { name: 'Orbitron', data: orbitron700, weight: 700, style: 'normal' },
+            {
+                name: 'JetBrains Mono',
+                data: jetbrains400,
+                weight: 400,
+                style: 'normal',
+            },
             {
-                name: 'monospace',
-                data: fontBoldData,
-                weight: 700,
+                name: 'JetBrains Mono',
+                data: jetbrains500,
+                weight: 500,
                 style: 'normal',
             },
         ],
     });
     const resvg = new Resvg(svg, {
-        fitTo: { mode: 'width', value: 1800 },
+        fitTo: { mode: 'width', value: 1600 },
     });
     const png = Buffer.from(resvg.render().asPng());
     const dir = join(homedir(), '.hacklab');