@bivy/bivy 0.17.2 → 0.17.3-staging.10

package/dist/apps/inspector.js

@@ -0,0 +1,115 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 Petter André Sjulstad
+/** Served on the app's own origin and injected into its HTML. It reports only
+ * to the trusted shell that frames it, and everything it reports is untrusted
+ * app data: the shell shows it and turns it into drafts, never into actions.
+ * Agent-neutral: it observes the browser, not the framework or the agent. */
+export function inspectorScript(shellOrigin, reviewer = false) {
+    return `(()=>{
+// Framed by the shell: report to it. Opened from a shared link: offer notes.
+const framed=parent!==window,REVIEWER=${reviewer};
+if(window.__bivyInspector||(!framed&&!REVIEWER))return;window.__bivyInspector=1;
+const SHELL=${JSON.stringify(shellOrigin)};
+const post=m=>{if(!framed)return;try{parent.postMessage(Object.assign({source:'bivy-inspector'},m),SHELL);}catch{}};
+const fmt=v=>{if(v instanceof Error)return v.name+': '+v.message;if(typeof v==='string')return v;try{return JSON.stringify(v);}catch{return String(v);}};
+const log=(level,text)=>post({type:'console',level,text:String(text).slice(0,500),at:Date.now()});
+for(const level of ['error','warn']){const original=console[level];console[level]=function(...args){log(level,args.map(fmt).join(' '));return original.apply(this,args);};}
+addEventListener('error',e=>{if(e.message)log('error',e.message+(e.filename?' ('+e.filename.split('/').pop()+':'+e.lineno+')':''));},true);
+addEventListener('unhandledrejection',e=>log('error','Unhandled rejection: '+fmt(e.reason)));
+const route=()=>post({type:'route',path:location.pathname+location.search+location.hash});
+for(const name of ['pushState','replaceState']){const original=history[name];history[name]=function(...args){const result=original.apply(this,args);route();return result;};}
+addEventListener('popstate',route);addEventListener('hashchange',route);route();
+const selector=el=>{
+  const parts=[];
+  for(let node=el;node&&node.nodeType===1&&node!==document.body&&node!==document.documentElement&&parts.length<4;node=node.parentElement){
+    if(node.id){parts.unshift('#'+CSS.escape(node.id));break;}
+    let part=node.localName;
+    const classes=[...node.classList].filter(c=>!/\\d{3,}|^css-|^_/.test(c)).slice(0,2);
+    if(classes.length)part+='.'+classes.map(c=>CSS.escape(c)).join('.');
+    const same=node.parentElement?[...node.parentElement.children].filter(c=>c.localName===node.localName):[];
+    if(same.length>1)part+=':nth-of-type('+(same.indexOf(node)+1)+')';
+    parts.unshift(part);
+  }
+  return parts.join(' > ')||el.localName;
+};
+let box=null,target=null,onPicked=post,host=null;
+// Picks on pointerup: iOS never fires click for a tap on a non-clickable
+// element when only window listens, so click would miss most of the page.
+// While pointing, the app sees none of the gesture, including the click after.
+const SWALLOW=['pointerdown','mousedown','mouseup','touchend','click','dblclick','contextmenu'];
+const swallow=e=>{e.preventDefault();e.stopPropagation();};
+// A second listener, so stopping (which the shell does right after a pick)
+// doesn't also drop the guard on the rest of the tap. The tap's click ends it.
+const aftermath=e=>{swallow(e);if(e.type==='click')listen(false,aftermath);};
+const listen=(on,handler=swallow)=>{
+  const method=on?addEventListener:removeEventListener;
+  if(handler===swallow){method('pointermove',hover,true);method('pointerup',pick,true);method('keydown',key,true);}
+  for(const type of SWALLOW)method(type,handler,true);
+};
+const stop=()=>{box?.remove();box=null;target=null;listen(false);};
+const hover=e=>{
+  const el=document.elementFromPoint(e.clientX,e.clientY);
+  if(!el||el===box||el===host)return;target=el;const r=el.getBoundingClientRect();
+  Object.assign(box.style,{left:r.left+'px',top:r.top+'px',width:r.width+'px',height:r.height+'px'});
+};
+const pick=e=>{
+  swallow(e);
+  // The event's own target, not a coordinate lookup: iOS gets elementFromPoint
+  // wrong in a frame of a zoomed page. Found nothing? Keep pointing.
+  const el=e.target instanceof Element?e.target:document.elementFromPoint(e.clientX,e.clientY)||target;
+  if(!el)return;stop();
+  // Keep eating the click (and iOS's delayed mouse events) this tap still fires.
+  listen(true,aftermath);setTimeout(()=>listen(false,aftermath),500);
+  if(el===host){onPicked({type:'picked',cancelled:true});return;}const r=el.getBoundingClientRect();
+  onPicked({type:'picked',selector:selector(el),tag:el.localName,text:(el.innerText||el.getAttribute('aria-label')||el.getAttribute('alt')||'').trim().replace(/\\s+/g,' ').slice(0,200),
+    rect:{x:Math.round(r.left),y:Math.round(r.top),width:Math.round(r.width),height:Math.round(r.height)},
+    viewport:{width:innerWidth,height:innerHeight},path:location.pathname+location.search+location.hash});
+};
+const key=e=>{if(e.key==='Escape'){stop();onPicked({type:'picked',cancelled:true});}};
+function startPointing(){
+  stop();
+  box=document.createElement('div');
+  box.setAttribute('aria-hidden','true');
+  Object.assign(box.style,{position:'fixed',zIndex:2147483647,pointerEvents:'none',outline:'2px solid Highlight',outlineOffset:'2px',borderRadius:'4px',transition:'all 60ms ease-out'});
+  document.documentElement.append(box);
+  listen(true);
+}
+addEventListener('message',e=>{
+  if(!framed||e.origin!==SHELL||e.source!==parent||e.data?.type!=='bivy:point')return;
+  if(e.data.on)startPointing();else stop();
+});
+if(REVIEWER&&!framed){
+  // A shadow root keeps the app's CSS off these controls (and ours off the app).
+  host=document.createElement('bivy-review');
+  const root=host.attachShadow({mode:'open'});
+  root.innerHTML='<style>:host{all:initial}*{box-sizing:border-box;font:14px/1.4 system-ui,sans-serif}'
+    +'.dock{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:2147483647;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100vw - 24px)}'
+    +'button{border:1px solid ButtonBorder;background:ButtonFace;color:ButtonText;border-radius:999px;padding:10px 14px;font-weight:600;cursor:pointer;min-height:44px}'
+    +'.primary{background:CanvasText;color:Canvas;border-color:CanvasText}'
+    +'form{width:min(340px,calc(100vw - 24px));background:Canvas;color:CanvasText;border:1px solid GrayText;border-radius:14px;padding:12px;box-shadow:0 8px 30px rgb(0 0 0/.25)}'
+    +'textarea{width:100%;min-height:5em;margin:8px 0;border:1px solid GrayText;border-radius:8px;padding:8px;background:Canvas;color:CanvasText;resize:vertical}'
+    +'.row{display:flex;justify-content:flex-end;gap:8px}.muted{color:GrayText;font-size:12px;overflow-wrap:anywhere}[hidden]{display:none!important}</style>'
+    +'<div class="dock"><p class="muted" role="status" id="status" hidden></p>'
+    +'<form id="form" hidden><label for="note">Your note</label><div class="muted" id="about"></div><textarea id="note" required maxlength="1000"></textarea>'
+    +'<div class="row"><button type="button" id="cancel">Cancel</button><button class="primary" id="send">Send note</button></div></form>'
+    +'<button id="leave">Leave a note</button></div>';
+  const $=id=>root.getElementById(id);let picked=null;
+  const say=text=>{$('status').hidden=!text;$('status').textContent=text;};
+  $('leave').onclick=()=>{say('Tap the part of the page your note is about. Escape cancels.');$('leave').hidden=true;startPointing();};
+  onPicked=d=>{
+    $('leave').hidden=false;say('');
+    if(d.cancelled)return;picked=d;
+    $('about').textContent='About: '+(d.text?'“'+d.text.slice(0,80)+'” ':'')+'('+d.selector+')';
+    $('form').hidden=false;$('leave').hidden=true;$('note').focus();
+  };
+  $('cancel').onclick=()=>{$('form').hidden=true;$('leave').hidden=false;};
+  $('form').onsubmit=async e=>{
+    e.preventDefault();
+    const r=await fetch('/__bivy/notes',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(Object.assign({},picked,{note:$('note').value}))}).catch(()=>null);
+    if(r&&r.ok){$('note').value='';$('form').hidden=true;$('leave').hidden=false;say('Sent. Thanks — the app’s owner will see it.');setTimeout(()=>say(''),4000);}
+    else say('Couldn’t send the note. Your link may have expired.');
+  };
+  (document.body||document.documentElement).append(host);
+}
+})();`;
+}

