getobsrv 0.7.0 → 0.7.2

package/out/main/index.js

@@ -157,7 +157,14 @@ function parseUiState(raw) {
   if (typeof profileId !== "string" || profileId.length === 0 || profileId.length > MAX_UI_ID) return null;
   if (viewMode !== "1:1" && viewMode !== "fit") return null;
   if (mode !== "url" && mode !== "image") return null;
-  return { presetId, profileId, viewMode, mode, targetBounds: parseRect(raw.targetBounds) };
+  return {
+    presetId,
+    profileId,
+    viewMode,
+    mode,
+    targetBounds: parseRect(raw.targetBounds),
+    canvasBounds: parseRect(raw.canvasBounds)
+  };
 }
 function parseScrollPos(raw) {
   if (!isRecord$1(raw)) return null;
@@ -653,6 +660,7 @@ function registerIpc(ctx) {
   });
   electron.ipcMain.handle(IPC.setViewport, (e, width, height, rawDsf) => {
     assertRenderer(e);
+    viewportArrived = true;
     const dsf = parseDeviceScaleFactor(rawDsf);
     if (dsf === null) throw new Error("invalid deviceScaleFactor");
     const v = target.setViewport(width, height, dsf);
@@ -707,6 +715,7 @@ function registerIpc(ctx) {
     waiter(report);
   });
   const scrollBoth = async (req) => {
+    await awaitViewportStable();
     const base = { x: req.x, y: req.y };
     if (req.selector !== void 0) base.selector = req.selector;
     if (!native.webContents.isDestroyed()) native.webContents.send(IPC.applyScroll, base);
@@ -759,6 +768,7 @@ function registerIpc(ctx) {
   });
   const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "1:1", mode: "url" };
   let targetBounds = null;
+  let canvasBounds = null;
   const MAX_PENDING_APPLIES = 32;
   let rendererReported = false;
   let warnedPendingOverflow = false;
@@ -767,9 +777,10 @@ function registerIpc(ctx) {
     if (!fromRenderer(e)) return;
     const s = parseUiState(raw);
     if (!s) return;
-    const { targetBounds: bounds, ...state } = s;
+    const { targetBounds: bounds, canvasBounds: canvas, ...state } = s;
     Object.assign(uiState, state);
     targetBounds = bounds ?? null;
+    canvasBounds = canvas ?? null;
     if (!rendererReported) {
       rendererReported = true;
       for (const patch of pendingApplies.splice(0)) {
@@ -777,6 +788,58 @@ function registerIpc(ctx) {
       }
     }
   });
