@aayambansal/squint 0.4.6 → 0.4.8

package/README.md

@@ -174,6 +174,12 @@ squint doctor --probe             # run every engine end to end, verify auth act
   flagged from the live page, and on Next 16+ the framework's own `/_next/mcp`
   channel feeds structured errors straight into the fix loop. `/context` itemizes
   the injected-context bill per source, with staleness warnings.
+- **The sentinel**: gate evasion (deleted tests, added skips, suppressed
+  diagnostics, weakened checks, locked-path touches) detected deterministically per
+  turn and reported to you — never sent back to the engine that did it.
+- **Detachable sessions**: `squint serve` owns the session on a unix socket;
+  `squint attach` joins from any terminal (observer seats for teammates, driver
+  seat inherited on detach). Crash-proof, ssh-friendly, no cloud.
 - **Persistent checks**: assertions the engine verifies once persist as
   `.squint/checks/*.js` and replay against the live page every turn — one-off
   verifications compound into repo-versioned regression checks.

package/dist/App-766KSGON.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+import {
+  App
+} from "./chunk-JZMJGLIZ.js";
+import "./chunk-43NQNIJY.js";
+import "./chunk-YGPVP4YB.js";
+import "./chunk-ARDV4XH6.js";
+import "./chunk-AUJJGMZG.js";
+import "./chunk-YHRAOBI2.js";
+import "./chunk-QCHBDP46.js";
+import "./chunk-YGSF2TSO.js";
+import "./chunk-VH7OOFQP.js";
+import "./chunk-K5QJMSJH.js";
+import "./chunk-WAJXATCO.js";
+import "./chunk-62JNF5M2.js";
+import "./chunk-7RFQWOQV.js";
+import "./chunk-7CAGWFAQ.js";
+import "./chunk-BGBG2MNY.js";
+import "./chunk-IMDRXXFU.js";
+import "./chunk-KVYGPLWW.js";
+export {
+  App
+};

package/dist/{cdp-OYRHOPVP.js → cdp-2VVQOHWM.js}

@@ -2,12 +2,14 @@
 import {
   cdpCapture,
   hasWebSocket,
+  pixelDiffAttributed,
   pixelDiffPct,
   runFlow
-} from "./chunk-X2RZJT4L.js";
+} from "./chunk-BGBG2MNY.js";
 export {
   cdpCapture,
   hasWebSocket,
+  pixelDiffAttributed,
   pixelDiffPct,
   runFlow
 };

package/dist/{chunk-O2S6PAJE.js → chunk-7CAGWFAQ.js}

@@ -3,7 +3,7 @@
 // src/state/state.ts
 import fs from "fs";
 import path from "path";
-var IGNORED = ["preview/", "state.json", "variants/", "sandbox/", "sandbox.patch", "transcripts/"];
+var IGNORED = ["preview/", "state.json", "variants/", "sandbox/", "sandbox.patch", "transcripts/", "daemon.sock"];
 function ensureSquintIgnore(cwd) {
   const dir = path.join(cwd, ".squint");
   fs.mkdirSync(dir, { recursive: true });

package/dist/{chunk-D7Q3M6PA.js → chunk-7RFQWOQV.js}

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 import {
   ensureSquintIgnore
-} from "./chunk-O2S6PAJE.js";
+} from "./chunk-7CAGWFAQ.js";
+import {
+  cdpCapture,
+  hasWebSocket
+} from "./chunk-BGBG2MNY.js";
 import {
   findChrome,
   screenshot
 } from "./chunk-IMDRXXFU.js";
-import {
-  cdpCapture,
-  hasWebSocket
-} from "./chunk-X2RZJT4L.js";
 
 // src/preview/preview.ts
 import fs2 from "fs";
@@ -75,7 +75,7 @@ async function captureViewports(cwd, url) {
   if (hasWebSocket()) {
     try {
       const checks = loadChecks(cwd);
-      const { report, shots: shots2, a11y, slop, narration, phantoms, viewTransitions, components, checkFailures, webmcp } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true, checks);
+      const { report, shots: shots2, a11y, slop, narration, phantoms, viewTransitions, components, checkFailures, webmcp, jank } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true, checks);
       const errors2 = [];
       for (const route of routes.slice(1)) {
         try {
@@ -90,7 +90,7 @@ async function captureViewports(cwd, url) {
           errors2.push(`${route}: capture failed`);
         }
       }
-      return { shots: shots2, errors: errors2, runtime: report, a11y, slop, narration, phantoms, viewTransitions, components, checkFailures, webmcp };
+      return { shots: shots2, errors: errors2, runtime: report, a11y, slop, narration, phantoms, viewTransitions, components, checkFailures, webmcp, jank };
     } catch {
     }
   }
