Add The Compute Ledger to Selected Work

index.html

@@ -176,6 +176,7 @@
 .pen-note--c{transform:rotate(-3.4deg)}
 .pen-note--d{transform:rotate(-1.9deg)}
 .pen-note--e{transform:rotate(-0.5deg)}
+.pen-note--f{transform:rotate(-2.2deg)}
 .lab:hover .pen-note,.lab:focus-within .pen-note{opacity:.92}
 .margin-flip{position:fixed;right:calc((100vw - var(--max))/2 - 64px);top:12vh;z-index:5;pointer-events:none;transform:rotate(12deg);transform-origin:50% 96%;filter:drop-shadow(1.4px 1.8px 0 rgba(31,58,95,.17));display:none}
 .margin-flip svg{display:block;width:19px;height:87px;overflow:visible}
@@ -229,6 +230,7 @@
 .lab__links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:auto;padding-top:14px}
 .lab__links .lab__go{margin-top:0;padding-top:0}
 .lab__go--alt{position:relative;z-index:1}
+.lab--private{grid-column:1/-1}
 .lab--private .lab__go{color:var(--soft)}
 .also{margin-top:28px;font-size:16px}
 .also a{display:inline-flex;align-items:center;min-height:44px}
@@ -487,12 +489,22 @@ <h3><a href="https://github.com/cookiy-ai/user-research-skill"><span class="ul"
         </div>
         <span class="pen-note pen-note--d" aria-hidden="true">read the source</span>
       </li>
+      <li class="lab" data-ruled>
+        <p class="lab__n"><span class="mono">Exp. 05 · AI usage yearbook</span><span class="mono">public data · auto-published</span></p>
+        <h3><a href="https://brickerp.github.io/ai-usage-report/">The <span class="ul" data-ink="4">Compute Ledger</span></a></h3>
+        <p class="lab__fact">Daily tokens, cache reuse, estimated costs, model history and source freshness — a durable multi-machine record of how I use AI coding tools.</p>
+        <div class="lab__links">
+          <span class="lab__go">Open the ledger ↗</span>
+          <a class="lab__go lab__go--alt" href="https://github.com/BrickerP/ai-usage-report">source &amp; methodology ↗</a>
+        </div>
+        <span class="pen-note pen-note--e" aria-hidden="true">read the record</span>
+      </li>
       <li class="lab lab--private" data-ruled>
-        <p class="lab__n"><span class="mono">Exp. 05 · private · Baidu MeDo</span><span class="mono">not public</span></p>
-        <h3>Agent platform &amp; <span class="ul" data-ink="4">revenue backend</span></h3>
+        <p class="lab__n"><span class="mono">Exp. 06 · private · Baidu MeDo</span><span class="mono">not public</span></p>
+        <h3>Agent platform &amp; <span class="ul" data-ink="5">revenue backend</span></h3>
         <p class="lab__fact"><span class="redact" role="img" aria-label="6,750,000">█,███,███</span> ledger entries reconciled in the overseas billing migration</p>
         <a class="lab__go" href="/resume.pdf">Details in the resume →</a>
-        <span class="pen-note pen-note--e" aria-hidden="true">ask me about this</span>
+        <span class="pen-note pen-note--f" aria-hidden="true">ask me about this</span>
       </li>
     </ol>
     <p class="also">Also: <a href="/about/">full programme →</a>&nbsp;· <a href="/resume.pdf">resume (PDF)</a></p>
@@ -568,7 +580,7 @@ <h3>Agent platform &amp; <span class="ul" data-ink="4">revenue backend</span></h
 
 <section id="contact" class="sec contact" aria-labelledby="contact-h">
   <div class="wrap">
-    <header class="sec-h"><span class="mono">§3 · Contact</span><h2 id="contact-h">Exp. 06 — your project</h2></header>
+    <header class="sec-h"><span class="mono">§3 · Contact</span><h2 id="contact-h">Exp. 07 — your project</h2></header>
     <p class="contact__sub">I work on agent tool use, streaming and real-time backends, billing systems, and the tests and operational checks that keep them reliable.</p>
     <aside class="status-card" data-ruled aria-label="Status and terms">
       <p class="mono">Status · 2026</p>
@@ -600,4 +612,4 @@ <h3>Agent platform &amp; <span class="ul" data-ink="4">revenue backend</span></h
 <!-- Double pendulum module: homepage only; film runtime stays at /beijing-loop/. -->
 <script type="module" src="/src/pendulum.ts"></script>
 </body>
