pennyrouter 0.3.37 → 0.3.38

package/README.md

@@ -87,12 +87,12 @@ of `npx pennyrouter install`; to install or refresh it separately, run:
 npx pennyrouter compare
 ```
 
-On macOS/Linux, the installer puts `penny-compare` and `penny-session` on PATH alongside `penny`.
-These commands require `tmux`, Python 3.10+, and the harnesses being compared. On Windows,
-`penny-compare` starts a local browser terminal with native Claude and `penny claude` side by
-side. Its live token and cost readouts use Claude transcripts, with no tmux or Python install.
-Open the local URL printed by the command. Sync is Ctrl+Shift+S; Exit and save report is
-Ctrl+Shift+X. The Windows path currently supports Claude Code comparisons.
+Run `penny compare` on macOS, Linux, or Windows to open the browser-based setup. It mirrors the
+classic launcher's Claude/Codex pane, directory, label, and model choices. The browser version
+uses Python session metering on macOS/Linux and Node transcript metering on Windows, so it does
+not need tmux. The classic terminal interface remains available as `penny-compare` on macOS/Linux
+and requires tmux and Python 3.10+. Sync is Ctrl+Shift+S; Exit saves the report and shows the
+final summary.
 
 On macOS and Linux, a normal install adds a small `penny` launcher under `~/.local/bin`.
 On Windows it installs `penny.cmd` under `%LOCALAPPDATA%\\PennyRouter\\bin` and adds that

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pennyrouter",
-  "version": "0.3.37",
+  "version": "0.3.38",
   "description": "Install and manage PennyRouter local coding-agent integrations.",
   "homepage": "https://pennyrouter.com",
   "bugs": {

package/src/cli.js

@@ -138,9 +138,8 @@ export async function main(argv = process.argv.slice(2)) {
       throw new Error("Penny Compare requires macOS, Linux, or Windows.");
     }
     console.log(`Penny Compare installed at ${result.path}`);
-    console.log(process.platform === "win32"
-      ? "Run `penny-compare`, then open the local URL it prints."
-      : "Run `penny-compare` or `penny-session` to use it.");
+    console.log("Run `penny compare` to open the browser-based comparison setup.");
+    if (process.platform !== "win32") console.log("Run `penny-compare` for the classic tmux interface.");
     return;
   }
 
@@ -1010,9 +1009,9 @@ export async function install(flags = {}) {
     }
   }
   if (runtimeResult && !runtimeResult.available) {
-    console.log("Add the PennyRouter launcher directory to PATH before using the `penny` command.");
+    console.log(color(color("Add the PennyRouter launcher directory to PATH before using the `penny` command.", "bold"), "yellow"));
   } else if (runtimeResult?.changed) {
-    console.log("Open a new terminal (or reload your shell) before using the `penny` command.");
+    console.log(color(color("Open a new terminal (or reload your shell) before using the `penny` command.", "bold"), "yellow"));
   }
 
   // Registered after routing, which is the primary job: a naming conflict here reports itself
@@ -1460,9 +1459,9 @@ async function update(flags) {
 
   console.log("");
   if (runtimeResult && !runtimeResult.available) {
-    console.log("Add the PennyRouter launcher directory to PATH before using the `penny` command.");
+    console.log(color(color("Add the PennyRouter launcher directory to PATH before using the `penny` command.", "bold"), "yellow"));
   } else if (runtimeResult?.changed) {
-    console.log("Open a new terminal (or reload your shell) before using the `penny` command.");
+    console.log(color(color("Open a new terminal (or reload your shell) before using the `penny` command.", "bold"), "yellow"));
   }
   console.log("Restart any running Claude Code or Codex sessions to pick up the update.");
   reportFailures(failures);
@@ -2391,6 +2390,7 @@ function color(text, style) {
     bold: ["\x1b[1m", "\x1b[22m"],
     cyan: ["\x1b[36m", "\x1b[39m"],
     green: ["\x1b[32m", "\x1b[39m"],
+    yellow: ["\x1b[33m", "\x1b[39m"],
   };
   const pair = codes[style];
   return pair ? `${pair[0]}${text}${pair[1]}` : text;

package/src/launch.js

@@ -314,13 +314,13 @@ export async function installPennyCompare() {
   }
   await mkdir(join(destination, "reports"), { recursive: true, mode: 0o700 });
   await mkdir(pennyBinDir(), { recursive: true, mode: 0o755 });
+  const modules = join(destination, "web-demo", "node_modules");
+  for (const name of ["@xterm/addon-fit", "@xterm/xterm", "node-pty", "ws"]) {
+    const target = join(modules, name);
+    await mkdir(dirname(target), { recursive: true });
+    await cp(await findInstalledPackage(name), target, { recursive: true });
+  }
   if (process.platform === "win32") {
-    const modules = join(destination, "web-demo", "node_modules");
-    for (const name of ["@xterm/addon-fit", "@xterm/xterm", "node-pty", "ws"]) {
-      const target = join(modules, name);
-      await mkdir(dirname(target), { recursive: true });
-      await cp(await findInstalledPackage(name), target, { recursive: true });
-    }
     const link = join(pennyBinDir(), "penny-compare.cmd");
     const marker = "@REM PennyRouter-managed compare launcher";
     let previous = "";
@@ -1501,16 +1501,36 @@ export async function runPennyClaudeStats(args, profile) {
   return result.code ?? 1;
 }
 
+/** Launch the separately installed Penny Compare app from the `penny` command. */
+async function runPennyCompare(args) {
+  const compareDir = pennyCompareDir();
+  const executable = join(compareDir, "web-demo", "server.mjs");
+  try {
+    await stat(executable);
+  } catch {
+    throw new Error("Penny Compare is not installed. Run `npx pennyrouter compare` first.");
+  }
+  const child = spawn(process.execPath, [executable, "--compare", ...args], {
+    cwd: process.cwd(), env: process.env, stdio: "inherit",
+  });
+  const result = await waitForChild(child);
+  if (result.signal) return 128 + (osConstants.signals[result.signal] || 0);
+  return result.code ?? 1;
+}
+
 export async function runPenny(argv = process.argv.slice(2)) {
   const harness = argv[0];
   if (!harness || harness === "help" || harness === "--help" || harness === "-h") {
-    console.log("Usage: penny <claude|codex|opencode> [--penny-profile <name>] [native arguments...]");
+    console.log("Usage: penny <claude|codex|opencode|compare> [arguments...]");
+    console.log("       penny compare launches Penny Compare; install it with `npx pennyrouter compare`.");
+    console.log("       penny <claude|codex|opencode> [--penny-profile <name>] [native arguments...]");
     console.log("       --private / --cloud select the like-named profile.");
     console.log("       penny claude --stats adds the live single-session token readout.");
     return 0;
   }
+  if (harness === "compare") return runPennyCompare(argv.slice(1));
   if (!["claude", "codex", "opencode"].includes(harness)) {
-    throw new Error(`Unknown harness "${harness}". Try penny claude, penny codex, or penny opencode.`);
+    throw new Error(`Unknown Penny command "${harness}". Try penny claude, penny codex, penny opencode, or penny compare.`);
   }
   const statsSelection = extractStatsArgs(argv.slice(1));
   if (statsSelection.stats && harness !== "claude") {

package/standalone/penny-compare

@@ -62,9 +62,11 @@ label_right=""
 wire=""
 wire_both=""
 wire_https=""
+pricing_profile=""
 while [ $# -gt 0 ]; do
   case "$1" in
     --model) model="$2"; shift 2 ;;
+    --pricing-profile) pricing_profile="$2"; shift 2 ;;
     --dir-left) dir_left="$2"; shift 2 ;;
     --dir-right) dir_right="$2"; shift 2 ;;
     --native-proxy) native_proxy="--native-proxy"; shift ;;
@@ -175,6 +177,17 @@ else
   fi
 fi
 
+# Pricing is an estimate-only display setting, so choose it explicitly instead of silently
+# coupling it to the native transport proxy. This also keeps direct (two-argument) launches
+# consistent with menu launches.
+if [ -z "$pricing_profile" ]; then
+  pricing_profile="$(choose 'pricing profile' standard standard govcloud)"
+fi
+case "$pricing_profile" in
+  standard|govcloud) ;;
+  *) echo "unknown pricing profile: $pricing_profile (try standard or govcloud)" >&2; exit 1 ;;
+esac
+
 # A directory that does not exist would otherwise surface as a confusing tmux failure.
 for candidate in "$dir_left" "$dir_right"; do
   if [ -n "$candidate" ] && [ ! -d "${candidate/#\~/$HOME}" ]; then
@@ -243,9 +256,7 @@ workdir_right_arg=" --cwd $(printf '%q' "$workdir_right")"
 # a penny-* pane already owns its own proxy routing and ignores the flag either way.
 native_proxy_left=""
 native_proxy_right=""
-pricing_profile="standard"
 if [ -n "$native_proxy" ]; then
-  pricing_profile="govcloud"
   case "$left" in claude|codex) native_proxy_left="$native_proxy" ;; esac
   case "$right" in claude|codex) native_proxy_right="$native_proxy" ;; esac
 fi

package/standalone/pricing.py

@@ -15,6 +15,9 @@ RATES = {
     # OpenAI does not offer a 1-hour cache tier; its write rate applies uniformly.
     "gpt-5-codex":       (1.25e-06, 1.25e-07, 1.25e-06, 1.25e-06, 1.00e-05),
     "gpt-5.1-codex":     (1.25e-06, 1.25e-07, 1.25e-06, 1.25e-06, 1.00e-05),
+    # GPT-5.6 standard pricing. Keep Luna explicit so penny-session does not silently
+    # price it as Claude Sonnet when no GovCloud profile was selected.
+    "gpt-5.6-luna":      (0.20e-06, 0.020e-06, 0.250e-06, 0.250e-06, 1.20e-06),
 }
 
 # --native-proxy means the comparison is measuring the GovCloud route. Pricing remains the

package/standalone/web-demo/README.md

@@ -21,10 +21,10 @@ To run the current Penny Compare measurement code in the panes:
 npm start -- --compare
 ```
 
