pennyrouter 0.3.45 → 0.3.47

package/standalone/web-demo/claude-meter.mjs

@@ -84,6 +84,10 @@ function emptyTotals() {
     fresh_input: 0, output: 0, reasoning_output: 0, total: 0, cost: 0 };
 }
 
+function emptySideCalls() {
+  return { count: 0, cost: 0, cache_read: 0, cache_write: 0, fresh_input: 0, output: 0, total: 0, models: {} };
+}
+
 export class ClaudeMeter {
   constructor({ sessionId, cwd, side, role, label, variant, pricingProfile = 'standard', options = {} }) {
     this.sessionId = sessionId;
@@ -106,7 +110,7 @@ export class ClaudeMeter {
     this.transcriptPrints = new Map();
     this.chargedPrints = new Map();
     this.telemetry = new Map();
-    this.sideCalls = { count: 0, cost: 0, models: {} };
+    this.sideCalls = emptySideCalls();
     this.localReplyIds = new Set();
   }
 
@@ -162,6 +166,11 @@ export class ClaudeMeter {
       byModel.calls += 1; byModel.tokens += total; byModel.cost += cost;
       this.sideCalls.count += 1;
       this.sideCalls.cost += cost;
+      this.sideCalls.cache_read += read;
+      this.sideCalls.cache_write += write;
+      this.sideCalls.fresh_input += input;
+      this.sideCalls.output += output;
+      this.sideCalls.total += total;
     }
   }
 
@@ -287,11 +296,17 @@ export class ClaudeMeter {
     } finally { await handle.close(); }
   }
 
+  // `totals` is everything billed; `main` leaves out the side calls.
   snapshot() {
+    const side = this.sideCalls;
+    const main = { ...this.totals, cache_read: this.totals.cache_read - side.cache_read,
+      cache_write: this.totals.cache_write - side.cache_write, write_5m: this.totals.write_5m - side.cache_write,
+      fresh_input: this.totals.fresh_input - side.fresh_input, output: this.totals.output - side.output,
+      total: this.totals.total - side.total, cost: this.totals.cost - side.cost };
     return { side: this.side, role: this.role, label: this.label, variant: this.variant, options: this.options,
       harness: 'claude-code', cwd: this.cwd, pricing_profile: this.pricingProfile, session_id: this.sessionId,
       transcript_path: this.transcriptPath, model: this.model, call_count: this.calls.length,
-      totals: { ...this.totals }, local_replies: this.localReplyIds.size,
+      totals: { ...this.totals }, main, local_replies: this.localReplyIds.size,
       side_calls: { ...this.sideCalls, models: structuredClone(this.sideCalls.models) } };
   }
 }
@@ -454,7 +469,7 @@ export function galleryReport(left, right, { environment, harnessVersions }) {
   const penny = sides.find((side) => side.role === 'PENNY');
   if (!native || !penny || native.harness !== penny.harness) return null;
   const side = (snapshot) => ({ model: snapshot.model, call_count: snapshot.call_count, totals: snapshot.totals,
-    side_calls: snapshot.side_calls || { count: 0, cost: 0, models: {} } });
+    side_calls: snapshot.side_calls || emptySideCalls() });
   return JSON.stringify({ version: 1, harness: native.harness,
     harness_version: harnessVersions?.[native.harness === 'codex' ? 'codex' : 'claude'] || '',
     environment, native: side(native), penny: side(penny), finished_at: new Date().toISOString() });

package/standalone/web-demo/compare.html

