@botim/mp-debug-sdk 0.6.1 → 0.7.0

package/README.md

@@ -13,10 +13,15 @@ Mini-programs run on user devices in environments you can't easily attach a debu
 
 ## Install
 
+> **Heads-up — registry override required in BOTIM repos.**
+> Most BOTIM mini-program repos pin the `@botim` scope to the internal Artifactory mirror (`@botim:registry=https://artifactory.corp.algento.com/artifactory/api/npm/bot-npm/`). This SDK is **published to public npm**, so a plain `npm install @botim/mp-debug-sdk` in those repos will hit Artifactory, not find the package, and 404. Use the public registry explicitly for this one package:
+
 ```bash
-npm install @botim/mp-debug-sdk
+npm install @botim/mp-debug-sdk --registry=https://registry.npmjs.org/
 ```
 
+If your repo doesn't have an `@botim` scope override (rare), the flag is harmless — npm uses `registry.npmjs.org` by default. **Don't** add `@botim:registry=https://registry.npmjs.org/` to your `.npmrc`: it would shadow the internal Artifactory registry that other `@botim/*` packages (mp-framework, etc.) need.
+
 ## 1. Add the env config files
 
 Each environment of your mini-program ships with one config file at the project root, in the standard BOTIM mini-program schema:
@@ -237,6 +242,16 @@ Once your build is wired and shipped, see **[`docs/live-debugging.md`](./docs/li
 | `RemoteDebugHandle.flush()` | Force-flush the in-memory buffer. |
 | `RemoteDebugHandle.stop()` | Uninstall and drain the queue. |
 
+## AI debug skill (Claude Code)
+
+A Claude Code skill that teaches AI agents how to wire and consume this SDK lives at `.claude/skills/botim-debug-relay/SKILL.md`. Open Claude Code from this repo and the skill auto-loads — no setup needed. To use it from anywhere on your machine:
+
+```bash
+cp -r .claude/skills/botim-debug-relay ~/.claude/skills/
+```
+
+> **The file in this repo is a mirror.** The canonical copy lives in `botim-debug-relay/.claude/skills/botim-debug-relay/SKILL.md`. **Do not edit the SDK-side copy directly** — your changes will be overwritten by the next sync. Edit in the relay repo, then run `bash bin/sync-skill.sh` from that repo to propagate here.
+
 ## License
 
 [ISC](./LICENSE) © BOTIM

package/dist/index.cjs

@@ -22,6 +22,214 @@ var BotimConsentError = class extends Error {
   }
 };
 
