@insitue/sdk 0.1.1 → 0.1.3

package/dist/capture-only.js

@@ -1,7 +1,7 @@
 import {
   mountCaptureOnly
-} from "./chunk-BYR4ZXVS.js";
-import "./chunk-6SMY7D6U.js";
+} from "./chunk-PRCHVT5A.js";
+import "./chunk-RYS5Z2BU.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-BYR4ZXVS.js → chunk-PRCHVT5A.js}

@@ -6,8 +6,11 @@ import {
   d,
   installRuntimeCollectors,
   k,
+  onDisplayMediaChange,
+  retryDisplayMedia,
+  stopDisplayMedia,
   y
-} from "./chunk-6SMY7D6U.js";
+} from "./chunk-RYS5Z2BU.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/{chunk-6SMY7D6U.js → chunk-RYS5Z2BU.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)) {
@@ -1592,10 +1639,6 @@ async function toCanvas(node, options = {}) {
   context.drawImage(img, 0, 0, canvas.width, canvas.height);
   return canvas;
 }
-async function toPng(node, options = {}) {
-  const canvas = await toCanvas(node, options);
-  return canvas.toDataURL();
-}
 
 // src/capture.ts
 function crossOrigin(url) {
@@ -1608,29 +1651,290 @@ function crossOrigin(url) {
     return false;
   }
 }