-</html>
+</html>

scripts/verify-dist.mjs

@@ -54,6 +54,11 @@ assert.match(homeChunk, /prefers-reduced-motion/, 'dist landing chunk must still
 // tens of kilobytes at most. The film runtime is ~700 KB, so this still catches it leaking in.
 assert.ok(homeChunk.length < 32_000, `dist landing chunk too large (${homeChunk.length} bytes)`);
 assert.match(home, /<a\b[^>]*href=["']\/beijing-loop\/["']/i, 'dist landing must keep the film reachable');
+assert.match(
+  home,
+  /<h3><a href=["']https:\/\/brickerp\.github\.io\/ai-usage-report\/["']>The[\s\S]*?Compute Ledger[\s\S]*?<\/a><\/h3>/i,
+  'dist landing must expose The Compute Ledger at its canonical public URL',
+);
 assert.match(home, /id=["']contact["']/i, 'dist landing must keep #contact');
 
 const film = await read('beijing-loop/index.html');

scripts/verify-static.mjs

@@ -510,16 +510,16 @@ assert.match(rootHtml, /id=["']pendulum-burst["']/, 'index.html: the burst layer
 assert.match(rootHtml, /id=["']notebook-stamp["']/, 'index.html: the live stamp must exist');
 assert.match(rootHtml, /id=["']notebook-page["']/, 'index.html: the visit counter must exist');
 assert.match(pendulumSvg, /id=["']pendulum-burst["']/, 'index.html: the burst layer stays inside Fig. 1');
-// The reader's pen: one underlined key phrase per lab entry, five hands that
+// The reader's pen: one underlined key phrase per lab entry, six hands that
 // must not repeat, drawn in real pixels (never a stretched viewBox), and
 // the lab entry's whole-card link must stay whole.
 const pensSource = await text('src/pens.ts');
 assert.match(pendulumSource, /from\s+['"]\.\/pens['"]/, 'src/pendulum.ts: must boot the reader\'s pen');
 const inkSpans = [...rootHtml.matchAll(/class=["']ul["'][^>]*data-ink=["'](\d+)["']/g)].map((match) => match[1]);
-assert.deepEqual(inkSpans, ['0', '1', '2', '3', '4'], 'index.html: every lab entry needs its underlined phrase, in order');
+assert.deepEqual(inkSpans, ['0', '1', '2', '3', '4', '5'], 'index.html: every lab entry needs its underlined phrase, in order');
 const inkSeeds = [...pensSource.matchAll(/seed:\s*(\d+)/g)].map((match) => match[1]);
-assert.equal(inkSeeds.length, 10, 'src/pens.ts: five hands, two strokes each');
-assert.equal(new Set(inkSeeds).size, 10, 'src/pens.ts: no two strokes may share a seed');
+assert.equal(inkSeeds.length, 12, 'src/pens.ts: six hands, two strokes each');
+assert.equal(new Set(inkSeeds).size, 12, 'src/pens.ts: no two strokes may share a seed');
 assert.doesNotMatch(pensSource, /vector-effect|non-scaling-stroke/, 'src/pens.ts: pen strokes must not rely on non-scaling strokes');
 assert.match(
   rootHtml,
@@ -579,10 +579,10 @@ assert.doesNotMatch(
   'src/paper.ts: the ink mark and the K splash are retired',
 );
 
-// Contact: the status card replaced the red checks, and Exp. 06 keeps the story.
+// Contact: the status card replaced the red checks, and Exp. 07 keeps the story.
 assert.match(rootHtml, /class=["']status-card["']/, 'index.html: #contact must print the status card');
 assert.doesNotMatch(rootHtml, /class=["']contact__list["']/, 'index.html: the red checklist must be gone');
-assert.match(rootHtml, /Exp\. 06 — your project/, 'index.html: the contact title must keep the Exp. 06 story');
+assert.match(rootHtml, /Exp\. 07 — your project/, 'index.html: the contact title must keep the Exp. 07 story');
 
 // The page's spine: the three floors stated once at the top, and the two
 // exhibits that carry their own entry context.
@@ -607,6 +607,8 @@ assert.match(
 // the public repository with the reputation, a label that names a destination
 // opens it, and the homepage never links a page that only bounces back to itself.
 const DASHBOARD_URL = 'https://d2c9pzwpavuktk.cloudfront.net/';
+const COMPUTE_LEDGER_URL = 'https://brickerp.github.io/ai-usage-report/';
+const COMPUTE_LEDGER_SOURCE = 'https://github.com/BrickerP/ai-usage-report';
 const featuredCard = rootHtml.match(/<li class="lab lab--featured"[\s\S]*?<\/li>/)?.[0] ?? '';
 assert.match(
   featuredCard,
@@ -634,6 +636,27 @@ assert.match(
   'index.html: Exp. 03 must open the live Agent Stack Index report',
 );
 assert.match(rootHtml, /<a\b[^>]*href=["']https:\/\/github\.com\/BrickerP\/agent-stack-index["']/, 'index.html: Exp. 03 must link its open data and code');
+const computeLedgerCard = [
+  ...rootHtml.matchAll(/<li class="lab"[^>]*>[\s\S]*?<\/li>/g),
+].map((match) => match[0]).find((card) => {
+  const headingHref = card.match(/<h3>\s*<a\b[^>]*href=["']([^"']+)["']/i)?.[1];
+  return headingHref === COMPUTE_LEDGER_URL;
+}) ?? '';
+assert.match(
+  computeLedgerCard,
+  /Exp\. 05 · AI usage yearbook[\s\S]*public data · auto-published/,
+  'index.html: Exp. 05 must identify The Compute Ledger as a public AI usage yearbook',
+);
+assert.match(
+  computeLedgerCard,
+  /Daily tokens, cache reuse, estimated costs, model history and source freshness/,
+  'index.html: The Compute Ledger card must explain its stable published evidence',
+);
+assert.match(
+  computeLedgerCard,
+  new RegExp(`href="${escapeRegExp(COMPUTE_LEDGER_SOURCE)}"`),
+  'index.html: The Compute Ledger card must link its source and methodology',
+);
 
 // Fig. 2: a seeded random process with a stop rule, measured over 999
 // futures — canvases for the drawing, the numbers printed from the sim,

src/pens.ts

@@ -3,9 +3,9 @@
  *
  * Each entry gets one key phrase underlined by two strokes, the way a
  * reader marks a textbook: a pressured centre line with tapered ends and
- * ragged edges, then a thinner second pass a beat later. The five hands
+ * ragged edges, then a thinner second pass a beat later. The six hands
  * are deliberately unlike one another — confident, slipped, looped, lazy,
- * hesitant. Strokes are filled shapes revealed in stepped frames (a few
+ * measured, hesitant. Strokes are filled shapes revealed in stepped frames (a few
  * chunks of ink at a time, stop-motion style) on hover or focus.
  * Decorative: aria-hidden, pointer-transparent, drawn in real pixels so
  * nothing is stretched, and redrawn whenever the phrase changes width.
@@ -67,7 +67,12 @@ const HANDS: ReadonlyArray<readonly [Hand, Hand]> = [
     { seed: 47, from: -3, to: 14, y: 5.0, tilt: -0.4, amp: 0.6, tremble: 0.2, w: 3.3, floor: 0.18 },
     { seed: 48, from: 0, to: -2, y: 11.0, tilt: 0.9, amp: 0.5, tremble: 0.35, w: 2.0, floor: 0.3, frac: 0.55 },
   ],
-  // 4 · revenue backend — private work, the least certain hand
+  // 4 · Compute Ledger — measured, slightly offset passes like a checked entry
+  [
+    { seed: 71, from: -5, to: 8, y: 5.1, tilt: 0.2, amp: 0.45, tremble: 0.18, w: 2.7, floor: 0.28, hook: 0.5 },
+    { seed: 72, from: 3, to: -7, y: 11.5, tilt: -0.3, amp: 0.4, tremble: 0.22, w: 1.9, floor: 0.3, flick: 0.5 },
+  ],
+  // 5 · revenue backend — private work, the least certain hand
   [
     { seed: 59, from: -2, to: 2, y: 5.6, tilt: 0.8, amp: 1.7, tremble: 1.1, w: 2.4, floor: 0.45, hook: 1.2 },
     { seed: 60, from: 8, to: -4, y: 11.8, tilt: -0.8, amp: 1.4, tremble: 1.2, w: 1.8, floor: 0.4, frac: 0.4 },