+  let viewportPending = false;
+  let viewportArrived = false;
+  const VIEWPORT_ARRIVAL_MS = 600;
+  const awaitViewportStable = async () => {
+    if (!viewportPending) return;
+    viewportPending = false;
+    const arrivalDeadline = Date.now() + VIEWPORT_ARRIVAL_MS;
+    while (!viewportArrived && Date.now() < arrivalDeadline) {
+      await new Promise((r) => setTimeout(r, SETTLE_POLL_MS));
+    }
+    await settleTarget();
+  };
+  const SETTLE_POLL_MS = 80;
+  const SETTLE_STABLE_READS = 2;
+  const SETTLE_BUDGET_MS = 4e3;
+  const SETTLE_DRAW_MS = 120;
+  const nextFrame = (budgetMs) => new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      target.off("frame", onFrame);
+      resolve(false);
+    }, budgetMs);
+    const onFrame = () => {
+      clearTimeout(timer);
+      target.off("frame", onFrame);
+      resolve(true);
+    };
+    target.on("frame", onFrame);
+    target.invalidate();
+  });
+  const settleTarget = async () => {
+    const deadline = Date.now() + SETTLE_BUDGET_MS;
+    let last = "";
+    let stable = 0;
+    while (Date.now() < deadline) {
+      const v = target.getViewport();
+      const key = `${v.width}x${v.height}`;
+      stable = key === last ? stable + 1 : 0;
+      last = key;
+      if (stable >= SETTLE_STABLE_READS) break;
+      await new Promise((r) => setTimeout(r, SETTLE_POLL_MS));
+    }
+    if (stable < SETTLE_STABLE_READS) return false;
+    const painted = await nextFrame(Math.max(0, deadline - Date.now()));
+    await new Promise((r) => setTimeout(r, SETTLE_DRAW_MS));
+    return painted;
+  };
+  const roundRect = (r) => ({
+    x: Math.round(r.x),
+    y: Math.round(r.y),
+    width: Math.max(1, Math.round(r.width)),
+    height: Math.max(1, Math.round(r.height))
+  });
   const appVersion = (() => {
     try {
       const pkg = JSON.parse(node_fs.readFileSync(node_path.join(__dirname, "..", "..", "package.json"), "utf8"));
@@ -831,6 +894,10 @@ function registerIpc(ctx) {
     navigate: navigateBoth,
     apply: (patch) => {
       if (win.isDestroyed()) return;
+      if (patch.presetId !== void 0) {
+        viewportPending = true;
+        viewportArrived = false;
+      }
       if (!rendererReported) {
         if (pendingApplies.length >= MAX_PENDING_APPLIES) {
           if (!warnedPendingOverflow) {
@@ -845,20 +912,28 @@ function registerIpc(ctx) {
       win.webContents.send(IPC.agentApply, patch);
     },
     captureVisible: async () => {
+      await awaitViewportStable();
+      await settleTarget();
       const image = await win.webContents.capturePage();
       const size = image.getSize();
       return { data: image.toPNG().toString("base64"), width: size.width, height: size.height };
     },
     captureTarget: async () => {
-      const bounds = targetBounds;
+      await awaitViewportStable();
+      const settled = await settleTarget();
+      const bounds = canvasBounds ?? targetBounds;
       const known = bounds !== null && bounds.width >= 1 && bounds.height >= 1;
-      const image = await win.webContents.capturePage(known ? bounds : void 0);
+      const image = await win.webContents.capturePage(known ? roundRect(bounds) : void 0);
       const size = image.getSize();
+      const warnings = [];
+      if (!known) warnings.push("the renderer has not reported the pane bounds yet; captured the full window instead");
+      else if (canvasBounds === null) warnings.push("the renderer has not reported the render bounds yet; captured the whole pane instead");
+      if (!settled) warnings.push("the target was still resizing when the capture budget ran out; the PNG may show a transitional frame");
       return {
         data: image.toPNG().toString("base64"),
         width: size.width,
         height: size.height,
-        warnings: known ? [] : ["the renderer has not reported the target pane bounds yet; captured the full window instead"]
+        warnings
       };
     },
     viewport: () => target.getViewport(),

package/out/mcp/server.js

@@ -128,8 +128,9 @@ const snapInputShape = {
     capture: zod_1.z
         .enum(['window', 'pane'])
         .optional()
-        .describe("Live mode only: what the returned PNG shows — 'window' (default) is the whole app window, 'pane' is just " +
-        'the target pane (its footer readout included). Ignored (with a note) when the render is headless.'),
+        .describe("Live mode only: what the returned PNG shows — 'window' (default) is the whole app window, 'pane' is the " +
+        'rendered screen cropped to itself, so a minified mobile preset is phone-shaped rather than a small phone ' +
+        'in a large rectangle. Ignored (with a note) when the render is headless.'),
 };
 const snapOutputShape = {
     mode: zod_1.z
@@ -290,10 +291,11 @@ const driveInputShape = {
     capture: zod_1.z
         .enum(['window', 'pane'])
         .optional()
-        .describe("Capture the app after the commands run: 'pane' crops to the target pane (the 1x render on its own), " +
-        "'window' takes the whole app window. This is how you see a scrolled or panned state — unlike obsrv_snap, " +
-        'nothing is navigated, so the scroll position survives. The PNG comes back inline when it is within the ' +
-        '1.5 MiB cap, and always as pngPath.'),
+        .describe("Capture the app after the commands run: 'pane' crops to the rendered screen itself (the render, not the " +
+        "empty pane around it — a minified mobile preset comes back phone-shaped), 'window' takes the whole app " +
+        'window. The capture waits for a preset resize to finish first, so the PNG matches the status beside it. ' +
+        'This is how you see a scrolled or panned state — unlike obsrv_snap, nothing is navigated, so the scroll ' +
+        'position survives. The PNG comes back inline when it is within the 1.5 MiB cap, and always as pngPath.'),
 };
 const driveOutputShape = {
     version: zod_1.z.string().describe('The running app version.'),

package/out/renderer/assets/{index-BP1S2N6S.js → index-Cgx8iixu.js}

@@ -14499,6 +14499,7 @@ function App() {
   const dropToken = reactExports.useRef(0);
   const targetPaneRef = reactExports.useRef(null);
   const [targetBounds, setTargetBounds] = reactExports.useState(null);
+  const [canvasBounds, setCanvasBounds] = reactExports.useState(null);
   const toggle = (which) => () => setDrawer((d) => d === which ? "none" : which);
   const setHost = useStore((s) => s.setHost);
   const setSettings = useStore((s) => s.setSettings);
@@ -14547,17 +14548,34 @@ function App() {
     const el = targetPaneRef.current;
     if (!el) return;
     const measure = () => {
-      const r = el.getBoundingClientRect();
-      setTargetBounds({ x: r.x, y: r.y, width: r.width, height: r.height });
+      const pane = el.getBoundingClientRect();
+      setTargetBounds({ x: pane.x, y: pane.y, width: pane.width, height: pane.height });
+      const canvas2 = el.querySelector("canvas");
+      if (!canvas2) {
+        setCanvasBounds(null);
+        return;
+      }
+      const c = canvas2.getBoundingClientRect();
+      const x = Math.max(pane.x, c.x);
+      const y = Math.max(pane.y, c.y);
+      const right = Math.min(pane.x + pane.width, c.x + c.width);
+      const bottom = Math.min(pane.y + pane.height, c.y + c.height);
+      setCanvasBounds(right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null);
     };
     const ro = new ResizeObserver(measure);
     ro.observe(el);
+    const canvas = el.querySelector("canvas");
+    if (canvas) ro.observe(canvas);
+    el.addEventListener("scroll", measure, { passive: true });
     measure();
-    return () => ro.disconnect();
+    return () => {
+      ro.disconnect();
+      el.removeEventListener("scroll", measure);
+    };
   }, []);
   reactExports.useEffect(() => {
-    window.obsrv.reportUiState({ presetId, profileId, viewMode, mode, targetBounds });
-  }, [presetId, profileId, viewMode, mode, targetBounds]);
+    window.obsrv.reportUiState({ presetId, profileId, viewMode, mode, targetBounds, canvasBounds });
+  }, [presetId, profileId, viewMode, mode, targetBounds, canvasBounds]);
   reactExports.useEffect(() => {
     return window.obsrv.onAgentApply((patch) => {
       const s = useStore.getState();

package/out/renderer/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:" />
     <title>Obsrv</title>
-    <script type="module" crossorigin src="./assets/index-BP1S2N6S.js"></script>
+    <script type="module" crossorigin src="./assets/index-Cgx8iixu.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-BeroS4wv.css">
   </head>
   <body>

package/out/shared/ipcPayloads.js

@@ -153,7 +153,14 @@ function parseUiState(raw) {
         return null;
     if (mode !== 'url' && mode !== 'image')
         return null;
-    return { presetId, profileId, viewMode, mode, targetBounds: parseRect(raw.targetBounds) };
+    return {
+        presetId,
+        profileId,
+        viewMode,
+        mode,
+        targetBounds: parseRect(raw.targetBounds),
+        canvasBounds: parseRect(raw.canvasBounds),
+    };
 }
 /**
  * A scroll offset reported by the sync preload in a page webContents. Both

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "getobsrv",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "See your site the way 1x screens see it",
   "main": "./out/main/index.js",
   "bin": {