@copilotkit/web-inspector 1.61.2 → 1.62.0

package/dist/index.cjs

@@ -14,6 +14,7 @@ let _copilotkit_core = require("@copilotkit/core");
 
 //#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;
@@ -354,28 +355,30 @@ var CpkThreadList = class extends lit.LitElement {
           ${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"
@@ -400,10 +403,11 @@ var CpkThreadList = class extends lit.LitElement {
     `;
 	}
 };
-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 = {};
@@ -411,7 +415,8 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		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;
@@ -428,12 +433,15 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		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;
@@ -464,6 +472,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	static {
 		this.properties = {
 			threadId: { attribute: false },
+			provider: { attribute: false },
 			thread: { attribute: false },
 			runtimeUrl: { attribute: false },
 			headers: { attribute: false },
@@ -472,6 +481,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 			agentEventsInput: { attribute: false },
 			liveMessageVersion: { attribute: false },
 			_tab: { state: true },
+			_fetchedMetadata: { state: true },
 			_conversation: { state: true },
 			_fetchedEvents: { state: true },
 			_fetchedState: { state: true },
@@ -497,22 +507,52 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	static {
 		this.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"
 			}
 		];
 	}
+	static {
+		this.providerIds = /* @__PURE__ */ new WeakMap();
+	}
+	static {
+		this.nextProviderId = 1;
+	}
+	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) {
@@ -530,10 +570,10 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	}
 	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);
 		}
@@ -665,6 +705,42 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
       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
@@ -885,6 +961,81 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
       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 {
@@ -1094,26 +1245,21 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
   `;
 	}
 	updated(_changed) {
-		if (this.threadId !== this._lastFetchedThreadId) {
-			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?.abort();
-			this._messagesAbort = null;
-			this._eventsAbort?.abort();
-			this._eventsAbort = null;
-			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) {
 			this._lastSeenLiveMessageVersion = this.liveMessageVersion;
 			this._messagesAbort?.abort();
@@ -1121,6 +1267,70 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 			this.fetchMessages(this.threadId, true);
 		}
 	}
+	canFetchMessages() {
+		return !!this.provider?.getMessages || !!this.runtimeUrl && this.threadInspectionAvailable;
+	}
+	canFetchEvents() {
+		return !!this.provider?.getEvents || !!this.runtimeUrl && this.threadInspectionAvailable;
+	}
+	canFetchState() {
+		return !!this.provider?.getState || !!this.runtimeUrl && this.threadInspectionAvailable;
+	}
+	currentLoadKey() {
+		return [
+			this.threadId ?? "thread:none",
+			CpkThreadInspector.providerLoadKey(this.provider),
+			`runtime:${this.runtimeUrl}`,
+			`headers:${CpkThreadInspector.headersLoadKey(this.headers)}`,
+			`inspect:${this.threadInspectionAvailable ? "1" : "0"}`
+		].join("||");
+	}
+	resetLoadedThreadData() {
+		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?.abort();
+		this._metadataAbort = null;
+		this._messagesAbort?.abort();
+		this._messagesAbort = null;
+		this._eventsAbort?.abort();
+		this._eventsAbort = null;
+		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) {
+		if (!this.provider?.getThreadMetadata) return;
+		this._metadataAbort?.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.
 	*
@@ -1132,10 +1342,11 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	* so users see an explicit loading indicator on first load.
 	*/
 	async fetchMessages(threadId, silent = false) {
-		if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+		if (!this.canFetchMessages()) {
 			if (!silent) this._conversation = [];
 			return;
 		}
+		this._messagesAbort?.abort();
 		const controller = new AbortController();
 		this._messagesAbort = controller;
 		if (!silent) {
@@ -1143,15 +1354,9 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 			this._messagesError = null;
 		}
 		try {
-			const res = await fetch(this.getThreadInspectionUrl(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();
+			const messages = this.provider?.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) {
@@ -1163,64 +1368,62 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		}
 	}
 	async fetchEvents(threadId) {
-		this._eventsNotAvailable = false;
-		if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+		if (!this.canFetchEvents()) {
 			this._fetchedEvents = null;
 			return;
 		}
+		this._eventsAbort?.abort();
 		const controller = new AbortController();
 		this._eventsAbort = controller;
 		this._loadingEvents = true;
 		this._eventsError = null;
 		try {
-			const res = await fetch(this.getThreadInspectionUrl(threadId, "events"), {
-				headers: { ...this.headers },
-				signal: controller.signal
-			});
+			const result = this.provider?.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) {
+		if (!this.canFetchState()) {
 			this._fetchedState = null;
 			return;
 		}
+		this._stateAbort?.abort();
 		const controller = new AbortController();
 		this._stateAbort = controller;
 		this._loadingState = true;
 		this._stateError = null;
 		try {
-			const res = await fetch(this.getThreadInspectionUrl(threadId, "state"), {
-				headers: { ...this.headers },
-				signal: controller.signal
-			});
+			const result = this.provider?.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 ?? null;
+			this._fetchedState = result.state ?? null;
 		} catch (err) {
 			if (err instanceof Error && err.name === "AbortError") return;
 			if (this.threadId !== threadId) return;
@@ -1230,6 +1433,38 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 			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) {
+		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: (await res.json()).state ?? null
+		};
+	}
 	getThreadInspectionUrl(threadId, resource) {
 		return `${this.runtimeUrl.replace(/\/+$/, "")}/threads/${encodeURIComponent(threadId)}/${resource}`;
 	}
@@ -1245,7 +1480,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		else if (msg.role === "assistant") {
 			if (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", {
@@ -1258,6 +1493,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 						__raw: tc.args
 					};
 				}
+				else args = tc.args;
 				const item = {
 					id: tc.id,
 					type: "tool_call",
@@ -1301,15 +1537,232 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		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 ?? rest,
+				sourceIndex: index + 1,
+				rawEvent: event
 			};
 		});
 	}
+	get activeTimelineItems() {
+		return this.timelineItemsForEvents(this.activeEvents);
+	}
+	timelineItemsForEvents(events) {
+		if (this._timelineItemsCache?.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) => 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) => {
+			const sourceIndex = sourceIndexFor(event);
+			const key = readString(event.payload, [
+				"messageId",
+				"message_id",
+				"id"
+			]) ?? `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) => {
+			const sourceIndex = sourceIndexFor(event);
+			const key = readString(event.payload, [
+				"toolCallId",
+				"tool_call_id",
+				"id",
+				"callId"
+			]) ?? `tool-${sourceIndex}`;
+			let item = toolItems.get(key);
+			if (!item) {
+				item = {
+					id: `tool-${key}`,
+					kind: "tool",
+					title: readString(event.payload, [
+						"toolCallName",
+						"toolName",
+						"name",
+						"functionName"
+					]) ?? "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") {
+				items.push({
+					id: `${type}-${sourceIndex}`,
+					kind: "warning",
+					title: "Run error",
+					body: readString(payload, [
+						"message",
+						"error",
+						"description"
+					]) ?? "",
+					timestamp: event.timestamp,
+					sourceIndex,
+					severity: "error",
+					details: payload
+				});
+				continue;
+			}
+			if (type === "TEXT_MESSAGE_START") {
+				ensureMessage(event, readString(payload, ["role"]) ?? "assistant");
+				continue;
+			}
+			if (type === "TEXT_MESSAGE_CONTENT") {
+				const item = ensureMessage(event, readString(payload, ["role"]) ?? "assistant");
+				item.body = `${item.body ?? ""}${readString(payload, [
+					"delta",
+					"content",
+					"text"
+				]) ?? ""}`;
+				continue;
+			}
+			if (type === "TEXT_MESSAGE_END") {
+				ensureMessage(event, readString(payload, ["role"]) ?? "assistant");
+				continue;
+			}
+			if (type === "TOOL_CALL_START") {
+				ensureTool(event);
+				continue;
+			}
+			if (type === "TOOL_CALL_ARGS") {
+				const item = ensureTool(event);
+				const chunk = readString(payload, [
+					"args",
+					"arguments",
+					"delta"
+				]) ?? (typeof payload.args === "object" ? JSON.stringify(payload.args) : null);
+				if (chunk) {
+					item.rawArgs = `${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 {
+					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 {
+						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 = [];
@@ -1347,7 +1800,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		};
 	}
 	get duration() {
-		const t = this.thread;
+		const t = this.metadata;
 		if (!t?.createdAt || !t?.updatedAt) return "—";
 		const ms = new Date(t.updatedAt).getTime() - new Date(t.createdAt).getTime();
 		if (ms < 0) return "—";
@@ -1370,7 +1823,18 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	}
 	get activeEvents() {
 		if (this._eventsNotAvailable) return [];
-		return this._fetchedEvents ?? this.agentEventsInput ?? [];
+		const events = this._fetchedEvents ?? this.agentEventsInput ?? [];
+		if (events.every((event) => event.sourceIndex != null)) return events;
+		if (this._liveEventsWithSourceIndexCache?.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() {
 		if (this._stateNotAvailable) return null;
@@ -1384,6 +1848,9 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		if (!id) return "—";
 		return id.length > 20 ? id.slice(0, 8) + "…" : id;
 	}
+	get metadata() {
+		return this._fetchedMetadata ?? this.thread ?? null;
+	}
 	fmtTime(dateStr) {
 		if (!dateStr) return "—";
 		const d = new Date(dateStr);
@@ -1403,7 +1870,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
           <!-- 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" : ""}"
@@ -1415,18 +1882,19 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
             </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>
 
@@ -1454,6 +1922,116 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
           ${this.renderDetailPanel()}
         </div>
       </div>
+    `;
+	}
+	renderMetadataStrip() {
+		const metadata = this.metadata;
+		const pills = [
+			{
+				label: "Thread",
+				value: metadata?.id ?? this.threadId
+			},
+			{
+				label: "Agent",
+				value: metadata?.agentId
+			},
+			{
+				label: "End user",
+				value: metadata?.endUserId ?? metadata?.createdById
+			},
+			{
+				label: "Status",
+				value: 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) => lit.html`
+            <span class="cpk-td__metadata-pill" title=${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(() => {
+			(this.shadowRoot?.querySelector(`[data-source-index="${sourceIndex}"]`))?.scrollIntoView?.({ 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() {
@@ -1480,7 +2058,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
           <span>No messages yet</span>
         </div>
       `;
-		return this.cachedPanelTpl("conversation", [
+		return this.cachedPanelTpl("timeline-fallback", [
 			this._conversation,
 			this._expandedTools,
 			this._expandedMessages
@@ -1498,8 +2076,8 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	* 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,
@@ -1507,6 +2085,11 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 		});
 		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":
@@ -1527,7 +2110,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
 	}
 	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;
@@ -1673,7 +2256,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
       >`;
@@ -1704,11 +2287,11 @@ ${(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) => {
 				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
@@ -1718,7 +2301,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))}</pre
             >
           </div>
         `;
@@ -1753,29 +2336,42 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 	}
 	renderDetailPanel() {
 		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?.id)}</span
+          >${this.shortId(metadata?.id)}</span
         >
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Name</span>
-        <span class="cpk-tdp__value">${this.thread?.name ?? "—"}</span>
+        <span class="cpk-tdp__value">${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 ?? "—"}</span
+          >${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?.endUserId ?? "—"}</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?.createdById ?? "—"}</span
+          >${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 ?? "—"}</span
         >
       </div>
 
@@ -1785,11 +2381,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.thread?.createdAt)}</span>
+        <span class="cpk-tdp__value">${this.fmtTime(metadata?.createdAt)}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Updated</span>
-        <span class="cpk-tdp__value">${this.fmtTime(this.thread?.updatedAt)}</span>
+        <span class="cpk-tdp__value">${this.fmtTime(metadata?.updatedAt)}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Duration</span>
@@ -1815,7 +2411,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
     `;
 	}
 };
+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) {
@@ -2380,6 +2978,7 @@ var WebInspectorElement = class extends lit.LitElement {
 			},
 			onHeadersChanged: ({ headers }) => {
 				this.updateOwnedThreadStoreHeaders(headers);
+				this.requestUpdate();
 			},
 			onError: ({ code, error }) => {
 				this.lastCoreError = {
@@ -2391,6 +2990,9 @@ var WebInspectorElement = class extends lit.LitElement {
 			onAgentsChanged: ({ agents }) => {
 				this.processAgentsChanged(agents);
 			},
+			onAgentRunStarted: ({ agent }) => {
+				if (agent?.agentId) this.subscribeToAgent(agent);
+			},
 			onContextChanged: ({ context }) => {
 				this.contextStore = this.normalizeContextStore(context);
 				this.requestUpdate();
@@ -4359,7 +4961,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>
@@ -4371,7 +4975,8 @@ ${argsString}</pre
                   href=${require_telemetry.TELEMETRY_DOCS_URL}
                   target="_blank"
                   rel="noopener"
-                >Learn more →</a>
+                  >Learn more →</a
+                >
               </div>
             </div>
           </div>
@@ -4901,10 +5506,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">
@@ -4912,20 +5517,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"
                 >
@@ -5182,8 +5786,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) => {
@@ -5820,7 +6430,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"
       >
@@ -5839,7 +6451,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}
@@ -6027,6 +6641,8 @@ function defineWebInspector() {
 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;