pennyrouter 0.3.37 → 0.3.39

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