-This starts native Claude on the left and `penny claude` on the right. On macOS/Linux, it uses the existing Python session reader, cost model, HUD, and delta calculation. On Windows, it reads Claude transcripts and prices calls in Node, with no Python or tmux requirement. Exit saves a JSON report under `apps/compare/reports` and prints the summary in the left pane. Both platforms need Claude Code and the `penny` command on `PATH`.
+This opens a setup screen with the same Claude/Codex pane choices, directories, labels, and shared model selection as the classic launcher. The default is native Claude on the left and Penny Claude on the right, using `<current directory>/native` and `<current directory>/penny`. On macOS/Linux, it uses the existing Python session reader, cost model, HUD, and delta calculation. On Windows, it reads Claude or Codex transcripts and prices calls in Node, with no Python or tmux requirement. Exit saves a JSON report under `apps/compare/reports` and shows the final summary. The selected harness commands must be on `PATH`.
 
-The Windows path currently supports Claude Code comparisons. Codex and OpenCode transcript readers are still in the Python path.
+Use `--harness=codex` to preselect Codex in the setup screen. The pane selectors can also mix Claude and Codex; the shared model control is available when both panes use the same harness family.
 
-To exercise the Windows measurement path on macOS/Linux, use `npm start -- --compare-node`.
+To exercise the Node measurement paths on macOS/Linux, use `npm start -- --compare-node --harness=claude` for Claude or `npm start -- --compare-node --harness=codex` for Codex. Claude is the default if you omit `--harness`.
 
 The demo requires Claude Code on `PATH` for that option. Closing or reloading the page ends both sessions. The local server listens only on `127.0.0.1`; it does not start a PennyRouter gateway.

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

