@copilotkit/web-inspector 1.61.1 → 1.62.0

package/dist/index.umd.js

@@ -189,17 +189,45 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		});
 	}
 
+//#endregion
+//#region package.json
+	var version = "1.62.0";
+
 //#endregion
 //#region src/lib/telemetry.ts
 	const TELEMETRY_EVENTS = {
 		bannerViewed: "oss.inspector.banner_viewed",
 		bannerClicked: "oss.inspector.banner_clicked",
-		threadsTabClicked: "oss.inspector.threads_tab_clicked"
+		threadsTabClicked: "oss.inspector.threads_tab_clicked",
+		threadsLockedViewed: "oss.inspector.threads_locked_viewed",
+		threadsIntelligenceSignupClicked: "oss.inspector.threads_intelligence_signup_clicked",
+		threadsTalkToEngineerClicked: "oss.inspector.threads_talk_to_engineer_clicked",
+		talkToEngineerClicked: "oss.inspector.talk_to_engineer_clicked",
+		threadsEmptyEnabledViewed: "oss.inspector.threads_empty_enabled_viewed",
+		threadsEnabledViewed: "oss.inspector.threads_enabled_viewed"
 	};
 	const TELEMETRY_INGEST_URL = "https://telemetry.copilotkit.ai/ingest";
 	const TELEMETRY_DOCS_URL = "https://docs.copilotkit.ai/telemetry";
 	const PACKAGE_NAME = "@copilotkit/web-inspector";
+	const PACKAGE_VERSION = version;
 	const FETCH_TIMEOUT_MS = 3e3;
+	function isThreadsTelemetryEvent(event) {
+		return event === TELEMETRY_EVENTS.threadsTabClicked || event === TELEMETRY_EVENTS.threadsLockedViewed || event === TELEMETRY_EVENTS.threadsIntelligenceSignupClicked || event === TELEMETRY_EVENTS.threadsTalkToEngineerClicked || event === TELEMETRY_EVENTS.talkToEngineerClicked || event === TELEMETRY_EVENTS.threadsEmptyEnabledViewed || event === TELEMETRY_EVENTS.threadsEnabledViewed;
+	}
+	function getRuntimeUrlType(runtimeUrl) {
+		if (!runtimeUrl) return "missing";
+		if (runtimeUrl.startsWith("/") && !runtimeUrl.startsWith("//")) return "relative";
+		try {
+			const baseHref = typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai";
+			const url = new URL(runtimeUrl, baseHref);
+			const baseUrl = new URL(baseHref);
+			const hostname = url.hostname.toLowerCase();
+			if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]") return "localhost";
+			return url.origin === baseUrl.origin ? "same_origin" : "remote";
+		} catch (_unused) {
+			return "invalid";
+		}
+	}
 	/**
 	* Fire-and-forget telemetry send. Returns synchronously; the network
 	* call is dispatched in the background and any failure is swallowed.
@@ -209,16 +237,32 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	* inspector's mount lifecycle instead.
 	*/
 	function track(event, properties = {}) {
+		if (isTelemetryOptedOut()) return;
 		const distinctId = getOrCreateTelemetryDistinctId();
-		postBestEffort(TELEMETRY_INGEST_URL, JSON.stringify({
-			event,
-			properties: {
-				...properties,
-				distinct_id: distinctId
-			},
-			package: { name: PACKAGE_NAME },
-			ts: Math.floor(Date.now() / 1e3)
-		}), distinctId);
+		const threadsProperties = isThreadsTelemetryEvent(event) ? {
+			package_name: PACKAGE_NAME,
+			package_version: PACKAGE_VERSION,
+			inspector_distinct_id: distinctId
+		} : {};
+		let body;
+		try {
+			body = JSON.stringify({
+				event,
+				properties: {
+					...properties,
+					...threadsProperties,
+					distinct_id: distinctId
+				},
+				package: {
+					name: PACKAGE_NAME,
+					...isThreadsTelemetryEvent(event) ? { version: PACKAGE_VERSION } : {}
+				},
+				ts: Math.floor(Date.now() / 1e3)
+			});
+		} catch (_unused2) {
+			return;
+		}
+		postBestEffort(TELEMETRY_INGEST_URL, body, distinctId);
 	}
 	function trackBannerViewed(props) {
 		track(TELEMETRY_EVENTS.bannerViewed, props);
@@ -226,8 +270,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	function trackBannerClicked(props) {
 		track(TELEMETRY_EVENTS.bannerClicked, props);
 	}
-	function trackThreadsTabClicked() {
-		track(TELEMETRY_EVENTS.threadsTabClicked);
+	function trackThreadsTabClicked(props = {}) {
+		track(TELEMETRY_EVENTS.threadsTabClicked, props);
+	}
+	function trackThreadsLockedViewed(props) {
+		track(TELEMETRY_EVENTS.threadsLockedViewed, props);
+	}
+	function trackThreadsIntelligenceSignupClicked(props) {
+		track(TELEMETRY_EVENTS.threadsIntelligenceSignupClicked, props);
+	}
+	function trackThreadsTalkToEngineerClicked(props) {
+		track(TELEMETRY_EVENTS.threadsTalkToEngineerClicked, props);
+	}
+	function trackTalkToEngineerClicked(props) {
+		track(TELEMETRY_EVENTS.talkToEngineerClicked, props);
+	}
+	function trackThreadsEmptyEnabledViewed(props) {
+		track(TELEMETRY_EVENTS.threadsEmptyEnabledViewed, props);
+	}
+	function trackThreadsEnabledViewed(props) {
+		track(TELEMETRY_EVENTS.threadsEnabledViewed, props);
 	}
 	/**
 	* Returns the inspector's anonymous distinct-ID for cross-domain
@@ -286,7 +348,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				body,
 				signal: controller.signal
 			});
-		} catch (_unused) {} finally {
+		} catch (_unused3) {} finally {
 			clearTimeout(timeoutId);
 		}
 	}
@@ -294,6 +356,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#endregion
 //#region src/index.ts
 	const WEB_INSPECTOR_TAG = "cpk-web-inspector";
+	const THREAD_INSPECTOR_TAG = "cpk-thread-inspector";
 	const EDGE_MARGIN = 16;
 	const DRAG_THRESHOLD = 6;
 	const MIN_WINDOW_WIDTH = 600;
@@ -313,6 +376,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const DOCKED_LEFT_WIDTH = 500;
 	const MAX_AGENT_EVENTS = 200;
 	const MAX_TOTAL_EVENTS = 500;
+	const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
+	const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
 	const AGENT_EVENT_TYPES = [
 		"RUN_STARTED",
 		"RUN_FINISHED",
@@ -388,14 +453,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			bg: "rgba(190,194,255,0.102)",
 			fg: "#5558B2"
 		};
+		if (type === "RUN_ERROR" || type === "ERROR") return {
+			bg: "rgba(250,95,103,0.13)",
+			fg: "#c0333a"
+		};
 		if (type.startsWith("RUN_") || type.startsWith("STEP_")) return {
 			bg: "rgba(255,172,77,0.2)",
 			fg: "#996300"
 		};
-		if (type === "ERROR") return {
-			bg: "rgba(250,95,103,0.13)",
-			fg: "#c0333a"
-		};
 		return {
 			bg: "#F7F7F9",
 			fg: "#838389"
@@ -491,28 +556,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
           ${filtered.length === 0 ? lit.html`
                 <div class="cpk-tl__empty">
                   ${this.errorMessage ? lit.html`
-                          <svg
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class="cpk-tl__empty-icon"
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class="cpk-tl__empty-icon"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <line x1="12" y1="8" x2="12" y2="12" />
+                          <line x1="12" y1="16" x2="12.01" y2="16" />
+                        </svg>
+                        <div>
+                          Failed to load threads
+                          <div
+                            style="font-size:11px;margin-top:4px;color:#c0333a;"
                           >
-                            <circle cx="12" cy="12" r="10" />
-                            <line x1="12" y1="8" x2="12" y2="12" />
-                            <line x1="12" y1="16" x2="12.01" y2="16" />
-                          </svg>
-                          <div>
-                            Failed to load threads
-                            <div style="font-size:11px;margin-top:4px;color:#c0333a;">
-                              ${this.errorMessage}
-                            </div>
+                            ${this.errorMessage}
                           </div>
-                        ` : this.threads.length === 0 ? lit.html`
+                        </div>
+                      ` : this.threads.length === 0 ? lit.html`
                             <svg
                               width="24"
                               height="24"
@@ -680,10 +747,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
       color: #c0c0c8;
     }
   `;
-	var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
+	var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 		constructor(..._args2) {
 			super(..._args2);
 			this.threadId = null;
+			this.provider = null;
 			this.thread = null;
 			this.runtimeUrl = "";
 			this.headers = {};
@@ -691,7 +759,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this.agentStateInput = null;
 			this.agentEventsInput = [];
 			this.liveMessageVersion = 0;
-			this._tab = "conversation";
+			this._tab = "timeline";
+			this._fetchedMetadata = null;
 			this._conversation = [];
 			this._fetchedEvents = null;
 			this._fetchedState = null;
@@ -708,12 +777,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._eventsNotAvailable = false;
 			this._stateNotAvailable = false;
 			this._panelInitializing = false;
-			this._activatedTabs = new Set(["conversation"]);
+			this._activatedTabs = new Set(["timeline"]);
 			this._panelTplCache = /* @__PURE__ */ new Map();
+			this._timelineItemsCache = null;
+			this._liveEventsWithSourceIndexCache = null;
 			this._eventsFetched = false;
 			this._stateFetched = false;
-			this._lastFetchedThreadId = null;
+			this._lastLoadKey = null;
 			this._lastSeenLiveMessageVersion = 0;
+			this._metadataAbort = null;
 			this._messagesAbort = null;
 			this._eventsAbort = null;
 			this._stateAbort = null;
@@ -741,9 +813,33 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				this._dividerResizing = false;
 			};
 		}
