@botim/mp-debug-sdk 0.1.0 → 0.3.0

package/README.md

@@ -164,6 +164,14 @@ console.log(handle.sid); // server-issued session id
 - **Single in-flight long-poll**: at most one outbound request per device for the AI command channel.
 - **Self-event suppression**: the SDK captures `fetch` reference at import time and routes its own ingest/poll calls through that pre-interception fetch — no risk of the SDK observing itself and creating a feedback loop.
 
+## Debugging a live mini-program
+
+Once your build is wired and shipped, see **[`docs/live-debugging.md`](./docs/live-debugging.md)** for the end-to-end runbook against the shared demo relay at `https://aistudiodemo.ext.algento.com/mp-debug-relay`. It covers:
+
+- pointing the Vite plugin at the live relay URL,
+- pulling errors and tailing sessions from the admin UI,
+- a dedicated **For AI agents** section with `curl` recipes for `/v1/mp/{mpId}/events`, the SSE live-tail, and command POSTs.
+
 ## API reference
 
 | Symbol | Purpose |

package/dist/index.cjs

@@ -774,32 +774,95 @@ async function defaultDomScreenshot() {
     return await captureViaHtmlSnapshot();
   }
 }
-async function captureViaSvgForeignObject() {
-  const dpr = Math.min(window.devicePixelRatio || 1, 2);
-  const w = Math.max(1, Math.min(window.innerWidth || document.documentElement.clientWidth || 1024, 2400));
-  const h = Math.max(1, Math.min(document.documentElement.scrollHeight, 4e3));
-  const inlinedCss = readInlineableStyles();
-  const clone = document.documentElement.cloneNode(true);
-  clone.querySelectorAll('link[rel="stylesheet"]').forEach((el) => el.remove());
-  clone.querySelectorAll("script,noscript,template").forEach((el) => el.remove());
-  clone.querySelectorAll("canvas").forEach((el) => el.remove());
-  clone.querySelectorAll("img").forEach((img) => {
-    const src = img.getAttribute("src") || "";
-    if (src && /^(https?:|\/\/)/i.test(src)) {
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "source",
+  "track",
+  "wbr"
+]);
+var SKIP_TAGS = /* @__PURE__ */ new Set(["script", "noscript", "template"]);
+var DEVTOOL_OVERLAY_PREFIXES = ["vite-", "astro-dev-", "next-route-"];
+function isDevtoolOverlay(tag) {
+  return DEVTOOL_OVERLAY_PREFIXES.some((p) => tag.startsWith(p));
+}
+function escapeText(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function serializeComposed(node, opts, depth) {
+  if (depth > 256) return "";
+  if (node.nodeType === Node.TEXT_NODE) {
+    return escapeText(node.textContent ?? "");
+  }
+  if (node.nodeType === Node.COMMENT_NODE) return "";
+  if (node.nodeType !== Node.ELEMENT_NODE) return "";
+  const el = node;
+  const tag = el.tagName.toLowerCase();
+  if (SKIP_TAGS.has(tag)) return "";
+  if (isDevtoolOverlay(tag)) return "";
+  if (tag === "slot") {
+    const slot = el;
+    let assigned = [];
+    try {
+      assigned = slot.assignedNodes({ flatten: true });
+    } catch {
+    }
+    const source = assigned.length > 0 ? assigned : Array.from(el.childNodes);
+    return source.map((c) => serializeComposed(c, opts, depth + 1)).join("");
+  }
+  if (tag === "link" && (el.getAttribute("rel") || "").toLowerCase() === "stylesheet") {
+    return "";
+  }
+  if (tag === "style") {
+    return `<style>${el.textContent ?? ""}</style>`;
+  }
+  if (tag === "img" && opts.stripCrossOriginImages) {
+    const src = el.getAttribute("src") || "";
+    if (/^(https?:|\/\/)/i.test(src)) {
       try {
         const u = new URL(src, location.href);
-        if (u.origin !== location.origin) img.remove();
+        if (u.origin !== location.origin) return "";
       } catch {
-        img.remove();
+        return "";
       }
     }
-  });
-  clone.querySelectorAll("*").forEach((el) => {
-    if (el.tagName.includes("-")) el.remove();
-  });
-  clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-  const xs = new XMLSerializer();
-  const htmlStr = xs.serializeToString(clone);
+  }
+  if (tag === "canvas") return `<canvas></canvas>`;
+  const attrs = Array.from(el.attributes).filter((a) => !a.name.startsWith("on")).map((a) => ` ${a.name}="${escapeAttr(a.value)}"`).join("");
+  if (VOID_ELEMENTS.has(tag)) return `<${tag}${attrs}>`;
+  const childSource = el.shadowRoot ?? el;
+  const inner = Array.from(childSource.childNodes).map((c) => serializeComposed(c, opts, depth + 1)).join("");
+  return `<${tag}${attrs}>${inner}</${tag}>`;
+}
+function readInlineableStyles() {
+  const chunks = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      const rules = sheet.cssRules;
+      for (const rule of Array.from(rules)) chunks.push(rule.cssText);
+    } catch {
+    }
+  }
+  return chunks.join("\n");
+}
+async function captureViaSvgForeignObject() {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const w = Math.max(1, Math.min(window.innerWidth || document.documentElement.clientWidth || 1024, 2400));
+  const h = Math.max(1, Math.min(document.documentElement.scrollHeight, 4e3));
+  const inlinedCss = readInlineableStyles();
+  const bodyHtml = serializeComposed(document.body, { stripCrossOriginImages: true }, 0);
+  const htmlStr = `<html xmlns="http://www.w3.org/1999/xhtml"><body>${bodyHtml}</body></html>`;
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><foreignObject width="100%" height="100%">` + (inlinedCss ? `<style xmlns="http://www.w3.org/1999/xhtml">${escapeForXml(inlinedCss)}</style>` : "") + htmlStr + `</foreignObject></svg>`;
   const blobUrl = URL.createObjectURL(
     new Blob([svg], { type: "image/svg+xml;charset=utf-8" })
@@ -833,30 +896,19 @@ function loadImage(src) {
 function escapeForXml(s) {
   return s.replace(/]]>/g, "]]&gt;").replace(/<\//g, "&lt;/");
 }
-function readInlineableStyles() {
-  const chunks = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    try {
-      const rules = sheet.cssRules;
-      for (const rule of Array.from(rules)) chunks.push(rule.cssText);
-    } catch {
-    }
-  }
-  return chunks.join("\n");
-}
 async function captureViaHtmlSnapshot() {
   const inlinedCss = readInlineableStyles();
-  const clone = document.documentElement.cloneNode(true);
-  clone.querySelectorAll('link[rel="stylesheet"]').forEach((el) => el.remove());
-  clone.querySelectorAll("script").forEach((el) => el.remove());
-  const head = clone.querySelector("head");
-  if (head && inlinedCss) {
-    const styleEl = document.createElement("style");
-    styleEl.setAttribute("data-botim-snapshot", "1");
-    styleEl.textContent = inlinedCss;
-    head.insertBefore(styleEl, head.firstChild);
-  }
-  const html = "<!DOCTYPE html>\n" + clone.outerHTML;
+  const bodyHtml = serializeComposed(document.body, { stripCrossOriginImages: false }, 0);
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<base href="${escapeAttr(location.href)}">
+` + (inlinedCss ? `<style data-botim-snapshot="1">${inlinedCss}</style>
+` : "") + `</head>
+<body>${bodyHtml}</body>
+</html>`;
   return {
     data: JSON.stringify({
       html,