pennyrouter 0.3.40 → 0.3.41

package/package.json

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

package/standalone/web-demo/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-unicode11": "^0.8.0",
     "@xterm/xterm": "^5.5.0",
     "node-pty": "^1.0.0",
     "ws": "^8.18.0"

package/standalone/web-demo/server.mjs

@@ -9,6 +9,7 @@ import { promisify } from 'node:util';
 import { WebSocketServer } from 'ws';
 import pty from 'node-pty';
 import { ClaudeMeter, CodexMeter, saveReport } from './claude-meter.mjs';
+import { listArtifacts, readArtifact } from './artifacts.mjs';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const compareDir = dirname(here);
@@ -31,13 +32,33 @@ if (args.some((arg) => !['--claude', '--compare', '--compare-node', '--harness=c
 }
 
 const files = new Map([
+  ['/demo-artifact-preview', ['artifact-preview.html', 'text/html; charset=utf-8']],
+  ['/terminal-unicode.js', ['terminal-unicode.js', 'text/javascript; charset=utf-8']],
+  ['/addon-unicode11.js', ['node_modules/@xterm/addon-unicode11/lib/addon-unicode11.js', 'text/javascript; charset=utf-8']],
   ['/', ['terminal-preview.html', 'text/html; charset=utf-8']],
   ['/xterm.css', ['node_modules/@xterm/xterm/css/xterm.css', 'text/css; charset=utf-8']],
   ['/xterm.js', ['node_modules/@xterm/xterm/lib/xterm.js', 'text/javascript; charset=utf-8']],
   ['/addon-fit.js', ['node_modules/@xterm/addon-fit/lib/addon-fit.js', 'text/javascript; charset=utf-8']],
 ]);
+const artifactSessions = new Map();
 
 const server = createServer(async (request, response) => {
+  const url = new URL(request.url, 'http://localhost');
+  if (['/artifacts', '/artifact'].includes(url.pathname)) {
+    const roots = artifactSessions.get(request.headers.authorization?.replace(/^Bearer /, ''));
+    const root = roots?.get(url.searchParams.get('side'));
+    if (request.method !== 'GET' || !root) { response.writeHead(403).end(); return; }
+    try {
+      const result = url.pathname === '/artifacts'
+        ? { files: await listArtifacts(root) }
+        : { content: await readArtifact(root, url.searchParams.get('path')) };
+      response.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+        .end(JSON.stringify(result));
+    } catch {
+      response.writeHead(404).end('Artifact unavailable');
+    }
+    return;
+  }
   const file = files.get(request.url);
   if (!file) { response.writeHead(404).end(); return; }
   try {
@@ -116,6 +137,9 @@ function launchCommand(side, state, sessionId, config) {
 }
 
 wss.on('connection', (ws) => {
+  const artifactToken = randomUUID();
+  const artifactRoots = new Map();
+  artifactSessions.set(artifactToken, artifactRoots);
   const sessions = new Map();
   const compareConfig = new Map();
   const meters = new Map();
@@ -158,6 +182,7 @@ wss.on('connection', (ws) => {
   const dispose = () => {
     if (closed) return;
     closed = true;
+    artifactSessions.delete(artifactToken);
     for (const session of sessions.values()) {
       try { session.kill(); } catch { /* already exited */ }
     }
@@ -179,9 +204,13 @@ wss.on('connection', (ws) => {
         }
         compareConfig.set('left', left);
         compareConfig.set('right', right);
+        artifactRoots.set('left', left.cwd);
+        artifactRoots.set('right', right.cwd);
+        send({ type: 'artifact-session', token: artifactToken });
         send({ type: 'configured' });
       } catch (error) {
         compareConfig.clear();
+        artifactRoots.clear();
         send({ type: 'configuration-error', error: error.message });
       }
       return;
@@ -242,6 +271,8 @@ wss.on('connection', (ws) => {
           cwd: config.cwd, env,
         });
         sessions.set(message.side, session);
+        artifactRoots.set(message.side, config.cwd);
+        if (!compare) send({ type: 'artifact-session', token: artifactToken });
         if (nodeMeter) {
           const Meter = config.variant.includes('codex') ? CodexMeter : ClaudeMeter;
           const role = config.variant.startsWith('penny-') ? 'PENNY' : 'NATIVE';

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

@@ -17,14 +17,24 @@
     .pane { min-width: 0; min-height: 0; overflow: hidden; background: #16161b; }
     .pane + .pane { border-left: 1px solid #4d4d52; }
     .pane.focused { box-shadow: inset 0 0 0 1px #6a6a72; }
-    .terminal { width: 100%; height: 100%; padding: 4px 7px; }
+    .pane { display: flex; flex-direction: column; }
+    .pane header { flex: none; padding: 6px 10px; background: #202027; border-bottom: 1px solid #34343c; }
+    .files { position: relative; width: fit-content; }
+    .files summary { cursor: pointer; color: #9ded83; }
+    .file-list { position: absolute; top: 100%; left: 0; z-index: 3; width: min(420px, 45vw);
+      max-height: 300px; overflow: auto; background: #202027; border: 1px solid #4d4d52; padding: 8px; }
+    .file-list p { color: #92929c; margin: 6px; }
+    .file-list button { display: block; width: 100%; text-align: left; overflow-wrap: anywhere;
+      padding: 8px; border: 0; background: none; color: #d7d7dd; font: inherit; cursor: pointer; }
+    .file-list button:hover { background: #34343c; }
+    .terminal { width: 100%; flex: 1; min-height: 0; padding: 4px 7px; }
     .pane { position: relative; }
-    .meter { display: none; position: absolute; top: 4px; right: 13px; z-index: 2;
+    .meter { display: none; position: absolute; top: 35px; right: 13px; z-index: 2;
       width: 190px; white-space: pre; color: #9ded83; line-height: 1.15; font-size: 13px;
       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;
+    .delta { display: none; position: absolute; top: 35px; right: 220px; z-index: 2;
       color: #9ded83; white-space: nowrap; pointer-events: none; }
     .pane.metered .delta { display: block; }
     .xterm { height: 100%; }
@@ -69,8 +79,8 @@
     <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>
+    <section class="pane focused"><header><details class="files"><summary id="left-files-count">Files · 0</summary><div class="file-list" id="left-files"><p>HTML files will appear here.</p></div></details></header><div class="meter" id="left-meter"></div><div class="terminal" id="native"></div></section>
+    <section class="pane"><header><details class="files"><summary id="right-files-count">Files · 0</summary><div class="file-list" id="right-files"><p>HTML files will appear here.</p></div></details></header><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">
@@ -109,11 +119,13 @@
   </section>
   <script src="/xterm.js"></script>
   <script src="/addon-fit.js"></script>
+  <script src="/addon-unicode11.js"></script>
+  <script src="/terminal-unicode.js"></script>
   <script>
     const options = {
       fontFamily: 'SFMono-Regular, Menlo, Consolas, monospace', fontSize: 13,
       lineHeight: 1.15, cursorBlink: true, cursorStyle: 'block',
-      allowTransparency: false, scrollback: 1000,
+      allowTransparency: false, scrollback: 1000, allowProposedApi: true,
       theme: { background: '#16161b', foreground: '#d7d7dd', cursor: '#d7d7dd',
         selectionBackground: '#4b5369', black: '#24242a', red: '#e88b8b',
         green: '#9ded83', yellow: '#e6c583', blue: '#8eaeeb', magenta: '#c8a7e8',
@@ -121,6 +133,8 @@
     };
     const native = new Terminal(options);
     const penny = new Terminal(options);
+    configureCompareUnicode(native, Unicode11Addon.Unicode11Addon);
+    configureCompareUnicode(penny, Unicode11Addon.Unicode11Addon);
     const fit = { left: new FitAddon.FitAddon(), right: new FitAddon.FitAddon() };
     native.loadAddon(fit.left);
     penny.loadAddon(fit.right);
@@ -131,6 +145,58 @@
     const panes = document.querySelectorAll('.pane');
     const send = message => { if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message)); };
     let socket;
+    let sessionToken;
+    let fileTimer;
+    let pollingFiles = false;
+    const previewTabs = new Map();
+    async function pollFiles() {
+      if (pollingFiles || !sessionToken) return;
+      pollingFiles = true;
+      try {
+        await Promise.all(['left', 'right'].map(async side => {
+          const list = document.getElementById(`${side}-files`);
+          try {
+            const response = await fetch(`/artifacts?side=${side}`, {
+              headers: { Authorization: `Bearer ${sessionToken}` }, cache: 'no-store',
+              signal: AbortSignal.timeout(10000),
+            });
+            if (!response.ok) throw new Error('Files unavailable');
+            const { files } = await response.json();
+            document.getElementById(`${side}-files-count`).textContent = `Files · ${files.length}`;
+            const paths = JSON.stringify(files.map(file => file.path));
+            if (list.dataset.paths === paths) return;
+            list.dataset.paths = paths;
+            list.replaceChildren();
+            if (!files.length) {
+              const hint = document.createElement('p'); hint.textContent = 'HTML files will appear here.';
+              list.append(hint);
+            }
+            for (const file of files) {
+              const button = document.createElement('button'); button.textContent = file.path;
+              button.title = 'Open preview in a new tab';
+              button.onclick = () => {
+                for (const tab of previewTabs.keys()) if (tab.closed) previewTabs.delete(tab);
+                const tab = window.open('/demo-artifact-preview', '_blank');
+                if (tab) previewTabs.set(tab, { side, path: file.path });
+                else document.getElementById('connection').textContent = 'Allow pop-ups to open file previews.';
+              };
+              list.append(button);
+            }
+          } catch {
+            delete list.dataset.paths;
+            list.replaceChildren();
+            const hint = document.createElement('p'); hint.textContent = 'Files unavailable. Retrying…';
+            list.append(hint);
+          }
+        }));
+      } finally { pollingFiles = false; }
+    }
+    window.addEventListener('message', event => {
+      if (event.origin !== location.origin || event.data?.type !== 'compare-artifact-ready') return;
+      const file = previewTabs.get(event.source);
+      if (file && sessionToken) event.source.postMessage(
+        { type: 'compare-artifact-session', ...file, token: sessionToken }, location.origin);
+    });
     const setFocus = index => { panes.forEach((p, i) => p.classList.toggle('focused', i === index)); (index ? penny : native).focus(); };
     const setSync = value => {
       sync = value;
@@ -166,6 +232,12 @@
     socket.addEventListener('message', event => {
       const message = JSON.parse(event.data);
       const terminal = message.side === 'left' ? native : penny;
+      if (message.type === 'artifact-session') {
+        sessionToken = message.token;
+        clearInterval(fileTimer);
+        void pollFiles();
+        fileTimer = setInterval(pollFiles, 3000);
+      }
       if (message.type === 'configured' && pendingConfig) {
         for (const [side, terminal] of [['left', native], ['right', penny]])
           send({ type: 'start', side, cols: terminal.cols, rows: terminal.rows });
@@ -232,6 +304,7 @@
       }
       });
     socket.addEventListener('close', () => {
+      clearInterval(fileTimer);
       if (!document.getElementById('exit').disabled) {
         document.getElementById('connection').textContent = 'disconnected — reload to reconnect';
       }
@@ -295,8 +368,8 @@
       if (event.code === 'KeyS') { event.preventDefault(); event.stopPropagation(); setSync(!sync); }
       if (event.code === 'KeyX') { event.preventDefault(); event.stopPropagation(); exit(); }
     }, true);
-    panes[0].addEventListener('pointerdown', () => setFocus(0));
-    panes[1].addEventListener('pointerdown', () => setFocus(1));
+    document.getElementById('native').addEventListener('pointerdown', () => setFocus(0));
+    document.getElementById('penny').addEventListener('pointerdown', () => setFocus(1));
     native.onData(data => {
       send({ type: 'input', side: 'left', data });
       if (sync) send({ type: 'input', side: 'right', data });