@copilotkit/web-inspector 1.57.1 → 1.57.3

package/dist/index.cjs

@@ -4,6 +4,7 @@ const require_inspector_logo = require('./assets/inspector-logo.cjs');
 const require_inspector_logo_icon = require('./assets/inspector-logo-icon.cjs');
 const require_context_helpers = require('./lib/context-helpers.cjs');
 const require_persistence = require('./lib/persistence.cjs');
+const require_telemetry = require('./lib/telemetry.cjs');
 let lit = require("lit");
 let marked = require("marked");
 let lit_directives_style_map_js = require("lit/directives/style-map.js");
@@ -1870,11 +1871,15 @@ var WebInspectorElement = class extends lit.LitElement {
 		this.announcementHtml = null;
 		this.announcementTimestamp = null;
 		this.announcementPreviewText = null;
+		this.announcementCtaLabel = null;
 		this.hasUnseenAnnouncement = false;
 		this.announcementLoaded = false;
 		this.announcementPromise = null;
 		this.showAnnouncementPreview = true;
 		this.announcementExpanded = false;
+		this.viewedBannerTimestamps = /* @__PURE__ */ new Set();
+		this.pendingBannerViewed = null;
+		this.clickedBannerIds = /* @__PURE__ */ new Set();
 		this.contextState = {
 			button: {
 				position: {
@@ -2122,12 +2127,16 @@ var WebInspectorElement = class extends lit.LitElement {
 			}
 		};
 		this.handleDismissAnnouncement = () => {
+			this.trackBannerClickedOnce({ cta: "dismiss" });
 			this.markAnnouncementSeen();
 		};
 		this.copyResetTimeouts = /* @__PURE__ */ new WeakMap();
 		this.handleAnnouncementContentClick = (event) => {
 			const button = (event.target instanceof HTMLElement ? event.target : null)?.closest(".announcement-code__copy");
-			if (!(button instanceof HTMLButtonElement)) return;
+			if (!(button instanceof HTMLButtonElement)) {
+				this.trackBannerClickedOnce({ cta: "body" });
+				return;
+			}
 			event.preventDefault();
 			event.stopPropagation();
 			const encoded = button.getAttribute("data-copy") ?? "";
@@ -2277,8 +2286,14 @@ var WebInspectorElement = class extends lit.LitElement {
 		this.coreSubscriber = {
 			onRuntimeConnectionStatusChanged: ({ status }) => {
 				this.runtimeStatus = status;
-				if (status === "connected") for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
-				else {
+				if (status === "connected") {
+					if (!core.telemetryDisabled) {
+						require_telemetry.ensureTelemetryDistinctId();
+						require_telemetry.maybeShowDisclosure();
+					}
+					this.flushPendingBannerViewed();
+					for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
+				} else {
 					this._threadsByAgent.clear();
 					this._threads = [];
 				}
@@ -3267,6 +3282,11 @@ ${argsString}</pre
         color: #010507;
         font-weight: 600;
       }
+      .cpk-tab-icon {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+      }
       .cpk-tab-active .cpk-tab-icon {
         color: #757cf2;
       }
@@ -3639,6 +3659,15 @@ ${argsString}</pre
                 <div class="min-w-[160px] max-w-xs">${agentSelector}</div>
                 <div class="flex items-center gap-1">
                   ${this.renderDockControls()}
+                  <button
+                    class="flex h-8 w-8 items-center justify-center rounded-md transition hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 ${this.selectedMenu === "settings" ? "bg-gray-100 text-gray-700" : "text-gray-400 hover:text-gray-600"}"
+                    type="button"
+                    aria-label="Settings"
+                    aria-pressed=${this.selectedMenu === "settings"}
+                    @click=${() => this.handleMenuSelect(this.selectedMenu === "settings" ? "ag-ui-events" : "settings")}
+                  >
+                    ${this.renderIcon("Settings")}
+                  </button>
                   <button
                     class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
                     type="button"
@@ -4195,8 +4224,52 @@ ${argsString}</pre
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "agent-context") return this.renderContextView();
 		if (this.selectedMenu === "threads") return this.renderThreadsView();
+		if (this.selectedMenu === "settings") return this.renderSettingsPanel();
 		return lit.nothing;
 	}
+	renderSettingsPanel() {
+		const optedOut = this.core?.telemetryDisabled ?? false;
+		return lit.html`
+      <div class="flex h-full flex-col overflow-hidden">
+        <div class="overflow-auto p-4">
+          <div class="space-y-3">
+            <h2 class="text-sm font-semibold text-slate-900">Settings</h2>
+
+            <div class="space-y-2">
+              <h3 class="text-sm text-slate-500">Privacy</h3>
+              <div class="rounded-lg border border-slate-200 bg-white p-4 space-y-3">
+                <p class="text-sm text-gray-600 flex items-start gap-2">
+                  <span>${optedOut ? "❌" : "✅"}</span>
+                  <span>
+                    ${optedOut ? "You have disabled anonymous interaction data collection." : "CopilotKit is currently collecting anonymous interaction data from the inspector so we know which features people use. We never collect message content, agent state, prompts, or completions."}
+                  </span>
+                </p>
+                <a
+                  class="inline-flex items-center gap-1 text-sm text-slate-700 underline hover:text-slate-900"
+                  href=${require_telemetry.TELEMETRY_DOCS_URL}
+                  target="_blank"
+                  rel="noopener"
+                >Learn more →</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	trackBannerClickedOnce(opts) {
+		if (this.core?.telemetryDisabled) return;
+		const id = this.announcementTimestamp;
+		if (!id) return;
+		const key = `${id}:${opts.cta}`;
+		if (this.clickedBannerIds.has(key)) return;
+		this.clickedBannerIds.add(key);
+		require_telemetry.trackBannerClicked({
+			banner_id: id,
+			cta: opts.cta,
+			cta_label: this.announcementCtaLabel ?? void 0
+		});
+	}
 	renderThreadsView() {
 		const displayThreads = this.selectedContext === "all-agents" ? this._threads : this._threadsByAgent.get(this.selectedContext) ?? [];
 		let threadsErrorMessage = null;
@@ -4768,7 +4841,7 @@ ${prettyEvent}</pre
     `;
 	}
 	handleMenuSelect(key) {
-		if (!this.menuItems.some((item) => item.key === key)) return;
+		if (key !== "settings" && !this.menuItems.some((item) => item.key === key)) return;
 		const previousMenu = this.selectedMenu;
 		this.selectedMenu = key;
 		if (key === "agents" && this.selectedContext === "all-agents") {
@@ -4787,7 +4860,10 @@ ${prettyEvent}</pre
 		if (previousMenu === "agents" && key !== "agents") {
 			if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
 		}
-		if (key === "threads") this.autoSelectLatestThread();
+		if (key === "threads") {
+			if (this.selectedMenu !== "threads" && !this.core?.telemetryDisabled) require_telemetry.trackThreadsTabClicked();
+			this.autoSelectLatestThread();
+		}
 		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
 			const scroller = this.shadowRoot?.getElementById("cpk-main-scroll");
 			if (scroller) scroller.scrollTop = 0;
@@ -5326,6 +5402,15 @@ ${prettyEvent}</pre
       </button>
     </div>`;
 	}
+	flushPendingBannerViewed() {
+		if (!this.pendingBannerViewed || this.core?.telemetryDisabled) {
+			this.pendingBannerViewed = null;
+			return;
+		}
+		if (this.runtimeStatus !== "connected") return;
+		require_telemetry.trackBannerViewed(this.pendingBannerViewed);
+		this.pendingBannerViewed = null;
+	}
 	ensureAnnouncementLoading() {
 		if (this.announcementPromise || typeof window === "undefined" || typeof fetch === "undefined") return;
 		this.announcementPromise = this.fetchAnnouncement();
@@ -5354,14 +5439,24 @@ ${prettyEvent}</pre
 			const timestamp = typeof data?.timestamp === "string" ? data.timestamp : null;
 			const previewText = typeof data?.previewText === "string" ? data.previewText : null;
 			const markdown = typeof data?.announcement === "string" ? data.announcement : null;
+			const ctaLabel = typeof data?.cta_label === "string" ? data.cta_label : null;
 			if (!timestamp || !markdown) throw new Error("Malformed announcement payload");
 			const storedTimestamp = this.loadStoredAnnouncementTimestamp();
 			this.announcementTimestamp = timestamp;
 			this.announcementPreviewText = previewText ?? "";
+			this.announcementCtaLabel = ctaLabel;
 			this.hasUnseenAnnouncement = (!storedTimestamp || storedTimestamp !== timestamp) && !!this.announcementPreviewText;
 			this.showAnnouncementPreview = this.hasUnseenAnnouncement;
 			this.announcementHtml = await this.convertMarkdownToHtml(markdown);
 			this.announcementLoaded = true;
+			if (this.hasUnseenAnnouncement && !this.viewedBannerTimestamps.has(timestamp)) {
+				this.viewedBannerTimestamps.add(timestamp);
+				this.pendingBannerViewed = {
+					banner_id: timestamp,
+					cta_label: ctaLabel ?? void 0
+				};
+				this.flushPendingBannerViewed();
+			}
 			this.requestUpdate();
 		} catch (error) {
 			console.warn("[CopilotKit Inspector] Failed to load announcement", error);
@@ -5401,6 +5496,10 @@ ${prettyEvent}</pre
 		try {
 			const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
 			if (!url.searchParams.has("ref")) url.searchParams.append("ref", "cpk-inspector");
+			if (!url.searchParams.has("posthog_distinct_id") && !this.core?.telemetryDisabled) {
+				const distinctId = require_telemetry.getTelemetryDistinctIdForUrl();
+				if (distinctId) url.searchParams.append("posthog_distinct_id", distinctId);
+			}
 			return url.toString();
 		} catch {
 			return href;