aiblueprint-cli 1.4.73 → 1.4.75

package/README.md

@@ -77,9 +77,15 @@ npx aiblueprint-cli@latest agents symlink
 # Centralize global skills and agents in ~/.agents
 npx aiblueprint-cli@latest agents unify
 
+# Choose what to centralize interactively
+npx aiblueprint-cli@latest agents unify -i
+
 # Unify project-local .claude/.cursor config into .agents
 npx aiblueprint-cli@latest agents unify projects
 
+# Unify only selected project categories
+npx aiblueprint-cli@latest agents unify projects --agents-md --skills --rules
+
 # Recover sessions from saved configs and backups
 npx aiblueprint-cli@latest agents config unify sessions
 ```
@@ -150,6 +156,7 @@ npx skills add Melvynx/aiblueprint --skill skill-manager
 | `merge` | Context-aware branch merging |
 | `prompt-creator` | Expert prompt engineering |
 | `skill-manager` | Manage skills and rules across Claude Code, Codex, and Cursor |
+| `use-style` | Apply named UI style guides before implementation |
 | `rules-manager` | Create and maintain AGENTS.md and agent rule files |
 | `agents-managers` | Manage Claude Code agents and Task-tool orchestration |
 | `environments-manager` | Set up per-worktree agent environments |

package/agents-config/skills/use-style/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: use-style
+description: Apply named visual style guides to landing pages and UI. Use for $use-style, /useskill, list styles, or styles like grid, vercel-simple, stripe, linear, raycast, gumroad, dusk, or split-auth.
+---
+
+Load and apply a named style before designing or implementing any UI.
+
+## Invocation
+
+- Explicit: `$use-style grid`, `/useskill split-auth`, `/useskill list`, or "use the grid style"
+- Implicit: user references `/aiblueprint`, `/agents`, `/aibuilder`, "grid theme", Vercel, Geist, a minimalist dark tool UI, Stripe / fintech / checkout / dashboard UI, Linear / issue tracker / app-shell sidebar UI, NYT / newspaper / editorial / broadsheet / magazine layouts, Anthropic / Claude / warm cream AI-lab pages, Gumroad / neo-brutalist / loud commerce / bold yellow-pink pages, Raycast / glossy dark / glow gradients / floating glass nav / premium product marketing, or Dusk / Attio / dark CRM dashboard floating on a twilight backdrop / blue data viz / colorful category pills
+
+Parse the style name from `$ARGUMENTS` or the message. Treat `split-auth`, `signin 2pages`, `signin-2pages`, `sign-in 2 pages`, `auth split`, and `two-column auth` as `split-auth`. Treat `list`, `styles`, `available styles`, and missing style names with no implicit match as a request to list available styles and ask the user to choose before designing. Default to `grid` for Codelynx product landings. Default to `vercel-simple` when the user references Vercel, Geist, or minimalist dark developer tools. Default to `linear` when the user references Linear, an issue tracker, or a dense sidebar + list + detail app shell. Default to `new-york-times` when the user references a newspaper, broadsheet, magazine, or serif editorial layout. Default to `anthropic` when the user references Anthropic, Claude, or a warm cream + serif AI-lab aesthetic. Default to `gumroad` when the user references Gumroad, neo-brutalism, hard offset shadows, or a loud yellow/pink bordered look. Default to `raycast` when the user references Raycast, a glossy dark page with glow gradients, a floating glass nav, or premium dark product marketing. Default to `dusk` when the user references Attio, a dark CRM/data dashboard floating on a twilight/aurora backdrop, vivid-blue charts, or colorful category pills. Default to `split-auth` when the user asks for a polished login, sign-in, signup, OAuth, magic-code, or password-reset page with a two-panel visual layout.
+
+If the parsed style is `list`, or if no style can be inferred, do not load a style file. Reply with the available styles table below, add one short line asking which style to use, and stop until the user chooses.
+
+## Workflow
+
+1. Read `styles/<name>.md` from this skill directory.
+2. Check for project overrides and prefer them over the portable spec:
+   - `.agents/styles/<name>.md`
+   - `.agents/styles/<name>-theme.md`
+   - `.agents/styles/<name>-theme-migration.md` (migration playbooks only)
+3. Treat the loaded style as hard constraints for layout, typography, color, borders, motion, and component choice.
+4. Reuse existing primitives. In Codelynx repos, import `GridTheme*` components from `grid-theme-primitives.tsx` instead of reinventing patterns.
+
+## Available styles
+
+| Style | File | Vibe |
+|-------|------|------|
+| `grid` | `styles/grid.md` | Blueprint landing. Square geometry, 1px borders, mono data, condensed display type. |
+| `vercel-simple` | `styles/vercel-simple.md` | Vercel dark mode. Black canvas, Geist + mono, 1px `#333` borders, minimal accent. |
+| `stripe` | `styles/stripe.md` | Stripe fintech UI. Pale `#f6f9fc` canvas, white cards on soft shadows, blurple `#635BFF` accent, green CTA, rounded geometry. |
+| `linear` | `styles/linear.md` | Linear app shell. Near-black `#08090a` canvas, dense aligned sidebar + list + detail panes, indigo `#5e6ad2` accent, Inter Display headings, quiet line-defined chrome. |
+| `new-york-times` | `styles/new-york-times.md` | Print-newspaper editorial. Paper-white, serif headlines (Cheltenham/Georgia), Franklin sans kickers, blackletter masthead, hairline rules, multi-column grid, red/blue accents only. |
+| `anthropic` | `styles/anthropic.md` | Warm AI-lab. Cream `#f0efe9` paper, bold grotesque sans display + reading serif, clay-coral `#cc785c` accent, big soft-rounded dark panels, pill buttons. Light marketing + dark Claude app surfaces. |
+| `gumroad` | `styles/gumroad.md` | Loud neo-brutalist commerce. Yellow `#ffc900` + pink `#ff90e8`, thick black borders, hard offset shadows `4px 4px 0 #000`, flat fills, bold geometric sans, pill buttons. Light marketplace + dark dashboard surfaces. |
+| `raycast` | `styles/raycast.md` | Glossy dark product marketing. Near-black `#0a0a0a` + red `#ff6363` glow, floating glass nav (`backdrop-blur`), oversized bold pricing, large-radius `rounded-3xl` cards, soft glow over hard shadows. |
+| `dusk` | `styles/dusk.md` | Refined dark data app (Attio-style). Rounded near-black window floating on a twilight gradient backdrop, vivid sky-blue `#38bdf8` charts, `#3b6eff` primary, colorful category pills, Inter + mono numbers. |
+| `split-auth` | `styles/split-auth.md` | Two-column auth and OAuth pages. Left visual brand panel with optimized bitmap background, right clean form panel, monochrome social buttons, compact code inputs. |
+
+Add new styles as `styles/<name>.md` and register them here.
+
+## Output rules
+
+- Match the style vibe precisely. Do not blend with generic SaaS aesthetics.
+- Honor the anti-patterns section in the style file.
+- When a project spec lists concrete tokens or components, use those over prose approximations.
+- For landing pages, scaffold the page shell from the style first, then fill sections.
+
+## Related skills
+
+- `frontend-design` / `frontend-skill`: general UI craft. Defer to `use-style` when a named style is requested.
+- `impeccable`: polish pass after the style is applied.