@@ -163,9 +163,15 @@ async function probeRuntime(url, cwd) {
 async function comparePulse(previous, current) {
   const chrome = findChrome();
   if (!chrome || !hasWebSocket()) return null;
-  const { pixelDiffPct } = await import("./cdp-OYRHOPVP.js");
+  const { pixelDiffPct } = await import("./cdp-2VVQOHWM.js");
   return pixelDiffPct(chrome, previous, current);
 }
+async function comparePulseAttributed(previous, current, url) {
+  const chrome = findChrome();
+  if (!chrome || !hasWebSocket()) return null;
+  const { pixelDiffAttributed } = await import("./cdp-2VVQOHWM.js");
+  return pixelDiffAttributed(chrome, previous, current, url);
+}
 function buildRuntimeFixPrompt(report) {
   return `The running app has runtime problems.${runtimeSection(report)}
 
@@ -191,6 +197,16 @@ ${narration.join("\n")}
 
 Judge this narration as an experience: does the reading order make sense? do names actually describe their targets? is anything announced as "(no accessible name)"? Fix real incoherence \u2014 this is how non-visual users meet the page.`;
 }
+function jankSection(jank) {
+  if (!jank || jank.length === 0) return "";
+  return `
+
+## Jank attribution (main-thread frames \u226550ms)
+
+${jank.join("\n")}
+
+Each line names the function behind a long animation frame observed during load and a scripted scroll. Fix the work (memoize, virtualize, move off the main thread) \u2014 do not remove the animation.`;
+}
 function webmcpSection(webmcp) {
   if (!webmcp || webmcp.length === 0) return "";
   return `
@@ -241,13 +257,13 @@ ${findings.join("\n")}
 
 These patterns make the page read as template output. Rework them within the committed design direction \u2014 this is style debt, not a defect list.`;
 }
-function buildReviewPrompt(shots, extra, runtime, a11y, slop, narration, phantoms, viewTransitions, components, webmcp) {
+function buildReviewPrompt(shots, extra, runtime, a11y, slop, narration, phantoms, viewTransitions, components, webmcp, jank) {
   const list = shots.map((s) => `- ${s.name}: ${s.path}`).join("\n");
   return `Screenshots of the running app were just captured:
 
 ${list}
 
-Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}${a11ySection(a11y)}${slopSection(slop)}${narrationSection(narration)}${phantomSection(phantoms)}${vtSection(viewTransitions)}${componentSection(components)}${webmcpSection(webmcp)}`;
+Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}${a11ySection(a11y)}${slopSection(slop)}${narrationSection(narration)}${phantomSection(phantoms)}${vtSection(viewTransitions)}${componentSection(components)}${webmcpSection(webmcp)}${jankSection(jank)}`;
 }
 
 export {
@@ -259,6 +275,7 @@ export {
   runtimeSummary,
   probeRuntime,
   comparePulse,
+  comparePulseAttributed,
   buildRuntimeFixPrompt,
   buildReviewPrompt
 };

package/dist/chunk-ATNTD3V5.js

@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+import {
+  Session
+} from "./chunk-YGPVP4YB.js";
+
+// src/daemon/client.ts
+import net from "net";
+function connectDaemon(sock, timeoutMs = 3e3) {
+  return new Promise((resolve, reject) => {
+    const socket = net.createConnection(sock);
+    const timer = setTimeout(() => {
+      socket.destroy();
+      reject(new Error(`no daemon listening at ${sock}`));
+    }, timeoutMs);
+    const handlers = [];
+    let buffer = "";
+    socket.on("connect", () => {
+      clearTimeout(timer);
+      resolve({
+        send: (msg) => socket.write(`${JSON.stringify(msg)}
+`),
+        onMessage: (handler) => handlers.push(handler),
+        close: () => socket.destroy()
+      });
+    });
+    socket.on("error", (error) => {
+      clearTimeout(timer);
+      reject(error);
+    });
+    socket.on("data", (chunk) => {
+      buffer += chunk.toString();
+      let idx;
+      while ((idx = buffer.indexOf("\n")) >= 0) {
+        const line = buffer.slice(0, idx);
+        buffer = buffer.slice(idx + 1);
+        if (!line.trim()) continue;
+        try {
+          const msg = JSON.parse(line);
+          for (const handler of handlers) handler(msg);
+        } catch {
+        }
+      }
+    });
+  });
+}
+
+// src/daemon/server.ts
+import crypto from "crypto";
+import fs from "fs";
+import net2 from "net";
+import os from "os";
+import path from "path";
+var MAX_ITEMS_SENT = 200;
+function socketPath(cwd) {
+  const direct = path.join(cwd, ".squint", "daemon.sock");
+  if (Buffer.byteLength(direct) <= 96) return direct;
+  const hash = crypto.createHash("sha256").update(cwd).digest("hex").slice(0, 12);
+  return path.join(os.tmpdir(), `squint-${hash}.sock`);
+}
+function startDaemon(opts) {
+  const session = new Session(opts);
+  const sock = socketPath(opts.cwd);
+  fs.mkdirSync(path.dirname(sock), { recursive: true });
+  fs.rmSync(sock, { force: true });
+  const clients = [];
+  const driver = () => clients[0];
+  const serialize = () => {
+    const state = session.getState();
+    return `${JSON.stringify({ type: "state", state: { ...state, items: state.items.slice(-MAX_ITEMS_SENT) } })}
+`;
+  };
+  const server = net2.createServer((socket) => {
+    clients.push(socket);
+    const role = socket === driver() ? "driver" : "observer";
+    socket.write(`${JSON.stringify({ type: "hello", role, engineId: session.getState().engineId })}
+`);
+    socket.write(serialize());
+    let buffer = "";
+    socket.on("data", (chunk) => {
+      buffer += chunk.toString();
+      let idx;
+      while ((idx = buffer.indexOf("\n")) >= 0) {
+        const line = buffer.slice(0, idx);
+        buffer = buffer.slice(idx + 1);
+        if (!line.trim()) continue;
+        let msg;
+        try {
+          msg = JSON.parse(line);
+        } catch {
+          continue;
+        }
+        if (msg.type === "ping") {
+          socket.write(`${JSON.stringify({ type: "ping" })}
+`);
+          continue;
+        }
+        if (socket !== driver()) {
+          socket.write(`${JSON.stringify({ type: "denied", reason: "observer \u2014 the driver steers this session" })}
+`);
+          continue;
+        }
+        if (msg.type === "input" && typeof msg.text === "string") session.input(msg.text);
+        else if (msg.type === "command" && typeof msg.text === "string") session.command(msg.text);
+        else if (msg.type === "interrupt") session.interrupt();
+        else if (msg.type === "cycleMode") session.cycleMode();
+      }
+    });
+    const drop = () => {
+      const index = clients.indexOf(socket);
+      if (index >= 0) clients.splice(index, 1);
+      const next = driver();
+      if (index === 0 && next && !next.destroyed) {
+        next.write(`${JSON.stringify({ type: "hello", role: "driver", engineId: session.getState().engineId })}
+`);
+      }
+    };
+    socket.on("close", drop);
+    socket.on("error", drop);
+  });
+  const unsubscribe = session.subscribe(() => {
+    const payload = serialize();
+    for (const client of clients) {
+      if (!client.destroyed) client.write(payload);
+    }
+  });
+  return new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(sock, () => {
+      resolve({
+        session,
+        clientCount: () => clients.length,
+        close: () => {
+          unsubscribe();
+          for (const client of clients) client.destroy();
+          server.close();
+          fs.rmSync(sock, { force: true });
+        }
+      });
+    });
+  });
+}
+
+export {
+  connectDaemon,
+  socketPath,
+  startDaemon
+};

package/dist/{chunk-XEQ6JXXL.js → chunk-AUJJGMZG.js}

@@ -15,7 +15,7 @@ function sandboxExists(cwd) {
 }
 function openSandbox(cwd) {
   const dir = sandboxDir(cwd);
-  void import("./state-QOS7WCZO.js").then(({ ensureSquintIgnore }) => ensureSquintIgnore(cwd)).catch(() => {
+  void import("./state-PLY7YAD2.js").then(({ ensureSquintIgnore }) => ensureSquintIgnore(cwd)).catch(() => {
   });
   if (sandboxExists(cwd)) return { dir, reused: true };
   fs.rmSync(dir, { recursive: true, force: true });

package/dist/{chunk-X2RZJT4L.js → chunk-BGBG2MNY.js}

@@ -189,6 +189,7 @@ async function runFlow(chromePath, baseUrl, flow, outDir) {
     const { sessionId } = await connection.send("Target.attachToTarget", { targetId, flatten: true });
     await connection.send("Page.enable", {}, sessionId);
     await connection.send("Page.addScriptToEvaluateOnNewDocument", { source: WEBMCP_SHIM }, sessionId).catch(() => null);
+    await connection.send("Page.addScriptToEvaluateOnNewDocument", { source: LOAF_SHIM }, sessionId).catch(() => null);
     await connection.send(
       "Emulation.setDeviceMetricsOverride",
       { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false },
@@ -237,6 +238,145 @@ async function runFlow(chromePath, baseUrl, flow, outDir) {
     setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
   }
 }
+async function pixelDiffAttributed(chromePath, pngA, pngB, url) {
+  const { child, wsUrl, profileDir } = await launchChrome(chromePath);
+  let connection = null;
+  try {
+    connection = await CdpConnection.connect(wsUrl, 1e4);
+    const { targetId } = await connection.send("Target.createTarget", { url: "about:blank" });
+    const { sessionId } = await connection.send("Target.attachToTarget", { targetId, flatten: true });
+    await connection.send("Runtime.enable", {}, sessionId);
+    const expression = `(async () => {
+      const load = (src) => new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('decode'));
+        img.src = src;
+      });
+      const a = await load('data:image/png;base64,${pngA.toString("base64")}');
+      const b = await load('data:image/png;base64,${pngB.toString("base64")}');
+      const w = Math.min(a.width, b.width), h = Math.min(a.height, b.height);
+      if (w === 0 || h === 0) return null;
+      const draw = (img) => {
+        const c = document.createElement('canvas');
+        c.width = w; c.height = h;
+        const ctx = c.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        return ctx.getImageData(0, 0, w, h).data;
+      };
+      const da = draw(a), db = draw(b);
+      const CELL = 32;
+      const gw = Math.ceil(w / CELL), gh = Math.ceil(h / CELL);
+      const marked = new Uint8Array(gw * gh);
+      let differ = 0, total = 0;
+      for (let y = 0; y < h; y += 2) {
+        for (let x = 0; x < w; x += 2) {
+          total++;
+          const i = (y * w + x) * 4;
+          if (Math.abs(da[i] - db[i]) > 8 || Math.abs(da[i + 1] - db[i + 1]) > 8 || Math.abs(da[i + 2] - db[i + 2]) > 8) {
+            differ++;
+            marked[Math.floor(y / CELL) * gw + Math.floor(x / CELL)] = 1;
+          }
+        }
+      }
+      // Flood-fill marked cells into region bounding boxes.
+      const seen = new Uint8Array(gw * gh);
+      const regions = [];
+      for (let cy = 0; cy < gh; cy++) {
+        for (let cx = 0; cx < gw; cx++) {
+          const start = cy * gw + cx;
+          if (!marked[start] || seen[start]) continue;
+          let minX = cx, maxX = cx, minY = cy, maxY = cy, cells = 0;
+          const stack = [start];
+          seen[start] = 1;
+          while (stack.length) {
+            const cell = stack.pop();
+            const x = cell % gw, y = Math.floor(cell / gw);
+            cells++;
+            if (x < minX) minX = x; if (x > maxX) maxX = x;
+            if (y < minY) minY = y; if (y > maxY) maxY = y;
+            for (const [dx, dy] of [[1,0],[-1,0],[0,1],[0,-1]]) {
+              const nx = x + dx, ny = y + dy;
+              if (nx < 0 || ny < 0 || nx >= gw || ny >= gh) continue;
+              const n = ny * gw + nx;
+              if (marked[n] && !seen[n]) { seen[n] = 1; stack.push(n); }
+            }
+          }
+          regions.push({
+            x: minX * CELL, y: minY * CELL,
+            w: Math.min(w, (maxX + 1) * CELL) - minX * CELL,
+            h: Math.min(h, (maxY + 1) * CELL) - minY * CELL,
+            cells,
+          });
+        }
+      }
+      regions.sort((p, q) => q.cells - p.cells);
+      const sizePenalty = (a.width !== b.width || a.height !== b.height) ? 1 : 0;
+      return { pct: Math.min(100, (differ / total) * 100 + sizePenalty), regions: regions.slice(0, 5), w, h };
+    })()`;
+    const { result } = await connection.send(
+      "Runtime.evaluate",
+      { expression, awaitPromise: true, returnByValue: true },
+      sessionId
+    );
+    const value = result?.value;
+    if (!value || typeof value.pct !== "number") return null;
+    if (!url || value.regions.length === 0 || value.pct < 0.5) return { pct: value.pct, sentences: [] };
+    let sentences = [];
+    try {
+      const page = await connection.send("Target.createTarget", { url: "about:blank" });
+      const attach = await connection.send("Target.attachToTarget", { targetId: page.targetId, flatten: true });
+      const pageSession = attach.sessionId;
+      await connection.send("Runtime.enable", {}, pageSession);
+      await connection.send("Page.enable", {}, pageSession);
+      await connection.send(
+        "Emulation.setDeviceMetricsOverride",
+        { width: value.w, height: value.h, deviceScaleFactor: 1, mobile: false },
+        pageSession
+      );
+      await connection.send("Page.navigate", { url }, pageSession);
+      await new Promise((resolve) => setTimeout(resolve, 1200));
+      const hitTest = `((regions) => regions.map((r) => {
+        const el = document.elementsFromPoint(r.x + r.w / 2, r.y + r.h / 2)
+          .find((e) => e !== document.documentElement && e !== document.body);
+        const where = r.w + '\xD7' + r.h + ' region @ (' + r.x + ',' + r.y + ')';
+        if (!el) return where + ' changed';
+        let label = el.tagName.toLowerCase();
+        if (el.id) label += '#' + el.id;
+        else if (el.classList[0]) label += '.' + el.classList[0];
+        const key = Object.keys(el).find((k) => k.startsWith('__reactFiber$'));
+        let chain = '';
+        if (key) {
+          let fiber = el[key];
+          const names = [];
+          let hops = 0;
+          while (fiber && hops < 50 && names.length < 2) {
+            const t = fiber.type;
+            const n = typeof t === 'function' ? (t.displayName || t.name || '') : '';
+            if (n && !names.includes(n)) names.push(n);
+            fiber = fiber.return; hops++;
+          }
+          chain = names.join(' < ');
+        }
+        return '<' + label + '>' + (chain ? ' (' + chain + ')' : '') + ': ' + where + ' changed';
+      }))(${JSON.stringify(value.regions)})`;
+      const hit = await connection.send(
+        "Runtime.evaluate",
+        { expression: hitTest, returnByValue: true },
+        pageSession
+      );
+      if (Array.isArray(hit.result?.value)) sentences = hit.result.value.map(String);
+    } catch {
+    }
+    return { pct: value.pct, sentences };
+  } catch {
+    return null;
+  } finally {
+    connection?.close();
+    child.kill("SIGKILL");
+    setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
+  }
+}
 async function pixelDiffPct(chromePath, pngA, pngB) {
   const { child, wsUrl, profileDir } = await launchChrome(chromePath);
   let connection = null;
@@ -445,11 +585,51 @@ var WEBMCP_SHIM = `(() => {
       if (t && t.name) window.__squintWebMcp.push(t.name + (t.description ? ' \u2014 ' + t.description : ''));
     }
   };