@@ -21,11 +21,13 @@ function emptyTotals() {
 }
 
 export class ClaudeMeter {
-  constructor({ sessionId, cwd, side, role }) {
+  constructor({ sessionId, cwd, side, role, label, variant }) {
     this.sessionId = sessionId;
     this.cwd = cwd;
     this.side = side;
     this.role = role;
+    this.label = label || role;
+    this.variant = variant;
     this.root = join(homedir(), '.claude', 'projects');
     this.files = new Map();
     this.ids = new Set();
@@ -146,16 +148,115 @@ export class ClaudeMeter {
   }
 
   snapshot() {
-    return { side: this.side, role: this.role, label: this.role, variant: this.side === 'left' ? 'claude' : 'penny-claude',
+    return { side: this.side, role: this.role, label: this.label, variant: this.variant,
       harness: 'claude-code', cwd: this.cwd, pricing_profile: 'standard', session_id: this.sessionId,
       transcript_path: this.transcriptPath, model: this.model, call_count: this.calls.length,
       totals: { ...this.totals } };
   }
 }
 
+// Codex writes cumulative token_count snapshots to dated rollout JSONL files.
+// Keep a cursor per transcript and charge each snapshot's delta once.
+export class CodexMeter extends ClaudeMeter {
+  constructor(options) {
+    super(options);
+    this.root = join(homedir(), '.codex', 'sessions');
+    this.transcriptPath = null;
+    this.previous = null;
+    this.started = Date.now() / 1000;
+  }
+
+  async findTranscript() {
+    if (this.transcriptPath) return this.transcriptPath;
+    const visit = async (directory) => {
+      let entries;
+      try { entries = await readdir(directory, { withFileTypes: true }); } catch { return []; }
+      const found = [];
+      for (const entry of entries) {
+        const path = join(directory, entry.name);
+        if (entry.isDirectory()) found.push(...await visit(path));
+        else if (entry.name.endsWith('.jsonl')) {
+          try {
+            const handle = await open(path, 'r');
+            const buffer = Buffer.alloc(4096);
+            const { bytesRead } = await handle.read(buffer, 0, buffer.length, 0);
+            await handle.close();
+            const meta = JSON.parse(buffer.subarray(0, bytesRead).toString('utf8').split('\n', 1)[0]).payload;
+            const info = await stat(path);
+            const expectedProvider = this.role === 'NATIVE' ? 'openai' : 'pennyrouter';
+            if (meta?.cwd && meta.cwd.toLowerCase() === this.cwd.toLowerCase() &&
+                meta.model_provider === expectedProvider &&
+                info.mtimeMs / 1000 >= this.started - 3) found.push([path, info.mtimeMs]);
+          } catch { /* incomplete or unrelated rollout */ }
+        }
+      }
+      return found;
+    };
+    const candidates = await visit(this.root);
+    candidates.sort((a, b) => b[1] - a[1]);
+    this.transcriptPath = candidates[0]?.[0] || null;
+    return this.transcriptPath;
+  }
+
+  async poll() {
+    const path = await this.findTranscript();
+    if (!path) return this.snapshot();
+    let size;
+    try { ({ size } = await stat(path)); } catch { return this.snapshot(); }
+    let offset = this.files.get(path) || 0;
+    if (size < offset) { offset = 0; this.previous = null; }
+    if (size === offset) return this.snapshot();
+    const handle = await open(path, 'r');
+    try {
+      const buffer = Buffer.alloc(size - offset);
+      const { bytesRead } = await handle.read(buffer, 0, buffer.length, offset);
+      const text = buffer.subarray(0, bytesRead).toString('utf8');
+      const end = text.lastIndexOf('\n');
+      if (end < 0) return this.snapshot();
+      this.files.set(path, offset + Buffer.byteLength(text.slice(0, end + 1)));
+      for (const line of text.slice(0, end).split('\n')) {
+        let obj;
+        try { obj = JSON.parse(line); } catch { continue; }
+        const payload = obj.payload;
+        if (obj.type === 'turn_context' && payload?.model) this.model = payload.model;
+        if (payload?.type !== 'token_count' || !payload.info?.total_token_usage) continue;
+        const total = payload.info.total_token_usage;
+        const fingerprint = ['input_tokens', 'cached_input_tokens', 'cache_write_input_tokens',
+          'output_tokens', 'reasoning_output_tokens'].map((key) => Number(total[key]) || 0);
+        if (this.previous && fingerprint.every((value, index) => value === this.previous[index])) continue;
+        const delta = fingerprint.map((value, index) => Math.max(0, value - (this.previous?.[index] || 0)));
+        this.previous = fingerprint;
+        const [input, cached, write, output, reasoning] = delta;
+        const fresh = Math.max(0, input - cached - write);
+        const prices = [1.25e-6, .125e-6, 1.25e-6, 1.25e-6, 10e-6];
+        const cost = fresh * prices[0] + cached * prices[1] + write * prices[2] +
+          (output - reasoning) * prices[4] + reasoning * prices[4];
+        const call = { timestamp: obj.timestamp || null, recorded_at: Date.now() / 1000,
+          model: this.model, cache_read: cached, cache_write: write, write_5m: write,
+          write_1h: 0, fresh_input: fresh, output, reasoning_output: reasoning,
+          total: input + output, cost, context_tokens: input, pricing_profile: 'standard',
+          rates_per_million: { input: 1.25, cache_read: .125, cache_write_5m: 1.25,
+            cache_write_1h: 1.25, output: 10 } };
+        this.calls.push(call);
+        this.totals.cache_read += cached; this.totals.cache_write += write;
+        this.totals.write_5m += write; this.totals.fresh_input += fresh;
+        this.totals.output += output; this.totals.reasoning_output += reasoning;
+        this.totals.total += call.total; this.totals.cost += cost;
+      }
+    } finally { await handle.close(); }
+    return this.snapshot();
+  }
+
+  snapshot() {
+    return { ...super.snapshot(), variant: this.side === 'left' ? 'codex' : 'penny-codex',
+      harness: 'codex', transcript_path: this.transcriptPath };
+  }
+}
+
 export async function saveReport(left, right, reportsDir) {
-  const native = left.snapshot();
-  const penny = right.snapshot();
+  const sides = [left.snapshot(), right.snapshot()];
+  const native = sides.find((side) => side.role === 'NATIVE') || sides[0];
+  const penny = sides.find((side) => side.role === 'PENNY') || sides[1];
   const savings = {
     cost: native.totals.cost - penny.totals.cost,
     tokens: native.totals.total - penny.totals.total,

package/standalone/web-demo/server.mjs

@@ -1,29 +1,32 @@
 import { createServer } from 'node:http';
 import { randomUUID } from 'node:crypto';
-import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { mkdtemp, readFile, rm, stat, writeFile } from 'node:fs/promises';
 import { spawn, execFile } from 'node:child_process';
-import { join, dirname } from 'node:path';
-import { tmpdir } from 'node:os';
+import { join, dirname, resolve } from 'node:path';
+import { homedir, tmpdir } from 'node:os';
 import { fileURLToPath } from 'node:url';
 import { promisify } from 'node:util';
 import { WebSocketServer } from 'ws';
 import pty from 'node-pty';
-import { ClaudeMeter, saveReport } from './claude-meter.mjs';
+import { ClaudeMeter, CodexMeter, saveReport } from './claude-meter.mjs';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const compareDir = dirname(here);
 const execFileAsync = promisify(execFile);
 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';
 const portArg = args.find((arg) => /^--port=\d+$/.test(arg));
 const port = Number(portArg?.slice(7) ?? 8789);
-if (args.some((arg) => !['--claude', '--compare', '--compare-node', portArg].includes(arg)) ||
-    (claude && compare) || port < 1 || port > 65535) {
-  console.error('Usage: npm start -- [--claude | --compare | --compare-node] [--port=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]');
   process.exit(1);
 }
 
@@ -38,7 +41,13 @@ const server = createServer(async (request, response) => {
   const file = files.get(request.url);
   if (!file) { response.writeHead(404).end(); return; }
   try {
-    const body = await readFile(join(here, file[0]));
+  let body = await readFile(join(here, file[0]));
+  if (request.url === '/') {
+    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));
+  }
     response.writeHead(200, { 'Content-Type': file[1], 'Cache-Control': 'no-store' }).end(body);
   } catch (error) {
     console.error(error);
@@ -57,22 +66,46 @@ server.on('upgrade', (request, socket, head) => {
   wss.handleUpgrade(request, socket, head, (ws) => wss.emit('connection', ws));
 });
 
-function launchCommand(side, state, sessionId) {
+const variants = new Set(['claude', 'penny-claude', 'codex', 'penny-codex']);
+const safeModel = /^[A-Za-z0-9._/-]{1,160}$/;
+
+async function validateConfig(config) {
+  const codexModels = ['gpt-5.6-sol', 'gpt-5.6-terra', 'gpt-5.6-luna', 'gpt-5.5', 'gpt-5.4', 'gpt-5.4-mini'];
+  const claudeModels = ['opus', 'sonnet', 'haiku', 'fable'];
+  if (!config || !variants.has(config.variant) || typeof config.cwd !== 'string' ||
+      config.cwd.length > 4096 || typeof config.label !== 'string' || config.label.length > 80 ||
+      typeof config.model !== 'string' || (config.model && !safeModel.test(config.model)) ||
+      (config.model && config.variant.includes('codex') && !codexModels.includes(config.model)) ||
+      (config.model && !config.variant.includes('codex') &&
+        !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 cwd = resolve(expanded);
+  if (!(await stat(cwd)).isDirectory()) throw new Error(`Directory does not exist: ${cwd}`);
+  return { ...config, cwd };
+}
+
+function launchCommand(side, state, sessionId, config) {
   if (pythonCompare) {
-    const variant = side === 'left' ? 'claude' : 'penny-claude';
-    const args = [join(compareDir, 'pane.py'), variant, '--side', side,
-      '--cwd', process.cwd(), '--pricing-profile', 'standard'];
+    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];
   }
   if (nodeMeter) {
+    const codex = config.variant.includes('codex');
+    const command = config.variant.startsWith('penny-')
+      ? `penny ${codex ? 'codex' : 'claude'}` : (codex ? 'codex' : 'claude');
+    const modelArg = config.model ? ` --model ${config.model}` : '';
     if (process.platform === 'win32') {
       const shell = process.env.ComSpec || 'cmd.exe';
-      return [shell, ['/d', '/s', '/c', side === 'left'
-        ? `claude --session-id ${sessionId}` : `penny claude --session-id ${sessionId}`]];
+      return [shell, ['/d', '/s', '/c', `${command}${codex ? '' : ` --session-id ${sessionId}`}${modelArg}`]];
     }
     const shell = process.env.SHELL || '/bin/sh';
-    return [shell, ['-lc', `exec ${side === 'left' ? 'claude' : 'penny claude'} --session-id ${sessionId}`]];
+    return [shell, ['-lc', `exec ${command}${codex ? '' : ` --session-id ${sessionId}`}${modelArg}`]];
   }
   if (process.platform === 'win32') {
     const shell = process.env.ComSpec || 'cmd.exe';
@@ -84,6 +117,7 @@ function launchCommand(side, state, sessionId) {
 
 wss.on('connection', (ws) => {
   const sessions = new Map();
+  const compareConfig = new Map();
   const meters = new Map();
   const snapshots = new Map();
   let state;
@@ -135,6 +169,23 @@ wss.on('connection', (ws) => {
   const handle = async (raw) => {
     let message;
     try { message = JSON.parse(raw); } catch { return; }
+    if (message.type === 'configure') {
+      try {
+        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);
+        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.');
+        }
+        compareConfig.set('left', left);
+        compareConfig.set('right', right);
+        send({ type: 'configured' });
+      } catch (error) {
+        compareConfig.clear();
+        send({ type: 'configuration-error', error: error.message });
+      }
+      return;
+    }
     if (message.type === 'exit') {
       if (exiting) return;
       exiting = true;
@@ -166,6 +217,10 @@ wss.on('connection', (ws) => {
     if (message.type === 'start' && !sessions.has(message.side) &&
         size(message.cols, 500) && size(message.rows, 200)) {
       try {
+        const config = compare
+          ? compareConfig.get(message.side)
+          : { variant: 'claude', cwd: process.cwd(), label: '', model: '' };
+        if (!config) throw new Error('Choose and validate both compare panes before starting.');
         await ready;
         if (closed) return;
         if (pythonCompare && !delta) {
@@ -173,8 +228,8 @@ wss.on('connection', (ws) => {
             { stdio: 'ignore' });
           delta.on('error', (error) => send({ type: 'error', side: 'right', error: error.message }));
         }
-        const sessionId = nodeMeter ? randomUUID() : undefined;
-        const [command, commandArgs] = launchCommand(message.side, state, sessionId);
+        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 } : {}) };
         if (compare && message.side === 'left') {
@@ -184,12 +239,14 @@ wss.on('connection', (ws) => {
         }
         const session = pty.spawn(command, commandArgs, {
           name: 'xterm-256color', cols: message.cols, rows: message.rows,
-          cwd: process.cwd(), env,
+          cwd: config.cwd, env,
         });
         sessions.set(message.side, session);
         if (nodeMeter) {
-          meters.set(message.side, new ClaudeMeter({ sessionId, cwd: process.cwd(),
-            side: message.side, role: message.side === 'left' ? 'NATIVE' : 'PENNY' }));
+          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 (!meterTimer) meterTimer = setInterval(() => { void pollMeters(); }, 1000);
         }
@@ -216,12 +273,17 @@ wss.on('connection', (ws) => {
 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 ? 'Native Claude and Penny Claude panes with transcript HUDs.' :
-    claude ? 'Each pane starts Claude Code.' : 'Each pane starts a shell. Type claude to run Claude Code.');
+  console.log(compare
+    ? `Compare setup ready (${pythonCompare ? 'Python session metering' : 'Node transcript metering'}). 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}`);
+    });
   }
 });

package/standalone/web-demo/terminal-preview.html

@@ -21,26 +21,92 @@
     .pane { position: relative; }
     .meter { display: none; position: absolute; top: 4px; right: 13px; z-index: 2;
       width: 190px; white-space: pre; color: #9ded83; line-height: 1.15; font-size: 13px;
-      pointer-events: none; }
+      pointer-events: none; padding: 5px 8px; border-radius: 3px;
+      background: rgba(12, 12, 16, .82); }
     .pane.metered .meter { display: block; }
     .delta { display: none; position: absolute; top: 4px; right: 220px; z-index: 2;
       color: #9ded83; white-space: nowrap; pointer-events: none; }
     .pane.metered .delta { display: block; }
     .xterm { height: 100%; }
     .xterm-viewport { scrollbar-width: thin; }
+    .finish { position: fixed; inset: 25px 0 0; z-index: 5; display: grid; place-items: center;
+      padding: 24px; background: rgba(10, 10, 14, .94); }
+    .finish[hidden] { display: none; }
+    .card { width: min(680px, 100%); border: 1px solid #4d4d52; background: #17171d;
+      padding: 28px; box-shadow: 0 16px 60px #0009; }
+    .card h1 { margin: 0 0 24px; color: #9ded83; font-size: 18px; letter-spacing: .08em; }
+    .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
+    .metric { padding: 14px; background: #202027; }
+    .metric span { display: block; color: #92929c; margin-bottom: 8px; }
+    .metric strong { font-size: 20px; }
+    .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; color: #c4c4cc; white-space: pre-line; }
+    .report-path { margin-top: 24px; color: #9ded83; overflow-wrap: anywhere; }
+    .finish-note { margin-top: 20px; color: #92929c; }
+    .setup { position: fixed; inset: 25px 0 0; z-index: 4; display: grid; place-items: center;
+      overflow: auto; padding: 24px; background: rgba(10, 10, 14, .97); }
+    .setup[hidden] { display: none; }
+    .setup-card { width: min(760px, 100%); border: 1px solid #4d4d52; background: #17171d;
+      padding: 26px; }
+    .setup-card h1 { margin: 0 0 22px; color: #9ded83; font-size: 18px; }
+    .setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+    .setup-field { display: grid; gap: 7px; color: #a5a5ae; }
+    .setup-field input, .setup-field select { min-width: 0; padding: 9px; border: 1px solid #4d4d52;
+      background: #101015; color: #e5e5ea; font: inherit; }
+    .setup-model { margin-top: 16px; }
+    .setup-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
+    .setup-actions button { padding: 10px 16px; border: 1px solid #9ded83; background: #26362a;
+      color: #c8ffd0; font: inherit; cursor: pointer; }
+    .setup-actions button:disabled { opacity: .5; cursor: wait; }
+    #setup-error { color: #ff8b98; }
+    @media (max-width: 600px) { .setup-grid { grid-template-columns: 1fr; } }
     @media (max-width: 720px) { .status { justify-content: flex-start; overflow-x: auto; padding: 0 8px; } }
   </style>
 </head>
 <body>
   <div class="status">
     <button id="sync">SYNC ON  ^⇧S</button>
-    <button id="exit">EXIT  ^⇧X</button>
+    <button id="exit" disabled>EXIT  ^⇧X</button>
     <span id="connection" style="color:#77777e">connecting…</span>
   </div>
   <main class="panes">
     <section class="pane focused"><div class="meter" id="left-meter"></div><div class="terminal" id="native"></div></section>
     <section class="pane"><div class="delta" id="delta"></div><div class="meter" id="right-meter"></div><div class="terminal" id="penny"></div></section>
   </main>
+  <section class="setup" id="setup">
+    <form class="setup-card" id="setup-form">
+      <h1>PENNY COMPARE</h1>
+      <div class="setup-grid">
+        <label class="setup-field">Left pane
+          <select id="left-variant"></select>
+        </label>
+        <label class="setup-field">Right pane
+          <select id="right-variant"></select>
+        </label>
+        <label class="setup-field">Left directory
+          <input id="left-cwd" autocomplete="off" required>
+        </label>
+        <label class="setup-field">Right directory
+          <input id="right-cwd" autocomplete="off" required>
+        </label>
+        <label class="setup-field">Left label <input id="left-label" placeholder="NATIVE or PENNY"></label>
+        <label class="setup-field">Right label <input id="right-label" placeholder="NATIVE or PENNY"></label>
+      </div>
+      <label class="setup-field setup-model">Model (both panes)
+        <input id="model" list="model-options" placeholder="default">
+        <datalist id="model-options"></datalist>
+      </label>
+      <div class="setup-actions"><button id="launch" type="submit" disabled>Start comparison</button><span id="setup-error"></span></div>
+    </form>
+  </section>
+  <section class="finish" id="finish" hidden aria-live="polite">
+    <div class="card">
+      <h1 id="finish-title">PENNY COMPARISON</h1>
+      <div class="metrics" id="finish-metrics"></div>
+      <div class="sides" id="finish-sides"></div>
+      <div class="report-path" id="finish-path"></div>
+      <div class="finish-note" id="finish-note">Comparison complete. You can close this tab.</div>
+    </div>
+  </section>
   <script src="/xterm.js"></script>
   <script src="/addon-fit.js"></script>
   <script>
@@ -61,36 +127,59 @@
     native.open(document.getElementById('native'));
     penny.open(document.getElementById('penny'));
     let sync = true;
+    let pendingConfig = null;
     const panes = document.querySelectorAll('.pane');
     const send = message => { if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message)); };
-    const socket = new WebSocket(`ws://${location.host}/terminal`);
+    let socket;
     const setFocus = index => { panes.forEach((p, i) => p.classList.toggle('focused', i === index)); (index ? penny : native).focus(); };
     const setSync = value => {
       sync = value;
       document.getElementById('sync').textContent = sync ? 'SYNC ON  ^⇧S' : 'sync off  ^⇧S';
     };
     const exit = () => {
+      if (document.getElementById('exit').disabled) return;
       send({ type: 'exit' });
       document.getElementById('connection').textContent = 'saving report…';
       document.getElementById('exit').disabled = true;
     };
     function resize() {
+      if (!socket || socket.readyState !== WebSocket.OPEN) return;
       for (const [side, terminal] of [['left', native], ['right', penny]]) {
         fit[side].fit();
         send({ type: 'resize', side, cols: terminal.cols, rows: terminal.rows });
       }
     }
-    socket.addEventListener('open', () => {
+    function connect() {
+      socket = new WebSocket(`ws://${location.host}/terminal`);
+      socket.addEventListener('open', () => {
       document.getElementById('connection').textContent = 'live PTYs';
       resize();
-      for (const [side, terminal] of [['left', native], ['right', penny]]) {
-        send({ type: 'start', side, cols: terminal.cols, rows: terminal.rows });
-      }
       setFocus(0);
-    });
+      document.getElementById('launch').disabled = false;
+      if (!isCompare) {
+        document.getElementById('setup').hidden = true;
+        document.getElementById('exit').disabled = false;
+        for (const [side, terminal] of [['left', native], ['right', penny]])
+          send({ type: 'start', side, cols: terminal.cols, rows: terminal.rows });
+      }
+      });
     socket.addEventListener('message', event => {
       const message = JSON.parse(event.data);
       const terminal = message.side === 'left' ? native : penny;
+      if (message.type === 'configured' && pendingConfig) {
+        for (const [side, terminal] of [['left', native], ['right', penny]])
+          send({ type: 'start', side, cols: terminal.cols, rows: terminal.rows });
+        pendingConfig = null;
+        document.getElementById('launch').disabled = false;
+        document.getElementById('exit').disabled = false;
+        document.getElementById('setup').hidden = true;
+        resize();
+      }
+      if (message.type === 'configuration-error') {
+        pendingConfig = null;
+        document.getElementById('launch').disabled = false;
+        document.getElementById('setup-error').textContent = message.error;
+      }
       if (message.type === 'output') terminal.write(message.data);
       if (message.type === 'exit') terminal.write(`\r\n[process exited: ${message.code}]\r\n`);
       if (message.type === 'error') terminal.write(`\r\n[launch failed: ${message.error}]\r\n`);
@@ -102,7 +191,7 @@
         const data = message.data;
         const total = data.totals;
         document.getElementById(`${data.side}-meter`).textContent =
-          `${data.role}  ${(data.model || 'waiting').split('/').pop()}\n` +
+          `${data.label || data.role}  ${(data.model || 'waiting').split('/').pop()}\n` +
           `read   ${total.cache_read.toLocaleString().padStart(11)}\n` +
           `write  ${total.cache_write.toLocaleString().padStart(11)}\n` +
           `in     ${total.fresh_input.toLocaleString().padStart(11)}\n` +
@@ -119,26 +208,88 @@
         const metric = (amount, percent, unit) =>
           `${unit}${unit ? Math.abs(amount).toFixed(2) : Math.abs(amount).toLocaleString()}` +
           ` ${amount >= 0 ? 'saved' : 'extra'} (${Math.abs(percent).toFixed(1)}%)`;
-        native.write(`\r\n\x1b[1;32mPENNY COMPARISON\x1b[0m\r\n` +
-          `${metric(savings.tokens, savings.token_percent, '')} tokens\r\n` +
-          `${metric(savings.cost, savings.cost_percent, '$')}\r\n` +
-          `Report: ${message.path}\r\n`);
+        const addMetric = (label, value) => {
+          const item = document.createElement('div'); item.className = 'metric';
+          const caption = document.createElement('span'); caption.textContent = label;
+          const result = document.createElement('strong'); result.textContent = value;
+          item.append(caption, result); document.getElementById('finish-metrics').append(item);
+        };
+        addMetric('COST', metric(savings.cost, savings.cost_percent, '$'));
+        addMetric('TOKENS', `${metric(savings.tokens, savings.token_percent, '')} tokens`);
+        const sideSummary = side => `${side.calls} calls · ${side.totals.total.toLocaleString()} tokens · $${side.totals.cost.toFixed(2)}`;
+        document.getElementById('finish-sides').textContent =
+          `NATIVE  ${sideSummary(message.native)}\nPENNY   ${sideSummary(message.penny)}`;
+        document.getElementById('finish-path').textContent = `Report saved: ${message.path}`;
+        document.getElementById('finish').hidden = false;
         document.getElementById('connection').textContent = 'report saved';
       }
       if (message.type === 'report-error') {
-        native.write(`\r\n[report failed: ${message.error}]\r\n`);
+        document.getElementById('finish-title').textContent = 'REPORT COULD NOT BE SAVED';
+        document.getElementById('finish-metrics').textContent = message.error;
+        document.getElementById('finish-note').textContent = 'Comparison sessions have ended. Reload the page to start again.';
+        document.getElementById('finish').hidden = false;
         document.getElementById('connection').textContent = 'report failed';
       }
-    });
+      });
     socket.addEventListener('close', () => {
       if (!document.getElementById('exit').disabled) {
         document.getElementById('connection').textContent = 'disconnected — reload to reconnect';
       }
     });
+    }
     const resizeObserver = new ResizeObserver(resize);
     panes.forEach(pane => resizeObserver.observe(pane));
     document.getElementById('sync').onclick = () => setSync(!sync);
     document.getElementById('exit').onclick = exit;
+    const cwd = __PENNY_CWD__;
+    const isCompare = __PENNY_COMPARE__;
+    const defaultHarness = __PENNY_DEFAULT_HARNESS__;
+    const variants = ['claude', 'penny-claude', 'codex', 'penny-codex'];
+    for (const side of ['left', 'right']) {
+      const select = document.getElementById(`${side}-variant`);
+      for (const variant of variants) {
+        const option = document.createElement('option'); option.value = variant; option.textContent = variant;
+        select.append(option);
+      }
+    }
+    document.getElementById('left-variant').value = defaultHarness;
+    document.getElementById('right-variant').value = `penny-${defaultHarness}`;
+    document.getElementById('left-cwd').value = `${cwd}/native`;
+    document.getElementById('right-cwd').value = `${cwd}/penny`;
+    const refreshModels = () => {
+      const left = document.getElementById('left-variant').value;
+      const right = document.getElementById('right-variant').value;
+      const leftCodex = left.includes('codex');
+      const rightCodex = right.includes('codex');
+      const model = document.getElementById('model');
+      model.disabled = leftCodex !== rightCodex;
+      if (model.disabled) model.value = '';
+      const values = leftCodex && rightCodex
+        ? ['default', 'gpt-5.6-sol', 'gpt-5.6-terra', 'gpt-5.6-luna', 'gpt-5.5', 'gpt-5.4', 'gpt-5.4-mini']
+        : leftCodex !== rightCodex ? []
+          : ['default', 'opus', 'sonnet', 'haiku', 'fable'];
+      const list = document.getElementById('model-options'); list.replaceChildren();
+      for (const value of values) { const option = document.createElement('option'); option.value = value; list.append(option); }
+    };
+    document.getElementById('left-variant').onchange = refreshModels;
+    document.getElementById('right-variant').onchange = refreshModels;
+    refreshModels();
+    connect();
+    document.getElementById('setup-form').addEventListener('submit', event => {
+      event.preventDefault();
+      const config = {};
+      for (const side of ['left', 'right']) config[side] = {
+        variant: document.getElementById(`${side}-variant`).value,
+        cwd: document.getElementById(`${side}-cwd`).value.trim(),
+        label: document.getElementById(`${side}-label`).value.trim(),
+        model: document.getElementById('model').value.trim(),
+      };
+      if (socket.readyState !== WebSocket.OPEN) return;
+      pendingConfig = config;
+      document.getElementById('launch').disabled = true;
+      document.getElementById('setup-error').textContent = '';
+      send({ type: 'configure', config });
+    });
     document.addEventListener('keydown', event => {
       if (!event.ctrlKey || !event.shiftKey || event.altKey || event.metaKey) return;
       if (event.code === 'KeyS') { event.preventDefault(); event.stopPropagation(); setSync(!sync); }