claude-rpc 0.10.0 → 0.11.1

package/README.md

@@ -259,6 +259,7 @@ The full default config is in [`src/default-config.js`](src/default-config.js)
 | `session-card`   | Recap card for the current session (`--out`) |
 | `statusline`     | One-line status for tmux/shell prompts (`--template`) |
 | `mcp`            | Run as an MCP server — expose your stats to Claude Code |
+| `wrapped`        | Open your animated year-in-review (Claude Wrapped) |
 | `private` / `public` / `privacy` | Per-cwd visibility toggles + status |
 | `community`      | Opt-in community totals — `on` \| `off` \| `status` \| `report` |
 | `doctor`         | Diagnostic checklist with one-line fix hints |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-rpc",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Discord Rich Presence for Claude Code — live model, project, tokens, and lifetime stats driven by Claude Code's hook system.",
   "type": "module",
   "license": "MIT",

package/src/cli.js

@@ -1141,6 +1141,7 @@ function help() {
     ['calendar',  'Year activity heatmap SVG (--out --gist)'],
     ['session-card', 'Recap card for the current session (--out)'],
     ['mcp',       'Run as an MCP server — expose your stats to Claude Code'],
+    ['wrapped',   'Open your animated year-in-review (Claude Wrapped)'],
     ['private',   'Mark the current directory as private (hide from Discord)'],
     ['public',    'Un-mark the current directory'],
     ['privacy',   'Show resolved visibility for the current directory'],
@@ -1218,6 +1219,7 @@ const packagedDefault = IS_PACKAGED && !cmd;
     case 'calendar':  await doCalendar(process.argv.slice(3)); break;
     case 'session-card': await doSessionCard(process.argv.slice(3)); break;
     case 'mcp':       await doMcp(); break;
+    case 'wrapped':   process.env.CLAUDE_RPC_OPEN_PATH = '/wrapped'; await import('./server/index.js'); break;
     case 'private':   doPrivate(); break;
     case 'public':    doPublic(); break;
     case 'privacy':   doPrivacy(); break;

package/src/server/api.js

@@ -4,7 +4,7 @@
 
 import { basename } from 'node:path';
 import { readState } from '../state.js';
-import { buildVars, fillTemplate, applyIdle, framePasses } from '../format.js';
+import { buildVars, fillTemplate, applyIdle, framePasses, humanModel } from '../format.js';
 import { readAggregate, findLiveSessions, dayKey } from '../scanner.js';
 import { loadConfig as loadSharedConfig } from '../config.js';
 
@@ -154,6 +154,47 @@ export function snapshot() {
   };
 }
 
