cchubber 0.6.0 → 0.6.1

package/README.md

@@ -32,6 +32,9 @@ A single HTML report that tells you three things: what you spent, why you spent
 - CLAUDE.md section-by-section analysis with per-message cost impact
 - Cache break estimation even when diff files don't exist on your CC version
 
+**Your week against your plan:**
+Directly under the "Did you spend them well?" strip, the report shows how much of your last 7 days of Claude Code (and Codex) work went to what you said you'd do: one number, what it was measured against, where the rest went, and the day you drifted most. "What you said you'd do" is read from a `PLAN.md`, `plan.md` or `TODO.md` checklist in the project you work in (or a Mover OS Daily Note). With no written plan, or no work in the window, the section says what to add instead of showing a number. It runs on your machine and nothing is uploaded; detour names are your own words with paths, keys and links removed. No flag needed, it is part of `npx cchubber`.
+
 **Your usage on other models:**
 Right under the grade card, the report reprices your own tokens on every current frontier model's list price (Claude Fable 5.1, Opus 5.5, Sonnet 5.5, GPT-6 Astra and Sol, Gemini 4 Argon, DeepSeek V4 Pro, Kimi K3) and replays your real days as a six-second race. It also shows how many tokens Claude read for every token it wrote, what you paid (when your plan is detected), and, when you have a written plan, how much of your last week went to it (computed locally). Buttons download a 1200x675 card, copy the text, or open a pre-filled post on X. You click; the page never posts. No flag needed, it is part of `npx cchubber`. `--json` includes it as `reprice`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cchubber",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "What you spent. Why you spent it. Is that normal. — Claude Code usage diagnosis with beautiful HTML reports.",
   "type": "module",
   "bin": {

package/src/analyzers/drift-privacy.js

@@ -100,3 +100,146 @@ export function categorize(text) {
   for (const [name, re] of CATEGORIES) if (re.test(s)) return name;
   return 'something else';
 }
+
+// ---------------------------------------------------------------------------------------------------------------
+// Readable labels for the drift section. shortName() above keeps the raw start of a prompt; labelName() turns it into
+// something a person recognises, or says what the detour touched, or names its kind. scrub() runs first, always.
+// ---------------------------------------------------------------------------------------------------------------
+
+// Openers that only lead into the point. Multi-word ones first so "question is" goes as one.
+const OPENERS = [
+  'at the', 'on the', 'in the', 'question is', 'the question is', 'can you', 'could you', 'would you', 'will you', 'i want to', 'i want',
+  'i need to', 'i need', 'i would like to', 'make sure', 'lets', "let's", 'let us', 'ok so', 'okay so', 'so', 'also', 'ok', 'okay', 'and', 'but',
+  'i think that', 'i think', 'i feel like', 'i feel', 'i guess', 'i mean', 'i was thinking', 'i dont know', "i don't know", 'maybe', 'btw', 'yo', 'hey', 'please', 'pls', 'now', 'then', 'actually', 'basically', 'well', 'the', 'a', 'an', 'i',
+];
+// Words that carry no topic on their own, for counting how much a label really says
+const THIN = new Set(`a an the and or but nor so if of to in on at by for with from as is am are was were be been being it its it's this that these those
+  here there i me my we our you your he she they them his her their do does did done doing have has had not no yes yeah
+  can could would should will shall may might must just also too very really quite much many more most some any all etc
+  what when where which who whom whose why how than then thus about into onto over under up down out off again still even
+  thing things stuff bit lot lots like kind sort one ones`.split(/\s+/).filter(Boolean));
+// A label that ends on one of these was cut mid-thought
+const DANGLING = new Set(['or', 'and', 'but', 'the', 'a', 'an', 'to', 'of', 'in', 'on', 'at', 'for', 'with', 'was', 'is', 'are', 'that', 'this',
+  'so', 'if', 'as', 'by', 'from', 'etc', 'how', 'what', 'my', 'your', 'our', 'their', 'it', 'its']);
+
+const LABEL_MAX = 32;
+
+/** The prompt with everything that reads as markup or decoration removed: tags, [Image #1], pasted-content ids, bullets. */
+function tidy(text) {
+  return String(text || '')
+    .replace(/\[(?:Image|Pasted|Attached|File)[^\]]*\]/gi, ' ')
+    // <pastedcontent id=2b8c ...>, also when the closing > never came
+    .replace(/<\/?[a-z][\w:-]*(?:\s+[\w:-]+\s*=\s*[^\s>]+)*\s*>?/gi, ' ')
+    .replace(/<[^>\n]*>/g, ' ')
+    .replace(/[●•·▪◦○◉■□▶►→←↑↓✓✗✔✘★☆]/g, ' ')
+    .replace(/(?:^|\s)[-*>#|]+(?=\s|$)/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const plain = (w) => w.toLowerCase().replace(/[^a-z0-9']/g, '');
+const meaningful = (w) => { const p = plain(w); return p.length >= 2 && /[a-z]/.test(p) && !THIN.has(p) && !/^\d/.test(p); };
+
+// "1/5 skill gates" -> "skill gates": numbering, fractions and lone digits at the front say nothing
+const stripLeadNumbers = (s) => s.replace(/^(?:[\d#./:-]+\s+)+/, '');
+
+function stripOpeners(s) {
+  let out = s;
+  for (let i = 0; i < 6; i++) {
+    const low = out.toLowerCase();
+    const hit = OPENERS.find(o => low === o || low.startsWith(o + ' '));
+    if (!hit) break;
+    out = out.slice(hit.length).trim();
+  }
+  return out;
+}
+
+// Cut to the cap at a word boundary, never ending on a dangling word
+function capWords(words) {
+  let out = '';
+  for (const w of words) {
+    const next = out ? `${out} ${w}` : w;
+    if (next.length > LABEL_MAX) break;
+    out = next;
+  }
+  // A cut inside brackets leaves "skill gates (design and writing": drop the open bracket and what follows
+  out = out.replace(/\s*[(\[][^)\]]*$/, '');
+  const parts = out.split(' ');
+  while (parts.length > 1 && DANGLING.has(plain(parts[parts.length - 1]))) parts.pop();
+  return parts.join(' ');
+}
+
+/** The readable label a prompt earns on its own, or '' when it does not say enough to be one. */
+export function promptLabel(text) {
+  const cleaned = tidy(scrub(tidy(text)).replace(/\[(?:key|link|file|email|number)\]/g, ' '));
+  const body = stripLeadNumbers(stripOpeners(stripLeadNumbers(cleaned)))
+    .replace(/[‘’]/g, "'").replace(/["“”`*_@]/g, '').replace(/(?:\.{2,}|…)+\s*$/, '').replace(/\s+/g, ' ').trim();
+  // The first sentence that says something
+  const parts = body.split(/(?<=[.?!])\s+|\n+/).map(p => p.trim()).filter(Boolean);
+  let phrase = '';
+  for (const p of parts) {
+    phrase = phrase ? `${phrase} ${p}` : p;
+    if (phrase.split(' ').filter(meaningful).length >= 3) break;
+  }
+  const words = phrase.replace(/[.?!,;:]+$/, '').split(' ').filter(Boolean);
+  if (words.filter(meaningful).length < 3) return '';
+  // Looks like a fragment: it was cut off, or it ends on a joining word
+  if (DANGLING.has(plain(words[words.length - 1])) && words.length <= 7) return '';
+  const label = capWords(words.slice(0, 8)).replace(/[,;:\-]+$/, '').toLowerCase();
+  return label.split(' ').filter(meaningful).length >= 3 ? label : '';
+}
+
+const FOLDER_SKIP = new Set(['users', 'user', 'home', 'documents', 'desktop', 'downloads', 'library', 'private', 'tmp', 'var', 'opt', 'node_modules', 'dist', 'build', '.git', '.claude']);
+const EXT_NOUN = { md: 'notes', mdx: 'notes', txt: 'notes', html: 'pages', htm: 'pages', css: 'styles', scss: 'styles', js: 'code', mjs: 'code', ts: 'code', tsx: 'code', jsx: 'code', py: 'code', sh: 'scripts', json: 'data', yml: 'config', yaml: 'config', toml: 'config', png: 'images', jpg: 'images', jpeg: 'images', svg: 'images', pdf: 'documents' };
+
+/**
+ * What a run of work touched: the folder its files mostly sit in ("site/compare pages"), else the project folder it ran in.
+ * `files` are absolute paths, `cwd` the folder the session ran in. Returns '' when there is nothing safe to say.
+ */
+export function touchedLabel(files = [], cwd = '', home = '') {
+  const tally = new Map();
+  const exts = new Map();
+  const cwdClean = String(cwd || '').replace(/[\\/]+$/, '');
+  for (const f of files) {
+    let p = String(f);
+    if (cwdClean && p.startsWith(cwdClean + '/')) p = p.slice(cwdClean.length + 1);
+    else p = p.split(/[\\/]/).slice(-3).join('/');
+    const segs = p.split(/[\\/]/).filter(Boolean);
+    const file = segs.pop() || '';
+    const homeBase = String(home || '').split(/[\\/]/).filter(Boolean).pop();
+    const dirs = segs.filter(s => !FOLDER_SKIP.has(s.toLowerCase()) && !s.startsWith('.') && s !== homeBase).slice(0, 2);
+    const ext = (file.split('.').pop() || '').toLowerCase();
+    if (dirs.length) {
+      const k = dirs.join('/');
+      tally.set(k, (tally.get(k) || 0) + 1);
+      if (EXT_NOUN[ext]) exts.set(k + '|' + EXT_NOUN[ext], (exts.get(k + '|' + EXT_NOUN[ext]) || 0) + 1);
+    }
+  }
+  const pretty = (s) => s.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').toLowerCase();
+  const best = [...tally].sort((a, b) => b[1] - a[1])[0];
+  if (best) {
+    const noun = [...exts].filter(([k]) => k.startsWith(best[0] + '|')).sort((a, b) => b[1] - a[1])[0];
+    const dir = pretty(best[0]);
+    const word = noun ? noun[0].split('|')[1] : '';
+    return word && !dir.endsWith(word) ? `${dir} ${word}` : dir;
+  }
+  // No folder to name: the project the work ran in, unless that is the home folder or plumbing
+  const base = cwdClean.split(/[\\/]/).filter(Boolean).pop() || '';
+  const homeBase = String(home || '').split(/[\\/]/).filter(Boolean).pop();
+  if (base && base !== homeBase && !FOLDER_SKIP.has(base.toLowerCase())) return pretty(base);
+  return '';
+}
+
+/**
+ * The name shown for a detour. Its own words when they make a readable label; else what it touched; else its kind.
+ * Everything that reaches the page has been through scrub() and is at most ~32 characters.
+ * `touched`: { files, cwd, home } for the work the detour covered.
+ */
+export function labelName(text, touched = {}, category = categorize(text)) {
+  const own = promptLabel(text);
+  if (own) return own;
+  const t = touchedLabel(touched.files, touched.cwd, touched.home);
+  const safe = t ? scrub(t).replace(/\[(?:key|link|file|email|number)\]/g, ' ').replace(/\s+/g, ' ').trim() : '';
+  if (safe && meaningful(safe.split(' ')[0]) && safe.length <= LABEL_MAX + 12) return capWords(safe.split(' '));
+  return category;
+}

package/src/analyzers/drift-run.js

@@ -23,7 +23,7 @@ export function runDrift(claudeDir, { days = 7, until = Date.now(), codexDir = d
 
   return {
     ...drift,
-    days,
+    windowDays: days,   // the length of the window; drift.days is the day-by-day list and must not be overwritten
     inputs: {
       claude: sessions.filter(s => s.agent === 'claude').length,
       codex: sessions.filter(s => s.agent === 'codex').length,
@@ -32,3 +32,22 @@ export function runDrift(claudeDir, { days = 7, until = Date.now(), codexDir = d
     },
   };
 }
+
+/**
+ * Drift as the plain report needs it: never throws, and says which of four things happened so the page can be honest.
+ *   ok       a written plan was found and there was agent work: `drift` holds the analysis
+ *   no-work  nothing from Claude Code or Codex in the window
+ *   no-plan  work, but no written plan to measure it against (the first-ask fallback is not shown as a headline)
+ *   error    the pipeline failed on this machine
+ */
+export function driftForReport(claudeDir, opts = {}) {
+  const days = opts.days || 7;
+  try {
+    const drift = runDrift(claudeDir, { days });
+    if (!drift.available) return { state: 'no-work', days };
+    if (!drift.source?.planNames?.length) return { state: 'no-plan', days, drift };
+    return { state: 'ok', days, drift };
+  } catch {
+    return { state: 'error', days };
+  }
+}

package/src/analyzers/drift.js

@@ -1,4 +1,5 @@
-import { shortName, categorize } from './drift-privacy.js';
+import { shortName, categorize, labelName } from './drift-privacy.js';
+import { homedir } from 'os';
 
 /**
  * Drift: how much of your agent time went to what you said you'd do.
@@ -319,6 +320,11 @@ export function analyzeDrift(sessions, { since, until = Date.now(), planFor = ()
   return summarize({ turns, human, detours, since, until, idf, sources, planNames, scopes: [...scopes], planNotes });
 }
 
+// What a run of turns touched, for naming a detour whose own words do not make a readable label
+function touchedBy(turns) {
+  return { files: turns.flatMap(t => [...(t.topicFiles || t.files || [])]), cwd: turns[0]?.cwd || '', home: homedir() };
+}
+
 function summarize({ turns, human, detours, since, until, idf, sources, planNames, scopes, planNotes }) {
   const counted = turns.filter(t => t.time && t.time.ms > 0 && (t.label === 'on' || t.label === 'detour'));
   const onMs = counted.filter(t => t.label === 'on').reduce((a, t) => a + t.time.ms, 0);
@@ -372,16 +378,8 @@ function summarize({ turns, human, detours, since, until, idf, sources, planName
   }
   for (const e of episodes) e.best = e.turns.reduce((a, b) => (b.richness > a.richness ? b : a), e.turns[0]);
 
-  // The longest single episode is the day's deepest rabbit hole
+  // The longest single episode is the day's deepest rabbit hole (named below, from the detour row it belongs to)
   const longest = episodes.slice().sort((a, b) => b.ms - a.ms)[0] || null;
-  const streak = longest ? {
-    ms: longest.ms,
-    wallMs: longest.end - longest.start,
-    start: longest.start,
-    detours: longest.turns.filter(t => t.thread && t.thread.head === t).length,
-    name: shortName(longest.best.text),
-    category: categorize(longest.turns.map(t => t.text).join(' ')),
-  } : null;
 
   // Episodes on the same subject across the week are one named detour, counted each time it pulled you away
   const clusters = [];
@@ -397,13 +395,42 @@ function summarize({ turns, human, detours, since, until, idf, sources, planName
       clusters.push({ best: e.best, bag: own, ms: e.ms, episodes: [e] });
     }
   }
-  const named = clusters.map(c => ({
-    name: shortName(c.best.text),
-    category: categorize(c.episodes.map(e => e.best.text).join(' ')),
-    ms: c.ms,
-    times: c.episodes.length,
-    first: Math.min(...c.episodes.map(e => e.start)),
-  })).filter(d => d.name).sort((a, b) => b.ms - a.ms);
+  // Two detours that end up with the same label (several fall back to "code") are one row
+  const mergeSame = (list) => {
+    const by = new Map();
+    for (const d of list) {
+      const k = `${d.name}|${d.category}`;
+      const c = by.get(k);
+      if (c) { c.ms += d.ms; c.times += d.times; c.first = Math.min(c.first, d.first); } else by.set(k, { ...d });
+    }
+    return [...by.values()];
+  };
+  // One name and one category per detour, decided once here. The list and the rabbit-hole card both read them, so they cannot disagree.
+  const rowOf = (c) => {
+    const category = categorize(c.episodes.map(e => e.best.text).join(' '));
+    return {
+      name: labelName(c.best.text, touchedBy(c.episodes.flatMap(e => e.turns)), category),
+      category,
+      ms: c.ms,
+      times: c.episodes.length,
+      first: Math.min(...c.episodes.map(e => e.start)),
+    };
+  };
+  const named = mergeSame(clusters.map(rowOf).filter(d => d.name)).sort((a, b) => b.ms - a.ms);
+
+  // The rabbit hole is the longest episode, labelled as the detour it belongs to. An episode that joined no cluster (no
+  // readable words) falls back to labelling itself.
+  const home = longest ? clusters.find(c => c.episodes.includes(longest)) : null;
+  const homeRow = home ? rowOf(home) : null;
+  const ownCategory = longest ? categorize(longest.turns.map(t => t.text).join(' ')) : null;
+  const streak = longest ? {
+    ms: longest.ms,
+    wallMs: longest.end - longest.start,
+    start: longest.start,
+    detours: longest.turns.filter(t => t.thread && t.thread.head === t).length,
+    name: homeRow ? homeRow.name : labelName(longest.best.text, touchedBy(longest.turns), ownCategory),
+    category: homeRow ? homeRow.category : ownCategory,
+  } : null;
 
   const active = new Set(counted.map(t => t.session));
   const inSpan = human.filter(t => t.t >= since && t.t <= until);

package/src/cli/index.js

@@ -29,10 +29,8 @@ import { analyzeModelRouting } from '../analyzers/model-routing.js';
 import { analyzeValueTrend } from '../analyzers/value-tracker.js';
 import { renderHTML } from '../renderers/html-report.js';
 import { renderTerminal, vsOneLiner } from '../renderers/terminal-summary.js';
-import { renderS1 } from '../renderers/s1-report.js';
 import { readPlan, monthsBilled } from '../readers/plan.js';
-import { runDrift } from '../analyzers/drift-run.js';
-import { renderDrift } from '../renderers/drift-report.js';
+import { runDrift, driftForReport } from '../analyzers/drift-run.js';
 import { shouldSendTelemetry, sendTelemetry, beaconConfig } from '../telemetry.js';
 import { spentWellLine } from '../renderers/spent-well.js';
 import { saveRun, getDelta, getHistory } from '../history.js';
@@ -43,12 +41,9 @@ const flags = {
   json: args.includes('--json'),
   noTelemetry: args.includes('--no-telemetry'),
   noOpen: args.includes('--no-open'),
-  s1: args.includes('--s1'),
   drift: args.includes('--drift'),
   vs: args.includes('--vs'),
   redact: args.includes('--redact'),
-  showProject: args.includes('--show-project'),
-  name: (() => { const i = args.indexOf('--name'); return i !== -1 && args[i + 1] ? args[i + 1] : null; })(),
   plan: (() => { const i = args.indexOf('--plan'); return i !== -1 && args[i + 1] ? args[i + 1] : null; })(),
   output: (() => {
     const idx = args.indexOf('--output') !== -1 ? args.indexOf('--output') : args.indexOf('-o');
@@ -76,12 +71,8 @@ if (flags.help) {
     --output, -o <path> Output HTML report to custom path
     --no-open          Don't auto-open the report in browser
     --json             Output raw analysis as JSON (includes reprice: your usage on other models)
-    --s1               Your usage as an IPO prospectus (parody)
-    --name <name>      Company name on the S-1 (default: You)
     --plan <usd>       Monthly plan price, if it can't be detected
-    --show-project     Name your top project on the S-1
-    --drift            Your week vs what you said you'd do (a shareable card)
-    --redact           On --drift, replace detour names with categories
+    --redact           Show drift detours as categories instead of your own words
     -h, --help         Show this help
 
   Examples:
@@ -89,8 +80,12 @@ if (flags.help) {
     cchubber --days 7           Last 7 days only
     cchubber -o report.html     Custom output path
     cchubber --json             Machine-readable output
-    cchubber --drift            How much of your week went to the plan
-    cchubber --drift --redact   Same, with detour names hidden
+    cchubber --redact           Same report, drift detours as categories only
+
+  Nothing here needs a flag. The report that cchubber opens has a section for
+  how much of your last week went to what you said you'd do (read from a
+  PLAN.md, plan.md or TODO.md, computed locally), and one for
+  your usage on other models.
 
   Your usage on other models needs no flag. The report that cchubber opens has
   a section for it: your own tokens repriced on each frontier model's list
@@ -122,8 +117,9 @@ async function main() {
   // run that opens the report scrolled to its "Your usage on other models" section. Nothing needs the flag.
   if (flags.vs && flags.json) return vsJsonMode(claudeDir);
 
-  // Drift report: its own local pipeline (last week of sessions vs your stated plan). No cost reading, no network.
-  if (flags.drift) return driftMode(claudeDir);
+  // Hidden, for scripts: `--drift --json` prints only the drift analysis. Plain `--drift` is an alias of the normal run
+  // that opens the report scrolled to its drift section. Nothing needs the flag.
+  if (flags.drift && flags.json) return driftJsonMode(claudeDir);
 
   console.log(`
     /\\  _  /\\
@@ -259,42 +255,36 @@ async function main() {
     console.log('  ✓ Stats shared (opt out: --no-telemetry)');
   }
 
-  if (flags.s1) {
-    const plan = readPlan(flags.plan);
-    const s1Path = flags.output || join(process.cwd(), 'cchubber-s1.html');
-    writeFileSync(s1Path, renderS1(report, { plan, name: flags.name, showProject: flags.showProject }), 'utf-8');
-    console.log(`\n  ✓ Your S-1 saved to: ${s1Path}`);
-    if (!plan) console.log('  ○ Plan not detected. Add --plan 100 (or 20, 200) to show what you paid.');
-    if (!flags.noOpen) { openInBrowser(s1Path); console.log('  ✓ Opened in browser\n'); }
-    return;
-  }
-
   const outputPath = flags.output || join(process.cwd(), 'cchubber-report.html');
-  const vsCtx = vsData ? vsContext(claudeDir, vsData) : null;
-  const html = renderHTML(report, { vs: vsCtx, telemetry: beaconConfig(flags) });
+  // Drift is part of the plain report: the last week against what you wrote down, computed locally (about 2 seconds).
+  const drift = driftForReport(claudeDir, { days: flags.days === 30 ? 7 : flags.days });
+  console.log(driftLine(drift));
+  const vsCtx = vsData ? vsContext(vsData, drift) : null;
+  const html = renderHTML(report, { vs: vsCtx, drift: { ...drift, redact: flags.redact }, telemetry: beaconConfig(flags) });
   writeFileSync(outputPath, html, 'utf-8');
   console.log(`\n  ✓ Report saved to: ${outputPath}`);
 
   if (!flags.noOpen) {
-    openInBrowser(outputPath, flags.vs ? 'vs' : '');
+    openInBrowser(outputPath, flags.drift ? 'drift' : flags.vs ? 'vs' : '');
     console.log('  ✓ Opened in browser\n');
   }
 }
 
+// The terminal line for drift, honest about why there is no number when there is none.
+function driftLine(d) {
+  if (d.state === 'ok') return `  ✓ Drift: ${Math.round(d.drift.share * 100)}% of your last ${d.days} days went to what you said you'd do. It's in your report.`;
+  if (d.state === 'no-plan') return '  ○ Drift: no written plan found. Add a PLAN.md or TODO.md with a checklist to see it in your report.';
+  if (d.state === 'no-work') return `  ○ Drift: no Claude Code work in the last ${d.days} days, so nothing to measure.`;
+  return '  ○ Drift: could not be read this time. No number shown.';
+}
+
 // What the "other models" section needs beyond the repricing: the plan paid for (if detected), billing months over the
-// logged window, and the drift headline when a stated plan is found and computes locally (about 2 seconds).
-function vsContext(claudeDir, rp) {
+// logged window, and the drift headline when a written plan was found.
+function vsContext(rp, drift) {
   const plan = readPlan(flags.plan);
   const dates = rp.dailyCum.dates;
   const months = dates.length ? monthsBilled(dates[0], dates[dates.length - 1], plan?.since) : 1;
-  let driftPct = null;
-  try {
-    const t0 = Date.now();
-    const days = flags.days === 30 ? 7 : flags.days;
-    const drift = runDrift(claudeDir, { days });
-    if (drift.available && drift.source?.planNames?.length) driftPct = Math.round(drift.share * 100);
-    console.log(driftPct != null ? `  ✓ Drift: ${driftPct}% of your last ${days} days on what you said you'd do (${((Date.now() - t0) / 1000).toFixed(1)}s)` : '  ○ No stated plan found, so no drift line');
-  } catch { driftPct = null; }
+  const driftPct = drift.state === 'ok' ? Math.round(drift.drift.share * 100) : null;
   return { plan, months, driftPct };
 }
 
@@ -326,45 +316,15 @@ async function vsJsonMode(claudeDir) {
   process.stdout.write(JSON.stringify(rp, null, 2) + '\n');
 }
 
-async function driftMode(claudeDir) {
+async function driftJsonMode(claudeDir) {
   const days = flags.days === 30 ? 7 : flags.days; // 7-day week by default; --days overrides
-  // Progress goes to stderr so `--drift --json` emits clean JSON on stdout
-  const log = flags.json ? (m) => process.stderr.write(m + '\n') : (m) => console.log(m);
-
-  log(`
-    /\\  _  /\\
-   /  \\(_)/  \\   CC Hubber v${VERSION} — Drift Report
-   \\  / ~ \\  /   How much of your week went to what you said you'd do.
-    \\/  ·  \\/
-  `);
-  log(`  Reading the last ${days} days of local sessions...\n`);
-
+  process.stderr.write(`  Reading the last ${days} days of local sessions...\n`);
   const drift = runDrift(claudeDir, { days });
-
   if (!drift.available) {
     console.error('  ✗ No agent work found in the window. Use Claude Code (or Codex) this week, then try again.\n');
     process.exit(1);
   }
-
-  const pct = Math.round(drift.share * 100);
-  log(`  ✓ ${drift.totals.prompts} prompts across ${drift.totals.sessions} sessions (${drift.inputs.claude} Claude${drift.inputs.codex ? `, ${drift.inputs.codex} Codex` : ''})`);
-  log(`  ✓ What you said you'd do: ${drift.source.planNames.length ? drift.source.planNames.join(' + ') : 'your first ask of each session'}`);
-  if (!drift.inputs.codexPresent) log('  ○ No Codex sessions found (skipped)');
-  log(`\n  ${pct}% of your agent time went to what you said you'd do.`);
-  log(`  ${Math.round(drift.totals.onMs / 3600000)}h on plan · ${Math.round(drift.totals.detourMs / 3600000)}h on detours\n`);
-  for (const d of drift.detours.slice(0, 5)) {
-    const label = flags.redact ? d.category : (d.name || d.category);
-    log(`    · ${label}  ${Math.max(1, Math.round(d.ms / 60000))}m`);
-  }
-  log('');
-
-  if (flags.json) { process.stdout.write(JSON.stringify(drift, null, 2) + '\n'); return; }
-
-  const outPath = flags.output || join(process.cwd(), 'cchubber-drift.html');
-  writeFileSync(outPath, renderDrift(drift, { redact: flags.redact }), 'utf-8');
-  log(`  ✓ Card saved to: ${outPath}`);
-  log('  ○ It stayed on this machine. Nothing was uploaded.' + (flags.redact ? '' : ' Use --redact to hide detour names.'));
-  if (!flags.noOpen) { openInBrowser(outPath); log('  ✓ Opened in browser\n'); }
+  process.stdout.write(JSON.stringify(drift, null, 2) + '\n');
 }
 
 function openInBrowser(filePath, hash = '') {

package/src/renderers/drift-report.js

@@ -1,10 +1,3 @@
-import { readFileSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const PKG_VERSION = JSON.parse(readFileSync(join(__dirname, '..', '..', 'package.json'), 'utf-8')).version;
-
 function esc(s) {
   if (s === 0) return '0';
   if (!s) return '';
@@ -23,10 +16,10 @@ const hours = (ms) => {
 };
 const dateShort = (iso) => { const d = new Date(iso + 'T00:00:00'); return `${MONTH[d.getMonth()]} ${d.getDate()}`; };
 const weekday = (iso) => WEEKDAY[new Date(iso + 'T00:00:00').getDay()];
-// "Sep 22–29" when one month, "Sep 28 – Oct 4" across two
+// "Sep 22 to 29" when one month, "Sep 28 to Oct 4" across two
 function rangeLabel(a, b) {
   const da = new Date(a + 'T00:00:00'), db = new Date(b + 'T00:00:00');
-  return da.getMonth() === db.getMonth() ? `${MONTH[da.getMonth()]} ${da.getDate()}–${db.getDate()}` : `${dateShort(a)} – ${dateShort(b)}`;
+  return da.getMonth() === db.getMonth() ? `${MONTH[da.getMonth()]} ${da.getDate()} to ${db.getDate()}` : `${dateShort(a)} to ${dateShort(b)}`;
 }
 
 // A closing line with a bit of bite, in his register: lowercase, no wind-up, takes the reader's side against the
@@ -44,33 +37,132 @@ function kicker(share, drift) {
   return `${pct}%. the plan filed a missing person report.`;
 }
 
-/**
- * The drift card: phone-first, built to screenshot. Fully offline, no web fonts, no network.
- * `drift` is the analysis from analyzeDrift; `opts.redact` shows detour categories instead of the user's words.
- */
-export function renderDrift(drift, { redact = false } = {}) {
+// ---------------------------------------------------------------------------------------------------------------
+// The drift card as a component: one section inside the plain report, under the "Did you spend them well?" strip.
+// Every selector starts with #drift and nothing is fetched, so it cannot restyle the report around it. The card itself
+// (number, bar, detours, facts, closing line) is the same markup the standalone --drift page used to have.
+// ---------------------------------------------------------------------------------------------------------------
+const CSS = `
+#drift{
+  --card:#15161c; --card2:#191b22; --ink:#ecebf1; --dim:#9a99a8; --faint:#6a6a78;
+  --line:rgba(255,255,255,.07); --on:#7fe0b0; --off:#ffb27a; --accent:#c0c1ff;
+  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
+  width:100%; max-width:1152px; margin-left:auto; margin-right:auto; color:var(--ink);
+}
+#drift .dr-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 16px}
+#drift .dr-title{margin:0; font-size:20px; line-height:1.2; font-weight:700; color:var(--ink)}
+#drift .dr-range{font-family:var(--mono); font-size:11px; color:var(--faint)}
+#drift .dr-grid{display:grid; grid-template-columns:minmax(0,390px) minmax(0,1fr); gap:28px; align-items:start}
+#drift .dr-grid > *{min-width:0}
+#drift .dr-side{display:flex; flex-direction:column; gap:22px; padding-top:6px}
+#drift .dr-side h4{margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
+#drift .dr-side p{margin:0; font-size:16px; line-height:1.5; color:var(--dim)}
+#drift .dr-side p b{color:var(--ink); font-weight:700}
+#drift .dr-tools{display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; margin:0 0 16px}
+#drift .dr-btn{appearance:none; font:inherit; font-size:13px; font-weight:700; cursor:pointer; color:var(--ink); background:rgba(255,255,255,.05);
+  border:1px solid rgba(70,69,84,.45); border-radius:8px; padding:8px 14px; min-height:40px}
+#drift .dr-btn:hover{background:#292a2b}
+#drift .dr-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+#drift .dr-btn[aria-pressed="true"]{background:rgba(192,193,255,.14); border-color:rgba(192,193,255,.4)}
+#drift .dr-hint{font-size:12px; color:var(--faint); flex:1 1 220px}
+#drift:not(.dr-hidden) .dr-c{display:none}
+#drift.dr-hidden .dr-w{display:none}
+#drift .dr-days{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
+#drift .dr-day{display:grid; grid-template-columns:84px minmax(40px,1fr) 196px; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
+#drift .dr-day:last-child{border-bottom:0}
+#drift .dd{color:var(--ink); font-weight:600}
+#drift .db{height:8px; border-radius:6px; background:rgba(255,255,255,.05); display:flex; overflow:hidden}
+#drift .db i{display:block; height:100%}
+#drift .db .on{background:var(--on)} #drift .db .off{background:var(--off)}
+#drift .dh{font-family:var(--mono); font-size:12px; color:var(--dim); text-align:right; white-space:nowrap}
+#drift .dr-side .dr-small{font-size:13px; line-height:1.6; color:var(--faint)}
+#drift .dr-empty{background:var(--card); border:1px solid rgba(70,69,84,.15); border-radius:12px; padding:24px 28px; max-width:760px}
+#drift .dr-empty p{margin:0 0 12px; font-size:16px; line-height:1.55; color:var(--dim)}
+#drift .dr-empty p:last-child{margin-bottom:0}
+#drift .dr-empty p b{color:var(--ink)}
+#drift .dr-code{display:inline-block; font-family:var(--mono); font-size:13px; color:var(--accent); background:rgba(192,193,255,.08); border:1px solid rgba(192,193,255,.16); padding:3px 8px; border-radius:6px}
+
+#drift .card{
+  margin:0; background:
+    radial-gradient(120% 80% at 50% -10%, rgba(192,193,255,.10), transparent 60%),
+    linear-gradient(180deg,var(--card),var(--card2));
+  border:1px solid var(--line); border-radius:26px; padding:26px 22px 18px;
+  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.7); position:relative; overflow:hidden;
+}
+#drift .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
+#drift .brand{font-size:11px; font-weight:800; letter-spacing:.22em; color:var(--accent)}
+#drift .range{font-size:11px; color:var(--faint); text-align:right; letter-spacing:.02em}
+#drift .range,#drift .cmd,#drift .num,#drift .rtime,#drift .fv{font-family:var(--mono)}
+#drift .hero{padding:22px 0 4px; text-align:center}
+#drift .big{display:flex; align-items:flex-start; justify-content:center; line-height:.9}
+#drift .num{font-size:112px; font-weight:800; letter-spacing:-.04em;
+  background:linear-gradient(180deg,#fff,#c9c8e6); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums}
+#drift .pctsign{font-size:40px; font-weight:800; color:var(--accent); margin-top:14px; margin-left:2px}
+#drift .cap{margin:6px 0 0; font-size:16px; color:var(--dim); line-height:1.35}
+#drift .cap strong{color:var(--ink); font-weight:700}
+#drift .split{margin:20px 2px 6px}
+#drift .bar{height:12px; border-radius:8px; background:rgba(255,178,122,.22); overflow:hidden}
+#drift .fill{display:block; height:100%; border-radius:8px 0 0 8px; background:linear-gradient(90deg,#7fe0b0,#9be8c2); box-shadow:0 0 16px rgba(127,224,176,.35)}
+#drift .legend{display:flex; justify-content:space-between; margin-top:9px; font-size:12px; color:var(--dim)}
+#drift .legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:middle}
+#drift .sw.on{background:#7fe0b0} #drift .sw.off{background:#ffb27a}
+#drift .block{margin-top:22px}
+#drift .block h2{margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
+#drift .rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
+#drift .row{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line)}
+#drift .row:last-child{border-bottom:0}
+#drift .dot{width:6px; height:6px; border-radius:50%; background:var(--off); flex:none; box-shadow:0 0 8px rgba(255,178,122,.5)}
+#drift .rlabel{flex:1; min-width:0; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+#drift .rtimes{color:var(--faint); font-size:11px; margin-left:6px}
+#drift .rtime{font-size:13px; color:var(--dim); flex:none; font-variant-numeric:tabular-nums}
+#drift .facts{display:flex; gap:10px; margin-top:20px}
+#drift .fact{flex:1; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:14px; padding:12px 13px; min-width:0}
+#drift .fk{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
+#drift .fv{display:block; font-size:20px; font-weight:800; margin:3px 0 1px}
+#drift .fs{display:block; min-width:0; font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+#drift .kick{margin:22px 2px 0; font-size:15px; line-height:1.4; color:#e7d9c2}
+#drift .foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
+#drift .mover{font-size:11px; color:var(--faint); max-width:56%; line-height:1.3}
+#drift .cmd{font-size:12px; color:var(--accent); background:rgba(192,193,255,.08); border:1px solid rgba(192,193,255,.16); padding:5px 9px; border-radius:8px; white-space:nowrap}
+
+@media (max-width:900px){
+  #drift .dr-grid{grid-template-columns:minmax(0,1fr)}
+  #drift .card{width:100%; max-width:420px; margin:0 auto}
+  #drift .dr-side{padding-top:0}
+}
+@media (max-width:480px){
+  #drift .dr-day{grid-template-columns:84px minmax(40px,1fr); row-gap:4px}
+  #drift .dh{grid-column:1 / -1; text-align:left}
+}
+@media (max-width:420px){
+  #drift .num{font-size:96px}
+  #drift .dr-empty{padding:18px 16px}
+}
+`;
+
+function cardHtml(drift, { redact }) {
   const pct = Math.round((drift.share || 0) * 100);
   const { onMs, detourMs } = drift.totals;
   const range = rangeLabel(firstDay(drift), lastDay(drift));
 
-  // Names by default; with --redact, categories, merged so one kind of detour is one row
-  const detours = (redact ? mergeByCategory(drift.detours) : drift.detours)
-    .slice(0, 5)
-    .map(d => ({ label: redact ? d.category : (d.name || d.category), ms: d.ms, times: d.times }));
+  // Both views are embedded so the page can swap them without a reload: detours by name, and merged by category (one kind of
+  // detour is one row). With --redact the names are not written into the file at all, only the categories.
+  const byName = drift.detours.slice(0, 5).map(d => ({ label: d.name || d.category, ms: d.ms, times: d.times }));
+  const byKind = mergeByCategory(drift.detours).slice(0, 5).map(d => ({ label: d.category, ms: d.ms, times: d.times }));
   const worst = drift.worstDay && drift.worstDay.detourMs > 0 ? drift.worstDay : null;
   const streak = drift.streak && drift.streak.ms >= 20 * MIN ? drift.streak : null;
+  const agents = [drift.agents?.claude && 'Claude Code', drift.agents?.codex && 'Codex'].filter(Boolean).join(' + ') || 'Claude Code';
 
-  const agents = [drift.inputs?.claude && 'Claude Code', drift.inputs?.codex && 'Codex'].filter(Boolean).join(' + ') || 'Claude Code';
-  const sourceLine = sourceNote(drift);
-
-  const detourRows = detours.map((d, i) => `
+  const rows = (list, cls) => `<ul class="rows ${cls}">${list.map((d, i) => `
       <li class="row" style="--i:${i}">
         <span class="dot"></span>
         <span class="rlabel">${esc(d.label)}${d.times > 1 ? `<span class="rtimes">&times;${d.times}</span>` : ''}</span>
         <span class="rtime">${hours(d.ms)}</span>
-      </li>`).join('');
+      </li>`).join('')}</ul>`;
+  const detourRows = (redact ? '' : rows(byName, 'dr-w')) + rows(byKind, 'dr-c');
+  const streakName = (redact ? '' : `<span class="fs dr-w">${esc(streak?.name || streak?.category)}</span>`) + `<span class="fs dr-c">${esc(streak?.category)}</span>`;
 
-  const CARD = `
+  return `
   <article class="card" id="card" role="img" aria-label="Drift report: ${pct}% of agent time on plan">
     <header class="top">
       <span class="brand">DRIFT REPORT</span>
@@ -78,7 +170,7 @@ export function renderDrift(drift, { redact = false } = {}) {
     </header>
 
     <section class="hero">
-      <div class="big"><span class="num" id="num" data-to="${pct}">${pct}</span><span class="pctsign">%</span></div>
+      <div class="big"><span class="num" id="num">${pct}</span><span class="pctsign">%</span></div>
       <p class="cap">of your agent time went to<br><strong>what you said you&rsquo;d do</strong></p>
     </section>
 
@@ -90,142 +182,110 @@ export function renderDrift(drift, { redact = false } = {}) {
       </div>
     </div>
 
-    ${detours.length ? `
+    ${byKind.length ? `
     <section class="block">
       <h2>Where the rest went</h2>
-      <ul class="rows">${detourRows}</ul>
+      ${detourRows}
     </section>` : ''}
 
     <section class="facts">
       ${worst ? `<div class="fact"><span class="fk">Drifted most</span><span class="fv">${esc(weekday(worst.day))}</span><span class="fs">${Math.round(worst.share * 100)}% off plan</span></div>` : ''}
-      ${streak ? `<div class="fact"><span class="fk">Longest rabbit hole</span><span class="fv">${hours(streak.ms)}</span><span class="fs">${redact ? esc(streak.category) : esc(streak.name || streak.category)}</span></div>` : ''}
+      ${streak ? `<div class="fact"><span class="fk">Longest rabbit hole</span><span class="fv">${hours(streak.ms)}</span>${streakName}</div>` : ''}
     </section>
 
     <p class="kick">${esc(kicker(drift.share || 0, drift))}</p>
 
     <footer class="foot">
       <span class="mover">Mover OS catches the drift while it happens.</span>
-      <span class="cmd">npx cchubber --drift</span>
+      <span class="cmd">npx cchubber</span>
     </footer>
   </article>`;
+}
 
-  return `<!doctype html>
-<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Drift Report &middot; CC Hubber</title>
-<meta name="description" content="How much of your Claude Code week went to what you said you'd do. Runs locally, nothing leaves your machine.">
-<style>
-  :root{
-    --bg:#0e0f13; --card:#15161c; --card2:#191b22; --ink:#ecebf1; --dim:#9a99a8; --faint:#6a6a78;
-    --line:rgba(255,255,255,.07); --on:#7fe0b0; --off:#ffb27a; --accent:#c0c1ff;
-    --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.7);
-  }
-  *{box-sizing:border-box}
-  html,body{margin:0}
-  body{
-    background:var(--bg); color:var(--ink);
-    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
-    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
-    padding:0; min-height:100dvh;
-  }
-  .page{max-width:390px; margin:0 auto; padding:18px 0 26px}
-  .mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
-  .card{
-    margin:0 14px; background:
-      radial-gradient(120% 80% at 50% -10%, rgba(192,193,255,.10), transparent 60%),
-      linear-gradient(180deg,var(--card),var(--card2));
-    border:1px solid var(--line); border-radius:26px; padding:26px 22px 18px;
-    box-shadow:var(--shadow); position:relative; overflow:hidden;
-  }
-  .card::after{ /* faint grain, fixed layer, never animated */
-    content:""; position:absolute; inset:0; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
-    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  }
-  .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
-  .brand{font-size:11px; font-weight:800; letter-spacing:.22em; color:var(--accent)}
-  .range{font-size:11px; color:var(--faint); text-align:right; letter-spacing:.02em}
-  .range,.cmd,.num,.rtime,.fv{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
-
-  .hero{padding:22px 0 4px; text-align:center}
-  .big{display:flex; align-items:flex-start; justify-content:center; line-height:.9}
-  .num{font-size:112px; font-weight:800; letter-spacing:-.04em;
-    background:linear-gradient(180deg,#fff,#c9c8e6); -webkit-background-clip:text; background-clip:text; color:transparent;
-    font-variant-numeric:tabular-nums}
-  .pctsign{font-size:40px; font-weight:800; color:var(--accent); margin-top:14px; margin-left:2px}
-  .cap{margin:6px 0 0; font-size:16px; color:var(--dim); line-height:1.35}
-  .cap strong{color:var(--ink); font-weight:700}
-
-  .split{margin:20px 2px 6px}
-  .bar{height:12px; border-radius:8px; background:rgba(255,178,122,.22); overflow:hidden}
-  .fill{display:block; height:100%; border-radius:8px 0 0 8px;
-    background:linear-gradient(90deg,#7fe0b0,#9be8c2); box-shadow:0 0 16px rgba(127,224,176,.35);
-    transform-origin:left center}
-  .legend{display:flex; justify-content:space-between; margin-top:9px; font-size:12px; color:var(--dim)}
-  .legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:middle}
-  .sw.on{background:#7fe0b0} .sw.off{background:#ffb27a}
-
-  .block{margin-top:22px}
-  h2{margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
-  .rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
-  .row{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line)}
-  .row:last-child{border-bottom:0}
-  .dot{width:6px; height:6px; border-radius:50%; background:var(--off); flex:none; box-shadow:0 0 8px rgba(255,178,122,.5)}
-  .rlabel{flex:1; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-  .rtimes{color:var(--faint); font-size:11px; margin-left:6px}
-  .rtime{font-size:13px; color:var(--dim); flex:none; font-variant-numeric:tabular-nums}
-
-  .facts{display:flex; gap:10px; margin-top:20px}
-  .fact{flex:1; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:14px; padding:12px 13px; min-width:0}
-  .fk{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
-  .fv{display:block; font-size:20px; font-weight:800; margin:3px 0 1px}
-  .fs{display:block; font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-
-  .kick{margin:22px 2px 0; font-size:15px; line-height:1.4; color:#e7d9c2}
-
-  .foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
-  .mover{font-size:11px; color:var(--faint); max-width:56%; line-height:1.3}
-  .cmd{font-size:12px; color:var(--accent); background:rgba(192,193,255,.08); border:1px solid rgba(192,193,255,.16); padding:5px 9px; border-radius:8px; white-space:nowrap}
-
-  .note{margin:16px 16px 0; font-size:11px; line-height:1.5; color:var(--faint); text-align:center}
-  .note b{color:var(--dim); font-weight:600}
-
-  /* Motion carries the reveal: the number counts up, the bar fills, the detours slide in. All off under reduced-motion. */
-  @media (prefers-reduced-motion: no-preference){
-    .anim .fill{animation:grow .9s cubic-bezier(.22,1,.32,1) .15s both}
-    .anim .row{opacity:0; animation:slide .5s cubic-bezier(.22,1,.32,1) both; animation-delay:calc(.5s + var(--i)*.09s)}
-    .anim .hero .cap,.anim .kick,.anim .facts,.anim .foot{opacity:0; animation:rise .6s ease .25s both}
-    .anim .kick{animation-delay:.9s} .anim .facts{animation-delay:.7s} .anim .foot{animation-delay:1.1s}
-    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
-    @keyframes slide{from{opacity:0; transform:translateX(10px)}to{opacity:1; transform:none}}
-    @keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
+// What to add so it works next run, in plain words. Never a number.
+const EMPTY = {
+  'no-plan': (d) => `
+    <p><b>No written plan found, so there is nothing to measure your last ${d} days against.</b></p>
+    <p>Write what you mean to do as a checklist in a <span class="dr-code">PLAN.md</span>, <span class="dr-code">plan.md</span> or <span class="dr-code">TODO.md</span> in the project you work in, for example <span class="dr-code">- [ ] ship the login page</span>. Run cchubber again and your week will be checked against it.</p>
+    <p>If you use Mover OS, the Focus and Tasks in your Daily Note count too.</p>`,
+  'no-work': (d) => `
+    <p><b>No Claude Code or Codex work in the last ${d} days, so there is nothing to measure.</b></p>
+    <p>Use it this week, with a checklist in a <span class="dr-code">PLAN.md</span> or <span class="dr-code">TODO.md</span> in the project, and run cchubber again.</p>`,
+  'error': (d) => `
+    <p><b>Drift could not be read on this machine this time, so no number is shown.</b></p>
+    <p>Run cchubber again. Your last ${d} days are read from your own Claude Code folder and nothing is uploaded.</p>`,
+};
+
+// The days drift already measured, oldest first, with hours on plan and on detours. Days with no agent work are left out.
+function dayList(drift) {
+  const days = (drift.days || []).filter(d => d.onMs + d.detourMs > 0);
+  if (!days.length) return '';
+  const busiest = Math.max(...days.map(d => d.onMs + d.detourMs));
+  const items = days.map(d => `
+        <li class="dr-day"><span class="dd">${esc(weekday(d.day).slice(0, 3))} ${esc(dateShort(d.day))}</span>
+          <span class="db" aria-hidden="true"><i class="on" style="width:${(d.onMs / busiest * 100).toFixed(1)}%"></i><i class="off" style="width:${(d.detourMs / busiest * 100).toFixed(1)}%"></i></span>
+          <span class="dh">${hours(d.onMs)} on plan &middot; ${hours(d.detourMs)} off</span></li>`).join('');
+  return `<div>
+        <h4>Day by day</h4>
+        <ul class="dr-days">${items}</ul>
+      </div>`;
+}
+
+/**
+ * The drift section of the plain report. `state` comes from driftForReport: { state, days, drift }.
+ * `opts.redact` shows detour categories instead of the user's words (the old --drift --redact).
+ * Returns style + markup for one section (id="drift"), offline, nothing fetched.
+ */
+export function renderDriftSection(state, { redact = false } = {}) {
+  if (!state) return '';
+  const days = state.days || 7;
+  const ok = state.state === 'ok' && state.drift;
+  const range = ok ? rangeLabel(firstDay(state.drift), lastDay(state.drift)) : `last ${days} days`;
+
+  let body;
+  if (ok) {
+    const d = state.drift;
+    const t = d.totals;
+    // The split of the same sessions the total counts (sessions that had agent time), not of every transcript that was read
+    const split = [d.agents?.claude && `${d.agents.claude} Claude Code`, d.agents?.codex && `${d.agents.codex} Codex`].filter(Boolean).join(', ');
+    body = `
+  <div class="dr-grid">
+    ${cardHtml(d, { redact })}
+    <div class="dr-side">
+      <div>
+        <h4>What you said you&rsquo;d do</h4>
+        <p>${esc(sourceNote(d))}</p>
+      </div>
+      <div>
+        <h4>What was measured</h4>
+        <p><b>${esc(t.prompts)}</b> prompts across <b>${esc(t.sessions)}</b> session${t.sessions === 1 ? '' : 's'}${split ? ` (${esc(split)})` : ''} in the last ${days} days. Work that matched your plan counts as on plan; everything else is a detour.</p>
+      </div>
+      ${dayList(d)}
+      <p class="dr-small">Everything ran on this machine. Nothing was uploaded. The method is rough: it reads your words and the files touched, so it will miscall the odd one. ${redact ? 'Detour names are hidden in this file.' : 'Detour names are short labels from your own words (paths, keys and links removed) or from the folder the work touched.'}</p>
+    </div>
+  </div>`;
+  } else {
+    body = `<div class="dr-empty">${(EMPTY[state.state] || EMPTY.error)(days)}</div>`;
   }
-</style></head>
-<body>
-  <div class="page">
-  ${CARD}
-  <p class="note">${esc(sourceLine)} <b>Everything ran on this machine. Nothing was uploaded.</b> The method is rough: it reads your words and the files touched, so it will miscall the odd one.</p>
-  </div>
-<script>
-  (function(){
-    var el=document.getElementById('num'); if(!el) return;
-    var to=+el.getAttribute('data-to')||0;
-    var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    // #shot renders the finished card in one frame, for a clean screenshot; otherwise motion plays once
-    var shot=/shot/.test(location.hash);
-    if(!reduce&&!shot) document.body.classList.add('anim');
-    if(reduce||shot||to<=0){el.textContent=to; return;}
-    var start=null, dur=1100;
-    function tick(ts){
-      if(start===null) start=ts;
-      var p=Math.min(1,(ts-start)/dur);
-      var e=1-Math.pow(1-p,3);
-      el.textContent=Math.round(e*to);
-      if(p<1) requestAnimationFrame(tick); else el.textContent=to;
-    }
-    el.textContent='0';
-    requestAnimationFrame(tick);
-  })();
-</script>
-</body></html>`;
+
+  return `
+<!-- DRIFT: your last week against what you said you'd do -->
+<style>${CSS}</style>
+<section id="drift" class="${redact ? 'dr-hidden' : ''}" aria-label="Your week against your plan">
+  <div class="dr-head"><h3 class="dr-title">Your week against your plan</h3><span class="dr-range">${esc(range)}</span></div>
+  ${ok && !redact ? `<p class="dr-tools"><button type="button" class="dr-btn" id="dr-hide" aria-pressed="false">Hide my words</button><span class="dr-hint" id="dr-hint">For sharing a screenshot: swaps every detour name for its kind.</span></p>` : ''}
+  ${body}
+</section>
+<script id="dr-js">(function(){
+  var box = document.getElementById('drift'), btn = document.getElementById('dr-hide');
+  if (btn) btn.addEventListener('click', function(){
+    var hidden = box.classList.toggle('dr-hidden');
+    btn.setAttribute('aria-pressed', hidden ? 'true' : 'false');
+    btn.textContent = hidden ? 'Show my words' : 'Hide my words';
+  });
+  if (location.hash === '#drift') window.addEventListener('load', function(){ setTimeout(function(){ box.scrollIntoView(); }, 60); });
+})();</script>
+`;
 }
 
 // For --redact: one row per category, times and minutes summed, biggest first

package/src/renderers/html-report.js

@@ -3,6 +3,7 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { renderVsBlock } from './vs-report.js';
 import { renderSpentWell } from './spent-well.js';
+import { renderDriftSection } from './drift-report.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PKG_VERSION = JSON.parse(readFileSync(join(__dirname, '..', '..', 'package.json'), 'utf-8')).version;
@@ -41,6 +42,9 @@ export function renderHTML(report, opts = {}) {
   // "You burnt N tokens. Did you spend them well?": the strip between the grade card and the race.
   const swBlock = renderSpentWell(report, opts.telemetry || { on: false });
 
+  // Drift (your last week against what you wrote down), directly under that strip so the two read together.
+  const driftBlock = opts.drift ? renderDriftSection(opts.drift, { redact: !!opts.drift.redact }) : '';
+
   const fmtCost = (n) => '$' + (n >= 100 ? Math.round(n).toLocaleString() : n.toFixed(2));
   const fmtDuration = (m) => m >= 120 ? Math.round(m/60) + 'h' : m >= 60 ? (m/60).toFixed(1) + 'h' : m + 'm';
 
@@ -267,6 +271,7 @@ export function renderHTML(report, opts = {}) {
       .cc-card .cc-stats > div{text-align:left;min-width:0}
       .cc-card .cc-stats > div:first-child{flex:1 0 100%}
       .cc-card .cc-stats p.font-mono{font-size:32px;overflow-wrap:anywhere}
+      .cc-card .cc-meta{white-space:nowrap;flex-shrink:0;margin-left:12px}
       .cc-card .cc-foot{flex-direction:column;align-items:flex-start;gap:12px}
       .cc-card .cc-foot > div{flex-wrap:wrap}
     }
@@ -283,7 +288,7 @@ export function renderHTML(report, opts = {}) {
             <span class="text-xl font-bold text-[#e3e2e3]">${gradeLabel}</span>
           </div>
         </div>
-        <div class="text-right">
+        <div class="text-right cc-meta">
           <span class="text-[11px] font-mono uppercase tracking-[0.1em] text-[#908fa0] font-bold block">Claude Code</span>
           <span class="text-[11px] font-mono uppercase tracking-[0.06em] text-[#596678] block" id="card-range">All time</span>
         </div>
@@ -324,6 +329,7 @@ export function renderHTML(report, opts = {}) {
 </section>
 
 ${swBlock}
+${driftBlock}
 ${vsBlock}
 
 ${inflection && inflection.multiplier >= 1.5 ? `

package/src/renderers/s1-report.js

@@ -1,166 +0,0 @@
-import { readFileSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-import { monthsBilled } from '../readers/plan.js';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const PKG_VERSION = JSON.parse(readFileSync(join(__dirname, '..', '..', 'package.json'), 'utf-8')).version;
-
-function esc(s) {
-  if (!s) return '';
-  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
-}
-
-const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
-const WORDS = ['zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
-const fmtUSD = (n) => '$' + (n >= 1000 || Number.isInteger(n) ? Math.round(n).toLocaleString('en-US') : n.toFixed(2));
-const fmtDate = (iso) => { const d = new Date(iso + 'T00:00:00Z'); return isNaN(d) ? iso : `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`; };
-const fmtBig = (n) => n >= 1e9 ? (n / 1e9).toFixed(1) + ' billion' : n >= 1e6 ? (n / 1e6).toFixed(1) + ' million' : Math.round(n).toLocaleString('en-US');
-const word = (n) => n < WORDS.length ? WORDS[n] : String(n);
-
-function familyShares(modelCosts) {
-  const fam = {};
-  let total = 0;
-  for (const [name, cost] of Object.entries(modelCosts || {})) {
-    if (!(cost > 0)) continue;
-    const f = /opus/i.test(name) ? 'Opus' : /sonnet/i.test(name) ? 'Sonnet' : /haiku/i.test(name) ? 'Haiku' : /fable/i.test(name) ? 'Fable' : null;
-    if (!f) continue;
-    fam[f] = (fam[f] || 0) + cost;
-    total += cost;
-  }
-  return Object.entries(fam).map(([f, c]) => ({ family: f, pct: total ? Math.round(c / total * 100) : 0 })).sort((a, b) => b.pct - a.pct);
-}
-
-// Each risk factor is a true sentence about this user's own logs, and it only appears when its data clears the bar.
-function riskFactors(report, plan) {
-  const { costAnalysis, cacheHealth, inflection, sessionIntel } = report;
-  const out = [];
-  const top = familyShares(costAnalysis.modelCosts)[0];
-  if (top && top.pct >= 50) out.push([`We depend on a single supplier.`, `All of our spend went to Anthropic, ${top.pct}% of it to ${top.family}.`]);
-  const peak = costAnalysis.peakDay;
-  if (peak && plan && peak.cost >= plan.monthlyUSD) {
-    const n = Math.floor(peak.cost / plan.monthlyUSD);
-    out.push([`One day cost more than ${word(n)} month${n === 1 ? '' : 's'} of our subscription.`, `On ${fmtDate(peak.date)}, we consumed ${fmtUSD(peak.cost)} of Claude across ${peak.messageCount.toLocaleString('en-US')} replies.`]);
-  } else if (peak) {
-    out.push([`Our costs are concentrated.`, `On ${fmtDate(peak.date)} alone, we consumed ${fmtUSD(peak.cost)} of Claude.`]);
-  }
-  const hours = sessionIntel?.hourDistribution;
-  if (Array.isArray(hours) && hours.length === 24) {
-    const total = hours.reduce((a, b) => a + b, 0);
-    const night = hours.slice(0, 5).reduce((a, b) => a + b, 0);
-    const peakHour = hours.indexOf(Math.max(...hours));
-    const label = peakHour === 0 ? 'midnight' : peakHour === 12 ? 'noon' : peakHour < 12 ? `${peakHour}am` : `${peakHour - 12}pm`;
-    if (total && night / total >= 0.2) out.push([`We do our best work at ${label}.`, `${Math.round(night / total * 100)}% of our Claude usage happened between midnight and 5am.`]);
-  }
-  if (inflection && inflection.direction === 'worsened' && inflection.multiplier >= 2) {
-    out.push([`Our cache efficiency fell ${inflection.multiplier}x on ${fmtDate(inflection.date)}, and we kept going.`, `The week before, we re-read ${inflection.beforeRatio.toLocaleString('en-US')} tokens for every token we got back. The week after, ${inflection.afterRatio.toLocaleString('en-US')}.`]);
-  }
-  const saved = cacheHealth?.savings?.fromCaching || 0;
-  if (saved > costAnalysis.totalCost) {
-    // cache-health prices every cached token at Opus rates, so this is an estimate and is shown rounded
-    out.push([`Caching is the only thing keeping this affordable.`, `Without it, the same work would have cost roughly ${fmtUSD(Math.round((costAnalysis.totalCost + saved) / 1000) * 1000)} at list price.`]);
-  }
-  const maxMin = sessionIntel?.maxDuration || 0;
-  if (maxMin >= 1440) out.push([`Our longest session spanned ${word(Math.round(maxMin / 1440))} days.`, `We did not close the terminal.`]);
-  return out.slice(0, 5);
-}
-
-export function renderS1(report, { plan = null, name = null, showProject = false } = {}) {
-  const { costAnalysis, cacheHealth, generatedAt } = report;
-  const days = costAnalysis.dailyCosts || [];
-  const first = days[0]?.date, last = days[days.length - 1]?.date;
-  const consumed = costAnalysis.totalCost || 0;
-  const months = first && last ? monthsBilled(first, last) : 1;
-  const paid = plan ? plan.monthlyUSD * months : null;
-  const multiple = paid ? consumed / paid : null;
-  const company = (name ? String(name).trim() : 'You').toUpperCase() + ', INC.';
-  const dated = fmtDate((generatedAt || new Date().toISOString()).slice(0, 10));
-  const cacheRead = costAnalysis.totals?.cacheReadTokens ?? cacheHealth?.totals?.cacheRead ?? 0;
-  const peak = costAnalysis.peakDay;
-  const risks = riskFactors(report, plan);
-  // Use of proceeds names the top project by output, only when asked, since repo names can be private
-  let proceeds = null;
-  if (showProject && report.projectBreakdown?.length) {
-    const byOut = [...report.projectBreakdown].sort((x, y) => (y.outputTokens || 0) - (x.outputTokens || 0));
-    const all = byOut.reduce((t, p) => t + (p.outputTokens || 0), 0);
-    if (all && byOut[0].name) proceeds = { name: byOut[0].name, pct: Math.round((byOut[0].outputTokens || 0) / all * 100) };
-  }
-
-  const rows = [
-    paid !== null ? ['Paid to Anthropic', `${fmtUSD(paid)}`, `${esc(plan.name)}, ${months} month${months === 1 ? '' : 's'}`] : null,
-    ['Claude consumed at API list prices', fmtUSD(consumed), `${costAnalysis.activeDays} active days`],
-    cacheRead ? ['Cached tokens read', fmtBig(cacheRead), ''] : null,
-    peak ? ['Largest single day', fmtUSD(peak.cost), fmtDate(peak.date)] : null,
-  ].filter(Boolean);
-
-  return `<!doctype html>
-<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${esc(company)} Form S-1 (parody) | CC Hubber</title>
-<style>
-  :root { --ink:#111; --paper:#fff; --desk:#e8e5de; --red:#c1121f; --rule:#111; }
-  * { box-sizing:border-box; }
-  body { margin:0; background:var(--desk); color:var(--ink); font-family:"Times New Roman", Times, "Liberation Serif", serif; }
-  .wrap { padding:40px 16px 64px; display:flex; justify-content:center; }
-  .paper { position:relative; width:820px; max-width:100%; background:var(--paper); padding:56px 64px 44px 92px; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 12px 40px rgba(60,50,30,.14); }
-  .herring { position:absolute; left:26px; top:56px; bottom:44px; width:40px; writing-mode:vertical-rl; transform:rotate(180deg); color:var(--red); font-size:10.5px; line-height:1.35; text-align:center; font-style:italic; }
-  .dated { text-align:right; font-size:12px; font-style:italic; margin:0 0 26px; }
-  .c { text-align:center; }
-  .agency { font-size:13px; font-weight:700; letter-spacing:.08em; line-height:1.5; }
-  .form { font-size:26px; font-weight:700; letter-spacing:.14em; margin:14px 0 2px; }
-  .act { font-size:12px; font-weight:700; letter-spacing:.06em; }
-  hr { border:0; border-top:1.5px solid var(--rule); margin:18px 0; }
-  hr.thin { border-top-width:.75px; margin:12px 0; }
-  .prospectus { font-size:13px; font-weight:700; letter-spacing:.3em; margin-top:22px; }
-  .co { font-size:44px; font-weight:700; letter-spacing:.02em; margin:6px 0 2px; line-height:1.05; }
-  .exact { font-size:12px; font-style:italic; }
-  .hero { margin:30px 0 8px; }
-  .hero .n { font-size:78px; font-weight:700; letter-spacing:-.01em; line-height:1; }
-  .hero .k { font-size:15px; margin-top:8px; }
-  .hero .x { display:inline-block; margin-top:16px; font-size:22px; font-weight:700; border:1.5px solid var(--ink); padding:4px 14px; }
-  table { width:100%; border-collapse:collapse; font-size:15px; margin:6px 0 2px; }
-  td { padding:6px 0; vertical-align:baseline; }
-  td.l { width:auto; }
-  td.l span { background:var(--paper); padding-right:6px; }
-  td.l::after { content:""; }
-  td.v { text-align:right; font-weight:700; white-space:nowrap; padding-left:10px; width:1%; }
-  td.m { text-align:right; font-size:12.5px; font-style:italic; color:#333; white-space:nowrap; padding-left:14px; width:1%; }
-  .lead { position:relative; }
-  .lead::before { content:""; position:absolute; left:0; right:0; bottom:10px; border-bottom:1px dotted #777; z-index:0; }
-  .lead span { position:relative; z-index:1; }
-  h2 { font-size:15px; font-weight:700; letter-spacing:.18em; text-align:center; margin:26px 0 10px; }
-  .risk { font-size:15px; line-height:1.45; margin:0 0 10px; }
-  .risk b { font-style:italic; }
-  .foot { font-size:11.5px; line-height:1.45; color:#333; margin-top:22px; }
-  .cmd { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:13px; background:#f3f1ec; padding:2px 7px; border-radius:3px; color:#111; }
-  .gen { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; font-size:12.5px; }
-  @media (max-width:640px) {
-    .paper { padding:36px 20px 30px 52px; }
-    .herring { left:12px; width:30px; font-size:9px; }
-    .co { font-size:30px; } .hero .n { font-size:52px; } .form { font-size:21px; }
-    table { font-size:13.5px; } td.m { display:none; }
-  }
-</style></head>
-<body><div class="wrap"><article class="paper" id="s1">
-  <div class="herring">The information in this prospectus is not complete and may be changed. We may not stop until the weekly limit resets. This prospectus is not an offer to sell anything and is not soliciting an offer to buy anything. It is a receipt.</div>
-  <p class="dated">Subject to Completion. Preliminary Prospectus dated ${esc(dated)}</p>
-  <div class="c agency">UNITED STATES<br>TOKENS AND EXCHANGE COMMISSION<br><span style="font-weight:400;font-style:italic;letter-spacing:0">~/.claude, Your Terminal</span></div>
-  <div class="c form">FORM S-1</div>
-  <div class="c act">REGISTRATION STATEMENT UNDER THE CLAUDE CODE ACT</div>
-  <hr>
-  <div class="c prospectus">PROSPECTUS</div>
-  <div class="c co">${esc(company)}</div>
-  <div class="c exact">(Exact name of heavy user as specified in its CLAUDE.md)</div>
-  <div class="c hero">
-    <div class="n">${fmtUSD(consumed)}</div>
-    <div class="k">of Claude consumed at API list prices${paid !== null ? `, against ${fmtUSD(paid)} paid` : ''}</div>
-    ${multiple ? `<div class="x">${multiple >= 10 ? Math.round(multiple) : multiple.toFixed(1)}&times; what we paid</div>` : ''}
-  </div>
-  <hr class="thin">
-  <table>${rows.map(r => `<tr><td class="l lead"><span>${esc(r[0])}</span></td><td class="v">${esc(r[1])}</td><td class="m">${r[2]}</td></tr>`).join('')}</table>
-  ${proceeds ? `<h2>USE OF PROCEEDS</h2><p class="risk" style="text-align:center">${proceeds.pct}% of our output went to one project: <b style="font-style:normal">${esc(proceeds.name)}</b>.</p>` : ''}
-  ${risks.length ? `<h2>RISK FACTORS</h2>${risks.map(([h, b]) => `<p class="risk"><b>${esc(h)}</b> ${esc(b)}</p>`).join('')}` : ''}
-  <hr class="thin">
-  <p class="foot">Anthropic&rsquo;s own prospectus, as reported by Reuters on September 28, 2026, says two customers made up nearly a quarter of its 2025 revenue. We are not one of them. Figures come from this machine&rsquo;s Claude Code logs${first ? ` (${esc(fmtDate(first))} to ${esc(fmtDate(last))})` : ''}, priced at public API rates, which are not Anthropic&rsquo;s own costs. This is a parody, not a securities filing.</p>
-  <div class="gen"><span>Get yours: <span class="cmd">npx cchubber --s1</span></span><span style="font-style:italic">CC Hubber v${esc(PKG_VERSION)}</span></div>
-</article></div></body></html>`;
-}