@@ -31,6 +31,7 @@
     .bar .sync-on { color: var(--accent); border-color: #547a50; background: var(--accent-wash); }
     .bar .sync-off { color: #a0a0aa; border-color: #62626d; background: #292930; }
     #delta { color: var(--accent); }
+    .pane header #delta { margin-left: auto; white-space: nowrap; }
     #versions { margin-left: auto; color: #92929c; font-size: 12px; }
     #status { color: #b8b8c3; }
     @media (max-width: 760px) { .bar { overflow-x: auto; } #versions { display: none; } }
@@ -84,7 +85,7 @@
     .meter .field.read strong { color: var(--accent); }
     .meter .field.write strong { color: var(--warn); }
     .meter .field.in strong, .meter .field.out strong { color: #75ec45; }
-    .meter .field.side { color: #77777e; }
+    .meter .field.main, .meter .field.side { color: #77777e; }
     .meter .wait { display: none; color: #77777e; }
     .meter.waiting .wait { display: block; }
     .meter.waiting .field { display: none; }
@@ -214,7 +215,6 @@
     <button id="finish" disabled>Finish comparison</button>
     <button id="download-logs" hidden>Download logs</button>
     <button id="add-to-gallery" disabled title="Finish this comparison and share it in the PennyRouter gallery">Add to gallery</button>
-    <span id="delta" aria-live="polite"></span>
     <span id="versions"></span>
     <span id="status">Connecting…</span>
   </div>
@@ -225,6 +225,7 @@
         <div class="file-list" id="left-file-list" hidden><p>HTML files the agent writes will appear here.</p></div></div>
       </header><div class="meter" id="left-meter"></div><div class="terminal" id="left"></div></section>
     <section class="pane" id="right-pane"><header><strong class="label" id="right-label">PENNY</strong><span class="chip" id="right-chip" hidden></span>
+      <span id="delta" aria-live="polite"></span>
       <div class="files" id="right-files"><button class="newest" id="right-newest" hidden></button>
         <button class="count" id="right-files-count" aria-expanded="false" aria-controls="right-file-list">No files</button>
         <div class="file-list" id="right-file-list" hidden><p>HTML files the agent writes will appear here.</p></div></div>
@@ -315,6 +316,7 @@
           <div class="segmented" role="radiogroup" aria-label="Featured page">
             <label><input type="radio" name="publish-cover" value="penny" checked><span>Penny page</span></label>
             <label><input type="radio" name="publish-cover" value="native"><span>Native page</span></label>
+            <label><input type="radio" name="publish-cover" value="none"><span>No page</span></label>
           </div>
           <label>Your name, as shown publicly
             <input id="publish-name" maxlength="40" required autocomplete="nickname"></label>
@@ -800,6 +802,9 @@
     // Same abbreviation as hud.py: 1.2k, 3.45M.
     const abbreviate = (value) => value >= 1_000_000 ? `${(value / 1_000_000).toFixed(2)}M`
       : value >= 1_000 ? `${(value / 1_000).toFixed(1)}k` : String(value);
+    // Cents alone would round a cheap side call to $0.00.
+    const dollars = (value) => `$${value.toLocaleString('en-US',
+      { minimumFractionDigits: value < 1 ? 4 : 2, maximumFractionDigits: value < 1 ? 4 : 2 })}`;
     const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
     const meters = {};
     const buildMeter = (side) => {
@@ -811,15 +816,16 @@
       model.append(role, name);
       root.append(model);
       const amounts = {};
-      for (const label of ['read', 'write', 'in', 'out', 'total', 'side', 'cost']) {
-        const field = document.createElement('span'); field.className = `field ${label}`;
+      // Token rows count the main thread only. Background calls Claude Code makes outside the
+      // transcript (auto-mode reviewer, titles) show only as `side` cost; the last row is main + side.
+      for (const [key, label] of [['read', 'read'], ['write', 'write'], ['in', 'in'], ['out', 'out'],
+        ['total', 'total'], ['main', 'main'], ['side', 'side'], ['cost', 'total']]) {
+        const field = document.createElement('span'); field.className = `field ${key}`;
         field.append(document.createTextNode(`${label} `));
-        amounts[label] = document.createElement('strong');
-        field.append(amounts[label]);
+        amounts[key] = document.createElement('strong');
+        field.append(amounts[key]);
         root.append(field);
       }
-      // Background calls (auto-mode reviewer, titles) that Claude Code makes outside the transcript.
-      amounts.side.parentElement.hidden = true;
       // Zeros would read as a measurement; the pane has simply not seen a turn yet.
       const wait = document.createElement('span'); wait.className = 'wait'; wait.textContent = 'waiting for first turn';
       root.append(wait);
@@ -843,7 +849,7 @@
         amounts.out.textContent = abbreviate(rolled.output);
         amounts.total.textContent = abbreviate(rolled.cache_read + rolled.cache_write +
           rolled.fresh_input + rolled.output);
-        amounts.cost.textContent = `$${meter.cost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+        amounts.cost.textContent = dollars(meter.cost);
         if (Object.keys(rolled).some((key) => rolled[key] !== meter.targets[key])) settled = false;
       }
       if (settled) lastFrame = 0;
@@ -852,15 +858,15 @@
     const showMeter = (snapshot) => {
       const meter = meters[snapshot.side] ||= buildMeter(snapshot.side);
       const { totals } = snapshot;
+      const main = snapshot.main || totals;
       meter.role.textContent = snapshot.label || snapshot.role;
       meter.name.textContent = (snapshot.model || 'waiting').split('/').pop();
-      meter.targets = { cache_read: totals.cache_read, cache_write: totals.cache_write,
-        fresh_input: totals.fresh_input, output: totals.output };
+      meter.targets = { cache_read: main.cache_read, cache_write: main.cache_write,
+        fresh_input: main.fresh_input, output: main.output };
       meter.cost = totals.cost;
       const side = snapshot.side_calls;
-      const sideField = meter.amounts.side.parentElement;
-      sideField.hidden = !side?.count;
-      if (side?.count) meter.amounts.side.textContent = `${side.count} · $${side.cost.toFixed(2)}`;
+      meter.amounts.main.textContent = dollars(main.cost);
+      meter.amounts.side.textContent = dollars(side?.cost || 0);
       meter.root.classList.add('has-data');
       meter.root.classList.toggle('waiting', !totals.total);
       if (!frameRequest) frameRequest = requestAnimationFrame(paintMeters);
@@ -869,8 +875,10 @@
       const native = meterSnapshots.left?.totals;
       const penny = meterSnapshots.right?.totals;
       if (!native || !penny) return;
+      const nativeMain = meterSnapshots.left.main || native;
+      const pennyMain = meterSnapshots.right.main || penny;
       const cost = native.cost ? (native.cost - penny.cost) / native.cost * 100 : 0;
-      const tokens = native.total ? (native.total - penny.total) / native.total * 100 : 0;
+      const tokens = nativeMain.total ? (nativeMain.total - pennyMain.total) / nativeMain.total * 100 : 0;
       $('delta').textContent =
         `${cost > 0 ? '-' : '+'}${Math.abs(cost).toFixed(0)}% cost  ${tokens > 0 ? '-' : '+'}${Math.abs(tokens).toFixed(0)}% tok`;
     };
@@ -962,13 +970,9 @@
       }
     }
     const sideOf = (role) => (paneRoles.left === role ? 'left' : 'right');
-    const publishBlocker = () => {
-      if (!gallery) return 'Publishing needs a native pane and a Penny pane on the same harness.';
-      if (!snapshot[sideOf('NATIVE')].length || !snapshot[sideOf('PENNY')].length) {
-        return 'Publishing needs an HTML page in each pane.';
-      }
-      return '';
-    };
+    // Pages are optional: a comparison can be shared with just its numbers and a screenshot.
+    const publishBlocker = () =>
+      gallery ? '' : 'Publishing needs a native pane and a Penny pane on the same harness.';
     const prepareGallery = (message) => {
       lastReport = message;
       gallery = message.gallery || null;
@@ -993,7 +997,22 @@
     const pagePolicy = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; " +
       "font-src data:; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'";
     const sandboxed = (html) => `<meta http-equiv="Content-Security-Policy" content="${pagePolicy}"><meta name="referrer" content="no-referrer">${html}`;
-    const chosen = (role) => snapshot[sideOf(role)][Number($(role === 'NATIVE' ? 'publish-native' : 'publish-penny').value) || 0];
+    // The page chosen for a side, or undefined when "No page" is selected.
+    const chosen = (role) => {
+      const value = $(role === 'NATIVE' ? 'publish-native' : 'publish-penny').value;
+      return value === '' ? undefined : snapshot[sideOf(role)][Number(value)];
+    };
+    // The featured page must be one that is shared; fall back to the other page, then to none.
+    const syncFeatured = () => {
+      const available = { penny: Boolean(chosen('PENNY')), native: Boolean(chosen('NATIVE')) };
+      for (const radio of document.querySelectorAll('input[name="publish-cover"]')) {
+        radio.disabled = radio.value !== 'none' && !available[radio.value];
+      }
+      if (document.querySelector('input[name="publish-cover"]:checked').disabled) {
+        const next = available.penny ? 'penny' : available.native ? 'native' : 'none';
+        document.querySelector(`input[name="publish-cover"][value="${next}"]`).checked = true;
+      }
+    };
     const checkedValue = (name) => document.querySelector(`input[name="${name}"]:checked`).value;
     const savingsText = (savings) => {
       if (!savings) return '';
@@ -1037,8 +1056,11 @@
       $('preview-savings').classList.toggle('loss', Boolean(savings && savings.cost < 0));
       const model = (meterSnapshots[sideOf('PENNY')]?.model || '').split('/').pop();
       $('preview-meta').textContent = [model, $('publish-name').value.trim()].filter(Boolean).join(' · ');
-      const cover = chosen(checkedValue('publish-cover') === 'native' ? 'NATIVE' : 'PENNY');
-      const key = `${checkedValue('publish-cover')}:${cover?.path}`;
+      syncFeatured();
+      const featured = checkedValue('publish-cover');
+      const cover = featured === 'none' ? undefined : chosen(featured === 'native' ? 'NATIVE' : 'PENNY');
+      $('publish-preview').hidden = !cover;
+      const key = `${featured}:${cover?.path}`;
       if (cover && key !== previewedCover) {
         previewedCover = key;
         $('publish-preview').srcdoc = sandboxed(cover.content);
@@ -1048,7 +1070,9 @@
       for (const [role, id] of [['NATIVE', 'publish-native'], ['PENNY', 'publish-penny']]) {
         const select = $(id);
         if (!select.options.length) {
+          select.add(new Option('No page', ''));
           snapshot[sideOf(role)].forEach((file, index) => select.add(new Option(file.path, String(index))));
+          select.value = snapshot[sideOf(role)].length ? '0' : '';
         }
       }
       if (!$('publish-name').value) $('publish-name').value = remembered('penny-compare-display-name');
@@ -1083,6 +1107,7 @@
       if (published) return;
       const native = chosen('NATIVE');
       const penny = chosen('PENNY');
+      const featured = checkedValue('publish-cover');
       const video = $('publish-video').files[0] || null;
       const videoType = video && (video.type || (/\.webm$/i.test(video.name) ? 'video/webm' : /\.mp4$/i.test(video.name) ? 'video/mp4' : ''));
       $('publish-error').textContent = '';
@@ -1096,7 +1121,8 @@
       }
       const meta = { title: $('publish-title').value.trim(), comment: $('publish-comment').value.trim(),
         tag: checkedValue('publish-tag'), display_name: $('publish-name').value.trim(),
-        native_file: native.path, penny_file: penny.path, cover: checkedValue('publish-cover'),
+        native_file: native?.path ?? null, penny_file: penny?.path ?? null,
+        cover: featured === 'none' ? null : featured,
         video_type: video ? videoType : null };
       const submit = $('publish-submit');
       submit.disabled = true;
@@ -1106,13 +1132,13 @@
       try {
         if (hosted) {
           result = await relayToParent({ report: gallery.report, signature: gallery.signature,
-            reportNonce: gallery.reportNonce, meta, native: native.content, penny: penny.content, video,
+            reportNonce: gallery.reportNonce, meta, native: native?.content ?? null, penny: penny?.content ?? null, video,
             cover: coverImage });
         } else {
           const form = new FormData();
           form.set('meta', JSON.stringify(meta));
-          form.set('native', new Blob([native.content], { type: 'text/html' }), 'native.html');
-          form.set('penny', new Blob([penny.content], { type: 'text/html' }), 'penny.html');
+          if (native) form.set('native', new Blob([native.content], { type: 'text/html' }), 'native.html');
+          if (penny) form.set('penny', new Blob([penny.content], { type: 'text/html' }), 'penny.html');
           if (video) form.set('video', video, video.name);
           if (coverImage) form.set('cover', coverImage, 'cover');
           const response = await fetch('/gallery/submit', { method: 'POST',
@@ -1140,6 +1166,7 @@
         button.disabled = true;
         button.textContent = 'Submitted to gallery';
       }
+      $('publish').hidden = true;
     };
 
     // Messages common to both servers
@@ -1173,8 +1200,8 @@
       window.addEventListener('message', (event) => {
         if (event.origin !== config.parentOrigin || event.source !== window.parent) return;
         if (event.data?.type === 'compare-demo-start' && authenticated) {
-          const { harness, nativeKey, pennyKey, environment: chosen } = event.data;
-          send({ type: 'start', harness, nativeKey, pennyKey, environment: chosen });
+          const { harness, model, nativeKey, pennyKey, environment: chosen } = event.data;
+          send({ type: 'start', harness, model, nativeKey, pennyKey, environment: chosen });
           setStatus('Starting terminals…');
           return;
         }

package/standalone/web-demo/gallery-submit.mjs

@@ -25,7 +25,7 @@ export async function savedPennyKey() {
   }
 }
 
-/** Sends the report, the chosen pages, and an optional video; returns the new entry's id. A
+/** Sends the report, the chosen pages (each optional), and an optional video; returns the new entry's id. A
  * report signed by its demo sandbox (the subscription launcher) carries that signature. */
 export async function publishToGallery(report, form, { signature = '', reportNonce = '' } = {}) {
   const key = await savedPennyKey();
@@ -37,8 +37,7 @@ export async function publishToGallery(report, form, { signature = '', reportNon
   outgoing.set('meta', String(form.get('meta') ?? ''));
   for (const side of ['native', 'penny']) {
     const page = form.get(side);
-    if (!(page instanceof Blob)) throw new Error('Choose a native page and a Penny page.');
-    outgoing.set(side, page, `${side}.html`);
+    if (page instanceof Blob) outgoing.set(side, page, `${side}.html`);
   }
   const cover = form.get('cover');
   if (cover instanceof Blob && cover.size) outgoing.set('cover', cover, 'cover');