-function crossOriginMediaReason(root) {
-  const els = [root, ...root.querySelectorAll("*")];
-  for (const el of els) {
+var IMAGE_PLACEHOLDER = "data:image/svg+xml;utf8," + encodeURIComponent(
+  `<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>`
+);
+function findContextAncestor(el) {
+  const minW = 420;
+  const minH = 140;
+  const maxW = window.innerWidth * 1.2;
+  const maxH = window.innerHeight * 1.2;
+  let cur = el;
+  for (let depth = 0; depth < 8; depth++) {
+    const r3 = cur.getBoundingClientRect();
+    if (r3.width >= minW && r3.height >= minH) return cur;
+    const parent = cur.parentElement;
+    if (!parent) return cur;
+    const pr = parent.getBoundingClientRect();
+    if (pr.width > maxW || pr.height > maxH) return cur;
+    cur = parent;
+  }
+  return cur;
+}
+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,
+    imagePlaceholder: IMAGE_PLACEHOLDER,
+    // Only filter out our own overlay layers — leave cross-origin
+    // <img>s in place so embedImages can fetch+inline them.
+    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 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
+  );
+  if (looksBlankUniform(ctx, out.width, out.height)) {
+    return null;
+  }
+  return out.toDataURL("image/png");
+}
+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 new Set(samples).size === 1;
+}
+function assessCaptureQuality(cropRect) {
+  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 (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})`;
+      const src = el.currentSrc || el.src;
+      if (!src) continue;
+      const browserLoaded = el.complete && el.naturalWidth > 0;
+      const corsSafe = !crossOrigin(src) || el.crossOrigin != null;
+      if (!browserLoaded || !corsSafe) {
+        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;
     }
-    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 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);
     }
   }
-  return null;
+  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
+  );
+}
+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;
@@ -1645,33 +1949,90 @@ 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) {
-    const taint = crossOriginMediaReason(el);
-    if (taint) {
-      screenshotUnavailable = `${taint} \u2014 can't rasterise in-browser`;
-    } else {
-      try {
-        const r3 = el.getBoundingClientRect();
-        const dataUrl = await toPng(el, {
-          pixelRatio: Math.min(dpr, 2),
-          cacheBust: true,
-          // Don't try to screenshot our own overlay if it overlaps.
-          filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
-        });
-        if (!dataUrl || dataUrl.length < 256) {
-          screenshotUnavailable = "rasterise produced an empty image";
-        } else {
+    const context = findContextAncestor(el);
+    const cr = context.getBoundingClientRect();
+    const cropRect = new DOMRect(
+      Math.max(0, cr.x),
+      Math.max(0, cr.y),
+      Math.min(window.innerWidth, cr.right) - Math.max(0, cr.x),
+      Math.min(window.innerHeight, cr.bottom) - Math.max(0, cr.y)
+    );
+    const orig = {
+      outline: el.style.outline,
+      outlineOffset: el.style.outlineOffset
+    };
+    el.style.outline = "3px solid #ff6b00";
+    el.style.outlineOffset = "2px";
+    try {
+      const skipLayer1 = settings.alwaysPixelPerfect;
+      let layer1Result = null;
+      let quality = null;
+      if (!skipLayer1) {
+        layer1Result = await renderViewportCrop(
+          cropRect,
+          Math.min(dpr, 1.5)
+        );
+        quality = assessCaptureQuality(cropRect);
+      }
+      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,
-            bounds: { x: r3.x, y: r3.y, width: r3.width, height: r3.height }
+            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";
         }
-      } catch {
-        screenshotUnavailable = "rasterise failed";
+      } else if (layer1Result) {
+        screenshot = {
+          mime: "image/png",
+          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 (err) {
+      screenshotUnavailable = err instanceof Error ? `rasterise failed: ${err.message}` : "rasterise failed";
+    } finally {
+      el.style.outline = orig.outline;
+      el.style.outlineOffset = orig.outlineOffset;
     }
   }
   return {
@@ -1711,5 +2072,11 @@ export {
   installRuntimeCollectors,
   runtimeErrorCount,
   beginPick,
+  getCaptureSettings,
+  setCaptureSettings,
+  onCaptureSettingsChange,
+  onDisplayMediaChange,
+  stopDisplayMedia,
+  retryDisplayMedia,
   buildBundle
 };

package/dist/{chunk-LGN4LKXD.js → chunk-VWPAKOUW.js}

@@ -5,11 +5,17 @@ import {
   beginPick,
   buildBundle,
   d,
+  getCaptureSettings,
   installRuntimeCollectors,
   k,
+  onCaptureSettingsChange,
+  onDisplayMediaChange,
+  retryDisplayMedia,
   runtimeErrorCount,
+  setCaptureSettings,
+  stopDisplayMedia,
   y
-} from "./chunk-6SMY7D6U.js";
+} from "./chunk-RYS5Z2BU.js";
 
 // src/client.ts
 var CompanionClient = class {
@@ -173,6 +179,42 @@ function diffLines(diff) {
     return k("div", { style: `color:${color};white-space:pre` }, ln || " ");
   });
 }
+function renderMessageBody(text) {
+  const parts = [];
+  const lines = text.split("\n");
+  let buf = [];
+  let inCode = false;
+  let lang = "";
+  const flush = () => {
+    if (buf.length === 0) return;
+    parts.push({ code: inCode, lang, text: buf.join("\n") });
+    buf = [];
+  };
+  for (const line of lines) {
+    const fence = /^```(\w*)\s*$/.exec(line);
+    if (fence) {
+      flush();
+      inCode = !inCode;
+      lang = inCode ? fence[1] ?? "" : "";
+      continue;
+    }
+    buf.push(line);
+  }
+  flush();
+  return parts.map(
+    (p) => p.code ? k(
+      "div",
+      {
+        style: `${card};padding:8px;margin:4px 0;font:${mono};color:#ececef;overflow-x:auto;white-space:pre`
+      },
+      p.text
+    ) : k(
+      "div",
+      { style: "white-space:pre-wrap;word-break:break-word" },
+      p.text
+    )
+  );
+}
 function diffBlock(changes) {
   return changes.map(
     (c) => k("div", { style: "margin:6px 0" }, [
@@ -202,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("");
@@ -225,6 +272,7 @@ function App(props) {
   const changesRef = A([]);
   const activeTurnRef = A(null);
   const threadRef = A(null);
+  const panelRef = A(null);
   autoApplyRef.current = autoApply;
   changesRef.current = changes;
   activeTurnRef.current = activeTurn;
@@ -235,6 +283,32 @@ function App(props) {
     }
     return [...ms, { role: "agent", text: delta }];
   });
+  const storageKey = `insitue:session:${typeof window !== "undefined" ? window.location.origin : "default"}`;
+  const hydratedRef = A(false);
+  y(() => {
+    if (hydratedRef.current) return;
+    hydratedRef.current = true;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (Array.isArray(saved.messages)) setMessages(saved.messages);
+      if (Array.isArray(saved.history)) setHistory(saved.history);
+      if (typeof saved.autoApply === "boolean") setAutoApply(saved.autoApply);
+      if (typeof saved.open === "boolean") setOpen(saved.open);
+    } catch {
+    }
+  }, [storageKey]);
+  y(() => {
+    if (!hydratedRef.current) return;
+    try {
+      window.localStorage.setItem(
+        storageKey,
+        JSON.stringify({ messages, history, autoApply, open })
+      );
+    } catch {
+    }
+  }, [messages, history, autoApply, open, storageKey]);
   y(() => {
     installRuntimeCollectors();
     const c = new CompanionClient(props.port, {
@@ -370,6 +444,37 @@ 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;
+      if (meta && ev.key === "k") {
+        ev.preventDefault();
+        setOpen(true);
+        setTimeout(() => {
+          const ta = panelRef.current?.querySelector(
+            "textarea"
+          );
+          ta?.focus();
+        }, 0);
+      } else if (ev.key === "Escape" && open && !chatInput.trim()) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, chatInput]);
   const captureSel = async (sel) => {
     setLastSel(sel);
     const b = await buildBundle(sel);
@@ -394,9 +499,30 @@ function App(props) {
     }
   };
   const sendChat = () => {
-    if (!client || !bundle || !chatInput.trim() || turnBusy) return;
-    const turnId = bundle.id;
+    if (!client || !chatInput.trim() || turnBusy) return;
     const text = chatInput.trim();
+    if (text.startsWith("/")) {
+      const [cmd, ...rest] = text.split(/\s+/);
+      if (cmd === "/clear") {
+        setMessages([]);
+        setChatInput("");
+        return;
+      }
+      if (cmd === "/undo") {
+        const top = history.find((h) => h.status === "applied");
+        if (top) client.sendUndo(top.turnId);
+        setChatInput("");
+        return;
+      }
+      if (cmd === "/commit") {
+        const msg = rest.join(" ") || "Apply InSitue session changes";
+        client.sendCommitSession(msg);
+        setChatInput("");
+        return;
+      }
+    }
+    if (!bundle) return;
+    const turnId = bundle.id;
     setActiveTurn({ turnId, prompt: text, sel: lastSel });
     setMessages((ms) => [...ms, { role: "user", text }]);
     setChatInput("");
@@ -550,12 +676,26 @@ ${resolved.snippet}`
     },
     [
       ...messages.map(
-        (m) => k(
+        (m, i) => k(
           "div",
           {
-            style: m.role === "user" ? `align-self:flex-end;max-width:88%;${card};border-color:#2e2e3c;padding:6px 8px;color:#ececef;white-space:pre-wrap;word-break:break-word` : `align-self:flex-start;max-width:96%;padding:6px 8px;color:#ececef;white-space:pre-wrap;word-break:break-word`
+            style: m.role === "user" ? `align-self:flex-end;max-width:88%;${card};border-color:#2e2e3c;padding:6px 8px;color:#ececef;white-space:pre-wrap;word-break:break-word;cursor:pointer` : `align-self:flex-start;max-width:96%;padding:6px 8px;color:#ececef`,
+            // Click any prior user message to re-populate the
+            // input — matches Claude.ai / Cursor edit-and-retry.
+            // The original turn stays in the thread; sending
+            // creates a new turn.
+            onClick: m.role === "user" ? () => {
+              setChatInput(m.text);
+              setTimeout(() => {
+                const ta = panelRef.current?.querySelector(
+                  "textarea"
+                );
+                ta?.focus();
+              }, 0);
+            } : void 0,
+            title: m.role === "user" ? "click to edit + retry" : void 0
           },
-          m.text
+          m.role === "agent" ? renderMessageBody(m.text) : m.text
         )
       ),
       thinking && turnBusy ? k(
@@ -687,7 +827,7 @@ ${resolved.snippet}`
       proposed,
       k("textarea", {
         value: chatInput,
-        placeholder: messages.length ? "reply\u2026 (the agent remembers this thread)" : "what does this do? \xB7 make the padding bigger \xB7 fix this bug",
+        placeholder: messages.length ? "reply\u2026 (the agent remembers this thread) \xB7 /undo /clear /commit" : "what does this do? \xB7 make the padding bigger \xB7 fix this bug \xB7 \u2318K to focus",
         rows: 2,
         onInput: (ev) => setChatInput(ev.target.value),
         onKeyDown: (ev) => {
@@ -847,11 +987,83 @@ ${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",
     {
+      ref: panelRef,
       style: {
         position: "fixed",
         bottom: "64px",
@@ -903,6 +1115,8 @@ ${resolved.snippet}`
         ]
       ),
       settings,
+      captureActivePill,
+      captureDeniedNudge,
       ctx,
       conversation,
       timeline,

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-BYR4ZXVS.js";
+} from "./chunk-PRCHVT5A.js";
 import {
   mountInSitue
-} from "./chunk-LGN4LKXD.js";
-import "./chunk-6SMY7D6U.js";
+} from "./chunk-VWPAKOUW.js";
+import "./chunk-RYS5Z2BU.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";

package/dist/overlay.js

@@ -1,7 +1,7 @@
 import {
   mountInSitue
-} from "./chunk-LGN4LKXD.js";
-import "./chunk-6SMY7D6U.js";
+} from "./chunk-VWPAKOUW.js";
+import "./chunk-RYS5Z2BU.js";
 export {
   mountInSitue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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",