pennyrouter 0.3.51 → 0.3.52

package/package.json

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

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

@@ -315,9 +315,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();
@@ -458,7 +458,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; }
@@ -158,6 +165,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 +220,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="End this session and share the comparison in the PennyRouter gallery">Submit to Gallery</button>
+        <button id="send-comment" role="menuitem" disabled title="End this session and send a private note to the PennyRouter team">Send Comment</button>
+        <button id="finish" role="menuitem" disabled>Exit 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 +307,10 @@
       <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-publish" type="button" hidden>Add to gallery</button>
+        <button class="primary" id="results-close" type="button">Close tab</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">
+            Include the conversation transcript</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">
+        Include the conversation transcript</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,11 +669,14 @@
     };
     let finishing = false;
     let publishAfterFinish = false;
+    let commentAfterFinish = false;
     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(() => {});
@@ -632,6 +686,50 @@
     };
     $('finish').onclick = finishComparison;
 
+    // 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();
     const fileState = { left: { paths: null, known: null }, right: { paths: null, known: null } };
@@ -981,9 +1079,15 @@
       }
       $('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);
+        window.parent.postMessage({ type: 'compare-demo-finished' }, config.parentOrigin);
+      }
     };
     const remembered = (key, value) => {
       try {
@@ -1065,6 +1169,10 @@
       }
     };
     const openPublish = () => {
+      $('publish-include-transcript').checked = false;
+      $('publish-transcript-label').hidden = true;
+      $('publish-transcript').disabled = true;
+      $('publish-transcript').value = '';
       for (const [role, id] of [['NATIVE', 'publish-native'], ['PENNY', 'publish-penny']]) {
         const select = $(id);
         if (!select.options.length) {
@@ -1085,20 +1193,34 @@
       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 = () => {
+      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) => {
+      $('publish-transcript-label').hidden = !event.target.checked;
+      $('publish-transcript').disabled = !event.target.checked;
+    };
+    $('comment-include-transcript').onchange = (event) => {
+      $('comment-transcript-label').hidden = !event.target.checked;
+      $('comment-transcript').disabled = !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 +1229,8 @@
       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 ? $('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 +1241,14 @@
         $('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) {
+        $('publish-error').textContent = '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 +1263,14 @@
         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 (coverImage) form.set('cover', coverImage, 'cover');
           const response = await fetch('/gallery/submit', { method: 'POST',
             headers: { Authorization: `Bearer ${gallery.publishToken}` }, body: form });
@@ -1167,6 +1300,78 @@
       $('publish').hidden = true;
     };
 
+    // A private note to the team: ends the session like Submit to Gallery, then asks for the comment.
+    const openComment = () => {
+      $('comment-include-transcript').checked = false;
+      $('comment-transcript-label').hidden = true;
+      $('comment-transcript').disabled = true;
+      $('comment-transcript').value = '';
+      $('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 ? $('comment-transcript').files[0] || null : null;
+      if (includeTranscript && !transcript) {
+        $('comment-error').textContent = '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);
+          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 = '';
+      $('comment-include-transcript').checked = false;
+      $('comment-transcript-label').hidden = true;
+      $('comment-transcript').disabled = true;
+      $('comment-transcript').value = '';
+      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);
@@ -1216,7 +1421,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;
@@ -1350,7 +1555,6 @@
       } else {
         $('left-label').textContent = 'LEFT';
         $('right-label').textContent = 'RIGHT';
-        $('finish').textContent = 'End session';
       }
       let pending = false;
       $('local-setup').addEventListener('submit', (event) => {

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 };
+}

package/standalone/web-demo/server.mjs

@@ -9,7 +9,7 @@ import { promisify } from 'node:util';
 import { WebSocketServer } from 'ws';
 import pty from 'node-pty';
 import { ClaudeMeter, CodexMeter, galleryReport, pricingProfiles, saveReport } from './claude-meter.mjs';
-import { publishToGallery } from './gallery-submit.mjs';
+import { publishToGallery, sendFeedback } 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';
@@ -67,6 +67,10 @@ const server = createServer(async (request, response) => {
     await submitToGallery(request, response);
     return;
   }
+  if (url.pathname === '/feedback/submit') {
+    await submitFeedback(request, response);
+    return;
+  }
   const telemetryMeter = telemetryMeters.get(url.pathname);
   if (telemetryMeter && request.method === 'POST') {
     try {
@@ -136,6 +140,35 @@ async function submitToGallery(request, response) {
   }
 }
 
+async function submitFeedback(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}`]);
+  if (request.method !== 'POST' || !allowedOrigins.has(request.headers.origin)) {
+    reply(403, { error: 'Could not send the comment.' });
+    return;
+  }
+  try {
+    const chunks = [];
+    let size = 0;
+    for await (const chunk of request) {
+      size += chunk.length;
+      if (size > 11 * 1024 * 1024) { reply(413, { error: 'The submission is too large.' }); return; }
+      chunks.push(chunk);
+    }
+    const form = await new Request('http://localhost/feedback/submit', { method: 'POST',
+      headers: { 'content-type': request.headers['content-type'] || '' },
+      body: Buffer.concat(chunks), duplex: 'half' }).formData();
+    const comment = form.get('comment');
+    if (typeof comment !== 'string' || !comment.trim()) { reply(400, { error: 'Write a comment first.' }); return; }
+    const token = request.headers.authorization?.replace(/^Bearer /, '');
+    const report = publishable.get(token) ?? '';
+    reply(201, await sendFeedback(comment.trim(), report, form.get('transcript')));
+  } catch (error) {
+    reply(400, { error: error.message || 'Could not send the comment.' });
+  }
+}
+
 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}`]);