@insitue/sdk 0.2.0 → 0.3.1

package/dist/{chunk-62N4L6RA.js → chunk-BCKDBCPG.js}

@@ -682,9 +682,6 @@ function installRuntimeCollectors() {
     });
   });
 }
-function runtimeErrorCount() {
-  return errorBuf.length;
-}
 function runtimeSnapshot() {
   return {
     console: consoleBuf.slice(),
@@ -802,54 +799,6 @@ function beginPick(mode = "element") {
   });
 }
 
-// src/capture-settings.ts
-var DEFAULT_SETTINGS = {
-  alwaysPixelPerfect: false,
-  disableLayer2: 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)) {
@@ -1641,6 +1590,49 @@ async function toCanvas(node, options = {}) {
   return canvas;
 }
 
+// src/capture-settings.ts
+var DEFAULT_SETTINGS = {
+  alwaysPixelPerfect: false,
+  disableLayer2: 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();
+
 // src/capture.ts
 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>'
@@ -2230,22 +2222,743 @@ async function buildBundle(sel) {
   };
 }
 
+// src/client.ts
+var CompanionClient = class {
+  constructor(port, events) {
+    this.port = port;
+    this.events = events;
+    this.base = `http://127.0.0.1:${port}`;
+    this.wsUrl = `ws://127.0.0.1:${port}`;
+  }
+  port;
+  events;
+  ws = null;
+  base;
+  wsUrl;
+  pending = /* @__PURE__ */ new Map();
+  async connect() {
+    this.events.onState("connecting");
+    let token;
+    try {
+      const res = await fetch(`${this.base}/insitu/handshake`);
+      if (!res.ok) throw new Error(`handshake ${res.status}`);
+      token = (await res.json()).token;
+    } catch (e3) {
+      this.events.onState("error", `companion unreachable (run \`npx insitue\`)`);
+      return;
+    }
+    await new Promise((done) => {
+      const ws = new WebSocket(this.wsUrl);
+      this.ws = ws;
+      ws.onopen = () => ws.send(
+        JSON.stringify({ t: "hello", protocolVersion: PROTOCOL_VERSION, token })
+      );
+      ws.onmessage = (ev) => {
+        const msg = JSON.parse(ev.data);
+        if (msg.t === "hello-ok") {
+          this.events.onState("connected", `companion ${msg.companionVersion}`);
+          done();
+        } else if (msg.t === "pong") {
+          const cb = this.pending.get(msg.nonce);
+          if (cb) {
+            this.pending.delete(msg.nonce);
+            cb(performance.now() - Number(msg.nonce.split(":")[1]));
+          }
+        } else if (msg.t === "agent-status") {
+          this.events.onAgentStatus?.({
+            ready: msg.ready,
+            transport: msg.transport,
+            warnings: msg.warnings,
+            blockers: msg.blockers
+          });
+        } else if (msg.t === "agent-stream") {
+          this.events.onAgentEvent?.(msg.event);
+        } else if (msg.t === "changeset-proposed") {
+          this.events.onChangeset?.(msg.turnId, msg.files);
+        } else if (msg.t === "changeset-applied") {
+          this.events.onApplied?.(
+            msg.turnId,
+            msg.files,
+            msg.checkpointRef
+          );
+        } else if (msg.t === "agent-undone") {
+          this.events.onUndone?.(msg.turnId, msg.restored);
+        } else if (msg.t === "agent-session-undone") {
+          this.events.onSessionUndone?.(msg.restored);
+        } else if (msg.t === "agent-session-committed") {
+          this.events.onSessionCommitted?.(msg.commit, msg.files);
+        } else if (msg.t === "capture-resolved") {
+          this.events.onResolved?.(msg.id, msg.resolved, msg.note);
+        } else if (msg.t === "subscribers-attached") {
+          this.events.onSubscribersAttached?.(msg.count);
+        } else if (msg.t === "error") {
+          this.events.onState("error", `${msg.code}: ${msg.message}`);
+          done();
+        }
+      };
+      ws.onerror = () => {
+        this.events.onState("error", "websocket error");
+        done();
+      };
+      ws.onclose = () => {
+        if (this.ws === ws) this.events.onState("idle");
+      };
+    });
+  }
+  ping() {
+    return new Promise((resolve, reject) => {
+      const ws = this.ws;
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        reject(new Error("not connected"));
+        return;
+      }
+      const nonce = `n:${performance.now()}:${Math.random()}`;
+      this.pending.set(nonce, resolve);
+      ws.send(JSON.stringify({ t: "ping", nonce }));
+      setTimeout(() => {
+        if (this.pending.delete(nonce)) reject(new Error("ping timeout"));
+      }, 3e3);
+    });
+  }
+  submitCapture(bundle) {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+    ws.send(JSON.stringify({ t: "capture", bundle }));
+    return true;
+  }
+  sendTurn(turnId, bundleId, userMessage) {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+    ws.send(
+      JSON.stringify({ t: "agent-turn", turnId, bundleId, userMessage })
+    );
+    return true;
+  }
+  /** #162: route the user's typed intent to a CLI/MCP subscriber
+   *  (e.g. claude with `/insitue:connect` open) instead of the
+   *  in-overlay headless agent. No reply arrives back through this
+   *  client — the external claude shows its work in its own
+   *  terminal. Callers should switch the panel UI to a "Sent to
+   *  claude in your terminal" affordance after this returns. */
+  sendAsk(turnId, bundleId, text) {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+    ws.send(
+      JSON.stringify({ t: "agent-ask-external", turnId, bundleId, text })
+    );
+    return true;
+  }
+  cancelTurn(turnId) {
+    this.ws?.send(JSON.stringify({ t: "agent-cancel", turnId }));
+  }
+  sendDecision(turnId, decision, files, reason) {
+    this.ws?.send(
+      JSON.stringify({ t: "agent-decision", turnId, decision, files, reason })
+    );
+  }
+  sendUndo(turnId) {
+    this.ws?.send(JSON.stringify({ t: "agent-undo", turnId }));
+  }
+  sendUndoSession() {
+    this.ws?.send(JSON.stringify({ t: "agent-undo-session" }));
+  }
+  sendCommitSession(message) {
+    this.ws?.send(JSON.stringify({ t: "agent-commit-session", message }));
+  }
+  dispose() {
+    this.ws?.close();
+    this.ws = null;
+  }
+};
+
+// src/capture-only.ts
+var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
+var DEFAULT_COMPANION_PORT = 5747;
+function resolveSink(opts) {
+  if (opts.sink) return opts.sink;
+  if (opts.projectKey) {
+    return opts.endpoint ? {
+      kind: "cloud",
+      projectKey: opts.projectKey,
+      endpoint: opts.endpoint
+    } : { kind: "cloud", projectKey: opts.projectKey };
+  }
+  return { kind: "companion" };
+}
+async function postCloud(sink, draft) {
+  const endpoint = sink.endpoint ?? DEFAULT_INGEST;
+  try {
+    await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-insitue-key": sink.projectKey
+      },
+      body: JSON.stringify({
+        bundle: draft.bundle,
+        note: draft.bundle.userNote ?? null,
+        projectKey: sink.projectKey
+      }),
+      credentials: "omit",
+      keepalive: true
+    });
+  } catch {
+  }
+}
+var CLOUD = {
+  ink: "#16161a",
+  sub: "#6b6c77",
+  faint: "#9a9aa4",
+  line: "#e9e9ee",
+  surface: "#ffffff",
+  surface2: "#f6f6f9",
+  accent: "linear-gradient(180deg,#6b63ff,#5751e6)",
+  accentSolid: "#5751e6",
+  accentRing: "rgba(91,91,240,.30)",
+  good: "#117a52",
+  goodBg: "#ecfdf5",
+  goodLine: "#b6e6cf",
+  warnBg: "#fff7ed",
+  warnLine: "#fbd9b1",
+  warnInk: "#8a4b00",
+  sans: '-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif',
+  mono: 'ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace',
+  shadow: "0 12px 40px rgba(20,20,35,.16),0 2px 8px rgba(20,20,35,.08)",
+  buttonInk: "#ffffff"
+};
+var DEV = {
+  ink: "#ececef",
+  sub: "#a0a0aa",
+  faint: "#6b6b75",
+  line: "#26262d",
+  surface: "#13131a",
+  surface2: "#1a1a22",
+  accent: "linear-gradient(180deg,#ff8240,#ff6b00)",
+  accentSolid: "#ff6b00",
+  accentRing: "rgba(255,107,0,.28)",
+  good: "#5fd190",
+  goodBg: "#0f1f15",
+  goodLine: "#1f4030",
+  warnBg: "#251a0f",
+  warnLine: "#5a3a1a",
+  warnInk: "#f5b56b",
+  sans: '-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif',
+  mono: 'ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace',
+  shadow: "0 14px 44px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35)",
+  buttonInk: "#0f0f12"
+};
+function defaultDeliver(draft) {
+  globalThis.__insitu_capture__ = {
+    title: draft.title,
+    body: draft.body,
+    bundle: draft.bundle
+  };
+  console.info("[insitue] capture:", draft.title);
+  try {
+    const blob = new Blob([JSON.stringify(draft, null, 2)], {
+      type: "application/json"
+    });
+    const a3 = document.createElement("a");
+    a3.href = URL.createObjectURL(blob);
+    a3.download = `insitue-capture-${Date.now()}.json`;
+    a3.click();
+    URL.revokeObjectURL(a3.href);
+  } catch {
+  }
+}
+function CaptureApp(props) {
+  const isDev = props.sink.kind === "companion";
+  const C3 = isDev ? DEV : CLOUD;
+  const [phase, setPhase] = d2("idle");
+  const [bundle, setBundle] = d2(null);
+  const [note, setNote] = d2("");
+  const [tabCaptureActive, setTabCaptureActive] = d2(false);
+  const [tabCaptureDenied, setTabCaptureDenied] = d2(false);
+  const [companionState, setCompanionState] = d2(
+    isDev ? "connecting" : "idle"
+  );
+  const [companionDetail, setCompanionDetail] = d2("");
+  const noteRef = A2(null);
+  const companionRef = A2(null);
+  y2(() => {
+    if (!isDev) return;
+    const port = props.sink.kind === "companion" ? props.sink.port ?? DEFAULT_COMPANION_PORT : DEFAULT_COMPANION_PORT;
+    let cancelled = false;
+    let reconnectTimer = null;
+    const connect = () => {
+      if (cancelled) return;
+      const c3 = new CompanionClient(port, {
+        onState: (s3, detail) => {
+          setCompanionState(s3);
+          if (detail) setCompanionDetail(detail);
+          if (s3 === "error" || s3 === "idle") {
+            if (!cancelled) {
+              reconnectTimer = setTimeout(connect, 2500);
+            }
+          }
+        }
+      });
+      companionRef.current = c3;
+      void c3.connect();
+    };
+    connect();
+    return () => {
+      cancelled = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      companionRef.current?.dispose();
+      companionRef.current = null;
+    };
+  }, [isDev, props.sink]);
+  y2(() => {
+    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,
+      body: draft.body,
+      bundle: draft.bundle
+    };
+    if (props.onCapture) {
+      props.onCapture(draft, draft.bundle);
+      return;
+    }
+    if (props.sink.kind === "cloud") {
+      await postCloud(props.sink, draft);
+      return;
+    }
+    const client = companionRef.current;
+    if (!client || companionState !== "connected") {
+      defaultDeliver(draft);
+      return;
+    }
+    client.submitCapture(draft.bundle);
+  });
+  y2(() => {
+    if (phase !== "sent") return;
+    const t4 = setTimeout(() => {
+      setPhase("idle");
+      setBundle(null);
+      setNote("");
+    }, 2400);
+    return () => clearTimeout(t4);
+  }, [phase]);
+  y2(() => {
+    if (phase === "compose") {
+      const id = setTimeout(() => noteRef.current?.focus(), 30);
+      return () => clearTimeout(id);
+    }
+    return void 0;
+  }, [phase]);
+  y2(() => {
+    const onKey = (ev) => {
+      const t4 = ev.target;
+      const tagName = t4?.tagName?.toLowerCase();
+      const inHostInput = tagName === "input" || tagName === "textarea" || t4?.isContentEditable;
+      const isMeta = ev.metaKey || ev.ctrlKey;
+      if (isMeta && (ev.key === "k" || ev.key === "K") && !inHostInput) {
+        if (phase === "idle" || phase === "compose" || phase === "sent") {
+          ev.preventDefault();
+          void startPick();
+        }
+        return;
+      }
+      if (ev.key === "Escape") {
+        if (phase === "compose") {
+          ev.preventDefault();
+          reset();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [phase]);
+  const startPick = async () => {
+    setPhase("picking");
+    try {
+      const sel = await beginPick("element");
+      if (!sel) {
+        setPhase("idle");
+        return;
+      }
+      setBundle(await buildBundle(sel));
+      setPhase("compose");
+    } catch {
+      setPhase("idle");
+    }
+  };
+  const send = async () => {
+    if (!bundle) return;
+    setPhase("sending");
+    const withNote = note.trim() ? { ...bundle, userNote: note.trim() } : bundle;
+    try {
+      await sink.submit(withNote);
+    } finally {
+      setPhase("sent");
+    }
+  };
+  const reset = () => {
+    setPhase("idle");
+    setBundle(null);
+    setNote("");
+  };
+  const onNoteKeyDown = (ev) => {
+    if (isDev) {
+      if (ev.key === "Enter" && !ev.shiftKey && note.trim() && bundle) {
+        ev.preventDefault();
+        void send();
+      }
+    } else if ((ev.metaKey || ev.ctrlKey) && ev.key === "Enter") {
+      ev.preventDefault();
+      if (note.trim() && bundle) void send();
+    }
+  };
+  const dot = k("span", {
+    style: `width:9px;height:9px;border-radius:3px;background:${C3.accent};box-shadow:0 1px 4px ${C3.accentRing}`
+  });
+  const confidenceLabel = (b2) => {
+    if (!b2?.target) return null;
+    const c3 = b2.target.confidence;
+    if (c3 === "exact") return "exact";
+    if (c3 === "approximate") return "approximate";
+    if (c3 === "selector-only") return "selector only";
+    return c3;
+  };
+  if (phase === "idle" || phase === "picking") {
+    const picking = phase === "picking";
+    const offline = isDev && companionState !== "connected";
+    return k(
+      "button",
+      {
+        onClick: picking ? void 0 : () => void startPick(),
+        style: `all:unset;position:fixed;bottom:20px;right:20px;z-index:2147483000;display:flex;align-items:center;gap:9px;cursor:${picking ? "default" : "pointer"};padding:11px 16px;font:600 13.5px/1 ${C3.sans};color:${C3.ink};background:${C3.surface};border:1px solid ${C3.line};border-radius:999px;box-shadow:${C3.shadow};letter-spacing:-.01em`,
+        title: isDev ? offline ? "InSitue companion not running \u2014 start `claude` with /insitue:connect" : "Pick an element to talk to claude about" : "Report a problem"
+      },
+      picking ? [
+        k("span", {
+          style: `width:9px;height:9px;border-radius:50%;background:${C3.accentSolid};animation:ipulse 1.1s ease-in-out infinite`
+        }),
+        k("span", { style: `color:${C3.sub}` }, isDev ? "Click an element" : "Click the broken element"),
+        k("span", { style: `color:${C3.faint}` }, "\xB7 Esc to cancel"),
+        k(
+          "style",
+          {},
+          "@keyframes ipulse{0%,100%{opacity:.35}50%{opacity:1}}"
+        )
+      ] : isDev ? [
+        k("span", {
+          style: `width:9px;height:9px;border-radius:50%;background:${offline ? "#9a9aa4" : "#5fd190"};box-shadow:${offline ? "none" : "0 0 6px #5fd190"}`
+        }),
+        k("span", {}, "InSitue Dev"),
+        k(
+          "span",
+          { style: `color:${C3.faint};font-family:${C3.mono};font-size:11px` },
+          offline ? "offline" : "\u2192 claude"
+        ),
+        k(
+          "span",
+          {
+            style: `color:${C3.faint};font-family:${C3.mono};font-size:10.5px;padding:1px 5px;border:1px solid ${C3.line};border-radius:4px;background:${C3.surface2}`,
+            title: "Press to pick an element"
+          },
+          "\u2318K"
+        )
+      ] : [dot, "Report a problem"]
+    );
+  }
+  const t3 = bundle?.target;
+  const targetLabel = t3?.componentStack?.[0]?.name ?? t3?.selector?.split(">").pop()?.trim() ?? "selection";
+  const conf = confidenceLabel(bundle);
+  const isPoorSource = bundle?.target?.confidence === "selector-only";
+  const card = (children) => k(
+    "div",
+    {
+      style: `position:fixed;bottom:20px;right:20px;z-index:2147483000;width:360px;font:14px/1.55 ${C3.sans};color:${C3.ink};background:${C3.surface};border:1px solid ${C3.line};border-radius:16px;box-shadow:${C3.shadow};overflow:hidden`
+    },
+    children
+  );
+  if (phase === "sent") {
+    const sentTitle = isDev ? "Sent to claude" : "Report sent";
+    const sentBody = isDev ? "Switch to your terminal \u2014 claude has the pick + your description and is ready to act." : "The team has everything to reproduce and fix this \u2014 no follow-up needed.";
+    return card([
+      k(
+        "div",
+        { style: "padding:30px 22px;text-align:center" },
+        [
+          k(
+            "div",
+            {
+              style: `width:46px;height:46px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:${C3.buttonInk};font-size:22px;background:${C3.accent};box-shadow:0 6px 18px ${C3.accentRing}`
+            },
+            "\u2713"
+          ),
+          k(
+            "div",
+            { style: "font-weight:680;font-size:15px;letter-spacing:-.01em" },
+            sentTitle
+          ),
+          k(
+            "div",
+            { style: `color:${C3.sub};margin-top:5px;font-size:13px` },
+            sentBody
+          )
+        ]
+      )
+    ]);
+  }
+  const sending = phase === "sending";
+  const title = isDev ? "Tell claude what to change" : "Report a problem";
+  const placeholderText = isDev ? "Describe what should change about this element\u2026" : "What's wrong? (optional but helps)";
+  const sendButtonLabel = sending ? isDev ? "Sending\u2026" : "Sending\u2026" : isDev ? "Send to claude \u23CE" : "Send report";
+  return card([
+    // Header
+    k(
+      "div",
+      {
+        style: `display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid ${C3.line}`
+      },
+      [
+        k(
+          "div",
+          { style: "display:flex;align-items:center;gap:8px;font-weight:680;letter-spacing:-.01em" },
+          [dot, title]
+        ),
+        k(
+          "button",
+          {
+            onClick: reset,
+            style: `all:unset;cursor:pointer;color:${C3.faint};font-size:16px;line-height:1;padding:2px 4px`,
+            title: "Close"
+          },
+          "\u2715"
+        )
+      ]
+    ),
+    k("div", { style: "padding:16px" }, [
+      // Target chip with confidence badge
+      k(
+        "div",
+        {
+          style: `display:flex;align-items:center;gap:8px;padding:9px 11px;background:${C3.surface2};border:1px solid ${C3.line};border-radius:10px;font:12px/1.3 ${C3.mono};color:${C3.sub};margin-bottom:12px`
+        },
+        [
+          k("span", { style: `color:${C3.accentSolid}` }, "\u25CE"),
+          k(
+            "span",
+            {
+              style: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0"
+            },
+            `${targetLabel}${t3?.source ? ` \xB7 ${t3.source.file.split("/").pop()}:${t3.source.line ?? "?"}` : ""}`
+          ),
+          conf ? k(
+            "span",
+            {
+              style: `flex:none;padding:1px 7px;border-radius:999px;font-size:10.5px;letter-spacing:.02em;${isPoorSource ? `background:${C3.warnBg};color:${C3.warnInk};border:1px solid ${C3.warnLine}` : `background:${C3.goodBg};color:${C3.good};border:1px solid ${C3.goodLine}`}`
+            },
+            conf
+          ) : null
+        ]
+      ),
+      // Bulletproof selection: if the pick is selector-only, refuse
+      // to send and offer a re-pick. Telling claude "we couldn't
+      // find the file" is worse than asking the user to try a
+      // parent.
+      isPoorSource ? k(
+        "div",
+        {
+          style: `padding:9px 11px;background:${C3.warnBg};border:1px solid ${C3.warnLine};color:${C3.warnInk};border-radius:10px;font-size:12px;margin-bottom:12px;line-height:1.4`
+        },
+        [
+          k(
+            "div",
+            { style: "font-weight:600;margin-bottom:3px" },
+            "Couldn't resolve the source file for this element."
+          ),
+          k(
+            "div",
+            {},
+            "Try picking a parent \u2014 most often the issue is an unnamed wrapper. The selector alone isn't enough to find the file."
+          )
+        ]
+      ) : null,
+      bundle?.screenshot ? k("img", {
+        src: bundle.screenshot.dataUrl,
+        style: `width:100%;max-height:120px;object-fit:cover;border:1px solid ${C3.line};border-radius:10px;margin-bottom:12px`
+      }) : bundle?.screenshotUnavailable ? k(
+        "div",
+        {
+          style: `font-size:12px;color:${C3.faint};background:${C3.surface2};border:1px solid ${C3.line};border-radius:10px;padding:10px;margin-bottom:12px;word-break:break-word`
+        },
+        `Screenshot unavailable \u2014 ${bundle.screenshotUnavailable}`
+      ) : null,
+      bundle?.screenshot?.qualityNote && !tabCaptureActive ? k(
+        "div",
+        {
+          style: `display:flex;align-items:center;gap:8px;padding:9px 11px;background:${C3.warnBg};border:1px solid ${C3.warnLine};color:${C3.warnInk};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:${C3.accentSolid};font-weight:600;padding:2px 8px;border:1px solid ${C3.line};border-radius:6px;background:${C3.surface}`
+            },
+            "Enable"
+          )
+        ]
+      ) : null,
+      tabCaptureActive ? k(
+        "div",
+        {
+          style: `display:flex;align-items:center;gap:8px;padding:7px 11px;background:${C3.goodBg};border:1px solid ${C3.goodLine};color:${C3.good};border-radius:10px;font-size:11.5px;margin-bottom:12px`
+        },
+        [
+          k("span", {
+            style: `width:8px;height:8px;border-radius:50%;background:${C3.good};box-shadow:0 0 6px ${C3.good}`
+          }),
+          k(
+            "span",
+            { style: "flex:1" },
+            "Tab capture active \u2014 screenshots are pixel-perfect."
+          ),
+          k(
+            "button",
+            {
+              onClick: () => stopDisplayMedia("user"),
+              style: `all:unset;cursor:pointer;color:${C3.good};font-weight:600;padding:2px 6px`
+            },
+            "Stop"
+          )
+        ]
+      ) : null,
+      k("textarea", {
+        ref: (el) => {
+          noteRef.current = el;
+        },
+        value: note,
+        rows: 3,
+        placeholder: placeholderText,
+        disabled: sending,
+        onInput: (e3) => setNote(e3.target.value),
+        onKeyDown: onNoteKeyDown,
+        style: `width:100%;box-sizing:border-box;font:14px/1.5 ${isDev ? C3.mono : C3.sans};color:${C3.ink};background:${C3.surface};border:1px solid ${C3.line};border-radius:10px;padding:10px 12px;resize:none;outline:none`
+      }),
+      k("div", { style: "display:flex;gap:8px;margin-top:12px" }, [
+        k(
+          "button",
+          {
+            onClick: sending || isPoorSource || isDev && !note.trim() ? void 0 : () => void send(),
+            disabled: sending || isPoorSource || isDev && !note.trim(),
+            title: isDev && !note.trim() ? "Add a description first" : void 0,
+            style: `flex:1;all:unset;text-align:center;cursor:${sending || isPoorSource || isDev && !note.trim() ? "default" : "pointer"};padding:11px;font:680 13.5px/1 ${C3.sans};color:${C3.buttonInk};background:${C3.accent};border-radius:10px;box-shadow:0 2px 10px ${C3.accentRing};opacity:${sending || isPoorSource || isDev && !note.trim() ? ".5" : "1"}`
+          },
+          sendButtonLabel
+        ),
+        k(
+          "button",
+          {
+            onClick: () => void startPick(),
+            style: `all:unset;cursor:pointer;padding:11px 14px;font:600 13.5px/1 ${C3.sans};color:${C3.sub};background:${C3.surface2};border:1px solid ${C3.line};border-radius:10px`
+          },
+          "Re-pick"
+        )
+      ]),
+      // Dev-mode: companion state row (last). When connected, a
+      // subtle "→ claude" indicator. When offline, an actionable
+      // hint with the exact command to fix it.
+      isDev ? k(
+        "div",
+        {
+          style: `margin-top:12px;padding-top:10px;border-top:1px solid ${C3.line};display:flex;align-items:center;gap:8px;font:11.5px/1.3 ${C3.mono}`
+        },
+        companionState === "connected" ? [
+          k("span", {
+            style: `width:7px;height:7px;border-radius:50%;background:${C3.good};box-shadow:0 0 5px ${C3.good};flex:none`
+          }),
+          k(
+            "span",
+            { style: `color:${C3.sub};flex:1` },
+            `\u2192 ${companionDetail || "claude"}`
+          )
+        ] : [
+          k("span", {
+            style: `width:7px;height:7px;border-radius:50%;background:${C3.faint};flex:none`
+          }),
+          k(
+            "span",
+            { style: `color:${C3.faint};flex:1` },
+            companionState === "connecting" ? "Connecting to companion\u2026" : "Companion offline \u2014 run `claude` and `/insitue:connect`"
+          )
+        ]
+      ) : null
+    ]),
+    k(
+      "div",
+      {
+        style: `display:flex;justify-content:space-between;padding:9px 16px;border-top:1px solid ${C3.line};color:${C3.faint};font-size:11px`
+      },
+      [
+        k("span", {}, isDev ? "InSitue Dev \xB7 pick + describe \u2192 CLI" : ""),
+        k(
+          "span",
+          { title: `@insitue/sdk@${"0.3.1"}` },
+          `InSitue \xB7 v${"0.3.1"}`
+        )
+      ]
+    )
+  ]);
+}
+function mountCaptureOnly(opts = {}) {
+  installRuntimeCollectors();
+  if (opts.defaultPixelPerfect === true) {
+    setCaptureSettings({ alwaysPixelPerfect: true });
+  }
+  const sink = resolveSink(opts);
+  const host = document.createElement("div");
+  host.id = "insitu-capture-root";
+  host.setAttribute("data-insitu", "");
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const mount = document.createElement("div");
+  shadow.appendChild(mount);
+  R(
+    k(CaptureApp, {
+      sink,
+      ...opts.onCapture ? { onCapture: opts.onCapture } : {}
+    }),
+    mount
+  );
+  return () => {
+    R(null, mount);
+    host.remove();
+  };
+}
+
 export {
-  k,
-  R,
-  d2 as d,
-  y2 as y,
-  A2 as A,
-  PROTOCOL_VERSION,
-  IssueTrackerSink,
-  installRuntimeCollectors,
-  runtimeErrorCount,
-  beginPick,
-  getCaptureSettings,
-  setCaptureSettings,
-  onCaptureSettingsChange,
-  onDisplayMediaChange,
-  stopDisplayMedia,
-  retryDisplayMedia,
-  buildBundle
+  mountCaptureOnly
 };