package/dist/apps/listeners.js

@@ -0,0 +1,115 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 Petter André Sjulstad
+import fs from "node:fs/promises";
+import path from "node:path";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+const execFileP = promisify(execFile);
+/** Loopback or wildcard TCP listeners whose process runs inside a workspace.
+ * Agent-neutral by design: every framework and agent starts servers the same
+ * way, so the process table is the one hook that works for all of them. A
+ * listener is only an offer — access still needs a user's tap and a grant. */
+export async function scanListeners(workspace, platform = process.platform) {
+    let root;
+    try {
+        root = await fs.realpath(workspace);
+    }
+    catch {
+        return [];
+    }
+    const found = platform === "linux" ? await scanProc(root) : platform === "darwin" ? await scanLsof(root) : [];
+    const byPort = new Map();
+    for (const offer of found)
+        if (offer.pid !== process.pid && offer.port >= 1024 && !byPort.has(offer.port))
+            byPort.set(offer.port, offer);
+    return [...byPort.values()].sort((a, b) => a.port - b.port);
+}
+const inside = (root, dir) => dir === root || dir.startsWith(root + path.sep);
+/** `local_address` in /proc/net/tcp{,6}: hex address in little-endian 32-bit words. */
+export function listenPort(line) {
+    const cols = line.trim().split(/\s+/);
+    if (cols.length < 10 || cols[3] !== "0A")
+        return undefined; // 0A = LISTEN
+    const [address, portHex] = cols[1].split(":");
+    const words = address.match(/.{8}/g) ?? [];
+    const last = words[words.length - 1] ?? "";
+    const zero = /^0+$/.test(address);
+    const v4Loopback = last.endsWith("7F") && (words.length === 1 || words.slice(0, 3).join("") === "0000000000000000FFFF0000");
+    const v6Loopback = address === "00000000000000000000000001000000";
+    if (!zero && !v4Loopback && !v6Loopback)
+        return undefined;
+    return { inode: cols[9], port: parseInt(portHex, 16) };
+}
+async function scanProc(root) {
+    const sockets = new Map();
+    for (const file of ["/proc/net/tcp", "/proc/net/tcp6"]) {
+        const text = await fs.readFile(file, "utf8").catch(() => "");
+        for (const line of text.split("\n").slice(1)) {
+            const hit = listenPort(line);
+            if (hit && hit.inode !== "0")
+                sockets.set(hit.inode, hit.port);
+        }
+    }
+    if (!sockets.size)
+        return [];
+    const offers = [];
+    const pids = (await fs.readdir("/proc").catch(() => [])).filter((name) => /^\d+$/.test(name));
+    // cwd first: other users' processes fail here, and only workspace processes
+    // pay for an fd walk.
+    await Promise.all(pids.map(async (pid) => {
+        const cwd = await fs.readlink(`/proc/${pid}/cwd`).catch(() => "");
+        if (!cwd || !inside(root, cwd))
+            return;
+        const fds = await fs.readdir(`/proc/${pid}/fd`).catch(() => []);
+        const ports = new Set();
+        for (const fd of fds) {
+            const target = await fs.readlink(`/proc/${pid}/fd/${fd}`).catch(() => "");
+            const inode = /^socket:\[(\d+)\]$/.exec(target)?.[1];
+            const port = inode ? sockets.get(inode) : undefined;
+            if (port)
+                ports.add(port);
+        }
+        if (!ports.size)
+            return;
+        const argv = (await fs.readFile(`/proc/${pid}/cmdline`, "utf8").catch(() => "")).split("\0").filter(Boolean);
+        for (const port of ports)
+            offers.push({ port, pid: Number(pid), command: commandLabel(argv) });
+    }));
+    return offers;
+}
+/** `lsof -F` field output: p<pid>, c<command>, n<name> records. */
+export function parseLsof(stdout) {
+    const records = [];
+    for (const line of stdout.split("\n")) {
+        if (line.startsWith("p"))
+            records.push({ pid: Number(line.slice(1)), values: [] });
+        else if (line.startsWith("n") && records.length)
+            records[records.length - 1].values.push(line.slice(1));
+    }
+    return records;
+}
+async function scanLsof(root) {
+    const run = (args) => execFileP("lsof", args, { timeout: 4000, maxBuffer: 4 * 1024 * 1024 }).then((r) => r.stdout, (e) => e.stdout ?? "");
+    const listening = parseLsof(await run(["-nP", "-iTCP", "-sTCP:LISTEN", "-Fpn"]));
+    if (!listening.length)
+        return [];
+    const cwds = new Map(parseLsof(await run(["-a", "-d", "cwd", "-Fpn", "-p", listening.map((r) => r.pid).join(",")])).map((r) => [r.pid, r.values[0] ?? ""]));
+    const offers = [];
+    for (const { pid, values } of listening) {
+        const cwd = await fs.realpath(cwds.get(pid) ?? "").catch(() => "");
+        if (!cwd || !inside(root, cwd))
+            continue;
+        const args = (await execFileP("ps", ["-p", String(pid), "-o", "args="], { timeout: 4000 }).then((r) => r.stdout, () => "")).trim();
+        for (const name of values) {
+            const match = /^(\*|127\.[\d.]+|\[::1\]|\[::\]|localhost):(\d+)$/.exec(name);
+            if (match)
+                offers.push({ port: Number(match[2]), pid, command: commandLabel(args.split(/\s+/)) });
+        }
+    }
+    return offers;
+}
+/** "node /x/node_modules/.bin/vite --port 5173" → "node vite --port 5173". */
+function commandLabel(argv) {
+    const label = argv.slice(0, 4).map((arg) => arg.startsWith("/") || arg.startsWith(".") ? path.basename(arg) : arg).join(" ");
+    return label.length > 60 ? `${label.slice(0, 59)}…` : label || "server";
+}

