@sable-ai/sdk-core 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,2431 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/connection/index.ts
+var DEFAULT_API_URL = "https://sable-api-gateway-9dfmhij9.wl.gateway.dev";
+async function fetchConnectionDetails(input) {
+  const url = new URL("/connection-details", input.apiUrl);
+  url.searchParams.set("agentPublicId", input.publicKey);
+  url.searchParams.set("bridge", "user");
+  const res = await fetch(url.toString());
+  if (!res.ok) {
+    const body = await res.text().catch(() => "");
+    throw new Error(`connection-details failed: ${res.status} ${body}`);
+  }
+  return await res.json();
+}
+
+// src/events/index.ts
+class SableEventEmitter {
+  listeners = new Map;
+  on(event, handler) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = new Set;
+      this.listeners.set(event, set);
+    }
+    set.add(handler);
+    return () => {
+      set?.delete(handler);
+    };
+  }
+  emit(event, payload) {
+    const set = this.listeners.get(event);
+    if (!set || set.size === 0)
+      return;
+    for (const handler of set) {
+      try {
+        handler(payload);
+      } catch (err) {
+        console.warn(`[Sable] event handler for "${String(event)}" threw`, err);
+      }
+    }
+  }
+  clear() {
+    this.listeners.clear();
+  }
+}
+
+// src/rpc.ts
+function safeParse(payload) {
+  try {
+    return payload ? JSON.parse(payload) : {};
+  } catch {
+    return {};
+  }
+}
+
+// src/runtime/clipboard.ts
+async function handleCopyable(rpcName, payload) {
+  const message = typeof payload.message === "string" ? payload.message : "";
+  const url = typeof payload.url === "string" ? payload.url : "";
+  const toCopy = url || message;
+  if (!toCopy) {
+    console.warn(`[Sable] ${rpcName}: empty payload, nothing to copy`);
+    return { success: false, error: "empty payload" };
+  }
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(toCopy);
+      return { success: true };
+    }
+    const ta = document.createElement("textarea");
+    ta.value = toCopy;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    if (!ok)
+      throw new Error("execCommand copy returned false");
+    return { success: true };
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.warn(`[Sable] ${rpcName}: copy failed`, msg);
+    return { success: false, error: msg };
+  }
+}
+
+// src/runtime/video-overlay.ts
+var activeViewOverlay = null;
+function removeViewOverlay() {
+  if (activeViewOverlay) {
+    activeViewOverlay.remove();
+    activeViewOverlay = null;
+  }
+}
+function mountVideoOverlay(url) {
+  removeViewOverlay();
+  const overlay = document.createElement("div");
+  overlay.setAttribute("data-sable", "view-overlay");
+  Object.assign(overlay.style, {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: "2147483646",
+    background: "rgba(0, 0, 0, 0.85)",
+    borderRadius: "12px",
+    padding: "8px",
+    boxShadow: "0 10px 40px rgba(0, 0, 0, 0.5)",
+    maxWidth: "min(80vw, 960px)",
+    maxHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  });
+  const closeBtn = document.createElement("button");
+  closeBtn.textContent = "✕";
+  closeBtn.setAttribute("aria-label", "Close video");
+  Object.assign(closeBtn.style, {
+    alignSelf: "flex-end",
+    background: "rgba(255,255,255,0.15)",
+    color: "white",
+    border: "none",
+    borderRadius: "999px",
+    width: "28px",
+    height: "28px",
+    cursor: "pointer",
+    fontSize: "14px",
+    lineHeight: "1"
+  });
+  closeBtn.addEventListener("click", removeViewOverlay);
+  const video = document.createElement("video");
+  video.src = url;
+  video.controls = false;
+  video.autoplay = true;
+  video.playsInline = true;
+  video.disablePictureInPicture = true;
+  video.setAttribute("controlslist", "nodownload nofullscreen noremoteplayback noplaybackrate");
+  Object.assign(video.style, {
+    maxWidth: "100%",
+    maxHeight: "70vh",
+    borderRadius: "8px",
+    display: "block"
+  });
+  const onEnded = () => {
+    if (activeViewOverlay === overlay) {
+      removeViewOverlay();
+    }
+  };
+  video.addEventListener("ended", onEnded);
+  overlay.appendChild(closeBtn);
+  overlay.appendChild(video);
+  document.body.appendChild(overlay);
+  activeViewOverlay = overlay;
+  video.play().catch((e) => {
+    console.warn("[Sable] switchView video autoplay blocked", e);
+  });
+}
+
+// src/runtime/index.ts
+function noop() {
+  return Promise.resolve({ success: true });
+}
+var DEFAULT_RUNTIME = {
+  sendToolMessage: (payload) => handleCopyable("sendToolMessage", payload),
+  sendCopyableText: (payload) => handleCopyable("sendCopyableText", payload),
+  switchView: async (payload) => {
+    const mode = typeof payload.mode === "string" ? payload.mode : "";
+    const url = typeof payload.url === "string" ? payload.url : "";
+    if (mode === "video" && url) {
+      try {
+        mountVideoOverlay(url);
+        return { success: true };
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        console.warn("[Sable] switchView: failed to mount video overlay", msg);
+        return { success: false, error: msg };
+      }
+    }
+    removeViewOverlay();
+    return { success: true };
+  },
+  setCallControlsEnabled: noop,
+  setUserInputEnabled: noop,
+  setAgentInControl: noop,
+  showSuggestedReplies: noop,
+  hideSuggestedReplies: noop,
+  highlightHangup: noop,
+  hideVideo: noop,
+  showVideo: noop,
+  stopScreenShare: noop,
+  showSlide: noop,
+  hideSlide: noop,
+  responseFailed: noop,
+  requestContinue: noop,
+  greetingComplete: noop,
+  speechComplete: noop,
+  enableMicrophone: noop,
+  requestDisconnect: noop,
+  setNickelSession: noop
+};
+function toRpcHandler(name, method) {
+  return async (data) => {
+    const payload = safeParse(data.payload);
+    try {
+      const result = await method(payload);
+      return JSON.stringify(result ?? { success: true });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.warn(`[Sable] runtime method "${name}" threw`, msg);
+      return JSON.stringify({ success: false, error: msg });
+    }
+  };
+}
+function installRuntime(room, userRuntime = {}) {
+  const merged = { ...DEFAULT_RUNTIME, ...userRuntime };
+  for (const [name, method] of Object.entries(merged)) {
+    room.registerRpcMethod(name, toRpcHandler(name, method));
+  }
+  const overrides = Object.keys(userRuntime).filter((k) => (k in DEFAULT_RUNTIME));
+  const extensions = Object.keys(userRuntime).filter((k) => !(k in DEFAULT_RUNTIME));
+  console.log("[Sable] runtime installed", {
+    total: Object.keys(merged).length,
+    overrides,
+    extensions
+  });
+}
+
+// src/browser-bridge/actions.ts
+function isCoordinates(p) {
+  return typeof p === "object" && p !== null && typeof p.x === "number" && typeof p.y === "number";
+}
+function resolveTarget(payload) {
+  if (isCoordinates(payload)) {
+    return document.elementFromPoint(payload.x, payload.y);
+  }
+  if (typeof payload === "string") {
+    try {
+      return document.querySelector(payload);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+async function dispatchAction(action) {
+  switch (action.kind) {
+    case "click": {
+      const el = resolveTarget(action.payload);
+      if (!el)
+        throw new Error(`click: target not found`);
+      el.scrollIntoView({ block: "center", inline: "center" });
+      el.click();
+      return;
+    }
+    case "hover": {
+      const el = resolveTarget(action.payload);
+      if (!el)
+        return;
+      el.dispatchEvent(new MouseEvent("mouseover", { bubbles: true, cancelable: true }));
+      return;
+    }
+    case "type": {
+      const el = resolveTarget(action.payload);
+      if (!el)
+        throw new Error(`type: target not found`);
+      const input = el;
+      input.focus();
+      if (action.replace) {
+        input.value = "";
+      }
+      const text = action.text ?? "";
+      const proto = input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+      const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+      if (setter) {
+        setter.call(input, (input.value ?? "") + text);
+      } else {
+        input.value = (input.value ?? "") + text;
+      }
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+      return;
+    }
+    case "key": {
+      const target = document.activeElement ?? document.body;
+      const key = action.key ?? "";
+      target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+      target.dispatchEvent(new KeyboardEvent("keyup", { key, bubbles: true, cancelable: true }));
+      return;
+    }
+    case "clear": {
+      const el = document.activeElement;
+      if (!el || !("value" in el))
+        return;
+      el.value = "";
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+      return;
+    }
+    case "navigate": {
+      const url = action.url ?? "";
+      if (!url)
+        return;
+      if (url === window.location.href)
+        return;
+      console.warn("[Sable] browser.navigate will reload the page; SDK must be re-injected on the new document", { url });
+      window.location.assign(url);
+      return;
+    }
+    case "evaluate": {
+      const expr = action.expression ?? "";
+      (0, eval)(expr);
+      return;
+    }
+    case "highlight_box":
+    case "highlight_text":
+    case "select_text":
+    case "center_scroll":
+    case "drag":
+    case "hide_cursor":
+    case "show_cursor":
+      return;
+    default:
+      throw new Error(`unsupported action kind: ${action.kind}`);
+  }
+}
+
+// src/assets/visible-dom.js.txt
+var visible_dom_js_default = `        () => {
+          const vw = window.innerWidth || document.documentElement.clientWidth || 0;
+          const vh = window.innerHeight || document.documentElement.clientHeight || 0;
+          const sx = window.scrollX || window.pageXOffset || 0;
+          const sy = window.scrollY || window.pageYOffset || 0;
+
+          const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+          const norm = (s) => (s || "").trim().replace(/\\s+/g, " ");
+          const SKIP_TAGS = new Set(["script","style","noscript","template"]);
+          const WRAPPER_TAGS = new Set(["div","span","section","article","main","nav","header","footer"]);
+
+          const styleCache = new WeakMap();
+          const getStyleBits = (el) => {
+            const cached = styleCache.get(el);
+            if (cached) return cached;
+            let cs;
+            try { cs = window.getComputedStyle(el); } catch { cs = null; }
+            const bits = cs ? {
+              display: cs.display || "",
+              visibility: cs.visibility || "",
+              opacity: cs.opacity || "1",
+            } : { display: "", visibility: "", opacity: "1" };
+            styleCache.set(el, bits);
+            return bits;
+          };
+
+          // Cache for getBoundingClientRect - avoids redundant layout calls
+          const rectCache = new WeakMap();
+          const getCachedRect = (el) => {
+            const cached = rectCache.get(el);
+            if (cached !== undefined) return cached;
+            let r;
+            try { r = el.getBoundingClientRect(); } catch { r = null; }
+            rectCache.set(el, r);
+            return r;
+          };
+
+          // Cache for isControlLike - called multiple times per element
+          const controlCache = new WeakMap();
+
+          const isSkippableTag = (el) => {
+            const tag = (el.tagName || "").toLowerCase();
+            return !tag || SKIP_TAGS.has(tag);
+          };
+
+          const intersectViewport = (r) => {
+            const left = clamp(r.left, 0, vw);
+            const right = clamp(r.right, 0, vw);
+            const top = clamp(r.top, 0, vh);
+            const bottom = clamp(r.bottom, 0, vh);
+            const w = Math.max(0, right - left);
+            const h = Math.max(0, bottom - top);
+            return { x: left, y: top, width: w, height: h };
+          };
+
+          const roleOf = (el) => el.getAttribute?.("role") || null;
+
+          const directText = (el) => {
+            try {
+              let out = "";
+              for (const n of el.childNodes || []) {
+                if (n && n.nodeType === 3) {
+                  const t = norm(n.textContent);
+                  if (t) out += (out ? " " : "") + t;
+                }
+              }
+              return out;
+            } catch { return ""; }
+          };
+          const descendantText = (el, maxLen = 80) => {
+            try {
+              let t = norm(el.innerText || el.textContent || "");
+              if (!t) return "";
+              if (t.length > maxLen) t = t.slice(0, maxLen) + "…";
+              return t;
+            } catch { return ""; }
+          };
+
+          const isMedia = (el) => {
+            const tag = (el.tagName || "").toLowerCase();
+            return tag === "svg" || tag === "img" || tag === "canvas" || tag === "video";
+          };
+
+          const isControlLike = (el) => {
+            const cached = controlCache.get(el);
+            if (cached !== undefined) return cached;
+
+            const tag = (el.tagName || "").toLowerCase();
+            if (tag === "input" || tag === "textarea" || tag === "select" || tag === "button") {
+              controlCache.set(el, true); return true;
+            }
+            if (tag === "a") {
+              // treat as interactive even if Gatsby/JS navigation omits href
+              const href = (el.getAttribute("href") || "").trim();
+              if (href) { controlCache.set(el, true); return true; }
+              const role = (roleOf(el) || "").toLowerCase();
+              if (role === "link" || role === "button") { controlCache.set(el, true); return true; }
+            }
+            if (el.isContentEditable) { controlCache.set(el, true); return true; }
+
+            const role = roleOf(el);
+            if (role) {
+              const r = role.toLowerCase();
+              if ([
+                "textbox","searchbox","combobox","listbox","option",
+                "button","link","checkbox","radio","switch",
+                "tab","menuitem","slider","spinbutton"
+              ].includes(r)) { controlCache.set(el, true); return true; }
+            }
+
+            const tabindex = el.getAttribute?.("tabindex");
+            if (tabindex !== null && tabindex !== "-1") { controlCache.set(el, true); return true; }
+            if (el.hasAttribute?.("onclick")) { controlCache.set(el, true); return true; }
+            if (typeof el.onclick === "function") { controlCache.set(el, true); return true; }
+
+            // common misuse: clickable divs/spans with pointer cursor
+            try {
+              const cs = window.getComputedStyle(el);
+              if (cs && cs.cursor === "pointer") { controlCache.set(el, true); return true; }
+            } catch {}
+            controlCache.set(el, false);
+            return false;
+          };
+
+          const hasOwnLabeling = (el) => {
+            if (directText(el)) return true;
+            const a = norm(el.getAttribute?.("aria-label"));
+            const t = norm(el.getAttribute?.("title"));
+            const alt = norm(el.getAttribute?.("alt"));
+            const ph = norm(el.getAttribute?.("placeholder"));
+            if (a || t || alt || ph) return true;
+            const cls = norm(el.getAttribute?.("class"));
+            if (cls) return true;
+            return false;
+          };
+
+          const isImportant = (el) => {
+            if (isControlLike(el)) return true;
+            if (isMedia(el)) return true;
+            if (roleOf(el)) return true;
+            if (hasOwnLabeling(el)) return true;
+            return false;
+          };
+
+          const cssEscape = (s) => {
+            if (window.CSS && typeof window.CSS.escape === "function") return window.CSS.escape(s);
+            return s.replace(/[^a-zA-Z0-9_\\-]/g, (c) => "\\\\" + c);
+          };
+
+          const domPath = (el) => {
+            const parts = [];
+            let cur = el;
+            while (cur && cur.nodeType === 1) {
+              const tag = cur.tagName.toLowerCase();
+              const id = cur.getAttribute?.("id");
+              // IDs are unique by HTML spec; skip querySelectorAll validation for speed
+              if (id) { parts.push("#" + cssEscape(id)); break; }
+              let nth = 1;
+              let sib = cur;
+              while ((sib = sib.previousElementSibling)) {
+                if (sib.tagName.toLowerCase() === tag) nth++;
+              }
+              parts.push(\`\${tag}:nth-of-type(\${nth})\`);
+              cur = cur.parentElement;
+              if (parts.length >= 12) break;
+            }
+            return parts.reverse().join(" > ");
+          };
+
+          const attrsOf = (el) => ({
+            "id": el.getAttribute?.("id") || null,
+            "class": el.getAttribute?.("class") || null,
+            "href": el.getAttribute?.("href") || null,
+            "type": el.getAttribute?.("type") || null,
+            "name": el.getAttribute?.("name") || null,
+            "placeholder": el.getAttribute?.("placeholder") || null,
+            "aria-label": el.getAttribute?.("aria-label") || null,
+            "aria-labelledby": el.getAttribute?.("aria-labelledby") || null,
+            "aria-expanded": el.getAttribute?.("aria-expanded") || null,
+            "aria-haspopup": el.getAttribute?.("aria-haspopup") || null,
+            "title": el.getAttribute?.("title") || null,
+            "alt": el.getAttribute?.("alt") || null,
+            "tabindex": el.getAttribute?.("tabindex") || null,
+            "contenteditable": el.isContentEditable ? "true" : (el.getAttribute?.("contenteditable") || null),
+          });
+
+          const svgDescriptor = (svg) => {
+            try {
+              if (!svg || (svg.tagName || "").toLowerCase() !== "svg") return "";
+              const viewBox = norm(svg.getAttribute("viewBox"));
+              const w = norm(svg.getAttribute("width"));
+              const h = norm(svg.getAttribute("height"));
+              const fill = norm(svg.getAttribute("fill"));
+              const stroke = norm(svg.getAttribute("stroke"));
+              const sw = norm(svg.getAttribute("stroke-width"));
+
+              const title = norm(svg.querySelector?.("title")?.textContent);
+
+              const cls = norm(svg.getAttribute("class"));
+              const useHref = norm(svg.querySelector?.("use")?.getAttribute("href") || svg.querySelector?.("use")?.getAttribute("xlink:href"));
+
+              const paths = svg.querySelectorAll?.("path") || [];
+              const pathCount = paths.length;
+
+              let dHash = "";
+              if (pathCount > 0) {
+                const d = paths[0].getAttribute("d") || "";
+                let hsh = 0;
+                for (let i = 0; i < d.length; i++) hsh = ((hsh << 5) - hsh + d.charCodeAt(i)) | 0;
+                dHash = String(hsh);
+              }
+
+              const parts = [];
+              if (title) parts.push(\`title=\${title}\`);
+              if (useHref) parts.push(\`use=\${useHref}\`);
+              if (viewBox) parts.push(\`vb=\${viewBox}\`);
+              if (w || h) parts.push(\`wh=\${w||"?"}x\${h||"?"}\`);
+              if (stroke || sw) parts.push(\`stroke=\${stroke||""}:\${sw||""}\`);
+              if (fill) parts.push(\`fill=\${fill}\`);
+              if (cls) parts.push(\`cls=\${cls.split(/\\s+/).slice(0,3).join(".")}\`);
+              if (pathCount) parts.push(\`paths=\${pathCount}\`);
+              if (dHash) parts.push(\`dhash=\${dHash}\`);
+              return parts.join(" ");
+            } catch { return ""; }
+          };
+
+          const iconDescriptorFromDescendants = (el, maxSvgs = 2) => {
+            try {
+              const out = [];
+              const svgs = el.querySelectorAll?.("svg") || [];
+              for (const svg of svgs) {
+                const d = svgDescriptor(svg);
+                if (d) out.push(d);
+                if (out.length >= maxSvgs) break;
+              }
+              const imgs = el.querySelectorAll?.("img") || [];
+              for (const img of imgs) {
+                const alt = norm(img.getAttribute("alt"));
+                const title = norm(img.getAttribute("title"));
+                const cls = norm(img.getAttribute("class"));
+                const parts = [];
+                if (alt) parts.push(\`alt=\${alt}\`);
+                if (title) parts.push(\`title=\${title}\`);
+                if (cls) parts.push(\`cls=\${cls.split(/\\s+/).slice(0,3).join(".")}\`);
+                const d = parts.join(" ");
+                if (d) out.push("img:" + d);
+                if (out.length >= maxSvgs + 1) break;
+              }
+              return out.join(" | ");
+            } catch { return ""; }
+          };
+
+          const baseLabelTextOf = (el) => {
+            const chunks = [];
+            const own = directText(el) || (isControlLike(el) ? descendantText(el) : "");
+            if (own) chunks.push(own);
+
+            for (const k of ["aria-label","title","alt","placeholder"]) {
+              const v = norm(el.getAttribute?.(k));
+              if (v) chunks.push(\`\${k}=\${v}\`);
+            }
+
+            const cls = norm(el.getAttribute?.("class"));
+            if (cls) chunks.push(\`class=\${cls.split(/\\s+/).slice(0,3).join(" ")}\`);
+
+            const tag = (el.tagName || "").toLowerCase();
+            if (tag === "svg") {
+              const sd = svgDescriptor(el);
+              if (sd) chunks.push(sd);
+            }
+            return chunks.join(" | ");
+          };
+
+          const needsIconScan = (el, baseName) => {
+            if (!isControlLike(el)) return false;
+
+            const dt = directText(el);
+            const a = norm(el.getAttribute?.("aria-label"));
+            const t = norm(el.getAttribute?.("title"));
+            const alt = norm(el.getAttribute?.("alt"));
+            const ph = norm(el.getAttribute?.("placeholder"));
+            const hasStrong = !!(dt || a || t || alt || ph);
+            if (!hasStrong) return true;
+
+            // still scan when label is basically only a class stub / generic tokens
+            const s = norm(baseName);
+            if (!s) return true;
+            if (/^class=/.test(s) && s.length < 40) return true;
+            return false;
+          };
+
+          const labelTextOf = (el) => {
+            const base = baseLabelTextOf(el);
+            if (needsIconScan(el, base)) {
+              const desc = iconDescriptorFromDescendants(el);
+              return desc ? (base ? \`\${base} | \${desc}\` : desc) : base;
+            }
+            return base;
+          };
+
+          const mergeIntoName = (entry, extra) => {
+            const v = norm(extra);
+            if (!v) return;
+            if (!entry.name) entry.name = v;
+            else if (!entry.name.includes(v)) entry.name = \`\${entry.name} | \${v}\`;
+          };
+
+          const fastIntersectInfo = (el) => {
+            if (!el || el.nodeType !== 1) return { ok: false };
+            if (isSkippableTag(el)) return { ok: false };
+            const r = getCachedRect(el);
+            if (!r || r.width < 1 || r.height < 1) return { ok: false };
+            const ib = intersectViewport(r);
+            if (ib.width < 1 || ib.height < 1) return { ok: false };
+            return { ok: true, rect: r, ibox: ib };
+          };
+
+          const isRenderable = (el) => {
+            const bits = getStyleBits(el);
+            if (bits.display === "none" || bits.visibility === "hidden") return false;
+            if (parseFloat(bits.opacity || "1") === 0) return false;
+            return true;
+          };
+
+          const samplePointsAdaptive = (ibox, el) => {
+            if (ibox.width < 1 || ibox.height < 1) return [];
+            const a = ibox.width * ibox.height;
+            const inset = 2;
+            const cx = ibox.x + ibox.width / 2;
+            const cy = ibox.y + ibox.height / 2;
+
+            // dynamic sampling:
+            // - very large regions: center only
+            // - medium: center + 2 corners
+            // - small: 5 points
+            let mode = 5;
+            if (a >= 150 * 150) mode = 1;
+            else if (a >= 60 * 60) mode = 3;
+
+            // controls tend to be small/precise; keep stronger checks
+            if (isControlLike(el) && mode < 5) mode = 5;
+
+            const x1 = ibox.x + inset;
+            const y1 = ibox.y + inset;
+            const x2 = ibox.x + ibox.width - inset;
+            const y2 = ibox.y + ibox.height - inset;
+
+            const pts = [];
+            pts.push([cx, cy]);
+            if (mode >= 3) {
+              pts.push([x1, y1]);
+              pts.push([x2, y2]);
+            }
+            if (mode >= 5) {
+              pts.push([x2, y1]);
+              pts.push([x1, y2]);
+            }
+
+            const out = [];
+            for (const [x, y] of pts) {
+              out.push([clamp(x, 0, Math.max(0, vw - 1)), clamp(y, 0, Math.max(0, vh - 1))]);
+            }
+            return out;
+          };
+
+          const notFullyOccluded = (el, ibox) => {
+            const pts = samplePointsAdaptive(ibox, el);
+            if (!pts.length) return false;
+            for (const [x, y] of pts) {
+              const top = document.elementFromPoint(x, y);
+              if (!top) continue;
+              if (top === el || el.contains(top)) return true;
+            }
+            return false;
+          };
+
+          const visibleInfo = (el) => {
+            const fi = fastIntersectInfo(el);
+            if (!fi.ok) return { ok: false };
+
+            if (!isRenderable(el)) return { ok: false };
+
+            if (!notFullyOccluded(el, fi.ibox)) return { ok: false };
+
+            return { ok: true, rect: fi.rect, ibox: fi.ibox };
+          };
+
+          const childrenForTraversal = (el) => {
+            const out = [];
+            const pushKids = (parent) => {
+              try {
+                const kids = parent.children ? Array.from(parent.children) : [];
+                for (const c of kids) {
+                  if (isSkippableTag(c)) continue;
+
+                  const fi = fastIntersectInfo(c);
+                  if (fi.ok) { out.push(c); continue; }
+
+                  // "tunnel" cases: 0×0 wrappers that may contain visible grandchildren
+                  try {
+                    const bits = getStyleBits(c);
+                    const hasKids = (c.children && c.children.length) || (c.shadowRoot && c.shadowRoot.children && c.shadowRoot.children.length);
+                    if ((bits.display === "contents") || hasKids) out.push(c);
+                  } catch {
+                    // if we can't read style, but it has children, still worth tunneling
+                    if (c.children && c.children.length) out.push(c);
+                  }
+                }
+              } catch {}
+            };
+
+            pushKids(el);
+
+            // include shadow root children too
+            try {
+              const sr = el.shadowRoot;
+              if (sr) pushKids(sr);
+            } catch {}
+
+            return out;
+          };
+
+          const visibleChildrenStrict = (el) => {
+            const out = [];
+            try {
+              const kids = el.children ? Array.from(el.children) : [];
+              for (const c of kids) {
+                const v = visibleInfo(c);
+                if (v.ok) out.push(c);
+              }
+            } catch {}
+            try {
+              const sr = el.shadowRoot;
+              if (sr && sr.children) {
+                for (const c of Array.from(sr.children)) {
+                  const v = visibleInfo(c);
+                  if (v.ok) out.push(c);
+                }
+              }
+            } catch {}
+            return out;
+          };
+
+          const area = (b) => Math.max(0, b.width) * Math.max(0, b.height);
+          const intersectArea = (a, b) => {
+            const x1 = Math.max(a.x, b.x);
+            const y1 = Math.max(a.y, b.y);
+            const x2 = Math.min(a.x + a.width, b.x + b.width);
+            const y2 = Math.min(a.y + a.height, b.y + b.height);
+            const w = Math.max(0, x2 - x1);
+            const h = Math.max(0, y2 - y1);
+            return w * h;
+          };
+
+          const isUselessWrapper = (el, child) => {
+            const tag = (el.tagName || "").toLowerCase();
+            if (!WRAPPER_TAGS.has(tag)) return false;
+            if (isImportant(el)) return false;
+
+            if (el.getAttribute?.("id")) return false;
+            if (roleOf(el)) return false;
+            const tabindex = el.getAttribute?.("tabindex");
+            if (tabindex && tabindex !== "-1") return false;
+            if (el.hasAttribute?.("onclick")) return false;
+
+            const f1 = fastIntersectInfo(el);
+            const f2 = fastIntersectInfo(child);
+            if (!f1.ok || !f2.ok) return false;
+
+            const b1 = f1.ibox, b2 = f2.ibox;
+            const a1 = area(b1), a2 = area(b2);
+            if (a1 < 1 || a2 < 1) return false;
+            const ia = intersectArea(b1, b2);
+            const overlap = ia / Math.min(a1, a2);
+            return overlap >= 0.92;
+          };
+
+          const resolveRepresentative = (el) => {
+            let cur = el;
+            for (let steps = 0; steps < 50; steps++) {
+              const kids = childrenForTraversal(cur);
+              if (kids.length !== 1) break;
+              const child = kids[0];
+              if (isUselessWrapper(cur, child)) { cur = child; continue; }
+              break;
+            }
+            return cur;
+          };
+
+          const nearestVisibleControlAncestor = (el) => {
+            let cur = el?.parentElement || null;
+            while (cur && cur !== document.body) {
+              if (isControlLike(cur)) {
+                const v = visibleInfo(cur);
+                if (v.ok) return cur;
+              }
+              cur = cur.parentElement;
+            }
+            return null;
+          };
+
+          const shouldEmit = (el) => {
+            if (isControlLike(el)) return true;
+
+            // text-heavy, misused divs/spans:
+            // emit if it has meaningful direct text and isn't within a visible control
+            const dt = directText(el);
+            if (dt && dt.length >= 2) {
+              const ctrl = nearestVisibleControlAncestor(el);
+              if (!ctrl) return true;
+            }
+
+            if (isImportant(el)) {
+              const ctrl = nearestVisibleControlAncestor(el);
+              return !ctrl;
+            }
+            return false;
+          };
+
+          const raw = [];
+          const byId = new Map();
+          const idOf = new WeakMap();
+          let nextId = 0;
+
+          const addNode = (el, parentId, depth, ibox) => {
+            const id = nextId++;
+            idOf.set(el, id);
+            const entry = {
+              id,
+              el,
+              parent_id: parentId,
+              depth,
+              tag: (el.tagName || "").toLowerCase(),
+              role: roleOf(el),
+              name: labelTextOf(el),
+              bbox_viewport: {
+                x: Math.round(ibox.x),
+                y: Math.round(ibox.y),
+                width: Math.round(ibox.width),
+                height: Math.round(ibox.height),
+              },
+              bbox_page: {
+                x: Math.round(ibox.x + sx),
+                y: Math.round(ibox.y + sy),
+                width: Math.round(ibox.width),
+                height: Math.round(ibox.height),
+              },
+              attributes: attrsOf(el),
+              dom_path: domPath(el),
+            };
+            raw.push(entry);
+            byId.set(id, entry);
+            return entry;
+          };
+
+          const walk = (startEl, parentEntry, depth) => {
+            if (!startEl || startEl.nodeType !== 1) return;
+
+            // prune early by viewport intersection
+            const fi = fastIntersectInfo(startEl);
+            if (!fi.ok) {
+              // IMPORTANT: wrapper may be 0x0 (e.g. display:contents) but have visible descendants.
+              const kids = childrenForTraversal(startEl);
+              for (const c of kids) walk(c, parentEntry, depth);
+              return;
+            }
+
+            const rep = resolveRepresentative(startEl);
+            if (!rep || rep.nodeType !== 1) return;
+
+            const v = visibleInfo(rep);
+            if (!v.ok) {
+              // rep itself may fail occlusion / rect tests even though descendants are visible
+              const kids = childrenForTraversal(rep);
+              for (const c of kids) walk(c, parentEntry, depth);
+              return;
+            }
+
+            const ctrl = (!isControlLike(rep)) ? nearestVisibleControlAncestor(rep) : null;
+            if (ctrl) {
+              const cv = visibleInfo(ctrl);
+              if (cv.ok) {
+                let ctrlEntry = null;
+                const existingId = idOf.get(ctrl);
+                if (existingId !== undefined) ctrlEntry = byId.get(existingId) || null;
+                if (!ctrlEntry) ctrlEntry = addNode(ctrl, parentEntry ? parentEntry.id : null, depth, cv.ibox);
+
+                // merge rep's base label always; scan icons only when needed
+                const repBase = baseLabelTextOf(rep);
+                if (repBase) mergeIntoName(ctrlEntry, repBase);
+
+                if (needsIconScan(ctrl, baseLabelTextOf(ctrl)) || needsIconScan(rep, repBase)) {
+                  const repIcon = iconDescriptorFromDescendants(rep);
+                  if (repIcon) mergeIntoName(ctrlEntry, repIcon);
+                }
+
+                if (!ctrlEntry.attributes) ctrlEntry.attributes = {};
+                if (needsIconScan(ctrl, baseLabelTextOf(ctrl))) {
+                  const iconDesc = norm(iconDescriptorFromDescendants(ctrl));
+                  if (iconDesc) ctrlEntry.attributes["icon-desc"] = iconDesc;
+                }
+
+                const kids = childrenForTraversal(rep);
+                for (const c of kids) walk(c, ctrlEntry, ctrlEntry.depth + 1);
+                return;
+              }
+            }
+
+            let myEntry = parentEntry;
+            let nextDepth = depth;
+
+            if (shouldEmit(rep)) {
+              myEntry = addNode(rep, parentEntry ? parentEntry.id : null, depth, v.ibox);
+              nextDepth = depth + 1;
+
+              if (isControlLike(rep) && needsIconScan(rep, baseLabelTextOf(rep))) {
+                const iconDesc = norm(iconDescriptorFromDescendants(rep));
+                if (iconDesc) {
+                  mergeIntoName(myEntry, iconDesc);
+                  myEntry.attributes["icon-desc"] = iconDesc;
+                }
+              }
+            }
+
+            const kids = childrenForTraversal(rep);
+            for (const c of kids) walk(c, myEntry, nextDepth);
+          };
+
+          const root = document.body || document.documentElement;
+          if (!root) return [];
+
+          const topKids = childrenForTraversal(root);
+          for (const c of topKids) walk(c, null, 0);
+
+          if (!raw.length) return [];
+
+          // merge labels into controls; remove labels
+          const keptIds = new Set(raw.map(e => e.id));
+          const domToVisibleId = new WeakMap();
+          for (const e of raw) domToVisibleId.set(e.el, e.id);
+
+          const isLabelTag = (el) => (el?.tagName || "").toLowerCase() === "label";
+
+          const mergeLabelIntoControl = (controlId, labelId, text) => {
+            const c = byId.get(controlId);
+            const l = byId.get(labelId);
+            if (!c || !l) return;
+            if (!keptIds.has(controlId) || !keptIds.has(labelId)) return;
+            const t = norm(text || l.name || "");
+            if (!t) return;
+            mergeIntoName(c, t);
+          };
+
+          const labelRemoval = new Set();
+          const controls = raw.filter(e => keptIds.has(e.id) && e.el && isControlLike(e.el));
+
+          for (const c of controls) {
+            try {
+              const labs = c.el.labels ? Array.from(c.el.labels) : [];
+              for (const labEl of labs) {
+                const lid = domToVisibleId.get(labEl);
+                if (lid !== undefined && keptIds.has(lid)) {
+                  mergeLabelIntoControl(c.id, lid, norm(labEl.innerText || labEl.textContent || ""));
+                  labelRemoval.add(lid);
+                }
+              }
+            } catch {}
+          }
+
+          for (const c of controls) {
+            const v = c.el.getAttribute?.("aria-labelledby");
+            if (!v) continue;
+            const ids = v.split(/\\s+/).map(s => s.trim()).filter(Boolean);
+            for (const domId of ids) {
+              const labEl = document.getElementById(domId);
+              if (!labEl) continue;
+              const lid = domToVisibleId.get(labEl);
+              if (lid !== undefined && keptIds.has(lid)) {
+                mergeLabelIntoControl(c.id, lid, norm(labEl.innerText || labEl.textContent || ""));
+                labelRemoval.add(lid);
+              }
+            }
+          }
+
+          for (const e of raw) {
+            if (!keptIds.has(e.id)) continue;
+            if (!e.el || !isLabelTag(e.el)) continue;
+            const f = e.el.getAttribute?.("for");
+            if (!f) continue;
+            const target = document.getElementById(f);
+            if (!target) continue;
+            const tid = domToVisibleId.get(target);
+            if (tid !== undefined && keptIds.has(tid)) {
+              mergeLabelIntoControl(tid, e.id, norm(e.el.innerText || e.el.textContent || ""));
+              labelRemoval.add(e.id);
+            }
+          }
+
+          for (const lid of labelRemoval) keptIds.delete(lid);
+
+          // recompute parent/depth
+          const findNearestKeptAncestorId = (el) => {
+            let cur = el;
+            while (cur) {
+              let p = cur.parentElement;
+              while (p) {
+                const pid = idOf.get(p);
+                if (pid !== undefined && keptIds.has(pid)) return pid;
+                p = p.parentElement;
+              }
+              const rn = cur.getRootNode?.();
+              if (rn && rn.host) { cur = rn.host; continue; }
+              break;
+            }
+            return null;
+          };
+
+          for (const e of raw) {
+            if (!keptIds.has(e.id)) continue;
+            e.parent_id = findNearestKeptAncestorId(e.el);
+          }
+
+          const depthMemo = new Map();
+          const depthOf = (id) => {
+            if (depthMemo.has(id)) return depthMemo.get(id);
+            const e = byId.get(id);
+            if (!e || !keptIds.has(id)) return 0;
+            const p = e.parent_id;
+            const d = p === null ? 0 : depthOf(p) + 1;
+            depthMemo.set(id, d);
+            return d;
+          };
+
+          for (const e of raw) {
+            if (!keptIds.has(e.id)) continue;
+            e.depth = depthOf(e.id);
+          }
+
+          const kept = raw.filter(e => keptIds.has(e.id));
+          kept.sort((a,b) => {
+            const ay = a.bbox_viewport?.y ?? 0;
+            const by = b.bbox_viewport?.y ?? 0;
+            if (ay !== by) return ay - by;
+            const ax = a.bbox_viewport?.x ?? 0;
+            const bx = b.bbox_viewport?.x ?? 0;
+            if (ax !== bx) return ax - bx;
+            const aa = (a.bbox_viewport?.width ?? 0) * (a.bbox_viewport?.height ?? 0);
+            const ba = (b.bbox_viewport?.width ?? 0) * (b.bbox_viewport?.height ?? 0);
+            return aa - ba;
+          });
+
+          return kept.map(e => ({
+            id: e.id,
+            parent_id: e.parent_id,
+            depth: e.depth,
+            tag: e.tag,
+            role: e.role,
+            name: e.name || "",
+            bbox_viewport: e.bbox_viewport,
+            bbox_page: e.bbox_page,
+            attributes: e.attributes,
+            dom_path: e.dom_path,
+          }));
+        }
+`;
+
+// src/assets/wireframe.js.txt
+var wireframe_js_default = `// wireframe.js — ultra-fast DOM wireframe renderer
+// No dependencies needed
+
+class Wireframe {
+  constructor(root = document.body, opts = {}) {
+    this.root = root;
+    this.scale = opts.scale || 1;
+    this.quality = opts.quality || 0.8;
+    this.maxDepth = opts.maxDepth || 30;
+    this.minSize = opts.minSize || 0; // temporarily 0 to debug
+    this.showText = opts.showText !== false;
+    this.showImages = opts.showImages !== false;
+    // When true, image elements (<img> and background-image divs) are
+    // rendered as their actual pixels using a CORS-aware fetch cache.
+    // When false (default), they render as labeled placeholder boxes.
+    // Either way they ALWAYS get a label now — the old behaviour of
+    // drawing a mystery yellow box with no hint is gone.
+    this.images = opts.images === true;
+    // Class-level cache so it persists across captures. \`null\` entries are
+    // negative cache (CORS failure, 404, decode error) — don't retry.
+    if (!Wireframe._imageCache) Wireframe._imageCache = new Map();
+    if (!Wireframe._imagePending) Wireframe._imagePending = new Map();
+    this.colors = {
+      bg: '#ffffff',
+      block: '#e2e8f0',
+      blockStroke: '#94a3b8',
+      text: '#334155',
+      input: '#dbeafe',
+      inputStroke: '#3b82f6',
+      button: '#bfdbfe',
+      buttonStroke: '#2563eb',
+      image: '#fde68a',
+      imageStroke: '#f59e0b',
+      imageCross: '#d97706',
+      link: '#2563eb',
+      heading: '#0f172a',
+      nav: '#e0e7ff',
+      navStroke: '#6366f1',
+      ...(opts.colors || {}),
+    };
+  }
+
+  async capture() {
+    const t = performance.now();
+    const rootRect = this.root.getBoundingClientRect();
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+
+    const canvasW = rootRect.width;
+    const canvasH = rootRect.height;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = canvasW * this.scale;
+    canvas.height = canvasH * this.scale;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(this.scale, this.scale);
+
+    // White background
+    ctx.fillStyle = this.colors.bg;
+    ctx.fillRect(0, 0, canvasW, canvasH);
+
+    // Two-pass: collect elements, draw boxes, then draw text on top
+    this._drawCount = 0;
+    this._skipCount = { tiny: 0, offscreen: 0, hidden: 0, depth: 0 };
+    this._elements = [];
+    this._pendingImageFetches = [];
+    this._collectElements(this.root, rootRect, 0);
+
+    // If image rendering is enabled and the first pass kicked off some
+    // fetches, give them a short window to land before drawing — that way
+    // the first captured frame already has some images instead of only
+    // placeholders. Subsequent frames hit the cache and are instant.
+    if (this.images && this._pendingImageFetches.length > 0) {
+      await Promise.race([
+        Promise.all(this._pendingImageFetches),
+        new Promise((r) => setTimeout(r, 400)),
+      ]);
+    }
+
+    // Pass 1: draw all boxes/shapes
+    for (const item of this._elements) {
+      this._drawElementBox(ctx, item);
+    }
+    // Pass 2: find ALL text nodes directly via TreeWalker and draw them
+    this._textCount = 0;
+    this._drawAllText(ctx, rootRect);
+
+    console.log(\`[wireframe] drew \${this._drawCount} elements | skipped: \${JSON.stringify(this._skipCount)} | root: \${rootRect.width.toFixed(0)}x\${rootRect.height.toFixed(0)}\`);
+
+    const elapsed = performance.now() - t;
+    console.log(\`[wireframe] captured: \${elapsed.toFixed(0)}ms | \${canvas.width}x\${canvas.height}\`);
+
+    return { canvas, elapsed };
+  }
+
+  _collectElements(el, rootRect, depth) {
+    if (depth > this.maxDepth) { this._skipCount.depth++; return; }
+
+    const children = el.children;
+
+    if (el.shadowRoot) {
+      this._collectElements(el.shadowRoot, rootRect, depth);
+    }
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      const rect = child.getBoundingClientRect();
+
+      if (rect.width < this.minSize || rect.height < this.minSize) { this._skipCount.tiny++; continue; }
+      if (rect.bottom < rootRect.top || rect.top > rootRect.bottom) { this._skipCount.offscreen++; continue; }
+      if (rect.right < rootRect.left || rect.left > rootRect.right) { this._skipCount.offscreen++; continue; }
+
+      const style = window.getComputedStyle(child);
+      if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') { this._skipCount.hidden++; continue; }
+
+      const x = rect.left - rootRect.left;
+      const y = rect.top - rootRect.top;
+      const w = rect.width;
+      const h = rect.height;
+      const tag = child.tagName;
+      const type = this._classifyElement(child, tag, style);
+
+      this._drawCount++;
+
+      // For image-like elements, capture a URL and a human label up front so
+      // the draw pass can either render the actual bitmap (opts.images=true
+      // + CORS-allowed fetch) or a labeled placeholder.
+      let url = null;
+      let label = null;
+      if (type === 'image' || (type === 'icon' && tag === 'IMG')) {
+        url = this._getImageUrl(child, style);
+        label = this._getImageLabel(child, url);
+        if (this.images && url) {
+          const p = this._ensureImage(url);
+          if (p && typeof p.then === 'function') {
+            this._pendingImageFetches.push(p);
+          }
+        }
+      }
+
+      this._elements.push({ type, x, y, w, h, el: child, style, tag, url, label });
+
+      this._collectElements(child, rootRect, depth + 1);
+    }
+  }
+
+  _classifyElement(el, tag, style) {
+    if (tag === 'VIDEO' || tag === 'CANVAS') return 'skip';
+    if (tag === 'IMG') return 'icon';
+    if (tag === 'SVG') return 'icon';
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return 'input';
+    if (tag === 'BUTTON') return 'button';
+    if (el.getAttribute('role') === 'button') {
+      const bg = style.backgroundColor;
+      if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return 'button';
+    }
+    if (tag === 'A') return 'link';
+    if (tag === 'NAV' || el.getAttribute('role') === 'navigation') return 'nav';
+    if (/^H[1-6]$/.test(tag)) return 'heading';
+    if (tag === 'SPAN' || tag === 'P' || tag === 'LABEL' || tag === 'LI' || tag === 'TD' || tag === 'TH') return 'text';
+    if (style.backgroundImage && style.backgroundImage !== 'none') return 'image';
+    // Check if this element has direct text content (not just from children)
+    if (this._hasDirectText(el)) return 'text';
+    return 'block';
+  }
+
+  // Extract a label for an icon — accessibility first
+  _getIconLabel(el) {
+    // Walk up to find the nearest interactive ancestor (often has the label)
+    const interactive = el.closest('[role="button"], button, a, [role="link"], [aria-label]');
+
+    // 1. aria-label (self or nearest ancestor)
+    const ariaLabel = el.getAttribute('aria-label') || (interactive && interactive.getAttribute('aria-label'));
+    if (ariaLabel) return ariaLabel;
+
+    // 2. aria-labelledby (self or ancestor)
+    const labelledBy = el.getAttribute('aria-labelledby') || (interactive && interactive.getAttribute('aria-labelledby'));
+    if (labelledBy) {
+      const ref = document.getElementById(labelledBy);
+      if (ref) return ref.textContent.trim();
+    }
+
+    // 3. aria-describedby
+    const describedBy = el.getAttribute('aria-describedby') || (interactive && interactive.getAttribute('aria-describedby'));
+    if (describedBy) {
+      const ref = document.getElementById(describedBy);
+      if (ref) return ref.textContent.trim();
+    }
+
+    // 4. alt / title
+    if (el.getAttribute('alt')) return el.getAttribute('alt');
+    if (el.getAttribute('title')) return el.getAttribute('title');
+    if (interactive && interactive.getAttribute('title')) return interactive.getAttribute('title');
+
+    // 5. Visible text content of parent button
+    if (interactive && interactive !== el) {
+      const text = interactive.textContent?.trim();
+      if (text && text.length < 30) return text;
+    }
+
+    return '◆';
+
+    return '◆';
+  }
+
+  // Check if element has its own text nodes (not just inherited from children)
+  _hasDirectText(el) {
+    for (const node of el.childNodes) {
+      if (node.nodeType === 3 && node.textContent.trim().length > 0) return true;
+    }
+    return false;
+  }
+
+  // Resolve the image URL for an <img> or a background-image element.
+  _getImageUrl(el, style) {
+    if (el.tagName === 'IMG') {
+      return el.currentSrc || el.src || null;
+    }
+    const bg = style && style.backgroundImage;
+    if (bg && bg !== 'none') {
+      // backgroundImage may contain multiple layers: url(a), linear-gradient(...)
+      const m = bg.match(/url\\(["']?([^"')]+)["']?\\)/);
+      if (m) return m[1];
+    }
+    return null;
+  }
+
+  // Derive a human-readable label for an image element. Priority:
+  //   alt → aria-label → title → figcaption → nearest-ancestor aria-label
+  //   → nearest heading → decoded filename → "image"
+  _getImageLabel(el, url) {
+    const get = (attr) => {
+      try { return el.getAttribute && el.getAttribute(attr); } catch { return null; }
+    };
+    if (get('alt')) return get('alt');
+    if (get('aria-label')) return get('aria-label');
+    if (get('title')) return get('title');
+
+    const fig = el.closest && el.closest('figure');
+    if (fig) {
+      const cap = fig.querySelector && fig.querySelector('figcaption');
+      if (cap && cap.textContent) {
+        const t = cap.textContent.trim();
+        if (t) return t;
+      }
+    }
+
+    const labelledAncestor = el.closest && el.closest('[aria-label]');
+    if (labelledAncestor && labelledAncestor !== el) {
+      const a = labelledAncestor.getAttribute('aria-label');
+      if (a) return a;
+    }
+
+    // Notion cover images sit directly above the page H1 — use it as the
+    // label when we have nothing else, so the agent can say "your Notion
+    // page 'hello aidan' has a cover".
+    if (url) {
+      try {
+        const u = new URL(url, window.location.href);
+        const name = u.pathname.split('/').pop();
+        if (name) {
+          const decoded = decodeURIComponent(name).replace(/\\.[a-z0-9]{2,5}$/i, '');
+          if (decoded && decoded.length < 60) return decoded;
+        }
+      } catch { /* ignore */ }
+    }
+
+    return 'image';
+  }
+
+  // Fetch → blob → ImageBitmap with CORS, class-level cache. Returns null
+  // (and negatively caches) on any failure. Concurrent callers for the
+  // same URL share one in-flight promise.
+  _ensureImage(url) {
+    const cache = Wireframe._imageCache;
+    const pending = Wireframe._imagePending;
+    if (cache.has(url)) return cache.get(url); // may be null
+    if (pending.has(url)) return pending.get(url);
+
+    const p = (async () => {
+      try {
+        const res = await fetch(url, { mode: 'cors', cache: 'force-cache' });
+        if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+        const blob = await res.blob();
+        const bitmap = await createImageBitmap(blob);
+        cache.set(url, bitmap);
+        // LRU bound
+        if (cache.size > 50) {
+          const firstKey = cache.keys().next().value;
+          const evicted = cache.get(firstKey);
+          if (evicted && typeof evicted.close === 'function') {
+            try { evicted.close(); } catch { /* ignore */ }
+          }
+          cache.delete(firstKey);
+        }
+        return bitmap;
+      } catch (e) {
+        cache.set(url, null); // negative cache
+        return null;
+      } finally {
+        pending.delete(url);
+      }
+    })();
+    pending.set(url, p);
+    return p;
+  }
+
+  // Draw a labeled placeholder in the "yellow hatched box" style — used
+  // whenever opts.images is off or the fetch failed. The label is the key
+  // thing: the agent reads it off the frame and can reason about the
+  // image's purpose without seeing the pixels.
+  _drawImagePlaceholder(ctx, label, x, y, w, h, radius) {
+    ctx.fillStyle = this.colors.image;
+    this._roundRect(ctx, x, y, w, h, radius);
+    ctx.fill();
+    ctx.strokeStyle = this.colors.imageStroke;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    if (this.showImages && w > 20 && h > 20) {
+      ctx.strokeStyle = this.colors.imageCross;
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(x + 4, y + 4);
+      ctx.lineTo(x + w - 4, y + h - 4);
+      ctx.moveTo(x + w - 4, y + 4);
+      ctx.lineTo(x + 4, y + h - 4);
+      ctx.stroke();
+    }
+    // The label band: a semi-transparent stripe across the middle of the
+    // placeholder with the text on top. Sized to remain legible at 1fps
+    // capture resolution while not dominating the frame.
+    if (label && w > 40 && h > 18) {
+      const fontSize = Math.min(Math.max(Math.floor(h * 0.18), 11), 18);
+      ctx.font = \`600 \${fontSize}px -apple-system, system-ui, sans-serif\`;
+      const pad = 6;
+      const bandH = fontSize + pad * 2;
+      const bandY = y + (h - bandH) / 2;
+      // Truncate label to fit
+      let display = label;
+      const maxW = w - pad * 4;
+      while (ctx.measureText(display).width > maxW && display.length > 1) {
+        display = display.slice(0, -2) + '…';
+      }
+      const textW = ctx.measureText(display).width;
+      const bandW = Math.min(textW + pad * 2, w - 8);
+      const bandX = x + (w - bandW) / 2;
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.55)';
+      ctx.fillRect(bandX, bandY, bandW, bandH);
+      ctx.fillStyle = '#ffffff';
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+      ctx.fillText(display, x + w / 2, bandY + bandH / 2);
+      ctx.textAlign = 'start';
+    }
+  }
+
+  // Draw an actual raster image (from the cache) into the given rect.
+  // Clips to the element's rounded-rect so the image respects border-radius.
+  _drawImageBitmap(ctx, bitmap, x, y, w, h, radius) {
+    try {
+      ctx.save();
+      this._roundRect(ctx, x, y, w, h, radius);
+      ctx.clip();
+      ctx.drawImage(bitmap, x, y, w, h);
+      ctx.restore();
+      ctx.strokeStyle = this.colors.imageStroke;
+      ctx.lineWidth = 0.5;
+      this._roundRect(ctx, x, y, w, h, radius);
+      ctx.stroke();
+      return true;
+    } catch (e) {
+      try { ctx.restore(); } catch { /* ignore */ }
+      return false;
+    }
+  }
+
+  _drawElementBox(ctx, { type, x, y, w, h, el, style, url, label }) {
+    const radius = Math.min(parseFloat(style.borderRadius) || 0, w / 2, h / 2, 8);
+
+    switch (type) {
+      case 'skip':
+        return; // don't draw images/video/canvas at all
+
+      case 'image': {
+        // Try the cached bitmap first. If opts.images is off, \`url\` may be
+        // set but the cache won't have it → falls through to placeholder.
+        const cached = url ? Wireframe._imageCache.get(url) : null;
+        if (cached && this._drawImageBitmap(ctx, cached, x, y, w, h, radius)) {
+          break;
+        }
+        this._drawImagePlaceholder(ctx, label || 'image', x, y, w, h, radius);
+        break;
+      }
+
+      case 'icon': {
+        // Large <img> tags are photos/avatars — render as real images if we
+        // can, with a labeled placeholder fallback. Small <img> and <svg>
+        // keep the tight "icon label" treatment.
+        const isBigImg = el && el.tagName === 'IMG' && w >= 48 && h >= 48;
+        if (isBigImg) {
+          const cached = url ? Wireframe._imageCache.get(url) : null;
+          if (cached && this._drawImageBitmap(ctx, cached, x, y, w, h, radius)) {
+            break;
+          }
+          this._drawImagePlaceholder(ctx, label || 'image', x, y, w, h, radius);
+          break;
+        }
+
+        const iconLabel = label || this._getIconLabel(el);
+
+        ctx.fillStyle = '#f1f5f9';
+        this._roundRect(ctx, x, y, w, h, 3);
+        ctx.fill();
+        ctx.strokeStyle = '#94a3b8';
+        ctx.lineWidth = 0.5;
+        ctx.stroke();
+
+        if (iconLabel && w >= 10 && h >= 8) {
+          const fontSize = Math.min(Math.max(h * 0.55, 7), 11);
+          ctx.fillStyle = '#64748b';
+          ctx.font = \`\${fontSize}px -apple-system, sans-serif\`;
+          ctx.textBaseline = 'middle';
+          ctx.textAlign = 'center';
+          const display = iconLabel.length > 6 ? iconLabel.slice(0, 5) + '…' : iconLabel;
+          ctx.fillText(display, x + w / 2, y + h / 2);
+          ctx.textAlign = 'start';
+        }
+        break;
+      }
+
+      case 'input':
+        ctx.fillStyle = this.colors.input;
+        this._roundRect(ctx, x, y, w, h, radius);
+        ctx.fill();
+        ctx.strokeStyle = this.colors.inputStroke;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        break;
+
+      case 'button': {
+        // Use actual background color if it has one
+        const btnBg = style.backgroundColor;
+        if (btnBg && btnBg !== 'rgba(0, 0, 0, 0)' && btnBg !== 'transparent') {
+          ctx.fillStyle = btnBg;
+        } else {
+          ctx.fillStyle = this.colors.button;
+        }
+        this._roundRect(ctx, x, y, w, h, radius);
+        ctx.fill();
+        ctx.strokeStyle = this.colors.buttonStroke;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        break;
+      }
+
+      case 'text':
+        // Text elements don't need a box — just drawn in text pass
+        break;
+
+      case 'nav':
+        ctx.fillStyle = this.colors.nav;
+        this._roundRect(ctx, x, y, w, h, radius);
+        ctx.fill();
+        ctx.strokeStyle = this.colors.navStroke;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        break;
+
+      case 'block':
+      default:
+        ctx.strokeStyle = this.colors.blockStroke;
+        ctx.lineWidth = 0.5;
+        this._roundRect(ctx, x, y, w, h, radius);
+        ctx.stroke();
+
+        const hasBg = style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)' && style.backgroundColor !== 'transparent';
+        if (hasBg) {
+          ctx.fillStyle = this.colors.block;
+          ctx.globalAlpha = 0.3;
+          this._roundRect(ctx, x, y, w, h, radius);
+          ctx.fill();
+          ctx.globalAlpha = 1;
+        }
+        break;
+    }
+  }
+
+  // Use TreeWalker to find ALL visible text nodes, regardless of nesting depth
+  _drawAllText(ctx, rootRect) {
+    if (!this.showText) return;
+    this._drawTextInRoot(ctx, rootRect, this.root);
+  }
+
+  _drawTextInRoot(ctx, rootRect, root) {
+    // Also handle shadow DOM roots
+    const els = root.querySelectorAll('*');
+    for (const el of els) {
+      if (el.shadowRoot) {
+        this._collectElements(el.shadowRoot, rootRect, 0);
+        this._drawTextInRoot(ctx, rootRect, el.shadowRoot);
+      }
+    }
+
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => {
+        const text = node.textContent.trim();
+        if (!text) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    });
+
+    while (walker.nextNode()) {
+      const textNode = walker.currentNode;
+      const text = textNode.textContent.trim();
+      if (!text) continue;
+
+      // Get the parent element for positioning and style
+      const parent = textNode.parentElement;
+      if (!parent) continue;
+
+      // Use Range to get exact bounding rect of the text node
+      const range = document.createRange();
+      range.selectNodeContents(textNode);
+      const rects = range.getClientRects();
+      if (rects.length === 0) continue;
+
+      const style = window.getComputedStyle(parent);
+      if (style.visibility === 'hidden' || style.opacity === '0') continue;
+
+      // Draw text at each rect (text can wrap across lines)
+      for (const rect of rects) {
+        if (rect.width < 4 || rect.height < 4) continue;
+        if (rect.bottom < rootRect.top || rect.top > rootRect.bottom) continue;
+
+        const x = rect.left - rootRect.left;
+        const y = rect.top - rootRect.top;
+        const w = rect.width;
+        const h = rect.height;
+
+        const fontSize = Math.min(Math.max(parseFloat(style.fontSize) || 11, 9), 24);
+        const bold = parseInt(style.fontWeight) >= 600;
+        const isLink = parent.closest('a') !== null;
+        const isButton = parent.closest('button, [role="button"]') !== null;
+
+        // Detect if text is on a colored background (like blue "New" button)
+        let color = this.colors.text;
+        if (isLink) {
+          color = this.colors.link;
+        } else if (isButton) {
+          // Check if parent or ancestor button has a colored bg
+          const btn = parent.closest('button, [role="button"]');
+          if (btn) {
+            const btnStyle = window.getComputedStyle(btn);
+            const bg = btnStyle.backgroundColor;
+            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
+              // Dark background → white text
+              const isDarkBg = this._isDarkColor(bg);
+              color = isDarkBg ? '#ffffff' : this.colors.text;
+            }
+          }
+        }
+
+        this._drawText(ctx, text, x, y, w, h, color, fontSize, 'left', isLink, bold);
+        this._textCount++;
+      }
+    }
+    console.log(\`[wireframe] drew \${this._textCount} text nodes\`);
+  }
+
+  // Parse rgb/rgba string and check if it's dark
+  _isDarkColor(colorStr) {
+    const match = colorStr.match(/\\d+/g);
+    if (!match || match.length < 3) return false;
+    const [r, g, b] = match.map(Number);
+    // Luminance formula
+    return (r * 0.299 + g * 0.587 + b * 0.114) < 128;
+  }
+
+  _drawText(ctx, text, x, y, w, h, color, fontSize = 11, align = 'left', underline = false, bold = false) {
+    if (w < 10 || h < 8) return;
+
+    ctx.fillStyle = color;
+    ctx.font = \`\${bold ? 'bold ' : ''}\${fontSize}px -apple-system, sans-serif\`;
+    ctx.textBaseline = 'middle';
+
+    // Truncate text to fit
+    let display = text;
+    while (ctx.measureText(display).width > w && display.length > 1) {
+      display = display.slice(0, -2) + '…';
+    }
+
+    const textY = y + h / 2;
+    let textX = x;
+    if (align === 'center') {
+      textX = x + (w - ctx.measureText(display).width) / 2;
+    }
+
+    ctx.fillText(display, textX, textY);
+
+    if (underline) {
+      const textW = ctx.measureText(display).width;
+      ctx.beginPath();
+      ctx.moveTo(textX, textY + fontSize / 2);
+      ctx.lineTo(textX + textW, textY + fontSize / 2);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 0.5;
+      ctx.stroke();
+    }
+  }
+
+  _roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+  }
+
+  // --- Export ---
+  async download(filename) {
+    const { canvas } = await this.capture();
+    canvas.toBlob(b => {
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(b);
+      a.download = filename || \`wireframe-\${Date.now()}.png\`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+    }, 'image/png');
+  }
+
+  async toDataURL() {
+    const { canvas } = await this.capture();
+    return canvas.toDataURL('image/png');
+  }
+
+  async toBlob() {
+    const { canvas } = await this.capture();
+    return new Promise(r => canvas.toBlob(r, 'image/png'));
+  }
+}
+
+// --- Quick API ---
+async function wireframe(el = document.body, opts = {}) {
+  const w = new Wireframe(el, opts);
+  return w.capture();
+}
+
+async function demo() {
+  const w = new Wireframe(document.body, { scale: 1 });
+
+  // Benchmark
+  const runs = 5;
+  const times = [];
+  for (let i = 0; i < runs; i++) {
+    const { elapsed } = await w.capture();
+    times.push(elapsed);
+  }
+  const avg = times.reduce((a, b) => a + b) / times.length;
+  console.log(\`\\n=== WIREFRAME BENCHMARK ===\`);
+  console.log(\`Runs: \${times.map(t => t.toFixed(0) + 'ms').join(', ')}\`);
+  console.log(\`Avg: \${avg.toFixed(0)}ms\`);
+
+  // Download
+  await w.download();
+
+  window.__wireframe = w;
+  return w;
+}
+
+console.log('Wireframe ready! No dependencies needed.');
+console.log('  await demo()                          — benchmark + download');
+console.log('  await new Wireframe().download()      — quick download');
+console.log('  await new Wireframe().toDataURL()     — base64 for LLM');
+`;
+
+// src/vision/wireframe.ts
+var wireframeCtor = null;
+function getWireframeCtor() {
+  if (!wireframeCtor) {
+    wireframeCtor = (0, eval)(`(function(){
+        var console = Object.assign({}, globalThis.console, {
+          log: function(){}, info: function(){}, debug: function(){}
+        });
+        ${wireframe_js_default};
+        return Wireframe;
+      })()`);
+  }
+  return wireframeCtor;
+}
+
+// src/browser-bridge/dom-state.ts
+var visibleDomFn = null;
+function getVisibleDomFn() {
+  if (!visibleDomFn) {
+    visibleDomFn = (0, eval)(`(${visible_dom_js_default})`);
+  }
+  return visibleDomFn;
+}
+async function captureDomState() {
+  const elements = getVisibleDomFn()();
+  const Wireframe = getWireframeCtor();
+  const wf = new Wireframe(document.body, {});
+  const dataUrl = await wf.toDataURL();
+  const b64 = dataUrl.replace(/^data:[^,]+,/, "");
+  return {
+    screenshot_jpeg_b64: b64,
+    elements,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    url: window.location.href
+  };
+}
+async function settle() {
+  const raf2 = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+  await raf2();
+  await new Promise((resolve) => {
+    const QUIET_MS = 30;
+    const MAX_MS = 30;
+    const start = performance.now();
+    let lastMut = performance.now();
+    const obs = new MutationObserver(() => {
+      lastMut = performance.now();
+    });
+    obs.observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+    const tick = () => {
+      const now = performance.now();
+      if (now - lastMut >= QUIET_MS) {
+        obs.disconnect();
+        resolve();
+        return;
+      }
+      if (now - start >= MAX_MS) {
+        obs.disconnect();
+        resolve();
+        return;
+      }
+      requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+  });
+  await raf2();
+}
+
+// src/browser-bridge/index.ts
+function makeHandler(name, body) {
+  return async (data) => {
+    let req = {};
+    try {
+      req = data.payload ? JSON.parse(data.payload) : {};
+    } catch (e) {
+      console.warn(`[Sable] ${name}: bad JSON payload`, e);
+    }
+    try {
+      const result = await body(req);
+      return JSON.stringify(result ?? {});
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.warn(`[Sable] ${name}: handler error`, msg);
+      return JSON.stringify({ error: msg });
+    }
+  };
+}
+function registerBrowserHandlers(room) {
+  room.registerRpcMethod("browser.execute_action", makeHandler("browser.execute_action", async (req) => {
+    const action = req.action;
+    if (!action || typeof action !== "object") {
+      throw new Error("execute_action: missing action");
+    }
+    await dispatchAction(action);
+    return {};
+  }));
+  room.registerRpcMethod("browser.get_dom_state", makeHandler("browser.get_dom_state", async () => captureDomState()));
+  room.registerRpcMethod("browser.get_url", makeHandler("browser.get_url", async () => ({ url: window.location.href })));
+  room.registerRpcMethod("browser.get_viewport", makeHandler("browser.get_viewport", async () => ({
+    width: window.innerWidth,
+    height: window.innerHeight
+  })));
+  room.registerRpcMethod("browser.verify_selector", makeHandler("browser.verify_selector", async (req) => {
+    const selector = typeof req.selector === "string" ? req.selector : "";
+    let matches = false;
+    try {
+      matches = !!document.querySelector(selector);
+    } catch {
+      matches = false;
+    }
+    return { matches };
+  }));
+  room.registerRpcMethod("browser.settle", makeHandler("browser.settle", async () => {
+    await settle();
+    return {};
+  }));
+  console.log("[Sable] browser bridge RPCs registered");
+}
+
+// src/vision/frame-source.ts
+var DEFAULT_RATE_HZ = 2;
+function intervalMs(rate) {
+  const r = typeof rate === "number" && rate > 0 ? rate : DEFAULT_RATE_HZ;
+  return Math.max(1, Math.round(1000 / r));
+}
+function syncCanvasSize(canvas) {
+  const w = Math.max(1, window.innerWidth);
+  const h = Math.max(1, window.innerHeight);
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w;
+    canvas.height = h;
+  }
+}
+function startFrameSource(source, canvas) {
+  const ctx = canvas.getContext("2d", { alpha: false });
+  if (!ctx) {
+    console.warn("[Sable] frame source: 2d context unavailable");
+    return () => {};
+  }
+  const delayMs = intervalMs(source.rate);
+  let stopped = false;
+  let timer;
+  let inFlight = false;
+  const tick = async () => {
+    if (stopped)
+      return;
+    if (!inFlight) {
+      inFlight = true;
+      try {
+        syncCanvasSize(canvas);
+        if (source.type === "wireframe") {
+          const includeImages = source.features?.includeImages === true;
+          const Wireframe = getWireframeCtor();
+          const wf = new Wireframe(document.body, { images: includeImages });
+          const { canvas: src } = await wf.capture();
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(src, 0, 0, canvas.width, canvas.height);
+        } else if (source.type === "fn") {
+          const frame = source.captureFn();
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
+        }
+      } catch (e) {
+        console.warn("[Sable] frame source tick failed", e);
+      } finally {
+        inFlight = false;
+      }
+    }
+    if (!stopped) {
+      timer = setTimeout(tick, delayMs);
+    }
+  };
+  tick();
+  return () => {
+    stopped = true;
+    if (timer !== undefined)
+      clearTimeout(timer);
+  };
+}
+
+// src/vision/publisher.ts
+var BROWSER_TRACK_NAME = "browser";
+async function publishCanvasAsVideoTrack(room, lib, canvas, fps) {
+  const mediaStream = canvas.captureStream(fps);
+  const videoTracks = mediaStream.getVideoTracks();
+  if (videoTracks.length === 0) {
+    throw new Error("canvas.captureStream produced no video tracks");
+  }
+  const mediaStreamTrack = videoTracks[0];
+  const localTrack = new lib.LocalVideoTrack(mediaStreamTrack, undefined, true);
+  const publication = await room.localParticipant.publishTrack(localTrack, {
+    source: lib.Track.Source.ScreenShare,
+    name: BROWSER_TRACK_NAME
+  });
+  console.log("[Sable] vision track published", {
+    trackSid: publication.trackSid,
+    fps
+  });
+  return async () => {
+    try {
+      await room.localParticipant.unpublishTrack(localTrack, true);
+    } catch (e) {
+      console.warn("[Sable] vision unpublishTrack failed", e);
+    }
+    try {
+      mediaStreamTrack.stop();
+    } catch {}
+    console.log("[Sable] vision track stopped");
+  };
+}
+
+// src/vision/index.ts
+var DEFAULT_FRAME_SOURCE = {
+  type: "wireframe",
+  rate: 2,
+  features: { includeImages: false }
+};
+async function startVision(args) {
+  const source = args.options.frameSource ?? DEFAULT_FRAME_SOURCE;
+  const fps = typeof source.rate === "number" && source.rate > 0 ? source.rate : 2;
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, window.innerWidth);
+  canvas.height = Math.max(1, window.innerHeight);
+  const stopFrameSource = startFrameSource(source, canvas);
+  let stopPublish;
+  try {
+    stopPublish = await publishCanvasAsVideoTrack(args.room, args.lib, canvas, fps);
+  } catch (err) {
+    stopFrameSource();
+    throw err;
+  }
+  return {
+    canvas,
+    stop: async () => {
+      stopFrameSource();
+      await stopPublish();
+    }
+  };
+}
+
+// src/version.ts
+var VERSION = "0.1.0";
+
+// src/session/debug-panel.ts
+var DEBUG_PANEL_STATE_KEY = "sable:debug:panel";
+function loadState() {
+  try {
+    const raw = window.localStorage?.getItem(DEBUG_PANEL_STATE_KEY);
+    if (!raw)
+      return {};
+    const parsed = JSON.parse(raw);
+    return typeof parsed === "object" && parsed !== null ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function saveState(state) {
+  try {
+    window.localStorage?.setItem(DEBUG_PANEL_STATE_KEY, JSON.stringify(state));
+  } catch {}
+}
+function shouldShowDebugPanel(debugOpt) {
+  if (debugOpt)
+    return true;
+  try {
+    if (new URL(window.location.href).searchParams.get("sable-debug") === "1") {
+      return true;
+    }
+  } catch {}
+  try {
+    if (window.localStorage?.getItem("sable:debug") === "1")
+      return true;
+  } catch {}
+  return false;
+}
+function mountDebugPanel(canvas) {
+  const state = loadState();
+  const wrap = document.createElement("div");
+  wrap.setAttribute("data-sable-debug", "vision");
+  Object.assign(wrap.style, {
+    position: "fixed",
+    width: "240px",
+    zIndex: "2147483647",
+    background: "#111",
+    color: "#ddd",
+    border: "1px solid #444",
+    borderRadius: "8px",
+    font: "11px/1.3 system-ui, sans-serif",
+    boxShadow: "0 8px 24px rgba(0,0,0,.4)",
+    pointerEvents: "none",
+    userSelect: "none",
+    overflow: "hidden"
+  });
+  if (typeof state.left === "number" && typeof state.top === "number") {
+    wrap.style.left = `${state.left}px`;
+    wrap.style.top = `${state.top}px`;
+  } else {
+    wrap.style.right = "12px";
+    wrap.style.top = "12px";
+  }
+  const header = document.createElement("div");
+  Object.assign(header.style, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "6px",
+    padding: "6px 8px",
+    background: "#1a1a1a",
+    borderBottom: "1px solid #333",
+    cursor: "move",
+    pointerEvents: "auto"
+  });
+  const title = document.createElement("div");
+  title.textContent = "sable: agent vision";
+  Object.assign(title.style, {
+    opacity: "0.75",
+    fontWeight: "600",
+    flex: "1",
+    pointerEvents: "none"
+  });
+  header.appendChild(title);
+  const minBtn = document.createElement("button");
+  minBtn.setAttribute("aria-label", "Minimize vision panel");
+  Object.assign(minBtn.style, {
+    background: "transparent",
+    color: "#ddd",
+    border: "1px solid #444",
+    borderRadius: "4px",
+    width: "20px",
+    height: "20px",
+    cursor: "pointer",
+    fontSize: "12px",
+    lineHeight: "1",
+    padding: "0",
+    pointerEvents: "auto"
+  });
+  header.appendChild(minBtn);
+  wrap.appendChild(header);
+  const body = document.createElement("div");
+  Object.assign(body.style, {
+    padding: "6px",
+    background: "#111",
+    pointerEvents: "none"
+  });
+  canvas.style.width = "100%";
+  canvas.style.height = "auto";
+  canvas.style.display = "block";
+  canvas.style.background = "#fff";
+  canvas.style.borderRadius = "4px";
+  canvas.style.pointerEvents = "none";
+  body.appendChild(canvas);
+  wrap.appendChild(body);
+  let minimized = !!state.minimized;
+  const applyMinimized = () => {
+    body.style.display = minimized ? "none" : "block";
+    minBtn.textContent = minimized ? "▢" : "–";
+    minBtn.setAttribute("aria-label", minimized ? "Restore vision panel" : "Minimize vision panel");
+  };
+  applyMinimized();
+  minBtn.addEventListener("click", (ev) => {
+    ev.stopPropagation();
+    minimized = !minimized;
+    applyMinimized();
+    saveState({ ...loadState(), minimized });
+  });
+  let dragState = null;
+  const onPointerDown = (ev) => {
+    if (ev.target instanceof HTMLElement && ev.target.closest("button")) {
+      return;
+    }
+    const rect = wrap.getBoundingClientRect();
+    dragState = {
+      offsetX: ev.clientX - rect.left,
+      offsetY: ev.clientY - rect.top
+    };
+    wrap.style.left = `${rect.left}px`;
+    wrap.style.top = `${rect.top}px`;
+    wrap.style.right = "auto";
+    wrap.style.bottom = "auto";
+    header.setPointerCapture(ev.pointerId);
+    ev.preventDefault();
+  };
+  const onPointerMove = (ev) => {
+    if (!dragState)
+      return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const w = wrap.offsetWidth;
+    let left = ev.clientX - dragState.offsetX;
+    let top = ev.clientY - dragState.offsetY;
+    left = Math.min(Math.max(left, -w + 48), vw - 48);
+    top = Math.min(Math.max(top, 0), vh - 24);
+    wrap.style.left = `${left}px`;
+    wrap.style.top = `${top}px`;
+  };
+  const onPointerUp = (ev) => {
+    if (!dragState)
+      return;
+    dragState = null;
+    try {
+      header.releasePointerCapture(ev.pointerId);
+    } catch {}
+    const left = parseFloat(wrap.style.left) || 0;
+    const top = parseFloat(wrap.style.top) || 0;
+    saveState({ ...loadState(), left, top });
+  };
+  header.addEventListener("pointerdown", onPointerDown);
+  header.addEventListener("pointermove", onPointerMove);
+  header.addEventListener("pointerup", onPointerUp);
+  header.addEventListener("pointercancel", onPointerUp);
+  document.body.appendChild(wrap);
+  console.log("[Sable] debug vision panel mounted", {
+    minimized,
+    restoredPosition: typeof state.left === "number" && typeof state.top === "number"
+  });
+  return () => {
+    try {
+      header.removeEventListener("pointerdown", onPointerDown);
+      header.removeEventListener("pointermove", onPointerMove);
+      header.removeEventListener("pointerup", onPointerUp);
+      header.removeEventListener("pointercancel", onPointerUp);
+      wrap.remove();
+    } catch {}
+  };
+}
+
+// src/session/index.ts
+var UI_READY_RETRY_ATTEMPTS = 5;
+var UI_READY_RETRY_DELAY_MS = 500;
+function findAgentIdentity(room) {
+  const remotes = room.remoteParticipants ? Array.from(room.remoteParticipants.values()) : [];
+  const agent = remotes.find((p) => typeof p.identity === "string" && p.identity.startsWith("agent"));
+  return agent?.identity ?? remotes[0]?.identity ?? null;
+}
+async function sendUiReady(room) {
+  for (let attempt = 1;attempt <= UI_READY_RETRY_ATTEMPTS; attempt++) {
+    const identity = findAgentIdentity(room);
+    if (!identity) {
+      console.warn("[Sable] sendUiReady: no agent participant yet", { attempt });
+      await new Promise((r) => setTimeout(r, UI_READY_RETRY_DELAY_MS));
+      continue;
+    }
+    try {
+      await room.localParticipant.performRpc({
+        destinationIdentity: identity,
+        method: "uiReady",
+        payload: JSON.stringify({ timestamp: Date.now() })
+      });
+      console.log("[Sable] uiReady sent", { identity, attempt });
+      return;
+    } catch (err) {
+      console.warn("[Sable] uiReady RPC failed", { attempt, err });
+      await new Promise((r) => setTimeout(r, UI_READY_RETRY_DELAY_MS));
+    }
+  }
+  console.error("[Sable] uiReady: exhausted retries — agent will not greet");
+}
+
+class Session {
+  version = VERSION;
+  emitter = new SableEventEmitter;
+  activeRoom = null;
+  visionHandle = null;
+  unmountDebugPanel = null;
+  on(event, handler) {
+    return this.emitter.on(event, handler);
+  }
+  async start(opts) {
+    if (this.activeRoom) {
+      throw new Error("Sable already started; call stop() first");
+    }
+    const publicKey = opts.publicKey ?? opts.agentPublicId;
+    if (!publicKey) {
+      throw new Error("Sable.start: `publicKey` is required");
+    }
+    const apiUrl = opts.apiUrl ?? DEFAULT_API_URL;
+    console.log("[Sable] fetching connection details", { apiUrl });
+    const details = await fetchConnectionDetails({ apiUrl, publicKey });
+    console.log("[Sable] connection details received", {
+      roomName: details.roomName,
+      participantName: details.participantName
+    });
+    const livekit = await import("livekit-client");
+    const { Room, RoomEvent, LocalVideoTrack, Track } = livekit;
+    const room = new Room;
+    const publishLib = {
+      LocalVideoTrack,
+      Track
+    };
+    room.registerRpcMethod("agentReady", async () => {
+      console.log("[Sable] RPC agentReady received");
+      sendUiReady(room);
+      return JSON.stringify({ success: true });
+    });
+    registerBrowserHandlers(room);
+    installRuntime(room, opts.runtime);
+    this.wireRoomEvents(room, RoomEvent);
+    await room.connect(details.serverUrl, details.participantToken);
+    await room.localParticipant.setMicrophoneEnabled(true);
+    this.activeRoom = room;
+    if (opts.vision?.enabled) {
+      try {
+        this.visionHandle = await startVision({
+          room,
+          lib: publishLib,
+          options: opts.vision
+        });
+        if (shouldShowDebugPanel(opts.debug)) {
+          this.unmountDebugPanel = mountDebugPanel(this.visionHandle.canvas);
+        }
+      } catch (e) {
+        console.warn("[Sable] failed to start vision", e);
+      }
+    }
+    console.log("[Sable] session live", {
+      roomName: details.roomName,
+      participantName: details.participantName
+    });
+    this.emitter.emit("session:started", {
+      roomName: details.roomName,
+      participantName: details.participantName
+    });
+    setTimeout(() => {
+      if (this.activeRoom !== room)
+        return;
+      const r = room;
+      const remotes = r.remoteParticipants ? Array.from(r.remoteParticipants.values()) : [];
+      const summary = remotes.map((p) => ({
+        identity: p.identity,
+        tracks: p.trackPublications ? Array.from(p.trackPublications.values()).map((t) => ({
+          kind: t.kind,
+          subscribed: t.isSubscribed
+        })) : []
+      }));
+      const anyAudio = summary.some((p) => p.tracks.some((t) => t.kind === "audio"));
+      if (!anyAudio) {
+        console.warn("[Sable] no remote audio track after 10s — agent worker probably failed to publish. Remote participants:", summary);
+      }
+    }, 1e4);
+  }
+  async stop() {
+    const room = this.activeRoom;
+    if (!room)
+      return;
+    this.activeRoom = null;
+    if (this.unmountDebugPanel) {
+      try {
+        this.unmountDebugPanel();
+      } catch (e) {
+        console.warn("[Sable] debug panel unmount failed", e);
+      }
+      this.unmountDebugPanel = null;
+    }
+    if (this.visionHandle) {
+      try {
+        await this.visionHandle.stop();
+      } catch (e) {
+        console.warn("[Sable] vision stop failed", e);
+      }
+      this.visionHandle = null;
+    }
+    try {
+      await room.localParticipant.setMicrophoneEnabled(false);
+    } catch (err) {
+      console.warn("[Sable] setMicrophoneEnabled(false) failed", err);
+    }
+    await room.disconnect();
+    console.log("[Sable] session ended");
+    this.emitter.emit("session:ended", {});
+  }
+  wireRoomEvents(room, RoomEvent) {
+    room.on(RoomEvent.ConnectionStateChanged, (state) => {
+      console.log("[Sable] ConnectionStateChanged", state);
+    });
+    room.on(RoomEvent.Disconnected, (reason) => {
+      console.log("[Sable] Disconnected", reason);
+      if (this.activeRoom === room) {
+        this.stop().catch((e) => console.warn("[Sable] stop on disconnect failed", e));
+      }
+    });
+    room.on(RoomEvent.ParticipantConnected, (participant) => {
+      const p = participant;
+      console.log("[Sable] ParticipantConnected", {
+        identity: p.identity,
+        sid: p.sid
+      });
+    });
+    room.on(RoomEvent.ParticipantDisconnected, (participant) => {
+      const p = participant;
+      console.warn("[Sable] ParticipantDisconnected", { identity: p.identity });
+    });
+    room.on(RoomEvent.TrackSubscribed, (track, _pub, participant) => {
+      const t = track;
+      const p = participant;
+      console.log("[Sable] TrackSubscribed", {
+        kind: t.kind,
+        participant: p.identity
+      });
+      if (t.kind === "audio" && typeof t.attach === "function") {
+        const el = t.attach();
+        el.setAttribute("data-sable", "1");
+        el.setAttribute("playsinline", "");
+        el.autoplay = true;
+        document.body.appendChild(el);
+        console.log("[Sable] attached remote audio element");
+      }
+    });
+    room.on(RoomEvent.TrackUnsubscribed, (track) => {
+      const t = track;
+      if (typeof t.detach === "function") {
+        for (const el of t.detach()) {
+          el.remove();
+        }
+      }
+    });
+    room.on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
+      const list = speakers ?? [];
+      const agentTalking = list.some((s) => typeof s.identity === "string" && s.identity.startsWith("agent"));
+      const userTalking = list.some((s) => typeof s.identity === "string" && !s.identity.startsWith("agent"));
+      this.emitter.emit("agent:speaking", agentTalking);
+      this.emitter.emit("user:speaking", userTalking);
+    });
+  }
+}
+
+// src/global.ts
+var Sable = new Session;
+function installGlobal() {
+  if (typeof window === "undefined")
+    return;
+  if (window.Sable)
+    return;
+  window.Sable = Sable;
+  console.log("[Sable] SDK loaded", Sable.version);
+}
+
+// src/index.ts
+installGlobal();
+var src_default = Sable;
+export {
+  src_default as default,
+  VERSION
+};