+// Curated payload for the animated /wrapped year-in-review page. One flat
+// object the client turns into story slides — all the headline lifetime stats.
+const WRAPPED_WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+export function wrappedData() {
+  const agg = readAggregate() || {};
+  const fresh = (agg.inputTokens || 0) + (agg.outputTokens || 0);
+  const cache = (agg.cacheReadTokens || 0) + (agg.cacheWriteTokens || 0);
+  const tokens = fresh + cache;
+  const langs = Object.entries(agg.languages || {}).sort((a, b) => (b[1].edits || 0) - (a[1].edits || 0));
+  const top = (agg.topEditedFiles || [])[0] || null;
+  let peakWd = null;
+  for (const [k, v] of Object.entries(agg.byWeekday || {})) {
+    if (!peakWd || (v.activeMs || 0) > peakWd.ms) peakWd = { day: Number(k), ms: v.activeMs || 0 };
+  }
+  return {
+    generatedAt: Date.now(),
+    activeMs: agg.activeMs || 0,
+    sessions: agg.sessions || 0,
+    prompts: agg.userMessages || 0,
+    toolCalls: agg.toolCalls || 0,
+    tokens, freshTokens: fresh, cacheTokens: cache,
+    cachePct: tokens > 0 ? Math.round((cache / tokens) * 100) : 0,
+    streak: agg.streak || 0,
+    longestStreak: agg.longestStreak || 0,
+    daysSinceFirst: agg.daysSinceFirst || 0,
+    topLanguage: langs[0] ? { name: langs[0][0], edits: langs[0][1].edits || 0 } : null,
+    languages: langs.slice(0, 5).map(([name, v]) => ({ name, edits: v.edits || 0 })),
+    hotspot: top ? { name: basename(String(top.path || '')), count: top.count, daysSinceLastEdit: top.daysSinceLastEdit } : null,
+    peakHour: agg.peakHour && agg.peakHour.hour != null ? agg.peakHour.hour : null,
+    peakWeekday: peakWd ? { name: WRAPPED_WEEKDAYS[peakWd.day], hours: peakWd.ms / 3_600_000 } : null,
+    modelSplit: (agg.modelSplit || []).slice(0, 4).map((m) => ({ model: humanModel(m.model) || m.model, costPct: m.costPct || 0, tokenPct: m.tokenPct || 0 })),
+    linesAdded: agg.linesAdded || 0,
+    linesNet: agg.linesNet ?? ((agg.linesAdded || 0) - (agg.linesRemoved || 0)),
+    cost: agg.estimatedCost || 0,
+    bestDay: agg.bestDay ? { date: agg.bestDay.day, hours: (agg.bestDay.activeMs || 0) / 3_600_000 } : null,
+    uniqueFiles: agg.uniqueFiles || 0,
+    subagentRuns: agg.subagentRuns || 0,
+    notifications: agg.notifications || 0,
+  };
+}
+
 export function projectDrilldown(name) {
   const agg = readAggregate() || {};
   const projects = agg.projects || {};

package/src/server/assets/dashboard.css

@@ -324,3 +324,13 @@ footer .pulse-dot { background: var(--grass); border: 1.5px solid var(--ink); }
   .rotation-list { grid-template-columns: 1fr; }
   .drawer { width: 100%; }
 }
