pennyrouter 0.3.43 → 0.3.45

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

@@ -0,0 +1,70 @@
+import { readFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+// Publishes a finished local comparison to the PennyRouter gallery for review. The CLI's saved
+// Penny key authenticates the upload server to server, so it never reaches the browser.
+
+export const appUrl = (process.env.PENNYROUTER_APP_URL || 'https://pennyrouter.com').replace(/\/+$/, '');
+export const maxVideoBytes = 100 * 1024 * 1024;
+
+// Mirrors pennyConfigPath() and activePennyProfile() in packages/pennyrouter-cli/src/launch.js.
+function configPath() {
+  if (process.platform === 'win32') {
+    return join(process.env.APPDATA || process.env.LOCALAPPDATA || homedir(), 'PennyRouter', 'config.json');
+  }
+  return join(process.env.XDG_CONFIG_HOME || join(homedir(), '.config'), 'pennyrouter', 'config.json');
+}
+
+export async function savedPennyKey() {
+  try {
+    const config = JSON.parse(await readFile(configPath(), 'utf8'));
+    return config.profiles?.[config.active_profile || 'cloud']?.api_key || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Sends the report, the chosen pages, 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();
+  if (!key) throw new Error('Connect PennyRouter first: run `npx pennyrouter install`, then try again.');
+  const outgoing = new FormData();
+  outgoing.set('report', report);
+  outgoing.set('signature', signature);
+  outgoing.set('report_nonce', reportNonce);
+  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`);
+  }
+  const cover = form.get('cover');
+  if (cover instanceof Blob && cover.size) outgoing.set('cover', cover, 'cover');
+  const response = await fetch(`${appUrl}/api/gallery/submissions`, {
+    method: 'POST', headers: { authorization: `Bearer ${key}` }, body: outgoing,
+    signal: AbortSignal.timeout(60_000),
+  });
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(body.error || `The gallery did not accept the submission (${response.status}).`);
+
+  const video = form.get('video');
+  if (!body.videoUpload || !(video instanceof Blob) || !video.size) return { id: body.id };
+  try {
+    if (video.size > maxVideoBytes) throw new Error('too large');
+    const upload = await fetch(body.videoUpload.signedUrl, {
+      method: 'PUT', headers: { 'content-type': body.videoType }, body: video,
+      signal: AbortSignal.timeout(10 * 60_000),
+    });
+    if (!upload.ok) throw new Error(`upload ${upload.status}`);
+    const confirm = await fetch(`${appUrl}/api/gallery/submissions/${body.id}/video`, {
+      method: 'POST', headers: { authorization: `Bearer ${key}`, 'content-type': 'application/json' },
+      body: JSON.stringify({ video_type: body.videoType }), signal: AbortSignal.timeout(30_000),
+    });
+    if (!confirm.ok) throw new Error(`confirm ${confirm.status}`);
+    return { id: body.id };
+  } catch {
+    return { id: body.id, videoError: 'Your submission was saved, but its video could not be uploaded.' };
+  }
+}

package/standalone/web-demo/pane-options.mjs

@@ -0,0 +1,58 @@
+// Options a pane can carry beyond its harness, shown under its picker in the local setup card.
+// Each option names the pane variants it applies to, the choices it offers, and how a choice
+// reaches the harness. The setup page renders its controls from describePaneOptions().
+
+const cacheTtl = {
+  id: 'cacheTtl',
+  label: 'Cache TTL',
+  variants: ['penny-claude'],
+  default: '5m',
+  choices: [
+    { value: '5m', label: '5 minutes (default)', summary: '5-minute cache' },
+    { value: '1h', label: '1 hour', summary: '1-hour cache' },
+  ],
+  hint: 'How long the conversation cache lives. The shared prefix is always 1 hour, and a session’s ' +
+    'cold first write stays at 5 minutes.',
+  // Claude Code chooses the lifetime of its own cache breakpoints; PennyRouter passes a client's
+  // 1-hour request through once the session's cache is warm.
+  apply(env, value) {
+    delete env.ENABLE_PROMPT_CACHING_1H;
+    delete env.FORCE_PROMPT_CACHING_5M;
+    env[value === '1h' ? 'ENABLE_PROMPT_CACHING_1H' : 'FORCE_PROMPT_CACHING_5M'] = '1';
+  },
+};
+
+export const paneOptions = [cacheTtl];
+
+const supportedBy = (variant) => paneOptions.filter((option) => option.variants.includes(variant));
+
+/** A pane's options validated for its variant, with defaults filled in. */
+export function normalizePaneOptions(variant, raw) {
+  const given = raw && typeof raw === 'object' && !Array.isArray(raw) ? raw : {};
+  const supported = supportedBy(variant);
+  for (const id of Object.keys(given)) {
+    if (!supported.some((option) => option.id === id)) {
+      throw new Error('Invalid compare settings. That option does not apply to this pane.');
+    }
+  }
+  const options = {};
+  for (const option of supported) {
+    const value = given[option.id] ?? option.default;
+    if (!option.choices.some((choice) => choice.value === value)) {
+      throw new Error(`Invalid compare settings. Choose a listed ${option.label}.`);
+    }
+    options[option.id] = value;
+  }
+  return options;
+}
+
+/** Sets the environment a pane's harness reads for its chosen options. */
+export function applyPaneOptions(env, variant, options) {
+  for (const option of supportedBy(variant)) option.apply(env, options?.[option.id] ?? option.default);
+}
+
+/** The JSON-safe description the setup page renders its controls from. */
+export function describePaneOptions() {
+  return paneOptions.map(({ id, label, variants, default: initial, choices, hint }) =>
+    ({ id, label, variants, default: initial, choices, hint }));
+}

package/standalone/web-demo/server.mjs

@@ -1,15 +1,19 @@
 import { createServer } from 'node:http';
 import { randomUUID } from 'node:crypto';
-import { mkdtemp, readFile, rm, stat, writeFile } from 'node:fs/promises';
-import { spawn, execFile } from 'node:child_process';
+import { mkdir, readFile, stat } from 'node:fs/promises';
+import { execFile } from 'node:child_process';
 import { join, dirname, resolve } from 'node:path';
-import { homedir, tmpdir } from 'node:os';
+import { homedir } from 'node:os';
 import { fileURLToPath } from 'node:url';
 import { promisify } from 'node:util';
 import { WebSocketServer } from 'ws';
 import pty from 'node-pty';
-import { ClaudeMeter, CodexMeter, saveReport } from './claude-meter.mjs';
+import { ClaudeMeter, CodexMeter, galleryReport, pricingProfiles, saveReport } from './claude-meter.mjs';
+import { publishToGallery } from './gallery-submit.mjs';
+import { applyPaneOptions, describePaneOptions, normalizePaneOptions } from './pane-options.mjs';
 import { listArtifacts, readArtifact } from './artifacts.mjs';
+import { readTelemetry, telemetryEnv, telemetryRoute } from './telemetry.mjs';
+import { Readable } from 'node:stream';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const compareDir = dirname(here);
@@ -18,16 +22,14 @@ const args = process.argv.slice(2);
 const claude = args.includes('--claude');
 const harnessArg = args.find((arg) => /^--harness=(claude|codex)$/.test(arg));
 const startupHarness = harnessArg?.slice('--harness='.length) || 'claude';
-const nodeMeter = args.includes('--compare-node') ||
-  (args.includes('--compare') && process.platform === 'win32');
-const compare = args.includes('--compare') || nodeMeter;
-const pythonCompare = compare && !nodeMeter && process.platform !== 'win32';
+// --compare-node is the earlier name for --compare, kept so existing commands still work.
+const compare = args.includes('--compare') || args.includes('--compare-node');
 const portArg = args.find((arg) => /^--port=\d+$/.test(arg));
 const port = Number(portArg?.slice(7) ?? 8789);
 if (args.some((arg) => !['--claude', '--compare', '--compare-node', '--harness=claude', '--harness=codex', portArg].includes(arg)) ||
     (claude && compare) || (harnessArg && !compare) ||
     (args.includes('--harness=claude') && args.includes('--harness=codex')) || port < 1 || port > 65535) {
-  console.error('Usage: npm start -- [--claude | --compare [--harness=claude|codex] | --compare-node [--harness=claude|codex]] [--port=8789]');
+  console.error('Usage: npm start -- [--claude | --compare [--harness=claude|codex]] [--port=8789]');
   process.exit(1);
 }
 
@@ -35,15 +37,46 @@ const files = new Map([
   ['/demo-artifact-preview', ['artifact-preview.html', 'text/html; charset=utf-8']],
   ['/terminal-unicode.js', ['terminal-unicode.js', 'text/javascript; charset=utf-8']],
   ['/addon-unicode11.js', ['node_modules/@xterm/addon-unicode11/lib/addon-unicode11.js', 'text/javascript; charset=utf-8']],
-  ['/', ['terminal-preview.html', 'text/html; charset=utf-8']],
+  ['/', ['compare.html', 'text/html; charset=utf-8']],
   ['/xterm.css', ['node_modules/@xterm/xterm/css/xterm.css', 'text/css; charset=utf-8']],
   ['/xterm.js', ['node_modules/@xterm/xterm/lib/xterm.js', 'text/javascript; charset=utf-8']],
   ['/addon-fit.js', ['node_modules/@xterm/addon-fit/lib/addon-fit.js', 'text/javascript; charset=utf-8']],
 ]);
 const artifactSessions = new Map();
+const telemetryMeters = new Map();
+// Finished comparisons that may still be published, by one-time publish token.
+const publishable = new Map();
+const publishWindowMs = 60 * 60_000;
+// `npm start` runs from this package's folder; INIT_CWD is where it was invoked.
+const launchDirectory = process.env.INIT_CWD || process.cwd();
+
+// Shown in the page header, as the hosted demo shows its checkpoint's versions.
+async function harnessVersion(command) {
+  try {
+    const { stdout } = await execFileAsync(command, ['--version'],
+      { timeout: 5000, shell: process.platform === 'win32', windowsHide: true });
+    return stdout.match(/\d+\.\d+\.\d+/)?.[0] || null;
+  } catch { return null; }
+}
+const harnessVersions = Promise.all([harnessVersion('claude'), harnessVersion('codex')])
+  .then(([claudeVersion, codexVersion]) => ({ claude: claudeVersion, codex: codexVersion }));
 
 const server = createServer(async (request, response) => {
   const url = new URL(request.url, 'http://localhost');
+  if (url.pathname === '/gallery/submit') {
+    await submitToGallery(request, response);
+    return;
+  }
+  const telemetryMeter = telemetryMeters.get(url.pathname);
+  if (telemetryMeter && request.method === 'POST') {
+    try {
+      telemetryMeter.ingestTelemetry(await readTelemetry(request));
+      response.writeHead(200, { 'Content-Type': 'application/json' }).end('{}');
+    } catch {
+      response.writeHead(400).end();
+    }
+    return;
+  }
   if (['/artifacts', '/artifact'].includes(url.pathname)) {
     const roots = artifactSessions.get(request.headers.authorization?.replace(/^Bearer /, ''));
     const root = roots?.get(url.searchParams.get('side'));
@@ -64,10 +97,11 @@ const server = createServer(async (request, response) => {
   try {
   let body = await readFile(join(here, file[0]));
   if (request.url === '/') {
+    const config = { mode: 'local', compare, defaultHarness: startupHarness, paneOptions: describePaneOptions(),
+      folders: { left: join(launchDirectory, 'native'), right: join(launchDirectory, 'penny') },
+      versions: await harnessVersions };
     body = body.toString('utf8')
-      .replace('__PENNY_CWD__', JSON.stringify(process.cwd()).replaceAll('<', '\\u003c'))
-      .replace('__PENNY_COMPARE__', JSON.stringify(compare))
-      .replace('__PENNY_DEFAULT_HARNESS__', JSON.stringify(startupHarness));
+      .replace('__COMPARE_CONFIG__', JSON.stringify(config).replaceAll('<', '\\u003c'));
   }
     response.writeHead(200, { 'Content-Type': file[1], 'Cache-Control': 'no-store' }).end(body);
   } catch (error) {
@@ -76,6 +110,32 @@ const server = createServer(async (request, response) => {
   }
 });
 
+async function submitToGallery(request, response) {
+  const reply = (status, body) => response.writeHead(status, { 'Content-Type': 'application/json',
+    'Cache-Control': 'no-store' }).end(JSON.stringify(body));
+  const allowedOrigins = new Set([`http://127.0.0.1:${port}`, `http://localhost:${port}`]);
+  const token = request.headers.authorization?.replace(/^Bearer /, '');
+  const report = publishable.get(token);
+  if (request.method !== 'POST' || !allowedOrigins.has(request.headers.origin) || !report) {
+    reply(403, { error: 'This comparison can no longer be published. Finish a new one to publish it.' });
+    return;
+  }
+  if (Number(request.headers['content-length'] || 0) > 120 * 1024 * 1024) {
+    reply(413, { error: 'The submission is too large.' });
+    return;
+  }
+  try {
+    const form = await new Request('http://localhost/gallery/submit', { method: 'POST',
+      headers: { 'content-type': request.headers['content-type'] || '' },
+      body: Readable.toWeb(request), duplex: 'half' }).formData();
+    const result = await publishToGallery(report, form);
+    publishable.delete(token);
+    reply(201, result);
+  } catch (error) {
+    reply(400, { error: error.message || 'Could not publish to the gallery.' });
+  }
+}
+
 const wss = new WebSocketServer({ noServer: true, maxPayload: 64 * 1024 });
 server.on('upgrade', (request, socket, head) => {
   const allowedOrigins = new Set([`http://127.0.0.1:${port}`, `http://localhost:${port}`]);
@@ -87,7 +147,26 @@ server.on('upgrade', (request, socket, head) => {
   wss.handleUpgrade(request, socket, head, (ws) => wss.emit('connection', ws));
 });
 
+// Launched from inside a Claude Code session (an integrated terminal or a `!` command), this
+// process inherits that session's identity. A pane that keeps it attaches to the parent
+// session and writes no transcript of its own, which leaves its meter empty.
+const inheritedSessionKeys = /^(CLAUDECODE|CLAUDE_PID|CLAUDE_EFFORT|CLAUDE_CODE_(SESSION_ID|CHILD_SESSION|SESSION_ATTENDED|BRIDGE_SESSION_ID|MESSAGING_SOCKET|MESSAGING_TOKEN|ENTRYPOINT|EXECPATH))$/;
+function paneEnvironment() {
+  return Object.fromEntries(Object.entries(process.env).filter(([key]) => !inheritedSessionKeys.test(key)));
+}
+
 const variants = new Set(['claude', 'penny-claude', 'codex', 'penny-codex']);
+const providers = ['native', 'bedrock', 'foundry', 'vertex'];
+const proxies = ['none', 'litellm', 'bifrost', 'kong', 'portkey', 'other'];
+
+// Pricing changes how both panes are costed. Provider and proxy are recorded with the report.
+function validateEnvironment(environment = {}) {
+  const { pricing = 'standard', provider = 'native', proxy = 'none' } = environment;
+  if (!pricingProfiles.includes(pricing) || !providers.includes(provider) || !proxies.includes(proxy)) {
+    throw new Error('Invalid environment. Choose a listed pricing schedule, provider, and proxy.');
+  }
+  return { pricing, provider, proxy };
+}
 const safeModel = /^[A-Za-z0-9._/-]{1,160}$/;
 
 async function validateConfig(config) {
@@ -101,22 +180,32 @@ async function validateConfig(config) {
         !claudeModels.includes(config.model) && !config.model.startsWith('claude-'))) {
     throw new Error('Invalid compare settings. Choose Claude or Codex, a directory, and a valid model name.');
   }
-  const expanded = config.cwd.startsWith('~/') ? join(homedir(), config.cwd.slice(2)) : config.cwd;
+  const expanded = /^~[\\/]/.test(config.cwd) ? join(homedir(), config.cwd.slice(2)) : config.cwd;
   const cwd = resolve(expanded);
-  if (!(await stat(cwd)).isDirectory()) throw new Error(`Directory does not exist: ${cwd}`);
-  return { ...config, cwd };
+  const existing = await stat(cwd).catch(() => null);
+  if (existing && !existing.isDirectory()) throw new Error(`Not a folder: ${cwd}`);
+  if (!existing && !(await stat(dirname(cwd)).catch(() => null))?.isDirectory()) {
+    throw new Error(`Folder does not exist: ${dirname(cwd)}`);
+  }
+  return { ...config, cwd, create: !existing, options: normalizePaneOptions(config.variant, config.options) };
 }
 
-function launchCommand(side, state, sessionId, config) {
-  if (pythonCompare) {
-    const args = [join(compareDir, 'pane.py'), config.variant, '--side', side,
-      '--cwd', config.cwd, '--pricing-profile', 'standard'];
-    if (config.model) args.push('--model', config.model);
-    if (config.label) args.push('--label', config.label);
-    if (side === 'right') args.push('--delta-file', join(state, 'delta.txt'));
-    return ['python3', args];
+// Each pane needs its own folder: agents running side by side in one folder would edit the
+// same files and read each other's work. A missing last folder is created; its parent must exist.
+async function preparePaneFolders(left, right) {
+  if (left.cwd === right.cwd) {
+    throw new Error('Choose a different folder for each pane, so the two agents do not edit the same files.');
   }
-  if (nodeMeter) {
+  for (const config of [left, right]) if (config.create) await mkdir(config.cwd);
+}
+
+// A harness pane runs one program, never an interactive shell, so echo can be off from the
+// start. Otherwise terminal replies (focus reports, device attributes) that arrive before the
+// harness enters raw mode are printed as text such as ^[[I.
+const quiet = 'stty -echo 2>/dev/null; ';
+
+function launchCommand(sessionId, config) {
+  if (compare) {
     const codex = config.variant.includes('codex');
     const command = config.variant.startsWith('penny-')
       ? `penny ${codex ? 'codex' : 'claude'}` : (codex ? 'codex' : 'claude');
@@ -126,14 +215,14 @@ function launchCommand(side, state, sessionId, config) {
       return [shell, ['/d', '/s', '/c', `${command}${codex ? '' : ` --session-id ${sessionId}`}${modelArg}`]];
     }
     const shell = process.env.SHELL || '/bin/sh';
-    return [shell, ['-lc', `exec ${command}${codex ? '' : ` --session-id ${sessionId}`}${modelArg}`]];
+    return [shell, ['-lc', `${quiet}exec ${command}${codex ? '' : ` --session-id ${sessionId}`}${modelArg}`]];
   }
   if (process.platform === 'win32') {
     const shell = process.env.ComSpec || 'cmd.exe';
     return claude ? [shell, ['/d', '/s', '/c', 'claude']] : [shell, []];
   }
   const shell = process.env.SHELL || '/bin/sh';
-  return claude ? [shell, ['-lc', 'exec claude']] : [shell, []];
+  return claude ? [shell, ['-lc', `${quiet}exec claude`]] : [shell, []];
 }
 
 wss.on('connection', (ws) => {
@@ -142,19 +231,14 @@ wss.on('connection', (ws) => {
   artifactSessions.set(artifactToken, artifactRoots);
   const sessions = new Map();
   const compareConfig = new Map();
+  const telemetryRoutesBySide = new Map();
+  let environment = validateEnvironment();
   const meters = new Map();
   const snapshots = new Map();
-  let state;
-  let delta;
   let meterTimer;
   let polling = false;
   let closed = false;
   let exiting = false;
-  const ready = pythonCompare ? mkdtemp(join(tmpdir(), 'penny-compare-web-')).then(async (dir) => {
-    state = dir;
-    await writeFile(join(dir, 'started'), '');
-    await writeFile(join(dir, 'delta.txt'), '');
-  }) : Promise.resolve();
   const send = (message) => {
     if (ws.readyState === ws.OPEN) ws.send(JSON.stringify(message));
   };
@@ -167,14 +251,6 @@ wss.on('connection', (ws) => {
         snapshots.set(meter.side, snapshot);
         send({ type: 'meter', data: snapshot });
       }
-      const left = snapshots.get('left');
-      const right = snapshots.get('right');
-      if (left && right) {
-        const base = left.totals;
-        const current = right.totals;
-        send({ type: 'delta', cost: base.cost ? (current.cost - base.cost) / base.cost * 100 : 0,
-          tokens: base.total ? (current.total - base.total) / base.total * 100 : 0 });
-      }
     } catch (error) {
       send({ type: 'error', side: 'left', error: `Meter: ${error.message}` });
     } finally { polling = false; }
@@ -183,13 +259,12 @@ wss.on('connection', (ws) => {
     if (closed) return;
     closed = true;
     artifactSessions.delete(artifactToken);
+    for (const route of telemetryRoutesBySide.values()) telemetryMeters.delete(route);
     for (const session of sessions.values()) {
       try { session.kill(); } catch { /* already exited */ }
     }
     sessions.clear();
     if (meterTimer) clearInterval(meterTimer);
-    if (delta) delta.kill();
-    if (state) void rm(state, { recursive: true, force: true });
   };
   const handle = async (raw) => {
     let message;
@@ -199,9 +274,11 @@ wss.on('connection', (ws) => {
         if (!compare) throw new Error('Compare setup is unavailable in shell demo mode.');
         const left = await validateConfig(message.config?.left);
         const right = await validateConfig(message.config?.right);
+        environment = validateEnvironment(message.environment);
         if (left.model && left.variant.includes('codex') !== right.variant.includes('codex')) {
           throw new Error('Choose the same model family for both panes, or leave Model set to default.');
         }
+        await preparePaneFolders(left, right);
         compareConfig.set('left', left);
         compareConfig.set('right', right);
         artifactRoots.set('left', left.cwd);
@@ -211,6 +288,7 @@ wss.on('connection', (ws) => {
       } catch (error) {
         compareConfig.clear();
         artifactRoots.clear();
+        environment = validateEnvironment();
         send({ type: 'configuration-error', error: error.message });
       }
       return;
@@ -218,21 +296,23 @@ wss.on('connection', (ws) => {
     if (message.type === 'exit') {
       if (exiting) return;
       exiting = true;
-      if (pythonCompare && state) {
-        try {
-          const { stdout } = await execFileAsync('python3', [join(compareDir, 'report.py'),
-            state, join(compareDir, 'reports'), '--json']);
-          send({ type: 'report', ...JSON.parse(stdout) });
-        } catch (error) {
-          send({ type: 'report-error', error: error.message });
-        }
-      } else if (nodeMeter) {
+      if (compare) {
         try {
+          // Telemetry is exported every second; let the last batch land before closing the books.
+          if (telemetryRoutesBySide.size) await new Promise((done) => setTimeout(done, 1500));
           await pollMeters();
+          for (const meter of meters.values()) meter.chargeSideCalls({ final: true });
           const left = meters.get('left');
           const right = meters.get('right');
           if (!left || !right) throw new Error('Both compare panes must start before a report can be saved.');
-          send({ type: 'report', ...await saveReport(left, right, join(compareDir, 'reports')) });
+          const report = galleryReport(left, right, { environment, harnessVersions: await harnessVersions });
+          const publishToken = report ? randomUUID() : null;
+          if (publishToken) {
+            publishable.set(publishToken, report);
+            setTimeout(() => publishable.delete(publishToken), publishWindowMs).unref();
+          }
+          send({ type: 'report', ...await saveReport(left, right, join(compareDir, 'reports'), environment),
+            gallery: publishToken ? { publishToken } : null });
         } catch (error) {
           send({ type: 'report-error', error: error.message });
         }
@@ -248,24 +328,33 @@ wss.on('connection', (ws) => {
       try {
         const config = compare
           ? compareConfig.get(message.side)
-          : { variant: 'claude', cwd: process.cwd(), label: '', model: '' };
+          : { variant: 'claude', cwd: launchDirectory, label: '', model: '' };
         if (!config) throw new Error('Choose and validate both compare panes before starting.');
-        await ready;
         if (closed) return;
-        if (pythonCompare && !delta) {
-          delta = spawn('python3', [join(compareDir, 'delta.py'), state, join(state, 'delta.txt')],
-            { stdio: 'ignore' });
-          delta.on('error', (error) => send({ type: 'error', side: 'right', error: error.message }));
+        const sessionId = compare && !config.variant.includes('codex') ? randomUUID() : undefined;
+        const [command, commandArgs] = launchCommand(sessionId, config);
+        let meter;
+        if (compare) {
+          const Meter = config.variant.includes('codex') ? CodexMeter : ClaudeMeter;
+          const role = config.variant.startsWith('penny-') ? 'PENNY' : 'NATIVE';
+          meter = new Meter({ sessionId, cwd: config.cwd, side: message.side, role,
+            label: config.label, variant: config.variant, pricingProfile: environment.pricing,
+            options: config.options });
         }
-        const sessionId = nodeMeter && !config.variant.includes('codex') ? randomUUID() : undefined;
-        const [command, commandArgs] = launchCommand(message.side, state, sessionId, config);
-        const env = { ...process.env, TERM: 'xterm-256color',
-          ...(pythonCompare ? { PENNY_COMPARE_STATE: state } : {}) };
+        // Claude panes report background model calls to this server; see telemetry.mjs.
+        const route = meter instanceof CodexMeter || !meter ? null : telemetryRoute();
+        if (route) {
+          telemetryMeters.set(route, meter);
+          telemetryRoutesBySide.set(message.side, route);
+        }
+        const env = { ...paneEnvironment(), TERM: 'xterm-256color',
+          ...(route ? telemetryEnv(`http://127.0.0.1:${port}`, route) : {}) };
         if (compare && message.side === 'left') {
           for (const key of ['ANTHROPIC_BASE_URL', 'ANTHROPIC_AUTH_TOKEN', 'ANTHROPIC_API_KEY']) {
             delete env[key];
           }
         }
+        applyPaneOptions(env, config.variant, config.options);
         const session = pty.spawn(command, commandArgs, {
           name: 'xterm-256color', cols: message.cols, rows: message.rows,
           cwd: config.cwd, env,
@@ -273,12 +362,8 @@ wss.on('connection', (ws) => {
         sessions.set(message.side, session);
         artifactRoots.set(message.side, config.cwd);
         if (!compare) send({ type: 'artifact-session', token: artifactToken });
-        if (nodeMeter) {
-          const Meter = config.variant.includes('codex') ? CodexMeter : ClaudeMeter;
-          const role = config.variant.startsWith('penny-') ? 'PENNY' : 'NATIVE';
-          meters.set(message.side, new Meter({ sessionId, cwd: config.cwd,
-            side: message.side, role, label: config.label, variant: config.variant }));
-          send({ type: 'meter-mode' });
+        if (meter) {
+          meters.set(message.side, meter);
           if (!meterTimer) meterTimer = setInterval(() => { void pollMeters(); }, 1000);
         }
         session.onData((data) => send({ type: 'output', side: message.side, data }));
@@ -305,16 +390,14 @@ server.listen(port, '127.0.0.1', () => {
   const url = `http://127.0.0.1:${port}`;
   console.log(`Penny Compare live terminal demo: ${url}`);
   console.log(compare
-    ? `Compare setup ready (${pythonCompare ? 'Python session metering' : 'Node transcript metering'}). Choose both panes in the browser.`
+    ? 'Compare setup ready. Choose both panes in the browser.'
     : claude ? 'Each pane starts Claude Code.' : 'Each pane starts a shell. Type claude to run Claude Code.');
-  if (process.platform === 'win32') {
-    execFile(process.env.ComSpec || 'cmd.exe', ['/d', '/s', '/c', `start "" "${url}"`],
-      { windowsHide: true }, (error) => {
-        if (error) console.error(`Could not open the browser automatically: ${error.message}`);
-      });
-  } else {
-    execFile(process.platform === 'darwin' ? 'open' : 'xdg-open', [url], (error) => {
-      if (error) console.error(`Could not open the browser automatically: ${error.message}`);
-    });
-  }
+  // Windows hands the URL to the default browser without cmd, whose quoting rules
+  // mangle `start "" "<url>"` once Node quotes it as a single argument.
+  const [opener, openerArgs] = process.platform === 'win32'
+    ? ['rundll32.exe', ['url.dll,FileProtocolHandler', url]]
+    : [process.platform === 'darwin' ? 'open' : 'xdg-open', [url]];
+  execFile(opener, openerArgs, { windowsHide: true }, (error) => {
+    if (error) console.error(`Could not open the browser automatically: ${error.message}`);
+  });
 });

package/standalone/web-demo/telemetry.mjs

@@ -0,0 +1,71 @@
+import { randomBytes } from 'node:crypto';
+
+// Claude Code reports every model request it makes as an OpenTelemetry `api_request` log
+// event, including background calls (such as the auto-mode reviewer) that never reach the
+// session transcript. Each pane exports those events only to its own path on the Compare
+// server; nothing is sent anywhere else, and prompts stay redacted (Claude Code's default).
+
+export const maxTelemetryBytes = 1024 * 1024;
+
+// One unguessable path per pane, so a request identifies its pane and outsiders cannot post.
+export function telemetryRoute() {
+  return `/otlp/${randomBytes(24).toString('base64url')}/v1/logs`;
+}
+
+export function telemetryEnv(origin, route) {
+  return {
+    CLAUDE_CODE_ENABLE_TELEMETRY: '1',
+    OTEL_LOGS_EXPORTER: 'otlp',
+    OTEL_METRICS_EXPORTER: 'none',
+    OTEL_EXPORTER_OTLP_LOGS_PROTOCOL: 'http/json',
+    OTEL_EXPORTER_OTLP_LOGS_ENDPOINT: `${origin}${route}`,
+    OTEL_LOGS_EXPORT_INTERVAL: '1000',
+  };
+}
+
+const value = (attribute) => {
+  const raw = attribute?.value || {};
+  return raw.stringValue ?? raw.intValue ?? raw.doubleValue ?? raw.boolValue;
+};
+const count = (raw) => Math.max(0, Math.floor(Number(raw) || 0));
+
+// The api_request events in one OTLP/HTTP JSON logs export.
+export function apiRequests(body) {
+  const requests = [];
+  for (const resource of body?.resourceLogs || []) {
+    for (const scope of resource?.scopeLogs || []) {
+      for (const record of scope?.logRecords || []) {
+        const attributes = Object.fromEntries((record?.attributes || []).map((item) => [item?.key, value(item)]));
+        if (attributes['event.name'] !== 'api_request') continue;
+        // Responses relayed by a gateway can lack Anthropic's request id; the meter then
+        // matches the event to the transcript by its usage instead (see claude-meter.mjs).
+        const requestId = attributes.request_id ? String(attributes.request_id) : null;
+        const key = requestId || `sequence:${attributes['event.sequence'] ?? ''}:${attributes['event.timestamp'] ?? ''}`;
+        requests.push({
+          key,
+          requestId,
+          model: String(attributes.model || ''),
+          querySource: String(attributes.query_source || ''),
+          timestamp: attributes['event.timestamp'] || null,
+          fresh_input: count(attributes.input_tokens),
+          output: count(attributes.output_tokens),
+          cache_read: count(attributes.cache_read_tokens),
+          cache_write: count(attributes.cache_creation_tokens),
+        });
+      }
+    }
+  }
+  return requests;
+}
+
+// Reads an OTLP/HTTP JSON export from a request, bounded by maxTelemetryBytes.
+export async function readTelemetry(request) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of request) {
+    size += chunk.length;
+    if (size > maxTelemetryBytes) throw new Error('Telemetry export too large');
+    chunks.push(chunk);
+  }
+  return apiRequests(JSON.parse(Buffer.concat(chunks).toString('utf8')));
+}