@insitue/sdk 0.1.1 → 0.1.2

package/dist/capture-only.js

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

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

@@ -9,7 +9,7 @@ import {
   k,
   runtimeErrorCount,
   y
-} from "./chunk-6SMY7D6U.js";
+} from "./chunk-X7V2UEBO.js";
 
 // src/client.ts
 var CompanionClient = class {
@@ -173,6 +173,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" }, [
@@ -225,6 +261,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 +272,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 +433,25 @@ function App(props) {
     const el = threadRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [messages, changes, turnBusy, activity]);
+  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 +476,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 +653,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 +804,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) => {
@@ -852,6 +969,7 @@ ${resolved.snippet}`
   const panel = open ? k(
     "div",
     {
+      ref: panelRef,
       style: {
         position: "fixed",
         bottom: "64px",

package/dist/{chunk-6SMY7D6U.js → chunk-X7V2UEBO.js}

@@ -1592,10 +1592,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) {
@@ -1632,6 +1628,63 @@ function crossOriginMediaReason(root) {
   }
   return null;
 }
+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,
+    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;
+        }
+      }
+      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 out.toDataURL("image/png");
+}
 function elementFor(sel) {
   if (sel.mode === "element") return sel.pointerPath?.[0] ?? null;
   if (sel.rect) {
@@ -1648,30 +1701,50 @@ async function buildBundle(sel) {
   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 {
-          screenshot = {
-            mime: "image/png",
-            dataUrl,
-            bounds: { x: r3.x, y: r3.y, width: r3.width, height: r3.height }
-          };
-        }
-      } catch {
-        screenshotUnavailable = "rasterise failed";
+    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 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 {
+        screenshot = {
+          mime: "image/png",
+          dataUrl,
+          // Bounds describe the SCREENSHOT (the crop region) so
+          // the dashboard knows what slice of viewport this is.
+          bounds: {
+            x: cropRect.x,
+            y: cropRect.y,
+            width: cropRect.width,
+            height: cropRect.height
+          }
+        };
       }
+    } catch {
+      screenshotUnavailable = "rasterise failed";
+    } finally {
+      el.style.outline = orig.outline;
+      el.style.outlineOffset = orig.outlineOffset;
     }
   }
   return {

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

@@ -7,7 +7,7 @@ import {
   installRuntimeCollectors,
   k,
   y
-} from "./chunk-6SMY7D6U.js";
+} from "./chunk-X7V2UEBO.js";
 
 // src/capture-only.ts
 var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-BYR4ZXVS.js";
+} from "./chunk-YUNYW2IC.js";
 import {
   mountInSitue
-} from "./chunk-LGN4LKXD.js";
-import "./chunk-6SMY7D6U.js";
+} from "./chunk-VMBBJKFF.js";
+import "./chunk-X7V2UEBO.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-VMBBJKFF.js";
+import "./chunk-X7V2UEBO.js";
 export {
   mountInSitue
 };

package/package.json

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