@bivy/bivy 0.18.5 → 0.18.6-staging.2

package/dist/apps/annotate.js

@@ -3,6 +3,19 @@
 import { readFileSync } from "node:fs";
 import { decodePng } from "./review.js";
 import { encodePng } from "./rfb.js";
+/** Scroll containers are page data, never executable capture instructions. */
+export function readElementScrolls(input) {
+    if (input === undefined)
+        return [];
+    if (!Array.isArray(input) || input.length > 50)
+        throw new Error("Invalid scroll containers.");
+    return input.map((raw) => {
+        if (!raw || typeof raw.selector !== "string" || !raw.selector.length || raw.selector.length > 2048
+            || ![raw.x, raw.y].every(n => typeof n === "number" && Number.isFinite(n) && Math.abs(n) <= 100_000))
+            throw new Error("Invalid scroll container.");
+        return { selector: raw.selector, x: raw.x, y: raw.y };
+    });
+}
 const MAX_STROKES = 50;
 const MAX_POINTS = 10_000;
 /** Validates strokes from the client (untrusted shape): bounded, finite. */

package/dist/apps/gateway.js

@@ -12,7 +12,7 @@ import { previewShell } from "./preview-shell.js";
 import { displayViewer, DISPLAY_MENU_PATH, DISPLAY_SOCKET_PATH, DISPLAY_STATS_PATH, NOVNC_PATH } from "./display-viewer.js";
 import { pressMenu, readMenuPath, readMenus } from "./menu.js";
 import { inspectorScript } from "./inspector.js";