+// src/consent-ui.ts
+var STORAGE_PREFIX = "__botim_debug_consent_";
+var CSS_PREFIX = "__botim-debug-consent";
+var STYLE_ELEMENT_ID = `${CSS_PREFIX}-styles`;
+var DEFAULT_COPY = {
+  title: "Enable BOTIM debug logging?",
+  body: [
+    "This shares your screen content, console logs, and network calls with the BOTIM team to help debug this mini-program.",
+    "No data leaves your device unless you agree. You can revoke this anytime by clearing site data or via developer tools."
+  ],
+  acceptLabel: "Allow",
+  declineLabel: "Skip"
+};
+function readConsentDecision(mpId) {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_PREFIX + mpId);
+    if (raw === "granted" || raw === "denied") return raw;
+    return null;
+  } catch {
+    return null;
+  }
+}
+function writeConsentDecision(mpId, decision) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_PREFIX + mpId, decision);
+  } catch {
+  }
+}
+function clearConsentDecision(mpId) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.removeItem(STORAGE_PREFIX + mpId);
+  } catch {
+  }
+}
+var inflightPrompt = null;
+async function promptForConsent(mpId, copy = {}) {
+  if (inflightPrompt) return inflightPrompt;
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return "denied";
+  }
+  const merged = {
+    title: copy.title ?? DEFAULT_COPY.title,
+    body: copy.body ?? DEFAULT_COPY.body,
+    acceptLabel: copy.acceptLabel ?? DEFAULT_COPY.acceptLabel,
+    declineLabel: copy.declineLabel ?? DEFAULT_COPY.declineLabel
+  };
+  inflightPrompt = new Promise((resolve) => {
+    injectStylesheet();
+    const overlay = buildOverlay(merged, (decision) => {
+      writeConsentDecision(mpId, decision);
+      try {
+        overlay.remove();
+      } catch {
+      }
+      inflightPrompt = null;
+      resolve(decision);
+    });
+    document.body.appendChild(overlay);
+  });
+  return inflightPrompt;
+}
+function injectStylesheet() {
+  if (document.getElementById(STYLE_ELEMENT_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ELEMENT_ID;
+  style.textContent = `
+    .${CSS_PREFIX}-overlay {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 2147483647 !important;
+      display: flex !important;
+      align-items: flex-end !important;
+      justify-content: center !important;
+      background: rgba(0, 0, 0, 0.45) !important;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+                   Roboto, "Helvetica Neue", sans-serif !important;
+      animation: ${CSS_PREFIX}-fade-in 160ms ease-out !important;
+      box-sizing: border-box !important;
+      padding: 16px !important;
+    }
+    @media (min-width: 480px) {
+      .${CSS_PREFIX}-overlay {
+        align-items: center !important;
+      }
+    }
+    @keyframes ${CSS_PREFIX}-fade-in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    .${CSS_PREFIX}-card {
+      background: #ffffff !important;
+      color: #0e1116 !important;
+      border-radius: 16px !important;
+      max-width: 420px !important;
+      width: 100% !important;
+      padding: 20px 20px 16px !important;
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
+      box-sizing: border-box !important;
+    }
+    .${CSS_PREFIX}-title {
+      font-size: 17px !important;
+      font-weight: 600 !important;
+      margin: 0 0 12px !important;
+      line-height: 1.3 !important;
+    }
+    .${CSS_PREFIX}-body {
+      font-size: 14px !important;
+      line-height: 1.5 !important;
+      color: #4a5160 !important;
+      margin: 0 0 8px !important;
+    }
+    .${CSS_PREFIX}-actions {
+      display: flex !important;
+      justify-content: flex-end !important;
+      gap: 8px !important;
+      margin-top: 16px !important;
+    }
+    .${CSS_PREFIX}-btn {
+      font-family: inherit !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+      padding: 9px 16px !important;
+      border-radius: 10px !important;
+      border: none !important;
+      cursor: pointer !important;
+      line-height: 1 !important;
+      min-height: 36px !important;
+      box-sizing: border-box !important;
+    }
+    .${CSS_PREFIX}-btn-decline {
+      background: transparent !important;
+      color: #4a5160 !important;
+    }
+    .${CSS_PREFIX}-btn-decline:hover {
+      background: #f3f4f6 !important;
+    }
+    .${CSS_PREFIX}-btn-accept {
+      background: #0066ff !important;
+      color: #ffffff !important;
+    }
+    .${CSS_PREFIX}-btn-accept:hover {
+      background: #0055d4 !important;
+    }
+    @media (prefers-color-scheme: dark) {
+      .${CSS_PREFIX}-card {
+        background: #1c1f24 !important;
+        color: #e8eaed !important;
+      }
+      .${CSS_PREFIX}-body {
+        color: #b9bec7 !important;
+      }
+      .${CSS_PREFIX}-btn-decline {
+        color: #b9bec7 !important;
+      }
+      .${CSS_PREFIX}-btn-decline:hover {
+        background: #2a2e35 !important;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+function buildOverlay(copy, onDecision) {
+  const overlay = document.createElement("div");
+  overlay.className = `${CSS_PREFIX}-overlay`;
+  overlay.setAttribute("role", "dialog");
+  overlay.setAttribute("aria-modal", "true");
+  overlay.setAttribute("aria-labelledby", `${CSS_PREFIX}-title`);
+  const card = document.createElement("div");
+  card.className = `${CSS_PREFIX}-card`;
+  const title = document.createElement("h2");
+  title.id = `${CSS_PREFIX}-title`;
+  title.className = `${CSS_PREFIX}-title`;
+  title.textContent = copy.title;
+  card.appendChild(title);
+  for (const para of copy.body) {
+    const p = document.createElement("p");
+    p.className = `${CSS_PREFIX}-body`;
+    p.textContent = para;
+    card.appendChild(p);
+  }
+  const actions = document.createElement("div");
+  actions.className = `${CSS_PREFIX}-actions`;
+  const declineBtn = document.createElement("button");
+  declineBtn.type = "button";
+  declineBtn.className = `${CSS_PREFIX}-btn ${CSS_PREFIX}-btn-decline`;
+  declineBtn.textContent = copy.declineLabel;
+  declineBtn.addEventListener("click", () => onDecision("denied"));
+  const acceptBtn = document.createElement("button");
+  acceptBtn.type = "button";
+  acceptBtn.className = `${CSS_PREFIX}-btn ${CSS_PREFIX}-btn-accept`;
+  acceptBtn.textContent = copy.acceptLabel;
+  acceptBtn.addEventListener("click", () => onDecision("granted"));
+  actions.appendChild(declineBtn);
+  actions.appendChild(acceptBtn);
+  card.appendChild(actions);
+  overlay.appendChild(card);
+  requestAnimationFrame(() => {
+    try {
+      acceptBtn.focus();
+    } catch {
+    }
+  });
+  return overlay;
+}
+
 // src/buffer.ts
 var RingBuffer = class {
   constructor(opts) {
@@ -1408,6 +1616,21 @@ function assertConfig(config) {
 async function enableRemoteDebug(options) {
   if (options.enabled === false) return NOOP_HANDLE;
   assertConfig(options.config);
+  if (options.consent?.promptUser) {
+    const cached = readConsentDecision(options.config.miniProgramId);
+    let decision = cached;
+    if (decision === null) {
+      decision = await promptForConsent(
+        options.config.miniProgramId,
+        options.consent.promptCopy
+      );
+    }
+    if (decision === "denied") return NOOP_HANDLE;
+    options = {
+      ...options,
+      consent: { ...options.consent, userOptIn: true }
+    };
+  }
   assertConsent(options.config, options.consent);
   const onError = options.onError ?? (() => {
   });
@@ -1610,7 +1833,11 @@ exports.DEFAULT_MAX_BATCH_SIZE = DEFAULT_MAX_BATCH_SIZE;
 exports.DEFAULT_MAX_BODY_BYTES = DEFAULT_MAX_BODY_BYTES;
 exports.DEFAULT_REDACT_HEADERS = DEFAULT_REDACT_HEADERS;
 exports.SCHEMA_VERSION = SCHEMA_VERSION;
+exports.clearConsentDecision = clearConsentDecision;
 exports.enableRemoteDebug = enableRemoteDebug;
 exports.getBOT = getBOT;
+exports.promptForConsent = promptForConsent;
+exports.readConsentDecision = readConsentDecision;
+exports.writeConsentDecision = writeConsentDecision;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map