@zerocost/sdk 0.10.0 → 0.12.0

package/dist/index.cjs

@@ -65,14 +65,18 @@ var ZerocostClient = class {
   }
   async request(path, body) {
     const url = `${this.baseUrl}${path}`;
-    this.log(`\u2192 ${url}`, body);
+    const payload = {
+      ...body || {},
+      app_id: this.config.appId
+    };
+    this.log(`\u2192 ${url}`, payload);
     const res = await fetch(url, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         "x-api-key": this.config.apiKey
       },
-      body: body ? JSON.stringify(body) : void 0
+      body: JSON.stringify(payload)
     });
     const data = await res.json();
     if (!res.ok) {
@@ -134,6 +138,142 @@ var TrackModule = class {
   }
 };
 
+// src/core/widget-render.ts
+var SDK_WIDGET_REFRESH_MS = 2e4;
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function resolveTheme(theme) {
+  if (theme === "light" || theme === "dark") {
+    return theme;
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  }
+  return "dark";
+}
+function getPalette(theme) {
+  const mode = resolveTheme(theme);
+  if (mode === "light") {
+    return {
+      bg: "#ffffff",
+      surface: "#f8f8f8",
+      surfaceStrong: "#efefef",
+      border: "#dddddd",
+      text: "#111111",
+      textMuted: "#666666",
+      textFaint: "#8a8a8a",
+      accentBg: "#111111",
+      accentText: "#ffffff",
+      badgeBg: "#f1f1f1"
+    };
+  }
+  return {
+    bg: "#0a0a0a",
+    surface: "#111111",
+    surfaceStrong: "#181818",
+    border: "#2b2b2b",
+    text: "#ffffff",
+    textMuted: "#a3a3a3",
+    textFaint: "#737373",
+    accentBg: "#ffffff",
+    accentText: "#111111",
+    badgeBg: "#171717"
+  };
+}
+function normalizeFormat(format) {
+  if (format === "floating-video") return "video-widget";
+  if (format === "sidebar-display") return "sponsored-card";
+  return format;
+}
+function renderVideoWidget(ad, theme) {
+  const palette = getPalette(theme);
+  const media = ad.video_url ? `<video src="${escapeHtml(ad.video_url)}" autoplay muted loop playsinline preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : ad.image_url ? `<img src="${escapeHtml(ad.image_url)}" alt="${escapeHtml(ad.title)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />` : `<div style="position:absolute;inset:0;background:linear-gradient(135deg,#1f2937 0%,#111827 40%,#030712 100%);"></div>`;
+  return `
+    <div style="position:relative;width:200px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:${palette.bg};border:1px solid rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.45);font-family:Space Grotesk,system-ui,sans-serif;">
+      ${media}
+      <div style="position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:3;">
+        <button type="button" data-zc-close style="width:22px;height:22px;border:none;border-radius:999px;background:rgba(0,0,0,0.52);color:#fff;font-size:12px;cursor:pointer;">x</button>
+      </div>
+      <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.12) 35%,rgba(0,0,0,0.85) 100%);"></div>
+      <div style="position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2;">
+        <div style="display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(17,17,17,0.72);border:1px solid rgba(255,255,255,0.08);color:#d4d4d4;font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;">Sponsored</div>
+        <div style="margin-top:10px;color:#fff;font-size:14px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
+        ${ad.description ? `<div style="margin-top:6px;color:rgba(255,255,255,0.78);font-size:11px;line-height:1.35;">${escapeHtml(ad.description)}</div>` : ""}
+        <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="margin-top:12px;display:block;width:100%;padding:9px 10px;border-radius:10px;background:#ffffff;color:#111111;text-align:center;text-decoration:none;font-size:11px;font-weight:700;">${escapeHtml(ad.cta_text || "Learn More")}</a>
+      </div>
+    </div>
+  `;
+}
+function renderTooltipWidget(ad, theme) {
+  const palette = getPalette(theme);
+  return `
+    <div style="width:320px;max-width:100%;padding:14px 15px;border-radius:14px;background:${palette.surface};border:1px solid ${palette.border};box-shadow:0 18px 48px rgba(0,0,0,0.28);font-family:Space Grotesk,system-ui,sans-serif;">
+      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+        <div style="display:inline-flex;align-items:center;gap:6px;color:${palette.textFaint};font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">
+          <span style="width:6px;height:6px;border-radius:999px;background:${palette.text};display:inline-block;"></span>
+          Sponsored
+        </div>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+      </div>
+      <div style="margin-top:10px;color:${palette.text};font-size:13px;line-height:1.55;">
+        ${escapeHtml(ad.description || ad.title)} <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="color:${palette.text};font-weight:700;text-decoration:underline;text-underline-offset:2px;">${escapeHtml(ad.cta_text || "Learn More")}</a>
+      </div>
+    </div>
+  `;
+}
+function renderSponsoredCard(ad, theme) {
+  const palette = getPalette(theme);
+  const media = ad.image_url ? `<img src="${escapeHtml(ad.image_url)}" alt="${escapeHtml(ad.title)}" style="display:block;width:100%;height:92px;object-fit:cover;" />` : `<div style="width:100%;height:92px;background:linear-gradient(135deg,#1f2937 0%,#111827 40%,#030712 100%);"></div>`;
+  return `
+    <div style="width:176px;border-radius:16px;overflow:hidden;background:${palette.surface};border:1px solid ${palette.border};box-shadow:0 18px 52px rgba(0,0,0,0.32);font-family:Space Grotesk,system-ui,sans-serif;">
+      ${media}
+      <div style="padding:12px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
+          <div style="display:inline-flex;align-items:center;padding:4px 6px;border-radius:999px;background:${palette.badgeBg};color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</div>
+          <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+        </div>
+        <div style="margin-top:10px;color:${palette.text};font-size:13px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
+        ${ad.description ? `<div style="margin-top:6px;color:${palette.textMuted};font-size:11px;line-height:1.35;">${escapeHtml(ad.description)}</div>` : ""}
+        <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="margin-top:12px;display:block;width:100%;padding:8px 10px;border-radius:10px;border:1px solid ${palette.border};background:${palette.surfaceStrong};color:${palette.text};text-align:center;text-decoration:none;font-size:11px;font-weight:700;">${escapeHtml(ad.cta_text || "Learn More")}</a>
+      </div>
+    </div>
+  `;
+}
+function renderInlineText(ad, theme) {
+  const palette = getPalette(theme);
+  const media = ad.image_url ? `<img src="${escapeHtml(ad.image_url)}" alt="${escapeHtml(ad.title)}" style="width:34px;height:34px;border-radius:10px;object-fit:cover;flex-shrink:0;" />` : `<div style="width:34px;height:34px;border-radius:10px;background:${palette.accentBg};color:${palette.accentText};display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;">Ad</div>`;
+  return `
+    <div style="margin:10px 0;border-radius:14px;overflow:hidden;background:${palette.surface};border:1px solid ${palette.border};font-family:Space Grotesk,system-ui,sans-serif;">
+      <div style="display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid ${palette.border};background:${palette.surfaceStrong};">
+        <span style="color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</span>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+      </div>
+      <div style="padding:12px;display:flex;gap:10px;align-items:flex-start;">
+        ${media}
+        <div style="min-width:0;flex:1;">
+          <div style="color:${palette.text};font-size:13px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
+          ${ad.description ? `<div style="margin-top:5px;color:${palette.textMuted};font-size:11px;line-height:1.45;">${escapeHtml(ad.description)}</div>` : ""}
+          <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="margin-top:9px;display:inline-block;padding:7px 10px;border-radius:9px;background:${palette.accentBg};color:${palette.accentText};text-decoration:none;font-size:10px;font-weight:700;">${escapeHtml(ad.cta_text || "Learn More")}</a>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderWidgetMarkup(ad, options) {
+  const format = normalizeFormat(options.format);
+  if (format === "tooltip-ad") {
+    return renderTooltipWidget(ad, options.theme);
+  }
+  if (format === "sponsored-card") {
+    return renderSponsoredCard(ad, options.theme);
+  }
+  if (format === "inline-text") {
+    return renderInlineText(ad, options.theme);
+  }
+  return renderVideoWidget(ad, options.theme);
+}
+
 // src/modules/widget.ts
 var POSITION_STYLES = {
   "bottom-right": "position:fixed;bottom:24px;right:24px;z-index:9999;",
@@ -148,6 +288,17 @@ var POSITION_STYLES = {
 };
 var FORMAT_PRIORITY = ["video-widget", "tooltip-ad", "sponsored-card", "sidebar-display", "inline-text"];
 var AUTO_SLOT_ID = "zerocost-auto-slot";
+var CHAT_CONTAINER_SELECTORS = [
+  "[data-zerocost-chat]",
+  "[data-zc-chat]",
+  "[data-chat]",
+  "[data-chat-stream]",
+  "[data-conversation]",
+  "[data-ai-chat]",
+  '[role="log"]',
+  '[aria-label*="chat" i]',
+  '[aria-label*="conversation" i]'
+];
 var WidgetModule = class {
   constructor(client) {
     this.client = client;
@@ -155,15 +306,17 @@ var WidgetModule = class {
   mounted = /* @__PURE__ */ new Map();
   async autoInjectWithConfig(display, widget) {
     try {
-      const selected = this.resolveSelectedWidget(display, widget);
+      const selected = this.resolveSelectedWidgets(display, widget);
       this.clearAutoInjectedSlots();
-      if (!selected || !selected.enabled) {
+      if (selected.length === 0) {
         this.client.log("No enabled widget format found. Skipping injection.");
         return;
       }
-      this.client.log(`Auto-inject: rendering configured format "${selected.format}" only.`);
-      await this.mountSingleFormat(selected);
-      this.client.log("\u2713 Single ad slot injected.");
+      for (const config of selected) {
+        this.client.log(`Auto-inject: rendering configured format "${config.format}".`);
+        await this.mountSingleFormat(config);
+      }
+      this.client.log("Auto-inject completed.");
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
@@ -177,34 +330,65 @@ var WidgetModule = class {
       this.client.log(`Widget autoInject error: ${err}`);
     }
   }
-  resolveSelectedWidget(display, widget) {
-    if (widget?.enabled && widget?.format) {
-      return {
+  resolveSelectedWidgets(display, widget) {
+    const configs = this.normalizeConfigs(display);
+    const selected = [];
+    if (widget?.enabled && widget?.format && widget.format !== "inline-text") {
+      selected.push({
         format: widget.format,
         position: widget.position || "bottom-right",
         theme: widget.theme || "dark",
         autoplay: widget.autoplay ?? widget.format === "video-widget",
         enabled: true
-      };
-    }
-    const configs = this.normalizeConfigs(display);
-    for (const fmt of FORMAT_PRIORITY) {
-      const cfg = configs[fmt];
-      if (cfg?.enabled) {
-        return {
-          format: fmt,
-          position: cfg.position,
-          theme: cfg.theme,
-          autoplay: cfg.autoplay,
-          enabled: true
-        };
+      });
+    } else {
+      for (const format of FORMAT_PRIORITY) {
+        if (format === "inline-text") continue;
+        const config = configs[format];
+        if (config?.enabled) {
+          selected.push({
+            format,
+            position: config.position,
+            theme: config.theme,
+            autoplay: config.autoplay,
+            enabled: true
+          });
+          break;
+        }
       }
     }
-    return null;
+    const inlineConfig = configs["inline-text"];
+    if (widget?.enabled && widget?.format === "inline-text") {
+      selected.push({
+        format: "inline-text",
+        position: widget.position || inlineConfig?.position || "after-paragraph-1",
+        theme: widget.theme || inlineConfig?.theme || "dark",
+        autoplay: false,
+        enabled: true
+      });
+    } else if (inlineConfig?.enabled) {
+      selected.push({
+        format: "inline-text",
+        position: inlineConfig.position,
+        theme: inlineConfig.theme,
+        autoplay: false,
+        enabled: true
+      });
+    }
+    return selected;
   }
   normalizeConfigs(display) {
-    if (display && typeof display === "object" && "video-widget" in display) {
-      return display;
+    if (display && typeof display === "object" && ("video-widget" in display || "floating-video" in display)) {
+      const source = display;
+      const videoConfig = source["video-widget"] || source["floating-video"];
+      const sponsoredCardConfig = source["sponsored-card"] || source["sidebar-display"];
+      return {
+        "video-widget": videoConfig || { position: "bottom-right", theme: "dark", autoplay: true, enabled: true },
+        "tooltip-ad": source["tooltip-ad"] || { position: "bottom-right", theme: "dark", autoplay: false, enabled: false },
+        "sponsored-card": sponsoredCardConfig || { position: "bottom-right", theme: "dark", autoplay: false, enabled: false },
+        "sidebar-display": sponsoredCardConfig || { position: "bottom-right", theme: "dark", autoplay: false, enabled: false },
+        "inline-text": source["inline-text"] || { position: "after-paragraph-1", theme: "dark", autoplay: false, enabled: false }
+      };
     }
     const pos = display?.position || "bottom-right";
     const theme = display?.theme || "dark";
@@ -224,31 +408,32 @@ var WidgetModule = class {
       return;
     }
     if (!isInline) {
-      let el = document.getElementById(AUTO_SLOT_ID);
-      if (!el) {
-        el = document.createElement("div");
-        el.id = AUTO_SLOT_ID;
-        document.body.appendChild(el);
+      let element = document.getElementById(AUTO_SLOT_ID);
+      if (!element) {
+        element = document.createElement("div");
+        element.id = AUTO_SLOT_ID;
+        document.body.appendChild(element);
       }
       const posStyle = POSITION_STYLES[config.position] || POSITION_STYLES["bottom-right"];
-      const maxW = config.format === "video-widget" ? "max-width:200px;" : config.format === "sponsored-card" || config.format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
-      el.setAttribute("style", `${posStyle}${maxW}`);
-      el.setAttribute("data-zerocost", "");
-      el.setAttribute("data-format", config.format);
+      const maxW = config.format === "video-widget" ? "max-width:200px;" : "max-width:176px;";
+      element.setAttribute("style", `${posStyle}${maxW}`);
+      element.setAttribute("data-zerocost", "");
+      element.setAttribute("data-format", config.format);
     }
     await this.mount(targetElementId, {
       format: config.format,
-      refreshInterval: 0,
-      // Config polling handles re-rendering
+      refreshInterval: SDK_WIDGET_REFRESH_MS / 1e3,
       theme: config.theme,
       autoplay: config.autoplay,
       position: config.position
     });
   }
   ensureInlineTarget(position) {
+    const chatContainer = this.findChatContainer();
+    if (!chatContainer) return null;
     const paragraphMatch = /after-paragraph-(\d+)/.exec(position || "");
     const index = paragraphMatch ? Number(paragraphMatch[1]) : 1;
-    const paragraphs = Array.from(document.querySelectorAll("p"));
+    const paragraphs = Array.from(chatContainer.querySelectorAll("p"));
     const anchor = paragraphs[Math.max(0, Math.min(paragraphs.length - 1, index - 1))];
     if (!anchor) return null;
     const existing = document.getElementById(AUTO_SLOT_ID);
@@ -265,11 +450,22 @@ var WidgetModule = class {
     }
     return inlineId;
   }
+  findChatContainer() {
+    for (const selector of CHAT_CONTAINER_SELECTORS) {
+      const container = document.querySelector(selector);
+      if (container) return container;
+    }
+    const semanticContainers = Array.from(document.querySelectorAll("section, main, div, article"));
+    return semanticContainers.find((node) => {
+      const marker = `${node.id} ${node.className || ""}`.toLowerCase();
+      return /chat|conversation|assistant|messages|thread/.test(marker);
+    }) || null;
+  }
   async mount(targetElementId, options = {}) {
-    const el = document.getElementById(targetElementId);
-    if (!el) return;
+    const element = document.getElementById(targetElementId);
+    if (!element) return;
     if (this.mounted.has(targetElementId)) this.unmount(targetElementId);
-    const refreshMs = (options.refreshInterval ?? 30) * 1e3;
+    const refreshMs = (options.refreshInterval ?? SDK_WIDGET_REFRESH_MS / 1e3) * 1e3;
     const theme = options.theme || "dark";
     const format = options.format || "video-widget";
     const autoplay = options.autoplay ?? format === "video-widget";
@@ -283,15 +479,15 @@ var WidgetModule = class {
         };
         const data = await this.client.request("/serve-widget", body);
         const ad = data.ad;
-        if (!ad || !data.html) {
+        if (!ad) {
           this.client.log(`No ad inventory available for configured format "${format}".`);
-          el.innerHTML = "";
+          element.innerHTML = "";
           return;
         }
-        el.innerHTML = data.html;
-        el.setAttribute("data-zerocost-ad-id", ad.id);
-        this.ensureVideoPlayback(el);
-        const ctas = el.querySelectorAll("[data-zc-cta]");
+        element.innerHTML = renderWidgetMarkup(ad, { format, theme });
+        element.setAttribute("data-zerocost-ad-id", ad.id);
+        this.ensureVideoPlayback(element);
+        const ctas = element.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {
             this.client.request("/track-event", {
@@ -301,11 +497,11 @@ var WidgetModule = class {
             });
           });
         });
-        const closeBtn = el.querySelector("[data-zc-close]");
+        const closeBtn = element.querySelector("[data-zc-close]");
         if (closeBtn) {
-          closeBtn.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+          closeBtn.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
             this.unmount(targetElementId);
           });
         }
@@ -342,8 +538,8 @@ var WidgetModule = class {
   unmount(targetElementId) {
     const slot = this.mounted.get(targetElementId);
     if (slot?.interval) clearInterval(slot.interval);
-    const el = document.getElementById(targetElementId);
-    if (el) el.remove();
+    const element = document.getElementById(targetElementId);
+    if (element) element.remove();
     this.mounted.delete(targetElementId);
   }
   unmountAll() {
@@ -362,59 +558,99 @@ var LLMDataModule = class {
   clickHandler = null;
   errorHandler = null;
   fetchOriginal = null;
-  /**
-   * Start capturing LLM training data based on server config.
-   */
+  mutationObserver = null;
+  conversationScanTimer = null;
+  isSampledSession = false;
+  observedConversations = /* @__PURE__ */ new Map();
+  conversationCounter = 0;
   start(config) {
+    this.stop();
     this.config = config;
     this.client.log(`LLMData: started (sample=${config.sampleRate}%)`);
-    if (Math.random() * 100 > config.sampleRate) {
+    this.isSampledSession = Math.random() * 100 <= config.sampleRate;
+    if (!this.isSampledSession) {
       this.client.log("LLMData: session not sampled, skipping");
       return;
     }
     if (config.uiInteractions) this.captureUIInteractions();
-    if (config.textPrompts) this.interceptPrompts();
+    if (config.textPrompts) {
+      this.interceptPrompts();
+      this.captureConversationSurfaces();
+      this.scheduleConversationScan();
+    }
     if (config.apiErrors) this.captureAPIErrors();
     this.flushInterval = setInterval(() => this.flush(), 1e4);
   }
   stop() {
-    if (this.flushInterval) clearInterval(this.flushInterval);
+    if (this.flushInterval) {
+      clearInterval(this.flushInterval);
+      this.flushInterval = null;
+    }
     if (this.clickHandler) {
       document.removeEventListener("click", this.clickHandler, true);
+      this.clickHandler = null;
     }
     if (this.errorHandler) {
       window.removeEventListener("error", this.errorHandler);
+      this.errorHandler = null;
     }
     if (this.fetchOriginal) {
       window.fetch = this.fetchOriginal;
+      this.fetchOriginal = null;
     }
-    this.flush();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    if (this.conversationScanTimer) {
+      clearTimeout(this.conversationScanTimer);
+      this.conversationScanTimer = null;
+    }
+    this.observedConversations.clear();
+    this.isSampledSession = false;
+    void this.flush();
     this.config = null;
   }
-  /**
-   * Manually track an LLM prompt/response pair (for startups that want to
-   * explicitly send their AI interactions).
-   */
   trackPrompt(prompt, response, meta) {
-    if (!this.config?.textPrompts) return;
+    if (!this.canCapture("textPrompts")) return;
     this.pushEvent("llm_prompt", {
       prompt: this.scrub(prompt),
       response: response ? this.scrub(response) : void 0,
-      ...meta
+      source: "manual",
+      ...this.sanitizeMeta(meta)
+    });
+  }
+  trackConversation(messages, meta) {
+    if (!this.canCapture("textPrompts")) return;
+    const cleanedMessages = messages.map((message) => ({
+      role: this.normalizeRole(message.role),
+      content: this.scrub(message.content || ""),
+      ...message.name ? { name: this.scrub(message.name) } : {}
+    })).filter((message) => message.content);
+    if (cleanedMessages.length === 0) return;
+    const sanitizedMeta = this.sanitizeMeta(meta);
+    const conversationId = this.getConversationId(sanitizedMeta);
+    cleanedMessages.forEach((message, index) => {
+      this.pushConversationMessage(message, {
+        conversationId,
+        turnIndex: index,
+        source: "manual",
+        ...sanitizedMeta
+      });
+    });
+    this.pushConversationSummary(conversationId, cleanedMessages, {
+      source: "manual",
+      ...sanitizedMeta
     });
   }
-  /**
-   * Manually track an API error.
-   */
   trackError(endpoint, status, message) {
-    if (!this.config?.apiErrors) return;
+    if (!this.canCapture("apiErrors")) return;
     this.pushEvent("api_error", {
       endpoint,
       status,
       message: message ? this.scrub(message) : void 0
     });
   }
-  // ── Private ──
   captureUIInteractions() {
     this.clickHandler = (e) => {
       const target = e.target;
@@ -438,44 +674,136 @@ var LLMDataModule = class {
   }
   interceptPrompts() {
     this.fetchOriginal = window.fetch;
-    const self = this;
     const origFetch = window.fetch;
+    const self = this;
     window.fetch = async function(input, init) {
       const fetchInput = input instanceof URL ? input.toString() : input;
       const url = typeof fetchInput === "string" ? fetchInput : fetchInput.url;
       const isLLM = /\/(chat|completions|generate|predict|inference|ask)/i.test(url);
-      if (!isLLM) return origFetch.call(window, fetchInput, init);
+      if (!isLLM) {
+        return origFetch.call(window, fetchInput, init);
+      }
+      const requestMeta = self.extractRequestMeta(url, init);
+      if (requestMeta.messages.length > 0) {
+        requestMeta.messages.forEach((message, index) => {
+          self.pushConversationMessage(message, {
+            conversationId: requestMeta.conversationId,
+            turnIndex: index,
+            source: "network-request",
+            endpoint: requestMeta.endpoint,
+            requestId: requestMeta.requestId,
+            ...requestMeta.meta
+          });
+        });
+      }
       try {
         const res = await origFetch.call(window, fetchInput, init);
         const clone = res.clone();
-        let reqBody;
-        if (init?.body && typeof init.body === "string") {
-          try {
-            const parsed = JSON.parse(init.body);
-            reqBody = JSON.stringify(parsed.messages || parsed.prompt || "").slice(0, 500);
-          } catch {
-            reqBody = void 0;
-          }
-        }
         clone.text().then((text) => {
+          const responseMessages = self.extractResponseMessages(text);
+          if (responseMessages.length > 0) {
+            responseMessages.forEach((message, index) => {
+              self.pushConversationMessage(message, {
+                conversationId: requestMeta.conversationId,
+                turnIndex: requestMeta.messages.length + index,
+                source: "network-response",
+                endpoint: requestMeta.endpoint,
+                requestId: requestMeta.requestId,
+                status: res.status,
+                ...requestMeta.meta
+              });
+            });
+            self.pushConversationSummary(
+              requestMeta.conversationId,
+              [...requestMeta.messages, ...responseMessages],
+              {
+                source: "network",
+                endpoint: requestMeta.endpoint,
+                requestId: requestMeta.requestId,
+                status: res.status,
+                ...requestMeta.meta
+              }
+            );
+          }
           self.pushEvent("llm_prompt", {
-            endpoint: new URL(url).pathname,
-            request: reqBody ? self.scrub(reqBody) : void 0,
-            response: self.scrub(text.slice(0, 500)),
-            status: res.status
+            endpoint: requestMeta.endpoint,
+            conversationId: requestMeta.conversationId,
+            request: requestMeta.promptPreview,
+            response: self.scrub(text.slice(0, 1200)),
+            status: res.status,
+            source: "network",
+            requestId: requestMeta.requestId,
+            ...requestMeta.meta
           });
         }).catch(() => {
         });
         return res;
-      } catch (err) {
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
         self.pushEvent("api_error", {
-          endpoint: new URL(url).pathname,
-          message: self.scrub(err.message)
+          endpoint: requestMeta.endpoint,
+          message: self.scrub(message),
+          requestId: requestMeta.requestId
         });
-        throw err;
+        throw error;
       }
     };
   }
+  captureConversationSurfaces() {
+    if (typeof MutationObserver === "undefined" || typeof document === "undefined") return;
+    this.mutationObserver = new MutationObserver(() => this.scheduleConversationScan());
+    this.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+  scheduleConversationScan() {
+    if (this.conversationScanTimer) {
+      clearTimeout(this.conversationScanTimer);
+    }
+    this.conversationScanTimer = setTimeout(() => {
+      this.conversationScanTimer = null;
+      this.scanConversationSurfaces();
+    }, 300);
+  }
+  scanConversationSurfaces() {
+    const containers = this.findConversationContainers();
+    if (containers.length === 0) return;
+    containers.forEach((container) => {
+      const snapshot = this.buildConversationSnapshot(container);
+      if (!snapshot || snapshot.messages.length === 0) return;
+      const existing = this.observedConversations.get(snapshot.conversationId);
+      const newMessages = snapshot.messages.map((message, index) => ({
+        message,
+        index,
+        fingerprint: this.getMessageFingerprint(snapshot.conversationId, message, index)
+      })).filter(({ fingerprint }) => !existing?.messageFingerprints.has(fingerprint));
+      if (newMessages.length === 0 && existing?.signature === snapshot.signature) {
+        return;
+      }
+      newMessages.forEach(({ message, index, fingerprint }) => {
+        this.pushConversationMessage(message, {
+          conversationId: snapshot.conversationId,
+          turnIndex: index,
+          source: "dom",
+          conversationTitle: snapshot.title,
+          pageTitle: document.title,
+          path: location.pathname
+        });
+        snapshot.messageFingerprints.add(fingerprint);
+      });
+      if (!existing || existing.signature !== snapshot.signature) {
+        this.pushConversationSummary(snapshot.conversationId, snapshot.messages, {
+          source: "dom",
+          conversationTitle: snapshot.title,
+          pageTitle: document.title,
+          path: location.pathname
+        });
+      }
+      this.observedConversations.set(snapshot.conversationId, snapshot);
+    });
+  }
   captureAPIErrors() {
     this.errorHandler = (e) => {
       this.pushEvent("api_error", {
@@ -487,9 +815,37 @@ var LLMDataModule = class {
     };
     window.addEventListener("error", this.errorHandler);
   }
+  pushConversationMessage(message, meta) {
+    const content = this.scrub(message.content || "");
+    if (!content) return;
+    this.pushEvent("llm_message", {
+      role: this.normalizeRole(message.role),
+      content,
+      ...message.name ? { name: this.scrub(message.name) } : {},
+      ...meta
+    });
+  }
+  pushConversationSummary(conversationId, messages, meta) {
+    const preview = messages.map((message) => ({
+      role: this.normalizeRole(message.role),
+      content: this.scrub(message.content || ""),
+      ...message.name ? { name: this.scrub(message.name) } : {}
+    })).filter((message) => message.content).slice(0, 12);
+    if (preview.length === 0) return;
+    this.pushEvent("llm_conversation", {
+      conversationId,
+      messageCount: preview.length,
+      roles: Array.from(new Set(preview.map((message) => message.role))),
+      preview,
+      ...meta
+    });
+  }
   pushEvent(type, data) {
+    if (!this.isSampledSession) return;
     this.buffer.push({ type, data, timestamp: Date.now() });
-    if (this.buffer.length >= 50) this.flush();
+    if (this.buffer.length >= 50) {
+      void this.flush();
+    }
   }
   async flush() {
     if (this.buffer.length === 0) return;
@@ -502,25 +858,286 @@ var LLMDataModule = class {
       this.buffer.unshift(...events);
     }
   }
-  /** Basic PII scrubbing */
   scrub(text) {
-    return text.replace(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, "[EMAIL]").replace(/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, "[PHONE]").replace(/\b\d{4}[-\s]?\d{4}[-\s]?\d{4}[-\s]?\d{4}\b/g, "[CARD]").replace(/\b\d{3}-\d{2}-\d{4}\b/g, "[SSN]").replace(/\b(sk|pk|api|key|secret|token)[-_]?[a-zA-Z0-9]{16,}\b/gi, "[API_KEY]");
+    return text.replace(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/gi, "[EMAIL]").replace(/\+?\d[\d\s().-]{7,}\d/g, "[PHONE]").replace(/\b\d{3}-\d{2}-\d{4}\b/g, "[SSN]").replace(/\b(?:\d[ -]*?){13,19}\b/g, "[CARD]").replace(/\b(sk|pk|api|key|secret|token)[-_]?[a-zA-Z0-9]{16,}\b/gi, "[API_KEY]").replace(/\b[A-F0-9]{32,}\b/gi, "[TOKEN]").replace(/\b(?:\d{1,3}\.){3}\d{1,3}\b/g, "[IP]");
   }
   getPath(el) {
     const parts = [];
-    let cur = el;
-    while (cur && parts.length < 5) {
-      let seg = cur.tagName?.toLowerCase() || "";
-      if (cur.id) seg += `#${cur.id}`;
-      else if (cur.className && typeof cur.className === "string") {
-        const cls = cur.className.split(" ")[0];
-        if (cls) seg += `.${cls}`;
+    let current = el;
+    while (current && parts.length < 5) {
+      let segment = current.tagName?.toLowerCase() || "";
+      if (current.id) {
+        segment += `#${current.id}`;
+      } else if (typeof current.className === "string" && current.className) {
+        const cls = current.className.split(" ")[0];
+        if (cls) segment += `.${cls}`;
       }
-      parts.unshift(seg);
-      cur = cur.parentElement;
+      parts.unshift(segment);
+      current = current.parentElement;
     }
     return parts.join(" > ");
   }
+  canCapture(setting) {
+    return Boolean(this.config?.[setting] && this.isSampledSession);
+  }
+  sanitizeMeta(meta) {
+    if (!meta) return {};
+    return Object.fromEntries(
+      Object.entries(meta).map(([key, value]) => {
+        if (typeof value === "string") return [key, this.scrub(value)];
+        if (Array.isArray(value)) {
+          return [key, value.map((item) => typeof item === "string" ? this.scrub(item) : item)];
+        }
+        return [key, value];
+      })
+    );
+  }
+  extractRequestMeta(url, init) {
+    const endpoint = this.safePathname(url);
+    const requestId = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+    const parsed = this.parseRequestBody(init?.body);
+    const conversationId = this.getConversationId(parsed.meta);
+    return {
+      endpoint,
+      requestId,
+      conversationId,
+      messages: parsed.messages,
+      promptPreview: parsed.messages.map((message) => `[${message.role}] ${message.content}`).join("\n").slice(0, 1200),
+      meta: parsed.meta
+    };
+  }
+  parseRequestBody(body) {
+    if (!body || typeof body !== "string") {
+      return { messages: [], meta: {} };
+    }
+    try {
+      const parsed = JSON.parse(body);
+      const messages = this.extractMessagesFromUnknown(parsed);
+      const meta = {};
+      const keys = ["model", "conversationId", "conversation_id", "threadId", "thread_id", "sessionId", "session_id", "topic", "domain", "workflow"];
+      keys.forEach((key) => {
+        const value = parsed[key];
+        if (typeof value === "string" && value.trim()) {
+          meta[key] = this.scrub(value.trim().slice(0, 120));
+        }
+      });
+      return { messages, meta };
+    } catch {
+      return {
+        messages: [{ role: "user", content: this.scrub(body.slice(0, 2e3)) }],
+        meta: {}
+      };
+    }
+  }
+  extractMessagesFromUnknown(value) {
+    if (!value || typeof value !== "object") return [];
+    const record = value;
+    if (Array.isArray(record.messages)) {
+      return record.messages.map((item) => this.normalizeMessage(item)).filter((item) => Boolean(item?.content));
+    }
+    if (typeof record.prompt === "string") {
+      return [{ role: "user", content: this.scrub(record.prompt.slice(0, 2e3)) }];
+    }
+    if (Array.isArray(record.input)) {
+      return record.input.map((item) => this.normalizeMessage(item)).filter((item) => Boolean(item?.content));
+    }
+    if (typeof record.input === "string") {
+      return [{ role: "user", content: this.scrub(record.input.slice(0, 2e3)) }];
+    }
+    return [];
+  }
+  normalizeMessage(input) {
+    if (typeof input === "string") {
+      const content2 = this.scrub(input.slice(0, 2e3));
+      return content2 ? { role: "user", content: content2 } : null;
+    }
+    if (!input || typeof input !== "object") return null;
+    const record = input;
+    const role = this.normalizeRole(record.role);
+    const content = this.extractContent(record.content ?? record.text ?? record.message);
+    const name = typeof record.name === "string" ? this.scrub(record.name.slice(0, 120)) : void 0;
+    if (!content) return null;
+    return { role, content, ...name ? { name } : {} };
+  }
+  extractContent(value) {
+    if (typeof value === "string") return this.scrub(value.slice(0, 4e3));
+    if (Array.isArray(value)) {
+      return value.map((item) => {
+        if (typeof item === "string") return this.scrub(item);
+        if (item && typeof item === "object") {
+          const record = item;
+          if (typeof record.text === "string") return this.scrub(record.text);
+        }
+        return "";
+      }).filter(Boolean).join("\n").slice(0, 4e3);
+    }
+    return "";
+  }
+  extractResponseMessages(text) {
+    const trimmed = text.trim();
+    if (!trimmed) return [];
+    try {
+      const parsed = JSON.parse(trimmed);
+      const messages = this.extractAssistantMessages(parsed);
+      if (messages.length > 0) return messages;
+    } catch {
+    }
+    return [{ role: "assistant", content: this.scrub(trimmed.slice(0, 4e3)) }];
+  }
+  extractAssistantMessages(value) {
+    if (!value || typeof value !== "object") return [];
+    const record = value;
+    const direct = this.normalizeMessage(record.message ?? record.output ?? record.response ?? record.answer);
+    if (direct) {
+      return [{ ...direct, role: direct.role === "user" ? "assistant" : direct.role }];
+    }
+    if (Array.isArray(record.choices)) {
+      return record.choices.map((choice) => {
+        if (!choice || typeof choice !== "object") return null;
+        const payload = choice;
+        const normalized = this.normalizeMessage(payload.message ?? payload.delta ?? payload.text);
+        if (!normalized) return null;
+        return {
+          ...normalized,
+          role: normalized.role === "user" ? "assistant" : normalized.role
+        };
+      }).filter((item) => Boolean(item && item.content));
+    }
+    if (Array.isArray(record.messages)) {
+      return record.messages.map((item) => this.normalizeMessage(item)).filter((item) => Boolean(item && item.content)).map((item) => ({
+        ...item,
+        role: item.role === "user" ? "assistant" : item.role
+      }));
+    }
+    return [];
+  }
+  findConversationContainers() {
+    const selectors = [
+      "[data-chat-thread]",
+      "[data-conversation]",
+      '[data-testid*="chat" i]',
+      '[data-testid*="conversation" i]',
+      '[aria-label*="chat" i]',
+      '[aria-label*="conversation" i]',
+      '[role="log"]',
+      '[role="feed"]',
+      "main"
+    ];
+    const found = selectors.flatMap((selector) => Array.from(document.querySelectorAll(selector))).filter((element) => this.looksLikeConversationContainer(element));
+    return Array.from(new Set(found)).slice(0, 4);
+  }
+  looksLikeConversationContainer(element) {
+    const marker = [
+      element.dataset.chatThread,
+      element.dataset.conversation,
+      element.getAttribute("aria-label"),
+      element.getAttribute("data-testid"),
+      typeof element.className === "string" ? element.className : "",
+      element.id
+    ].filter(Boolean).join(" ").toLowerCase();
+    if (/chat|conversation|assistant|thread|messages/.test(marker)) {
+      return true;
+    }
+    const messageNodes = element.querySelectorAll('[data-message-author-role], [data-role], [role="article"], article, [data-testid*="message" i]');
+    return messageNodes.length >= 2;
+  }
+  buildConversationSnapshot(container) {
+    const messageNodes = Array.from(
+      container.querySelectorAll('[data-message-author-role], [data-role], [role="article"], article, [data-testid*="message" i], [class*="message"], [class*="chat"]')
+    ).filter((node) => this.isUsableMessageNode(node)).slice(0, 80);
+    const messages = messageNodes.map((node) => this.messageFromNode(node)).filter((message) => Boolean(message?.content));
+    if (messages.length < 2) return null;
+    const title = this.extractConversationTitle(container);
+    const conversationId = this.getConversationId({ conversationTitle: title, path: location.pathname }, container);
+    const signature = messages.map((message) => `${message.role}:${message.content}`).join("|").slice(0, 6e3);
+    return {
+      conversationId,
+      signature,
+      messageFingerprints: new Set(messages.map((message, index) => this.getMessageFingerprint(conversationId, message, index))),
+      messages,
+      title
+    };
+  }
+  isUsableMessageNode(node) {
+    const text = node.innerText?.trim() || "";
+    if (!text || text.length < 2) return false;
+    const marker = `${typeof node.className === "string" ? node.className : ""} ${node.getAttribute("data-testid") || ""} ${node.getAttribute("aria-label") || ""}`.toLowerCase();
+    if (/input|textarea|composer|toolbar|button|copy code/.test(marker)) {
+      return false;
+    }
+    return true;
+  }
+  messageFromNode(node) {
+    const text = this.scrub((node.innerText || "").trim().slice(0, 4e3));
+    if (!text) return null;
+    return {
+      role: this.detectRole(node, text),
+      content: text
+    };
+  }
+  detectRole(node, text) {
+    const marker = [
+      node.dataset.messageAuthorRole,
+      node.dataset.role,
+      node.getAttribute("data-role"),
+      node.getAttribute("aria-label"),
+      typeof node.className === "string" ? node.className : "",
+      node.id,
+      node.closest("[data-message-author-role]")?.getAttribute("data-message-author-role")
+    ].filter(Boolean).join(" ").toLowerCase();
+    if (/assistant|bot|ai|model|gpt|claude|copilot/.test(marker)) return "assistant";
+    if (/user|human|prompt|customer|visitor/.test(marker)) return "user";
+    if (/system/.test(marker)) return "system";
+    if (/tool|function/.test(marker)) return "tool";
+    const alignment = window.getComputedStyle(node).textAlign;
+    if (alignment === "right") return "user";
+    const lower = text.toLowerCase();
+    if (lower.startsWith("you:")) return "user";
+    if (lower.startsWith("assistant:") || lower.startsWith("ai:")) return "assistant";
+    return "unknown";
+  }
+  extractConversationTitle(container) {
+    const heading = container.querySelector('h1, h2, h3, [data-testid*="title" i], [class*="title"]');
+    return this.scrub(heading?.innerText?.trim().slice(0, 160) || document.title || "conversation");
+  }
+  getConversationId(meta, container) {
+    const explicit = [
+      meta?.conversationId,
+      meta?.conversation_id,
+      meta?.threadId,
+      meta?.thread_id,
+      meta?.sessionId,
+      meta?.session_id
+    ].find((value) => typeof value === "string" && value.trim().length > 0);
+    if (explicit) return this.scrub(explicit).slice(0, 120);
+    if (container) {
+      const existing = container.dataset.zcConversationId;
+      if (existing) return existing;
+      const generated = `conv-${location.pathname.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "") || "root"}-${++this.conversationCounter}`;
+      container.dataset.zcConversationId = generated;
+      return generated;
+    }
+    return `conv-${location.pathname.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "") || "root"}-${Date.now()}`;
+  }
+  getMessageFingerprint(conversationId, message, index) {
+    return `${conversationId}:${index}:${message.role}:${message.content.slice(0, 240)}`;
+  }
+  safePathname(url) {
+    try {
+      return new URL(url, window.location.origin).pathname;
+    } catch {
+      return url;
+    }
+  }
+  normalizeRole(value) {
+    if (typeof value !== "string") return "unknown";
+    const normalized = value.toLowerCase();
+    if (normalized.includes("assistant") || normalized.includes("bot") || normalized.includes("ai") || normalized.includes("model")) return "assistant";
+    if (normalized.includes("user") || normalized.includes("human")) return "user";
+    if (normalized.includes("system")) return "system";
+    if (normalized.includes("tool") || normalized.includes("function")) return "tool";
+    return "unknown";
+  }
 };
 
 // src/modules/recording.ts
@@ -687,7 +1304,9 @@ var RecordingModule = class {
 };
 
 // src/index.ts
-var CONFIG_POLL_INTERVAL = 5e3;
+var CONFIG_CACHE_PREFIX = "zerocost-sdk-config:";
+var CONFIG_SYNC_DEBOUNCE_MS = 750;
+var CONFIG_STALE_AFTER_MS = 3e4;
 var ZerocostSDK = class {
   core;
   ads;
@@ -695,8 +1314,11 @@ var ZerocostSDK = class {
   widget;
   data;
   recording;
-  configPollTimer = null;
   lastConfigHash = "";
+  lastDataCollectionHash = "";
+  configSyncInFlight = null;
+  lastConfigSyncAt = 0;
+  cleanupConfigListeners = [];
   constructor(config) {
     this.core = new ZerocostClient(config);
     this.ads = new AdsModule(this.core);
@@ -705,89 +1327,192 @@ var ZerocostSDK = class {
     this.data = new LLMDataModule(this.core);
     this.recording = new RecordingModule(this.core);
   }
-  /**
-   * Initialize the SDK. Automatically:
-   * 1. Fetches display preferences and injects ad slots into the DOM
-   * 2. Starts LLM data collection if enabled
-   * 3. Starts UX session recording if enabled
-   * 4. Polls for config changes every 5s — instant ad format switching
-   *
-   * No custom components needed — ads render automatically.
-   * Enable `debug: true` in config to see detailed logs.
-   */
   async init() {
     this.core.init();
     if (typeof document === "undefined") {
-      this.core.log("Running in non-browser environment \u2014 skipping DOM injection.");
+      this.core.log("Running in non-browser environment; skipping DOM injection.");
       return;
     }
-    const isIframe = window !== window.top;
-    if (isIframe) {
-      this.core.log("Running inside an iframe. Ads will still render if permissions allow.");
+    if (window !== window.top) {
+      this.core.log("Running inside an iframe. Ads render if permissions allow.");
     }
-    this.core.log("Initializing... Ads will be auto-injected into the DOM. No custom component required.");
+    this.core.log("Initializing Zerocost SDK.");
+    const cachedConfig = this.readCachedConfig();
+    if (cachedConfig) {
+      this.lastConfigHash = this.configToHash(cachedConfig);
+      this.syncDataCollection(cachedConfig.dataCollection);
+      await this.widget.autoInjectWithConfig(cachedConfig.display, cachedConfig.widget);
+      this.core.log("Applied cached config immediately.");
+    }
+    this.startConfigSync();
     try {
-      const config = await this.fetchConfig();
-      this.lastConfigHash = this.configToHash(config);
-      this.applyConfig(config);
-      this.core.log("\u2713 SDK fully initialized. Ads are rendering automatically.");
-      this.startConfigPolling();
+      await this.refreshConfig({ force: true, reason: "init" });
+      this.core.log("SDK fully initialized. Ads are rendering automatically.");
     } catch (err) {
-      this.core.log(`Init error: ${err}. Attempting fallback ad injection...`);
-      this.widget.autoInject();
+      this.core.log(`Init error: ${err}. Attempting fallback ad injection.`);
+      await this.widget.autoInject();
+    }
+  }
+  async refreshConfig(options = {}) {
+    const now = Date.now();
+    if (!options.force && now - this.lastConfigSyncAt < CONFIG_SYNC_DEBOUNCE_MS) {
+      return this.configSyncInFlight ?? Promise.resolve();
     }
+    if (this.configSyncInFlight) {
+      return this.configSyncInFlight;
+    }
+    this.configSyncInFlight = (async () => {
+      try {
+        const config = await this.fetchConfig();
+        const nextHash = this.configToHash(config);
+        const hasDisplayChanged = nextHash !== this.lastConfigHash;
+        this.lastConfigHash = nextHash;
+        this.lastConfigSyncAt = Date.now();
+        this.writeCachedConfig(config);
+        if (hasDisplayChanged) {
+          this.core.log(`Config change detected${options.reason ? ` via ${options.reason}` : ""}. Updating ad formats immediately.`);
+          await this.widget.autoInjectWithConfig(config.display, config.widget);
+        }
+        this.syncDataCollection(config.dataCollection);
+      } catch (err) {
+        this.core.log(`Config sync failed${options.reason ? ` during ${options.reason}` : ""}; keeping current placements.`);
+        throw err;
+      } finally {
+        this.configSyncInFlight = null;
+      }
+    })();
+    return this.configSyncInFlight;
   }
   async fetchConfig() {
     return this.core.request("/get-placements");
   }
-  applyConfig(config) {
-    const { display, widget, dataCollection } = config;
-    this.widget.autoInjectWithConfig(display, widget);
+  configToHash(config) {
+    try {
+      return JSON.stringify({ display: config.display, widget: config.widget });
+    } catch {
+      return "";
+    }
+  }
+  dataCollectionToHash(dataCollection) {
+    try {
+      return JSON.stringify(dataCollection || {});
+    } catch {
+      return "";
+    }
+  }
+  syncDataCollection(dataCollection) {
+    const nextHash = this.dataCollectionToHash(dataCollection);
+    if (nextHash === this.lastDataCollectionHash) return;
+    this.data.stop();
+    this.recording.stop();
     if (dataCollection?.llm) {
       this.data.start(dataCollection.llm);
     }
     if (dataCollection?.recording) {
       this.recording.start(dataCollection.recording);
     }
+    this.lastDataCollectionHash = nextHash;
   }
-  configToHash(config) {
+  getConfigCacheKey() {
+    return `${CONFIG_CACHE_PREFIX}${this.core.getConfig().appId}`;
+  }
+  readCachedConfig() {
+    if (typeof window === "undefined") return null;
     try {
-      return JSON.stringify({ d: config.display, w: config.widget });
+      const raw = window.localStorage.getItem(this.getConfigCacheKey());
+      return raw ? JSON.parse(raw) : null;
     } catch {
-      return "";
+      return null;
     }
   }
-  startConfigPolling() {
-    if (this.configPollTimer) return;
-    this.configPollTimer = setInterval(async () => {
-      try {
-        const config = await this.fetchConfig();
-        const hash = this.configToHash(config);
-        if (this.lastConfigHash && hash !== this.lastConfigHash) {
-          this.core.log("\u26A1 Config change detected \u2014 switching ad format instantly.");
-          this.widget.unmountAll();
-          this.applyConfig(config);
-        }
-        this.lastConfigHash = hash;
-      } catch {
+  writeCachedConfig(config) {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(this.getConfigCacheKey(), JSON.stringify(config));
+    } catch {
+      this.core.log("Failed to persist cached config.");
+    }
+  }
+  startConfigSync() {
+    if (typeof window === "undefined") return;
+    const syncIfVisible = () => {
+      if (document.visibilityState === "visible") {
+        this.refreshConfig({ reason: "visibility" }).catch(() => {
+        });
       }
-    }, CONFIG_POLL_INTERVAL);
+    };
+    const syncIfStale = (reason) => {
+      if (Date.now() - this.lastConfigSyncAt >= CONFIG_STALE_AFTER_MS) {
+        this.refreshConfig({ reason }).catch(() => {
+        });
+      }
+    };
+    const onVisibilityChange = () => syncIfVisible();
+    const onFocus = () => syncIfStale("focus");
+    const onPageShow = () => syncIfStale("pageshow");
+    const onOnline = () => this.refreshConfig({ force: true, reason: "online" }).catch(() => {
+    });
+    const onNavigation = () => syncIfStale("navigation");
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("pageshow", onPageShow);
+    window.addEventListener("online", onOnline);
+    window.addEventListener("popstate", onNavigation);
+    window.addEventListener("hashchange", onNavigation);
+    window.addEventListener("zerocost:navigation", onNavigation);
+    const restoreHistoryPatch = this.patchHistory(onNavigation);
+    this.cleanupConfigListeners.push(
+      () => document.removeEventListener("visibilitychange", onVisibilityChange),
+      () => window.removeEventListener("focus", onFocus),
+      () => window.removeEventListener("pageshow", onPageShow),
+      () => window.removeEventListener("online", onOnline),
+      () => window.removeEventListener("popstate", onNavigation),
+      () => window.removeEventListener("hashchange", onNavigation),
+      () => window.removeEventListener("zerocost:navigation", onNavigation),
+      restoreHistoryPatch
+    );
   }
-  /**
-   * Tear down all modules.
-   */
-  destroy() {
-    if (this.configPollTimer) {
-      clearInterval(this.configPollTimer);
-      this.configPollTimer = null;
+  patchHistory(onNavigation) {
+    if (typeof window === "undefined") return () => {
+    };
+    const historyRef = window.history;
+    if (historyRef.__zerocostPatched) {
+      return () => {
+      };
     }
+    const originalPushState = historyRef.pushState.bind(window.history);
+    const originalReplaceState = historyRef.replaceState.bind(window.history);
+    historyRef.__zerocostPatched = true;
+    historyRef.__zerocostPushState = originalPushState;
+    historyRef.__zerocostReplaceState = originalReplaceState;
+    historyRef.pushState = ((...args) => {
+      const result = originalPushState(...args);
+      window.dispatchEvent(new Event("zerocost:navigation"));
+      onNavigation();
+      return result;
+    });
+    historyRef.replaceState = ((...args) => {
+      const result = originalReplaceState(...args);
+      window.dispatchEvent(new Event("zerocost:navigation"));
+      onNavigation();
+      return result;
+    });
+    return () => {
+      if (!historyRef.__zerocostPatched) return;
+      historyRef.pushState = historyRef.__zerocostPushState || historyRef.pushState;
+      historyRef.replaceState = historyRef.__zerocostReplaceState || historyRef.replaceState;
+      delete historyRef.__zerocostPatched;
+      delete historyRef.__zerocostPushState;
+      delete historyRef.__zerocostReplaceState;
+    };
+  }
+  destroy() {
+    this.cleanupConfigListeners.forEach((cleanup) => cleanup());
+    this.cleanupConfigListeners = [];
     this.widget.unmountAll();
     this.data.stop();
     this.recording.stop();
   }
-  /**
-   * Validate the configured API key against the server.
-   */
   async validateKey() {
     try {
       const result = await this.core.request("/validate-key");