+		static providerLoadKey(provider) {
+			if (!provider) return "provider:none";
+			let id = CpkThreadInspector.providerIds.get(provider);
+			if (!id) {
+				id = CpkThreadInspector.nextProviderId;
+				CpkThreadInspector.nextProviderId += 1;
+				CpkThreadInspector.providerIds.set(provider, id);
+			}
+			return [
+				`provider:${id}`,
+				provider.getThreadMetadata ? "metadata:1" : "metadata:0",
+				provider.getMessages ? "messages:1" : "messages:0",
+				provider.getEvents ? "events:1" : "events:0",
+				provider.getState ? "state:1" : "state:0"
+			].join("|");
+		}
+		/**
+		* Build a deterministic signature for runtime fetch headers so auth/CSRF
+		* changes invalidate cached thread data even when the selected thread is
+		* otherwise unchanged.
+		*/
+		static headersLoadKey(headers) {
+			return JSON.stringify(Object.entries(headers).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)));
+		}
 		renderTabContent(id) {
-			if (id === "conversation") return this.renderConversation();
-			if (id === "agent-state") return this.renderState();
+			if (id === "timeline") return this.renderTimeline();
+			if (id === "state") return this.renderState();
 			return this.renderEvents();
 		}
 		activateTab(id) {
@@ -761,44 +857,108 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		maybeFetchTabData(id) {
 			if (!this.threadId) return;
-			if (id === "ag-ui-events" && !this._eventsFetched) {
+			if ((id === "timeline" || id === "raw-events") && !this._eventsFetched) {
 				this._eventsFetched = true;
 				this.fetchEvents(this.threadId);
-			} else if (id === "agent-state" && !this._stateFetched) {
+			} else if (id === "state" && !this._stateFetched) {
 				this._stateFetched = true;
 				this.fetchState(this.threadId);
 			}
 		}
 		updated(_changed) {
-			if (this.threadId !== this._lastFetchedThreadId) {
-				var _this$_messagesAbort, _this$_eventsAbort, _this$_stateAbort;
-				this._lastFetchedThreadId = this.threadId;
+			const loadKey = this.currentLoadKey();
+			if (loadKey !== this._lastLoadKey) {
+				this._lastLoadKey = loadKey;
 				this._lastSeenLiveMessageVersion = this.liveMessageVersion;
-				this._tab = "conversation";
-				this._activatedTabs = new Set(["conversation"]);
-				this._panelTplCache = /* @__PURE__ */ new Map();
-				this._expandedTools = /* @__PURE__ */ new Set();
-				this._expandedMessages = /* @__PURE__ */ new Set();
-				(_this$_messagesAbort = this._messagesAbort) === null || _this$_messagesAbort === void 0 || _this$_messagesAbort.abort();
-				this._messagesAbort = null;
-				(_this$_eventsAbort = this._eventsAbort) === null || _this$_eventsAbort === void 0 || _this$_eventsAbort.abort();
-				this._eventsAbort = null;
-				(_this$_stateAbort = this._stateAbort) === null || _this$_stateAbort === void 0 || _this$_stateAbort.abort();
-				this._stateAbort = null;
-				this._eventsFetched = false;
-				this._stateFetched = false;
-				this._fetchedEvents = null;
-				this._fetchedState = null;
-				if (this.threadId) this.fetchMessages(this.threadId);
-				else this._conversation = [];
+				this.resetLoadedThreadData();
+				if (this.threadId) {
+					this.fetchMetadata(this.threadId);
+					if (this.canFetchEvents()) {
+						this._eventsFetched = true;
+						this.fetchEvents(this.threadId);
+					} else this.fetchMessages(this.threadId);
+				} else {
+					this._fetchedMetadata = null;
+					this._conversation = [];
+				}
 			} else if (this.threadId && this.liveMessageVersion !== this._lastSeenLiveMessageVersion) {
-				var _this$_messagesAbort2;
+				var _this$_messagesAbort;
 				this._lastSeenLiveMessageVersion = this.liveMessageVersion;
-				(_this$_messagesAbort2 = this._messagesAbort) === null || _this$_messagesAbort2 === void 0 || _this$_messagesAbort2.abort();
+				(_this$_messagesAbort = this._messagesAbort) === null || _this$_messagesAbort === void 0 || _this$_messagesAbort.abort();
 				this._messagesAbort = null;
 				this.fetchMessages(this.threadId, true);
 			}
 		}
+		canFetchMessages() {
+			var _this$provider;
+			return !!((_this$provider = this.provider) === null || _this$provider === void 0 ? void 0 : _this$provider.getMessages) || !!this.runtimeUrl && this.threadInspectionAvailable;
+		}
+		canFetchEvents() {
+			var _this$provider2;
+			return !!((_this$provider2 = this.provider) === null || _this$provider2 === void 0 ? void 0 : _this$provider2.getEvents) || !!this.runtimeUrl && this.threadInspectionAvailable;
+		}
+		canFetchState() {
+			var _this$provider3;
+			return !!((_this$provider3 = this.provider) === null || _this$provider3 === void 0 ? void 0 : _this$provider3.getState) || !!this.runtimeUrl && this.threadInspectionAvailable;
+		}
+		currentLoadKey() {
+			var _this$threadId;
+			return [
+				(_this$threadId = this.threadId) !== null && _this$threadId !== void 0 ? _this$threadId : "thread:none",
+				CpkThreadInspector.providerLoadKey(this.provider),
+				`runtime:${this.runtimeUrl}`,
+				`headers:${CpkThreadInspector.headersLoadKey(this.headers)}`,
+				`inspect:${this.threadInspectionAvailable ? "1" : "0"}`
+			].join("||");
+		}
+		resetLoadedThreadData() {
+			var _this$_metadataAbort, _this$_messagesAbort2, _this$_eventsAbort, _this$_stateAbort;
+			this._tab = "timeline";
+			this._activatedTabs = new Set(["timeline"]);
+			this._panelTplCache = /* @__PURE__ */ new Map();
+			this._timelineItemsCache = null;
+			this._liveEventsWithSourceIndexCache = null;
+			this._expandedTools = /* @__PURE__ */ new Set();
+			this._expandedMessages = /* @__PURE__ */ new Set();
+			(_this$_metadataAbort = this._metadataAbort) === null || _this$_metadataAbort === void 0 || _this$_metadataAbort.abort();
+			this._metadataAbort = null;
+			(_this$_messagesAbort2 = this._messagesAbort) === null || _this$_messagesAbort2 === void 0 || _this$_messagesAbort2.abort();
+			this._messagesAbort = null;
+			(_this$_eventsAbort = this._eventsAbort) === null || _this$_eventsAbort === void 0 || _this$_eventsAbort.abort();
+			this._eventsAbort = null;
+			(_this$_stateAbort = this._stateAbort) === null || _this$_stateAbort === void 0 || _this$_stateAbort.abort();
+			this._stateAbort = null;
+			this._eventsFetched = false;
+			this._stateFetched = false;
+			this._eventsNotAvailable = false;
+			this._stateNotAvailable = false;
+			this._loadingMessages = false;
+			this._loadingEvents = false;
+			this._loadingState = false;
+			this._messagesError = null;
+			this._eventsError = null;
+			this._stateError = null;
+			this._fetchedMetadata = null;
+			this._conversation = [];
+			this._fetchedEvents = null;
+			this._fetchedState = null;
+		}
+		async fetchMetadata(threadId) {
+			var _this$provider4, _this$_metadataAbort2;
+			if (!((_this$provider4 = this.provider) === null || _this$provider4 === void 0 ? void 0 : _this$provider4.getThreadMetadata)) return;
+			(_this$_metadataAbort2 = this._metadataAbort) === null || _this$_metadataAbort2 === void 0 || _this$_metadataAbort2.abort();
+			const controller = new AbortController();
+			this._metadataAbort = controller;
+			try {
+				const metadata = await this.provider.getThreadMetadata(threadId, { signal: controller.signal });
+				if (controller.signal.aborted || this.threadId !== threadId) return;
+				this._fetchedMetadata = metadata;
+			} catch (err) {
+				if (err instanceof Error && err.name === "AbortError") return;
+				if (this.threadId !== threadId) return;
+				this._fetchedMetadata = null;
+			}
+		}
 		/**
 		* Fetch the canonical conversation for `threadId` from the runtime.
 		*
@@ -810,10 +970,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		* so users see an explicit loading indicator on first load.
 		*/
 		async fetchMessages(threadId, silent = false) {
-			if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+			var _this$_messagesAbort3;
+			if (!this.canFetchMessages()) {
 				if (!silent) this._conversation = [];
 				return;
 			}
+			(_this$_messagesAbort3 = this._messagesAbort) === null || _this$_messagesAbort3 === void 0 || _this$_messagesAbort3.abort();
 			const controller = new AbortController();
 			this._messagesAbort = controller;
 			if (!silent) {
@@ -821,15 +983,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				this._messagesError = null;
 			}
 			try {
-				const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/messages`, {
-					headers: { ...this.headers },
-					signal: controller.signal
-				});
-				if (controller.signal.aborted || this.threadId !== threadId) return;
-				if (!res.ok) throw new Error(`HTTP ${res.status}`);
-				const data = await res.json();
+				var _this$provider5;
+				const messages = ((_this$provider5 = this.provider) === null || _this$provider5 === void 0 ? void 0 : _this$provider5.getMessages) ? await this.provider.getMessages(threadId, { signal: controller.signal }) : await this.fetchRuntimeMessages(threadId, controller.signal);
 				if (controller.signal.aborted || this.threadId !== threadId) return;
-				this._conversation = this.mapMessages(data.messages);
+				this._conversation = this.mapMessages(messages);
 			} catch (err) {
 				if (err instanceof Error && err.name === "AbortError") return;
 				if (!silent) {
@@ -841,65 +998,66 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			}
 		}
 		async fetchEvents(threadId) {
-			this._eventsNotAvailable = false;
-			if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+			var _this$_eventsAbort2;
+			if (!this.canFetchEvents()) {
 				this._fetchedEvents = null;
 				return;
 			}
+			(_this$_eventsAbort2 = this._eventsAbort) === null || _this$_eventsAbort2 === void 0 || _this$_eventsAbort2.abort();
 			const controller = new AbortController();
 			this._eventsAbort = controller;
 			this._loadingEvents = true;
 			this._eventsError = null;
 			try {
-				const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/events`, {
-					headers: { ...this.headers },
-					signal: controller.signal
-				});
+				var _this$provider6;
+				const result = ((_this$provider6 = this.provider) === null || _this$provider6 === void 0 ? void 0 : _this$provider6.getEvents) ? {
+					status: "available",
+					events: await this.provider.getEvents(threadId, { signal: controller.signal })
+				} : await this.fetchRuntimeEvents(threadId, controller.signal);
 				if (controller.signal.aborted || this.threadId !== threadId) return;
-				if (res.status === 501) {
+				if (result.status === "not-available") {
 					this._eventsNotAvailable = true;
-					this._fetchedEvents = null;
+					this._fetchedEvents = [];
+					if (this.canFetchMessages()) this.fetchMessages(threadId);
 					return;
 				}
-				if (!res.ok) throw new Error(`HTTP ${res.status}`);
-				const data = await res.json();
-				if (controller.signal.aborted || this.threadId !== threadId) return;
-				this._fetchedEvents = this.mapApiEvents(data.events);
+				const mappedEvents = this.mapApiEvents(result.events);
+				this._fetchedEvents = mappedEvents;
+				if (mappedEvents.length === 0 && this.canFetchMessages()) this.fetchMessages(threadId);
 			} catch (err) {
 				if (err instanceof Error && err.name === "AbortError") return;
 				if (this.threadId !== threadId) return;
 				this._eventsError = err instanceof Error ? err.message : "Failed to load events";
 				this._fetchedEvents = [];
+				if (this.canFetchMessages()) this.fetchMessages(threadId);
 			} finally {
 				if (!controller.signal.aborted && this.threadId === threadId) this._loadingEvents = false;
 			}
 		}
 		async fetchState(threadId) {
-			this._stateNotAvailable = false;
-			if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+			var _this$_stateAbort2;
+			if (!this.canFetchState()) {
 				this._fetchedState = null;
 				return;
 			}
+			(_this$_stateAbort2 = this._stateAbort) === null || _this$_stateAbort2 === void 0 || _this$_stateAbort2.abort();
 			const controller = new AbortController();
 			this._stateAbort = controller;
 			this._loadingState = true;
 			this._stateError = null;
 			try {
-				var _data$state;
-				const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/state`, {
-					headers: { ...this.headers },
-					signal: controller.signal
-				});
+				var _this$provider7, _result$state;
+				const result = ((_this$provider7 = this.provider) === null || _this$provider7 === void 0 ? void 0 : _this$provider7.getState) ? {
+					status: "available",
+					state: await this.provider.getState(threadId, { signal: controller.signal })
+				} : await this.fetchRuntimeState(threadId, controller.signal);
 				if (controller.signal.aborted || this.threadId !== threadId) return;
-				if (res.status === 501) {
+				if (result.status === "not-available") {
 					this._stateNotAvailable = true;
 					this._fetchedState = null;
 					return;
 				}
-				if (!res.ok) throw new Error(`HTTP ${res.status}`);
-				const data = await res.json();
-				if (controller.signal.aborted || this.threadId !== threadId) return;
-				this._fetchedState = (_data$state = data.state) !== null && _data$state !== void 0 ? _data$state : null;
+				this._fetchedState = (_result$state = result.state) !== null && _result$state !== void 0 ? _result$state : null;
 			} catch (err) {
 				if (err instanceof Error && err.name === "AbortError") return;
 				if (this.threadId !== threadId) return;
@@ -909,6 +1067,42 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				if (!controller.signal.aborted && this.threadId === threadId) this._loadingState = false;
 			}
 		}
+		async fetchRuntimeMessages(threadId, signal) {
+			const res = await fetch(this.getThreadInspectionUrl(threadId, "messages"), {
+				headers: { ...this.headers },
+				signal
+			});
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			return (await res.json()).messages;
+		}
+		async fetchRuntimeEvents(threadId, signal) {
+			const res = await fetch(this.getThreadInspectionUrl(threadId, "events"), {
+				headers: { ...this.headers },
+				signal
+			});
+			if (res.status === 501) return { status: "not-available" };
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			return {
+				status: "available",
+				events: (await res.json()).events
+			};
+		}
+		async fetchRuntimeState(threadId, signal) {
+			var _data$state;
+			const res = await fetch(this.getThreadInspectionUrl(threadId, "state"), {
+				headers: { ...this.headers },
+				signal
+			});
+			if (res.status === 501) return { status: "not-available" };
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			return {
+				status: "available",
+				state: (_data$state = (await res.json()).state) !== null && _data$state !== void 0 ? _data$state : null
+			};
+		}
+		getThreadInspectionUrl(threadId, resource) {
+			return `${this.runtimeUrl.replace(/\/+$/, "")}/threads/${encodeURIComponent(threadId)}/${resource}`;
+		}
 		mapMessages(messages) {
 			const items = [];
 			const toolCallMap = /* @__PURE__ */ new Map();
@@ -922,7 +1116,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				var _msg$toolCalls;
 				if ((_msg$toolCalls = msg.toolCalls) === null || _msg$toolCalls === void 0 ? void 0 : _msg$toolCalls.length) for (const tc of msg.toolCalls) {
 					let args = {};
-					try {
+					if (typeof tc.args === "string") try {
 						args = JSON.parse(tc.args);
 					} catch (err) {
 						console.error("[CopilotKit Inspector] Failed to parse tool-call arguments", {
@@ -935,6 +1129,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 							__raw: tc.args
 						};
 					}
+					else args = tc.args;
 					const item = {
 						id: tc.id,
 						type: "tool_call",
@@ -982,15 +1177,245 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			return items;
 		}
 		mapApiEvents(events) {
-			return events.map((event) => {
-				const { type, timestamp, ...rest } = event;
+			return events.map((event, index) => {
+				const { type, timestamp, payload, ...rest } = event;
 				return {
 					type: typeof type === "string" ? type : "UNKNOWN",
 					timestamp: typeof timestamp === "string" || typeof timestamp === "number" ? timestamp : Date.now(),
-					payload: rest
+					payload: payload !== null && payload !== void 0 ? payload : rest,
+					sourceIndex: index + 1,
+					rawEvent: event
 				};
 			});
 		}
+		get activeTimelineItems() {
+			return this.timelineItemsForEvents(this.activeEvents);
+		}
+		timelineItemsForEvents(events) {
+			var _this$_timelineItemsC;
+			if (((_this$_timelineItemsC = this._timelineItemsCache) === null || _this$_timelineItemsC === void 0 ? void 0 : _this$_timelineItemsC.events) === events) return this._timelineItemsCache.items;
+			const items = this.timelineItemsFromEvents(events);
+			this._timelineItemsCache = {
+				events,
+				items
+			};
+			return items;
+		}
+		timelineItemsFromEvents(events) {
+			if (events.length === 0) return [];
+			const items = [];
+			const messageItems = /* @__PURE__ */ new Map();
+			const toolItems = /* @__PURE__ */ new Map();
+			const readString = (payload, keys) => {
+				for (const key of keys) {
+					const value = payload[key];
+					if (typeof value === "string") return value;
+				}
+				return null;
+			};
+			const sourceIndexFor = (event) => {
+				var _event$sourceIndex;
+				return (_event$sourceIndex = event.sourceIndex) !== null && _event$sourceIndex !== void 0 ? _event$sourceIndex : 0;
+			};
+			const appendWarning = (event, title, body, severity = "warning") => {
+				const sourceIndex = sourceIndexFor(event);
+				items.push({
+					id: `warning-${sourceIndex}-${items.length}`,
+					kind: "warning",
+					title,
+					body,
+					timestamp: event.timestamp,
+					sourceIndex,
+					severity
+				});
+			};
+			const ensureMessage = (event, role) => {
+				var _readString;
+				const sourceIndex = sourceIndexFor(event);
+				const key = (_readString = readString(event.payload, [
+					"messageId",
+					"message_id",
+					"id"
+				])) !== null && _readString !== void 0 ? _readString : `message-${sourceIndex}`;
+				let item = messageItems.get(key);
+				if (!item) {
+					item = {
+						id: `message-${key}`,
+						kind: "message",
+						title: `${role || "message"} message`,
+						body: "",
+						timestamp: event.timestamp,
+						sourceIndex
+					};
+					messageItems.set(key, item);
+					items.push(item);
+				}
+				return item;
+			};
+			const ensureTool = (event) => {
+				var _readString2;
+				const sourceIndex = sourceIndexFor(event);
+				const key = (_readString2 = readString(event.payload, [
+					"toolCallId",
+					"tool_call_id",
+					"id",
+					"callId"
+				])) !== null && _readString2 !== void 0 ? _readString2 : `tool-${sourceIndex}`;
+				let item = toolItems.get(key);
+				if (!item) {
+					var _readString3;
+					item = {
+						id: `tool-${key}`,
+						kind: "tool",
+						title: (_readString3 = readString(event.payload, [
+							"toolCallName",
+							"toolName",
+							"name",
+							"functionName"
+						])) !== null && _readString3 !== void 0 ? _readString3 : "Tool call",
+						body: "",
+						timestamp: event.timestamp,
+						sourceIndex
+					};
+					toolItems.set(key, item);
+					items.push(item);
+				}
+				return item;
+			};
+			for (const event of events) {
+				const { type, payload } = event;
+				const sourceIndex = sourceIndexFor(event);
+				if (type === "UNKNOWN") {
+					appendWarning(event, "Unknown AG-UI event", "The event is missing a string type and could not be normalized.");
+					continue;
+				}
+				if (type === "RUN_STARTED" || type === "STEP_STARTED") {
+					items.push({
+						id: `${type}-${sourceIndex}`,
+						kind: "run",
+						title: type === "RUN_STARTED" ? "Run started" : "Step started",
+						timestamp: event.timestamp,
+						sourceIndex,
+						details: payload
+					});
+					continue;
+				}
+				if (type === "RUN_FINISHED" || type === "STEP_FINISHED") {
+					items.push({
+						id: `${type}-${sourceIndex}`,
+						kind: "run",
+						title: type === "RUN_FINISHED" ? "Run finished" : "Step finished",
+						timestamp: event.timestamp,
+						sourceIndex,
+						details: payload
+					});
+					continue;
+				}
+				if (type === "RUN_ERROR" || type === "ERROR") {
+					var _readString4;
+					items.push({
+						id: `${type}-${sourceIndex}`,
+						kind: "warning",
+						title: "Run error",
+						body: (_readString4 = readString(payload, [
+							"message",
+							"error",
+							"description"
+						])) !== null && _readString4 !== void 0 ? _readString4 : "",
+						timestamp: event.timestamp,
+						sourceIndex,
+						severity: "error",
+						details: payload
+					});
+					continue;
+				}
+				if (type === "TEXT_MESSAGE_START") {
+					var _readString5;
+					ensureMessage(event, (_readString5 = readString(payload, ["role"])) !== null && _readString5 !== void 0 ? _readString5 : "assistant");
+					continue;
+				}
+				if (type === "TEXT_MESSAGE_CONTENT") {
+					var _readString6, _item$body, _readString7;
+					const item = ensureMessage(event, (_readString6 = readString(payload, ["role"])) !== null && _readString6 !== void 0 ? _readString6 : "assistant");
+					item.body = `${(_item$body = item.body) !== null && _item$body !== void 0 ? _item$body : ""}${(_readString7 = readString(payload, [
+						"delta",
+						"content",
+						"text"
+					])) !== null && _readString7 !== void 0 ? _readString7 : ""}`;
+					continue;
+				}
+				if (type === "TEXT_MESSAGE_END") {
+					var _readString8;
+					ensureMessage(event, (_readString8 = readString(payload, ["role"])) !== null && _readString8 !== void 0 ? _readString8 : "assistant");
+					continue;
+				}
+				if (type === "TOOL_CALL_START") {
+					ensureTool(event);
+					continue;
+				}
+				if (type === "TOOL_CALL_ARGS") {
+					var _readString9;
+					const item = ensureTool(event);
+					const chunk = (_readString9 = readString(payload, [
+						"args",
+						"arguments",
+						"delta"
+					])) !== null && _readString9 !== void 0 ? _readString9 : typeof payload.args === "object" ? JSON.stringify(payload.args) : null;
+					if (chunk) {
+						var _item$rawArgs;
+						item.rawArgs = `${(_item$rawArgs = item.rawArgs) !== null && _item$rawArgs !== void 0 ? _item$rawArgs : ""}${chunk}`;
+						item.body = item.rawArgs;
+					}
+					continue;
+				}
+				if (type === "TOOL_CALL_END") {
+					const item = ensureTool(event);
+					if (item.rawArgs) try {
+						JSON.parse(item.rawArgs);
+					} catch (_unused) {
+						appendWarning(event, "Could not decode tool call arguments", item.rawArgs);
+					}
+					continue;
+				}
+				if (type === "TOOL_CALL_RESULT") {
+					const item = ensureTool(event);
+					const result = readString(payload, [
+						"result",
+						"content",
+						"delta"
+					]);
+					if (result) {
+						item.body = item.body ? `${item.body}\nResult: ${result}` : `Result: ${result}`;
+						try {
+							JSON.parse(result);
+						} catch (_unused2) {
+							appendWarning(event, "Could not decode tool result", result);
+						}
+					}
+					continue;
+				}
+				if (type.startsWith("STATE_")) {
+					items.push({
+						id: `${type}-${sourceIndex}`,
+						kind: "state",
+						title: type === "STATE_SNAPSHOT" ? "State snapshot captured" : "State delta captured",
+						timestamp: event.timestamp,
+						sourceIndex,
+						details: payload
+					});
+					continue;
+				}
+				items.push({
+					id: `event-${sourceIndex}`,
+					kind: "event",
+					title: type,
+					timestamp: event.timestamp,
+					sourceIndex,
+					details: payload
+				});
+			}
+			return items;
+		}
 		get renderItems() {
 			const items = this._conversation;
 			const result = [];
@@ -1028,7 +1453,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			};
 		}
 		get duration() {
-			const t = this.thread;
+			const t = this.metadata;
 			if (!(t === null || t === void 0 ? void 0 : t.createdAt) || !(t === null || t === void 0 ? void 0 : t.updatedAt)) return "—";
 			const ms = new Date(t.updatedAt).getTime() - new Date(t.createdAt).getTime();
 			if (ms < 0) return "—";
@@ -1050,9 +1475,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._expandedMessages = next;
 		}
 		get activeEvents() {
-			var _ref, _this$_fetchedEvents;
+			var _ref, _this$_fetchedEvents, _this$_liveEventsWith;
 			if (this._eventsNotAvailable) return [];
-			return (_ref = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref !== void 0 ? _ref : [];
+			const events = (_ref = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref !== void 0 ? _ref : [];
+			if (events.every((event) => event.sourceIndex != null)) return events;
+			if (((_this$_liveEventsWith = this._liveEventsWithSourceIndexCache) === null || _this$_liveEventsWith === void 0 ? void 0 : _this$_liveEventsWith.events) === events) return this._liveEventsWithSourceIndexCache.indexedEvents;
+			const indexedEvents = events.map((event, index) => event.sourceIndex == null ? {
+				...event,
+				sourceIndex: index + 1
+			} : event);
+			this._liveEventsWithSourceIndexCache = {
+				events,
+				indexedEvents
+			};
+			return indexedEvents;
 		}
 		get activeState() {
 			var _ref2, _this$_fetchedState;
@@ -1067,6 +1503,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			if (!id) return "—";
 			return id.length > 20 ? id.slice(0, 8) + "…" : id;
 		}
+		get metadata() {
+			var _ref3, _this$_fetchedMetadat;
+			return (_ref3 = (_this$_fetchedMetadat = this._fetchedMetadata) !== null && _this$_fetchedMetadat !== void 0 ? _this$_fetchedMetadat : this.thread) !== null && _ref3 !== void 0 ? _ref3 : null;
+		}
 		fmtTime(dateStr) {
 			if (!dateStr) return "—";
 			const d = new Date(dateStr);
@@ -1086,7 +1526,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
           <!-- Tab bar -->
           <div class="cpk-td__tabs-header">
             <div class="cpk-td__tab-group" role="tablist">
-              ${ɵCpkThreadDetails.TAB_LIST.map((tab) => lit.html`
+              ${CpkThreadInspector.TAB_LIST.map((tab) => lit.html`
                   <button
                     role="tab"
                     class="cpk-td__tab ${this._tab === tab.id ? "cpk-td__tab--active" : ""}"
@@ -1098,18 +1538,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
             </div>
             ${this.renderPanelToggle()}
           </div>
+          ${this.renderMetadataStrip()}
 
           <!-- Scrollable content -->
           <div class="cpk-td__content">
             ${this._panelInitializing ? lit.html`
                     <div class="cpk-td__status">Loading…</div>
                   ` : lit.nothing}
-            ${ɵCpkThreadDetails.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? lit.html`<div
-                      class="cpk-td__panel"
-                      style=${this._tab === tab.id && !this._panelInitializing ? "" : "display:none"}
-                    >
-                      ${this.renderTabContent(tab.id)}
-                    </div>` : lit.nothing)}
+            ${CpkThreadInspector.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? lit.html`<div
+                    class="cpk-td__panel"
+                    style=${this._tab === tab.id && !this._panelInitializing ? "" : "display:none"}
+                  >
+                    ${this.renderTabContent(tab.id)}
+                  </div>` : lit.nothing)}
           </div>
         </div>
 
@@ -1137,6 +1578,122 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
           ${this.renderDetailPanel()}
         </div>
       </div>
+    `;
+		}
+		renderMetadataStrip() {
+			var _metadata$id, _metadata$endUserId;
+			const metadata = this.metadata;
+			const pills = [
+				{
+					label: "Thread",
+					value: (_metadata$id = metadata === null || metadata === void 0 ? void 0 : metadata.id) !== null && _metadata$id !== void 0 ? _metadata$id : this.threadId
+				},
+				{
+					label: "Agent",
+					value: metadata === null || metadata === void 0 ? void 0 : metadata.agentId
+				},
+				{
+					label: "End user",
+					value: (_metadata$endUserId = metadata === null || metadata === void 0 ? void 0 : metadata.endUserId) !== null && _metadata$endUserId !== void 0 ? _metadata$endUserId : metadata === null || metadata === void 0 ? void 0 : metadata.createdById
+				},
+				{
+					label: "Status",
+					value: metadata === null || metadata === void 0 ? void 0 : metadata.status
+				}
+			].filter((pill) => pill.value != null && pill.value !== "");
+			if (pills.length === 0) return lit.nothing;
+			return lit.html`
+      <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
+        ${pills.map((pill) => {
+				var _pill$value;
+				return lit.html`
+            <span class="cpk-td__metadata-pill" title=${(_pill$value = pill.value) !== null && _pill$value !== void 0 ? _pill$value : ""}>
+              <span class="cpk-td__metadata-label">${pill.label}</span>
+              <span class="cpk-td__metadata-value"
+                >${this.shortId(pill.value)}</span
+              >
+            </span>
+          `;
+			})}
+      </div>
+    `;
+		}
+		revealSourceEvent(sourceIndex) {
+			this._activatedTabs = new Set([...this._activatedTabs, "raw-events"]);
+			this._tab = "raw-events";
+			this.requestUpdate();
+			requestAnimationFrame(() => {
+				var _this$shadowRoot, _source$scrollIntoVie;
+				const source = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector(`[data-source-index="${sourceIndex}"]`);
+				source === null || source === void 0 || (_source$scrollIntoVie = source.scrollIntoView) === null || _source$scrollIntoVie === void 0 || _source$scrollIntoVie.call(source, { block: "center" });
+			});
+		}
+		renderTimeline() {
+			if (this._loadingEvents) return lit.html`
+        <div class="cpk-td__status">Loading timeline…</div>
+      `;
+			if (this._eventsError) return lit.html`<div class="cpk-td__status cpk-td__status--error">
+        ${this._eventsError}
+      </div>`;
+			if (this._eventsNotAvailable) {
+				if (this._conversation.length > 0) return this.renderConversation();
+				if (this._loadingMessages) return this.renderConversation();
+				return lit.html`
+        <div class="cpk-td__empty-state">
+          <span>Timeline event history not available</span>
+          <span class="cpk-td__empty-hint"
+            >This runtime doesn't yet expose per-thread AG-UI events. Check State for
+            the latest snapshot when available.</span
+          >
+        </div>
+      `;
+			}
+			const events = this.activeEvents;
+			const cachedTimeline = this.getCachedPanelTpl("timeline", [events]);
+			if (cachedTimeline) return cachedTimeline;
+			const timelineItems = this.timelineItemsForEvents(events);
+			if (timelineItems.length === 0) {
+				if (this._conversation.length > 0) return this.renderConversation();
+				if (this._loadingMessages) return this.renderConversation();
+				return lit.html`
+        <div class="cpk-td__empty-state">
+          <span>No timeline events captured</span>
+          <span class="cpk-td__empty-hint"
+            >Timeline rows are normalized from AG-UI events. Open Raw AG-UI Events or
+            State to inspect the available thread data.</span
+          >
+        </div>
+      `;
+			}
+			return this.cachedPanelTpl("timeline", [events], () => {
+				return lit.html`${timelineItems.map((item) => this.renderTimelineItem(item))}`;
+			});
+		}
+		renderTimelineItem(item) {
+			return lit.html`
+      <div
+        class="cpk-td__timeline-item ${item.kind === "warning" ? "cpk-td__timeline-item--warning" : ""}"
+      >
+        <div class="cpk-td__timeline-header">
+          <span class="cpk-td__timeline-kind"
+            >${item.severity === "error" ? "error" : item.kind}</span
+          >
+          <span class="cpk-td__timeline-title">${item.title}</span>
+          <button
+            type="button"
+            class="cpk-td__source-link"
+            @click=${() => this.revealSourceEvent(item.sourceIndex)}
+          >
+            Source event #${item.sourceIndex}
+          </button>
+          <span class="cpk-td__timeline-time"
+            >${formatTimestamp(item.timestamp)}</span
+          >
+        </div>
+        ${item.body ? lit.html`<div class="cpk-td__timeline-body">${item.body}</div>` : item.details ? lit.html`<pre class="cpk-td__timeline-body">
+${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.details))}</pre
+              >` : lit.nothing}
+      </div>
     `;
 		}
 		renderConversation() {
@@ -1163,7 +1720,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
           <span>No messages yet</span>
         </div>
       `;
-			return this.cachedPanelTpl("conversation", [
+			return this.cachedPanelTpl("timeline-fallback", [
 				this._conversation,
 				this._expandedTools,
 				this._expandedMessages
@@ -1181,8 +1738,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		* change without the listed key flipping.
 		*/
 		cachedPanelTpl(slot, key, build) {
-			const cached = this._panelTplCache.get(slot);
-			if (cached && cached.key.length === key.length && cached.key.every((v, i) => v === key[i])) return cached.tpl;
+			const cached = this.getCachedPanelTpl(slot, key);
+			if (cached) return cached;
 			const tpl = build();
 			this._panelTplCache.set(slot, {
 				key,
@@ -1190,6 +1747,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			});
 			return tpl;
 		}
+		getCachedPanelTpl(slot, key) {
+			const cached = this._panelTplCache.get(slot);
+			if (cached && cached.key.length === key.length && cached.key.every((v, i) => v === key[i])) return cached.tpl;
+			return null;
+		}
 		renderRenderItem(item) {
 			switch (item.type) {
 				case "user":
@@ -1210,7 +1772,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		renderBubble(item) {
 			const isUser = item.type === "user";
-			const threshold = ɵCpkThreadDetails.COLLAPSE_THRESHOLD;
+			const threshold = CpkThreadInspector.COLLAPSE_THRESHOLD;
 			const expanded = this._expandedMessages.has(item.id);
 			const tooLong = item.content.length > threshold;
 			const shown = tooLong && !expanded ? item.content.slice(0, threshold) + "…" : item.content;
@@ -1356,7 +1918,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.result))}</
         </div>
       `;
 			const stateValue = this.activeState;
-			return this.cachedPanelTpl("agent-state", [stateValue], () => {
+			return this.cachedPanelTpl("state", [stateValue], () => {
 				return lit.html`<pre class="cpk-td__json-block">
 ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</pre
       >`;
@@ -1387,11 +1949,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
           >
         </div>
       `;
-			return this.cachedPanelTpl("ag-ui-events", [events], () => {
+			return this.cachedPanelTpl("raw-events", [events], () => {
 				return lit.html`${events.map((event) => {
+					var _event$rawEvent;
 					const { bg, fg } = eventColors(event.type);
 					return lit.html`
-          <div class="cpk-td__event">
+          <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
             <div class="cpk-td__event-header" style="background:${bg}">
               <span class="cpk-td__event-type" style="color:${fg}"
                 >${event.type}</span
@@ -1401,7 +1964,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
               >
             </div>
             <pre class="cpk-td__event-payload">
-${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}</pre
+${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent = event.rawEvent) !== null && _event$rawEvent !== void 0 ? _event$rawEvent : event))}</pre
             >
           </div>
         `;
@@ -1435,31 +1998,44 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
     `;
 		}
 		renderDetailPanel() {
-			var _this$thread, _this$thread$name, _this$thread2, _this$thread$agentId, _this$thread3, _this$thread$createdB, _this$thread4, _this$thread5, _this$thread6;
+			var _metadata$name, _metadata$agentId, _metadata$endUserId2, _metadata$createdById, _metadata$status;
 			const counts = this.activityCounts;
+			const metadata = this.metadata;
 			return lit.html`
       <!-- Thread -->
       <div class="cpk-tdp__section-title">Thread</div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">ID</span>
         <span class="cpk-tdp__value cpk-tdp__value--wrap"
-          >${this.shortId((_this$thread = this.thread) === null || _this$thread === void 0 ? void 0 : _this$thread.id)}</span
+          >${this.shortId(metadata === null || metadata === void 0 ? void 0 : metadata.id)}</span
         >
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Name</span>
-        <span class="cpk-tdp__value">${(_this$thread$name = (_this$thread2 = this.thread) === null || _this$thread2 === void 0 ? void 0 : _this$thread2.name) !== null && _this$thread$name !== void 0 ? _this$thread$name : "—"}</span>
+        <span class="cpk-tdp__value">${(_metadata$name = metadata === null || metadata === void 0 ? void 0 : metadata.name) !== null && _metadata$name !== void 0 ? _metadata$name : "—"}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Agent</span>
         <span class="cpk-tdp__value cpk-tdp__value--truncate"
-          >${(_this$thread$agentId = (_this$thread3 = this.thread) === null || _this$thread3 === void 0 ? void 0 : _this$thread3.agentId) !== null && _this$thread$agentId !== void 0 ? _this$thread$agentId : "—"}</span
+          >${(_metadata$agentId = metadata === null || metadata === void 0 ? void 0 : metadata.agentId) !== null && _metadata$agentId !== void 0 ? _metadata$agentId : "—"}</span
+        >
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">End user</span>
+        <span class="cpk-tdp__value cpk-tdp__value--truncate"
+          >${(_metadata$endUserId2 = metadata === null || metadata === void 0 ? void 0 : metadata.endUserId) !== null && _metadata$endUserId2 !== void 0 ? _metadata$endUserId2 : "—"}</span
         >
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Created by</span>
         <span class="cpk-tdp__value cpk-tdp__value--truncate"
-          >${(_this$thread$createdB = (_this$thread4 = this.thread) === null || _this$thread4 === void 0 ? void 0 : _this$thread4.createdById) !== null && _this$thread$createdB !== void 0 ? _this$thread$createdB : "—"}</span
+          >${(_metadata$createdById = metadata === null || metadata === void 0 ? void 0 : metadata.createdById) !== null && _metadata$createdById !== void 0 ? _metadata$createdById : "—"}</span
+        >
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Status</span>
+        <span class="cpk-tdp__value cpk-tdp__value--truncate"
+          >${(_metadata$status = metadata === null || metadata === void 0 ? void 0 : metadata.status) !== null && _metadata$status !== void 0 ? _metadata$status : "—"}</span
         >
       </div>
 
@@ -1469,11 +2045,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
       <div class="cpk-tdp__section-title">Timestamps</div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Created</span>
-        <span class="cpk-tdp__value">${this.fmtTime((_this$thread5 = this.thread) === null || _this$thread5 === void 0 ? void 0 : _this$thread5.createdAt)}</span>
+        <span class="cpk-tdp__value">${this.fmtTime(metadata === null || metadata === void 0 ? void 0 : metadata.createdAt)}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Updated</span>
-        <span class="cpk-tdp__value">${this.fmtTime((_this$thread6 = this.thread) === null || _this$thread6 === void 0 ? void 0 : _this$thread6.updatedAt)}</span>
+        <span class="cpk-tdp__value">${this.fmtTime(metadata === null || metadata === void 0 ? void 0 : metadata.updatedAt)}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Duration</span>
@@ -1499,8 +2075,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
     `;
 		}
 	};
-	ɵCpkThreadDetails.properties = {
+	CpkThreadInspector.properties = {
 		threadId: { attribute: false },
+		provider: { attribute: false },
 		thread: { attribute: false },
 		runtimeUrl: { attribute: false },
 		headers: { attribute: false },
@@ -1509,6 +2086,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 		agentEventsInput: { attribute: false },
 		liveMessageVersion: { attribute: false },
 		_tab: { state: true },
+		_fetchedMetadata: { state: true },
 		_conversation: { state: true },
 		_fetchedEvents: { state: true },
 		_fetchedState: { state: true },
@@ -1527,22 +2105,24 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 		_panelInitializing: { state: true },
 		_activatedTabs: { state: true }
 	};
-	ɵCpkThreadDetails.COLLAPSE_THRESHOLD = 800;
-	ɵCpkThreadDetails.TAB_LIST = [
+	CpkThreadInspector.COLLAPSE_THRESHOLD = 800;
+	CpkThreadInspector.TAB_LIST = [
 		{
-			id: "conversation",
-			label: "Conversation"
+			id: "timeline",
+			label: "Timeline"
 		},
 		{
-			id: "agent-state",
-			label: "Agent State"
+			id: "raw-events",
+			label: "Raw AG-UI Events"
 		},
 		{
-			id: "ag-ui-events",
-			label: "AG-UI Events"
+			id: "state",
+			label: "State"
 		}
 	];
-	ɵCpkThreadDetails.styles = lit.css`
+	CpkThreadInspector.providerIds = /* @__PURE__ */ new WeakMap();
+	CpkThreadInspector.nextProviderId = 1;
+	CpkThreadInspector.styles = lit.css`
     @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap");
 
     /* ── Root ────────────────────────────────────────────────────────── */
@@ -1668,6 +2248,42 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
       flex-shrink: 0;
     }
 
+    .cpk-td__metadata-strip {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      padding: 10px 16px;
+      border-bottom: 1px solid #e9e9ef;
+      background: #fbfbfd;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__metadata-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      max-width: 220px;
+      padding: 3px 7px;
+      border: 1px solid #e9e9ef;
+      border-radius: 5px;
+      background: #ffffff;
+      color: #57575b;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      white-space: nowrap;
+    }
+
+    .cpk-td__metadata-label {
+      color: #838389;
+      text-transform: uppercase;
+      font-size: 9px;
+    }
+
+    .cpk-td__metadata-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -1888,6 +2504,81 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
       background: #e9e9ef;
     }
 
+    /* ── Interaction timeline ───────────────────────────────────────── */
+    .cpk-td__timeline-item {
+      border: 1px solid #e9e9ef;
+      border-radius: 6px;
+      background: #ffffff;
+      overflow: hidden;
+    }
+
+    .cpk-td__timeline-item--warning {
+      border-color: rgba(250, 95, 103, 0.35);
+      background: rgba(250, 95, 103, 0.04);
+    }
+
+    .cpk-td__timeline-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 10px;
+      background: #f7f7f9;
+    }
+
+    .cpk-td__timeline-kind {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #5558b2;
+    }
+
+    .cpk-td__timeline-title {
+      flex: 1;
+      min-width: 0;
+      font-size: 12px;
+      font-weight: 500;
+      color: #010507;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .cpk-td__timeline-time {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      color: #838389;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__timeline-body {
+      padding: 9px 10px;
+      font-size: 12px;
+      line-height: 1.55;
+      color: #57575b;
+      white-space: pre-wrap;
+      word-break: break-word;
+      border-top: 1px solid #e9e9ef;
+    }
+
+    .cpk-td__source-link {
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: #5558b2;
+      cursor: pointer;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__source-link:hover {
+      color: #010507;
+    }
+
     /* ── Generative UI ──────────────────────────────────────────────── */
     @keyframes cpk-genui-enter {
       from {
@@ -2095,7 +2786,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
       text-align: right;
     }
   `;
+	var ɵCpkThreadDetails = class extends CpkThreadInspector {};
 	if (!customElements.get("cpk-thread-list")) customElements.define("cpk-thread-list", CpkThreadList);
+	if (!customElements.get(THREAD_INSPECTOR_TAG)) customElements.define(THREAD_INSPECTOR_TAG, CpkThreadInspector);
 	if (!customElements.get("cpk-thread-details")) customElements.define("cpk-thread-details", ɵCpkThreadDetails);
 	var WebInspectorElement = class extends lit.LitElement {
 		constructor(..._args3) {
@@ -2167,6 +2860,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 			this.viewedBannerTimestamps = /* @__PURE__ */ new Set();
 			this.pendingBannerViewed = null;
 			this.clickedBannerIds = /* @__PURE__ */ new Set();
+			this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
 			this.contextState = {
 				button: {
 					position: {
@@ -2376,6 +3070,30 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 			this.expandedTools = /* @__PURE__ */ new Set();
 			this.expandedContextItems = /* @__PURE__ */ new Set();
 			this.copiedContextItems = /* @__PURE__ */ new Set();
+			this.handleTalkToEngineerClick = () => {
+				var _this$core;
+				if ((_this$core = this.core) === null || _this$core === void 0 ? void 0 : _this$core.telemetryDisabled) return;
+				trackTalkToEngineerClicked(this.getThreadsTelemetryProps({
+					cta: "talk_to_engineer",
+					cta_surface: "threads_header"
+				}, { includeUrlAttribution: true }));
+			};
+			this.handleThreadsIntelligenceSignupClick = () => {
+				var _this$core2;
+				if ((_this$core2 = this.core) === null || _this$core2 === void 0 ? void 0 : _this$core2.telemetryDisabled) return;
+				trackThreadsIntelligenceSignupClicked(this.getThreadsTelemetryProps({
+					cta: "signup",
+					cta_surface: "threads_locked"
+				}, { includeUrlAttribution: true }));
+			};
+			this.handleThreadsTalkToEngineerClick = () => {
+				var _this$core3;
+				if ((_this$core3 = this.core) === null || _this$core3 === void 0 ? void 0 : _this$core3.telemetryDisabled) return;
+				trackThreadsTalkToEngineerClicked(this.getThreadsTelemetryProps({
+					cta: "talk_to_engineer",
+					cta_surface: "threads_locked"
+				}, { includeUrlAttribution: true }));
+			};
 			this.handleThreadDividerPointerDown = (event) => {
 				this.threadDividerResizing = true;
 				this.threadDividerPointerId = event.pointerId;
@@ -2498,7 +3216,38 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 				}
 			];
 		}
+		getThreadServiceStatus() {
+			var _this$_core$threadEnd;
+			if (!this._core) return "unknown";
+			if (!this._core.threadEndpoints) return "unknown";
+			return ((_this$_core$threadEnd = this._core.threadEndpoints) === null || _this$_core$threadEnd === void 0 ? void 0 : _this$_core$threadEnd.list) === false ? "unavailable" : "available";
+		}
+		areThreadEndpointsAvailable() {
+			return this.getThreadServiceStatus() !== "unavailable";
+		}
+		getThreadsTelemetryProps(extra = {}, options = {}) {
+			var _this$core4, _this$core$licenseSta, _this$core5, _this$core$runtimeMod, _this$core6, _this$core7, _this$core$telemetryD, _this$core8;
+			const distinctId = options.includeUrlAttribution && !((_this$core4 = this.core) === null || _this$core4 === void 0 ? void 0 : _this$core4.telemetryDisabled) ? getTelemetryDistinctIdForUrl() : null;
+			const threadServiceStatus = this.getThreadServiceStatus();
+			return {
+				posthog_distinct_id: distinctId !== null && distinctId !== void 0 ? distinctId : void 0,
+				intelligence_status: threadServiceStatus === "available" ? "intelligence_enabled" : threadServiceStatus === "unavailable" ? "intelligence_not_enabled" : "unknown",
+				thread_service_status: threadServiceStatus,
+				license_status: (_this$core$licenseSta = (_this$core5 = this.core) === null || _this$core5 === void 0 ? void 0 : _this$core5.licenseStatus) !== null && _this$core$licenseSta !== void 0 ? _this$core$licenseSta : void 0,
+				runtime_mode: (_this$core$runtimeMod = (_this$core6 = this.core) === null || _this$core6 === void 0 ? void 0 : _this$core6.runtimeMode) !== null && _this$core$runtimeMod !== void 0 ? _this$core$runtimeMod : void 0,
+				runtime_url_type: getRuntimeUrlType((_this$core7 = this.core) === null || _this$core7 === void 0 ? void 0 : _this$core7.runtimeUrl),
+				telemetry_disabled: (_this$core$telemetryD = (_this$core8 = this.core) === null || _this$core8 === void 0 ? void 0 : _this$core8.telemetryDisabled) !== null && _this$core$telemetryD !== void 0 ? _this$core$telemetryD : false,
+				...extra
+			};
+		}
+		getIntelligenceSignupUrl() {
+			return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
+		}
+		getTalkToEngineerUrl() {
+			return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
+		}
 		subscribeToThreadStore(agentId, store) {
+			if (!this.areThreadEndpointsAvailable()) return;
 			if (this._threadStoreSubscriptions.has(agentId)) return;
 			const threadsSub = store.select(_copilotkit_core.ɵselectThreads).subscribe((threads) => {
 				this._threadsByAgent.set(agentId, threads);
@@ -2535,12 +3284,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 			this._threads = [];
 		}
 		ensureOwnedThreadStore(agentId) {
-			var _this$core, _core$threadEndpoints, _core$intelligence;
+			var _this$core9, _core$intelligence;
 			if (this._ownedThreadStores.has(agentId)) return;
-			if ((_this$core = this.core) === null || _this$core === void 0 ? void 0 : _this$core.getThreadStore(agentId)) return;
+			if ((_this$core9 = this.core) === null || _this$core9 === void 0 ? void 0 : _this$core9.getThreadStore(agentId)) return;
 			const core = this.core;
 			if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
-			if (((_core$threadEndpoints = core.threadEndpoints) === null || _core$threadEndpoints === void 0 ? void 0 : _core$threadEndpoints.list) === false) return;
+			if (!this.areThreadEndpointsAvailable()) return;
 			const store = (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch });
 			store.start();
 			store.setContext({
@@ -2561,25 +3310,29 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 		updateOwnedThreadStoreHeaders(headers) {
 			const core = this.core;
 			if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
-			for (const [agentId, store] of this._ownedThreadStores) store.setContext({
-				runtimeUrl: core.runtimeUrl,
-				headers: { ...headers },
-				agentId
-			});
+			for (const [agentId, store] of this._ownedThreadStores) {
+				var _core$intelligence2;
+				store.setContext({
+					runtimeUrl: core.runtimeUrl,
+					headers: { ...headers },
+					wsUrl: (_core$intelligence2 = core.intelligence) === null || _core$intelligence2 === void 0 ? void 0 : _core$intelligence2.wsUrl,
+					agentId
+				});
+			}
 		}
 		removeOwnedThreadStore(agentId) {
-			var _this$core2;
+			var _this$core10;
 			const store = this._ownedThreadStores.get(agentId);
 			if (!store) return;
 			store.stop();
-			(_this$core2 = this.core) === null || _this$core2 === void 0 || _this$core2.unregisterThreadStore(agentId);
+			(_this$core10 = this.core) === null || _this$core10 === void 0 || _this$core10.unregisterThreadStore(agentId);
 			this._ownedThreadStores.delete(agentId);
 		}
 		teardownOwnedThreadStores() {
 			for (const [agentId, store] of this._ownedThreadStores) {
-				var _this$core3;
+				var _this$core11;
 				store.stop();
-				(_this$core3 = this.core) === null || _this$core3 === void 0 || _this$core3.unregisterThreadStore(agentId);
+				(_this$core11 = this.core) === null || _this$core11 === void 0 || _this$core11.unregisterThreadStore(agentId);
 			}
 			this._ownedThreadStores.clear();
 		}
@@ -2591,13 +3344,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 				onRuntimeConnectionStatusChanged: ({ status }) => {
 					this.runtimeStatus = status;
 					if (status === "connected") {
-						var _core$threadEndpoints2;
 						if (!core.telemetryDisabled) {
 							ensureTelemetryDistinctId();
 							maybeShowDisclosure();
 						}
 						this.flushPendingBannerViewed();
-						if (((_core$threadEndpoints2 = core.threadEndpoints) === null || _core$threadEndpoints2 === void 0 ? void 0 : _core$threadEndpoints2.list) !== false) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
+						if (this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
 						else this.teardownOwnedThreadStores();
 					} else {
 						this._threadsByAgent.clear();
@@ -2611,6 +3363,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 				},
 				onHeadersChanged: ({ headers }) => {
 					this.updateOwnedThreadStoreHeaders(headers);
+					this.requestUpdate();
 				},
 				onError: ({ code, error }) => {
 					this.lastCoreError = {
@@ -2622,6 +3375,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 				onAgentsChanged: ({ agents }) => {
 					this.processAgentsChanged(agents);
 				},
+				onAgentRunStarted: ({ agent }) => {
+					if (agent === null || agent === void 0 ? void 0 : agent.agentId) this.subscribeToAgent(agent);
+				},
 				onContextChanged: ({ context }) => {
 					this.contextStore = this.normalizeContextStore(context);
 					this.requestUpdate();
@@ -2644,6 +3400,13 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 			};
 			this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
 			this.processAgentsChanged(core.agents);
+			if (core.runtimeConnectionStatus === "connected") {
+				if (!core.telemetryDisabled) {
+					ensureTelemetryDistinctId();
+					maybeShowDisclosure();
+				}
+				this.flushPendingBannerViewed();
+			}
 			const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
 			for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
 			if (core.context) this.contextStore = this.normalizeContextStore(core.context);
@@ -2733,10 +3496,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 				onRunStartedEvent: ({ event }) => {
 					this.recordAgentEvent(agentId, "RUN_STARTED", event);
 				},
-				onRunFinishedEvent: ({ event, result }) => {
+				onRunFinishedEvent: (params) => {
 					this.recordAgentEvent(agentId, "RUN_FINISHED", {
-						event,
-						result
+						event: params.event,
+						result: "result" in params ? params.result : void 0
 					});
 					this.refreshOwnedThreadStore(agentId);
 				},
@@ -3002,8 +3765,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 			return lit.html`
       <div class="mt-2 space-y-2">
         ${toolCalls.map((call, index) => {
-				var _ref3, _call$function$name, _call$function, _call$function2;
-				const functionName = (_ref3 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref3 !== void 0 ? _ref3 : "Unknown function";
+				var _ref4, _call$function$name, _call$function, _call$function2;
+				const functionName = (_ref4 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref4 !== void 0 ? _ref4 : "Unknown function";
 				const callId = typeof (call === null || call === void 0 ? void 0 : call.id) === "string" ? call.id : `tool-call-${index + 1}`;
 				const argsString = this.formatToolCallArguments((_call$function2 = call.function) === null || _call$function2 === void 0 ? void 0 : _call$function2.arguments);
 				return lit.html`
@@ -3032,12 +3795,12 @@ ${argsString}</pre
 			if (typeof args === "string") try {
 				const parsed = JSON.parse(args);
 				return JSON.stringify(parsed, null, 2);
-			} catch (_unused) {
+			} catch (_unused3) {
 				return args;
 			}
 			if (typeof args === "object") try {
 				return JSON.stringify(args, null, 2);
-			} catch (_unused2) {
+			} catch (_unused4) {
 				return String(args);
 			}
 			return String(args);
@@ -3060,26 +3823,26 @@ ${argsString}</pre
 				try {
 					const parsed = JSON.parse(trimmed);
 					return JSON.stringify(parsed, null, 2);
-				} catch (_unused3) {
+				} catch (_unused5) {
 					return state;
 				}
 			}
 			if (typeof state === "object") try {
 				return JSON.stringify(state, null, 2);
-			} catch (_unused4) {
+			} catch (_unused6) {
 				return String(state);
 			}
 			return String(state);
 		}
 		getEventBadgeClasses(type) {
 			const base = "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
+			if (type === "RUN_ERROR") return `${base} bg-rose-50 text-rose-700 border-rose-200`;
 			if (type.startsWith("RUN_")) return `${base} bg-blue-50 text-blue-700 border-blue-200`;
 			if (type.startsWith("TEXT_MESSAGE")) return `${base} bg-emerald-50 text-emerald-700 border-emerald-200`;
 			if (type.startsWith("TOOL_CALL")) return `${base} bg-amber-50 text-amber-700 border-amber-200`;
 			if (type.startsWith("REASONING")) return `${base} bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200`;
 			if (type.startsWith("STATE")) return `${base} bg-violet-50 text-violet-700 border-violet-200`;
 			if (type.startsWith("MESSAGES")) return `${base} bg-sky-50 text-sky-700 border-sky-200`;
-			if (type === "RUN_ERROR") return `${base} bg-rose-50 text-rose-700 border-rose-200`;
 			return `${base} bg-gray-100 text-gray-600 border-gray-200`;
 		}
 		stringifyPayload(payload, pretty) {
@@ -3751,7 +4514,7 @@ ${argsString}</pre
 			if (content === null || content === void 0) return "";
 			if (typeof content === "object") try {
 				return JSON.stringify(this.sanitizeForLogging(content));
-			} catch (_unused5) {
+			} catch (_unused7) {
 				return "";
 			}
 			return String(content);
@@ -3869,8 +4632,8 @@ ${argsString}</pre
 			return lit.nothing;
 		}
 		renderSettingsPanel() {
-			var _this$core$telemetryD, _this$core4;
-			const optedOut = (_this$core$telemetryD = (_this$core4 = this.core) === null || _this$core4 === void 0 ? void 0 : _this$core4.telemetryDisabled) !== null && _this$core$telemetryD !== void 0 ? _this$core$telemetryD : false;
+			var _this$core$telemetryD2, _this$core12;
+			const optedOut = (_this$core$telemetryD2 = (_this$core12 = this.core) === null || _this$core12 === void 0 ? void 0 : _this$core12.telemetryDisabled) !== null && _this$core$telemetryD2 !== void 0 ? _this$core$telemetryD2 : false;
 			return lit.html`
       <div class="flex h-full flex-col overflow-hidden">
         <div class="overflow-auto p-4">
@@ -3879,7 +4642,9 @@ ${argsString}</pre
 
             <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">
+              <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>
@@ -3891,7 +4656,8 @@ ${argsString}</pre
                   href=${TELEMETRY_DOCS_URL}
                   target="_blank"
                   rel="noopener"
-                >Learn more →</a>
+                  >Learn more →</a
+                >
               </div>
             </div>
           </div>
@@ -3900,8 +4666,8 @@ ${argsString}</pre
     `;
 		}
 		trackBannerClickedOnce(opts) {
-			var _this$core5, _this$announcementCta;
-			if ((_this$core5 = this.core) === null || _this$core5 === void 0 ? void 0 : _this$core5.telemetryDisabled) return;
+			var _this$core13, _this$announcementCta;
+			if ((_this$core13 = this.core) === null || _this$core13 === void 0 ? void 0 : _this$core13.telemetryDisabled) return;
 			const id = this.announcementTimestamp;
 			if (!id) return;
 			const key = `${id}:${opts.cta}`;
@@ -3913,8 +4679,314 @@ ${argsString}</pre
 				cta_label: (_this$announcementCta = this.announcementCtaLabel) !== null && _this$announcementCta !== void 0 ? _this$announcementCta : void 0
 			});
 		}
+		trackThreadsViewStateOnce(state, threadCount) {
+			var _this$core14;
+			if ((_this$core14 = this.core) === null || _this$core14 === void 0 ? void 0 : _this$core14.telemetryDisabled) return;
+			const key = `${state}:${this.getThreadServiceStatus()}`;
+			if (this.viewedThreadsTelemetryStates.has(key)) return;
+			this.viewedThreadsTelemetryStates.add(key);
+			const props = this.getThreadsTelemetryProps({ thread_count: threadCount });
+			if (state === "locked") trackThreadsLockedViewed(props);
+			else if (state === "empty_enabled") trackThreadsEmptyEnabledViewed(props);
+			else trackThreadsEnabledViewed(props);
+		}
+		renderThreadsLockedBackgroundMockup() {
+			return lit.html`
+      <div
+        aria-hidden="true"
+        style="
+          position: absolute;
+          inset: 0;
+          display: grid;
+          grid-template-columns: minmax(180px, 28%) 1fr;
+          overflow: hidden;
+          opacity: 0.58;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            padding: 28px 24px;
+            border-right: 1px solid #dbdbe5;
+            background: #fafafa;
+          "
+        >
+          ${[
+				{
+					width: 74,
+					accent: true
+				},
+				{ width: 92 },
+				{ width: 68 },
+				{ width: 84 },
+				{ width: 58 },
+				{ width: 76 }
+			].map((row) => lit.html`
+              <div
+                style="
+                  padding: 12px;
+                  border-radius: 8px;
+                  background: ${row.accent ? "#eee6fe" : "#ffffff"};
+                  box-shadow: inset 0 0 0 1px #eeeef4;
+                "
+              >
+                <div
+                  style="
+                    height: 8px;
+                    width: ${row.width}%;
+                    border-radius: 99px;
+                    background: ${row.accent ? "#a984f5" : "#d7d7df"};
+                  "
+                ></div>
+                <div
+                  style="
+                    height: 6px;
+                    width: 88%;
+                    margin-top: 10px;
+                    border-radius: 99px;
+                    background: #e3e3eb;
+                  "
+                ></div>
+                <div
+                  style="
+                    height: 6px;
+                    width: 62%;
+                    margin-top: 7px;
+                    border-radius: 99px;
+                    background: #e8e8ef;
+                  "
+                ></div>
+              </div>
+            `)}
+        </div>
+        <div
+          style="
+            min-width: 0;
+            padding: 42px 48px;
+            background: #ffffff;
+          "
+        >
+          <div
+            style="
+              height: 10px;
+              width: 180px;
+              border-radius: 99px;
+              background: #d7d7df;
+            "
+          ></div>
+          <div
+            style="
+              height: 8px;
+              width: min(520px, 58%);
+              margin-top: 28px;
+              border-radius: 99px;
+              background: #e3e3eb;
+            "
+          ></div>
+          <div
+            style="
+              height: 8px;
+              width: min(430px, 48%);
+              margin-top: 12px;
+              border-radius: 99px;
+              background: #e8e8ef;
+            "
+          ></div>
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(2, minmax(0, 1fr));
+              gap: 16px;
+              max-width: 620px;
+              margin-top: 30px;
+            "
+          >
+            <div
+              style="
+                height: 116px;
+                border-radius: 8px;
+                background: #f5f5f8;
+                box-shadow: inset 0 0 0 1px #eeeef4;
+              "
+            ></div>
+            <div
+              style="
+                height: 116px;
+                border-radius: 8px;
+                background: #f5f5f8;
+                box-shadow: inset 0 0 0 1px #eeeef4;
+              "
+            ></div>
+          </div>
+          <div
+            style="
+              height: 10px;
+              width: min(680px, 74%);
+              margin-top: 34px;
+              border-radius: 99px;
+              background: #e3e3eb;
+            "
+          ></div>
+          <div
+            style="
+              height: 10px;
+              width: min(560px, 60%);
+              margin-top: 14px;
+              border-radius: 99px;
+              background: #e8e8ef;
+            "
+          ></div>
+        </div>
+      </div>
+    `;
+		}
+		renderThreadsLockedView() {
+			this.trackThreadsViewStateOnce("locked", 0);
+			return lit.html`
+      <div
+        style="
+          position: relative;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+          overflow: hidden;
+          background: #ffffff;
+        "
+      >
+        ${this.renderThreadsLockedBackgroundMockup()}
+        <div
+          aria-hidden="true"
+          style="
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background:
+              radial-gradient(circle at center, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.78) 24%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0.56) 100%);
+          "
+        ></div>
+        <div
+          style="
+            position: relative;
+            z-index: 1;
+            max-width: 440px;
+            text-align: center;
+            color: #57575b;
+          "
+        >
+          <div
+            aria-hidden="true"
+            style="
+              margin: 0 auto 18px;
+              display: flex;
+              justify-content: center;
+            "
+          >
+            <div
+              style="
+                display: flex;
+                height: 44px;
+                width: 44px;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid #dfd6fb;
+                border-radius: 8px;
+                background: #eee6fe;
+                color: #57575b;
+                box-shadow: 0 8px 18px rgba(87, 87, 91, 0.14);
+              "
+            >
+              ${this.renderIcon("Lock")}
+            </div>
+          </div>
+          <h2
+            style="
+              margin: 0 0 8px;
+              font-size: 16px;
+              line-height: 1.35;
+              font-weight: 600;
+              color: #010507;
+            "
+          >
+            Enable Intelligence to inspect Threads.
+          </h2>
+          <p
+            style="
+              margin: 0 auto 18px;
+              max-width: 380px;
+              font-size: 13px;
+              line-height: 1.55;
+              color: #57575b;
+            "
+          >
+            Persist conversations and inspect saved thread history from the
+            Inspector.
+          </p>
+          <div
+            style="
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              gap: 8px;
+            "
+          >
+            <a
+              href=${this.getTalkToEngineerUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                min-height: 34px;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                border-radius: 6px;
+                background: #010507;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #ffffff;
+                text-decoration: none;
+              "
+              @click=${this.handleThreadsTalkToEngineerClick}
+            >
+              Talk to an Engineer
+            </a>
+            <a
+              href=${this.getIntelligenceSignupUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                min-height: 34px;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                border-radius: 6px;
+                border: 1px solid #dbdbe5;
+                background: #ffffff;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #57575b;
+                text-decoration: none;
+              "
+              @click=${this.handleThreadsIntelligenceSignupClick}
+            >
+              Sign up for Intelligence
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+		}
 		renderThreadsView() {
 			var _this$_threadsByAgent, _displayThreads$find, _this$_core$runtimeUr, _this$_core2, _this$_core$headers, _this$_core3, _this$_core4, _this$liveMessageVers2, _this$agentEvents$get6;
+			if (!this.areThreadEndpointsAvailable()) return this.renderThreadsLockedView();
 			const displayThreads = this.selectedContext === "all-agents" ? this._threads : (_this$_threadsByAgent = this._threadsByAgent.get(this.selectedContext)) !== null && _this$_threadsByAgent !== void 0 ? _this$_threadsByAgent : [];
 			let threadsErrorMessage = null;
 			if (this.selectedContext === "all-agents") {
@@ -3926,72 +4998,88 @@ ${argsString}</pre
 				threadsErrorMessage = (_this$_threadsErrorBy = (_this$_threadsErrorBy2 = this._threadsErrorByAgent.get(this.selectedContext)) === null || _this$_threadsErrorBy2 === void 0 ? void 0 : _this$_threadsErrorBy2.message) !== null && _this$_threadsErrorBy !== void 0 ? _this$_threadsErrorBy : null;
 			}
 			const selectedThread = this.selectedThreadId != null ? (_displayThreads$find = displayThreads.find((t) => t.id === this.selectedThreadId)) !== null && _displayThreads$find !== void 0 ? _displayThreads$find : null : null;
+			if (!threadsErrorMessage) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled", displayThreads.length);
 			return lit.html`
-      <div style="display:flex;height:100%;overflow:hidden;">
-        <!-- Left sidebar: thread list -->
+      <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
         <div
-          style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+          style="display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid #DBDBE5;background:#ffffff;padding:8px 12px;flex-shrink:0;"
         >
-          <cpk-thread-list
-            style="height:100%;"
-            .threads=${displayThreads}
-            .selectedThreadId=${this.selectedThreadId}
-            .errorMessage=${threadsErrorMessage}
-            @threadSelected=${(e) => {
+          <a
+            href=${this.getTalkToEngineerUrl()}
+            target="_blank"
+            rel="noopener"
+            style="display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
+            @click=${this.handleTalkToEngineerClick}
+          >
+            Talk to an Engineer
+          </a>
+        </div>
+        <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
+          <!-- Left sidebar: thread list -->
+          <div
+            style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+          >
+            <cpk-thread-list
+              style="height:100%;"
+              .threads=${displayThreads}
+              .selectedThreadId=${this.selectedThreadId}
+              .errorMessage=${threadsErrorMessage}
+              @threadSelected=${(e) => {
 				this.selectedThreadId = e.detail;
 				this.requestUpdate();
 			}}
-          ></cpk-thread-list>
-        </div>
-
-        <!-- Resize divider -->
-        <div
-          style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
-          @pointerdown=${this.handleThreadDividerPointerDown}
-          @pointermove=${this.handleThreadDividerPointerMove}
-          @pointerup=${this.handleThreadDividerPointerUp}
-          @pointercancel=${this.handleThreadDividerPointerUp}
-        ></div>
+            ></cpk-thread-list>
+          </div>
 
-        <!-- Center + right: thread details or empty state -->
-        <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
-          ${this.selectedThreadId ? lit.html`<cpk-thread-details
-                  style="flex:1;min-width:0;"
-                  .threadId=${this.selectedThreadId}
-                  .thread=${selectedThread}
-                  .runtimeUrl=${(_this$_core$runtimeUr = (_this$_core2 = this._core) === null || _this$_core2 === void 0 ? void 0 : _this$_core2.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : ""}
-                  .headers=${(_this$_core$headers = (_this$_core3 = this._core) === null || _this$_core3 === void 0 ? void 0 : _this$_core3.headers) !== null && _this$_core$headers !== void 0 ? _this$_core$headers : {}}
-                  .threadInspectionAvailable=${((_this$_core4 = this._core) === null || _this$_core4 === void 0 || (_this$_core4 = _this$_core4.threadEndpoints) === null || _this$_core4 === void 0 ? void 0 : _this$_core4.inspect) !== false}
-                  .liveMessageVersion=${this.selectedThreadId ? (_this$liveMessageVers2 = this.liveMessageVersion.get(this.selectedThreadId)) !== null && _this$liveMessageVers2 !== void 0 ? _this$liveMessageVers2 : 0 : 0}
-                  .agentStateInput=${selectedThread ? this.getLatestStateForAgent(selectedThread.agentId) : null}
-                  .agentEventsInput=${selectedThread ? (_this$agentEvents$get6 = this.agentEvents.get(selectedThread.agentId)) !== null && _this$agentEvents$get6 !== void 0 ? _this$agentEvents$get6 : [] : []}
-                ></cpk-thread-details>` : lit.html`
-                  <div
-                    style="
-                      flex: 1;
-                      display: flex;
-                      flex-direction: column;
-                      align-items: center;
-                      justify-content: center;
-                      gap: 8px;
-                      color: #838389;
-                    "
-                  >
-                    <svg
-                      width="32"
-                      height="32"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="#c0c0c8"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
+          <!-- Resize divider -->
+          <div
+            style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
+            @pointerdown=${this.handleThreadDividerPointerDown}
+            @pointermove=${this.handleThreadDividerPointerMove}
+            @pointerup=${this.handleThreadDividerPointerUp}
+            @pointercancel=${this.handleThreadDividerPointerUp}
+          ></div>
+
+          <!-- Center + right: thread details or empty state -->
+          <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
+            ${selectedThread ? lit.html`<cpk-thread-details
+                    style="flex:1;min-width:0;"
+                    .threadId=${selectedThread.id}
+                    .thread=${selectedThread}
+                    .runtimeUrl=${(_this$_core$runtimeUr = (_this$_core2 = this._core) === null || _this$_core2 === void 0 ? void 0 : _this$_core2.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : ""}
+                    .headers=${(_this$_core$headers = (_this$_core3 = this._core) === null || _this$_core3 === void 0 ? void 0 : _this$_core3.headers) !== null && _this$_core$headers !== void 0 ? _this$_core$headers : {}}
+                    .threadInspectionAvailable=${((_this$_core4 = this._core) === null || _this$_core4 === void 0 || (_this$_core4 = _this$_core4.threadEndpoints) === null || _this$_core4 === void 0 ? void 0 : _this$_core4.inspect) !== false}
+                    .liveMessageVersion=${(_this$liveMessageVers2 = this.liveMessageVersion.get(selectedThread.id)) !== null && _this$liveMessageVers2 !== void 0 ? _this$liveMessageVers2 : 0}
+                    .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
+                    .agentEventsInput=${(_this$agentEvents$get6 = this.agentEvents.get(selectedThread.agentId)) !== null && _this$agentEvents$get6 !== void 0 ? _this$agentEvents$get6 : []}
+                  ></cpk-thread-details>` : lit.html`
+                    <div
+                      style="
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 8px;
+                        color: #838389;
+                      "
                     >
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                    </svg>
-                    <span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
-                  </div>
-                `}
+                      <svg
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="#c0c0c8"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                      </svg>
+                      <span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
+                    </div>
+                  `}
+          </div>
         </div>
       </div>
     `;
@@ -4108,10 +5196,10 @@ ${argsString}</pre
         <div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
           <table class="w-full table-fixed border-collapse text-xs box-border">
             <colgroup>
-              <col style="width:${this.evtColWidths[0]}px">
-              <col style="width:${this.evtColWidths[1]}px">
-              <col style="width:${this.evtColWidths[2]}px">
-              <col>
+              <col style="width:${this.evtColWidths[0]}px" />
+              <col style="width:${this.evtColWidths[1]}px" />
+              <col style="width:${this.evtColWidths[2]}px" />
+              <col />
             </colgroup>
             <thead class="sticky top-0 z-10">
               <tr class="bg-white">
@@ -4119,20 +5207,19 @@ ${argsString}</pre
 				"Agent",
 				"Time",
 				"Event Type"
-			].map((label, col) => lit.html`
-                <th
-                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
-                  style="position:relative;overflow:hidden;"
-                >
-                  ${label}
-                  <div
-                    style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;"
-                    @pointerdown=${(e) => this._onEvtColResizeStart(e, col)}
-                    @pointermove=${(e) => this._onEvtColResizeMove(e)}
-                    @pointerup=${() => this._onEvtColResizeEnd()}
-                    @pointercancel=${() => this._onEvtColResizeEnd()}
-                  ></div>
-                </th>`)}
+			].map((label, col) => lit.html` <th
+                      class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
+                      style="position:relative;overflow:hidden;"
+                    >
+                      ${label}
+                      <div
+                        style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;"
+                        @pointerdown=${(e) => this._onEvtColResizeStart(e, col)}
+                        @pointermove=${(e) => this._onEvtColResizeMove(e)}
+                        @pointerup=${() => this._onEvtColResizeEnd()}
+                        @pointercancel=${() => this._onEvtColResizeEnd()}
+                      ></div>
+                    </th>`)}
                 <th
                   class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
                 >
@@ -4393,8 +5480,14 @@ ${prettyEvent}</pre
             ${messages && messages.length > 0 ? lit.html`
                   <div class="w-full text-xs">
                     <div class="flex bg-gray-50">
-                      <div class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700">Role</div>
-                      <div class="flex-1 px-4 py-2 font-medium text-gray-700">Content</div>
+                      <div
+                        class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700"
+                      >
+                        Role
+                      </div>
+                      <div class="flex-1 px-4 py-2 font-medium text-gray-700">
+                        Content
+                      </div>
                     </div>
                     <div class="divide-y divide-gray-200">
                       ${messages.map((msg) => {
@@ -4519,13 +5612,13 @@ ${prettyEvent}</pre
 				if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
 			}
 			if (key === "threads") {
-				var _this$core6;
-				if (this.selectedMenu !== "threads" && !((_this$core6 = this.core) === null || _this$core6 === void 0 ? void 0 : _this$core6.telemetryDisabled)) trackThreadsTabClicked();
+				var _this$core15;
+				if (previousMenu !== "threads" && !((_this$core15 = this.core) === null || _this$core15 === void 0 ? void 0 : _this$core15.telemetryDisabled)) trackThreadsTabClicked(this.getThreadsTelemetryProps());
 				this.autoSelectLatestThread();
 			}
 			if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
-				var _this$shadowRoot;
-				const scroller = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById("cpk-main-scroll");
+				var _this$shadowRoot2;
+				const scroller = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.getElementById("cpk-main-scroll");
 				if (scroller) scroller.scrollTop = 0;
 			});
 			this.contextMenuOpen = false;
@@ -4825,9 +5918,9 @@ ${prettyEvent}</pre
 			let currentSchema = schema;
 			let def = currentSchema._def;
 			while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
-				var _ref4;
+				var _ref5;
 				if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
-				currentSchema = (_ref4 = def.innerType) !== null && _ref4 !== void 0 ? _ref4 : currentSchema;
+				currentSchema = (_ref5 = def.innerType) !== null && _ref5 !== void 0 ? _ref5 : currentSchema;
 				if (!(currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema._def)) break;
 				def = currentSchema._def;
 			}
@@ -4953,6 +6046,22 @@ ${prettyEvent}</pre
                           ${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
                         </button>
                       </div>
+                      <pre
+                        style="
+                          margin: 0;
+                          max-height: 180px;
+                          overflow: auto;
+                          white-space: pre-wrap;
+                          word-break: break-word;
+                          border-radius: 6px;
+                          border: 1px solid #eeeef4;
+                          background: #f7f7f9;
+                          padding: 10px;
+                          font-size: 11px;
+                          line-height: 1.5;
+                          color: #2d2d30;
+                        "
+                      >${this.formatContextValue(context.value)}</pre>
                     ` : lit.html`
                         <div class="flex items-center justify-center py-4 text-xs text-gray-500">
                           <span>No value available</span>
@@ -4981,7 +6090,7 @@ ${prettyEvent}</pre
 			if (typeof value === "function") return value.toString();
 			try {
 				return JSON.stringify(value, null, 2);
-			} catch (_unused6) {
+			} catch (_unused8) {
 				return String(value);
 			}
 		}
@@ -5029,7 +6138,9 @@ ${prettyEvent}</pre
         <span>Loading latest announcement…</span>
       </div>`;
 			if (!this.announcementHtml) return lit.nothing;
-			return lit.html`<div class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
+			return lit.html`<div
+      class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3"
+    >
       <div
         class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900"
       >
@@ -5048,7 +6159,9 @@ ${prettyEvent}</pre
           ${this.renderIcon("X")}
         </button>
       </div>
-      <div class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}">
+      <div
+        class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}"
+      >
         <div
           class="announcement-content"
           @click=${this.handleAnnouncementContentClick}
@@ -5072,8 +6185,8 @@ ${prettyEvent}</pre
     </div>`;
 		}
 		flushPendingBannerViewed() {
-			var _this$core7;
-			if (!this.pendingBannerViewed || ((_this$core7 = this.core) === null || _this$core7 === void 0 ? void 0 : _this$core7.telemetryDisabled)) {
+			var _this$core16;
+			if (!this.pendingBannerViewed || ((_this$core16 = this.core) === null || _this$core16 === void 0 ? void 0 : _this$core16.telemetryDisabled)) {
 				this.pendingBannerViewed = null;
 				return;
 			}
@@ -5145,8 +6258,9 @@ ${prettyEvent}</pre
 		async convertMarkdownToHtml(markdown) {
 			const renderer = new marked.marked.Renderer();
 			renderer.link = (href, title, text) => {
-				return `<a href="${this.escapeHtmlAttr(this.appendRefParam(href !== null && href !== void 0 ? href : ""))}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
+				return `<a href="${this.escapeHtmlAttr(this.isSafeAnnouncementHref(href !== null && href !== void 0 ? href : "") ? this.appendRefParam(href !== null && href !== void 0 ? href : "") : "#")}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
 			};
+			renderer.html = (html) => escapeHtml(html);
 			renderer.code = (code, lang) => {
 				const safeLang = (lang !== null && lang !== void 0 ? lang : "").replace(/[^a-z0-9-]/gi, "");
 				return `<div class="announcement-code"><pre><code${safeLang ? ` class="language-${safeLang}"` : ""}>${escapeHtml(code)}</code></pre><div class="announcement-code__copy-shield"><button type="button" class="announcement-code__copy" data-copy="${this.encodeBase64(code)}" aria-label="Copy code">Copy</button></div></div>`;
@@ -5156,6 +6270,14 @@ ${prettyEvent}</pre
 				async: false
 			});
 		}
+		isSafeAnnouncementHref(href) {
+			try {
+				const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
+				return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "mailto:";
+			} catch (_unused9) {
+				return false;
+			}
+		}
 		encodeBase64(value) {
 			if (typeof window === "undefined" || typeof window.btoa !== "function") return "";
 			const bytes = new TextEncoder().encode(value);
@@ -5170,20 +6292,26 @@ ${prettyEvent}</pre
 			for (let i = 0; i < decoded.length; i++) bytes[i] = decoded.charCodeAt(i);
 			return new TextDecoder().decode(bytes);
 		}
-		appendRefParam(href) {
+		appendRefParam(href, ref = "cpk-inspector") {
 			try {
-				var _this$core8;
+				var _this$core17;
+				const isRootRelative = href.startsWith("/") && !href.startsWith("//");
 				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$core8 = this.core) === null || _this$core8 === void 0 ? void 0 : _this$core8.telemetryDisabled)) {
+				if (!url.searchParams.has("ref")) url.searchParams.append("ref", ref);
+				if (!url.searchParams.has("posthog_distinct_id") && !((_this$core17 = this.core) === null || _this$core17 === void 0 ? void 0 : _this$core17.telemetryDisabled) && this.isCopilotKitDestination(url)) {
 					const distinctId = getTelemetryDistinctIdForUrl();
 					if (distinctId) url.searchParams.append("posthog_distinct_id", distinctId);
 				}
+				if (isRootRelative) return `${url.pathname}${url.search}${url.hash}`;
 				return url.toString();
-			} catch (_unused7) {
+			} catch (_unused10) {
 				return href;
 			}
 		}
+		isCopilotKitDestination(url) {
+			const hostname = url.hostname.toLowerCase();
+			return hostname === "copilotkit.ai" || hostname.endsWith(".copilotkit.ai");
+		}
 		escapeHtmlAttr(value) {
 			return escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 		}
@@ -5195,7 +6323,7 @@ ${prettyEvent}</pre
 				const parsed = JSON.parse(raw);
 				if (parsed && typeof parsed.timestamp === "string") return parsed.timestamp;
 				return null;
-			} catch (_unused8) {}
+			} catch (_unused11) {}
 			return null;
 		}
 		persistAnnouncementTimestamp(timestamp) {
@@ -5203,7 +6331,7 @@ ${prettyEvent}</pre
 			try {
 				const payload = JSON.stringify({ timestamp });
 				window.localStorage.setItem(ANNOUNCEMENT_STORAGE_KEY, payload);
-			} catch (_unused9) {}
+			} catch (_unused12) {}
 		}
 		markAnnouncementSeen() {
 			this.hasUnseenAnnouncement = false;
@@ -5957,6 +7085,8 @@ ${prettyEvent}</pre
 	defineWebInspector();
 
 //#endregion
+exports.CpkThreadInspector = CpkThreadInspector;
+exports.THREAD_INSPECTOR_TAG = THREAD_INSPECTOR_TAG;
 exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
 exports.WebInspectorElement = WebInspectorElement;
 exports.defineWebInspector = defineWebInspector;