pennyrouter 0.3.51 → 0.3.53

package/package.json

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

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

@@ -105,6 +105,7 @@ export class ClaudeMeter {
     this.totals = emptyTotals();
     this.model = '';
     this.transcriptPath = null;
+    this.transcriptFiles = [];
     this.started = Date.now() / 1000;
     this.requestIds = new Set();
     this.transcriptPrints = new Map();
@@ -217,6 +218,7 @@ export class ClaudeMeter {
       }
     };
     await collect(join(transcript.slice(0, -6), 'subagents'));
+    this.transcriptFiles = paths;
     for (const path of paths) await this.readAppended(path);
     this.chargeSideCalls({ final });
     return this.snapshot();
@@ -315,9 +317,9 @@ export class ClaudeMeter {
 // Subagent threads sit beside the root and name their parent in session_meta, so the meter
 // follows that lineage (as usage.related_transcripts does) and charges each thread's deltas once.
 export class CodexMeter extends ClaudeMeter {
-  constructor(options) {
+  constructor({ codexHome = join(homedir(), '.codex'), ...options }) {
     super(options);
-    this.root = join(homedir(), '.codex', 'sessions');
+    this.root = join(codexHome, 'sessions');
     this.transcriptPath = null;
     this.threads = new Map();
     this.metas = new Map();
@@ -372,6 +374,7 @@ export class CodexMeter extends ClaudeMeter {
         added = true;
       }
     }
+    this.transcriptFiles = paths;
     for (const path of paths) await this.readRollout(path, path === root);
     return this.snapshot();
   }
@@ -458,7 +461,7 @@ export async function saveReport(left, right, reportsDir, environment) {
   const path = join(reportsDir, `compare-${new Date().toISOString().replace(/[:.]/g, '-')}.json`);
   await writeFile(path, `${JSON.stringify(report, null, 2)}\n`);
   return { path, savings, native: { calls: native.call_count, totals: native.totals },
-    penny: { calls: penny.call_count, totals: penny.totals } };
+    penny: { calls: penny.call_count, totals: penny.totals }, report };
 }
 
 // The report a gallery submission carries (apps/web/lib/gallery.ts validates it and recomputes

package/standalone/web-demo/compare.html

@@ -30,6 +30,13 @@
     .bar button:disabled { opacity: .45; cursor: default; }
     .bar .sync-on { color: var(--accent); border-color: #547a50; background: var(--accent-wash); }
     .bar .sync-off { color: #a0a0aa; border-color: #62626d; background: #292930; }
+    .menu { position: relative; }
+    .bar .menu-toggle::after { content: '▾'; margin-left: 7px; font-size: 10px; }
+    .menu-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 8; min-width: 200px; padding: 4px;
+      display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 8px;
+      background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
+    .bar .menu-list button { border: 0; border-radius: 5px; padding: 7px 10px; text-align: left; white-space: nowrap; }
+    .bar .menu-list button:hover:not(:disabled), .bar .menu-list button:focus-visible { background: var(--accent-wash); }
     #delta { color: var(--accent); }
     .pane header #delta { margin-left: auto; white-space: nowrap; }
     #versions { margin-left: auto; color: #92929c; font-size: 12px; }
@@ -102,8 +109,7 @@
     .eyebrow { display: block; margin-bottom: 10px; color: var(--accent); font-size: 10px; font-weight: 600;
       letter-spacing: 1.8px; text-transform: uppercase; }
     .card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
-    .card .lede { margin: 0 0 20px; color: var(--muted); }
-      color: #b4b4be; font-size: 12px; }
+    .card .lede { margin: 0 0 20px; color: #b4b4be; font-size: 12px; }
     .card label { display: block; margin: 14px 0 0; color: #b8b8c1; font-size: 12px; }
     .card input:not([type=checkbox]), .card select { display: block; width: 100%; min-width: 0; margin-top: 8px;
       padding: 10px 12px; border: 1px solid #3a3a44; border-radius: 8px; background: var(--field); color: #eee;
@@ -158,6 +164,7 @@
     @media (max-width: 760px) { .publish-layout { grid-template-columns: 1fr; } }
     .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
     .actions .primary { width: auto; margin: 0; }
+    .actions.split > * { flex: 1; }
     .card .secondary { padding: 11px 16px; border: 1px solid #3a3a44; border-radius: 8px; background: transparent;
       color: var(--text); font-size: 13px; }
     .publish-done { margin: 14px 0 0; color: var(--accent); }
@@ -212,9 +219,21 @@
   <div class="bar"><strong>PENNY COMPARE</strong>
     <button id="sync" class="sync-off" disabled aria-pressed="false"
       title="Type into both panes at once (Ctrl/⌘+Shift+S)">Sync off</button>
-    <button id="finish" disabled>Finish comparison</button>
+    <div class="menu">
+      <button id="run-example" class="menu-toggle" disabled aria-haspopup="menu" aria-expanded="false"
+        aria-controls="example-menu" title="Type a starter prompt into both panes">Run example</button>
+      <div class="menu-list" id="example-menu" role="menu" hidden></div>
+    </div>
+    <div class="menu">
+      <button id="end-session" class="menu-toggle" disabled aria-haspopup="menu" aria-expanded="false"
+        aria-controls="end-menu">End session</button>
+      <div class="menu-list" id="end-menu" role="menu" hidden>
+        <button id="add-to-gallery" role="menuitem" disabled title="Share the comparison in the PennyRouter gallery. The session stays open until you exit it">Submit to Gallery</button>
+        <button id="send-comment" role="menuitem" disabled title="Send a private note to the PennyRouter team. The session stays open until you exit it">Send Comment</button>
+        <button id="finish" role="menuitem" disabled title="Freeze the comparison and see its results. The session stays open until you end it">Finish Session</button>
+      </div>
+    </div>
     <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="versions"></span>
     <span id="status">Connecting…</span>
   </div>
@@ -287,7 +306,11 @@
       <div class="sides" id="results-sides"></div>
       <div class="report-path" id="results-path"></div>
       <p class="footnote" id="results-note"></p>
-      <button class="primary" id="results-publish" type="button" hidden>Add to gallery</button>
+      <div class="actions split">
+        <button class="secondary" id="results-back" type="button" hidden>Back to session</button>
+        <button class="secondary" id="results-publish" type="button" hidden>Add to gallery</button>
+        <button class="primary" id="results-close" type="button">End session</button>
+      </div>
     </div>
   </section>
 
@@ -325,6 +348,11 @@
           <p class="hint" id="publish-cover-note">Without one, a screenshot is added during review.</p>
           <label>Video (optional, MP4 or WebM, up to 100 MB)
             <input id="publish-video" type="file" accept="video/mp4,video/webm"></label>
+          <label class="check-label"><input id="publish-include-transcript" type="checkbox">
+            <span id="publish-transcript-text">Include the conversation transcript</span></label>
+          <p class="hint">PennyRouter has a zero-retention policy. The transcript is deleted when this session ends unless you choose to include it. Included transcripts are private to Gallery reviewers and can help verify Artifact links.</p>
+          <label id="publish-transcript-label" hidden>Transcript file (JSON or JSONL, up to 10 MB)
+            <input id="publish-transcript" type="file" accept=".json,.jsonl,application/json,text/plain" disabled></label>
         </div>
         <div class="preview-column">
           <span class="field-label">Preview</span>
@@ -350,6 +378,26 @@
     </form>
   </section>
 
+  <section class="overlay" id="comment" hidden>
+    <form class="card" id="comment-form">
+      <span class="eyebrow">Penny Compare</span>
+      <h2>Send a comment</h2>
+      <p class="lede">A private note to the PennyRouter team. Nothing is published, and the session's cost numbers are attached when available.</p>
+      <label>Comment
+        <textarea id="comment-text" maxlength="4000" rows="6" required placeholder="What worked, what didn't, what you'd like us to look at?"></textarea></label>
+      <label class="check-label"><input id="comment-include-transcript" type="checkbox">
+        <span id="comment-transcript-text">Include the conversation transcript</span></label>
+      <p class="hint">PennyRouter has a zero-retention policy. The transcript is deleted when this session ends unless you choose to include it. Included transcripts are sent privately to the PennyRouter team.</p>
+      <label id="comment-transcript-label" hidden>Transcript file (JSON or JSONL, up to 10 MB)
+        <input id="comment-transcript" type="file" accept=".json,.jsonl,application/json,text/plain" disabled></label>
+      <p class="error" id="comment-error" role="alert"></p>
+      <p class="publish-done" id="comment-done" role="status"></p>
+      <div class="actions">
+        <button class="secondary" id="comment-cancel" type="button">Cancel</button>
+        <button class="primary" id="comment-submit">Send comment</button>
+      </div>
+    </form>
+  </section>
   <script src="/xterm.js"></script><script src="/addon-fit.js"></script>
   <script src="/addon-unicode11.js"></script>
   <script src="/terminal-unicode.js"></script>
@@ -611,6 +659,9 @@
       $('sync').disabled = false;
       $('finish').disabled = false;
       $('add-to-gallery').disabled = false;
+      $('send-comment').disabled = false;
+      $('end-session').disabled = false;
+      $('run-example').disabled = false;
       setStatus('Live');
       resize();
       terminals.left.focus();
@@ -618,19 +669,88 @@
     };
     let finishing = false;
     let publishAfterFinish = false;
+    let commentAfterFinish = false;
+    let resultsAfterFinish = false;
+    let sessionEnded = false;
+    // Finishing freezes the comparison and produces its report; the session itself stays open, so a
+    // Gallery submission or comment can still read its transcripts, until it is exited.
     const finishComparison = async () => {
       if (finishing || lastReport || !started) return;
       finishing = true;
-      $('finish').disabled = true;
       $('add-to-gallery').disabled = true;
+      $('send-comment').disabled = true;
+      $('run-example').disabled = true;
       setStatus('Saving files…');
       clearInterval(fileTimer);
       await pollFiles().catch(() => {});
       await snapshotFiles();
-      send({ type: 'exit' });
+      send({ type: 'finish' });
       setStatus(hosted ? 'Finishing…' : 'Saving report…');
     };
-    $('finish').onclick = finishComparison;
+    // Shows the results while the session stays open, so Add to gallery and Send Comment can still
+    // read its transcripts. The panes are already stopped, so Back to session only shows them frozen.
+    const showResults = () => {
+      if (!lastReport) { resultsAfterFinish = true; return finishComparison(); }
+      $('publish').hidden = true;
+      $('comment').hidden = true;
+      showReport(lastReport);
+    };
+    // Ends the session for good: stops the server side (a hosted sandbox is destroyed).
+    const endSession = () => {
+      if (sessionEnded) return;
+      sessionEnded = true;
+      send({ type: 'exit' });
+      if (hosted) window.parent.postMessage({ type: 'compare-demo-finished' }, config.parentOrigin);
+    };
+    $('finish').onclick = showResults;
+    $('results-back').onclick = () => {
+      $('results').hidden = true;
+      setStatus(sessionEnded ? 'Session ended' : 'Finished · session still open');
+    };
+
+    // Starter prompts typed into both panes, exactly as a visitor would type them.
+    const examples = [
+      { label: 'Game of Life (tests)', prompt: 'Using only Node built-ins (no installs): put Game of Life rules in life.mjs on a wrapping grid, write life.test.mjs with node:test covering a blinker, a block, a glider after 4 steps and edge wrapping, run node --test and fix until everything passes, then create life.html as a single self-contained page using the same engine code, with play, pause, step, randomize, a speed slider and click-to-toggle cells.' },
+      { label: 'Sales dashboard (data)', prompt: 'Using only Node built-ins (no installs): write gen.mjs that writes sales.csv with 5000 orders from a seeded random generator (date, store, product, qty, unit_price) across 4 coffee shops over 12 months of 2025, run it, then write analyze.mjs that prints monthly revenue per store, the top 5 products by revenue and the busiest weekday, run it and check the store totals add up to the overall total, then build dashboard.html, a single file with those results embedded and drawn as inline SVG charts.' },
+      { label: 'Maze solver (verify)', prompt: 'Using only Node built-ins (no installs): write maze.mjs with a seeded recursive-backtracker maze generator and a BFS solver, write check.mjs that generates 25x25 mazes for seeds 1 to 50 and verifies every cell is reachable and each solution path only moves through open walls, run it and fix anything that fails, then create maze.html, a single self-contained page that animates the maze being carved and then solved, with a seed box and a new-maze button.' },
+      { label: 'Penalty kick (quick)', prompt: 'Create football-penalty.html: a single-file page with a playable penalty-kick game. Click to aim, a goalkeeper dives, and a score is kept.' },
+    ];
+    const runExample = (prompt) => {
+      for (const side of sides) {
+        send({ type: 'take-control', side });
+        send({ type: 'input', side, data: prompt });
+      }
+      // Sent after the text so the agent's prompt reads it as typing followed by Enter, not a paste.
+      setTimeout(() => { for (const side of sides) send({ type: 'input', side, data: '\r' }); }, 250);
+      terminals.left.focus();
+    };
+    for (const example of examples) {
+      const item = document.createElement('button');
+      item.type = 'button';
+      item.setAttribute('role', 'menuitem');
+      item.textContent = example.label;
+      item.title = example.prompt;
+      item.onclick = () => runExample(example.prompt);
+      $('example-menu').append(item);
+    }
+    const menus = [['run-example', 'example-menu'], ['end-session', 'end-menu']];
+    const closeMenus = (except) => {
+      for (const [toggle, list] of menus) {
+        if (toggle === except) continue;
+        $(list).hidden = true;
+        $(toggle).setAttribute('aria-expanded', 'false');
+      }
+    };
+    for (const [toggle, list] of menus) {
+      $(toggle).onclick = (event) => {
+        event.stopPropagation();
+        closeMenus(toggle);
+        $(list).hidden = !$(list).hidden;
+        $(toggle).setAttribute('aria-expanded', String(!$(list).hidden));
+      };
+    }
+    document.addEventListener('click', () => closeMenus());
+    document.addEventListener('keydown', (event) => { if (event.key === 'Escape') closeMenus(); });
 
     // Files the agents write, previewed in a separate tab
     const previewTabs = new Map();
@@ -899,9 +1019,12 @@
         `${side.totals.total.toLocaleString()} tokens · $${side.totals.cost.toFixed(3)}`;
       $('results-sides').textContent = `${line('NATIVE', native)}\n${line('PENNY', penny)}`;
       $('results-path').textContent = path ? `Report saved: ${path}` : '';
-      $('results-note').textContent = hosted
-        ? 'Your session has ended. Close this page to destroy its sandbox.'
-        : 'Comparison complete. You can close this tab.';
+      $('results-note').textContent = sessionEnded
+        ? (hosted ? 'Your session has ended. Close this page to destroy its sandbox.'
+          : 'Comparison complete. You can close this tab.')
+        : 'Your session is still open. Add it to the gallery if you like, then end the session.';
+      $('results-back').hidden = sessionEnded;
+      $('results-close').textContent = sessionEnded ? 'Close tab' : 'End session';
       $('results').hidden = false;
       setStatus(path ? 'Report saved' : 'Finished');
     };
@@ -981,9 +1104,14 @@
       }
       $('results-publish').hidden = false;
       if (blocker) $('results-publish').textContent = blocker;
+      $('send-comment').disabled = false;
       if (publishAfterFinish && !blocker) openPublish();
+      if (commentAfterFinish) openComment();
       publishAfterFinish = false;
-      if (hosted) window.parent.postMessage({ type: 'compare-demo-finished' }, config.parentOrigin);
+      commentAfterFinish = false;
+      if (hosted) {
+        window.parent.postMessage({ type: 'compare-demo-report', report: message.report }, config.parentOrigin);
+      }
     };
     const remembered = (key, value) => {
       try {
@@ -1064,7 +1192,43 @@
         $('publish-preview').srcdoc = sandboxed(cover.content);
       }
     };
+    // The sessions' transcripts never need uploading by hand: a local server bundles them when the
+    // form is submitted, and a hosted sandbox sends them with its report before it is destroyed.
+    // The file picker remains only for a comparison that produced none.
+    const autoTranscript = () => gallery?.transcriptBytes > 0;
+    const transcriptTooLarge = () => autoTranscript() && gallery.transcriptBytes > 10 * 1024 * 1024;
+    // What a submission sends for the "include transcripts" box: a hosted run asks its sandbox for the
+    // bundle (it is still up), a local run asks its server to attach one when the form is posted.
+    let transcriptRequest = null;
+    const sessionTranscript = () => {
+      if (!hosted) return Promise.resolve(null);
+      return new Promise((resolve) => {
+        const timer = setTimeout(() => { transcriptRequest = null; resolve(null); }, 30_000);
+        transcriptRequest = (text) => {
+          clearTimeout(timer);
+          transcriptRequest = null;
+          resolve(text ? new File([text], 'transcripts.jsonl', { type: 'application/x-ndjson' }) : null);
+        };
+        send({ type: 'transcripts' });
+      });
+    };
+    const resetTranscript = (prefix) => {
+      const box = $(`${prefix}-include-transcript`);
+      box.checked = false;
+      box.disabled = transcriptTooLarge();
+      $(`${prefix}-transcript-label`).hidden = true;
+      $(`${prefix}-transcript`).disabled = true;
+      $(`${prefix}-transcript`).value = '';
+      $(`${prefix}-transcript-text`).textContent = transcriptTooLarge()
+        ? 'Transcripts are over 10 MB and cannot be included'
+        : autoTranscript() ? 'Include both session transcripts' : 'Include the conversation transcript';
+    };
+    const toggleTranscript = (prefix, checked) => {
+      $(`${prefix}-transcript-label`).hidden = !checked || autoTranscript();
+      $(`${prefix}-transcript`).disabled = !checked || autoTranscript();
+    };
     const openPublish = () => {
+      resetTranscript('publish');
       for (const [role, id] of [['NATIVE', 'publish-native'], ['PENNY', 'publish-penny']]) {
         const select = $(id);
         if (!select.options.length) {
@@ -1085,20 +1249,29 @@
       return finishComparison();
     };
     $('results-publish').onclick = openPublish;
+    // A tab the user opened themselves cannot be closed by a page, so say so when it stays open.
+    $('results-close').onclick = () => {
+      endSession();
+      if (hosted) window.parent.postMessage({ type: 'compare-demo-close' }, config.parentOrigin);
+      else window.close();
+      setTimeout(() => { $('results-note').textContent = 'Your browser could not automatically close tab. Please close manually.'; }, 400);
+    };
     $('publish-cancel').onclick = () => { $('publish').hidden = true; };
     $('publish-form').addEventListener('input', updatePreview);
     $('publish-form').addEventListener('change', updatePreview);
-    const relayToParent = (payload) => new Promise((resolve) => {
+    $('publish-include-transcript').onchange = (event) => toggleTranscript('publish', event.target.checked);
+    $('comment-include-transcript').onchange = (event) => toggleTranscript('comment', event.target.checked);
+    const relayToParent = (payload, kind = 'gallery') => new Promise((resolve) => {
       const timer = setTimeout(() => { removeEventListener('message', onResult); resolve({ error: 'The website did not respond. Please try again.' }); }, 10 * 60_000);
       const onResult = (event) => {
         if (event.origin !== config.parentOrigin || event.source !== window.parent ||
-            event.data?.type !== 'compare-gallery-result') return;
+            event.data?.type !== `compare-${kind}-result`) return;
         clearTimeout(timer);
         removeEventListener('message', onResult);
         resolve(event.data);
       };
       addEventListener('message', onResult);
-      window.parent.postMessage({ type: 'compare-gallery-submit', ...payload }, config.parentOrigin);
+      window.parent.postMessage({ type: `compare-${kind}-submit`, ...payload }, config.parentOrigin);
     });
     $('publish-form').onsubmit = async (event) => {
       event.preventDefault();
@@ -1107,6 +1280,9 @@
       const penny = chosen('PENNY');
       const featured = checkedValue('publish-cover');
       const video = $('publish-video').files[0] || null;
+      const includeTranscript = $('publish-include-transcript').checked;
+      const transcript = includeTranscript
+        ? (autoTranscript() ? await sessionTranscript() : $('publish-transcript').files[0] || null) : null;
       const videoType = video && (video.type || (/\.webm$/i.test(video.name) ? 'video/webm' : /\.mp4$/i.test(video.name) ? 'video/mp4' : ''));
       $('publish-error').textContent = '';
       if (video && !['video/mp4', 'video/webm'].includes(videoType)) {
@@ -1117,6 +1293,16 @@
         $('publish-error').textContent = 'Videos can be at most 100 MB.';
         return;
       }
+      if (transcript && transcript.size > 10 * 1024 * 1024) {
+        $('publish-error').textContent = 'Transcripts can be at most 10 MB.';
+        return;
+      }
+      if (includeTranscript && !transcript && (!autoTranscript() || hosted)) {
+        $('publish-error').textContent = autoTranscript()
+          ? 'The session transcripts are no longer available. Clear the include transcripts option to submit without them.'
+          : 'Choose a transcript file or clear the include transcript selection.';
+        return;
+      }
       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 ?? null, penny_file: penny?.path ?? null,
@@ -1131,13 +1317,15 @@
         if (hosted) {
           result = await relayToParent({ report: gallery.report, signature: gallery.signature,
             reportNonce: gallery.reportNonce, meta, native: native?.content ?? null, penny: penny?.content ?? null, video,
-            cover: coverImage });
+            cover: coverImage, transcript });
         } else {
           const form = new FormData();
           form.set('meta', JSON.stringify(meta));
           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 (transcript) form.set('transcript', transcript, transcript.name);
+          if (includeTranscript && autoTranscript() && !hosted) form.set('include_transcript', '1');
           if (coverImage) form.set('cover', coverImage, 'cover');
           const response = await fetch('/gallery/submit', { method: 'POST',
             headers: { Authorization: `Bearer ${gallery.publishToken}` }, body: form });
@@ -1167,6 +1355,76 @@
       $('publish').hidden = true;
     };
 
+    // A private note to the team: ends the session like Submit to Gallery, then asks for the comment.
+    const openComment = () => {
+      resetTranscript('comment');
+      $('comment-done').textContent = '';
+      $('comment-error').textContent = '';
+      $('comment-submit').disabled = false;
+      $('comment-submit').textContent = 'Send comment';
+      $('comment-cancel').textContent = 'Cancel';
+      $('comment').hidden = false;
+      $('comment-text').focus();
+    };
+    $('send-comment').onclick = () => {
+      if (lastReport) return openComment();
+      commentAfterFinish = true;
+      return finishComparison();
+    };
+    $('comment-cancel').onclick = () => { $('comment').hidden = true; };
+    $('comment-form').onsubmit = async (event) => {
+      event.preventDefault();
+      const comment = $('comment-text').value.trim();
+      if (!comment) return;
+      const includeTranscript = $('comment-include-transcript').checked;
+      const transcript = includeTranscript
+        ? (autoTranscript() ? await sessionTranscript() : $('comment-transcript').files[0] || null) : null;
+      if (includeTranscript && !transcript && (!autoTranscript() || hosted)) {
+        $('comment-error').textContent = autoTranscript()
+          ? 'The session transcripts are no longer available. Clear the include transcripts option to send without them.'
+          : 'Choose a transcript file or clear the include transcript selection.';
+        return;
+      }
+      if (transcript && transcript.size > 10 * 1024 * 1024) {
+        $('comment-error').textContent = 'Transcripts can be at most 10 MB.';
+        return;
+      }
+      const submit = $('comment-submit');
+      submit.disabled = true;
+      submit.classList.add('busy');
+      submit.textContent = 'Sending…';
+      $('comment-error').textContent = '';
+      let result;
+      try {
+        if (hosted) {
+          result = await relayToParent({ comment, report: gallery?.report ?? '', transcript }, 'feedback');
+        } else {
+          const form = new FormData();
+          form.set('comment', comment);
+          if (transcript) form.set('transcript', transcript, transcript.name);
+          if (includeTranscript && autoTranscript() && !hosted) form.set('include_transcript', '1');
+          const response = await fetch('/feedback/submit', { method: 'POST',
+            headers: { ...(gallery?.publishToken ? { Authorization: `Bearer ${gallery.publishToken}` } : {}) }, body: form });
+          result = await response.json().catch(() => ({ error: 'Could not send the comment.' }));
+          if (!response.ok && !result.error) result.error = 'Could not send the comment.';
+        }
+      } catch {
+        result = { error: 'Could not send the comment.' };
+      }
+      submit.classList.remove('busy');
+      if (result.error) {
+        $('comment-error').textContent = result.error;
+        submit.disabled = false;
+        submit.textContent = 'Send comment';
+        return;
+      }
+      $('comment-text').value = '';
+      resetTranscript('comment');
+      submit.textContent = 'Sent';
+      $('comment-done').textContent = 'Sent to the PennyRouter team. Thank you.';
+      $('comment-cancel').textContent = 'Close';
+    };
+
     // Messages common to both servers
     const handleMessage = (message) => {
       if (message.type === 'output') terminals[message.side]?.write(message.data);
@@ -1176,12 +1434,16 @@
         updateDelta();
       } else if (message.type === 'exit' || message.type === 'pane-exit') {
         terminals[message.side]?.write(`\r\n[process exited: ${message.code}]\r\n`);
+      } else if (message.type === 'transcripts') {
+        transcriptRequest?.(message.transcript);
       } else if (message.type === 'report') {
-        showReport(message);
         prepareGallery(message);
+        if (resultsAfterFinish) { resultsAfterFinish = false; showResults(); }
+        else setStatus('Finished · session still open');
       }
       else if (message.type === 'report-error') {
         publishAfterFinish = false;
+        sessionEnded = true;
         showReportError(message.error);
       }
       else return false;
@@ -1216,7 +1478,7 @@
             $('download-logs').hidden = !message.captureLogs;
             if (message.subscription) {
               setStatus('Starting subscription test · costs are API-equivalent estimates');
-              send({ type: 'start', harness: message.subscriptionHarness || 'claude' });
+              send({ type: 'start', harness: message.subscriptionHarness || 'claude', model: message.subscriptionModel || '' });
               return;
             }
             authenticated = true;
@@ -1239,6 +1501,14 @@
           $('finish').disabled = true;
           if (!lastReport) $('add-to-gallery').disabled = true;
           if (!$('results').hidden) return;
+          if (lastReport && !sessionEnded) {
+            // The sandbox ended on its own after the report; a form being filled in stays open.
+            sessionEnded = true;
+            if ($('publish').hidden && $('comment').hidden) showReport(lastReport);
+            else setStatus('Session ended');
+            toParent({ type: 'compare-demo-finished' });
+            return;
+          }
           setStatus('Session ended');
           toParent({ type: 'compare-demo-ended', error: launchError });
         });
@@ -1350,7 +1620,6 @@
       } else {
         $('left-label').textContent = 'LEFT';
         $('right-label').textContent = 'RIGHT';
-        $('finish').textContent = 'End session';
       }
       let pending = false;
       $('local-setup').addEventListener('submit', (event) => {
@@ -1417,7 +1686,7 @@
         if (!lastReport) $('add-to-gallery').disabled = true;
         if (!$('finish').disabled) {
           $('finish').disabled = true;
-          setStatus('Disconnected · reload to reconnect');
+          if (!sessionEnded) setStatus('Disconnected · reload to reconnect');
         }
       });
     }

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