package/dist/apps/preview-shell.js

@@ -1,45 +1,234 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright (c) 2026 Petter André Sjulstad
 /** This document lives on a different origin from app code. Never put a
- * generated document on the shell host or let the frame navigate its parent. */
+ * generated document on the shell host or let the frame navigate its parent.
+ * Everything the app's inspector reports is untrusted: it is displayed and
+ * turned into drafts the user reviews, never sent or acted on by itself. */
 export function previewShell(nonce) {
-    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bivy · App preview</title>
+    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><title>Bivy · App preview</title>
 <link rel="stylesheet" href="/__bivy/tokens.css"><link rel="stylesheet" href="/__bivy/styles.css">
 <style nonce="${nonce}">
 html,body { margin:0; width:100%; height:100%; }
-body { display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font-family:var(--font-sans); }
-nav { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-bottom:thin solid var(--line); background:var(--surface); flex-shrink:0; }
-nav .btn { min-height:var(--space-7); flex-shrink:0; }
-#title { flex:1; min-width:0; font-size:var(--text-sm); font-weight:var(--weight-semibold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+body { display:flex; flex-direction:column; background:var(--surface-2); color:var(--ink); font-family:var(--font-sans); }
+#stage { flex:1; min-height:0; display:flex; justify-content:center; }
+iframe { width:100%; height:100%; border:0; background:var(--bg); }
+#stage[data-lens="tablet"] iframe { max-width:768px; }
+#stage[data-lens="phone"] iframe { max-width:390px; }
+#stage:not([data-lens="full"]) iframe { border-inline:thin solid var(--line); box-shadow:var(--shadow-sm); }
 #status { padding:var(--space-4); margin:0; font-size:var(--text-sm); }
-iframe { flex:1; min-height:0; width:100%; border:0; background:var(--bg); }
+#down { flex-shrink:0; }
+/* The pill floats above the app instead of taking a header row from it. */
+#dock { position:fixed; left:var(--space-2); right:var(--space-2); bottom:calc(var(--space-2) + env(safe-area-inset-bottom)); z-index:var(--z-sticky); display:flex; flex-direction:column; align-items:center; gap:var(--space-2); pointer-events:none; }
+#dock > * { pointer-events:auto; }
+/* The hint sits over the app; a tap on it is meant for the app underneath. */
+#dock > #pointing { pointer-events:none; }
+nav { display:flex; align-items:center; gap:var(--space-1); max-width:100%; padding:var(--space-1); background:var(--surface); border:thin solid var(--line); border-radius:var(--radius-full); box-shadow:var(--shadow-lg); }
+nav .btn { flex-shrink:0; border-radius:var(--radius-full); }
+nav .btn[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
+#name { display:flex; flex-direction:column; min-width:0; padding:0 var(--space-2); }
+#title { font-size:var(--text-sm); font-weight:var(--weight-semibold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14em; }
+#stamp { font-size:var(--text-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+#stamp:empty { display:none; }
+#lens { flex-shrink:0; }
+.panel { width:min(560px, 100%); max-height:50vh; overflow:auto; background:var(--surface); border:thin solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-3); box-sizing:border-box; }
+.panel h2 { font-size:var(--text-sm); margin:0 0 var(--space-2); display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
+.panel-actions { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-2); flex-wrap:wrap; }
+#compare-stage { display:grid; justify-content:center; background:var(--surface-2); border-radius:var(--radius-md); overflow:hidden; }
+/* Both shots share one grid cell, so they overlay exactly at any size. */
+#compare-stage img { grid-area:1 / 1; display:block; max-height:32vh; max-width:100%; }
+/* Same column as the shots, so the handle sits on the split. */
+#compare-slider { grid-area:2 / 1; width:100%; margin:var(--space-2) 0; accent-color:var(--accent); }
+#compare-hint { font-size:var(--text-xs); margin:var(--space-1) 0 0; }
+#entries { list-style:none; margin:0; padding:0; font-family:var(--font-mono); font-size:var(--text-xs); }
+#entries li { display:flex; gap:var(--space-2); align-items:baseline; padding:var(--space-1) 0; border-top:thin solid var(--line); overflow-wrap:anywhere; }
+/* Keeps .field's 16px: smaller, and iOS zooms the shell on focus and stays zoomed. */
+#draft-text { width:100%; min-height:5em; box-sizing:border-box; resize:vertical; }
+#draft-hint { font-size:var(--text-xs); margin:var(--space-2) 0 var(--space-1); }
+#draft-context { margin:0; padding:var(--space-2); background:var(--surface-2); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:var(--text-xs); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); }
+#show { position:fixed; right:var(--space-3); bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); z-index:var(--z-sticky); border-radius:var(--radius-full); box-shadow:var(--shadow-lg); }
+.label-narrow { display:none; }
+@media (max-width: 699px) { #lens { display:none; } #name { display:none; } .label-wide { display:none; } .label-narrow { display:inline; } }
 [hidden] { display:none !important; }
 </style></head><body>
-<nav aria-label="Bivy preview controls"><button class="btn ghost" id="back">‹ Back to chat</button><span id="title">App preview</span><button class="btn ghost" id="reload" disabled>Reload</button></nav>
+<div class="banner" data-tone="warn" id="down" hidden><span class="banner-text" id="down-text" role="status"></span><span class="banner-actions"><button class="btn sm" id="ask" hidden>Ask agent to fix</button></span></div>
 <p id="status" role="status">Opening app…</p>
-<iframe id="app" title="App preview" hidden sandbox="allow-scripts allow-same-origin allow-forms allow-downloads allow-popups" referrerpolicy="no-referrer"></iframe>
+<div id="stage" data-lens="full"><iframe id="app" title="App preview" hidden sandbox="allow-scripts allow-same-origin allow-forms allow-downloads allow-popups" referrerpolicy="no-referrer"></iframe></div>
+<div id="dock">
+  <section class="panel" id="console" hidden aria-labelledby="console-title">
+    <h2><span id="console-title">Console</span><button class="btn sm ghost" id="clear">Clear</button></h2>
+    <p class="muted" id="console-empty">No errors or warnings since this page loaded.</p>
+    <ul id="entries"></ul>
+    <div class="panel-actions"><button class="btn sm" id="send-errors" disabled>Send to agent…</button></div>
+  </section>
+  <section class="panel" id="compare" hidden aria-labelledby="compare-title">
+    <h2 id="compare-title">Before and after the agent’s last change</h2>
+    <div id="compare-stage"><img id="compare-after" alt="After the agent’s last change"><img id="compare-before" alt="Before the agent’s last change"><input type="range" id="compare-slider" min="0" max="100" value="50" aria-label="Show more of before or after"></div>
+    <p class="muted" id="compare-hint">Left of the handle: before. Right: now. Screenshots at phone width.</p>
+  </section>
+  <section class="panel" id="draft" hidden aria-labelledby="draft-title">
+    <h2 id="draft-title">Draft for the agent</h2>
+    <textarea class="field" id="draft-text" aria-label="What should change?" placeholder="What should change?"></textarea>
+    <p class="muted" id="draft-hint">Sent with this context from the preview. Nothing is sent until you send it in the chat.</p>
+    <pre id="draft-context"></pre>
+    <div class="panel-actions"><button class="btn sm ghost" id="draft-cancel">Cancel</button><button class="btn sm primary" id="draft-add">Add to chat</button></div>
+  </section>
+  <p class="banner inline" data-tone="accent" id="pointing" role="status" hidden>Tap anything in the app to point at it. Press Escape or Point again to stop.</p>
+  <nav aria-label="Bivy preview controls">
+    <button class="btn sm ghost" id="back" aria-label="Back to chat">‹ <span class="label-wide">Back to chat</span><span class="label-narrow">Chat</span></button>
+    <span id="name"><span id="title">App preview</span><span id="stamp" class="muted" role="status"></span></span>
+    <button class="btn sm ghost" id="hide" aria-label="Hide Bivy controls" title="Hide controls">⌄</button>
+    <button class="btn sm ghost" id="point" aria-pressed="false" disabled>Point</button>
+    <button class="btn sm ghost" id="compare-btn" aria-pressed="false" hidden>Compare</button>
+    <button class="btn sm ghost" id="errors" aria-pressed="false" aria-label="Console" disabled>Console <span class="badge" data-variant="solid" data-tone="danger" id="error-count" hidden></span></button>
+    <div class="segmented" id="lens" role="radiogroup" aria-label="Preview width"><button class="seg-btn" role="radio" aria-selected="true" data-lens="full">Full</button><button class="seg-btn" role="radio" aria-selected="false" data-lens="tablet">Tablet</button><button class="seg-btn" role="radio" aria-selected="false" data-lens="phone">Phone</button></div>
+    <button class="btn sm ghost" id="reload" disabled>Reload</button>
+  </nav>
+</div>
+<button class="btn sm" id="show" hidden aria-label="Show Bivy controls">Bivy</button>
 <script nonce="${nonce}">
-const frame=document.getElementById('app'),status=document.getElementById('status'),back=document.getElementById('back'),reload=document.getElementById('reload');
+const $=id=>document.getElementById(id);
+const frame=$('app'),status=$('status'),back=$('back'),reload=$('reload'),stage=$('stage');
 const ticket=location.hash.slice(1);history.replaceState(null,'',location.pathname);
-let metadata;
+let metadata,currentPath='/';
+// Peek: framed by a Bivy client, which owns closing and the composer.
+const embedded=parent!==window;
+const toBivy=m=>parent.postMessage(Object.assign({source:'bivy-preview'},m),new URL(metadata.returnTo).origin);
 const storageKey='bivy-preview';
+const safePath=p=>typeof p==='string'&&p.startsWith('/')&&!p.startsWith('//')&&p.length<=2048?p:'/';
+const open=(path,message)=>{status.hidden=false;status.textContent=message;resetConsole();frame.src=metadata.origin+safePath(path);};
 function show(data,launch){
   metadata=data;
-  document.getElementById('title').textContent=data.name;
-  document.getElementById('title').title=data.name;
+  $('title').textContent=data.name;
+  $('title').title=data.name;
   document.title='Bivy · '+data.name;
   back.title=data.returnTo?'Return to '+new URL(data.returnTo).host:'Close preview';
   frame.title=data.name;
   frame.hidden=false;
-  frame.src=data.origin+(launch?'/__bivy/open#'+launch:'/');
-  reload.disabled=false;
+  // Desktop apps have no page to inspect: no Point or Console. Their viewer
+  // (Bivy's own code) may use the clipboard; generated web apps may not.
+  // (Set before navigating: the policy is fixed when the frame loads.)
+  for(const b of [$('point'),$('errors')])b.hidden=data.inspect===false;
+  if(data.inspect===false)frame.allow='clipboard-read; clipboard-write';
+  frame.src=data.origin+(launch?'/__bivy/open#'+(embedded?'e:':'')+launch:'/');
+  back.hidden=embedded&&Boolean(data.returnTo);
+  for(const b of [reload,$('point'),$('errors')])b.disabled=false;
   status.textContent='Loading app…';
-  frame.onload=()=>{status.hidden=true;};
+  frame.onload=()=>{status.hidden=true;void loadCompare();if(revision===null){revision=-1;watch();}else if(wake)wake();};
   // Store navigation metadata only, never tickets or cookies.
   try{sessionStorage.setItem(storageKey,JSON.stringify(data));}catch{}
 }
+// Reload when an agent turn changes files, returning to the page in view.
+// Until the frame has redeemed its access cookie, polls fail; back off, and
+// let the next frame load retry at once.
+let revision=null,retry=0,wake=null;
+async function watch(){
+  wake=null;
+  try{
+    const r=await fetch(metadata.origin+'/__bivy/revision?after='+revision,{credentials:'include',cache:'no-store'});
+    if(!r.ok)throw Error();
+    const d=await r.json();
+    if(revision>=0&&d.revision!==revision){
+      open(currentPath!=='/'?currentPath:d.path,'Updating…');
+      $('stamp').textContent='Updated after the agent’s turn';
+      // Screenshots for Compare land a few seconds after the change.
+      for(const ms of [5000,15000])setTimeout(()=>void loadCompare(),ms);
+    }
+    revision=d.revision;retry=0;setTimeout(watch,0);
+  }catch{retry=Math.min(30000,(retry||1000)*2);const t=setTimeout(watch,retry);wake=()=>{clearTimeout(t);watch();};}
+}
+// Drafts go to the session's composer; nothing is ever sent from here.
+function toChat(text){
+  if(embedded)return toBivy({type:'draft',text});
+  const to=new URL(metadata.returnTo),session=to.pathname.split('/').pop();
+  location.assign(to.origin+'/share?session='+encodeURIComponent(session)+'&text='+encodeURIComponent(text));
+}
+function draft(context){
+  panels(null);
+  $('draft').hidden=false;
+  $('draft-add').textContent=metadata.returnTo?'Add to chat':'Copy';
+  $('draft-context').textContent=context;
+  const box=$('draft-text');box.value='';box.focus();
+}
+$('draft-cancel').onclick=()=>{$('draft').hidden=true;};
+$('draft-add').onclick=async()=>{
+  const note=$('draft-text').value.trim(),text=(note?note+'\\n\\n':'')+$('draft-context').textContent;
+  if(metadata.returnTo)return toChat(text);
+  try{await navigator.clipboard.writeText(text);$('draft-add').textContent='Copied';}catch{$('draft-text').select();}
+};
+// Console
+let entries=[];
+function resetConsole(){entries=[];renderConsole();}
+function renderConsole(){
+  const errors=entries.filter(e=>e.level==='error').length,count=$('error-count');
+  count.hidden=!errors;count.textContent=String(errors);
+  $('errors').setAttribute('aria-label',errors?'Console, '+errors+' error'+(errors===1?'':'s'):'Console');
+  $('console-empty').hidden=entries.length>0;$('send-errors').disabled=!entries.length;
+  $('entries').replaceChildren(...entries.map(e=>{const li=document.createElement('li');const tag=document.createElement('span');tag.className='badge';tag.dataset.tone=e.level==='error'?'danger':'warn';tag.textContent=e.level;const text=document.createElement('span');text.textContent=e.text;li.append(tag,text);return li;}));
+}
+$('errors').onclick=()=>panels($('console').hidden?'console':null);
+$('clear').onclick=resetConsole;
+$('send-errors').onclick=()=>draft('Console output in the app preview "'+metadata.name+'" (page '+currentPath+'):\\n'+entries.slice(-20).map(e=>'- '+e.level+': '+e.text).join('\\n'));
+// Point and tell
+const point=$('point');
+function pointing(on){point.setAttribute('aria-pressed',String(on));$('pointing').hidden=!on;frame.contentWindow?.postMessage({type:'bivy:point',on},metadata.origin);}
+point.onclick=()=>pointing(point.getAttribute('aria-pressed')!=='true');
+function picked(d){
+  pointing(false);
+  if(d.cancelled)return;
+  const r=d.rect||{},v=d.viewport||{};
+  const errors=entries.filter(e=>e.level==='error').slice(-5);
+  draft('In the app preview "'+metadata.name+'" (page '+safePath(d.path)+', viewport '+v.width+'×'+v.height+'):\\n'
+    +'Element: '+String(d.selector).slice(0,300)+(d.text?' ("'+String(d.text).slice(0,200)+'")':'')+', '+r.width+'×'+r.height+' at '+r.x+','+r.y
+    +(errors.length?'\\nRecent errors:\\n'+errors.map(e=>'- '+e.text).join('\\n'):''));
+}
+// Compare: screenshots around the agent's last change (agent screenshots on).
+const compareBtn=$('compare-btn');let shots=[],urls=[];
+async function loadCompare(){
+  try{const r=await fetch(metadata.origin+'/__bivy/compare',{credentials:'include',cache:'no-store'});if(!r.ok)return;shots=(await r.json()).shots||[];compareBtn.hidden=shots.length<2;}catch{}
+}
+function panels(open){for(const [id,btn] of [['console','errors'],['compare','compare-btn']]){$(id).hidden=id!==open;$(btn).setAttribute('aria-pressed',String(id===open));}$('draft').hidden=true;}
+compareBtn.onclick=async()=>{
+  if(!$('compare').hidden)return panels(null);
+  panels('compare');
+  for(const u of urls)URL.revokeObjectURL(u);
+  const pick=[shots[shots.length-2],shots[shots.length-1]];
+  urls=await Promise.all(pick.map(async s=>URL.createObjectURL(await (await fetch(metadata.origin+'/__bivy/compare/'+s.index,{credentials:'include'})).blob())));
+  const before=$('compare-before'),after=$('compare-after');
+  before.src=urls[0];after.src=urls[1];
+  split();
+};
+const split=()=>{$('compare-before').style.clipPath='inset(0 '+(100-Number($('compare-slider').value))+'% 0 0)';};
+$('compare-slider').oninput=split;
+// The pill can cover an app's own bottom bar; collapse it to a corner button.
+$('hide').onclick=()=>{if(point.getAttribute('aria-pressed')==='true')pointing(false);$('dock').hidden=true;$('show').hidden=false;$('show').focus();};
+$('show').onclick=()=>{$('dock').hidden=false;$('show').hidden=true;$('hide').focus();};
+// Device lens (desktop widths)
+for(const b of $('lens').querySelectorAll('button'))b.onclick=()=>{
+  stage.dataset.lens=b.dataset.lens;
+  for(const o of $('lens').querySelectorAll('button'))o.setAttribute('aria-selected',String(o===b));
+};
+// Messages from the app origin: server state and inspector reports.
+const down=$('down'),downText=$('down-text'),ask=$('ask');
+let downPort=0;
+addEventListener('message',e=>{
+  if(!metadata||e.origin!==metadata.origin||e.source!==frame.contentWindow)return;
+  const d=e.data||{};
+  if(d.type==='bivy:access'&&d.state==='blocked'&&embedded&&metadata.returnTo)toBivy({type:'blocked'});
+  else if(d.type==='bivy:upstream'){
+    downPort=Number(d.port)||0;
+    down.hidden=d.state!=='down';
+    downText.textContent='Nothing is answering on port '+downPort+'.';
+    ask.hidden=!metadata.returnTo;
+  }else if(d.source==='bivy-inspector'){
+    if(d.type==='route')currentPath=safePath(d.path);
+    else if(d.type==='console'&&(d.level==='error'||d.level==='warn')){entries.push({level:d.level,text:String(d.text).slice(0,500)});if(entries.length>50)entries.shift();renderConsole();}
+    else if(d.type==='picked')picked(d);
+  }
+});
+ask.onclick=()=>toChat('The app preview "'+metadata.name+'" isn’t loading: nothing is answering on port '+downPort+'. Please find out why the server stopped, restart it, and tell me when it’s back.');
+addEventListener('keydown',e=>{if(e.key==='Escape'){if(point.getAttribute('aria-pressed')==='true')pointing(false);else panels(null);}});
 back.onclick=()=>{if(metadata?.returnTo){window.close();setTimeout(()=>location.replace(metadata.returnTo),100);}else{window.close();status.hidden=false;status.textContent='You can close this tab to return to Bivy.';}};
-reload.onclick=()=>{if(metadata){status.hidden=false;status.textContent='Reloading app…';frame.src=metadata.origin+'/';}};
+reload.onclick=()=>{if(metadata)open(currentPath,'Reloading app…');};
 (async()=>{
   if(ticket){
     const response=await fetch('/__bivy/launch',{method:'POST',headers:{'Content-Type':'text/plain'},body:ticket});