-  const target = navigator.modelContext || (navigator.modelContext = {});
-  const provide = target.provideContext && target.provideContext.bind(target);
-  target.provideContext = (params) => { record(params && params.tools); return provide ? provide(params) : undefined; };
-  const register = target.registerTool && target.registerTool.bind(target);
-  target.registerTool = (tool) => { record([tool]); return register ? register(tool) : undefined; };
+  const wrap = (target) => {
+    const provide = target.provideContext && target.provideContext.bind(target);
+    target.provideContext = (params) => { record(params && params.tools); return provide ? provide(params) : undefined; };
+    const register = target.registerTool && target.registerTool.bind(target);
+    target.registerTool = (tool) => { record([tool]); return register ? register(tool) : undefined; };
+    return target;
+  };
+  // The spec moved the API to document.modelContext (Chrome 150 drops
+  // the navigator location); shim both so either registration is seen.
+  wrap(document.modelContext || (document.modelContext = {}));
+  wrap(navigator.modelContext || (navigator.modelContext = {}));
+})()`;
+var LOAF_SHIM = `(() => {
+  window.__squintLoaf = [];
+  try {
+    new PerformanceObserver((list) => {
+      for (const e of list.getEntries()) {
+        if (e.duration < 50) continue;
+        const s = (e.scripts && e.scripts[0]) || {};
+        window.__squintLoaf.push({
+          duration: Math.round(e.duration),
+          fn: s.sourceFunctionName || '',
+          url: (s.sourceURL || s.name || '').split('/').pop() || '',
+          invoker: s.invoker || '',
+        });
+      }
+    }).observe({ type: 'long-animation-frame', buffered: true });
+  } catch {}
+})()`;
+var SCRIPTED_SCROLL = `(async () => {
+  const half = Math.max(0, (document.body.scrollHeight - innerHeight) / 2);
+  window.scrollTo({ top: half, behavior: 'smooth' });
+  await new Promise((r) => setTimeout(r, 400));
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+  await new Promise((r) => setTimeout(r, 300));
+  const seen = new Map();
+  for (const e of window.__squintLoaf || []) {
+    const key = e.fn + '@' + e.url + '@' + e.invoker;
+    const prev = seen.get(key);
+    if (!prev || e.duration > prev.duration) seen.set(key, e);
+  }
+  return [...seen.values()]
+    .sort((a, b) => b.duration - a.duration)
+    .slice(0, 6)
+    .map((e) => e.duration + 'ms frame \u2014 ' + (e.fn || e.invoker || 'script') + (e.url ? ' @ ' + e.url : ''));
 })()`;
 async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, audit = false, checks = []) {
   const { child, wsUrl, profileDir } = await launchChrome(chromePath);
@@ -464,6 +644,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
   let components = [];
   const checkFailures = [];
   let webmcp = [];
+  let jank = [];
   const requests = /* @__PURE__ */ new Map();
   let connection = null;
   try {
@@ -503,6 +684,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
     await connection.send("Network.enable", {}, sessionId);
     await connection.send("Page.enable", {}, sessionId);
     await connection.send("Page.addScriptToEvaluateOnNewDocument", { source: WEBMCP_SHIM }, sessionId).catch(() => null);
+    await connection.send("Page.addScriptToEvaluateOnNewDocument", { source: LOAF_SHIM }, sessionId).catch(() => null);
     await connection.send("Page.navigate", { url }, sessionId);
     const deadline = Date.now() + 12e3;
     while (!loaded && Date.now() < deadline) {
@@ -518,6 +700,15 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
       if (result?.value && typeof result.value === "object") perf = result.value;
     } catch {
     }
+    try {
+      const { result } = await connection.send(
+        "Runtime.evaluate",
+        { expression: SCRIPTED_SCROLL, returnByValue: true, awaitPromise: true },
+        sessionId
+      );
+      if (Array.isArray(result?.value)) jank = result.value.map(String);
+    } catch {
+    }
     try {
       const { result } = await connection.send(
         "Runtime.evaluate",
@@ -653,12 +844,13 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
     child.kill("SIGKILL");
     setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
   }
-  return { report, shots, a11y, slop, perf, narration, phantoms, viewTransitions, components, checkFailures, webmcp };
+  return { report, shots, a11y, slop, perf, narration, phantoms, viewTransitions, components, checkFailures, webmcp, jank };
 }
 
 export {
   hasWebSocket,
   runFlow,
+  pixelDiffAttributed,
   pixelDiffPct,
   cdpCapture
 };