@@ -39,6 +39,11 @@ export async function publishToGallery(report, form, { signature = '', reportNon
     const page = form.get(side);
     if (page instanceof Blob) outgoing.set(side, page, `${side}.html`);
   }
+  const transcript = form.get('transcript');
+  if (transcript instanceof Blob && transcript.size) {
+    if (transcript.size > 10 * 1024 * 1024) throw new Error('Transcripts can be at most 10 MB.');
+    outgoing.set('transcript', transcript, transcript.name || 'transcript.json');
+  }
   const cover = form.get('cover');
   if (cover instanceof Blob && cover.size) outgoing.set('cover', cover, 'cover');
   const response = await fetch(`${appUrl}/api/gallery/submissions`, {
@@ -67,3 +72,22 @@ export async function publishToGallery(report, form, { signature = '', reportNon
     return { id: body.id, videoError: 'Your submission was saved, but its video could not be uploaded.' };
   }
 }
+
+/** Sends a private comment to the PennyRouter team, with the session's report when there is one. */
+export async function sendFeedback(comment, report = '', transcript = null) {
+  const key = await savedPennyKey();
+  if (!key) throw new Error('Connect PennyRouter first: run `npx pennyrouter install`, then try again.');
+  const form = new FormData();
+  form.set('comment', comment);
+  form.set('report', report);
+  if (transcript instanceof Blob && transcript.size) {
+    if (transcript.size > 10 * 1024 * 1024) throw new Error('Transcripts can be at most 10 MB.');
+    form.set('transcript', transcript, transcript.name || 'transcript.json');
+  }
+  const response = await fetch(`${appUrl}/api/compare-feedback`, {
+    method: 'POST', headers: { authorization: `Bearer ${key}` }, body: form, signal: AbortSignal.timeout(60_000),
+  });
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(body.error || `The comment was not accepted (${response.status}).`);
+  return { ok: true };
+}