-import { readStrokes } from "./annotate.js";
+import { readStrokes, readElementScrolls } from "./annotate.js";
 const MIME = {
     ".html": "text/html; charset=utf-8", ".js": "text/javascript; charset=utf-8", ".mjs": "text/javascript; charset=utf-8",
     ".css": "text/css; charset=utf-8", ".json": "application/json", ".svg": "image/svg+xml", ".png": "image/png",
@@ -783,6 +783,7 @@ fetch('${REDEEM_PATH}',{method:'POST',headers:{'Content-Type':'text/plain'},body
             try {
                 const raw = input.mark;
                 const strokes = readStrokes(raw?.strokes);
+                const elementScrolls = readElementScrolls(raw?.elementScrolls);
                 const v = raw.viewport;
                 if (!Number.isFinite(v?.width) || !Number.isFinite(v?.height) || v.width < 40 || v.width > 4000 || v.height < 40 || v.height > 4000 || v.width * v.height > 4_000_000)
                     throw Error();
@@ -796,7 +797,7 @@ fetch('${REDEEM_PATH}',{method:'POST',headers:{'Content-Type':'text/plain'},body
                 const distance = strokes.reduce((total, s) => total + s.points.reduce((length, p, i) => i ? length + Math.hypot(p[0] - s.points[i - 1][0], p[1] - s.points[i - 1][1]) : length, 0), 0);
                 if (distance > 50_000)
                     throw Error();
-                mark = { appId: entry.app.id, viewId: entry.view.id, strokes, viewport: v, path: text(raw.path, 2048), scroll, dpr: 1, theme: raw.theme === "dark" ? "dark" : "light", signals: { unknown: true } };
+                mark = { appId: entry.app.id, viewId: entry.view.id, strokes, viewport: v, path: text(raw.path, 2048), scroll, elementScrolls, dpr: 1, theme: raw.theme === "dark" ? "dark" : "light", signals: { unknown: true } };
             }
             catch {
                 res.writeHead(400);

package/dist/apps/inspector.js

@@ -92,8 +92,13 @@ const signals=()=>{
   const open=Boolean(document.querySelector('dialog[open],details[open],[aria-expanded="true"],[aria-modal="true"]'));
   return {storage,cookies:Boolean(document.cookie),interacted,open,edited};
 };
+// Use a unique DOM path: repeated class names must not restore another panel.
+const elementScrolls=()=>[...document.querySelectorAll('*')].filter(el=>el!==document.scrollingElement&&(el.scrollLeft||el.scrollTop)).slice(0,50).map(el=>{
+  const parts=[];for(let n=el;n&&n.nodeType===1;n=n.parentElement){if(n.id){parts.unshift('#'+CSS.escape(n.id));break;}parts.unshift(n.localName+':nth-child('+([...n.parentNode.children].indexOf(n)+1)+')');}
+  return {selector:parts.join(' > '),x:el.scrollLeft,y:el.scrollTop};
+});
 const drawState=()=>({type:'draw-state',scroll:{x:Math.round(scrollX),y:Math.round(scrollY)},viewport:{width:innerWidth,height:innerHeight},dpr:devicePixelRatio,
-  theme:matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light',path:location.pathname+location.search+location.hash,signals:signals()});
+  theme:matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light',path:location.pathname+location.search+location.hash,elementScrolls:elementScrolls(),signals:signals()});
 /** Elements inside a mark (viewport rect): a grid sample, then the largest
  * element under each hit that sits mostly inside the mark — circling a
  * button names the button, not the bar it's in. A line through something

package/dist/apps/preview-shell.js

@@ -338,7 +338,7 @@ function startDraw(target){
   if(target==='frame'&&metadata.inspect!==false){
     const current=draw;
     current.state.signals={unknown:true};
-    current.waiting=d=>{current.waiting=null;current.scroll=pos(d.scroll);current.state={viewport:{width:Math.round(Number(d.viewport?.width))||current.state.viewport.width,height:Math.round(Number(d.viewport?.height))||current.state.viewport.height},dpr:Number(d.dpr)||devicePixelRatio,theme:d.theme==='dark'?'dark':'light',path:safePath(d.path),signals:Object.fromEntries(Object.entries(d.signals||{}).map(([k,v])=>[k,v===true]))};renderInk();};
+    current.waiting=d=>{current.waiting=null;current.scroll=pos(d.scroll);current.state={viewport:{width:Math.round(Number(d.viewport?.width))||current.state.viewport.width,height:Math.round(Number(d.viewport?.height))||current.state.viewport.height},dpr:Number(d.dpr)||devicePixelRatio,theme:d.theme==='dark'?'dark':'light',path:safePath(d.path),elementScrolls:d.elementScrolls,signals:Object.fromEntries(Object.entries(d.signals||{}).map(([k,v])=>[k,v===true]))};renderInk();};
     frame.contentWindow?.postMessage({type:'bivy:draw'},metadata.origin);
   }
   for(const b of $('draw-bar').querySelectorAll('[data-tool]'))b.setAttribute('aria-checked',String(b.dataset.tool===draw.tool));
@@ -428,7 +428,7 @@ $('draw-done').onclick=()=>{
     +(els.length?els.map(el=>'- '+String(el.selector).slice(0,300)+(el.text?' ("'+String(el.text).slice(0,120)+'")':'')).join('\\n')+'\\n':'')
     +'Marks ('+(d.target==='compare'?'screenshot':'page')+' px): '+d.strokes.map(bounds).join('; ');
   const mark=Object.assign({path:st.path,viewport:st.viewport,dpr:st.dpr,strokes:d.strokes.map(s=>({tool:s.tool,points:s.points})),signals:st.signals},
-    d.target==='frame'?{scroll:d.scroll,theme:st.theme}:{compare:compareAfter});
+    d.target==='frame'?{scroll:d.scroll,elementScrolls:st.elementScrolls,theme:st.theme}:{compare:compareAfter});
   // The marks stay on screen, frozen, while you add your words.
   d.done=true;draw=null;
   draft(context,false);

package/dist/apps/screenshot.js

@@ -166,6 +166,16 @@ export async function takeShots(views, request, outDir, chrome = findChrome()) {
                     await cdp.send("Page.navigate", { url: origin + request.path }, sessionId);
                     await loaded;
                     await new Promise((r) => setTimeout(r, 400)); // let fonts and first effects settle
+                    // Match scrolling inside app panels as well as the document. Marks are
+                    // viewport positions within these panels; subtract only document scroll.
+                    let elementScrollsRestored;
+                    if (request.elementScrolls?.length) {
+                        const positions = JSON.stringify(request.elementScrolls);
+                        await cdp.send("Runtime.evaluate", { expression: `(${positions}).forEach(p => { try { document.querySelector(p.selector)?.scrollTo({left:p.x,top:p.y,behavior:'instant'}); } catch {} })` }, sessionId);
+                        await new Promise((r) => setTimeout(r, 150));
+                        const { result } = await cdp.send("Runtime.evaluate", { expression: `(${positions}).every(p => { try { const el=document.querySelector(p.selector); return el && Math.abs(el.scrollLeft-p.x)<=2 && Math.abs(el.scrollTop-p.y)<=2; } catch { return false; } })`, returnByValue: true }, sessionId);
+                        elementScrollsRestored = result?.value === true;
+                    }
                     let scroll;
                     if (request.scroll) {
                         const { result } = await cdp.send("Runtime.evaluate", { expression: `scrollTo(${Number(request.scroll.x) || 0}, ${Number(request.scroll.y) || 0}); [scrollX, scrollY]`, returnByValue: true }, sessionId);
@@ -175,7 +185,7 @@ export async function takeShots(views, request, outDir, chrome = findChrome()) {
                     const { data } = await cdp.send("Page.captureScreenshot", { format: "png" }, sessionId);
                     const file = path.join(outDir, `${entry.view.id.slice(0, 8)}-${width}-${theme}.png`);
                     fs.writeFileSync(file, Buffer.from(data, "base64"));
-                    shots.push({ viewId: entry.view.id, view: entry.view.name, width, theme, file, ...(scroll ? { scroll } : {}) });
+                    shots.push({ viewId: entry.view.id, view: entry.view.name, width, theme, file, ...(scroll ? { scroll } : {}), ...(elementScrollsRestored !== undefined ? { elementScrollsRestored } : {}) });
                 }
         }
         return shots;

package/dist/apps/service.js

@@ -5,7 +5,7 @@ import os from "node:os";
 import path from "node:path";
 import { scanListeners } from "./listeners.js";
 import { takeShots } from "./screenshot.js";
-import { approximate, composite, readStrokes } from "./annotate.js";
+import { approximate, composite, readStrokes, readElementScrolls } from "./annotate.js";
 import { captureFrame, encodePng, sendInput } from "./rfb.js";
 import { inputEvents, readAction } from "./input.js";
 import { pressMenu, readMenuPath, readMenus } from "./menu.js";
@@ -435,6 +435,7 @@ export class AppService {
         if (entry.view.kind !== "web")
             throw new Error("Only previews can be drawn on.");
         const strokes = readStrokes(input.strokes);
+        const elementScrolls = readElementScrolls(input.elementScrolls);
         const whole = (n, min, max) => typeof n === "number" && Number.isFinite(n) && n >= min && n <= max;
         // Compare's shot is drawn on at its on-screen size, which can be small.
         if (!whole(input.viewport?.width, 40, 4000) || !whole(input.viewport?.height, 40, 8000))
@@ -466,7 +467,7 @@ export class AppService {
         }
         const outDir = path.join(os.tmpdir(), "bivy-shots", "annotate", entry.view.id);
         const dpr = whole(input.dpr, 1, 3) ? Math.round(input.dpr * 4) / 4 : 2;
-        const run = this.shooting.catch(() => { }).then(() => this.screenshots.take([entry], { widths: [viewport.width], themes: [input.theme === "dark" ? "dark" : "light"], path: page, height: viewport.height, scale: dpr, scroll }, outDir));
+        const run = this.shooting.catch(() => { }).then(() => this.screenshots.take([entry], { widths: [viewport.width], themes: [input.theme === "dark" ? "dark" : "light"], path: page, height: viewport.height, scale: dpr, scroll, ...(elementScrolls.length ? { elementScrolls } : {}) }, outDir));
         this.shooting = run;
         const [shot] = await run;
         if (!shot)
@@ -476,7 +477,7 @@ export class AppService {
         const landed = shot.scroll ?? scroll;
         const scrolledTo = Math.abs(landed.x - scroll.x) <= 2 && Math.abs(landed.y - scroll.y) <= 2;
         // Marks stay on the content they were drawn on, wherever the retake scrolled.
-        return finish(base, landed, approximate("retake", input.signals, scrolledTo));
+        return finish(base, landed, approximate("retake", input.signals, scrolledTo && shot.elementScrollsRestored !== false));
     }
     /** The managed server's output, as an attachable terminal (starts it if needed). */
     async logs(sessionId, appId, viewId) {

package/dist/protocol/client-command-schemas.js

@@ -23,6 +23,7 @@ export const CLIENT_COMMAND_SCHEMAS = {
     "apps.reviewMode": Type.Object({ ...request, ...session, appId: Type.String(), mode: Type.Union([Type.Literal("ready"), Type.Literal("every"), Type.Literal("off")]) }),
     "apps.annotate": Type.Object({ ...request, ...session, appId: Type.String(), viewId: Type.String(), path: Type.Optional(Type.String({ maxLength: 2048 })),
         viewport: Type.Object({ width: Type.Number(), height: Type.Number() }), scroll: Type.Optional(Type.Object({ x: Type.Number(), y: Type.Number() })),
+        elementScrolls: Type.Optional(Type.Array(Type.Object({ selector: Type.String({ minLength: 1, maxLength: 2048 }), x: Type.Number({ minimum: -100000, maximum: 100000 }), y: Type.Number({ minimum: -100000, maximum: 100000 }) }), { maxItems: 50 })),
         dpr: Type.Optional(Type.Number()), theme: Type.Optional(Type.Union([Type.Literal("light"), Type.Literal("dark")])), compare: Type.Optional(Type.Integer({ minimum: 0 })),
         strokes: Type.Array(Type.Object({ tool: Type.Union([Type.Literal("pen"), Type.Literal("box")]), points: Type.Array(Type.Array(Type.Number(), { minItems: 2, maxItems: 2 }), { maxItems: 10000 }) }), { minItems: 1, maxItems: 50 }),
         signals: Type.Optional(Type.Record(Type.String(), Type.Boolean())) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bivy/bivy",
-  "version": "0.18.5",
+  "version": "0.18.6-staging.2",
   "type": "module",
   "license": "AGPL-3.0-only",
   "description": "Run coding agents on machines you own. Open-source, self-hostable agent workspace.",