you-wrapped 0.1.0 → 0.3.0

package/README.md

@@ -36,6 +36,9 @@ you-wrapped-out/
   portrait.json        the analysis          (with --synthesize)
   wrapped.html         your portrait         (with --synthesize)
   wrapped.share.html   redacted, safe to post
+
+wrapped.html has two modes: swipeable story cards (arrows, tap, or swipe) and a
+full long-read with every finding at length. Press R to switch.
 ```
 
 ## Usage

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: you-wrapped
-description: Build an evidence-grounded portrait of the user from everything you can reach — their Mac (iMessage, Notes, browser, photo metadata) plus any connected services (Gmail, Calendar, Drive, Slack, Granola, Linear). Use when someone asks you to "understand me", wants a personal year-in-review or "wrapped", a self-audit, or asks what their own data says about them.
+description: Build an evidence-grounded portrait of the user from everything you can reach — their Mac (iMessage, Notes, browser, photo metadata) plus any connected services (Gmail, Calendar, Drive, Slack, Granola, Linear). Use when someone asks you to "understand me", wants a personal year-in-review or "wrapped", a self-audit, asks what their own data says about them, or says "do a you-wrapped on me".
 ---
 
 # you-wrapped
@@ -17,17 +17,9 @@ connectors alone misses what they write at 1am.
 ## Phase 1 — local extraction (the CLI)
 
 ```bash
-# Published (once it's on npm):
 npx you-wrapped --days 400 --out ./wrapped
-
-# Not published yet — run from a local checkout:
-npx /path/to/you-wrapped --days 400 --out ./wrapped
 ```
 
-**Verify which form applies before running.** `npm view you-wrapped version` — if that
-404s, the package is unpublished and you must use the local path. Do not run a bare
-`npx you-wrapped` against an unclaimed name.
-
 Reads iMessage (including `attributedBody` — ~44% of messages, invisible to naive
 scrapers), Apple Notes, Contacts, Chrome + Safari history split by device, and photo
 metadata. Writes `signals.json`, `evidence.local.md`, `prompt.md`.
@@ -63,8 +55,9 @@ Don't summarize `signals.json` back to them. Counts are not insight. Work the me
 many domains. State it in one sentence, then show it in four unrelated places. If no single
 trait explains most of the data, say so rather than inventing one.
 
-**2. Find the scissor.** Two trends moving in opposite directions that shouldn't.
-Commitment language rising while requests-for-help fall is the common one. Quantify it.
+**2. Find the scissor.** Two trends moving in opposite directions that shouldn't — output up while
+recovery down, breadth up while depth down, promises up while asks down. Find whichever pair *this*
+data actually shows rather than reaching for a template. Quantify it.
 
 **3. Find a dated collision.** Cross-reference sources for a specific day where two
 commitments overlapped and one broke — photo GPS against a written regret, travel against a
@@ -89,12 +82,47 @@ it.** Let them. This is the part that earns the rest.
 Write the portrait as JSON matching the schema in `prompt.md`, then:
 
 ```bash