package/agents-config/skills/use-style/examples/anthropic.html

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Real Analysis · Is the $200 comparison honest?</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=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg:#f0efe9; --bg-light:#faf9f5; --fg:#191919; --panel:#141413; --slate:#3d3d3a;
+    --muted:#6b6b66; --ghost:#c9c7bd; --border:#dad9d2;
+    --coral:#cc785c; --coral-bright:#d97757;
+    --on-dark:#f5f4ee;
+    --sans:'Inter', 'Helvetica Neue', Arial, sans-serif;
+    --serif:'Source Serif 4', Georgia, serif;
+  }
+  * { box-sizing:border-box; margin:0; padding:0; }
+  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
+  body { font-family:var(--serif); background:var(--bg); color:var(--fg); line-height:1.5; -webkit-font-smoothing:antialiased; }
+  .wrap { max-width:1080px; margin:0 auto; padding:0 28px; }
+  .sans { font-family:var(--sans); } .num { font-variant-numeric:tabular-nums; }
+  .eyebrow { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
+
+  /* Top nav */
+  .topnav { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
+  .logo { font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:-0.01em; text-transform:uppercase; }
+  .navlinks { display:flex; gap:30px; align-items:center; font-family:var(--sans); font-size:14px; font-weight:500; }
+  .navlinks a { color:var(--fg); text-decoration:none; } .navlinks a:hover { color:var(--coral); }
+  .navlinks a.active { color:var(--coral); }
+  .btn-pill { font-family:var(--sans); font-size:14px; font-weight:500; background:var(--panel); color:var(--on-dark); border:none; border-radius:9999px; padding:10px 20px; cursor:pointer; }
+  .btn-pill:hover { background:#000; }
+
+  /* Hero - poster composition */
+  header { padding:54px 0 56px; }
+  .hero { display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; }
+  .hero-words { font-family:var(--sans); font-weight:800; text-transform:lowercase; letter-spacing:-0.03em; line-height:.92; font-size:clamp(42px,8vw,104px); color:var(--fg); position:relative; }
+  .hero-words .u { text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px; }
+  .hero-words .ghost { color:var(--ghost); }
+  .hero-words .r2 { margin-top:.05em; }
+  .hero-lede { font-family:var(--serif); font-size:clamp(20px,2.4vw,28px); line-height:1.35; color:var(--fg); }
+  .hero-lede .spark { color:var(--coral-bright); }
+
+  /* Stats */
+  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-bottom:8px; }
+  .stat { background:var(--bg-light); border:1px solid var(--border); border-radius:18px; padding:24px 22px; }
+  .stat .k { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
+  .stat .v { font-family:var(--sans); font-size:38px; font-weight:700; letter-spacing:-0.03em; margin-top:12px; line-height:1; color:var(--fg); }
+  .stat .d { font-family:var(--serif); font-size:14px; color:var(--slate); margin-top:11px; }
+
+  /* Sections */
+  section { padding:56px 0; }
+  section + section { border-top:1px solid var(--border); }
+  .sec-head { margin-bottom:34px; max-width:74ch; }
+  .sec-head .step { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--coral); }
+  .sec-head h2 { font-family:var(--sans); font-size:clamp(26px,3.4vw,40px); font-weight:700; letter-spacing:-0.025em; margin-top:12px; line-height:1.05; color:var(--fg); }
+  .sec-head p { font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--slate); margin-top:16px; }
+
+  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
+  .panel { background:var(--bg-light); border:1px solid var(--border); border-radius:22px; padding:26px; }
+  .panel.dark { background:var(--panel); border:none; color:var(--on-dark); }
+  .panel .ptitle { font-family:var(--sans); font-size:15px; font-weight:600; }
+  .panel .psub { font-family:var(--sans); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }
+  .chart-box { position:relative; height:300px; margin-top:18px; }
+  .chart-box.tall { height:240px; }
+
+  .legend { display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; }
+  .legend span { font-family:var(--sans); display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--slate); }
+  .legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
+
+  .note { font-family:var(--serif); margin-top:20px; padding-top:18px; border-top:1px solid var(--border); font-size:16px; line-height:1.6; color:var(--slate); max-width:82ch; }
+  .note b { color:var(--fg); font-weight:600; }
+
+  /* Big dark callout */
+  .big-callout { background:var(--panel); color:var(--on-dark); border-radius:28px; padding:40px 36px; margin-top:8px; }
+  .big-callout .lbl { font-family:var(--sans); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(245,244,238,.55); }
+  .big-callout .row { display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 48px; margin-top:20px; }
+  .big-callout .row .v { font-family:var(--sans); font-size:56px; font-weight:700; letter-spacing:-0.03em; }
+  .big-callout .row .eq { font-family:var(--serif); font-size:36px; color:var(--coral-bright); }
+  .big-callout .cap { font-family:var(--serif); font-size:16.5px; line-height:1.5; margin-top:20px; color:rgba(245,244,238,.82); max-width:62ch; }
+
+  .three { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
+  .mini { background:var(--bg-light); border:1px solid var(--border); border-radius:18px; padding:22px; }
+  .mini .mt { font-family:var(--sans); font-size:14px; font-weight:600; } .mini .ms { font-family:var(--sans); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }
+  .mini .cwrap { position:relative; height:150px; margin-top:14px; }
+
+  .verdict-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-light); border:1px solid var(--border); border-radius:22px; overflow:hidden; }
+  .verdict-table td { padding:20px 24px; font-family:var(--serif); font-size:16.5px; line-height:1.5; border-top:1px solid var(--border); vertical-align:top; }
+  .verdict-table tr:first-child td { border-top:none; }
+  .verdict-table td:first-child { font-weight:600; color:var(--fg); width:42%; }
+  .verdict-table td:last-child { color:var(--slate); }
+  .tag { font-family:var(--sans); font-size:10px; font-weight:600; padding:3px 9px; border-radius:9999px; vertical-align:middle; margin-right:8px; letter-spacing:.03em; text-transform:uppercase; }
+  .tag.no { background:var(--coral); color:#fff; } .tag.tie { background:var(--panel); color:var(--on-dark); }
+
+  footer { padding:48px 0 90px; }
+  footer .eyebrow { margin-bottom:20px; display:block; }
+  footer ul { list-style:none; display:grid; gap:14px; max-width:84ch; }
+  footer li { font-family:var(--serif); font-size:15.5px; line-height:1.55; color:var(--slate); padding-left:22px; position:relative; }
+  footer li::before { content:"✳"; position:absolute; left:0; top:2px; color:var(--coral); font-size:12px; }
+  footer li b { color:var(--fg); }
+  footer a { color:var(--coral); text-decoration:none; } footer a:hover { text-decoration:underline; }
+  footer .sig { font-family:var(--sans); margin-top:28px; font-size:12px; color:var(--muted); }
+
+  @media (max-width:860px){
+    .hero{grid-template-columns:1fr;} .navlinks{display:none;}
+    .stats{grid-template-columns:1fr 1fr;}
+    .grid-2{grid-template-columns:1fr;} .three{grid-template-columns:1fr;}
+  }
+  @media (max-width:480px){ .stats{grid-template-columns:1fr;} }
+
+  /* === responsive hardening (auto) === */
+  html, body { max-width:100%; overflow-x:hidden; }
+  img, canvas, svg, table { max-width:100%; }
+  .note, .mono, .lede, .big-callout .cap, .sec-head p, .stat .d, footer li { overflow-wrap:anywhere; word-break:break-word; }
+  @media (max-width:760px){
+    .grid-2, .three { grid-template-columns:1fr !important; }
+    .stats { grid-template-columns:1fr 1fr; }
+    .topnav, .nav, .topband .inner, .navpills, .hero { flex-wrap:wrap; }
+    .chart-box { height:260px; }
+    .chart-box.tall { height:240px; }
+    section { padding-top:40px; padding-bottom:40px; }
+  }
+  @media (max-width:560px){
+    .wrap { padding-left:16px; padding-right:16px; }
+    .stats { grid-template-columns:1fr; }
+    .big-callout { padding:24px 20px; }
+    .big-callout .row { gap:10px 22px; }
+    .big-callout .row .v { font-size:40px; }
+    .big-callout .row .eq { font-size:24px; }
+    .verdict-table, .verdict-table tbody, .verdict-table tr, .verdict-table td { display:block; width:100% !important; }
+    .verdict-table td { padding:14px 18px !important; }
+    .verdict-table td:first-child { padding-bottom:4px; }
+    .verdict-table td:last-child { padding-top:0; border-top:none !important; }
+    .chart-box { height:230px; }
+    .stat .v { font-size:32px; }
+    h1 { max-width:100% !important; }
+  }
+
+
+  /* === chart responsive fix (auto) === */
+  .grid-2, .three { min-width:0; }
+  .grid-2 > *, .three > *, .panel, .mini, .stat { min-width:0; }
+  .chart-box, .cwrap { position:relative; width:100%; }
+  .chart-box canvas, .cwrap canvas { max-width:100% !important; }
+
+</style>
+</head>
+<body>
+<div class="wrap">
+
+  <nav class="topnav">
+    <div class="logo">AGENT\S</div>
+    <div class="navlinks">
+      <a href="index.html">All reports</a>
+      <a href="#">Codex $200</a>
+      <a href="#">Claude Max 20x</a>
+      <a class="active" href="#">Real analysis</a>
+    </div>
+    <button class="btn-pill">Read methodology</button>
+  </nav>
+
+  <header>
+    <div class="hero">
+      <div class="hero-words">
+        <span class="u">cache</span> <span class="ghost">is</span><br>
+        <span class="r2">not <span class="ghost">the</span> work</span>
+      </div>
+      <p class="hero-lede">The reports say Codex $200 is worth ~$8,600/mo and Claude $200 ~$18,900/mo. <span class="spark">✳</span> Here is the proof that "Claude is worth 2× more" is misleading - and what is actually true.</p>
+    </div>
+  </header>
+
+  <div class="stats num">
+    <div class="stat"><div class="k">Your tokens today</div><div class="v">92.7%</div><div class="d">are cache reads, not new work</div></div>
+    <div class="stat"><div class="k">That are output</div><div class="v">0.6%</div><div class="d">the only real "work" line</div></div>
+    <div class="stat"><div class="k">Real output value</div><div class="v">≈ tie</div><div class="d">$977 vs $911 / mo</div></div>
+    <div class="stat"><div class="k">The 2× gap</div><div class="v">artifact</div><div class="d">cache pricing + extrapolation</div></div>
+  </div>
+
+  <!-- 1 -->
+  <section>
+    <div class="sec-head">
+      <div class="step">01 / the symptom</div>
+      <h2>Where your tokens go vs where the dollars go</h2>
+      <p>Measured from your own logs (<span class="sans" style="font-size:15px">~/.claude/projects</span>, deduped by request, 2026-05-30). Almost everything is cache. Output - the actual work - is a sliver of the count and a small share of the dollars.</p>
+    </div>
+    <div class="grid-2">
+      <div class="panel">
+        <div class="ptitle">Token count</div>
+        <div class="psub">89.8M tokens today</div>
+        <div class="chart-box"><canvas id="countD"></canvas></div>
+      </div>
+      <div class="panel">
+        <div class="ptitle">API-equivalent dollars</div>
+        <div class="psub">$113 today, at Opus list</div>
+        <div class="chart-box"><canvas id="dollarD"></canvas></div>
+      </div>
+    </div>
+    <div class="legend">
+      <span><i style="background:var(--s3)"></i> Cache read</span>
+      <span><i style="background:var(--s2)"></i> Cache write</span>
+      <span><i style="background:var(--s1)"></i> Output (real work)</span>
+      <span><i style="background:var(--s4)"></i> Fresh input</span>
+    </div>
+    <p class="note"><b>~87% of the dollars are caching overhead; ~12% is output.</b> Caching does not stop the model re-reading the whole context on every call - it just makes the re-read cheap. The token count stays huge because it equals context size × number of calls (~110K re-read × 758 calls today).</p>
+  </section>
+
+  <!-- 2 -->
+  <section>
+    <div class="sec-head">
+      <div class="step">02 / the core proof</div>
+      <h2>Both $200 plans, decomposed to the same monthly basis</h2>
+      <p>Each plan's value split into output vs cache, priced at its own provider's API list, scaled to 100% of monthly quota. The output slivers (coral) are nearly identical. The entire headline gap is the warm-gray cache bars.</p>
+    </div>
+    <div class="panel dark">
+      <div class="chart-box tall"><canvas id="decomp"></canvas></div>
+      <div class="legend">
+        <span><i style="background:var(--coral)"></i> Output (real work)</span>
+        <span><i style="background:#8a8983"></i> Cache re-read ($0.50/1M)</span>
+        <span><i style="background:#56554f"></i> First read (input / cache-write)</span>
+      </div>
+      <p class="note" style="color:rgba(245,244,238,.78);border-color:#3a3a37">Codex total <b style="color:#fff">$8,589</b> · Claude total <b style="color:#fff">$18,891</b>. Output: <b style="color:#fff">$977 vs $911</b>. Input/cache side: <b style="color:#fff">$7,612 vs $17,980 (2.4×)</b> - that is where 100% of the gap lives.</p>
+    </div>
+  </section>
+
+  <!-- 3 -->
+  <section>
+    <div class="sec-head">
+      <div class="step">03 / the punchline</div>
+      <h2>Strip away cache: the real work is a tie</h2>
+      <p>Output is the least gameable metric - the tokens the model actually generated for you. On a monthly, full-quota basis the two $200 plans are within ~7% of each other.</p>
+    </div>
+    <div class="big-callout">
+      <div class="lbl">Output value per month (real work)</div>
+      <div class="row num">
+        <div><div class="v">$977</div><div class="lbl" style="margin-top:8px">Codex $200</div></div>
+        <div class="eq">≈</div>
+        <div><div class="v">$911</div><div class="lbl" style="margin-top:8px">Claude $200</div></div>
+      </div>
+      <p class="cap">In raw output tokens: ~32.6M/mo (Codex) vs ~36.4M/mo (Claude) - a 1.12× edge, nowhere near the 2× the headline implies.</p>
+    </div>
+  </section>
+
+  <!-- 4 -->
+  <section>
+    <div class="sec-head">
+      <div class="step">04 / why the headline looks 2×</div>
+      <h2>Three calculation asymmetries inflate Claude's number</h2>
+      <p>None of these reflect more work delivered. They reflect how the number was built.</p>
+    </div>
+    <div class="three">
+      <div class="mini">
+        <div class="mt">Extrapolation multiplier</div>
+        <div class="ms">lower = more reliable</div>
+        <div class="cwrap"><canvas id="aExtrap"></canvas></div>
+        <p class="note" style="margin-top:14px;padding-top:14px;font-size:14.5px">Codex was measured at 99% quota. Claude was one day at 10%, multiplied ×10 - any error amplified 10×.</p>
+      </div>
+      <div class="mini">
+        <div class="mt">Price to cache context</div>
+        <div class="ms">first read, per 1M</div>
+        <div class="cwrap"><canvas id="aPrice"></canvas></div>
+        <p class="note" style="margin-top:14px;padding-top:14px;font-size:14.5px">Anthropic charges 2× for a "cache write" vs OpenAI's normal input. Same behavior, pricier meter.</p>
+      </div>
+      <div class="mini">
+        <div class="mt">Context re-reads</div>
+        <div class="ms">per output token</div>
+        <div class="cwrap"><canvas id="aReread"></canvas></div>
+        <p class="note" style="margin-top:14px;padding-top:14px;font-size:14.5px">Claude re-reads ~2× more context per unit of output, bloating the cache-read line.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- 5 -->
+  <section>
+    <div class="sec-head">
+      <div class="step">05 / watch the gap melt</div>
+      <h2>Remove the artifacts and $18.9k slides toward $8.6k</h2>
+      <p>Starting from Claude's headline, undo each calculation artifact in turn. The gap to Codex's measured number shrinks at every step.</p>
+    </div>
+    <div class="panel">
+      <div class="chart-box tall"><canvas id="bridge"></canvas></div>
+      <p class="note">Re-pricing cache writes at Codex's rate: $18,891 → <b>$15,562</b>. Adjusting the one-day ×10 extrapolation for a plausibly heavy sample day (÷1.5): → <b>~$12,600</b>. Codex, essentially measured: <b>$8,589</b>. The residual is genuine extra context churn, not extra work.</p>
+    </div>
+  </section>
+
+  <!-- 6 -->
+  <section>
+    <div class="sec-head">
+      <div class="step">06 / the honest answer</div>
+      <h2>What is actually true</h2>
+    </div>
+    <table class="verdict-table">
+      <tr>
+        <td>Which $200 plan does more real work?</td>
+        <td><span class="tag tie">tie</span>Roughly equal - output ~$977 vs ~$911 / mo.</td>
+      </tr>
+      <tr>
+        <td>Which API would bill more for this usage at full quota?</td>
+        <td>Claude - but because it charges more for the same caching and the figure is a ×10 extrapolation, not because you get more done.</td>
+      </tr>
+      <tr>
+        <td>Is "$9k vs $20k = Claude worth 2×" a fair comparison?</td>
+        <td><span class="tag no">no</span>It compares a measurement to a one-day ×10 guess, across two pricing models that treat caching differently, on a metric dominated by context overhead.</td>
+      </tr>
+    </table>
+    <p class="note">The deeper trap is the word <b>"value."</b> API-equivalent value measures what the provider's meter would charge, so it rewards verbose context, heavy cache re-reads, and a pricier cache-write rate. A plan can score "2× more valuable" while delivering identical output. That is exactly what happened here.</p>
+  </section>
+
+  <footer>
+    <span class="eyebrow">Confidence &amp; sources</span>
+    <ul>
+      <li><b>Proven from data</b> (high): your usage is 92.7% cache / 0.6% output; output value is ~equal; 100% of the gap is cache; first-read price is $5 (Codex) vs $10 (Claude); scale factors ×4.38 vs ×43.33.</li>
+      <li><b>Inferred from the math</b> (high): normalizing cache-write price drops Claude to ~$15.6k; the ×10 extrapolation makes the headline unreliable.</li>
+      <li><b>External reporting</b> (medium): exact subscription-limit weighting, Opus-vs-Sonnet ratio, and the 2026 cache-TTL change are documented by press, not by this repo's data.</li>
+      <li>Data: <span class="sans" style="font-size:13px">result/melvynx/codex/2026-05-30T09-13-16Z</span>, <span class="sans" style="font-size:13px">result/taka-foo/claude</span>. Full write-up: <a href="real-analysis.md">real-analysis.md</a>.</li>
+      <li>Sources: <a href="https://support.claude.com/en/articles/14552983-models-usage-and-limits-in-claude-code">Anthropic limits</a> · <a href="https://www.theregister.com/2026/03/31/anthropic_claude_code_limits/">The Register</a> · <a href="https://www.xda-developers.com/anthropic-quietly-nerfed-claude-code-hour-cache-token-budget/">XDA cache nerf</a>.</li>
+    </ul>
+    <div class="sig">Real Analysis · generated from agents-analysis data · API-equivalent value is not the provider's real cost.</div>
+  </footer>
+
+</div>
+
+<script>
+  // warm palette: coral highlight + warm grays / ink
+  const CORAL="#cc785c", INK="#191919", S2="#8a8983", S3="#bdbcb4", S4="#dad9d2", GRID="#dad9d2";
+  document.documentElement.style.setProperty('--s1', CORAL);
+  document.documentElement.style.setProperty('--s2', S2);
+  document.documentElement.style.setProperty('--s3', S3);
+  document.documentElement.style.setProperty('--s4', S4);
+
+  Chart.defaults.font.family = "Inter, Helvetica, Arial, sans-serif";
+  Chart.defaults.color = "#6b6b66";
+  Chart.defaults.font.size = 12;
+  const usd = (v) => "$" + v.toLocaleString("en-US",{maximumFractionDigits:0});
+  const tip = { backgroundColor:"#191919", padding:10, cornerRadius:10, titleFont:{family:"Inter"}, bodyFont:{family:"Inter"} };
+
+  function dough(id, data, fmt){
+    new Chart(document.getElementById(id), {
+      type:"doughnut",
+      data:{ labels:["Cache read","Cache write","Output","Fresh input"],
+        datasets:[{ data, backgroundColor:[S3,S2,CORAL,S4], borderColor:"#faf9f5", borderWidth:3, hoverOffset:6 }] },
+      options:{ responsive:true, maintainAspectRatio:false, cutout:"62%",
+        plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>c.label+": "+fmt(c.parsed) }} } }
+    });
+  }
+  dough("countD", [83.3,5.7,0.5,0.3], (v)=>v+"M tokens");
+  dough("dollarD", [41.64,56.93,13.23,1.48], (v)=>"$"+v.toFixed(2));
+
+  // decomposition on dark panel -> warm-white labels, dark gridlines
+  new Chart(document.getElementById("decomp"), {
+    type:"bar",
+    data:{ labels:["Codex $200","Claude $200"],
+      datasets:[
+        { label:"Output (real work)", data:[977,911], backgroundColor:CORAL, borderRadius:{topLeft:6,bottomLeft:6} },
+        { label:"Cache re-read", data:[5303,11319], backgroundColor:"#8a8983" },
+        { label:"First read (input/cache-write)", data:[2309,6661], backgroundColor:"#56554f", borderRadius:{topRight:6,bottomRight:6} }
+      ] },
+    options:{ indexAxis:"y", responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>c.dataset.label+": "+usd(c.parsed.x) }} },
+      scales:{ x:{ stacked:true, grid:{color:"#3a3a37"}, border:{display:false}, ticks:{ color:"#a8a79e", callback:(v)=>"$"+(v/1000)+"k" } },
+               y:{ stacked:true, grid:{display:false}, border:{color:"#3a3a37"}, ticks:{ font:{family:"Inter",size:13,weight:600}, color:"#f5f4ee" } } } }
+  });
+
+  function mini(id, vals, fmt, max){
+    new Chart(document.getElementById(id), {
+      type:"bar",
+      data:{ labels:["Codex","Claude"], datasets:[{ data:vals, backgroundColor:[S2,CORAL], borderRadius:8, barPercentage:0.6 }] },
+      options:{ responsive:true, maintainAspectRatio:false,
+        plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>fmt(c.parsed.y) }} },
+        scales:{ x:{ grid:{display:false}, border:{color:GRID}, ticks:{font:{family:"Inter",size:12}} },
+                 y:{ grid:{color:GRID}, border:{display:false}, max, ticks:{ callback:fmt } } } }
+    });
+  }
+  mini("aExtrap", [4.38,43.33], (v)=>"×"+(typeof v==="number"?v.toFixed(v<10?1:0):v), 48);
+  mini("aPrice", [5,10], (v)=>"$"+v, 12);
+  mini("aReread", [326,621], (v)=>v.toFixed(0), 700);
+
+  new Chart(document.getElementById("bridge"), {
+    type:"bar",
+    data:{ labels:["Claude headline","− cache-write premium","− 1-day extrapolation","Codex (measured)"],
+      datasets:[{ data:[18891,15562,12600,8589], backgroundColor:[CORAL,"#d8a48f","#cbcabf",INK], borderRadius:8, barPercentage:0.62 }] },
+    options:{ responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>usd(c.parsed.y)+" / mo" }} },
+      scales:{ x:{ grid:{display:false}, border:{color:GRID}, ticks:{font:{family:"Inter",size:11}} },
+               y:{ grid:{color:GRID}, border:{display:false}, ticks:{ callback:(v)=>"$"+(v/1000)+"k" } } } }
+  });
+</script>
+
+<script>
+  // force Chart.js to reflow on viewport changes (belt-and-suspenders)
+  (function(){
+    function resizeAll(){ if(window.Chart && Chart.instances){ Object.values(Chart.instances).forEach(function(c){ try{c.resize();}catch(e){} }); } }
+    var t; window.addEventListener('resize', function(){ clearTimeout(t); t=setTimeout(resizeAll,120); });
+    window.addEventListener('orientationchange', function(){ setTimeout(resizeAll,200); });
+  })();
+</script>
+
+</body>
+</html>