@insitue/sdk 0.1.2 → 0.1.4

package/dist/capture-only.js

@@ -1,7 +1,7 @@
 import {
   mountCaptureOnly
-} from "./chunk-YUNYW2IC.js";
-import "./chunk-X7V2UEBO.js";
+} from "./chunk-TTH4NBFA.js";
+import "./chunk-65BGOX2M.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-X7V2UEBO.js → chunk-65BGOX2M.js}

@@ -582,7 +582,7 @@ function resolveTarget(el) {
   }
   return source === void 0 ? { confidence, componentStack, selector } : { source, confidence, componentStack, selector };
 }
-var CAPTURE_SCHEMA_VERSION = 2;
+var CAPTURE_SCHEMA_VERSION = 3;
 var PROTOCOL_VERSION = 4;
 function toIssueDraft(bundle) {
   const t3 = bundle.target;
@@ -597,7 +597,7 @@ function toIssueDraft(bundle) {
     `**Viewport:** ${bundle.viewport.w}\xD7${bundle.viewport.h}${bundle.viewport.breakpoint ? ` (${bundle.viewport.breakpoint})` : ""}`,
     `**Tailwind:** ${bundle.tailwindClasses.join(" ") || "\u2014"}`,
     `**Runtime:** ${bundle.runtime.console.length} log \xB7 ${bundle.runtime.network.length} net \xB7 ${errs} err`,
-    `**Screenshot:** ${bundle.screenshot ? "attached" : bundle.screenshotUnavailable ? `unavailable \u2014 ${bundle.screenshotUnavailable}` : "\u2014"}`,
+    `**Screenshot:** ${bundle.screenshot ? `attached` + (bundle.screenshot.source ? ` (${bundle.screenshot.source})` : "") + (bundle.screenshot.qualityNote ? ` \u2014 ${bundle.screenshot.qualityNote}` : "") : bundle.screenshotUnavailable ? `unavailable \u2014 ${bundle.screenshotUnavailable}` : "\u2014"}`,
     bundle.userNote ? `
 > ${bundle.userNote}` : "",
     `
@@ -802,6 +802,53 @@ function beginPick(mode = "element") {
   });
 }
 
+// src/capture-settings.ts
+var DEFAULT_SETTINGS = {
+  alwaysPixelPerfect: false
+};
+function storageKey() {
+  if (typeof location === "undefined") return "insitu:capture-settings";
+  return `insitu:capture-settings:${location.host}`;
+}
+var cached = null;
+function getCaptureSettings() {
+  if (cached) return cached;
+  if (typeof localStorage === "undefined") {
+    cached = { ...DEFAULT_SETTINGS };
+    return cached;
+  }
+  try {
+    const raw = localStorage.getItem(storageKey());
+    if (!raw) {
+      cached = { ...DEFAULT_SETTINGS };
+      return cached;
+    }
+    const parsed = JSON.parse(raw);
+    cached = { ...DEFAULT_SETTINGS, ...parsed };
+    return cached;
+  } catch {
+    cached = { ...DEFAULT_SETTINGS };
+    return cached;
+  }
+}
+function setCaptureSettings(patch) {
+  const next = { ...getCaptureSettings(), ...patch };
+  cached = next;
+  if (typeof localStorage !== "undefined") {
+    try {
+      localStorage.setItem(storageKey(), JSON.stringify(next));
+    } catch {
+    }
+  }
+  for (const l3 of listeners) l3(next);
+}
+var listeners = /* @__PURE__ */ new Set();
+function onCaptureSettingsChange(l3) {
+  listeners.add(l3);
+  l3(getCaptureSettings());
+  return () => listeners.delete(l3);
+}
+
 // ../../node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/util.js
 function resolveUrl(url, baseUrl) {
   if (url.match(/^[a-z]+:\/\//i)) {
@@ -1594,39 +1641,61 @@ async function toCanvas(node, options = {}) {
 }
 
 // src/capture.ts
-function crossOrigin(url) {
-  if (!url || url.startsWith("data:") || url.startsWith("blob:")) {
-    return false;
-  }
-  try {
-    return new URL(url, location.href).origin !== location.origin;
-  } catch {
-    return false;
-  }
-}
-function crossOriginMediaReason(root) {
-  const els = [root, ...root.querySelectorAll("*")];
-  for (const el of els) {
-    if (el instanceof HTMLImageElement) {
-      if (crossOrigin(el.currentSrc || el.src) && el.crossOrigin == null) {
-        const host = (() => {
-          try {
-            return new URL(el.currentSrc || el.src).host;
-          } catch {
-            return "cross-origin";
-          }
-        })();
-        return `cross-origin <img> (${host})`;
+var IMAGE_PLACEHOLDER = "data:image/svg+xml;base64," + (typeof btoa !== "undefined" ? btoa(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#e8e8e8"/><path d="M0 0 L32 32 M32 0 L0 32" stroke="#b0b0b0" stroke-width="1.5"/></svg>'
+) : "");
+async function preResolveImages() {
+  const restorations = [];
+  const failedImages = /* @__PURE__ */ new Set();
+  const images = Array.from(
+    document.querySelectorAll("img")
+  ).filter(
+    (img) => !img.closest?.("#insitu-root, [data-insitu-layer]")
+  );
+  await Promise.all(
+    images.map(async (img) => {
+      const srcToFetch = img.currentSrc || img.src;
+      if (!srcToFetch || srcToFetch.startsWith("data:") || srcToFetch.startsWith("blob:")) {
+        return;
       }
-    }
-    const bg = getComputedStyle(el).backgroundImage;
-    const m3 = bg && bg !== "none" ? /url\(["']?([^"')]+)["']?\)/.exec(bg) : null;
-    if (m3 && crossOrigin(m3[1])) return "cross-origin CSS background image";
-    if ((el instanceof HTMLVideoElement || el instanceof HTMLCanvasElement) && crossOrigin(el.src)) {
-      return `cross-origin <${el.tagName.toLowerCase()}>`;
-    }
-  }
-  return null;
+      try {
+        const res = await fetch(srcToFetch, { cache: "force-cache" });
+        if (!res.ok) {
+          failedImages.add(img);
+          return;
+        }
+        const blob = await res.blob();
+        const dataUrl = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = () => reject(reader.error);
+          reader.readAsDataURL(blob);
+        });
+        const origSrc = img.getAttribute("src");
+        const origSrcset = img.getAttribute("srcset");
+        restorations.push(() => {
+          if (origSrc != null) img.setAttribute("src", origSrc);
+          else img.removeAttribute("src");
+          if (origSrcset != null) img.setAttribute("srcset", origSrcset);
+          else img.removeAttribute("srcset");
+        });
+        img.removeAttribute("srcset");
+        img.src = dataUrl;
+        try {
+          await img.decode();
+        } catch {
+        }
+      } catch {
+        failedImages.add(img);
+      }
+    })
+  );
+  return {
+    restore: () => {
+      for (const r3 of restorations) r3();
+    },
+    failedImages
+  };
 }
 function findContextAncestor(el) {
   const minW = 420;
@@ -1649,41 +1718,265 @@ async function renderViewportCrop(cropRect, pixelRatio) {
   const bodyBg = getComputedStyle(document.body).backgroundColor;
   const htmlBg = getComputedStyle(document.documentElement).backgroundColor;
   const backgroundColor = bodyBg && bodyBg !== "rgba(0, 0, 0, 0)" && bodyBg !== "transparent" ? bodyBg : htmlBg && htmlBg !== "rgba(0, 0, 0, 0)" && htmlBg !== "transparent" ? htmlBg : "#ffffff";
-  const fullCanvas = await toCanvas(document.documentElement, {
-    pixelRatio,
-    cacheBust: true,
-    backgroundColor,
-    filter: (n2) => {
-      if (n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]")) {
-        return false;
-      }
-      if (n2 instanceof HTMLImageElement) {
-        if (crossOrigin(n2.currentSrc || n2.src) && n2.crossOrigin == null) {
-          return false;
-        }
+  const { restore: restoreImages, failedImages } = await preResolveImages();
+  try {
+    const fullCanvas = await toCanvas(document.documentElement, {
+      pixelRatio,
+      // cacheBust off — we've already swapped srcs to data URLs.
+      cacheBust: false,
+      backgroundColor,
+      imagePlaceholder: IMAGE_PLACEHOLDER,
+      // Strip only our own overlay layers.
+      filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
+    });
+    const sx = window.scrollX;
+    const sy = window.scrollY;
+    const out = document.createElement("canvas");
+    out.width = Math.max(1, Math.round(cropRect.width * pixelRatio));
+    out.height = Math.max(1, Math.round(cropRect.height * pixelRatio));
+    const ctx = out.getContext("2d");
+    if (!ctx) return { dataUrl: null, failedImages };
+    ctx.drawImage(
+      fullCanvas,
+      Math.round((cropRect.x + sx) * pixelRatio),
+      Math.round((cropRect.y + sy) * pixelRatio),
+      Math.round(cropRect.width * pixelRatio),
+      Math.round(cropRect.height * pixelRatio),
+      0,
+      0,
+      out.width,
+      out.height
+    );
+    if (looksBlankUniform(ctx, out.width, out.height)) {
+      return { dataUrl: null, failedImages };
+    }
+    return { dataUrl: out.toDataURL("image/png"), failedImages };
+  } finally {
+    restoreImages();
+  }
+}
+function looksBlankUniform(ctx, w3, h3) {
+  if (w3 < 4 || h3 < 4) return false;
+  const samples = [];
+  for (let i3 = 0; i3 < 4; i3++) {
+    for (let j3 = 0; j3 < 4; j3++) {
+      const x2 = Math.floor(w3 * (i3 + 0.5) / 4);
+      const y3 = Math.floor(h3 * (j3 + 0.5) / 4);
+      try {
+        const px2 = ctx.getImageData(x2, y3, 1, 1).data;
+        samples.push(`${px2[0]},${px2[1]},${px2[2]},${px2[3]}`);
+      } catch {
+        return true;
       }
-      return true;
     }
-  });
-  const sx = window.scrollX;
-  const sy = window.scrollY;
-  const out = document.createElement("canvas");
-  out.width = Math.max(1, Math.round(cropRect.width * pixelRatio));
-  out.height = Math.max(1, Math.round(cropRect.height * pixelRatio));
-  const ctx = out.getContext("2d");
-  if (!ctx) return null;
-  ctx.drawImage(
-    fullCanvas,
-    Math.round((cropRect.x + sx) * pixelRatio),
-    Math.round((cropRect.y + sy) * pixelRatio),
-    Math.round(cropRect.width * pixelRatio),
-    Math.round(cropRect.height * pixelRatio),
-    0,
-    0,
-    out.width,
-    out.height
+  }
+  return new Set(samples).size === 1;
+}
+function assessCaptureQuality(cropRect, failedImages) {
+  const out = {
+    unembeddableImages: 0,
+    hasVideo: false,
+    hasCanvas: false
+  };
+  const all = document.querySelectorAll("img, video, canvas");
+  for (const el of all) {
+    if (el instanceof Element && el.closest?.("#insitu-root, [data-insitu-layer]")) {
+      continue;
+    }
+    const r3 = el.getBoundingClientRect();
+    const overlaps = r3.right >= cropRect.x && r3.left <= cropRect.x + cropRect.width && r3.bottom >= cropRect.y && r3.top <= cropRect.y + cropRect.height;
+    if (!overlaps) continue;
+    if (el instanceof HTMLImageElement) {
+      if (failedImages.has(el)) out.unembeddableImages++;
+    } else if (el instanceof HTMLVideoElement) {
+      if (r3.width > 0 && r3.height > 0) out.hasVideo = true;
+    } else if (el instanceof HTMLCanvasElement) {
+      if (r3.width > 0 && r3.height > 0) out.hasCanvas = true;
+    }
+  }
+  return out;
+}
+function describeImperfection(q2) {
+  const parts = [];
+  if (q2.unembeddableImages > 0) {
+    parts.push(
+      `${q2.unembeddableImages} non-CORS image${q2.unembeddableImages > 1 ? "s" : ""}`
+    );
+  }
+  if (q2.hasVideo) parts.push("video frame");
+  if (q2.hasCanvas) parts.push("canvas content");
+  return parts.join(" + ");
+}
+var displayMediaState = {
+  stream: null,
+  trackEndedHandler: null,
+  idleTimer: null,
+  deniedAt: null
+};
+var IDLE_MS = 9e4;
+var displayMediaListeners = /* @__PURE__ */ new Set();
+function onDisplayMediaChange(l3) {
+  displayMediaListeners.add(l3);
+  l3(displayMediaState.stream != null);
+  return () => displayMediaListeners.delete(l3);
+}
+function notifyDisplayMedia(reason) {
+  const active = displayMediaState.stream != null;
+  for (const l3 of displayMediaListeners) l3(active, reason);
+}
+function stopDisplayMedia(reason = "stopped") {
+  if (displayMediaState.stream) {
+    for (const t3 of displayMediaState.stream.getTracks()) t3.stop();
+  }
+  if (displayMediaState.idleTimer) clearTimeout(displayMediaState.idleTimer);
+  if (displayMediaState.trackEndedHandler && displayMediaState.stream) {
+    for (const t3 of displayMediaState.stream.getTracks()) {
+      t3.removeEventListener("ended", displayMediaState.trackEndedHandler);
+    }
+  }
+  displayMediaState.stream = null;
+  displayMediaState.trackEndedHandler = null;
+  displayMediaState.idleTimer = null;
+  notifyDisplayMedia(reason);
+}
+function bumpIdleTimer() {
+  if (displayMediaState.idleTimer) clearTimeout(displayMediaState.idleTimer);
+  displayMediaState.idleTimer = setTimeout(
+    () => stopDisplayMedia("idle"),
+    IDLE_MS
   );
-  return out.toDataURL("image/png");
+}
+function supportsDisplayMedia() {
+  return typeof navigator !== "undefined" && typeof navigator.mediaDevices?.getDisplayMedia === "function";
+}
+async function ensureDisplayMediaStream() {
+  if (!supportsDisplayMedia()) return null;
+  if (displayMediaState.stream) {
+    bumpIdleTimer();
+    return displayMediaState.stream;
+  }
+  if (displayMediaState.deniedAt && Date.now() - displayMediaState.deniedAt < 6e4) {
+    return null;
+  }
+  try {
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      // `displaySurface: 'browser'` + `preferCurrentTab: true` makes
+      // Chrome/Edge default-select the current tab in the prompt.
+      // Other browsers ignore the hints; user still picks manually.
+      video: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        displaySurface: "browser"
+      },
+      audio: false,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      preferCurrentTab: true
+    });
+    displayMediaState.stream = stream;
+    displayMediaState.deniedAt = null;
+    const handler = () => stopDisplayMedia("track-ended");
+    for (const t3 of stream.getTracks()) t3.addEventListener("ended", handler);
+    displayMediaState.trackEndedHandler = handler;
+    bumpIdleTimer();
+    notifyDisplayMedia("granted");
+    return stream;
+  } catch {
+    displayMediaState.deniedAt = Date.now();
+    notifyDisplayMedia("denied");
+    return null;
+  }
+}
+async function retryDisplayMedia() {
+  displayMediaState.deniedAt = null;
+  const s3 = await ensureDisplayMediaStream();
+  return s3 != null;
+}
+function hideOverlayLayersBriefly() {
+  const id = "insitu-capture-hide";
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = `
+    #insitu-root, [data-insitu-layer] { visibility: hidden !important; }
+  `;
+  document.head.appendChild(style);
+  return () => {
+    style.remove();
+  };
+}
+async function tryGrabViaDisplayMedia(cropRect, pixelRatio) {
+  const wasActive = displayMediaState.stream != null;
+  const stream = await ensureDisplayMediaStream();
+  if (!stream) return null;
+  const fresh = !wasActive;
+  bumpIdleTimer();
+  const restoreOverlay = hideOverlayLayersBriefly();
+  await new Promise(
+    (r3) => requestAnimationFrame(() => requestAnimationFrame(() => r3()))
+  );
+  try {
+    const track = stream.getVideoTracks()[0];
+    if (!track) return null;
+    let bitmap = null;
+    const Ctor = window.ImageCapture;
+    if (Ctor) {
+      bitmap = await new Ctor(track).grabFrame();
+    } else {
+      bitmap = await grabFrameViaVideo(stream);
+    }
+    if (!bitmap) return null;
+    const frameW = bitmap.width;
+    const frameH = bitmap.height;
+    const scaleX = frameW / window.innerWidth;
+    const scaleY = frameH / window.innerHeight;
+    const sx = Math.max(0, Math.round(cropRect.x * scaleX));
+    const sy = Math.max(0, Math.round(cropRect.y * scaleY));
+    const sw = Math.min(frameW - sx, Math.round(cropRect.width * scaleX));
+    const sh = Math.min(frameH - sy, Math.round(cropRect.height * scaleY));
+    const out = document.createElement("canvas");
+    out.width = Math.max(1, Math.round(cropRect.width * pixelRatio));
+    out.height = Math.max(1, Math.round(cropRect.height * pixelRatio));
+    const ctx = out.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, out.width, out.height);
+    bitmap.close?.();
+    return { dataUrl: out.toDataURL("image/png"), fresh };
+  } finally {
+    restoreOverlay();
+  }
+}
+async function grabFrameViaVideo(stream) {
+  const video = document.createElement("video");
+  video.srcObject = stream;
+  video.muted = true;
+  video.playsInline = true;
+  video.style.position = "fixed";
+  video.style.pointerEvents = "none";
+  video.style.opacity = "0";
+  video.style.width = "1px";
+  video.style.height = "1px";
+  document.body.appendChild(video);
+  try {
+    await video.play().catch(() => void 0);
+    await new Promise((resolve, reject) => {
+      const onReady = () => {
+        video.removeEventListener("loadeddata", onReady);
+        resolve();
+      };
+      video.addEventListener("loadeddata", onReady, { once: true });
+      setTimeout(() => reject(new Error("video timeout")), 2e3);
+    });
+    const tmp = document.createElement("canvas");
+    tmp.width = video.videoWidth;
+    tmp.height = video.videoHeight;
+    const ctx = tmp.getContext("2d");
+    if (!ctx) throw new Error("no 2d ctx");
+    ctx.drawImage(video, 0, 0);
+    return await createImageBitmap(tmp);
+  } finally {
+    video.remove();
+  }
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("pagehide", () => stopDisplayMedia("pagehide"));
 }
 function elementFor(sel) {
   if (sel.mode === "element") return sel.pointerPath?.[0] ?? null;
@@ -1698,6 +1991,7 @@ async function buildBundle(sel) {
   const el = elementFor(sel);
   const rt = runtimeSnapshot();
   const dpr = window.devicePixelRatio || 1;
+  const settings = getCaptureSettings();
   let screenshot;
   let screenshotUnavailable;
   if (el instanceof HTMLElement) {
@@ -1716,32 +2010,66 @@ async function buildBundle(sel) {
     el.style.outline = "3px solid #ff6b00";
     el.style.outlineOffset = "2px";
     try {
-      const dataUrl = await renderViewportCrop(
-        cropRect,
-        // Cap pixel ratio for full-document rasterise — 2× of a
-        // long page is enough to blow per-tab canvas memory caps
-        // on some browsers (and 1.5× still looks crisp).
-        Math.min(dpr, 1.5)
-      );
-      if (!dataUrl || dataUrl.length < 1024) {
-        const taint = crossOriginMediaReason(el);
-        screenshotUnavailable = taint ? `${taint} \u2014 can't rasterise in-browser` : "rasterise produced an empty image";
-      } else {
+      const skipLayer1 = settings.alwaysPixelPerfect;
+      let layer1Result = null;
+      let quality = null;
+      if (!skipLayer1) {
+        const r3 = await renderViewportCrop(cropRect, Math.min(dpr, 1.5));
+        layer1Result = r3.dataUrl;
+        quality = assessCaptureQuality(cropRect, r3.failedImages);
+      }
+      const imperfect = !layer1Result || quality != null && (quality.unembeddableImages > 0 || quality.hasVideo || quality.hasCanvas);
+      if (imperfect || skipLayer1) {
+        const grab = await tryGrabViaDisplayMedia(
+          cropRect,
+          Math.min(dpr, 2)
+        );
+        if (grab) {
+          screenshot = {
+            mime: "image/png",
+            dataUrl: grab.dataUrl,
+            bounds: {
+              x: cropRect.x,
+              y: cropRect.y,
+              width: cropRect.width,
+              height: cropRect.height
+            },
+            source: "display-media"
+          };
+        } else if (layer1Result) {
+          const reason = quality ? describeImperfection(quality) : "non-CORS content";
+          screenshot = {
+            mime: "image/png",
+            dataUrl: layer1Result,
+            bounds: {
+              x: cropRect.x,
+              y: cropRect.y,
+              width: cropRect.width,
+              height: cropRect.height
+            },
+            source: "rasterise",
+            qualityNote: `${reason} couldn't be embedded \u2014 grant tab capture for pixel-perfect screenshots`
+          };
+        } else {
+          screenshotUnavailable = supportsDisplayMedia() ? "rasterise failed \u2014 grant tab capture for pixel-perfect screenshots" : "rasterise failed and tab capture unsupported in this browser";
+        }
+      } else if (layer1Result) {
         screenshot = {
           mime: "image/png",
-          dataUrl,
-          // Bounds describe the SCREENSHOT (the crop region) so
-          // the dashboard knows what slice of viewport this is.
+          dataUrl: layer1Result,
           bounds: {
             x: cropRect.x,
             y: cropRect.y,
             width: cropRect.width,
             height: cropRect.height
-          }
+          },
+          source: "rasterise"
         };
+      } else {
+        screenshotUnavailable = "rasterise produced an empty image";
       }
-    } catch {
-      screenshotUnavailable = "rasterise failed";
+    } catch (err) {
+      screenshotUnavailable = err instanceof Error ? `rasterise failed: ${err.message}` : "rasterise failed";
     } finally {
       el.style.outline = orig.outline;
       el.style.outlineOffset = orig.outlineOffset;
@@ -1784,5 +2112,11 @@ export {
   installRuntimeCollectors,
   runtimeErrorCount,
   beginPick,
+  getCaptureSettings,
+  setCaptureSettings,
+  onCaptureSettingsChange,
+  onDisplayMediaChange,
+  stopDisplayMedia,
+  retryDisplayMedia,
   buildBundle
 };

package/dist/{chunk-VMBBJKFF.js → chunk-7GRJ5SZQ.js}

@@ -5,11 +5,17 @@ import {
   beginPick,
   buildBundle,
   d,
+  getCaptureSettings,
   installRuntimeCollectors,
   k,
+  onCaptureSettingsChange,
+  onDisplayMediaChange,
+  retryDisplayMedia,
   runtimeErrorCount,
+  setCaptureSettings,
+  stopDisplayMedia,
   y
-} from "./chunk-X7V2UEBO.js";
+} from "./chunk-65BGOX2M.js";
 
 // src/client.ts
 var CompanionClient = class {
@@ -238,6 +244,11 @@ function App(props) {
   const [showCtx, setShowCtx] = d(false);
   const [showSettings, setShowSettings] = d(false);
   const [autoApply, setAutoApply] = d(false);
+  const [captureSettings, setCaptureSettingsState] = d(
+    getCaptureSettings()
+  );
+  const [displayMediaActive, setDisplayMediaActive] = d(false);
+  const [displayMediaDenied, setDisplayMediaDenied] = d(false);
   const [agentReady, setAgentReady] = d(null);
   const [agentNote, setAgentNote] = d("");
   const [chatInput, setChatInput] = d("");
@@ -433,6 +444,18 @@ function App(props) {
     const el = threadRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [messages, changes, turnBusy, activity]);
+  y(() => {
+    const off1 = onDisplayMediaChange((active, reason) => {
+      setDisplayMediaActive(active);
+      if (reason === "denied") setDisplayMediaDenied(true);
+      if (reason === "granted") setDisplayMediaDenied(false);
+    });
+    const off2 = onCaptureSettingsChange((s) => setCaptureSettingsState(s));
+    return () => {
+      off1();
+      off2();
+    };
+  }, []);
   y(() => {
     const onKey = (ev) => {
       const meta = ev.metaKey || ev.ctrlKey;
@@ -964,8 +987,79 @@ ${resolved.snippet}`
       "div",
       { style: `color:${muted};margin-top:4px` },
       "Writes proposed changes immediately. Still checkpointed & undoable; no manual gate. Resets on reload."
+    ),
+    k(
+      "label",
+      {
+        style: "display:flex;gap:8px;align-items:center;cursor:pointer;color:#ececef;margin-top:10px"
+      },
+      [
+        k("input", {
+          type: "checkbox",
+          checked: captureSettings.alwaysPixelPerfect,
+          onChange: (ev) => setCaptureSettings({
+            alwaysPixelPerfect: ev.target.checked
+          })
+        }),
+        k("span", {}, "Always pixel-perfect screenshots")
+      ]
+    ),
+    k(
+      "div",
+      { style: `color:${muted};margin-top:4px` },
+      "Skips the silent rasterise path and always uses tab capture. One permission per session; every screenshot is OS-pixel accurate."
     )
   ]) : null;
+  const captureActivePill = displayMediaActive ? k(
+    "div",
+    {
+      style: "display:flex;align-items:center;gap:8px;padding:6px 10px;margin:6px 0;border-radius:4px;background:#1a2a1f;border:1px solid #2f5040;color:#9fe7b8;font-size:11px"
+    },
+    [
+      k(
+        "span",
+        { style: "display:inline-flex;align-items:center;gap:6px" },
+        [
+          k("span", {
+            style: "width:8px;height:8px;border-radius:50%;background:#2fd16b;box-shadow:0 0 6px #2fd16b"
+          }),
+          k("span", {}, "Tab capture active")
+        ]
+      ),
+      k(
+        "button",
+        {
+          style: `${btn};margin-left:auto`,
+          onClick: () => stopDisplayMedia("user"),
+          title: "Stop sharing this tab"
+        },
+        "Stop"
+      )
+    ]
+  ) : null;
+  const captureDeniedNudge = displayMediaDenied && !displayMediaActive ? k(
+    "div",
+    {
+      style: "display:flex;align-items:center;gap:8px;padding:6px 10px;margin:6px 0;border-radius:4px;background:#2a1f1a;border:1px solid #5a3a2a;color:#e8c69f;font-size:11px"
+    },
+    [
+      k(
+        "span",
+        { style: "flex:1" },
+        "Screenshot missed some cross-origin content. Grant tab capture for pixel-perfect captures."
+      ),
+      k(
+        "button",
+        {
+          style: btn,
+          onClick: () => {
+            void retryDisplayMedia();
+          }
+        },
+        "Enable"
+      )
+    ]
+  ) : null;
   const panel = open ? k(
     "div",
     {
@@ -1021,6 +1115,8 @@ ${resolved.snippet}`
         ]
       ),
       settings,
+      captureActivePill,
+      captureDeniedNudge,
       ctx,
       conversation,
       timeline,

package/dist/{chunk-YUNYW2IC.js → chunk-TTH4NBFA.js}

@@ -6,8 +6,11 @@ import {
   d,
   installRuntimeCollectors,
   k,
+  onDisplayMediaChange,
+  retryDisplayMedia,
+  stopDisplayMedia,
   y
-} from "./chunk-X7V2UEBO.js";
+} from "./chunk-65BGOX2M.js";
 
 // src/capture-only.ts
 var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
@@ -68,6 +71,32 @@ function CaptureOnlyApp(props) {
   const [phase, setPhase] = d("idle");
   const [bundle, setBundle] = d(null);
   const [note, setNote] = d("");
+  const [tabCaptureActive, setTabCaptureActive] = d(false);
+  const [tabCaptureDenied, setTabCaptureDenied] = d(false);
+  y(() => {
+    return onDisplayMediaChange((active, reason) => {
+      setTabCaptureActive(active);
+      if (reason === "denied") setTabCaptureDenied(true);
+      if (reason === "granted") setTabCaptureDenied(false);
+    });
+  }, []);
+  const retryWithPixelPerfect = async () => {
+    if (!bundle?.target?.selector) {
+      await retryDisplayMedia();
+      return;
+    }
+    const granted = await retryDisplayMedia();
+    if (granted) {
+      setPhase("picking");
+      const sel = await beginPick("element").catch(() => null);
+      if (sel) {
+        setBundle(await buildBundle(sel));
+        setPhase("compose");
+      } else {
+        setPhase("compose");
+      }
+    }
+  };
   const sink = new IssueTrackerSink(async (draft) => {
     globalThis.__insitu_capture__ = {
       title: draft.title,
@@ -235,6 +264,56 @@ function CaptureOnlyApp(props) {
         },
         "Screenshot unavailable \u2014 sending the rest."
       ) : null,
+      // Nudge: the screenshot is structurally OK but some content
+      // couldn't be embedded (non-CORS img / video / canvas). Offer
+      // a one-tap upgrade to pixel-perfect mode + re-pick.
+      bundle?.screenshot?.qualityNote && !tabCaptureActive ? k(
+        "div",
+        {
+          style: `display:flex;align-items:center;gap:8px;padding:9px 11px;background:#fff7ed;border:1px solid #fbd9b1;color:#8a4b00;border-radius:10px;font-size:12px;margin-bottom:12px`
+        },
+        [
+          k(
+            "span",
+            { style: "flex:1" },
+            "Some content didn't capture cleanly. Enable tab capture for a pixel-perfect screenshot."
+          ),
+          k(
+            "button",
+            {
+              onClick: () => void retryWithPixelPerfect(),
+              style: `all:unset;cursor:pointer;color:#5751e6;font-weight:600;padding:2px 8px;border:1px solid #c5c2ff;border-radius:6px;background:#fff`
+            },
+            "Enable"
+          )
+        ]
+      ) : null,
+      // Active badge — tells the user why the browser's red "tab
+      // sharing" indicator is on + lets them stop it.
+      tabCaptureActive ? k(
+        "div",
+        {
+          style: `display:flex;align-items:center;gap:8px;padding:7px 11px;background:#ecfdf5;border:1px solid #b6e6cf;color:#117a52;border-radius:10px;font-size:11.5px;margin-bottom:12px`
+        },
+        [
+          k("span", {
+            style: "width:8px;height:8px;border-radius:50%;background:#117a52;box-shadow:0 0 6px #117a52"
+          }),
+          k(
+            "span",
+            { style: "flex:1" },
+            "Tab capture active \u2014 screenshots are pixel-perfect."
+          ),
+          k(
+            "button",
+            {
+              onClick: () => stopDisplayMedia("user"),
+              style: `all:unset;cursor:pointer;color:#117a52;font-weight:600;padding:2px 6px`
+            },
+            "Stop"
+          )
+        ]
+      ) : null,
       k("textarea", {
         value: note,
         rows: 3,

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-YUNYW2IC.js";
+} from "./chunk-TTH4NBFA.js";
 import {
   mountInSitue
-} from "./chunk-VMBBJKFF.js";
-import "./chunk-X7V2UEBO.js";
+} from "./chunk-7GRJ5SZQ.js";
+import "./chunk-65BGOX2M.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";

package/dist/overlay.js

@@ -1,7 +1,7 @@
 import {
   mountInSitue
-} from "./chunk-VMBBJKFF.js";
-import "./chunk-X7V2UEBO.js";
+} from "./chunk-7GRJ5SZQ.js";
+import "./chunk-65BGOX2M.js";
 export {
   mountInSitue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "InSitue capture SDK — drop one snippet into your deployed app; your users point at a bug, InSitue opens a verified pull request.",
   "license": "MIT",
   "type": "module",