-npx /path/to/you-wrapped --render portrait.json --out ./wrapped
+npx you-wrapped --render portrait.json --out ./wrapped
 ```
 
 Produces `wrapped.html` and a redacted `wrapped.share.html`. Tell them to read the share
 copy before posting it — they should verify their own scrub.
 
+## Phase 5 — offer to go deeper (every machine is different)
+
+The standard sweep is a floor, not a ceiling. `signals.json` contains an `unexplored`
+block listing sources that were **detected on this machine but deliberately not read** —
+plus a folder inventory. Use it to make a *specific* offer, never a generic menu.
+
+After delivering the portrait, tell them what else is available and what it would add.
+Name the actual apps found, with a one-line reason each:
+
+> "There's more here if you want it. I found Obsidian (24 MB of notes), WhatsApp,
+>  Signal, a Lightroom catalog, and 175 MB of your past Claude sessions. Your notes
+>  would sharpen the private-voice read; WhatsApp is often where family lives; the
+>  Claude sessions show what you actually ask for help with. Want any of those?"
+
+Also offer, when relevant:
+
+- **Other connectors** they have but you didn't sweep — Linear, GitHub, Notion, Figma,
+  Spotify, Strava, banking exports. Check what's actually available before offering.
+- **Deeper on one source** rather than wider: a single relationship over five years, one
+  project end-to-end, or their sent mail alone.
+- **A specific question** they bring. The best second pass is usually answering something
+  they've wondered about themselves, not more breadth.
+- **Their creative output** — the films, repos, designs, or writing they actually made.
+  Data about a person is not the same as the work they produced.
+
+Rules for going deeper:
+
+- **Read only what they ask for.** Detection is not permission. Never open a newly
+  discovered source without an explicit yes.
+- **Say what each source would and wouldn't tell you** before they decide.
+- **Re-render when you learn something material** — a portrait that ignores a major new
+  source is worse than one that never had it.
+- If a source is encrypted at rest (Granola, Signal, some note apps), say so plainly and
+  point at the connector or export path instead of attempting to break it.
+
 ---
 
 ## Rules

package/bin/cli.mjs

@@ -7,7 +7,8 @@ import { analyze } from '../src/analyze.mjs';
 import { SYSTEM, buildUserPrompt } from '../src/prompt.mjs';
 import { render } from '../src/render.mjs';
 import { scrubDeep, coarsenPlaces, harvestNames, labelFor } from '../src/scrub.mjs';
-import { installSkill, skillInstalled, checkFullDiskAccess, openPrivacyPane, hostApp, nodeOk, resolveInvocation } from '../src/setup.mjs';
+import { discover } from '../src/discover.mjs';
+import { installSkill, skillInstalled, checkFullDiskAccess, openPrivacyPane, hostApp, nodeOk, resolveInvocation, hasClaudeCLI, insideClaude, launchClaude } from '../src/setup.mjs';
 
 const args = process.argv.slice(2);
 const has = f => args.includes(f);
@@ -34,6 +35,7 @@ ${c.b}you-wrapped${c.x} — a portrait of your year, from the record your Mac al
   --out DIR       where to write                  (default ./you-wrapped-out)
   --no-share      skip the redacted share copy
   --yes           skip prompts
+  --no-launch     don't hand off to Claude Code when done
 
 ${c.d}Everything runs locally. Nothing is uploaded unless you pass --synthesize,
 and even then only aggregate signals and short quotes are sent.${c.x}
@@ -79,6 +81,11 @@ if (has('--install-skill')) {
 // ── render-only path
 if (has('--render')) {
   const p = JSON.parse(readFileSync(resolve(val('--render')), 'utf8'));
+  // pick up signals.json if it's sitting next to the portrait
+  if (!p.__signals) {
+    const sp = join(OUT, 'signals.json');
+    if (existsSync(sp)) { try { p.__signals = JSON.parse(readFileSync(sp, 'utf8')).sources; } catch {} }
+  }
   mkdirSync(OUT, { recursive: true });
   writeFileSync(join(OUT, 'wrapped.html'), render(p, { stats: {} }));
   log(`${c.g}✓${c.x} ${join(OUT, 'wrapped.html')}`);
@@ -144,7 +151,9 @@ photos.ok ? done(`photos — ${photos.count.toLocaleString()} (metadata only, no
 // ── 2. analyze
 step('analyzing');
 const profile = analyze({ messages, notes, browser, photos }, { days: DAYS });
-done('analyzed');
+// what else is on this machine that we did NOT read — the agent offers these
+profile.unexplored = discover();
+done(`analyzed — ${profile.unexplored.apps.length} more sources detected but unread`);
 
 // ── 3. evidence pack (stays local unless you synthesize)
 const m = profile.sources.messages || {};
@@ -213,11 +222,13 @@ if (has('--synthesize')) {
 // ── 5. render
 if (portrait) {
   const stats = { line: statLine, footer: `Assembled ${new Date().toISOString().slice(0, 10)} from ${statLine}.` };
-  writeFileSync(join(OUT, 'wrapped.html'), render(portrait, { stats }));
+  // the renderer draws its charts from the real signals, not from the model's prose
+  const withSignals = { ...portrait, __signals: profile.sources };
+  writeFileSync(join(OUT, 'wrapped.html'), render(withSignals, { stats }));
 
   if (!has('--no-share')) {
     const names = harvestNames(contacts.data, m.topPeople, m.topChats);
-    const shared = scrubDeep(portrait, names);
+    const shared = { ...scrubDeep(portrait, names), __signals: profile.sources };
     writeFileSync(join(OUT, 'wrapped.share.html'), render(shared, { shareMode: true, stats: { line: statLine, footer: stats.footer } }));
   }
   try { execFileSync('open', [join(OUT, 'wrapped.html')]); } catch {}
@@ -233,4 +244,20 @@ ${portrait ? `  ${c.d}wrapped.html${c.x}         your portrait
   ${c.d}wrapped.share.html${c.x}   redacted copy, safe to post` : ''}
 
 ${c.d}${statLine}${c.x}
-`);
+${profile.unexplored.apps.length ? `${c.d}  ${profile.unexplored.apps.length} other sources on this machine were detected but not read.\n  Ask Claude to go deeper and it will offer them.${c.x}\n` : ''}`);
+
+// ── 6. hand off to Claude Code
+// The skill was written to disk above, and a *new* claude process loads skills
+// at startup — so launching now is what makes this a single command.
+if (!portrait && !has('--no-launch')) {
+  if (insideClaude()) {
+    log(`${c.d}  Already inside Claude Code — tell me "do a you-wrapped on me" and I'll read ${OUT}.${c.x}\n`);
+  } else if (hasClaudeCLI()) {
+    log(`${c.o}  Handing off to Claude Code…${c.x}\n`);
+    try { launchClaude(OUT); }
+    catch { log(`${c.d}  Couldn't launch. Run ${c.b}claude${c.x}${c.d} and say "do a you-wrapped on me".${c.x}\n`); }
+  } else {
+    log(`  ${c.b}Next:${c.x} paste ${c.d}${join(OUT, 'prompt.md')}${c.x} into Claude.`);
+    log(`  ${c.d}Or install Claude Code (claude.ai/code) and rerun for the one-command flow.${c.x}\n`);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "you-wrapped",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Turn the record your Mac already keeps into a portrait of your year. Runs entirely on your machine.",
   "type": "module",
   "bin": { "you-wrapped": "./bin/cli.mjs" },

package/src/charts.mjs

@@ -0,0 +1,124 @@
+// Inline SVG charts drawn from the real extracted signals — not from the model's
+// prose. If the numbers aren't in signals.json, the chart doesn't render at all.
+
+const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const shortMonth = m => { const [y, mo] = m.split('-'); return `${['', 'JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'][+mo]} ’${y.slice(2)}`; };
+
+/** Two-series line chart. Used for the commitment/delegation scissor. */
+export function trendChart(series, keys, labels, colors) {
+  if (!series || series.length < 3) return '';
+  const W = 900, H = 300, PL = 46, PR = 20, PT = 18, PB = 34;
+  const all = series.flatMap(r => keys.map(k => r[k] ?? 0));
+  const lo = Math.max(0, Math.floor(Math.min(...all) - 1));
+  const hi = Math.ceil(Math.max(...all) + 1);
+  const x = i => PL + (i / (series.length - 1)) * (W - PL - PR);
+  const y = v => PT + (1 - (v - lo) / (hi - lo || 1)) * (H - PT - PB);
+  const path = k => series.map((r, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${y(r[k] ?? 0).toFixed(1)}`).join(' ');
+  const grid = [0, .25, .5, .75, 1].map(f => {
+    const v = lo + f * (hi - lo);
+    return `<line x1="${PL}" y1="${y(v)}" x2="${W - PR}" y2="${y(v)}" stroke="currentColor" opacity=".18"/>
+            <text x="${PL - 8}" y="${y(v) + 4}" text-anchor="end" class="ax">${v.toFixed(0)}</text>`;
+  }).join('');
+
+  return `<figure class="chart">
+    <svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(labels.join(' versus '))} over time">
+      ${grid}
+      ${keys.map((k, n) => `<path d="${path(k)}" fill="none" stroke="${colors[n]}"
+        stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" class="ln"/>`).join('')}
+      ${keys.map((k, n) => {
+        const last = series[series.length - 1];
+        return `<circle cx="${x(series.length - 1)}" cy="${y(last[k] ?? 0)}" r="4" fill="${colors[n]}"/>`;
+      }).join('')}
+      <text x="${PL}" y="${H - 8}" class="ax">${esc(shortMonth(series[0].month))}</text>
+      <text x="${W - PR}" y="${H - 8}" text-anchor="end" class="ax">${esc(shortMonth(series[series.length - 1].month))}</text>
+    </svg>
+    <figcaption>${keys.map((k, n) =>
+      `<span><i style="background:${colors[n]}"></i>${esc(labels[n])} — ${series[0][k]} → ${series[series.length - 1][k]}</span>`).join('')}
+      <span class="unit">per 1,000 messages sent</span></figcaption>
+  </figure>`;
+}
+
+/** 24-bar histogram of when you actually send messages. */
+export function hourChart(hours) {
+  if (!hours || hours.length !== 24) return '';
+  const max = Math.max(...hours) || 1;
+  const total = hours.reduce((a, b) => a + b, 0) || 1;
+  const bars = hours.map((v, h) => {
+    const pct = (v / max) * 100;
+    const night = h >= 22 || h <= 3;
+    return `<div class="hbar" style="--h:${pct.toFixed(1)}%" data-night="${night}">
+      <i></i><span>${h === 0 ? '12a' : h === 12 ? '12p' : h > 12 ? h - 12 : h}</span></div>`;
+  }).join('');
+  const late = hours.reduce((s, v, h) => s + ((h >= 22 || h <= 3) ? v : 0), 0);
+  return `<figure class="chart hours">
+    <div class="hgrid">${bars}</div>
+    <figcaption><span><i style="background:#FF4D3D"></i>10pm–3am — ${(late / total * 100).toFixed(1)}% of everything you send</span></figcaption>
+  </figure>`;
+}
+
+/** Where the body actually was, by photo GPS. */
+export function placeTable(clusters, labelFor) {
+  if (!clusters?.length) return '';
+  const rows = clusters.slice(0, 8).map(c => {
+    const days = c.days || [];
+    return `<tr><td>${esc(labelFor(c.lat, c.lon))}</td>
+      <td class="num">${c.photos.toLocaleString()}</td>
+      <td class="dim">${days.length} day${days.length === 1 ? '' : 's'}</td>
+      <td class="dim mono">${esc(days[0] || '')}${days.length > 1 ? ` → ${esc(days[days.length - 1])}` : ''}</td></tr>`;
+  }).join('');
+  return `<table class="tbl"><thead><tr><th>place</th><th class="num">frames</th><th>days</th><th>range</th></tr></thead>
+    <tbody>${rows}</tbody></table>`;
+}
+
+/** Things written down repeatedly and never closed. */
+export function recurringTable(items) {
+  if (!items?.length) return '';
+  const rows = items.slice(0, 10).map(r =>
+    `<tr><td>${esc(r.item)}</td><td class="num">${r.days.length}×</td>
+     <td class="dim mono">${esc(r.days[0])} → ${esc(r.days[r.days.length - 1])}</td></tr>`).join('');
+  return `<table class="tbl"><thead><tr><th>you wrote this down again and again</th><th class="num">times</th><th>span</th></tr></thead>
+    <tbody>${rows}</tbody></table>`;
+}
+
+/** Desktop mind vs phone mind. */
+export function deviceSplit(b) {
+  if (!b || (!b.desktopQueries && !b.mobileQueries)) return '';
+  const m = b.mobileShare ?? 0;
+  return `<figure class="chart">
+    <div class="split"><div class="sd" style="width:${100 - m}%"><b>${b.desktopQueries?.toLocaleString() ?? 0}</b><span>desktop</span></div>
+      <div class="sm" style="width:${m}%"><b>${b.mobileQueries?.toLocaleString() ?? 0}</b><span>phone</span></div></div>
+    <figcaption><span class="unit">${m}% of your searching happens on your phone</span></figcaption>
+  </figure>`;
+}
+
+export const CHART_CSS = `
+.chart{margin:26px 0 30px}
+.chart svg{display:block;width:100%;height:auto;overflow:visible}
+.chart .ln{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
+@keyframes draw{to{stroke-dashoffset:0}}
+.ax{font-family:var(--mono);font-size:11px;fill:currentColor;opacity:.5}
+.chart figcaption{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
+  opacity:.72;margin-top:11px;line-height:1.5}
+.chart figcaption i{display:inline-block;width:20px;height:2px;vertical-align:middle;margin-right:8px}
+.chart .unit{opacity:.55}
+.hgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:132px}
+.hbar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px}
+.hbar i{display:block;height:var(--h);background:currentColor;opacity:.55;border-radius:1px;min-height:2px}
+.hbar[data-night="true"] i{background:var(--ac);opacity:1}
+.hbar span{font-family:var(--mono);font-size:8px;opacity:.45;text-align:center}
+@media(max-width:640px){.hbar span{display:none}}
+.split{display:flex;height:66px;border-radius:3px;overflow:hidden;border:1px solid currentColor}
+.split>div{display:flex;flex-direction:column;justify-content:center;padding:0 16px;min-width:0}
+.split b{font-family:var(--narrow);font-size:22px;font-weight:700}
+.split span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
+.sd{background:transparent}.sm{background:var(--ac);color:var(--bg)}
+.tbl{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:13.5px}
+.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
+  opacity:.5;text-align:left;font-weight:400;padding:0 10px 9px 0;border-bottom:1px solid currentColor}
+.tbl td{padding:9px 10px 9px 0;border-bottom:1px solid currentColor;border-color:color-mix(in srgb,currentColor 16%,transparent)}
+.tbl .num{text-align:right;font-family:var(--mono);font-size:13px}
+.tbl th.num{text-align:right}
+.tbl .dim{opacity:.6;font-size:12.5px}
+.tbl .mono{font-family:var(--mono);font-size:12px}
+@media(prefers-reduced-motion:reduce){.chart .ln{stroke-dashoffset:0;animation:none}}
+`;

package/src/discover.mjs

@@ -0,0 +1,86 @@
+// Everyone's machine is different. This looks for sources the CLI does NOT read,
+// so the agent can offer a specific "want to go deeper?" instead of a generic menu.
+// Existence and size only — nothing here opens or parses a file.
+
+import { existsSync, statSync, readdirSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+const H = homedir();
+const p = (...x) => join(H, ...x);
+
+const CANDIDATES = [
+  // note & knowledge apps
+  { id: 'obsidian',  label: 'Obsidian vault',        path: p('Library/Application Support/obsidian'), why: 'long-form notes and daily journals' },
+  { id: 'notion',    label: 'Notion (local cache)',  path: p('Library/Application Support/Notion'),   why: 'docs and databases you own' },
+  { id: 'bear',      label: 'Bear notes',            path: p('Library/Group Containers/9K33E3U3T4.net.shinyfrog.bear'), why: 'personal notes' },
+  { id: 'craft',     label: 'Craft',                 path: p('Library/Containers/com.lukilabs.lukiapp'), why: 'documents' },
+  { id: 'devonthink',label: 'DEVONthink',            path: p('Library/Application Support/DEVONthink 3'), why: 'research archive' },
+
+  // meetings & comms
+  { id: 'granola',   label: 'Granola',               path: p('Library/Application Support/Granola'),  why: 'meeting notes — what you say out loud (encrypted locally; use the MCP connector)' },
+  { id: 'slack',     label: 'Slack (desktop)',       path: p('Library/Application Support/Slack'),    why: 'where many people ideate, distinct from where they decide' },
+  { id: 'discord',   label: 'Discord',               path: p('Library/Application Support/discord'),  why: 'community and side-project conversation' },
+  { id: 'whatsapp',  label: 'WhatsApp',              path: p('Library/Group Containers/group.net.whatsapp.WhatsApp.shared'), why: 'often where family and non-US contacts live' },
+  { id: 'signal',    label: 'Signal',                path: p('Library/Application Support/Signal'),   why: 'private conversation' },
+  { id: 'mail',      label: 'Apple Mail',            path: p('Library/Mail'),                          why: 'sent mail is a distinct professional voice' },
+
+  // creative & work output
+  { id: 'lightroom', label: 'Lightroom catalog',     path: p('Pictures/Lightroom Library.lrlibrary'), why: 'what you photograph, and how you edit it' },
+  { id: 'photos',    label: 'Photos library',        path: p('Pictures/Photos Library.photoslibrary'), why: 'faces, places, and who you spend time with' },
+  { id: 'resolve',   label: 'DaVinci Resolve',       path: p('Library/Application Support/Blackmagic Design/DaVinci Resolve'), why: 'projects and timelines you cut' },
+  { id: 'xcode',     label: 'Xcode',                 path: p('Library/Developer/Xcode'),              why: 'what you build' },
+  { id: 'music',     label: 'Music library',         path: p('Music/Music/Music Library.musiclibrary'), why: 'taste and listening rhythm' },
+  { id: 'books',     label: 'Apple Books',           path: p('Library/Containers/com.apple.iBooksX'), why: 'what you read and highlight' },
+
+  // agent & shell history
+  { id: 'claude',    label: 'Past Claude sessions',  path: p('.claude/projects'),                     why: 'what you actually ask for help with' },
+  { id: 'cursor',    label: 'Cursor history',        path: p('Library/Application Support/Cursor'),   why: 'how you work with AI in code' },
+  { id: 'zsh',       label: 'Shell history',         path: p('.zsh_history'),                          why: 'the commands you actually run' },
+];
+
+// Folders worth naming if they're large — where someone's real output lives.
+const FOLDERS = ['Desktop', 'Documents', 'Downloads', 'Movies', 'Music', 'Pictures', 'Developer', 'Projects', 'Code'];
+
+function dirBytes(dir, depth = 0, budget = { n: 0 }) {
+  // Deliberately shallow: this is a size hint, not an audit.
+  if (depth > 2 || budget.n > 4000) return 0;
+  let total = 0;
+  let entries;
+  try { entries = readdirSync(dir, { withFileTypes: true }); } catch { return 0; }
+  for (const e of entries) {
+    if (budget.n++ > 4000) break;
+    if (e.name.startsWith('.')) continue;
+    const full = join(dir, e.name);
+    try {
+      if (e.isDirectory()) total += dirBytes(full, depth + 1, budget);
+      else total += statSync(full).size;
+    } catch {}
+  }
+  return total;
+}
+
+export function discover() {
+  const found = [];
+  for (const c of CANDIDATES) {
+    if (!existsSync(c.path)) continue;
+    let size = 0;
+    try { size = statSync(c.path).isDirectory() ? dirBytes(c.path) : statSync(c.path).size; } catch {}
+    found.push({ id: c.id, label: c.label, why: c.why, approxBytes: size });
+  }
+
+  const folders = [];
+  for (const f of FOLDERS) {
+    const dir = p(f);
+    if (!existsSync(dir)) continue;
+    let count = 0;
+    try { count = readdirSync(dir).filter(x => !x.startsWith('.')).length; } catch {}
+    if (count > 0) folders.push({ name: f, entries: count });
+  }
+
+  return {
+    apps: found.sort((a, b) => b.approxBytes - a.approxBytes),
+    folders: folders.sort((a, b) => b.entries - a.entries),
+    note: 'Detected but NOT read. Offer these to the user; read only what they ask for.',
+  };
+}

package/src/prompt.mjs

@@ -10,9 +10,10 @@ METHOD — follow it in order:
    domains. Find theirs. State it in one sentence. Then show it appearing in at least four unrelated
    places. If you cannot find one trait that explains most of the data, say so rather than inventing one.
 
-2. FIND THE SCISSOR. Look for two trends that move in opposite directions and should not. (Common one:
-   commitments rising while requests-for-help fall.) A scissor is where a person's stated intent and
-   their actual behavior diverge over time. Quantify it.
+2. FIND THE SCISSOR. Look for two trends that move in opposite directions and should not — e.g. output
+   rising while recovery falls, breadth rising while depth falls, or promises rising while asks fall.
+   A scissor is where stated intent and actual behavior diverge over time. Find whichever pair the data
+   actually shows; don't force a template. Quantify it.
 
 3. FIND A DATED COLLISION. Somewhere in the data there is usually a specific day where two commitments
    overlapped and one broke. Cross-reference sources — location against written regret, calendar against
@@ -39,6 +40,8 @@ RULES:
   ownership — those are the only two levers that move a capacity-constrained person.
 - If the data is thin in some area, say so. An honest gap beats a confident fabrication.
 - Match their voice. If their messages are short and profane, don't write them a corporate memo.
+- After the portrait, offer to go deeper using the "unexplored" block in the signals —
+  name the specific sources found on THIS machine. Read nothing new without an explicit yes.
 
 OUTPUT: a JSON object matching the schema you are given. No prose outside the JSON.`;
 
@@ -55,10 +58,10 @@ Write the portrait. Return only JSON:
 {
   "headline_quote": "their own most revealing line, verbatim",
   "headline_quote_source": "where and when",
-  "one_trait": { "name": "...", "thesis": "one sentence", "domains": [{"label":"...","evidence":"..."}] },
-  "scissor": { "thesis": "...", "detail": "...", "numbers": [{"label":"...","from":"...","to":"..."}] },
+  "one_trait": { "name": "...", "thesis": "one sentence", "domains": [{"label":"...","evidence":"..."}], "evidence": [{"quote":"their exact words","source":"iMessage|Notes|search|meeting","date":"YYYY-MM-DD"}] },
+  "scissor": { "thesis": "...", "detail": "...", "numbers": [{"label":"...","from":"...","to":"..."}], "evidence": [{"quote":"...","source":"...","date":"..."}] },
   "collision": { "date": "...", "thesis": "...", "detail": "...", "verification": "which two sources agree" },
-  "insight_vs_capacity": { "thesis": "...", "predicted": "...", "happened": "...", "implication": "..." },
+  "insight_vs_capacity": { "thesis": "...", "predicted": "...", "happened": "...", "implication": "...", "evidence": [{"quote":"...","source":"...","date":"..."}] },
   "unseen_wins": [{"label":"...","detail":"..."}],
   "distortion": { "thesis": "...", "evidence": "..." },
   "human_thing": { "thesis": "...", "private": ["..."], "public": ["..."], "note": "why these are next to each other" },

package/src/render.mjs

@@ -1,125 +1,462 @@
-// Renders the portrait JSON to a standalone HTML file. No external assets beyond
-// two webfonts, which degrade to system faces offline.
+// Story-card renderer. Full-bleed vertical cards, tap/swipe/arrow to advance —
+// the format people already know from year-in-review recaps.
+// Visual identity is deliberately its own: flat risograph color fields and heavy
+// condensed type, not gradient blobs.
+
+import { trendChart, hourChart, placeTable, recurringTable, deviceSplit, CHART_CSS } from './charts.mjs';
+import { labelFor } from './scrub.mjs';
 
 const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const has = v => v != null && v !== '' && !(Array.isArray(v) && !v.length);
+
+/** Receipts. Every card that makes a claim shows where the claim came from. */
+const cite = (src) => src ? `<p class="src">${esc(src)}</p>` : '';
+const quotes = (list) => !list?.length ? '' : `<div class="ev">${list.slice(0, 3).map(e =>
+  `<blockquote class="evq">${esc(e.quote || e)}<cite>${esc(e.source || '')}${e.date ? ` · ${esc(e.date)}` : ''}</cite></blockquote>`).join('')}</div>`;
+
+// Each card gets a flat duotone. Ordered so adjacent cards always contrast hard.
+const THEMES = [
+  { bg: '#0E0E12', fg: '#F2EFE6', ac: '#E8FF43' },  // ink / acid
+  { bg: '#E8FF43', fg: '#0E0E12', ac: '#0E0E12' },  // acid
+  { bg: '#FF4D3D', fg: '#FFF5EF', ac: '#0E0E12' },  // vermilion
+  { bg: '#1B3BFF', fg: '#F2EFE6', ac: '#E8FF43' },  // ultramarine
+  { bg: '#F2EFE6', fg: '#0E0E12', ac: '#FF4D3D' },  // bone
+  { bg: '#00C48A', fg: '#04150F', ac: '#04150F' },  // green
+  { bg: '#FF8A3D', fg: '#1A0A00', ac: '#1A0A00' },  // amber
+  { bg: '#B14BFF', fg: '#F7F0FF', ac: '#E8FF43' },  // violet
+  { bg: '#0E0E12', fg: '#F2EFE6', ac: '#00C48A' },
+  { bg: '#FF2D78', fg: '#FFF0F6', ac: '#0E0E12' },  // magenta
+];
+
+/** Build the card list from the portrait, skipping anything the model left empty. */
+function buildCards(p, stats, shareMode, sig = {}) {
+  const M = sig.messages || {}, B = sig.browser || {}, PH = sig.photos || {}, NT = sig.notes || {};
+  const cards = [];
+  const add = (kind, html, opts = {}) => cards.push({ kind, html, ...opts });
+
+  add('cover', `
+    <div class="eyebrow">${esc(stats.year || new Date().getFullYear())}</div>
+    <h1 class="giant">YOU,<br>WRAPPED</h1>
+    <p class="sub">${esc(stats.line || '')}</p>
+    `);
+
+  if (has(p.headline_quote)) add('quote', `
+    <div class="eyebrow">you wrote this</div>
+    <blockquote>${esc(p.headline_quote)}</blockquote>
+    <p class="cite">${esc(p.headline_quote_source || '')}</p>`);
+
+  if (p.one_trait?.name) {
+    add('trait', `
+      <div class="eyebrow">the one thing</div>
+      <h2 class="big">${esc(p.one_trait.name)}</h2>
+      <p class="lede">${esc(p.one_trait.thesis)}</p>
+      ${quotes(p.one_trait.evidence)}`);
+    const d = p.one_trait.domains || [];
+    if (d.length) add('list', `
+      <div class="eyebrow">it shows up everywhere</div>
+      <ul class="ticks">${d.slice(0, 4).map(x =>
+        `<li><b>${esc(x.label)}</b><span>${esc(x.evidence)}</span></li>`).join('')}</ul>`);
+  }
+
+  if (p.scissor?.thesis) {
+    const n = p.scissor.numbers || [];
+    add('stat', `
+      <div class="eyebrow">the trend you can't see from inside</div>
+      <h2 class="mid">${esc(p.scissor.thesis)}</h2>
+      ${n.length ? `<div class="figures">${n.slice(0, 2).map(x => `
+        <div class="fig"><div class="fig-n">${esc(x.from)}<span class="arrow">→</span>${esc(x.to)}</div>
+        <div class="fig-l">${esc(x.label)}</div></div>`).join('')}</div>` : ''}
+      <p class="small">${esc(p.scissor.detail || '')}</p>
+      ${cite('measured across every message you sent')}`);
+
+    const chart = trendChart(M.series, ['commitment', 'delegation'],
+      ['promising ("I\'ll", "on it")', 'asking ("can you")'], ['currentColor', 'var(--ac)']);
+    if (chart) add('chart', `
+      <div class="eyebrow">ten months, month by month</div>
+      ${chart}
+      ${quotes(p.scissor?.evidence)}
+      ${cite(`from ${(M.sent || 0).toLocaleString()} messages you sent`)}`);
+  }
+
+  if (M.hours?.length === 24) add('chart', `
+    <div class="eyebrow">when you're actually working</div>
+    ${hourChart(M.hours)}
+    <p class="small">${esc(M.lateNightShare ?? 0)}% of what you send goes out between 10pm and 3am. ${esc(M.weekendShare ?? 0)}% lands on a weekend.</p>
+    ${cite('every timestamped message, bucketed by hour')}`);
+
+  if (p.collision?.date) {
+    add('collision', `
+      <div class="eyebrow">the day it collided</div>
+      <h2 class="date">${esc(p.collision.date)}</h2>
+      <p class="lede">${esc(p.collision.thesis)}</p>
+      <p class="small">${esc(p.collision.detail || '')}</p>
+      ${p.collision.verification ? `<p class="src">✓ ${esc(p.collision.verification)}</p>` : ''}`);
+    const places = placeTable(PH.clusters, labelFor);
+    if (places) add('data', `
+      <div class="eyebrow">where your body actually was</div>
+      ${places}
+      ${cite(`${(PH.geotagged || 0).toLocaleString()} geotagged frames · location never leaves this file`)}`);
+  }
+
+  if (p.insight_vs_capacity?.thesis) add('split', `
+    <div class="eyebrow">you already knew</div>
+    <div class="vs">
+      <div><span class="tag">you predicted</span><p>${esc(p.insight_vs_capacity.predicted)}</p></div>
+      <div><span class="tag alt">what happened</span><p>${esc(p.insight_vs_capacity.happened)}</p></div>
+    </div>
+    <p class="small">${esc(p.insight_vs_capacity.implication || '')}</p>
+    ${quotes(p.insight_vs_capacity.evidence)}`);
+
+  const dsplit = deviceSplit(B);
+  if (dsplit) add('chart', `
+    <div class="eyebrow">two different minds</div>
+    ${dsplit}
+    <p class="small">Desktop is where you produce. Your phone is where you think, look things up, and search at night.</p>
+    ${cite('unique search queries, split by device')}`);
+
+  const rec = recurringTable(NT.recurring);
+  if (rec) add('data', `
+    <div class="eyebrow">what you keep not finishing</div>
+    ${rec}
+    ${cite(`from ${(NT.count || 0).toLocaleString()} notes — items rewritten on 3+ separate days`)}`);
+
+  const wins = p.unseen_wins || [];
+  if (wins.length) add('list', `
+    <div class="eyebrow">what you've been discounting</div>
+    ${p.distortion?.evidence ? `<p class="small" style="margin-bottom:14px">${esc(p.distortion.evidence)}</p>` : ''}
+    <ul class="ticks">${wins.slice(0, 5).map(x =>
+      `<li><b>${esc(x.label)}</b><span>${esc(x.detail)}</span></li>`).join('')}</ul>`);
+
+  if (p.human_thing?.thesis) add('human', `
+    <div class="eyebrow">two things that rhyme</div>
+    <h2 class="mid">${esc(p.human_thing.thesis)}</h2>
+    <div class="vs">
+      <div><span class="tag">privately</span>${(p.human_thing.private || []).slice(0, 3).map(x => `<p>${esc(x)}</p>`).join('')}</div>
+      <div><span class="tag alt">publicly</span>${(p.human_thing.public || []).slice(0, 3).map(x => `<p>${esc(x)}</p>`).join('')}</div>
+    </div>`);
+
+  const acts = p.actions || [];
+  if (acts.length) add('list', `
+    <div class="eyebrow">two levers: reduce load, or hand it off</div>
+    <ul class="ticks num">${acts.slice(0, 4).map((a, i) =>
+      `<li><b>${String(i + 1).padStart(2, '0')} ${esc(a.title)}</b><span>${esc(a.body)}</span></li>`).join('')}</ul>`);
+
+  add('end', `
+    <h2 class="big">that's your year.</h2>
+    ${has(p.closing) ? `<p class="lede">${esc(p.closing)}</p>` : ''}
+    <div class="actions">
+      <button class="btn" data-read>read the full thing</button>
+      <button class="btn ghost" onclick="window.print()">save as PDF</button>
+    </div>
+    <p class="cite">npx you-wrapped</p>`);
+
+  return cards;
+}
+
+/**
+ * The long read. Cards are for swiping and sharing; this is where nothing gets
+ * dropped — every field the model returned, at full length.
+ */
+function longForm(p, stats, shareMode) {
+  const S = (eyebrow, title, body) => !body ? '' : `
+    <section class="rs"><div class="rw">
+      <div class="reyebrow">${esc(eyebrow)}</div>
+      ${title ? `<h2>${esc(title)}</h2>` : ''}
+      ${body}
+    </div></section>`;
+  const paras = a => (a || []).map(x => `<p>${esc(x)}</p>`).join('');
+  const grid = items => !items?.length ? '' : `<div class="rgrid">${items.map(x =>
+    `<div class="rcell"><div class="rk">${esc(x.label)}</div><p>${esc(x.detail || x.evidence)}</p></div>`).join('')}</div>`;
+
+  return `
+  <div id="read" hidden>
+    <header class="rhead"><div class="rw">
+      <button class="btn back" data-story>← back to cards</button>
+      ${shareMode ? '<span class="rbadge">share copy · identifiers removed</span>' : ''}
+      <h1>You, Wrapped</h1>
+      <p class="rsub">${esc(stats.line || '')}</p>
+      ${has(p.headline_quote) ? `<blockquote class="rquote">“${esc(p.headline_quote)}”
+        <cite>${esc(p.headline_quote_source || '')}</cite></blockquote>` : ''}
+    </div></header>
+
+    ${S('the one thing', p.one_trait?.name, p.one_trait ? `
+      <p class="rlede">${esc(p.one_trait.thesis)}</p>${grid(p.one_trait.domains)}` : '')}
+
+    ${S('the measurement', p.scissor?.thesis, p.scissor ? `
+      <p>${esc(p.scissor.detail || '')}</p>
+      ${(p.scissor.numbers || []).length ? `<div class="rstats">${p.scissor.numbers.map(x =>
+        `<div class="rstat"><div class="rn">${esc(x.from)} → ${esc(x.to)}</div>
+         <div class="rl">${esc(x.label)}</div></div>`).join('')}</div>` : ''}` : '')}
+
+    ${S('the collision', p.collision?.date ? `${p.collision.date} — ${p.collision.thesis}` : '', p.collision ? `
+      <p>${esc(p.collision.detail || '')}</p>
+      ${p.collision.verification ? `<div class="rpull"><p>${esc(p.collision.verification)}</p></div>` : ''}` : '')}
+
+    ${S('why awareness isn’t the fix', p.insight_vs_capacity?.thesis, p.insight_vs_capacity ? `
+      <div class="rcols">
+        <div><h3>What you predicted</h3><p>${esc(p.insight_vs_capacity.predicted)}</p></div>
+        <div><h3 class="ac">What happened</h3><p>${esc(p.insight_vs_capacity.happened)}</p></div>
+      </div>
+      <p class="rlede">${esc(p.insight_vs_capacity.implication || '')}</p>` : '')}
+
+    ${S('hard to see from inside', p.distortion?.thesis, (p.unseen_wins || []).length ? `
+      ${p.distortion?.evidence ? `<p>${esc(p.distortion.evidence)}</p>` : ''}
+      ${grid(p.unseen_wins)}` : '')}
+
+    ${S('two things that rhyme', p.human_thing?.thesis, p.human_thing ? `
+      <div class="rcols">
+        <div><h3>Written privately</h3>${paras(p.human_thing.private)}</div>
+        <div><h3 class="ac">Made publicly</h3>${paras(p.human_thing.public)}</div>
+      </div>
+      <p class="rlede">${esc(p.human_thing.note || '')}</p>` : '')}
+
+    ${S('what actually moves', 'Two levers. Neither is trying harder.', (p.actions || []).length ? `
+      <p>Reduce load, or transfer ownership.</p>
+      ${p.actions.map((a, i) => `<div class="ract">
+        <div class="rnum">${String(a.n ?? i + 1).padStart(2, '0')}</div>
+        <div><h4>${esc(a.title)}</h4><p>${esc(a.body)}</p></div></div>`).join('')}` : '')}
+
+    ${S('the limits of this', 'What this can’t see.', (p.limits || []).length ? `
+      ${grid(p.limits)}
+      ${has(p.closing) ? `<p class="rlede">${esc(p.closing)}</p>` : ''}` : '')}
+
+    <footer class="rfoot"><div class="rw">
+      <p>${esc(stats.footer || '')}</p>
+      <p>Generated locally by <b>you-wrapped</b>. Your data never left this machine.</p>
+      <button class="btn back" data-story>← back to cards</button>
+    </div></footer>
+  </div>`;
+}
 
 export function render(p, { shareMode = false, stats = {} } = {}) {
-  const S = k => p?.[k] ?? {};
-  const list = k => Array.isArray(p?.[k]) ? p[k] : [];
+  const cards = buildCards(p, stats, shareMode, p.__signals || {});
+  const n = cards.length;
 
-  const sec = (n, eyebrow, inner) => `
-  <section><div class="wrap">
-    <div class="slate rv"><b>${n}</b><span>${esc(eyebrow)}</span></div>
-    ${inner}
-  </div></section>`;
+  const slides = cards.map((c, i) => {
+    const t = THEMES[i % THEMES.length];
+    return `<section class="card ${c.kind}" data-i="${i}"
+      style="--bg:${t.bg};--fg:${t.fg};--ac:${t.ac}">
+      <div class="inner">${c.html}</div></section>`;
+  }).join('\n');
 
-  const cells = items => `<div class="grid two rv">${items.map(i =>
-    `<div class="cell"><div class="k">${esc(i.label)}</div><p>${esc(i.detail || i.evidence)}</p></div>`).join('')}</div>`;
+  const bars = cards.map((_, i) => `<i data-b="${i}"></i>`).join('');
 
   return `<!DOCTYPE html><html lang="en"><head>
-<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>${shareMode ? 'A year, assembled' : 'You — an assembly'}</title>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>${shareMode ? 'A year, wrapped' : 'You, Wrapped'}</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=Manrope:wght@300;400;700;800&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&family=Archivo+Narrow:wght@700&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
 <style>
-:root{--ink:#0B0D10;--panel:#13171C;--line:#242B34;--bone:#E9E5DD;--dim:#868E99;--dimmer:#5A626C;--flare:#FF6B2C;--scope:#5CC8D7;
---display:"Manrope","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace}
-*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--display);font-weight:300;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
-.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
-section{padding:100px 0;border-top:1px solid var(--line)}section:first-of-type{border-top:none}
-.slate{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);display:flex;gap:14px;margin-bottom:26px;flex-wrap:wrap}
-.slate b{color:var(--flare);font-weight:400}
-h2{font-weight:800;font-size:clamp(27px,3.5vw,42px);line-height:1.1;letter-spacing:-.026em;margin:0 0 22px;max-width:22ch}
-p{margin:0 0 21px;max-width:64ch;color:#CFCBC3}p.lead{font-size:20.5px;color:var(--bone)}
-strong{font-weight:700;color:var(--bone)}em{font-style:normal;color:var(--flare)}
-.hero{padding:120px 0 92px}
-.quote{font-weight:300;font-size:clamp(29px,5vw,58px);line-height:1.14;letter-spacing:-.03em;margin:0 0 22px;max-width:19ch}
-.attrib{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
-.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}.rv.in{opacity:1;transform:none}
-.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:32px 0 10px}
-@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}}
-.cell{background:var(--panel);padding:26px 24px}.cell p{margin:0;font-size:15.5px;color:#BFBBB4}
-.cell .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:12px}
-.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:32px 0;grid-template-columns:repeat(2,1fr)}
-@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
-.stat{background:var(--panel);padding:24px 20px}
-.stat .n{font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1}
-.stat .l{font-family:var(--mono);font-size:10.8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin-top:10px;line-height:1.5}
-.two-col{display:grid;gap:34px}@media(min-width:860px){.two-col{grid-template-columns:1fr 1fr;gap:52px}}
-.two-col h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:400}
-.act{border-top:1px solid var(--line);padding:24px 0;display:grid;gap:16px}@media(min-width:800px){.act{grid-template-columns:56px 1fr}}
-.act .num{font-family:var(--mono);font-size:12px;color:var(--flare)}.act p{margin:0;font-size:16px}
-.act h4{margin:0 0 8px;font-size:17px;font-weight:700}
-.pull{border-left:2px solid var(--flare);padding:4px 0 4px 24px;margin:30px 0;max-width:60ch}
-.pull p{font-size:19px;line-height:1.5;color:var(--bone);margin:0}
-footer{padding:70px 0 90px;border-top:1px solid var(--line)}
-footer p{font-family:var(--mono);font-size:12.5px;color:var(--dimmer);line-height:1.9;max-width:78ch}
-.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
-border:1px solid var(--line);border-radius:2px;padding:5px 10px;color:var(--dim);margin-bottom:24px}
-@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
-:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
-</style></head><body>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{--pad:clamp(20px,5.5cqw,40px);
+--sans:"Archivo","Helvetica Neue",Arial,sans-serif;
+--narrow:"Archivo Narrow","Archivo",sans-serif;
+--mono:"Geist Mono",ui-monospace,Menlo,monospace}
+html,body{height:100%;overflow:hidden;background:#08080A}
+body{font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
+
+/* phone-shaped on desktop, full-bleed on mobile */
+#stage{position:fixed;inset:0;display:grid;place-items:center}
+#deck{position:relative;width:100%;height:100%;overflow:hidden;background:#000;
+  container-type:inline-size;container-name:deck}
+@media(min-width:760px){
+  #deck{width:min(430px,32vw);height:min(920px,92vh);border-radius:28px;
+        box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
+}
+
+.card{position:absolute;inset:0;background:var(--bg);color:var(--fg);
+  display:flex;align-items:center;padding:calc(var(--pad) + 34px) var(--pad) calc(var(--pad) + 26px);
+  opacity:0;pointer-events:none;transform:scale(1.03);
+  transition:opacity .42s ease,transform .52s cubic-bezier(.2,.75,.3,1)}
+.card.on{opacity:1;pointer-events:auto;transform:none}
+/* paper grain — keeps flat color from looking like a CSS default */
+.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
+.inner{position:relative;z-index:1;width:100%;max-height:100%;overflow-y:auto;scrollbar-width:none}
+.inner::-webkit-scrollbar{display:none}
+
+.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
+  opacity:.62;margin-bottom:20px}
+.giant{overflow-wrap:anywhere;font-family:var(--narrow);font-weight:700;font-size:clamp(40px,15.5cqw,92px);
+  line-height:.86;letter-spacing:-.02em;text-transform:uppercase}
+.big{overflow-wrap:anywhere;font-weight:900;font-size:clamp(28px,9cqw,50px);line-height:1.02;letter-spacing:-.035em}
+.mid{font-weight:800;font-size:clamp(22px,7cqw,36px);line-height:1.08;letter-spacing:-.028em}
+.date{overflow-wrap:anywhere;font-family:var(--narrow);font-weight:700;font-size:clamp(34px,13cqw,68px);line-height:.92;
+  text-transform:uppercase;letter-spacing:-.01em;color:var(--ac)}
+blockquote{font-weight:600;font-size:clamp(21px,6.6cqw,34px);line-height:1.16;letter-spacing:-.026em}
+blockquote::before{content:"“"}blockquote::after{content:"”"}
+.lede{font-size:clamp(15px,4.2cqw,18px);line-height:1.5;margin-top:20px;opacity:.92;max-width:34ch}
+.sub{font-family:var(--mono);font-size:12.5px;line-height:1.7;margin-top:26px;opacity:.72;max-width:32ch}
+.small{font-size:14.5px;line-height:1.55;margin-top:16px;opacity:.72;max-width:38ch}
+.cite{font-family:var(--mono);font-size:11.5px;margin-top:18px;opacity:.6}
+.hint{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 4px);font-family:var(--mono);font-size:11px;
+  letter-spacing:.16em;text-transform:uppercase;opacity:.5;animation:pulse 2.4s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:.28}50%{opacity:.72}}
+
+.figures{display:grid;gap:26px;margin:8px 0 4px}
+.fig-n{font-family:var(--narrow);font-weight:700;font-size:clamp(32px,11.5cqw,58px);
+  line-height:1;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.arrow{color:var(--ac);font-size:.7em}
+.fig-l{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;opacity:.72;margin-top:8px;
+  text-transform:uppercase;max-width:28ch;line-height:1.5}
 
-<section class="hero"><div class="wrap">
-  ${shareMode ? '<div class="badge rv">Share copy · names and identifiers removed</div>' : ''}
-  <div class="slate rv"><span>Assembly</span><span>·</span><span>${esc(stats.line || '')}</span></div>
-  <p class="quote rv">“${esc(S('headline_quote') || p.headline_quote || '')}”</p>
-  <p class="attrib rv">${esc(p.headline_quote_source || '')}</p>
-</div></section>
-
-${p.one_trait ? sec('01', 'the forest', `
-  <h2 class="rv">${esc(p.one_trait.name)}</h2>
-  <p class="lead rv">${esc(p.one_trait.thesis)}</p>
-  ${cells((p.one_trait.domains || []).map(d => ({ label: d.label, detail: d.evidence })))}`) : ''}
-
-${p.scissor ? sec('02', 'the measurement', `
-  <h2 class="rv">${esc(p.scissor.thesis)}</h2>
-  <p class="rv">${esc(p.scissor.detail)}</p>
-  <div class="stats rv">${(p.scissor.numbers || []).map(n =>
-    `<div class="stat"><div class="n">${esc(n.from)} → ${esc(n.to)}</div><div class="l">${esc(n.label)}</div></div>`).join('')}</div>`) : ''}
-
-${p.collision ? sec('03', 'the collision', `
-  <h2 class="rv">${esc(p.collision.date)} — ${esc(p.collision.thesis)}</h2>
-  <p class="rv">${esc(p.collision.detail)}</p>
-  <div class="pull rv"><p>${esc(p.collision.verification)}</p></div>`) : ''}
-
-${p.insight_vs_capacity ? sec('04', 'why awareness isn’t the fix', `
-  <h2 class="rv">${esc(p.insight_vs_capacity.thesis)}</h2>
-  <div class="two-col">
-    <div class="rv"><h3 style="color:var(--dim)">What you predicted</h3><p>${esc(p.insight_vs_capacity.predicted)}</p></div>
-    <div class="rv"><h3 style="color:var(--flare)">What happened</h3><p>${esc(p.insight_vs_capacity.happened)}</p></div>
-  </div>
-  <p class="rv" style="margin-top:36px">${esc(p.insight_vs_capacity.implication)}</p>`) : ''}
-
-${list('unseen_wins').length ? sec('05', 'hard to see from inside', `
-  <h2 class="rv">${esc(p.distortion?.thesis || 'What the same year looks like from outside.')}</h2>
-  ${p.distortion?.evidence ? `<p class="rv">${esc(p.distortion.evidence)}</p>` : ''}
-  ${cells(list('unseen_wins'))}`) : ''}
-
-${p.human_thing ? sec('06', 'the thing you may not have noticed', `
-  <h2 class="rv">${esc(p.human_thing.thesis)}</h2>
-  <div class="two-col">
-    <div class="rv"><h3 style="color:var(--dim)">Written privately</h3>${(p.human_thing.private || []).map(x => `<p>${esc(x)}</p>`).join('')}</div>
-    <div class="rv"><h3 style="color:var(--flare)">Made publicly</h3>${(p.human_thing.public || []).map(x => `<p>${esc(x)}</p>`).join('')}</div>
-  </div>
-  <p class="rv" style="margin-top:36px">${esc(p.human_thing.note)}</p>`) : ''}
-
-${list('actions').length ? sec('07', 'what actually moves', `
-  <h2 class="rv">Two levers. Neither is trying harder.</h2>
-  <p class="rv">Reduce load, or transfer ownership.</p>
-  <div class="rv">${list('actions').map(a =>
-    `<div class="act"><div class="num">${String(a.n).padStart(2, '0')}</div><div><h4>${esc(a.title)}</h4><p>${esc(a.body)}</p></div></div>`).join('')}</div>`) : ''}
-
-${list('limits').length ? sec('08', 'the limits of this', `
-  <h2 class="rv">What this can’t see.</h2>
-  ${cells(list('limits'))}
-  ${p.closing ? `<p class="rv" style="margin-top:32px">${esc(p.closing)}</p>` : ''}`) : ''}
-
-<footer><div class="wrap"><p>${esc(stats.footer || '')}</p>
-<p>Generated locally by <strong>you-wrapped</strong>. Your data never left this machine.</p></div></footer>
+.ticks{list-style:none;display:grid;gap:18px;margin-top:4px}
+.ticks li{border-top:1.5px solid currentColor;padding-top:12px;opacity:.95}
+.ticks b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.012em;margin-bottom:5px}
+.ticks span{display:block;font-size:14px;line-height:1.45;opacity:.78}
+.ticks.num b{font-family:var(--mono);font-weight:400;font-size:14px}
+
+.vs{display:grid;gap:20px;margin-top:20px}
+.vs>div{border-left:3px solid var(--ac);padding-left:14px}
+.vs p{font-size:15px;line-height:1.45;margin-top:6px;opacity:.9}
+.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
+.tag.alt{color:var(--ac);opacity:1}
+
+.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
+.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
+  background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:13px 20px;
+  cursor:pointer;text-decoration:none;display:inline-block}
+.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px currentColor}
+
+/* story progress bars */
+#bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:9}
+#bars i{flex:1;height:2.5px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
+#bars i.done{background:rgba(255,255,255,.9)}
+#bars i.now{background:rgba(255,255,255,.9)}
+#deck.dark #bars i{background:rgba(0,0,0,.22)}
+#deck.dark #bars i.done,#deck.dark #bars i.now{background:rgba(0,0,0,.82)}
+
+.tapzone{position:absolute;top:0;bottom:0;width:34%;z-index:8;cursor:pointer}
+.tapzone.l{left:0}.tapzone.r{right:0;width:66%}
+#badge{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:9;
+  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
+  color:rgba(255,255,255,.4)}
+@media(max-width:759px){#badge{display:none}}
+
+/* ── evidence on cards ── */
+.src{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
+  opacity:.5;margin-top:14px;line-height:1.55}
+.ev{display:grid;gap:12px;margin-top:18px}
+.evq{border-left:2.5px solid var(--ac);padding-left:13px;font-size:14.5px;line-height:1.42;
+  font-weight:500;opacity:.95}
+.evq::before{content:"“"}.evq::after{content:"”"}
+.evq cite{display:block;font-family:var(--mono);font-size:10px;font-style:normal;font-weight:400;
+  letter-spacing:.06em;opacity:.55;margin-top:7px}
+.card.chart-card .inner,.card.data .inner{padding-top:4px}
+${CHART_CSS}
+
+/* ── long-read mode ── */
+body.reading{overflow:auto;background:#0E0E12}
+body.reading #stage,body.reading #badge{display:none}
+#read{color:#E9E5DD;font-weight:300;font-size:17px;line-height:1.62;padding-bottom:60px}
+.rw{max-width:820px;margin:0 auto;padding:0 26px}
+.rhead{padding:44px 0 52px}
+.rhead h1{font-family:var(--narrow);font-weight:700;font-size:clamp(44px,9vw,76px);
+  line-height:.95;text-transform:uppercase;margin:26px 0 12px}
+.rsub{font-family:var(--mono);font-size:12.5px;opacity:.6}
+.rquote{font-size:clamp(21px,4.4vw,29px);line-height:1.24;font-weight:600;
+  letter-spacing:-.02em;margin-top:32px;border-left:3px solid #E8FF43;padding-left:20px}
+.rquote cite{display:block;font-family:var(--mono);font-size:11.5px;font-weight:400;
+  font-style:normal;opacity:.55;margin-top:12px;letter-spacing:.04em}
+.rs{padding:52px 0;border-top:1px solid #242B34}
+.reyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
+  color:#E8FF43;opacity:.8;margin-bottom:16px}
+#read h2{font-weight:900;font-size:clamp(25px,4.6vw,38px);line-height:1.08;
+  letter-spacing:-.03em;margin-bottom:18px;max-width:24ch}
+#read h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
+  font-weight:400;opacity:.6;margin-bottom:10px}
+#read h3.ac{color:#E8FF43;opacity:1}
+#read h4{font-size:17px;font-weight:800;margin-bottom:6px}
+#read p{margin-bottom:16px;max-width:66ch;color:#CFCBC3}
+.rlede{font-size:19.5px;color:#E9E5DD}
+.rgrid{display:grid;gap:1px;background:#242B34;border:1px solid #242B34;border-radius:3px;
+  overflow:hidden;margin-top:26px}
+@media(min-width:700px){.rgrid{grid-template-columns:1fr 1fr}}
+.rcell{background:#13171C;padding:24px 22px}
+.rcell p{margin:0;font-size:15px;color:#BFBBB4}
+.rk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
+  opacity:.5;margin-bottom:10px}
+.rstats{display:grid;gap:1px;background:#242B34;border:1px solid #242B34;border-radius:3px;
+  overflow:hidden;margin:26px 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
+.rstat{background:#13171C;padding:22px 20px}
+.rn{font-family:var(--narrow);font-weight:700;font-size:30px;letter-spacing:-.02em}
+.rl{font-family:var(--mono);font-size:10.8px;letter-spacing:.1em;text-transform:uppercase;
+  opacity:.5;margin-top:9px;line-height:1.5}
+.rcols{display:grid;gap:30px;margin:24px 0}
+@media(min-width:820px){.rcols{grid-template-columns:1fr 1fr;gap:48px}}
+.rpull{border-left:3px solid #E8FF43;padding-left:20px;margin:24px 0}
+.rpull p{font-size:19px;color:#E9E5DD;margin:0}
+.ract{display:grid;gap:14px;border-top:1px solid #242B34;padding:22px 0}
+@media(min-width:700px){.ract{grid-template-columns:52px 1fr}}
+.rnum{font-family:var(--mono);font-size:12px;color:#E8FF43}
+.ract p{margin:0;font-size:16px}
+.rfoot{padding:52px 0;border-top:1px solid #242B34}
+.rfoot p{font-family:var(--mono);font-size:12.5px;opacity:.45;line-height:1.9}
+.rbadge{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
+  border:1px solid #242B34;border-radius:2px;padding:5px 10px;opacity:.6;margin-left:10px}
+.btn.back{background:transparent;color:#E9E5DD;box-shadow:inset 0 0 0 1.5px #333A44;margin-bottom:8px}
+
+@media(prefers-reduced-motion:reduce){.card{transition:none}.hint{animation:none}}
+@media print{
+  html,body{height:auto;overflow:visible}#stage{position:static}
+  #deck{width:100%;height:auto;box-shadow:none;border-radius:0}
+  .card{position:static;opacity:1;transform:none;page-break-after:always;min-height:100vh}
+  #bars,.tapzone,#badge,.hint,.actions,.btn{display:none}
+  body.reading .card{display:none}
+}
+</style></head><body>
+<div id="stage"><div id="deck">
+  <div id="bars">${bars}</div>
+  ${slides}
+  <div class="hint" id="hint">tap or press → to begin</div>
+  <div class="tapzone l" data-nav="-1" aria-hidden="true"></div>
+  <div class="tapzone r" data-nav="1" aria-hidden="true"></div>
+</div></div>
+<div id="badge">← → or tap · ${n} cards · press R to read</div>
+${longForm(p, stats, shareMode)}
 <script>
-const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.14,rootMargin:'0px 0px -8% 0px'});
-document.querySelectorAll('.rv').forEach((el,i)=>{el.style.transitionDelay=Math.min(i,3)*70+'ms';io.observe(el)});
-addEventListener('load',()=>document.querySelectorAll('.hero .rv').forEach((el,i)=>setTimeout(()=>el.classList.add('in'),120+i*130)));
+const N=${n}, deck=document.getElementById('deck');
+const cards=[...document.querySelectorAll('.card')], bars=[...document.querySelectorAll('#bars i')];
+let i=0;
+// bar contrast has to follow the card, not the page
+const LIGHT=new Set(cards.map((c,k)=>{
+  const bg=getComputedStyle(c).getPropertyValue('--bg').trim();
+  const h=bg.replace('#','');
+  const v=parseInt(h.slice(0,2),16)*.299+parseInt(h.slice(2,4),16)*.587+parseInt(h.slice(4,6),16)*.114;
+  return v>140?k:-1;
+}).filter(k=>k>=0));
+function show(k){
+  const h=document.getElementById('hint'); if(h) h.style.display = k===0 ? '' : 'none';
+  i=Math.max(0,Math.min(N-1,k));
+  cards.forEach((c,x)=>c.classList.toggle('on',x===i));
+  bars.forEach((b,x)=>{b.classList.toggle('done',x<i);b.classList.toggle('now',x===i)});
+  deck.classList.toggle('dark',LIGHT.has(i));
+}
+document.querySelectorAll('[data-nav]').forEach(z=>
+  z.addEventListener('click',()=>show(i+ +z.dataset.nav)));
+// story ⇄ long read
+const readEl=document.getElementById('read');
+function setMode(reading){
+  document.body.classList.toggle('reading',reading);
+  readEl.hidden=!reading;
+  if(reading) window.scrollTo(0,0);
+}
+document.querySelectorAll('[data-read]').forEach(b=>b.addEventListener('click',()=>setMode(true)));
+document.querySelectorAll('[data-story]').forEach(b=>b.addEventListener('click',()=>setMode(false)));
+
+addEventListener('keydown',e=>{
+  const reading=document.body.classList.contains('reading');
+  if(e.key==='r'||e.key==='R'){setMode(!reading);return}
+  if(reading){ if(e.key==='Escape')setMode(false); return }
+  if(e.key==='ArrowRight'||e.key===' ')  {e.preventDefault();show(i+1)}
+  if(e.key==='ArrowLeft')                {e.preventDefault();show(i-1)}
+});
+let x0=null;
+deck.addEventListener('touchstart',e=>x0=e.touches[0].clientX,{passive:true});
+deck.addEventListener('touchend',e=>{
+  if(x0===null)return; const dx=e.changedTouches[0].clientX-x0;
+  if(Math.abs(dx)>44) show(i+(dx<0?1:-1)); x0=null;
+},{passive:true});
+show(0);
 </script></body></html>`;
 }

package/src/scrub.mjs

@@ -50,12 +50,22 @@ export function coarsenPlaces(clusters = []) {
 }
 
 const CITIES = [
-  ['San Francisco', 37.77, -122.42, .4], ['Los Angeles', 34.05, -118.30, .6],
-  ['New York', 40.74, -73.98, .4], ['Chicago', 41.88, -87.63, .6],
-  ['Seattle', 47.61, -122.33, .4], ['Austin', 30.27, -97.74, .4],
-  ['London', 51.51, -0.13, .4], ['Paris', 48.86, 2.35, .4],
-  ['Istanbul', 41.01, 28.98, .6], ['Miami', 25.77, -80.19, .4],
-  ['Tokyo', 35.68, 139.69, .5], ['Berlin', 52.52, 13.40, .4],
+  // Major metros, for coarsening coordinates to a city label in share mode.
+  ['New York', 40.71, -74.01, .5],      ['Los Angeles', 34.05, -118.24, .6],
+  ['Chicago', 41.88, -87.63, .5],       ['San Francisco', 37.77, -122.42, .4],
+  ['Seattle', 47.61, -122.33, .4],      ['Austin', 30.27, -97.74, .4],
+  ['Denver', 39.74, -104.99, .4],       ['Boston', 42.36, -71.06, .4],
+  ['Miami', 25.76, -80.19, .4],         ['Atlanta', 33.75, -84.39, .4],
+  ['Toronto', 43.65, -79.38, .4],       ['Mexico City', 19.43, -99.13, .5],
+  ['London', 51.51, -0.13, .5],         ['Paris', 48.86, 2.35, .4],
+  ['Berlin', 52.52, 13.40, .4],         ['Amsterdam', 52.37, 4.90, .3],
+  ['Madrid', 40.42, -3.70, .4],         ['Rome', 41.90, 12.50, .4],
+  ['Lisbon', 38.72, -9.14, .3],         ['Istanbul', 41.01, 28.98, .5],
+  ['Dubai', 25.20, 55.27, .4],          ['Mumbai', 19.08, 72.88, .5],
+  ['Bangalore', 12.97, 77.59, .4],      ['Singapore', 1.35, 103.82, .3],
+  ['Hong Kong', 22.32, 114.17, .3],     ['Tokyo', 35.68, 139.69, .6],
+  ['Seoul', 37.57, 126.98, .4],         ['Sydney', -33.87, 151.21, .4],
+  ['São Paulo', -23.55, -46.63, .5],    ['Lagos', 6.52, 3.38, .4],
 ];
 export function labelFor(lat, lon) {
   for (const [name, a, b, r] of CITIES) if (Math.abs(lat - a) <= r && Math.abs(lon - b) <= r) return name;

package/src/setup.mjs

@@ -77,6 +77,32 @@ export function hostApp() {
   return 'your terminal app';
 }
 
+/** Is the Claude Code CLI on PATH? */
+export function hasClaudeCLI() {
+  try { execSync('command -v claude', { stdio: 'pipe' }); return true; } catch { return false; }
+}
+
+/** Are we already running *inside* a Claude Code session? Don't nest one. */
+export function insideClaude() {
+  return Boolean(process.env.CLAUDECODE || process.env.CLAUDE_CODE);
+}
+
+/**
+ * Hand off to a fresh Claude Code session with the work already queued.
+ * The new process starts after the skill is on disk, so it loads it.
+ */
+export function launchClaude(outDir) {
+  const prompt = [
+    'Do a you-wrapped on me.',
+    `The local extraction has already run — signals are in ${outDir}/signals.json`,
+    `and my own words are in ${outDir}/evidence.local.md (read it, never copy it anywhere).`,
+    'Follow the you-wrapped skill: sweep any connected services I have (Granola, Slack,',
+    'Gmail, Calendar, Drive) to cross-reference, then work the six-step method and',
+    `render the portrait to ${outDir}.`,
+  ].join(' ');
+  execFileSync('claude', [prompt], { stdio: 'inherit' });
+}
+
 export function nodeOk() {
   const [maj, min] = process.versions.node.split('.').map(Number);
   return maj > 22 || (maj === 22 && min >= 5);