+
+/* Wrapped link (v0.11) */
+.wrapped-link {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
+  text-decoration: none; color: var(--rust, #c2491e);
+  border: 1.5px solid var(--rust, #c2491e); border-radius: 4px;
+  padding: 5px 10px; white-space: nowrap; transition: all 0.15s ease;
+}
+.wrapped-link:hover { background: var(--rust, #c2491e); color: var(--paper, #f4ede0); }

package/src/server/assets/dashboard.html

@@ -29,6 +29,7 @@
         <button data-range="1y">1y</button>
         <button data-range="all">All</button>
       </div>
+      <a class="wrapped-link" href="/wrapped" title="Your animated year-in-review">✦ Wrapped</a>
       <button class="theme-btn" id="theme-btn" title="Toggle theme">◐</button>
       <span class="model" id="model">—</span>
       <span class="status"><span class="dot" id="dot"></span><span id="statustext">—</span></span>

package/src/server/assets/wrapped.client.js

@@ -0,0 +1,227 @@
+(() => {
+  'use strict';
+  const app = document.getElementById('app');
+
+  // ── format helpers ───────────────────────────────────────────
+  const fmtNum = (n) => {
+    n = +n || 0;
+    if (n < 1000) return String(Math.round(n));
+    if (n < 1e6) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'k';
+    if (n < 1e9) return (n / 1e6).toFixed(2).replace(/\.?0+$/, '') + 'M';
+    return (n / 1e9).toFixed(2).replace(/\.?0+$/, '') + 'B';
+  };
+  const fmtHours = (ms) => { const h = (ms || 0) / 3.6e6; return h < 1 ? Math.round(h * 60) + 'm' : h < 10 ? h.toFixed(1) + 'h' : Math.round(h) + 'h'; };
+  const esc = (s) => String(s == null ? '' : s).replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+  const GIF = 'https://cdn.qualit.ly/';
+
+  // anim-stagger style helper
+  let _i = 0; const A = () => `style="--i:${_i++}"`;
+
+  // ── build the story slides from the wrapped payload ──────────
+  function buildSlides(d) {
+    const out = [];
+    const hours = (d.activeMs || 0) / 3.6e6;
+    const perDay = d.prompts / Math.max(1, d.daysSinceFirst);
+    const pad2 = (h) => String(h).padStart(2, '0');
+
+    const S = (cls, body, dur) => { _i = 0; out.push({ cls, html: body, dur: dur || 5200 }); };
+
+    // 1. intro
+    S('ink', `
+      <img class="gif anim" ${A()} src="${GIF}clawd-working-building.gif" alt="" />
+      <div class="kicker anim" ${A()}>claude-rpc presents</div>
+      <div class="big anim" ${A()}>Your Year<br/>on Claude Code</div>
+      <div class="sub anim" ${A()}>${esc(d.daysSinceFirst)} days in the making · tap →</div>`, 4200);
+
+    // 2. hours
+    S('rust', `
+      <div class="kicker anim" ${A()}>you spent</div>
+      <div class="huge anim" ${A()}><span data-count="${hours}" data-fmt="1dp">0</span></div>
+      <div class="unit anim" ${A()}>hours with Claude</div>
+      <div class="sub anim" ${A()}>across ${fmtNum(d.sessions)} sessions${d.bestDay ? ` · your biggest day was ${fmtHours(d.bestDay.hours * 3.6e6)}` : ''}</div>`);
+
+    // 3. sessions + streak
+    S('gold', `
+      <div class="kicker anim" ${A()}>you opened</div>
+      <div class="huge anim" ${A()}><span data-count="${d.sessions}" data-fmt="num">0</span></div>
+      <div class="unit anim" ${A()}>sessions</div>
+      <div class="sub anim" ${A()}>longest streak: <b>${d.longestStreak} days</b> in a row${d.streak ? ` · ${d.streak} going now` : ''}</div>`);
+
+    // 4. prompts
+    S('grass', `
+      <div class="kicker anim" ${A()}>you asked</div>
+      <div class="huge anim" ${A()}><span data-count="${d.prompts}" data-fmt="num">0</span></div>
+      <div class="unit anim" ${A()}>prompts</div>
+      <div class="sub anim" ${A()}>that's about <b>${perDay < 10 ? perDay.toFixed(1) : Math.round(perDay)}</b> a day, every day</div>`);
+
+    // 5. tokens
+    S('blurple', `
+      <div class="kicker anim" ${A()}>you moved</div>
+      <div class="huge anim" ${A()}><span data-count="${d.tokens}" data-fmt="num">0</span></div>
+      <div class="unit anim" ${A()}>tokens</div>
+      <div class="sub anim" ${A()}>${d.cachePct}% reused from cache — Claude has a good memory</div>`);
+
+    // 6. top language
+    if (d.topLanguage) S('plum', `
+      <div class="kicker anim" ${A()}>you mostly spoke</div>
+      <div class="anim" ${A()}><span class="tapebadge pop">${esc(d.topLanguage.name)}</span></div>
+      <div class="sub anim" ${A()}>${fmtNum(d.topLanguage.edits)} edits — your number-one language</div>`);
+
+    // 7. hotspot file
+    if (d.hotspot) {
+      const age = d.hotspot.daysSinceLastEdit == null ? '' : d.hotspot.daysSinceLastEdit === 0 ? ' · still warm today' : ` · last touched ${d.hotspot.daysSinceLastEdit}d ago`;
+      S('ink', `
+        <div class="kicker anim" ${A()}>you kept coming back to</div>
+        <div class="big anim" ${A()} style="font-family:'JetBrains Mono',monospace;font-size:clamp(30px,9vw,68px);--i:1">${esc(d.hotspot.name)}</div>
+        <div class="sub anim" ${A()}>${fmtNum(d.hotspot.count)} edits${age}</div>`);
+    }
+
+    // 8. peak time
+    if (d.peakWeekday && d.peakHour != null) S('rust', `
+      <div class="kicker anim" ${A()}>you were in the zone on</div>
+      <div class="big anim" ${A()}>${esc(d.peakWeekday.name)}s</div>
+      <div class="unit anim" ${A()}>around ${pad2(d.peakHour)}:00</div>
+      <div class="sub anim" ${A()}>your most productive window</div>`);
+
+    // 9. model split
+    if (d.modelSplit && d.modelSplit.length) {
+      const rows = d.modelSplit.filter((m) => m.costPct > 0).map((m) => {
+        const pct = Math.round(m.costPct * 100);
+        return `<div class="msrow anim" ${A()}><span class="lbl">${esc(m.model)}</span><span class="mstrack"><span class="msfill" style="--w:${pct}%"></span></span><span class="pct">${pct}%</span></div>`;
+      }).join('');
+      S('paper', `
+        <div class="kicker anim" ${A()} style="--i:0">your models, by spend</div>
+        <div class="msplit">${rows}</div>
+        <div class="sub anim" ${A()} style="opacity:.7">${esc((d.modelSplit[0] || {}).model || '')} did most of the heavy lifting</div>`);
+    }
+
+    // 10. lines
+    if (d.linesAdded) S('grass', `
+      <div class="kicker anim" ${A()}>together you wrote</div>
+      <div class="huge anim" ${A()}><span data-count="${d.linesAdded}" data-fmt="num">0</span></div>
+      <div class="unit anim" ${A()}>lines of code</div>
+      <div class="sub anim" ${A()}>${d.linesNet >= 0 ? '+' : '−'}${fmtNum(Math.abs(d.linesNet))} net after the dust settled</div>`);
+
+    // 11. finale summary
+    const cell = (k, v, cls) => `<div><div class="cellk">${k}</div><div class="cellv ${cls || ''}">${v}</div></div>`;
+    S('ink', `
+      <div class="summary">
+        <div class="card pop" style="--i:0">
+          <h2>Your Year on Claude Code</h2>
+          <div class="meta">day ${d.daysSinceFirst} · ${new Date(d.generatedAt).toISOString().slice(0, 10)}</div>
+          <div class="grid">
+            ${cell('Time', fmtHours(d.activeMs), 'rust')}
+            ${cell('Sessions', fmtNum(d.sessions))}
+            ${cell('Prompts', fmtNum(d.prompts))}
+            ${cell('Tokens', fmtNum(d.tokens))}
+            ${cell('Streak', (d.longestStreak || 0) + 'd')}
+            ${cell('Top lang', d.topLanguage ? esc(d.topLanguage.name) : '—')}
+            ${cell('Lines', (d.linesNet >= 0 ? '+' : '−') + fmtNum(Math.abs(d.linesNet)), 'grass')}
+            ${cell('Hotspot', d.hotspot ? esc(d.hotspot.name) : '—')}
+          </div>
+          <div class="foot">made with claude-rpc · github.com/rar-file/claude-rpc</div>
+        </div>
+        <div class="actions">
+          <button class="btn primary" id="w-replay">↺ replay</button>
+          <a class="btn" id="w-poster" href="/api/card.svg?range=all" target="_blank">poster ↗</a>
+          <button class="btn" id="w-copy">copy link</button>
+        </div>
+      </div>
+      <div class="hint">screenshot the card to share your wrapped</div>`, 9_000_000); // last slide: effectively no auto-advance
+
+    return out;
+  }
+
+  // ── story engine ─────────────────────────────────────────────
+  function mount(slides) {
+    _i = 0;
+    const bars = slides.map(() => `<div class="bar"><i></i></div>`).join('');
+    const slideEls = slides.map((s) => `<section class="slide ${s.cls}">${s.html}</section>`).join('');
+    app.innerHTML = `<div class="story" id="story">
+      <div class="bars">${bars}</div>
+      <div class="brandtag">claude wrapped</div>
+      ${slideEls}
+      <div class="tap left" id="tapL"></div>
+      <div class="tap right" id="tapR"></div>
+      <div class="hint" id="navhint">← →  ·  space to pause</div>
+    </div>`;
+
+    const story = document.getElementById('story');
+    const barEls = [...story.querySelectorAll('.bar')];
+    const els = [...story.querySelectorAll('.slide')];
+    let idx = -1, timer = null, paused = false;
+
+    function runCountups(slide) {
+      slide.querySelectorAll('[data-count]').forEach((node) => {
+        const target = parseFloat(node.dataset.count) || 0, fmt = node.dataset.fmt || 'int';
+        const dur = 1300, t0 = performance.now();
+        const val = (v) => fmt === 'num' ? fmtNum(v) : fmt === '1dp' ? (v < 10 ? v.toFixed(1) : String(Math.round(v))) : String(Math.round(v));
+        function tick(t) {
+          const p = Math.min(1, (t - t0) / dur), e = 1 - Math.pow(1 - p, 3);
+          node.textContent = val(target * e);
+          if (p < 1) requestAnimationFrame(tick); else node.textContent = val(target);
+        }
+        requestAnimationFrame(tick);
+      });
+    }
+
+    function go(i) {
+      if (i < 0 || i >= slides.length) return;
+      idx = i; paused = false; story.classList.remove('paused');
+      els.forEach((s, k) => s.classList.toggle('active', k === i));
+      barEls.forEach((b, k) => { b.classList.remove('active', 'done'); if (k < i) b.classList.add('done'); });
+      const ab = barEls[i];
+      ab.style.setProperty('--dur', (slides[i].dur || 5200) + 'ms');
+      void ab.offsetWidth; // reflow → restart fill animation
+      ab.classList.add('active');
+      // The finale carries its own "screenshot to share" hint — hide the
+      // nav hint there so the two don't stack at the bottom edge.
+      const nh = document.getElementById('navhint');
+      if (nh) nh.style.visibility = (i === slides.length - 1) ? 'hidden' : 'visible';
+      setTimeout(() => { if (idx === i) runCountups(els[i]); }, 220);
+      clearTimeout(timer);
+      if (i < slides.length - 1) timer = setTimeout(() => { if (!paused) go(idx + 1); }, slides[i].dur || 5200);
+      if (i === slides.length - 1) wireFinale();
+    }
+    const next = () => go(Math.min(idx + 1, slides.length - 1));
+    const prev = () => go(Math.max(idx - 1, 0));
+    function pauseToggle() {
+      paused = !paused; story.classList.toggle('paused', paused);
+      if (paused) clearTimeout(timer);
+      else if (idx < slides.length - 1) timer = setTimeout(() => go(idx + 1), slides[idx].dur || 5200);
+    }
+
+    document.getElementById('tapL').onclick = prev;
+    document.getElementById('tapR').onclick = next;
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowRight') next();
+      else if (e.key === 'ArrowLeft') prev();
+      else if (e.key === ' ') { e.preventDefault(); pauseToggle(); }
+    });
+
+    let wired = false;
+    function wireFinale() {
+      if (wired) return; wired = true;
+      const r = document.getElementById('w-replay');
+      const c = document.getElementById('w-copy');
+      if (r) r.onclick = (e) => { e.stopPropagation(); go(0); };
+      if (c) c.onclick = (e) => {
+        e.stopPropagation();
+        navigator.clipboard?.writeText(location.href).then(() => { c.textContent = 'copied ✓'; setTimeout(() => c.textContent = 'copy link', 1500); }).catch(() => {});
+      };
+    }
+
+    go(0);
+  }
+
+  // ── boot ─────────────────────────────────────────────────────
+  fetch('/api/wrapped').then((r) => r.json()).then((d) => {
+    if (!d || !d.sessions) {
+      app.innerHTML = `<div class="boot">no data yet — run <code style="opacity:.9">claude-rpc scan</code> first, then refresh.</div>`;
+      return;
+    }
+    mount(buildSlides(d));
+  }).catch(() => {
+    app.innerHTML = `<div class="boot">couldn't load your year. is the daemon's <code>serve</code> running?</div>`;
+  });
+})();

package/src/server/assets/wrapped.css

@@ -0,0 +1,121 @@
+/* Claude Wrapped — full-screen, animated, Spotify-Wrapped-style story. */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --ink: #1a1611; --paper: #f4ede0; --rust: #c2491e; --rust3: #f08a4a;
+  --tape: #f2d76e; --grass: #4a9462; --blurple: #5865f2; --plum: #7b3f6b;
+}
+html, body { height: 100%; overflow: hidden; background: var(--ink); }
+body {
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  color: var(--paper); -webkit-font-smoothing: antialiased;
+  user-select: none; -webkit-user-select: none;
+}
+.boot {
+  position: fixed; inset: 0; display: grid; place-items: center;
+  font-family: 'JetBrains Mono', monospace; color: var(--paper); opacity: 0.7;
+  letter-spacing: 1px;
+}
+.dots::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
+@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
+
+/* ── story shell ─────────────────────────────────────────────── */
+.story { position: fixed; inset: 0; overflow: hidden; }
+.bars {
+  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
+  display: flex; gap: 5px; padding: 14px 16px;
+}
+.bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.28); overflow: hidden; }
+.bar > i { display: block; height: 100%; width: 0; background: rgba(255,255,255,0.95); }
+.bar.done > i { width: 100%; }
+.bar.active > i { animation: fill var(--dur, 5500ms) linear forwards; }
+.story.paused .bar.active > i { animation-play-state: paused; }
+@keyframes fill { to { width: 100%; } }
+
+.brandtag {
+  position: absolute; top: 26px; left: 0; right: 0; z-index: 25; text-align: center;
+  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 3px;
+  text-transform: uppercase; opacity: 0.65; pointer-events: none;
+}
+
+/* nav tap zones */
+.tap { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 20; cursor: pointer; }
+.tap.left { left: 0; } .tap.right { right: 0; width: 65%; }
+
+/* ── slides ──────────────────────────────────────────────────── */
+.slide {
+  position: absolute; inset: 0; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; text-align: center;
+  padding: 64px 30px; gap: 14px;
+  opacity: 0; visibility: hidden; transition: opacity 0.45s ease;
+}
+.slide.active { opacity: 1; visibility: visible; }
+.slide.ink    { background: var(--ink);    color: var(--paper); }
+.slide.rust   { background: var(--rust);   color: var(--paper); }
+.slide.gold   { background: var(--tape);   color: var(--ink); }
+.slide.grass  { background: var(--grass);  color: var(--paper); }
+.slide.blurple{ background: var(--blurple);color: var(--paper); }
+.slide.plum   { background: var(--plum);   color: var(--paper); }
+.slide.paper  { background: var(--paper);  color: var(--ink); }
+.slide::after { /* subtle dot grid */
+  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.10;
+  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
+  background-size: 26px 26px;
+}
+
+/* entrance animation — children with .anim rise + fade in, staggered */
+.slide .anim { opacity: 0; transform: translateY(26px); }
+.slide.active .anim { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 0.13s + 0.1s); }
+@keyframes rise { to { opacity: 1; transform: none; } }
+.slide.active .pop { animation: pop 0.6s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(var(--i, 0) * 0.13s + 0.15s); }
+@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
+
+.kicker { font-family: 'JetBrains Mono', monospace; font-size: clamp(13px, 3.6vw, 17px); letter-spacing: 1px; opacity: 0.85; max-width: 16ch; line-height: 1.5; }
+.huge   { font-weight: 800; font-size: clamp(64px, 22vw, 168px); line-height: 0.92; letter-spacing: -4px; }
+.big    { font-weight: 800; font-size: clamp(40px, 13vw, 104px); line-height: 0.98; letter-spacing: -2px; }
+.sub    { font-family: 'JetBrains Mono', monospace; font-size: clamp(13px, 3.6vw, 16px); opacity: 0.8; max-width: 26ch; line-height: 1.6; }
+.unit   { font-weight: 700; font-size: clamp(22px, 7vw, 44px); letter-spacing: -1px; }
+.tapebadge {
+  display: inline-block; background: var(--tape); color: var(--ink);
+  font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 1px;
+  padding: 7px 14px; border: 2px solid var(--ink); transform: rotate(-2deg);
+  font-size: clamp(15px, 4.5vw, 22px); text-transform: uppercase;
+}
+.gif { width: clamp(96px, 28vw, 150px); image-rendering: auto; }
+
+/* model split bars */
+.msplit { width: min(86vw, 420px); display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
+.msrow { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
+.msrow .lbl { width: 88px; text-align: right; opacity: 0.9; }
+.mstrack { flex: 1; height: 14px; background: rgba(0,0,0,0.18); border-radius: 8px; overflow: hidden; }
+.slide.gold .mstrack, .slide.paper .mstrack { background: rgba(0,0,0,0.12); }
+.msfill { display: block; height: 100%; width: 0; background: currentColor; border-radius: 8px;
+  transition: width 0.95s cubic-bezier(.2,.7,.2,1) 0.35s; }
+.slide.active .msfill { width: var(--w, 0%); }
+.msrow .pct { width: 44px; opacity: 0.85; }
+
+/* ── finale summary ──────────────────────────────────────────── */
+/* z-index lifts the card + action buttons ABOVE the full-screen .tap nav
+   zones (z-index 20) — otherwise the tap layer swallows every button click. */
+.summary { width: min(92vw, 460px); position: relative; z-index: 24; }
+.card {
+  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
+  box-shadow: 8px 9px 0 rgba(0,0,0,0.35); padding: 24px 24px 20px; text-align: left;
+}
+.card h2 { font-size: clamp(26px, 8vw, 36px); letter-spacing: -1.5px; margin-bottom: 2px; }
+.card .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #5c5147; margin-bottom: 16px; }
+.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
+.cellk { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #5c5147; text-transform: uppercase; }
+.cellv { font-weight: 800; font-size: clamp(20px, 6vw, 26px); letter-spacing: -0.5px; line-height: 1.1; }
+.cellv.rust { color: var(--rust); } .cellv.grass { color: var(--grass); }
+.foot { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8a7c6d; margin-top: 16px; border-top: 1px dashed #c9bca3; padding-top: 10px; }
+.actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
+.btn {
+  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
+  padding: 11px 18px; border: 2px solid var(--paper); background: transparent; color: var(--paper);
+  cursor: pointer; letter-spacing: 0.5px; border-radius: 2px;
+}
+.btn.primary { background: var(--paper); color: var(--ink); }
+.btn:hover { transform: translateY(-1px); }
+
+.hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.5; z-index: 25; pointer-events: none; }
+@media (max-width: 420px) { .grid { gap: 12px 14px; } }

package/src/server/assets/wrapped.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>Your Year on Claude Code · claude-rpc</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>{{STYLES}}</style>
+</head>
+<body>
+<div id="app"><div class="boot">building your year<span class="dots"></span></div></div>
+<script>{{SCRIPT}}</script>
+</body>
+</html>

package/src/server/index.js

@@ -16,11 +16,12 @@ import { exec } from 'node:child_process';
 import { ROUTES, JSON_HEADERS } from './routes.js';
 import { projectDrilldown, dayDetail } from './api.js';
 import { sseClients, watchSources } from './sse.js';
-import { buildHtml } from './page.js';
+import { buildHtml, buildWrappedHtml } from './page.js';
 
 // Pre-compose the HTML once at startup — the only dynamic bit is the port
 // (used in a breadcrumb), which is fixed for the life of the daemon.
 const HTML = buildHtml({ port: Number(process.env.CLAUDE_RPC_PORT) || 47474 });
+const WRAPPED_HTML = buildWrappedHtml();
 
 const PORT = Number(process.env.CLAUDE_RPC_PORT) || 47474;
 
@@ -70,6 +71,13 @@ const server = createServer((req, res) => {
   const handler = ROUTES.get(key);
   if (handler) return handler(req, res, { query });
 
+  // Animated year-in-review.
+  if (req.method === 'GET' && (path === '/wrapped' || path === '/wrapped.html')) {
+    res.writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' });
+    res.end(WRAPPED_HTML);
+    return;
+  }
+
   // Page.
   if (req.method === 'GET' && (path === '/' || path === '/index.html')) {
     res.writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' });
@@ -83,9 +91,13 @@ const server = createServer((req, res) => {
 watchSources();
 
 server.listen(PORT, '127.0.0.1', () => {
-  const url = `http://127.0.0.1:${PORT}`;
-  console.log(`◆ Claude RPC dashboard: ${url}`);
-  console.log('  Ctrl-C to stop.');
+  const base = `http://127.0.0.1:${PORT}`;
+  // `claude-rpc wrapped` sets CLAUDE_RPC_OPEN_PATH=/wrapped to land on the
+  // animated year-in-review instead of the dashboard.
+  const openPath = process.env.CLAUDE_RPC_OPEN_PATH || '';
+  const url = base + openPath;
+  console.log(`◆ Claude RPC dashboard: ${base}`);
+  console.log(`  ${openPath ? 'opening ' + url + '  ·  ' : ''}Ctrl-C to stop.`);
   if (!process.env.CLAUDE_RPC_NO_OPEN) {
     const opener = process.platform === 'win32' ? `start "" "${url}"`
       : process.platform === 'darwin' ? `open "${url}"`

package/src/server/page.js

@@ -19,6 +19,10 @@ const TEMPLATE = loadAsset('dashboard.html');
 const STYLES   = loadAsset('dashboard.css');
 const SCRIPT   = loadAsset('dashboard.client.js');
 
+const WRAPPED_TEMPLATE = loadAsset('wrapped.html');
+const WRAPPED_STYLES   = loadAsset('wrapped.css');
+const WRAPPED_SCRIPT   = loadAsset('wrapped.client.js');
+
 function buildHtml({ port }) {
   // Replacer FUNCTIONS, not strings: the client JS is full of `$(id)` DOM
   // accessors and the CSS could carry `$`, both of which String.prototype
@@ -30,4 +34,11 @@ function buildHtml({ port }) {
     .replaceAll('{{PORT}}', String(port));
 }
 
-export { buildHtml };
+// The animated /wrapped year-in-review. Same compose-once pattern.
+function buildWrappedHtml() {
+  return WRAPPED_TEMPLATE
+    .replace('{{STYLES}}', () => WRAPPED_STYLES)
+    .replace('{{SCRIPT}}', () => WRAPPED_SCRIPT);
+}
+
+export { buildHtml, buildWrappedHtml };

package/src/server/routes.js

@@ -8,7 +8,7 @@ import { readAggregate } from '../scanner.js';
 import { generateInsights } from '../insights.js';
 import { badgeSvg } from '../badge.js';
 import { renderCard } from '../card.js';
-import { snapshot, windowedAggregate, aggregateToCsv } from './api.js';
+import { snapshot, windowedAggregate, aggregateToCsv, wrappedData } from './api.js';
 
 export const JSON_HEADERS = {
   'content-type': 'application/json',
@@ -22,6 +22,11 @@ ROUTES.set('GET /api/state', (req, res) => {
   res.end(JSON.stringify(snapshot()));
 });
 
+ROUTES.set('GET /api/wrapped', (req, res) => {
+  res.writeHead(200, JSON_HEADERS);
+  res.end(JSON.stringify(wrappedData()));
+});
+
 ROUTES.set('GET /api/aggregate', (req, res, { query }) => {
   const range = query.range || '90d';
   const agg = readAggregate();

package/src/version.js

@@ -11,7 +11,7 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { ROOT } from './paths.js';
 
-const BAKED = '0.10.0';
+const BAKED = '0.11.1';
 
 function readPkgVersion() {
   try {