claude-mission-control 1.17.0 → 1.18.0

package/README.md

@@ -35,6 +35,16 @@ Claude Code runs in a terminal. Once you have two or three sessions going, you l
 
 *Every screenshot here is demo data (`CLAUDE_DASH_DEMO=1`). The projects are invented.*
 
+**New in 1.18.0**
+
+- Hall of Fame (⌘K → Hall of Fame, or from Hive): your best sessions over a week, 30 days or all time, across seven awards from most commits shipped and best value per commit to the grinder and the delegator. Each award makes a share card.
+
+![Hall of Fame: podiums for most commits shipped, best value per commit and the grinder, each entry with its robot avatar, project, model and score, and a share card drawn for the most commits award](docs/screenshots/hall-of-fame.png)
+
+**New in 1.17.1**
+
+- Burn rate is now your pace over the last 30 minutes. It used to divide lifetime cost by process age, which read in the thousands per hour right after resuming an old session.
+
 **New in 1.17.0**
 
 - Hive view (⬢ in the header): every live session as a character card. Each gets a generated face, a personality earned from what it has done ("the delegator", "the big spender", "the new kid"), a rank by spend, and its latest tool call on a live ticker.
@@ -226,7 +236,7 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 - Worktree sessions (`.claude/worktrees/…`) are folded into their parent project and badged `⎇`.
 - **Notifications** — the moment any session flips to "waiting for input", you get a macOS notification (with sound) naming the project and what it needs — the question, the command awaiting permission, or Claude's last line. Fires once per wait, never on server restart. Mute a single noisy project from its slide-over (the bell button at the top), or disable everything with `CLAUDE_DASH_NOTIFY=0` in the plist. Notifications arrive via Script Editor/osascript — if you don't see them, allow it under System Settings → Notifications.
 - **Cost estimates** — every session, project, and live row carries a `≈$` figure computed from the token counts in its transcript. On an API-key login it is labelled *estimated cost*; on a subscription it is *list-price value*, a relative weight rather than a bill (hover a cost chip for the wording). Rates are Anthropic list prices bundled with the dashboard (cached 2026-10-06). If your organization deploys Claude Code's `modelPricing` managed setting, the dashboard reads it and reports at your contracted rates; you can also put the same `modelPricing` block in `config.json` (⚙ settings → *copy skeleton*). A model the table doesn't know is priced at the Opus tier and marked with an amber `?` so a stale table is never silent. Subagent tokens are included.
-- **Live cost** — running sessions show their cost so far on the departures board and in Mission Control, with a `$/h` burn rate once the session is five minutes old.
+- **Live cost** — running sessions show their cost so far on the departures board and in Mission Control, with a `$/h` burn rate: the pace over the last 30 minutes, shown after five minutes of watching. A resumed session's earlier history doesn't count toward it.
 - **Session cost breakdown** — the `≈$ ▾` button in a transcript's header opens a table by model (input, output, cache read, cache write), the subagent share, and the session's cache hit rate.
 - **Context and tools** — each live session shows how full its context window was on the last turn (`412k / 1M`, amber from 70%, red from 90%), so you can see a compaction or a fresh session coming. Mission Control panes add the session's tool-call count with failures in amber, and the transcript's cost panel shows the same count in its footer. Read from the same incremental transcript scan as everything else; subagents are not included.
 - **Most expensive sessions** — in the stats view: the ten costliest sessions all time, click to open.

package/lib/collector.js

@@ -15,7 +15,7 @@ const { worktreeRoot } = require('./paths');
 const { sendNotification, newlyWaiting, overdueWaits, isProjectMuted, trackWaits } = require('./notify');
 const { readConfig, readPricing } = require('./config');
 const { hiveRoster } = require('./hive');
-const { estimateCost, planValue, costReport, budgetLevel, typicalWait, burnRate, topByCost } = require('./pricing');
+const { estimateCost, planValue, costReport, budgetLevel, typicalWait, burnRate, recordCostSample, topByCost } = require('./pricing');
 const { readPlan } = require('./plan');
 const { readTeams, agentStatus, resolveTeam } = require('./teams');
 const { WINDOWS, recordSample, forecastWindow, shouldAlert, clockLabel, durationLabel } = require('./forecast');
@@ -39,6 +39,7 @@ class Collector {
     this.state = { generatedAt: 0, quota: null, liveSessions: [], projects: [], errors: [] };
     this.raw = { live: [], transcriptGroups: new Map(), history: new Map(), git: new Map(), quota: null, metaBySession: new Map(), teams: [] };
     this.waitingSince = new Map(); // sessionId -> when it entered 'waiting'
+    this.costSamples = new Map(); // sessionId -> [[t, usd], ...] for burn rate
     this.idleNotified = new Set(); // nagged once for the current wait
     this.listeners = new Set();
     this.events = []; // notification history for the catch-up bell, newest first
@@ -402,6 +403,8 @@ class Collector {
       // displayed digit would. Null until the transcript has been scanned.
       const report = costReport(usageBySession.get(s.sessionId) || {}, pricing);
       const estCost = report.usd >= 0.005 ? Math.round(report.usd * 100) / 100 : null;
+      const samples = this.costSamples.get(s.sessionId) || [];
+      this.costSamples.set(s.sessionId, recordCostSample(samples, report.usd));
       return {
         quietMin,
         waitingMin: (() => {
@@ -419,7 +422,7 @@ class Collector {
         name: s.name,
         model: modelBySession.get(s.sessionId) || null,
         estCost,
-        burnRate: burnRate(estCost, s.startedAt),
+        burnRate: burnRate(samples),
         assumed: report.assumedModels.length > 0,
         context: contextBySession.get(s.sessionId) || null,
         tools: toolsBySession.get(s.sessionId) || null,
@@ -441,6 +444,8 @@ class Collector {
         resumeCommand: resumeCommand(s.cwd, s.sessionId),
       };
     });
+    const stillLive = new Set(liveSessions.map((s) => s.sessionId));
+    for (const id of this.costSamples.keys()) if (!stillLive.has(id)) this.costSamples.delete(id);
     const roster = hiveRoster(liveSessions);
     for (const s of liveSessions) s.hive = roster[s.sessionId];
 
@@ -706,6 +711,33 @@ class Collector {
     };
   }
 
+  // Every scanned session, summarised for the Hall of Fame.
+  fameSessions() {
+    const pricing = readPricing();
+    const out = [];
+    for (const g of this.raw.transcriptGroups.values()) {
+      if (isIgnored(g.path)) continue;
+      for (const m of g.sessions) {
+        const ts = toolSummary(m.tools);
+        out.push({
+          sessionId: m.sessionId,
+          title: this.titleOf(m).title,
+          projectName: friendlyName(g.path),
+          projectPath: g.path,
+          model: m.model || null,
+          cost: Math.round(costReport(combinedUsage(m), pricing).usd * 100) / 100,
+          startedAt: m.startedAt || null,
+          lastActivityAt: m.lastActivityAt,
+          tools: ts ? ts.total : 0,
+          errors: ts ? ts.errors : 0,
+          subagents: m.subagentCount || 0,
+          files: m.changeCount || 0,
+        });
+      }
+    }
+    return out;
+  }
+
   // Transcript file + title for one session, for the transcript viewer.
   findSessionFile(sessionId) {
     for (const g of this.raw.transcriptGroups.values()) {

package/lib/demo.js

@@ -503,5 +503,37 @@ function demoProject() {
   };
 }
 
-module.exports = { demoState, demoStats, demoSession, demoChanges, demoInventory, demoToolset, demoProject };
+
+// Hall of Fame: the same shape lib/fame.js returns, over invented sessions.
+function demoFame() {
+  const now = Date.now();
+  const e = (sessionId, title, projectName, model, label, ago) => ({ sessionId, title, projectName, model, label, lastActivityAt: now - ago });
+  const mig = ['demo2222-2222-4222-8222-222222222222', 'Migrate posts to the new block format', 'Blog Engine', 'claude-fable-5'];
+  const cart = ['demo6666-6666-4666-8666-666666666666', 'Cart totals rounding bug', 'Acme Storefront', 'claude-fable-5'];
+  const split = ['demo7777-7777-4777-8777-777777777777', 'Split the product page into blocks', 'Acme Storefront', 'claude-opus-5'];
+  const rss = ['demo8888-8888-4888-8888-888888888888', 'Fix the RSS feed date format', 'Blog Engine', 'claude-sonnet-5'];
+  const deps = ['demo9999-9999-4999-8999-999999999999', 'Bump dependencies and re-run the suite', 'Acme Storefront', 'claude-haiku-4-5'];
+  const onb = ['demo3333-3333-4333-8333-333333333333', 'Design the onboarding flow', 'Acme Storefront', 'claude-opus-5'];
+  return {
+    days: 30, sessions: 23, commits: 41,
+    awards: [
+      { key: 'shipped', title: 'Most commits shipped', blurb: 'commits made while the session was working', entries: [
+        e(...split, '11 commits', 26 * HOUR), e(...mig, '8 commits', MIN), e(...cart, '6 commits', 30 * HOUR)] },
+      { key: 'value', title: 'Best value', blurb: 'lowest cost per commit, three commits or more', entries: [
+        e(...deps, '$0.82 per commit', 3 * DAY), e(...cart, '$1.84 per commit', 30 * HOUR), e(...rss, '$2.23 per commit', 2 * DAY)] },
+      { key: 'grinder', title: 'The grinder', blurb: 'most tool calls in one session', entries: [
+        e(...mig, '388 tool calls', MIN), e(...split, '301 tool calls', 26 * HOUR), e(...onb, '164 tool calls', 3 * HOUR)] },
+      { key: 'clean', title: 'Cleanest run', blurb: 'fewest failed tool calls, fifty calls or more', entries: [
+        e(...mig, '388 calls, 0 failed', MIN), e(...rss, '92 calls, 0 failed', 2 * DAY), e(...split, '301 calls, 2 failed', 26 * HOUR)] },
+      { key: 'delegator', title: 'The delegator', blurb: 'most subagents handed work', entries: [
+        e(...mig, '4 subagents', MIN), e(...split, '3 subagents', 26 * HOUR)] },
+      { key: 'reach', title: 'Widest reach', blurb: 'most files edited', entries: [
+        e(...split, '27 files edited', 26 * HOUR), e(...mig, '19 files edited', MIN), e(...onb, '9 files edited', 3 * HOUR)] },
+      { key: 'spender', title: 'Big spender', blurb: 'highest list-price value', entries: [
+        e(...mig, '$61.20', MIN), e(...split, '$31.40', 26 * HOUR), e(...onb, '$18.20', 3 * HOUR)] },
+    ],
+  };
+}
+
+module.exports = { demoState, demoStats, demoSession, demoChanges, demoInventory, demoToolset, demoProject, demoFame };
 

package/lib/fame.js

@@ -0,0 +1,102 @@
+'use strict';
+// Hall of Fame: your best sessions over a period, by award. Pure; the server
+// feeds it session summaries plus `git log` commits per project.
+
+const PAD = 5 * 60000; // same padded activity window as cost per commit
+
+// sessionId -> commits made inside its window. A commit inside several
+// sessions' windows goes to the one that started most recently, so a long
+// resumed session doesn't claim every commit made while it was open.
+function commitsBySession(sessions, commitsByProject) {
+  const out = new Map();
+  const byProject = new Map();
+  for (const s of sessions) {
+    if (!byProject.has(s.projectPath)) byProject.set(s.projectPath, []);
+    byProject.get(s.projectPath).push(s);
+  }
+  for (const [projectPath, list] of byProject) {
+    for (const c of commitsByProject[projectPath] || []) {
+      let best = null;
+      for (const s of list) {
+        if (!s.lastActivityAt) continue;
+        const start = (s.startedAt || s.lastActivityAt) - PAD;
+        if (c.ts < start || c.ts > s.lastActivityAt + PAD) continue;
+        if (!best || (s.startedAt || 0) > (best.startedAt || 0)) best = s;
+      }
+      if (best) out.set(best.sessionId, (out.get(best.sessionId) || 0) + 1);
+    }
+  }
+  return out;
+}
+
+const money = (n) => (n >= 100 ? `$${Math.round(n)}` : `$${n.toFixed(2)}`);
+const plural = (n, one, many = one + 's') => `${n} ${n === 1 ? one : many}`;
+
+// Each award: who qualifies, the number it ranks by, and how it reads.
+const AWARDS = [
+  {
+    key: 'shipped', title: 'Most commits shipped', blurb: 'commits made while the session was working',
+    ok: (s) => s.commits >= 1, score: (s) => s.commits, label: (s) => plural(s.commits, 'commit'),
+  },
+  {
+    key: 'value', title: 'Best value', blurb: 'lowest cost per commit, three commits or more',
+    ok: (s) => s.commits >= 3 && s.cost >= 0.5, score: (s) => -s.cost / s.commits,
+    label: (s) => `${money(s.cost / s.commits)} per commit`,
+  },
+  {
+    key: 'grinder', title: 'The grinder', blurb: 'most tool calls in one session',
+    ok: (s) => s.tools >= 1, score: (s) => s.tools, label: (s) => plural(s.tools, 'tool call'),
+  },
+  {
+    key: 'clean', title: 'Cleanest run', blurb: 'fewest failed tool calls, fifty calls or more',
+    ok: (s) => s.tools >= 50, score: (s) => -(s.errors / s.tools) + s.tools / 1e7,
+    label: (s) => `${s.tools} calls, ${s.errors} failed`,
+  },
+  {
+    key: 'delegator', title: 'The delegator', blurb: 'most subagents handed work',
+    ok: (s) => s.subagents >= 1, score: (s) => s.subagents, label: (s) => plural(s.subagents, 'subagent'),
+  },
+  {
+    key: 'reach', title: 'Widest reach', blurb: 'most files edited',
+    ok: (s) => s.files >= 1, score: (s) => s.files, label: (s) => plural(s.files, 'file') + ' edited',
+  },
+  {
+    key: 'spender', title: 'Big spender', blurb: 'highest list-price value',
+    ok: (s) => s.cost >= 0.01, score: (s) => s.cost, label: (s) => money(s.cost),
+  },
+];
+
+// sessions: [{ sessionId, title, projectName, projectPath, model, cost,
+// startedAt, lastActivityAt, tools, errors, subagents, files }]
+function hallOfFame(sessions, commitsByProject, { days = 30, now = Date.now(), podium = 3 } = {}) {
+  const cut = days ? now - days * 86400000 : 0;
+  const inPeriod = (sessions || []).filter((s) => (s.lastActivityAt || 0) >= cut);
+  const counts = commitsBySession(inPeriod, commitsByProject || {});
+  const rows = inPeriod.map((s) => ({ ...s, commits: counts.get(s.sessionId) || 0 }));
+  const awards = [];
+  for (const a of AWARDS) {
+    const ranked = rows
+      .filter(a.ok)
+      .sort((x, y) => a.score(y) - a.score(x) || (y.lastActivityAt || 0) - (x.lastActivityAt || 0))
+      .slice(0, podium);
+    if (!ranked.length) continue;
+    awards.push({
+      key: a.key,
+      title: a.title,
+      blurb: a.blurb,
+      entries: ranked.map((s) => ({
+        sessionId: s.sessionId,
+        title: s.title,
+        projectName: s.projectName,
+        model: s.model || null,
+        label: a.label(s),
+        lastActivityAt: s.lastActivityAt,
+      })),
+    });
+  }
+  let commits = 0;
+  for (const n of counts.values()) commits += n;
+  return { days, sessions: rows.length, commits, awards };
+}
+
+module.exports = { hallOfFame, commitsBySession, AWARDS };

package/lib/pricing.js

@@ -165,16 +165,36 @@ function typicalWait(buckets) {
   return null;
 }
 
-// Whole dollars per hour for a running session, null under $1/h. Null for the
-// first five minutes too: one turn in a fresh session would otherwise read as
-// hundreds per hour. Whole dollars because a cents figure drifts with the clock
-// and would churn the SSE state fingerprint on every poll.
+// Spend per hour at the current pace: the cost added over the last 30
+// minutes of samples, not lifetime cost over process age. A resumed session
+// carries its whole history in its transcript, so lifetime/age read in the
+// thousands right after a resume and near zero for a long-lived process.
+// Null until five minutes of samples exist, and under $1/h. Whole dollars so
+// the SSE state fingerprint doesn't churn.
+const BURN_WINDOW_MS = 30 * 60 * 1000;
 const BURN_MIN_MS = 5 * 60 * 1000;
-function burnRate(usd, startedAt, now = Date.now()) {
-  if (!usd || !startedAt) return null;
-  const ms = now - startedAt;
-  if (ms < BURN_MIN_MS) return null;
-  const perHour = Math.round(usd / (ms / 3600000));
+const BURN_SAMPLE_MS = 30 * 1000;
+
+// Appends [now, usd] to a session's samples (at most one per 30s unless the
+// cost moved) and drops what has aged out of the window. A cost that went
+// down means the transcript was rewritten: start over.
+function recordCostSample(samples, usd, now = Date.now()) {
+  if (usd == null || !Number.isFinite(usd)) return samples;
+  const last = samples[samples.length - 1];
+  if (last && usd < last[1]) samples.length = 0;
+  const prev = samples[samples.length - 1];
+  if (!prev || usd !== prev[1] || now - prev[0] >= BURN_SAMPLE_MS) samples.push([now, usd]);
+  while (samples.length > 2 && samples[1][0] <= now - BURN_WINDOW_MS) samples.shift();
+  return samples;
+}
+
+function burnRate(samples, now = Date.now()) {
+  if (!samples || samples.length < 2) return null;
+  const first = samples[0];
+  const last = samples[samples.length - 1];
+  const span = last[0] - first[0];
+  if (span < BURN_MIN_MS || now - last[0] > BURN_WINDOW_MS) return null;
+  const perHour = Math.round((last[1] - first[1]) / (span / 3600000));
   return perHour >= 1 ? perHour : null;
 }
 
@@ -226,4 +246,4 @@ function planValue(plan, weekCost) {
   };
 }
 
-module.exports = { estimateCost, planValue, costReport, totalTokens, rateFor, normalizeModel, loadPricing, overrideFor, budgetLevel, typicalWait, burnRate, cacheHitRatio, topByCost, contextWindow };
+module.exports = { estimateCost, planValue, costReport, totalTokens, rateFor, normalizeModel, loadPricing, overrideFor, budgetLevel, typicalWait, burnRate, recordCostSample, cacheHitRatio, topByCost, contextWindow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-mission-control",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Local dashboard for Claude Code: live sessions, transcripts, costs, git status — all your projects in one place.",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -716,6 +716,26 @@
   .hv-foot .v { font-size: 13px; margin-top: 2px; }
   .hv-foot .v.bad { color: var(--bad); }
   .hv-note { color: var(--faint); font-size: 11px; padding: 0 20px 24px; }
+  .fm-sum { color: var(--muted); font-size: 12px; margin: 4px 0 14px; }
+  .fm-award { margin: 0 0 18px; padding: 12px 14px; background: var(--surface); border-radius: 2px; }
+  .fm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+  .fm-title { font-family: var(--disp-font); font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
+  .fm-blurb { color: var(--faint); font-size: 11.5px; flex: 1; min-width: 0; }
+  .fm-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; }
+  .fm-head + .fm-row { border-top: none; margin-top: 6px; }
+  .fm-row .flap { font-family: var(--disp-font); font-weight: 600; font-size: 14px; flex: none; }
+  .fm-row.first .flap { color: var(--warn); font-size: 18px; }
+  .fm-row .hv-avatar { width: 32px; height: 32px; }
+  .fm-row.first .hv-avatar { width: 44px; height: 44px; }
+  .fm-who { flex: 1; min-width: 0; }
+  .fm-who .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 13px; }
+  .fm-row.first .fm-who .t { font-weight: 700; }
+  .fm-who .t:hover { color: var(--warn); }
+  .fm-who .p { color: var(--faint); font-size: 11px; }
+  .fm-val { flex: none; font-size: 12.5px; text-align: right; }
+  .fm-row.first .fm-val { color: var(--warn); font-weight: 700; }
+  .fm-share img { width: 100%; border-radius: 6px; border: 1px solid var(--line); margin-top: 10px; }
+  .fm-period button.on { color: var(--warn); border-color: var(--warn); }
   @keyframes hvblink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
   .hv-avatar .eyes { transform-box: fill-box; transform-origin: center; animation: hvblink 4.5s infinite; }
   @media (prefers-reduced-motion: reduce) { .hv-avatar .eyes { animation: none; } }
@@ -947,6 +967,9 @@
     #mc-grid { grid-template-columns: 1fr; padding: 12px 16px; }
     .hv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px 0; }
     .hv-tile:last-child:nth-child(odd) { grid-column: span 2; }
+    .fm-award { padding: 10px 12px; }
+    .fm-head .fm-title { flex: 1; }
+    .fm-blurb { flex: 1 1 100%; order: 3; }
     .hv-grid { grid-template-columns: 1fr; padding: 12px 16px 16px; }
     .hv-note { padding: 0 16px 24px; }
     .hv-money .big { font-size: 32px; }
@@ -1012,6 +1035,7 @@
     <span class="mc-title">Hive</span>
     <span class="mc-sub" id="hive-sub"></span>
     <span class="spacer"></span>
+    <button class="copy" data-fame title="Your best sessions by award">Hall of Fame →</button>
     <button class="d-close" id="hive-close" title="Close (Esc)">✕</button>
   </div>
   <div class="hv-tiles" id="hive-tiles"></div>
@@ -1312,7 +1336,7 @@ function liveCard(s) {
     <div class="dep-right">
       ${modelChip(s.model)}
       ${s.estCost != null ? `<span class="dep-cost">${costChip(s.estCost, { cls: 'dep-cost-main', assumed: s.assumed })}${
-        s.burnRate ? `<span class="dep-burn" title="Estimated spend per hour at the current pace">$${s.burnRate}/h</span>` : ''}</span>` : ''}
+        s.burnRate ? `<span class="dep-burn" title="Spend per hour over the last 30 minutes">$${s.burnRate}/h</span>` : ''}</span>` : ''}
       ${contextMeter(s.context)}
       ${s.waitingMin != null
         ? `<span class="dep-elapsed overdue" title="No reply for ${s.waitingMin} minutes — session started ${elapsed(s.startedAt)} ago">${waitLabel(s.waitingMin)}</span>`
@@ -3408,6 +3432,7 @@ async function openWeekReport() {
 // Always drawn in the dark departures palette so shared cards look alike.
 const CARD = { w: 1200, h: 630, bg: '#0d1215', flap: '#151d22', flapHi: '#1c262c', split: 'rgba(0,0,0,0.45)', ink: '#e9e4d6', muted: '#93a09e', faint: '#5d6b6b', line: '#202b31', green: '#46c073', amber: '#ffb020' };
 let shareCanvas = null;
+let shareName = 'card.png';
 
 async function renderShareCard() {
   const { w, days } = weekReport;
@@ -3485,15 +3510,139 @@ async function renderShareCard() {
   text('npx claude-mission-control', CARD.w - 64, 578, mono(16), CARD.muted, 'right');
 
   shareCanvas = c;
+  shareName = `week-with-claude-${new Date().toISOString().slice(0, 10)}.png`;
   return c.toDataURL('image/png');
 }
 
+// ---------- hall of fame ----------
+const fame = { days: 30, data: null };
+const FAME_PERIODS = [[7, 'week'], [30, '30 days'], [0, 'all time']];
+const famePeriod = (d) => (d === 7 ? 'the last 7 days' : d === 30 ? 'the last 30 days' : 'all time');
+
+async function openFame(days = fame.days) {
+  fame.days = days;
+  closeHive();
+  openDrawerShell('Hall of Fame', 'your best sessions, by award');
+  $('#d-actions').innerHTML = `<span class="fm-period">${FAME_PERIODS.map(([d, l]) =>
+    `<button class="copy${d === days ? ' on' : ''}" data-fame-days="${d}">${l}</button>`).join(' ')}</span>`;
+  try {
+    const r = await fetch(`/api/fame?days=${days}`);
+    if (!r.ok) throw new Error();
+    fame.data = await r.json();
+  } catch {
+    $('#d-body').innerHTML = '<div class="d-empty">Could not load the Hall of Fame.</div>';
+    return;
+  }
+  if (fame.days !== days || $('#d-title').textContent !== 'Hall of Fame') return;
+  const f = fame.data;
+  if (!f.awards.length) {
+    $('#d-body').innerHTML = `<div class="d-empty">No sessions in ${famePeriod(days)} yet.</div>`;
+    return;
+  }
+  $('#d-body').innerHTML = `<div class="fm-sum">${f.sessions} session${f.sessions === 1 ? '' : 's'} · ${f.commits} commit${f.commits === 1 ? '' : 's'} in ${famePeriod(days)}. Commits count toward the session working in that repo when they were made.</div>` +
+    f.awards.map((a) => `<div class="fm-award" data-award="${esc(a.key)}">
+      <div class="fm-head"><span class="fm-title">${esc(a.title)}</span><span class="fm-blurb">${esc(a.blurb)}</span>
+        <button class="copy" data-fame-share="${esc(a.key)}" title="Make a share card for this award">share card</button></div>
+      ${a.entries.map((e, i) => `<div class="fm-row${i === 0 ? ' first' : ''}">
+        <span class="flap">#${i + 1}</span>${hvAvatar(e.sessionId, '')}
+        <div class="fm-who"><div class="t" data-session="${esc(e.sessionId)}" title="${esc(e.title)}">${esc(e.title)}</div>
+          <div class="p">${esc(e.projectName)}${e.model ? ` · ${esc(modelShort(e.model))}` : ''} · ${esc(relTime(e.lastActivityAt))}</div></div>
+        <span class="fm-val">${esc(e.label)}</span></div>`).join('')}
+      <div class="fm-share"></div>
+    </div>`).join('');
+}
+
+// Titles are often a raw first prompt; keep home paths off a shareable image.
+function cardSafe(s) {
+  return String(s || '').replace(/\/(Users|home)\/[^/\s]+/g, '~').replace(/[A-Z]:\\Users\\[^\\\s]+/gi, '~');
+}
+
+function avatarImage(id) {
+  const svg = hvAvatar(id, '')
+    .replace('class="hv-avatar" ', 'xmlns="http://www.w3.org/2000/svg" width="240" height="240" ')
+    .replaceAll('var(--bg)', CARD.bg).replaceAll('var(--ink)', CARD.ink).replaceAll('var(--warn)', CARD.amber);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(null);
+    img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  });
+}
+
+async function renderFameCard(award) {
+  await Promise.all(['700 140px Oswald', '500 20px "JetBrains Mono"'].map((f) => document.fonts.load(f).catch(() => {})));
+  const c = document.createElement('canvas');
+  c.width = CARD.w * 2;
+  c.height = CARD.h * 2;
+  const g = c.getContext('2d');
+  g.scale(2, 2);
+  const oswald = (px, wt = 600) => `${wt} ${px}px Oswald, "Arial Narrow", sans-serif`;
+  const mono = (px, wt = 500) => `${wt} ${px}px "JetBrains Mono", ui-monospace, monospace`;
+  const text = (str, x, y, font, color, align = 'left', spacing = 0) => {
+    g.font = font; g.fillStyle = color; g.textAlign = align;
+    if ('letterSpacing' in g) g.letterSpacing = `${spacing}px`;
+    g.fillText(str, x, y);
+    if ('letterSpacing' in g) g.letterSpacing = '0px';
+  };
+  const fit = (str, max, font) => {
+    g.font = font;
+    let t = str;
+    while (t.length > 1 && g.measureText(t).width > max) t = t.slice(0, -2) + '…';
+    return t;
+  };
+  const win = award.entries[0];
+
+  g.fillStyle = CARD.bg; g.fillRect(0, 0, CARD.w, CARD.h);
+  text('❯ HALL OF FAME', 64, 92, oswald(30), CARD.amber, 'left', 2);
+  text(famePeriod(fame.days).toUpperCase(), CARD.w - 64, 90, mono(18), CARD.muted, 'right', 2);
+  g.fillStyle = CARD.line; g.fillRect(64, 116, CARD.w - 128, 2);
+
+  text(award.title.toUpperCase(), 58, 222, oswald(84, 700), CARD.ink, 'left', 1);
+  text(award.blurb, 64, 266, mono(20), CARD.muted);
+
+  const av = await avatarImage(win.sessionId);
+  g.fillStyle = CARD.flap; g.beginPath(); g.roundRect(64, 300, CARD.w - 128, 170, 8); g.fill();
+  if (av) g.drawImage(av, 88, 318, 134, 134);
+  text(fit(cardSafe(win.title), CARD.w - 128 - 200 - 260, mono(26, 700)), 246, 362, mono(26, 700), CARD.ink);
+  text(fit(`${win.projectName}${win.model ? ' · ' + modelShort(win.model) : ''}`, 560, mono(18)), 246, 398, mono(18), CARD.muted);
+  text(win.label, CARD.w - 92, 400, oswald(50, 600), CARD.amber, 'right');
+  text('#1', CARD.w - 92, 346, oswald(26, 600), CARD.muted, 'right');
+
+  award.entries.slice(1).forEach((e, i) => {
+    const y = 516 + i * 34;
+    text(`#${i + 2}`, 64, y, oswald(22, 600), CARD.faint);
+    text(fit(`${cardSafe(e.title)} · ${e.projectName}`, 760, mono(17)), 110, y, mono(17), CARD.muted);
+    text(e.label, CARD.w - 64, y, mono(17), CARD.muted, 'right');
+  });
+
+  text('npx claude-mission-control', CARD.w - 64, 606, mono(16), CARD.muted, 'right');
+  shareCanvas = c;
+  shareName = `hall-of-fame-${award.key}.png`;
+  return c.toDataURL('image/png');
+}
+
+document.addEventListener('click', async (e) => {
+  if (e.target.closest('[data-fame]')) { openFame(); return; }
+  const p = e.target.closest('[data-fame-days]');
+  if (p) { openFame(Number(p.dataset.fameDays)); return; }
+  const sb = e.target.closest('[data-fame-share]');
+  if (!sb || !fame.data) return;
+  const award = fame.data.awards.find((a) => a.key === sb.dataset.fameShare);
+  if (!award) return;
+  for (const el of document.querySelectorAll('.fm-share')) el.innerHTML = '';
+  const box = sb.closest('.fm-award').querySelector('.fm-share');
+  box.innerHTML = '<div class="d-empty">Drawing…</div>';
+  const url = await renderFameCard(award);
+  box.innerHTML = `<img alt="${esc(award.title)} share card" src="${url}">
+    <div style="margin-top:10px;display:flex;gap:8px"><button class="copy" data-card-download>download PNG ⇩</button><button class="copy" data-card-copy>copy image</button></div>`;
+});
+
 document.addEventListener('click', async (e) => {
   if (!shareCanvas) return;
   if (e.target.closest('[data-card-download]')) {
     const a = document.createElement('a');
     a.href = shareCanvas.toDataURL('image/png');
-    a.download = `week-with-claude-${new Date().toISOString().slice(0, 10)}.png`;
+    a.download = shareName;
     a.click();
     toast('Card downloaded');
   } else if (e.target.closest('[data-card-copy]')) {
@@ -3560,6 +3709,7 @@ function paletteItems(q) {
   items.push({ k: '⚙', label: 'Settings', hint: 'rename, hide, terminal, notifications', run: openSettings });
   items.push({ k: '▦', label: 'Mission Control', hint: 'every live session at once', run: openMissionControl });
   items.push({ k: '⬢', label: 'Hive', hint: 'live sessions as characters · who is winning', run: openHive });
+  items.push({ k: '★', label: 'Hall of Fame', hint: 'your best sessions by award · share cards', run: () => openFame() });
   items.push({ k: '▲', label: 'Stats', hint: 'heatmap · models · hours', run: openStats });
   items.push({ k: '⌗', label: 'Plugins & MCP', hint: 'what is installed, enabled, needs auth', run: openInventory });
   items.push({ k: '☰', label: 'Your week with Claude', hint: '7-day report · export', run: openWeekReport });

package/server.js

@@ -16,9 +16,11 @@ const { friendlyName } = require('./lib/names');
 const cfg = require('./lib/config');
 const { isProjectMuted } = require('./lib/notify');
 const { recentCommits, linkCommitsToSessions, commitCosts } = require('./lib/gitlog');
+const { hallOfFame } = require('./lib/fame');
 const { createRemoteServer } = require('./lib/remote');
 const { sessionChangeList, sessionFileDiff } = require('./lib/changes');
-const { demoState, demoStats, demoSession, demoChanges, demoInventory, demoProject } = require('./lib/demo');
+const { demoState, demoStats, demoSession, demoChanges, demoInventory, demoProject, demoFame } = require('./lib/demo');
+const fameCache = new Map(); // days -> { at, data }; git log per project is too slow to run per click
 const { runSelfUpdate } = require('./lib/update');
 const { readInventory } = require('./lib/inventory');
 const { readToolset } = require('./lib/toolset');
@@ -123,6 +125,7 @@ const server = http.createServer((req, res) => {
     if (url === '/api/state') return json(res, 200, demoState());
     if (url === '/api/health') return json(res, 200, { ok: true, demo: true, version: VERSION });
     if (url === '/api/stats') return json(res, 200, demoStats());
+    if (url === '/api/fame') return json(res, 200, demoFame());
     if (url === '/api/inventory') return json(res, 200, demoInventory());
     if (url === '/api/session') {
       const q = new URL(req.url, 'http://localhost').searchParams;
@@ -273,6 +276,24 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  if (url === '/api/fame') {
+    const raw = Number(new URL(req.url, 'http://localhost').searchParams.get('days'));
+    const days = [7, 30, 0].includes(raw) ? raw : 30;
+    const hit = fameCache.get(days);
+    if (hit && Date.now() - hit.at < 60000) return json(res, 200, hit.data);
+    const sessions = collector.fameSessions();
+    const cut = days ? Date.now() - days * 86400000 : 0;
+    const paths = [...new Set(sessions.filter((s) => s.lastActivityAt >= cut).map((s) => s.projectPath))];
+    Promise.all(paths.map((p) => recentCommits(p, 1000).then((c) => [p, c])))
+      .then((pairs) => {
+        const data = hallOfFame(sessions, Object.fromEntries(pairs), { days });
+        fameCache.set(days, { at: Date.now(), data });
+        json(res, 200, data);
+      })
+      .catch((e) => json(res, 500, { error: String(e.message).slice(0, 200) }));
+    return;
+  }
+
   if (url === '/api/inventory') {
     readInventory(collector.projectPaths())
       .then((inv) => json(res, 200, inv))