@copilotkit/web-inspector 1.56.5 → 1.57.0

package/dist/index.mjs

@@ -4,11 +4,11 @@ import inspector_logo_icon_default from "./assets/inspector-logo-icon.mjs";
 import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, keepPositionWithinViewport, updateAnchorFromPosition, updateSizeFromElement } from "./lib/context-helpers.mjs";
 import { isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadInspectorState, saveInspectorState } from "./lib/persistence.mjs";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { marked } from "marked";
 import { icons } from "lucide";
-import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkit/core";
+import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectThreads, ɵselectThreadsError } from "@copilotkit/core";
 
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
@@ -26,7 +26,7 @@ const DEFAULT_BUTTON_SIZE = {
 };
 const DEFAULT_WINDOW_SIZE = {
 	width: 840,
-	height: 560
+	height: 700
 };
 const DOCKED_LEFT_WIDTH = 500;
 const MAX_AGENT_EVENTS = 200;
@@ -52,11 +52,1765 @@ const AGENT_EVENT_TYPES = [
 	"REASONING_MESSAGE_CONTENT",
 	"REASONING_MESSAGE_END",
 	"REASONING_END",
-	"REASONING_ENCRYPTED_VALUE"
+	"REASONING_ENCRYPTED_VALUE",
+	"ACTIVITY_SNAPSHOT",
+	"ACTIVITY_DELTA"
 ];
-var WebInspectorElement = class extends LitElement {
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const highlightedJsonCache = /* @__PURE__ */ new WeakMap();
+function highlightedJson(obj) {
+	if (typeof obj === "object" && obj !== null) {
+		const cached = highlightedJsonCache.get(obj);
+		if (cached !== void 0) return cached;
+	}
+	const colors = {
+		key: "#5558B2",
+		str: "#189370",
+		num: "#996300",
+		bool: "#c0333a",
+		nil: "#838389"
+	};
+	const json = JSON.stringify(obj, null, 2);
+	if (!json) return "";
+	const parts = [];
+	let lastIndex = 0;
+	const re = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;
+	let match;
+	while ((match = re.exec(json)) !== null) {
+		parts.push(escapeHtml(json.slice(lastIndex, match.index)));
+		const m = match[0];
+		let color = colors.num;
+		if (m.startsWith("\"")) color = m.trimEnd().endsWith(":") ? colors.key : colors.str;
+		else if (m === "true" || m === "false") color = colors.bool;
+		else if (m === "null") color = colors.nil;
+		parts.push(`<span style="color:${color}">${escapeHtml(m)}</span>`);
+		lastIndex = match.index + m.length;
+	}
+	parts.push(escapeHtml(json.slice(lastIndex)));
+	const result = parts.join("");
+	if (typeof obj === "object" && obj !== null) highlightedJsonCache.set(obj, result);
+	return result;
+}
+function eventColors(type) {
+	if (type.startsWith("TEXT_MESSAGE")) return {
+		bg: "#EEE6FE",
+		fg: "#57575B"
+	};
+	if (type.startsWith("TOOL_CALL")) return {
+		bg: "rgba(133,236,206,0.15)",
+		fg: "#189370"
+	};
+	if (type.startsWith("STATE")) return {
+		bg: "rgba(190,194,255,0.102)",
+		fg: "#5558B2"
+	};
+	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"
+	};
+}
+function formatTimestamp(ts) {
+	const date = typeof ts === "number" ? new Date(ts) : new Date(ts);
+	if (Number.isNaN(date.getTime())) return "";
+	const ms = date.getMilliseconds().toString().padStart(3, "0");
+	return date.toLocaleTimeString("en-US", {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hour12: false
+	}) + "." + ms;
+}
+var CpkThreadList = class extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this.threads = [];
+		this.selectedThreadId = null;
+		this.errorMessage = null;
+		this._query = "";
+		this.onSearchInput = (event) => {
+			this._query = event.target.value;
+		};
+	}
+	static {
+		this.properties = {
+			threads: { attribute: false },
+			selectedThreadId: { attribute: false },
+			errorMessage: { attribute: false },
+			_query: { state: true }
+		};
+	}
+	static {
+		this.styles = 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");
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .cpk-tl {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      background: #f7f7f9;
+    }
+
+    /* ── Search ── */
+    .cpk-tl__search {
+      padding: 10px 12px;
+      border-bottom: 1px solid #dbdbe5;
+      flex-shrink: 0;
+    }
+
+    .cpk-tl__search-input {
+      width: 100%;
+      box-sizing: border-box;
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 12px;
+      padding: 7px 10px;
+      border-radius: 6px;
+      border: 1px solid #dbdbe5;
+      background: #ffffff;
+      color: #010507;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .cpk-tl__search-input:focus {
+      border-color: #bec2ff;
+    }
+
+    /* ── List ── */
+    .cpk-tl__list {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    /* ── Thread item ── */
+    .cpk-tl__item {
+      padding: 11px 13px;
+      cursor: pointer;
+      border-bottom: 1px solid #e9e9ef;
+      border-left: 3px solid transparent;
+      transition: background 0.1s;
+    }
+
+    .cpk-tl__item:hover {
+      background: #ffffff;
+    }
+
+    .cpk-tl__item--active {
+      background: #bec2ff1a;
+      border-left-color: #bec2ff;
+    }
+
+    .cpk-tl__item--active:hover {
+      background: #bec2ff33;
+    }
+
+    .cpk-tl__row1 {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 3px;
+    }
+
+    .cpk-tl__name {
+      font-size: 12px;
+      font-weight: 500;
+      color: #010507;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .cpk-tl__name--unnamed {
+      color: #838389;
+      font-style: italic;
+      font-weight: 400;
+    }
+
+    .cpk-tl__time {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      color: #838389;
+      flex-shrink: 0;
+    }
+
+    .cpk-tl__meta {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .cpk-tl__pill {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      padding: 1px 7px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 500;
+      white-space: nowrap;
+      background: #eee6fe;
+      color: #57575b;
+    }
+
+    /* ── Empty state ── */
+    .cpk-tl__empty {
+      padding: 32px 16px;
+      text-align: center;
+      color: #838389;
+      font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .cpk-tl__empty-icon {
+      color: #c0c0c8;
+    }
+  `;
+	}
+	relativeTime(dateStr) {
+		const date = new Date(dateStr);
+		const diffMs = Date.now() - date.getTime();
+		const diffSec = Math.floor(diffMs / 1e3);
+		if (diffSec < 60) return `${diffSec}s ago`;
+		const diffMin = Math.floor(diffSec / 60);
+		if (diffMin < 60) return `${diffMin}m ago`;
+		const diffH = Math.floor(diffMin / 60);
+		if (diffH < 24) return `${diffH}h ago`;
+		return `${Math.floor(diffH / 24)}d ago`;
+	}
+	get filtered() {
+		const q = this._query.toLowerCase();
+		if (!q) return this.threads;
+		return this.threads.filter((t) => (t.name?.toLowerCase().includes(q) ?? false) || t.agentId.toLowerCase().includes(q) || t.id.toLowerCase().includes(q));
+	}
+	onThreadClick(threadId) {
+		this.dispatchEvent(new CustomEvent("threadSelected", {
+			detail: threadId,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const filtered = this.filtered;
+		return html`
+      <div class="cpk-tl">
+        <!-- Search -->
+        <div class="cpk-tl__search">
+          <input
+            type="text"
+            placeholder="Search threads…"
+            .value=${this._query}
+            @input=${this.onSearchInput}
+            class="cpk-tl__search-input"
+          />
+        </div>
+
+        <!-- Thread list -->
+        <div class="cpk-tl__list">
+          ${filtered.map((thread) => html`
+              <div
+                class="cpk-tl__item ${this.selectedThreadId === thread.id ? "cpk-tl__item--active" : ""}"
+                @click=${() => this.onThreadClick(thread.id)}
+              >
+                <div class="cpk-tl__row1">
+                  <span
+                    class="cpk-tl__name ${!thread.name ? "cpk-tl__name--unnamed" : ""}"
+                    >${thread.name ?? "Untitled"}</span
+                  >
+                  <span class="cpk-tl__time"
+                    >${this.relativeTime(thread.updatedAt)}</span
+                  >
+                </div>
+                <div class="cpk-tl__meta">
+                  <span class="cpk-tl__pill">${thread.agentId}</span>
+                </div>
+              </div>
+            `)}
+          ${filtered.length === 0 ? html`
+                <div class="cpk-tl__empty">
+                  ${this.errorMessage ? 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"
+                          >
+                            <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>
+                          </div>
+                        ` : this.threads.length === 0 ? 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"
+                            >
+                              <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>
+                            No threads yet
+                          ` : html`
+                            No threads match your search.
+                          `}
+                </div>
+              ` : nothing}
+        </div>
+      </div>
+    `;
+	}
+};
+var ɵCpkThreadDetails = class ɵCpkThreadDetails extends LitElement {
+	constructor(..._args2) {
+		super(..._args2);
+		this.threadId = null;
+		this.thread = null;
+		this.runtimeUrl = "";
+		this.headers = {};
+		this.agentStateInput = null;
+		this.agentEventsInput = [];
+		this.liveMessageVersion = 0;
+		this._tab = "conversation";
+		this._conversation = [];
+		this._fetchedEvents = null;
+		this._fetchedState = null;
+		this._loadingMessages = false;
+		this._loadingEvents = false;
+		this._loadingState = false;
+		this._messagesError = null;
+		this._eventsError = null;
+		this._stateError = null;
+		this._expandedTools = /* @__PURE__ */ new Set();
+		this._expandedMessages = /* @__PURE__ */ new Set();
+		this._showDetailPanel = false;
+		this._detailPanelWidth = 250;
+		this._eventsNotAvailable = false;
+		this._stateNotAvailable = false;
+		this._panelInitializing = false;
+		this._activatedTabs = new Set(["conversation"]);
+		this._panelTplCache = /* @__PURE__ */ new Map();
+		this._eventsFetched = false;
+		this._stateFetched = false;
+		this._lastFetchedThreadId = null;
+		this._lastSeenLiveMessageVersion = 0;
+		this._messagesAbort = null;
+		this._eventsAbort = null;
+		this._stateAbort = null;
+		this._dividerResizing = false;
+		this._dividerPointerId = -1;
+		this._dividerStartX = 0;
+		this._dividerStartWidth = 0;
+		this.onDetailDividerDown = (event) => {
+			this._dividerResizing = true;
+			this._dividerPointerId = event.pointerId;
+			this._dividerStartX = event.clientX;
+			this._dividerStartWidth = this._detailPanelWidth;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			event.preventDefault();
+		};
+		this.onDetailDividerMove = (event) => {
+			if (!this._dividerResizing || this._dividerPointerId !== event.pointerId) return;
+			const delta = this._dividerStartX - event.clientX;
+			this._detailPanelWidth = Math.max(160, Math.min(400, this._dividerStartWidth + delta));
+		};
+		this.onDetailDividerUp = (event) => {
+			if (this._dividerPointerId !== event.pointerId) return;
+			const target = event.currentTarget;
+			if (target.hasPointerCapture(this._dividerPointerId)) target.releasePointerCapture(this._dividerPointerId);
+			this._dividerResizing = false;
+		};
+	}
+	static {
+		this.properties = {
+			threadId: { attribute: false },
+			thread: { attribute: false },
+			runtimeUrl: { attribute: false },
+			headers: { attribute: false },
+			agentStateInput: { attribute: false },
+			agentEventsInput: { attribute: false },
+			liveMessageVersion: { attribute: false },
+			_tab: { state: true },
+			_conversation: { state: true },
+			_fetchedEvents: { state: true },
+			_fetchedState: { state: true },
+			_loadingMessages: { state: true },
+			_loadingEvents: { state: true },
+			_loadingState: { state: true },
+			_messagesError: { state: true },
+			_eventsError: { state: true },
+			_stateError: { state: true },
+			_expandedTools: { state: true },
+			_expandedMessages: { state: true },
+			_showDetailPanel: { state: true },
+			_detailPanelWidth: { state: true },
+			_eventsNotAvailable: { state: true },
+			_stateNotAvailable: { state: true },
+			_panelInitializing: { state: true },
+			_activatedTabs: { state: true }
+		};
+	}
+	static {
+		this.COLLAPSE_THRESHOLD = 800;
+	}
+	static {
+		this.TAB_LIST = [
+			{
+				id: "conversation",
+				label: "Conversation"
+			},
+			{
+				id: "agent-state",
+				label: "Agent State"
+			},
+			{
+				id: "ag-ui-events",
+				label: "AG-UI Events"
+			}
+		];
+	}
+	renderTabContent(id) {
+		if (id === "conversation") return this.renderConversation();
+		if (id === "agent-state") return this.renderState();
+		return this.renderEvents();
+	}
+	activateTab(id) {
+		if (this._tab === id) return;
+		const isFirstActivation = !this._activatedTabs.has(id);
+		this._tab = id;
+		if (isFirstActivation) {
+			this._panelInitializing = true;
+			requestAnimationFrame(() => {
+				this._activatedTabs = new Set([...this._activatedTabs, id]);
+				this._panelInitializing = false;
+			});
+		}
+		this.maybeFetchTabData(id);
+	}
+	maybeFetchTabData(id) {
+		if (!this.threadId) return;
+		if (id === "ag-ui-events" && !this._eventsFetched) {
+			this._eventsFetched = true;
+			this.fetchEvents(this.threadId);
+		} else if (id === "agent-state" && !this._stateFetched) {
+			this._stateFetched = true;
+			this.fetchState(this.threadId);
+		}
+	}
+	static {
+		this.styles = 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 ────────────────────────────────────────────────────────── */
+    :host {
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+    }
+
+    .cpk-td {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 13px;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #ffffff;
+    }
+
+    /* ── Left area ───────────────────────────────────────────────────── */
+    .cpk-td__left {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* ── Tab bar header ──────────────────────────────────────────────── */
+    .cpk-td__tabs-header {
+      /* No top/right padding so tabs and toggle sit flush against the
+         top and right edges of the inspector. */
+      padding: 0 0 0 12px;
+      border-bottom: 1px solid #dbdbe5;
+      flex-shrink: 0;
+      display: flex;
+      align-items: stretch;
+    }
+
+    .cpk-td__tab-group {
+      display: flex;
+      gap: 0;
+      margin-bottom: -1px;
+      /* Allow the tab list to shrink rather than pushing the panel-toggle
+         button past the right edge of the inspector when horizontal space
+         gets tight (the drawer being open eats noticeably into width). */
+      min-width: 0;
+      flex-shrink: 1;
+      overflow: hidden;
+    }
+
+    .cpk-td__tab {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 11px;
+      font-weight: 500;
+      padding: 10px 12px;
+      border: none;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+      background: transparent;
+      color: #838389;
+      transition:
+        color 0.12s,
+        border-color 0.12s;
+      white-space: nowrap;
+    }
+
+    .cpk-td__tab:hover {
+      color: #010507;
+    }
+
+    .cpk-td__tab--active {
+      color: #010507;
+      border-bottom-color: #bec2ff;
+    }
+
+    /* Toggle is a separate control, not a tab — so it does NOT use the
+       tabs' bottom-border active indicator. Instead, a subtle filled
+       state communicates "the drawer is open," and a vertical separator
+       on the left visually divorces it from the tab group. */
+    .cpk-td__panel-toggle {
+      margin-left: auto;
+      align-self: stretch;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 12px;
+      border: none;
+      border-left: 1px solid #dbdbe5;
+      background: transparent;
+      color: #838389;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition:
+        color 0.12s,
+        background 0.12s;
+    }
+    .cpk-td__panel-toggle:hover {
+      color: #010507;
+      background: #f4f4f9;
+    }
+    .cpk-td__panel-toggle--active {
+      color: #5558b2;
+      background: #eee6fe;
+    }
+    .cpk-td__panel-toggle--active:hover {
+      background: #e4d8fc;
+    }
+
+    /* ── Scrollable content ──────────────────────────────────────────── */
+    .cpk-td__content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    /* Pin direct children so expanded tool bodies don't get flex-shrunk. */
+    .cpk-td__content > * {
+      flex-shrink: 0;
+    }
+
+    /*
+     * Each tab's content is wrapped in this panel so the keep-mounted
+     * inactive panels can be hidden via display:none without disturbing
+     * the gap between visible siblings. The flex column + gap gives each
+     * conversation item / event row breathing room (the cpk-td__content
+     * rule above no longer reaches them now that they are nested inside
+     * the per-panel wrapper).
+     */
+    .cpk-td__panel {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .cpk-td__panel > * {
+      flex-shrink: 0;
+    }
+
+    /* ── Empty state ─────────────────────────────────────────────────── */
+    .cpk-td__empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      color: #838389;
+      font-size: 13px;
+      padding: 40px 0;
+    }
+
+    .cpk-td__empty-hint {
+      font-size: 11px;
+      color: #838389;
+      text-align: center;
+      max-width: 220px;
+      line-height: 1.5;
+    }
+
+    /* ── Status messages ─────────────────────────────────────────────── */
+    .cpk-td__status {
+      padding: 16px;
+      font-size: 12px;
+      color: #838389;
+      text-align: center;
+    }
+
+    .cpk-td__status--error {
+      color: #c0333a;
+    }
+
+    /* ── Conversation bubbles ────────────────────────────────────────── */
+    .cpk-td__bubble {
+      display: flex;
+      margin-bottom: 2px;
+    }
+
+    .cpk-td__bubble--user {
+      justify-content: flex-end;
+    }
+
+    .cpk-td__bubble--assistant {
+      justify-content: flex-start;
+    }
+
+    .cpk-td__bubble-inner {
+      padding: 9px 14px;
+      max-width: 75%;
+      font-size: 13px;
+      line-height: 1.55;
+    }
+
+    .cpk-td__bubble-inner--user {
+      background: #eee6fe;
+      color: #57575b;
+      border-radius: 10px 10px 3px 10px;
+    }
+
+    .cpk-td__show-more {
+      display: inline-block;
+      margin-top: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      color: #57575b;
+      cursor: pointer;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    .cpk-td__bubble-inner--assistant {
+      background: #f7f7f9;
+      color: #010507;
+      border-radius: 10px 10px 10px 3px;
+      border: 1px solid #e9e9ef;
+    }
+
+    /* ── Tool call blocks ────────────────────────────────────────────── */
+    .cpk-td__tool-block {
+      border: 1px solid #e9e9ef;
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .cpk-td__tool-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      background: rgba(133, 236, 206, 0.15);
+      cursor: pointer;
+      font-size: 11px;
+      user-select: none;
+    }
+
+    .cpk-td__tool-header:hover {
+      background: rgba(133, 236, 206, 0.22);
+    }
+
+    .cpk-td__tool-name {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      font-weight: 500;
+      color: #189370;
+      text-transform: uppercase;
+      flex: 1;
+    }
+
+    .cpk-td__tool-status {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      text-transform: uppercase;
+      color: #189370;
+    }
+
+    .cpk-td__tool-status--pending {
+      color: #996300;
+    }
+
+    .cpk-td__tool-chevron {
+      color: #838389;
+      font-size: 10px;
+    }
+
+    .cpk-td__tool-body {
+      padding: 8px 10px;
+      border-top: 1px solid #e9e9ef;
+      background: #ffffff;
+    }
+
+    .cpk-td__tool-section-label {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      font-weight: 500;
+      color: #838389;
+      text-transform: uppercase;
+      margin-bottom: 4px;
+      letter-spacing: 0.3px;
+    }
+
+    .cpk-td__tool-pre {
+      margin: 0;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      background: #f7f7f9;
+      padding: 6px 8px;
+      border-radius: 4px;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #010507;
+      line-height: 1.6;
+    }
+
+    /* ── Tool call group ─────────────────────────────────────────────── */
+    .cpk-td__tool-group {
+      border: 1px solid #e9e9ef;
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .cpk-td__tool-group-header {
+      padding: 5px 10px;
+      background: rgba(133, 236, 206, 0.15);
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      color: #189370;
+      text-transform: uppercase;
+      font-weight: 500;
+      border-bottom: 1px solid #e9e9ef;
+    }
+
+    .cpk-td__tool-group .cpk-td__tool-block {
+      border: none;
+      border-bottom: 1px solid #e9e9ef;
+      border-radius: 0;
+    }
+
+    .cpk-td__tool-group .cpk-td__tool-block:last-child {
+      border-bottom: none;
+    }
+
+    /* ── Inline chips (reasoning / state update) ─────────────────────── */
+    .cpk-td__inline-chip {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 0;
+      color: #838389;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      text-transform: uppercase;
+    }
+
+    .cpk-td__inline-chip::before,
+    .cpk-td__inline-chip::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: #e9e9ef;
+    }
+
+    /* ── Generative UI ──────────────────────────────────────────────── */
+    @keyframes cpk-genui-enter {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .cpk-td__genui {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 4px 16px 8px;
+      animation: cpk-genui-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+    }
+
+    .cpk-td__genui-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: #eee6fe;
+      color: #57575b;
+      font-size: 10px;
+      font-weight: 600;
+      align-self: flex-start;
+    }
+
+    .cpk-td__genui-card {
+      overflow: hidden;
+      border-radius: 12px;
+      border: 1px solid #e2e8f0;
+      background: #fff;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+    }
+
+    .cpk-td__genui-placeholder {
+      padding: 8px 12px;
+      border-radius: 8px;
+      border: 1px solid #ede9fe;
+      background: #f5f3ff;
+      color: #7c3aed;
+      font-size: 11px;
+    }
+
+    /* ── AG-UI Events ────────────────────────────────────────────────── */
+    .cpk-td__event {
+      flex-shrink: 0;
+      border: 1px solid #e9e9ef;
+      border-radius: 6px;
+      overflow: hidden;
+      /*
+       * content-visibility: auto lets the browser skip layout + paint for
+       * off-screen events while keeping them in the DOM (so scroll size
+       * stays correct). Without this, switching back to AG-UI Events on a
+       * thread with hundreds of events triggers a full layout pass over
+       * every event row, which on Martha's intelligence-backed example
+       * shows up as a multi-second freeze each time the panel becomes
+       * visible. The intrinsic-size hint avoids the visible jump as the
+       * browser swaps in real heights when items scroll into view.
+       */
+      content-visibility: auto;
+      contain-intrinsic-size: 0 80px;
+    }
+
+    .cpk-td__event-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 10px;
+    }
+
+    .cpk-td__event-type {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    .cpk-td__event-time {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      color: #838389;
+    }
+
+    .cpk-td__event-payload {
+      margin: 0;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #57575b;
+      padding: 8px 10px;
+      border-top: 1px solid #e9e9ef;
+    }
+
+    /* ── JSON block (agent state) ────────────────────────────────────── */
+    .cpk-td__json-block {
+      margin: 0;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 11px;
+      line-height: 1.8;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #57575b;
+    }
+
+    /* ── Resize divider ──────────────────────────────────────────────── */
+    /* Floats over the drawer's left edge so the toggle and the drawer
+       touch directly without a 4px flex-gap between them. The hit zone
+       is wider than its visual hint to make it easy to grab. */
+    .cpk-td__detail-divider {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -3px;
+      width: 7px;
+      cursor: col-resize;
+      background: transparent;
+      z-index: 5;
+    }
+
+    .cpk-td__detail-divider:hover {
+      background: rgba(190, 194, 255, 0.3);
+    }
+
+    /* ── Right detail panel ──────────────────────────────────────────── */
+    .cpk-td__detail {
+      flex-shrink: 0;
+      overflow: hidden;
+      background: #f7f7f9;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      padding: 0;
+      box-sizing: border-box;
+      position: relative;
+      /* Slide open/closed via width + padding transition. When closed,
+         width and padding are 0 so the drawer fully collapses. */
+      transition:
+        width 220ms cubic-bezier(0.4, 0, 0.2, 1),
+        padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .cpk-td__detail[data-open="true"] {
+      overflow-y: auto;
+      padding: 16px;
+    }
+
+    .cpk-tdp__section-title {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      font-weight: 500;
+      color: #838389;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
+      margin-bottom: 8px;
+    }
+
+    .cpk-tdp__divider {
+      height: 1px;
+      background: #dbdbe5;
+      margin: 14px 0;
+    }
+
+    .cpk-tdp__row {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 3px 0;
+      gap: 8px;
+    }
+
+    .cpk-tdp__label {
+      color: #838389;
+      font-size: 11px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .cpk-tdp__value {
+      color: #010507;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 11px;
+      text-align: right;
+      min-width: 0;
+    }
+
+    .cpk-tdp__value--truncate {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 130px;
+    }
+
+    .cpk-tdp__value--wrap {
+      white-space: normal;
+      word-break: break-all;
+      text-align: right;
+    }
+  `;
+	}
+	updated(_changed) {
+		if (this.threadId !== this._lastFetchedThreadId) {
+			this._lastFetchedThreadId = this.threadId;
+			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 = [];
+		} else if (this.threadId && this.liveMessageVersion !== this._lastSeenLiveMessageVersion) {
+			this._lastSeenLiveMessageVersion = this.liveMessageVersion;
+			this._messagesAbort?.abort();
+			this._messagesAbort = null;
+			this.fetchMessages(this.threadId, true);
+		}
+	}
+	/**
+	* Fetch the canonical conversation for `threadId` from the runtime.
+	*
+	* `silent` is true for live re-fetches triggered by `liveMessageVersion`
+	* bumps during streaming. In that mode we never toggle the loading state
+	* (which would flash "Loading messages…" between every message) and we
+	* keep the previous conversation on transient errors instead of blanking
+	* it. Initial threadId-change fetches use the default (`silent=false`)
+	* so users see an explicit loading indicator on first load.
+	*/
+	async fetchMessages(threadId, silent = false) {
+		if (!this.runtimeUrl) {
+			if (!silent) this._conversation = [];
+			return;
+		}
+		const controller = new AbortController();
+		this._messagesAbort = controller;
+		if (!silent) {
+			this._loadingMessages = true;
+			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();
+			if (controller.signal.aborted || this.threadId !== threadId) return;
+			this._conversation = this.mapMessages(data.messages);
+		} catch (err) {
+			if (err instanceof Error && err.name === "AbortError") return;
+			if (!silent) {
+				this._messagesError = err instanceof Error ? err.message : "Failed to load messages";
+				this._conversation = [];
+			}
+		} finally {
+			if (!silent && !controller.signal.aborted) this._loadingMessages = false;
+		}
+	}
+	async fetchEvents(threadId) {
+		this._eventsNotAvailable = false;
+		if (!this.runtimeUrl) {
+			this._fetchedEvents = null;
+			return;
+		}
+		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
+			});
+			if (controller.signal.aborted || this.threadId !== threadId) return;
+			if (res.status === 501) {
+				this._eventsNotAvailable = true;
+				this._fetchedEvents = 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._fetchedEvents = this.mapApiEvents(data.events);
+		} 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 = [];
+		} finally {
+			if (!controller.signal.aborted && this.threadId === threadId) this._loadingEvents = false;
+		}
+	}
+	async fetchState(threadId) {
+		this._stateNotAvailable = false;
+		if (!this.runtimeUrl) {
+			this._fetchedState = null;
+			return;
+		}
+		const controller = new AbortController();
+		this._stateAbort = controller;
+		this._loadingState = true;
+		this._stateError = null;
+		try {
+			const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/state`, {
+				headers: { ...this.headers },
+				signal: controller.signal
+			});
+			if (controller.signal.aborted || this.threadId !== threadId) return;
+			if (res.status === 501) {
+				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;
+		} catch (err) {
+			if (err instanceof Error && err.name === "AbortError") return;
+			if (this.threadId !== threadId) return;
+			this._stateError = err instanceof Error ? err.message : "Failed to load state";
+			this._fetchedState = null;
+		} finally {
+			if (!controller.signal.aborted && this.threadId === threadId) this._loadingState = false;
+		}
+	}
+	mapMessages(messages) {
+		const items = [];
+		const toolCallMap = /* @__PURE__ */ new Map();
+		for (const msg of messages) if (msg.role === "user" && msg.content) items.push({
+			id: msg.id,
+			type: "user",
+			content: msg.content,
+			createdAt: ""
+		});
+		else if (msg.role === "assistant") {
+			if (msg.toolCalls?.length) for (const tc of msg.toolCalls) {
+				let args = {};
+				try {
+					args = JSON.parse(tc.args);
+				} catch (err) {
+					console.error("[CopilotKit Inspector] Failed to parse tool-call arguments", {
+						toolCallId: tc.id,
+						raw: tc.args,
+						error: err
+					});
+					args = {
+						__parseError: true,
+						__raw: tc.args
+					};
+				}
+				const item = {
+					id: tc.id,
+					type: "tool_call",
+					toolName: tc.name,
+					toolCallId: tc.id,
+					arguments: args,
+					result: null,
+					createdAt: ""
+				};
+				toolCallMap.set(tc.id, item);
+				items.push(item);
+			}
+			if (msg.content) items.push({
+				id: msg.id,
+				type: "assistant",
+				content: msg.content,
+				createdAt: ""
+			});
+		} else if (msg.role === "activity") items.push({
+			id: msg.id,
+			type: "generative-ui",
+			activityType: msg.activityType ?? "unknown",
+			createdAt: ""
+		});
+		else if (msg.role === "tool" && msg.toolCallId) {
+			const tc = toolCallMap.get(msg.toolCallId);
+			if (tc) try {
+				tc.result = JSON.parse(msg.content ?? "{}");
+			} catch (err) {
+				console.error("[CopilotKit Inspector] Failed to parse tool-call result content", {
+					toolCallId: msg.toolCallId,
+					raw: msg.content,
+					error: err
+				});
+				tc.result = {
+					__parseError: true,
+					__raw: msg.content ?? null
+				};
+			}
+		}
+		return items;
+	}
+	mapApiEvents(events) {
+		return events.map((event) => {
+			const { type, timestamp, ...rest } = event;
+			return {
+				type: typeof type === "string" ? type : "UNKNOWN",
+				timestamp: typeof timestamp === "string" || typeof timestamp === "number" ? timestamp : Date.now(),
+				payload: rest
+			};
+		});
+	}
+	get renderItems() {
+		const items = this._conversation;
+		const result = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (item.type === "agent_responded") continue;
+			if (item.type !== "tool_call" || !item.groupId) {
+				result.push(item);
+				continue;
+			}
+			if (seen.has(item.groupId)) continue;
+			seen.add(item.groupId);
+			const group = {
+				type: "tool_call_group",
+				id: item.groupId,
+				items: items.filter((i) => i.type === "tool_call" && i.groupId === item.groupId)
+			};
+			result.push(group);
+		}
+		return result;
+	}
+	get activityCounts() {
+		let messages = 0;
+		let toolCalls = 0;
+		let generativeUi = 0;
+		for (const item of this._conversation) {
+			if (item.type === "user" || item.type === "assistant") messages++;
+			if (item.type === "tool_call") toolCalls++;
+			if (item.type === "generative-ui") generativeUi++;
+		}
+		return {
+			messages,
+			toolCalls,
+			generativeUi
+		};
+	}
+	get duration() {
+		const t = this.thread;
+		if (!t?.createdAt || !t?.updatedAt) return "—";
+		const ms = new Date(t.updatedAt).getTime() - new Date(t.createdAt).getTime();
+		if (ms < 0) return "—";
+		if (ms < 1e3) return `${ms}ms`;
+		const s = Math.floor(ms / 1e3);
+		if (s < 60) return `${s}s`;
+		return `${Math.floor(s / 60)}m ${s % 60}s`;
+	}
+	toggleToolExpand(id) {
+		const next = new Set(this._expandedTools);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		this._expandedTools = next;
+	}
+	toggleMessageExpand(id) {
+		const next = new Set(this._expandedMessages);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		this._expandedMessages = next;
+	}
+	get activeEvents() {
+		if (this._eventsNotAvailable) return [];
+		return this._fetchedEvents ?? this.agentEventsInput ?? [];
+	}
+	get activeState() {
+		if (this._stateNotAvailable) return null;
+		return this._fetchedState ?? this.agentStateInput ?? null;
+	}
+	hasRenderableState() {
+		const s = this.activeState;
+		return !!s && typeof s === "object" && Object.keys(s).length > 0;
+	}
+	shortId(id) {
+		if (!id) return "—";
+		return id.length > 20 ? id.slice(0, 8) + "…" : id;
+	}
+	fmtTime(dateStr) {
+		if (!dateStr) return "—";
+		const d = new Date(dateStr);
+		if (Number.isNaN(d.getTime())) return "—";
+		return d.toLocaleTimeString("en-US", {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+			hour12: false
+		});
+	}
+	render() {
+		return html`
+      <div class="cpk-td">
+        <!-- ── Left area: tabs + content ─────────────────────────────────── -->
+        <div class="cpk-td__left">
+          <!-- Tab bar -->
+          <div class="cpk-td__tabs-header">
+            <div class="cpk-td__tab-group" role="tablist">
+              ${ɵCpkThreadDetails.TAB_LIST.map((tab) => html`
+                  <button
+                    role="tab"
+                    class="cpk-td__tab ${this._tab === tab.id ? "cpk-td__tab--active" : ""}"
+                    @click=${() => this.activateTab(tab.id)}
+                  >
+                    ${tab.label}
+                  </button>
+                `)}
+            </div>
+            ${this.renderPanelToggle()}
+          </div>
+
+          <!-- Scrollable content -->
+          <div class="cpk-td__content">
+            ${this._panelInitializing ? html`
+                    <div class="cpk-td__status">Loading…</div>
+                  ` : nothing}
+            ${ɵCpkThreadDetails.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? html`<div
+                      class="cpk-td__panel"
+                      style=${this._tab === tab.id && !this._panelInitializing ? "" : "display:none"}
+                    >
+                      ${this.renderTabContent(tab.id)}
+                    </div>` : nothing)}
+          </div>
+        </div>
+
+        <!--
+          Drawer always rendered so width animates between 0 and its
+          target. Divider lives INSIDE the drawer and is absolutely
+          positioned over its left edge so the toggle (rightmost of the
+          tab row) and the drawer touch with no flex-gap between them.
+        -->
+        <div
+          class="cpk-td__detail"
+          data-open=${this._showDetailPanel ? "true" : "false"}
+          style="width:${this._showDetailPanel ? this._detailPanelWidth : 0}px"
+          aria-hidden=${this._showDetailPanel ? "false" : "true"}
+        >
+          ${this._showDetailPanel ? html`
+                <div
+                  class="cpk-td__detail-divider"
+                  @pointerdown=${this.onDetailDividerDown}
+                  @pointermove=${this.onDetailDividerMove}
+                  @pointerup=${this.onDetailDividerUp}
+                  @pointercancel=${this.onDetailDividerUp}
+                ></div>
+              ` : nothing}
+          ${this.renderDetailPanel()}
+        </div>
+      </div>
+    `;
+	}
+	renderConversation() {
+		if (this._loadingMessages) return html`
+        <div class="cpk-td__status">Loading messages…</div>
+      `;
+		if (this._messagesError) return html`<div class="cpk-td__status cpk-td__status--error">
+        ${this._messagesError}
+      </div>`;
+		if (this._conversation.length === 0) return html`
+        <div class="cpk-td__empty-state">
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            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>No messages yet</span>
+        </div>
+      `;
+		return this.cachedPanelTpl("conversation", [
+			this._conversation,
+			this._expandedTools,
+			this._expandedMessages
+		], () => {
+			return html`${this.renderItems.map((item) => this.renderRenderItem(item))}`;
+		});
+	}
+	/**
+	* Memoize the rendered TemplateResult for `slot` keyed by tuple
+	* element-wise reference equality. The hot path for tab switches: when
+	* the underlying data hasn't changed, return the previously built
+	* TemplateResult so Lit's diff short-circuits. Each panel's `key` is
+	* the tuple of inputs the template reads — pass everything the template
+	* depends on, or the cache will return stale output when those inputs
+	* 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 tpl = build();
+		this._panelTplCache.set(slot, {
+			key,
+			tpl
+		});
+		return tpl;
+	}
+	renderRenderItem(item) {
+		switch (item.type) {
+			case "user":
+			case "assistant": return this.renderBubble(item);
+			case "tool_call": return this.renderToolBlock(item);
+			case "tool_call_group": return this.renderToolGroup(item);
+			case "reasoning": return html`<div class="cpk-td__inline-chip">
+          <span>Reasoned for ${item.duration}</span>
+        </div>`;
+			case "state_update": return html`
+          <div class="cpk-td__inline-chip">
+            <span>Updated agent state</span>
+          </div>
+        `;
+			case "generative-ui": return this.renderGenerativeUI(item);
+			case "agent_responded": return nothing;
+		}
+	}
+	renderBubble(item) {
+		const isUser = item.type === "user";
+		const threshold = ɵCpkThreadDetails.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;
+		return html`
+      <div
+        class="cpk-td__bubble ${isUser ? "cpk-td__bubble--user" : "cpk-td__bubble--assistant"}"
+      >
+        <div
+          class="cpk-td__bubble-inner ${isUser ? "cpk-td__bubble-inner--user" : "cpk-td__bubble-inner--assistant"}"
+        >
+          ${shown}
+          ${tooLong ? html`<span
+                class="cpk-td__show-more"
+                @click=${() => this.toggleMessageExpand(item.id)}
+                >${expanded ? "Show less" : "Show more"}</span
+              >` : nothing}
+        </div>
+      </div>
+    `;
+	}
+	renderToolBlock(item) {
+		const expanded = this._expandedTools.has(item.id);
+		return html`
+      <div class="cpk-td__tool-block">
+        <div
+          class="cpk-td__tool-header"
+          @click=${() => this.toggleToolExpand(item.id)}
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+            <path
+              d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z"
+              stroke="#189370"
+              stroke-width="1.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class="cpk-td__tool-name">${item.toolName}</span>
+          ${item.result || Object.keys(item.arguments).length > 0 ? html`
+                  <span class="cpk-td__tool-status">DONE</span>
+                ` : html`
+                  <span class="cpk-td__tool-status cpk-td__tool-status--pending">PENDING</span>
+                `}
+          <span class="cpk-td__tool-chevron">${expanded ? "▾" : "▸"}</span>
+        </div>
+        ${expanded ? html`
+              <div class="cpk-td__tool-body">
+                <div class="cpk-td__tool-section-label">Arguments</div>
+                <pre class="cpk-td__tool-pre">
+${unsafeHTML(highlightedJson(item.arguments))}</pre
+                >
+                ${item.result ? html`
+                      <div
+                        class="cpk-td__tool-section-label"
+                        style="margin-top:8px"
+                      >
+                        Result
+                      </div>
+                      <pre class="cpk-td__tool-pre">
+${unsafeHTML(highlightedJson(item.result))}</pre
+                      >
+                    ` : nothing}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+	}
+	renderToolGroup(group) {
+		return html`
+      <div class="cpk-td__tool-group">
+        <div class="cpk-td__tool-group-header">
+          ${group.items.length} tool call${group.items.length !== 1 ? "s" : ""}
+        </div>
+        ${group.items.map((tc) => this.renderToolBlock(tc))}
+      </div>
+    `;
+	}
+	renderGenerativeUI(item) {
+		return html`
+      <div class="cpk-td__genui">
+        <div class="cpk-td__genui-badge">
+          <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+          </svg>
+          Generative UI
+        </div>
+        <div class="cpk-td__genui-placeholder">
+          ${item.activityType} — rendered in chat
+        </div>
+      </div>
+    `;
+	}
+	renderState() {
+		if (this._loadingState) return html`
+        <div class="cpk-td__status">Loading state…</div>
+      `;
+		if (this._stateError) return html`<div class="cpk-td__status cpk-td__status--error">
+        ${this._stateError}
+      </div>`;
+		if (this._stateNotAvailable) return html`
+        <div class="cpk-td__empty-state">
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <ellipse cx="12" cy="5" rx="9" ry="3" />
+            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+          </svg>
+          <span>State history not available</span>
+          <span class="cpk-td__empty-hint"
+            >This runtime doesn't yet expose per-thread agent state. Available when
+            running against the in-memory runner.</span
+          >
+        </div>
+      `;
+		if (!this.hasRenderableState()) return html`
+        <div class="cpk-td__empty-state">
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <ellipse cx="12" cy="5" rx="9" ry="3" />
+            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+          </svg>
+          <span>No state captured</span>
+          <span class="cpk-td__empty-hint"
+            >Emitted live from STATE_SNAPSHOT events.</span
+          >
+        </div>
+      `;
+		const stateValue = this.activeState;
+		return this.cachedPanelTpl("agent-state", [stateValue], () => {
+			return html`<pre class="cpk-td__json-block">
+${unsafeHTML(highlightedJson(stateValue))}</pre
+      >`;
+		});
+	}
+	renderEvents() {
+		if (this._loadingEvents) return html`
+        <div class="cpk-td__status">Loading events…</div>
+      `;
+		if (this._eventsError) return html`<div class="cpk-td__status cpk-td__status--error">
+        ${this._eventsError}
+      </div>`;
+		if (this._eventsNotAvailable) return html`
+        <div class="cpk-td__empty-state">
+          <span>Event history not available</span>
+          <span class="cpk-td__empty-hint"
+            >This runtime doesn't yet expose per-thread AG-UI events. Available when
+            running against the in-memory runner.</span
+          >
+        </div>
+      `;
+		const events = this.activeEvents;
+		if (events.length === 0) return html`
+        <div class="cpk-td__empty-state">
+          <span>No events captured</span>
+          <span class="cpk-td__empty-hint"
+            >Events are recorded live. Run the agent to see them here.</span
+          >
+        </div>
+      `;
+		return this.cachedPanelTpl("ag-ui-events", [events], () => {
+			return html`${events.map((event) => {
+				const { bg, fg } = eventColors(event.type);
+				return html`
+          <div class="cpk-td__event">
+            <div class="cpk-td__event-header" style="background:${bg}">
+              <span class="cpk-td__event-type" style="color:${fg}"
+                >${event.type}</span
+              >
+              <span class="cpk-td__event-time"
+                >${formatTimestamp(event.timestamp)}</span
+              >
+            </div>
+            <pre class="cpk-td__event-payload">
+${unsafeHTML(highlightedJson(event.payload))}</pre
+            >
+          </div>
+        `;
+			})}`;
+		});
+	}
+	renderPanelToggle() {
+		return html`
+      <button
+        class="cpk-td__panel-toggle ${this._showDetailPanel ? "cpk-td__panel-toggle--active" : ""}"
+        @click=${() => {
+			this._showDetailPanel = !this._showDetailPanel;
+		}}
+        title="Toggle thread details"
+        type="button"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <line x1="15" y1="3" x2="15" y2="21" />
+        </svg>
+      </button>
+    `;
+	}
+	renderDetailPanel() {
+		const counts = this.activityCounts;
+		return 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
+        >
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Name</span>
+        <span class="cpk-tdp__value">${this.thread?.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
+        >
+      </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
+        >
+      </div>
+
+      <div class="cpk-tdp__divider"></div>
+
+      <!-- Timestamps -->
+      <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>
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Updated</span>
+        <span class="cpk-tdp__value">${this.fmtTime(this.thread?.updatedAt)}</span>
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Duration</span>
+        <span class="cpk-tdp__value">${this.duration}</span>
+      </div>
+
+      <div class="cpk-tdp__divider"></div>
+
+      <!-- Activity -->
+      <div class="cpk-tdp__section-title">Activity</div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Messages</span>
+        <span class="cpk-tdp__value">${counts.messages}</span>
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Tool calls</span>
+        <span class="cpk-tdp__value">${counts.toolCalls}</span>
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">AG-UI events</span>
+        <span class="cpk-tdp__value">${this.activeEvents.length}</span>
+      </div>
+    `;
+	}
+};
+if (!customElements.get("cpk-thread-list")) customElements.define("cpk-thread-list", CpkThreadList);
+if (!customElements.get("cpk-thread-details")) customElements.define("cpk-thread-details", ɵCpkThreadDetails);
+var WebInspectorElement = class extends LitElement {
+	constructor(..._args3) {
+		super(..._args3);
 		this._core = null;
 		this.coreSubscriber = null;
 		this.coreUnsubscribe = null;
@@ -66,6 +1820,8 @@ var WebInspectorElement = class extends LitElement {
 		this.agentSubscriptions = /* @__PURE__ */ new Map();
 		this.agentEvents = /* @__PURE__ */ new Map();
 		this.agentMessages = /* @__PURE__ */ new Map();
+		this.agentRunThreadId = /* @__PURE__ */ new Map();
+		this.liveMessageVersion = /* @__PURE__ */ new Map();
 		this.agentStates = /* @__PURE__ */ new Map();
 		this.flattenedEvents = [];
 		this.eventCounter = 0;
@@ -82,6 +1838,17 @@ var WebInspectorElement = class extends LitElement {
 		this.draggedDuringInteraction = false;
 		this.ignoreNextButtonClick = false;
 		this.selectedMenu = "ag-ui-events";
+		this.selectedThreadId = null;
+		this.threadListWidth = 290;
+		this.threadDividerResizing = false;
+		this.threadDividerPointerId = -1;
+		this.threadDividerStartX = 0;
+		this.threadDividerStartWidth = 0;
+		this._threads = [];
+		this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
+		this._threadsByAgent = /* @__PURE__ */ new Map();
+		this._threadsErrorByAgent = /* @__PURE__ */ new Map();
+		this._ownedThreadStores = /* @__PURE__ */ new Map();
 		this.contextMenuOpen = false;
 		this.dockMode = "floating";
 		this.previousBodyMargins = null;
@@ -94,15 +1861,20 @@ var WebInspectorElement = class extends LitElement {
 		this.toolSignature = "";
 		this.eventFilterText = "";
 		this.eventTypeFilter = "all";
-		this.announcementMarkdown = null;
+		this.evtColWidths = [
+			100,
+			80,
+			150
+		];
+		this._evtColResize = null;
 		this.announcementHtml = null;
 		this.announcementTimestamp = null;
 		this.announcementPreviewText = null;
 		this.hasUnseenAnnouncement = false;
 		this.announcementLoaded = false;
-		this.announcementLoadError = null;
 		this.announcementPromise = null;
 		this.showAnnouncementPreview = true;
+		this.announcementExpanded = false;
 		this.contextState = {
 			button: {
 				position: {
@@ -143,28 +1915,7 @@ var WebInspectorElement = class extends LitElement {
 		this.resizeStart = null;
 		this.resizeInitialSize = null;
 		this.isResizing = false;
-		this.menuItems = [
-			{
-				key: "ag-ui-events",
-				label: "AG-UI Events",
-				icon: "Zap"
-			},
-			{
-				key: "agents",
-				label: "Agent",
-				icon: "Bot"
-			},
-			{
-				key: "frontend-tools",
-				label: "Frontend Tools",
-				icon: "Hammer"
-			},
-			{
-				key: "agent-context",
-				label: "Context",
-				icon: "FileText"
-			}
-		];
+		this.customTabIcons = { threads: `<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>` };
 		this.handlePointerDown = (event) => {
 			if (this.dockMode !== "floating" && this.isOpen) return;
 			const target = event.currentTarget;
@@ -329,6 +2080,26 @@ var WebInspectorElement = class extends LitElement {
 		this.expandedTools = /* @__PURE__ */ new Set();
 		this.expandedContextItems = /* @__PURE__ */ new Set();
 		this.copiedContextItems = /* @__PURE__ */ new Set();
+		this.handleThreadDividerPointerDown = (event) => {
+			this.threadDividerResizing = true;
+			this.threadDividerPointerId = event.pointerId;
+			this.threadDividerStartX = event.clientX;
+			this.threadDividerStartWidth = this.threadListWidth;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			event.preventDefault();
+		};
+		this.handleThreadDividerPointerMove = (event) => {
+			if (!this.threadDividerResizing || this.threadDividerPointerId !== event.pointerId) return;
+			const delta = event.clientX - this.threadDividerStartX;
+			this.threadListWidth = Math.max(180, Math.min(480, this.threadDividerStartWidth + delta));
+			this.requestUpdate();
+		};
+		this.handleThreadDividerPointerUp = (event) => {
+			if (this.threadDividerPointerId !== event.pointerId) return;
+			const target = event.currentTarget;
+			if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
+			this.threadDividerResizing = false;
+		};
 		this.handleClearEvents = () => {
 			if (this.selectedContext === "all-agents") {
 				this.agentEvents.clear();
@@ -353,6 +2124,31 @@ var WebInspectorElement = class extends LitElement {
 		this.handleDismissAnnouncement = () => {
 			this.markAnnouncementSeen();
 		};
+		this.copyResetTimeouts = /* @__PURE__ */ new WeakMap();
+		this.handleAnnouncementContentClick = (event) => {
+			const button = (event.target instanceof HTMLElement ? event.target : null)?.closest(".announcement-code__copy");
+			if (!(button instanceof HTMLButtonElement)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const encoded = button.getAttribute("data-copy") ?? "";
+			const code = this.decodeBase64(encoded);
+			if (!code) return;
+			const showCopied = () => {
+				const existing = this.copyResetTimeouts.get(button);
+				if (existing !== void 0) window.clearTimeout(existing);
+				button.setAttribute("data-copied", "true");
+				button.setAttribute("aria-label", "Code copied");
+				button.textContent = "Copied";
+				const id = window.setTimeout(() => {
+					button.removeAttribute("data-copied");
+					button.setAttribute("aria-label", "Copy code");
+					button.textContent = "Copy";
+					this.copyResetTimeouts.delete(button);
+				}, 1500);
+				this.copyResetTimeouts.set(button, id);
+			};
+			if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) navigator.clipboard.writeText(code).then(showCopied, () => {});
+		};
 	}
 	static {
 		this.properties = {
@@ -374,6 +2170,106 @@ var WebInspectorElement = class extends LitElement {
 		this.requestUpdate("core", oldValue);
 		if (this._core) this.attachToCore(this._core);
 	}
+	get menuItems() {
+		return [
+			{
+				key: "ag-ui-events",
+				label: "AG-UI Events",
+				icon: "Zap"
+			},
+			{
+				key: "agents",
+				label: "Agent",
+				icon: "Bot"
+			},
+			...(this._core?.tools?.length ?? 0) > 0 ? [{
+				key: "frontend-tools",
+				label: "Frontend Tools",
+				icon: "Hammer"
+			}] : [],
+			{
+				key: "agent-context",
+				label: "Context",
+				icon: "FileText"
+			},
+			{
+				key: "threads",
+				label: "Threads",
+				icon: "MessageSquare"
+			}
+		];
+	}
+	subscribeToThreadStore(agentId, store) {
+		if (this._threadStoreSubscriptions.has(agentId)) return;
+		const threadsSub = store.select(ɵselectThreads).subscribe((threads) => {
+			this._threadsByAgent.set(agentId, threads);
+			this._threads = Array.from(this._threadsByAgent.values()).flat();
+			this.autoSelectLatestThread();
+			this.requestUpdate();
+		});
+		const errorSub = store.select(ɵselectThreadsError).subscribe((error) => {
+			if (error) this._threadsErrorByAgent.set(agentId, error);
+			else this._threadsErrorByAgent.delete(agentId);
+			this.requestUpdate();
+		});
+		this._threadStoreSubscriptions.set(agentId, () => {
+			threadsSub.unsubscribe();
+			errorSub.unsubscribe();
+		});
+		const initialState = store.getState();
+		this._threadsByAgent.set(agentId, ɵselectThreads(initialState));
+		const initialError = ɵselectThreadsError(initialState);
+		if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
+		else this._threadsErrorByAgent.delete(agentId);
+		this._threads = Array.from(this._threadsByAgent.values()).flat();
+		this.autoSelectLatestThread();
+	}
+	autoSelectLatestThread() {
+		if (this._threads.length === 0) return;
+		if (!(this.selectedThreadId != null && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
+	}
+	teardownThreadStoreSubscriptions() {
+		for (const unsub of this._threadStoreSubscriptions.values()) unsub();
+		this._threadStoreSubscriptions.clear();
+		this._threadsByAgent.clear();
+		this._threadsErrorByAgent.clear();
+		this._threads = [];
+	}
+	ensureOwnedThreadStore(agentId) {
+		if (this._ownedThreadStores.has(agentId)) return;
+		if (this.core?.getThreadStore(agentId)) return;
+		const core = this.core;
+		if (!core?.runtimeUrl) return;
+		const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
+		store.start();
+		store.setContext({
+			runtimeUrl: core.runtimeUrl,
+			headers: {},
+			agentId
+		});
+		this._ownedThreadStores.set(agentId, store);
+		this.subscribeToThreadStore(agentId, store);
+		core.registerThreadStore(agentId, store);
+	}
+	refreshOwnedThreadStore(agentId) {
+		const store = this._ownedThreadStores.get(agentId);
+		if (!store) return;
+		store.refresh();
+	}
+	removeOwnedThreadStore(agentId) {
+		const store = this._ownedThreadStores.get(agentId);
+		if (!store) return;
+		store.stop();
+		this.core?.unregisterThreadStore(agentId);
+		this._ownedThreadStores.delete(agentId);
+	}
+	teardownOwnedThreadStores() {
+		for (const [agentId, store] of this._ownedThreadStores) {
+			store.stop();
+			this.core?.unregisterThreadStore(agentId);
+		}
+		this._ownedThreadStores.clear();
+	}
 	attachToCore(core) {
 		this.runtimeStatus = core.runtimeConnectionStatus;
 		this.coreProperties = core.properties;
@@ -381,6 +2277,11 @@ var WebInspectorElement = class extends LitElement {
 		this.coreSubscriber = {
 			onRuntimeConnectionStatusChanged: ({ status }) => {
 				this.runtimeStatus = status;
+				if (status === "connected") for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
+				else {
+					this._threadsByAgent.clear();
+					this._threads = [];
+				}
 				this.requestUpdate();
 			},
 			onPropertiesChanged: ({ properties }) => {
@@ -397,16 +2298,36 @@ var WebInspectorElement = class extends LitElement {
 			onAgentsChanged: ({ agents }) => {
 				this.processAgentsChanged(agents);
 			},
+			onContextChanged: ({ context }) => {
+				this.contextStore = this.normalizeContextStore(context);
+				this.requestUpdate();
+			},
+			onThreadStoreRegistered: ({ agentId, store }) => {
+				this.subscribeToThreadStore(agentId, store);
+				this.requestUpdate();
+			},
+			onThreadStoreUnregistered: ({ agentId }) => {
+				const unsub = this._threadStoreSubscriptions.get(agentId);
+				if (unsub) {
+					unsub();
+					this._threadStoreSubscriptions.delete(agentId);
+				}
+				this._threadsByAgent.delete(agentId);
+				this._threadsErrorByAgent.delete(agentId);
+				this._threads = Array.from(this._threadsByAgent.values()).flat();
+				this.requestUpdate();
+			},
 			onAgentRunStarted: ({ agent }) => {
-				if (agent?.agentId) this.subscribeToAgent(agent);
-			},
-			onContextChanged: ({ context }) => {
-				this.contextStore = this.normalizeContextStore(context);
+				this.subscribeToAgent(agent);
+				const runThreadId = agent.threadId;
+				if (agent.agentId && runThreadId) this.agentRunThreadId.set(agent.agentId, runThreadId);
 				this.requestUpdate();
 			}
 		};
 		this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
 		this.processAgentsChanged(core.agents);
+		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);
 	}
 	detachFromCore() {
@@ -421,6 +2342,8 @@ var WebInspectorElement = class extends LitElement {
 		this.cachedTools = [];
 		this.toolSignature = "";
 		this.teardownAgentSubscriptions();
+		this.teardownThreadStoreSubscriptions();
+		this.teardownOwnedThreadStores();
 	}
 	teardownAgentSubscriptions() {
 		for (const unsubscribe of this.agentSubscriptions.values()) unsubscribe();
@@ -437,6 +2360,7 @@ var WebInspectorElement = class extends LitElement {
 			if (!agent?.agentId) continue;
 			seenAgentIds.add(agent.agentId);
 			this.subscribeToAgent(agent);
+			this.ensureOwnedThreadStore(agent.agentId);
 		}
 		for (const agentId of Array.from(this.agentSubscriptions.keys())) if (!seenAgentIds.has(agentId)) {
 			this.unsubscribeFromAgent(agentId);
@@ -495,6 +2419,7 @@ var WebInspectorElement = class extends LitElement {
 					event,
 					result
 				});
+				this.refreshOwnedThreadStore(agentId);
 			},
 			onRunErrorEvent: ({ event }) => {
 				this.recordAgentEvent(agentId, "RUN_ERROR", event);
@@ -582,6 +2507,14 @@ var WebInspectorElement = class extends LitElement {
 			},
 			onReasoningEncryptedValueEvent: ({ event }) => {
 				this.recordAgentEvent(agentId, "REASONING_ENCRYPTED_VALUE", event);
+			},
+			onActivitySnapshotEvent: ({ event }) => {
+				this.recordAgentEvent(agentId, "ACTIVITY_SNAPSHOT", event);
+				this.syncAgentMessages(agent);
+			},
+			onActivityDeltaEvent: ({ event }) => {
+				this.recordAgentEvent(agentId, "ACTIVITY_DELTA", event);
+				this.syncAgentMessages(agent);
 			}
 		});
 		this.agentSubscriptions.set(agentId, unsubscribe);
@@ -596,6 +2529,15 @@ var WebInspectorElement = class extends LitElement {
 			this.agentSubscriptions.delete(agentId);
 		}
 	}
+	mapMessagesToConversation(messages) {
+		if (!messages) return null;
+		return messages.filter((m) => m.role === "user" || m.role === "assistant" || m.role === "activity").map((m, i) => ({
+			id: m.id ?? `msg-${i}`,
+			type: m.role === "user" ? "user" : m.role === "activity" ? "generative-ui" : "assistant",
+			content: m.role === "activity" ? m.activityType ?? "unknown" : m.contentText,
+			createdAt: ""
+		}));
+	}
 	recordAgentEvent(agentId, type, payload) {
 		const eventId = `${agentId}:${++this.eventCounter}`;
 		const normalizedPayload = this.normalizeEventPayload(type, payload);
@@ -618,6 +2560,8 @@ var WebInspectorElement = class extends LitElement {
 			const messages = this.normalizeAgentMessages(agent.messages);
 			if (messages) this.agentMessages.set(agent.agentId, messages);
 			else this.agentMessages.delete(agent.agentId);
+			const runThreadId = this.agentRunThreadId.get(agent.agentId);
+			if (runThreadId) this.liveMessageVersion.set(runThreadId, (this.liveMessageVersion.get(runThreadId) ?? 0) + 1);
 			this.requestUpdate();
 		} catch (error) {
 			console.error(`[CopilotKit Inspector] Failed to sync messages for agent "${agent.agentId}":`, error);
@@ -645,18 +2589,23 @@ var WebInspectorElement = class extends LitElement {
 		if (this.contextOptions.length !== nextOptions.length || this.contextOptions.some((option, index) => option.key !== nextOptions[index]?.key)) this.contextOptions = nextOptions;
 		const pendingContext = this.pendingSelectedContext;
 		if (pendingContext) {
-			if (pendingContext === "all-agents" || agentIds.has(pendingContext)) {
+			if ((pendingContext === "all-agents" || agentIds.has(pendingContext)) && (pendingContext === "all-agents" || agentIds.size === 1)) {
 				if (this.selectedContext !== pendingContext) {
 					this.selectedContext = pendingContext;
 					this.expandedRows.clear();
 				}
 				this.pendingSelectedContext = null;
-			} else if (agentIds.size > 0) this.pendingSelectedContext = null;
+			} else if (agentIds.size > 0) {
+				if (this.selectedContext !== "all-agents") {
+					this.selectedContext = "all-agents";
+					this.expandedRows.clear();
+				}
+				this.pendingSelectedContext = null;
+			}
 		}
 		if (!nextOptions.some((option) => option.key === this.selectedContext) && this.pendingSelectedContext === null) {
 			let nextSelected = "all-agents";
-			if (agentIds.has("default")) nextSelected = "default";
-			else if (agentIds.size > 0) nextSelected = Array.from(agentIds).sort((a, b) => a.localeCompare(b))[0];
+			if (agentIds.size === 1) nextSelected = Array.from(agentIds)[0];
 			if (this.selectedContext !== nextSelected) {
 				this.selectedContext = nextSelected;
 				this.expandedRows.clear();
@@ -831,6 +2780,7 @@ ${argsString}</pre
         z-index: 2147483646;
         display: block;
         will-change: transform;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
       }
 
       :host([data-transitioning="true"]) {
@@ -886,13 +2836,14 @@ ${argsString}</pre
         left: 50%;
         transform: translateX(-50%) translateY(-4px);
         white-space: nowrap;
-        background: rgba(17, 24, 39, 0.95);
+        background: rgba(1, 5, 7, 0.95);
         color: white;
         padding: 4px 8px;
         border-radius: 6px;
         font-size: 10px;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
         line-height: 1.2;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 4px 10px rgba(1, 5, 7, 0.18);
         opacity: 0;
         pointer-events: none;
         transition:
@@ -913,18 +2864,19 @@ ${argsString}</pre
         min-width: 300px;
         max-width: 300px;
         background: white;
-        color: #111827;
+        color: #010507;
         font-size: 13px;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
         line-height: 1.4;
         border-radius: 12px;
-        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
+        box-shadow: 0 12px 28px rgba(1, 5, 7, 0.12);
         padding: 10px 12px;
         display: inline-flex;
         align-items: flex-start;
         gap: 8px;
         z-index: 4500;
         animation: fade-slide-in 160ms ease;
-        border: 1px solid rgba(148, 163, 184, 0.35);
+        border: 1px solid rgba(219, 219, 229, 0.4);
         white-space: normal;
         word-break: break-word;
         text-align: left;
@@ -945,7 +2897,7 @@ ${argsString}</pre
         width: 10px;
         height: 10px;
         background: white;
-        border: 1px solid rgba(148, 163, 184, 0.35);
+        border: 1px solid rgba(219, 219, 229, 0.4);
         transform: rotate(45deg);
         top: 50%;
         margin-top: -5px;
@@ -954,81 +2906,564 @@ ${argsString}</pre
 
       .announcement-preview[data-side="left"] .announcement-preview__arrow {
         right: -5px;
-        box-shadow: 6px -6px 10px rgba(15, 23, 42, 0.12);
+        box-shadow: 6px -6px 10px rgba(1, 5, 7, 0.08);
       }
 
       .announcement-preview[data-side="right"] .announcement-preview__arrow {
         left: -5px;
-        box-shadow: -6px 6px 10px rgba(15, 23, 42, 0.12);
+        box-shadow: -6px 6px 10px rgba(1, 5, 7, 0.08);
       }
 
       .announcement-dismiss {
-        color: #6b7280;
-        font-size: 12px;
-        padding: 2px 8px;
-        border-radius: 8px;
-        border: 1px solid rgba(148, 163, 184, 0.5);
-        background: rgba(248, 250, 252, 0.9);
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: #838389;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        padding: 0;
         transition:
           background 120ms ease,
           color 120ms ease;
       }
 
       .announcement-dismiss:hover {
-        background: rgba(241, 245, 249, 1);
-        color: #111827;
+        background: rgba(0, 0, 0, 0.06);
+        color: #010507;
+      }
+
+      /* ── Agent tab section cards ─────────────────────────────────────── */
+      .cpk-section-card {
+        border-radius: 8px;
+        background: #ffffff;
+        overflow: hidden;
+      }
+
+      /* ── Agent icon bubble ───────────────────────────────────────────── */
+      .cpk-agent-icon {
+        background-color: #f0f0f4 !important;
+        color: #57575b !important;
+      }
+
+      /* ── Agent stat cards ────────────────────────────────────────────── */
+      .cpk-stat-card {
+        background-color: #ffffff !important;
+        border: 1px solid #dbdbe5 !important;
+      }
+      button.cpk-stat-card:hover {
+        background-color: #f7f7f9 !important;
+      }
+
+      /* ── Circle chevron (Frontend Tools + Context) ──────────────────── */
+      .cpk-chevron-circle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #f0f0f4;
+        color: #838389;
+        flex-shrink: 0;
+        transition: transform 0.2s;
+      }
+      .cpk-chevron-circle svg {
+        width: 14px !important;
+        height: 14px !important;
+      }
+      .cpk-chevron-circle--open {
+        transform: rotate(180deg);
+      }
+
+      /* ── Inline copy button ─────────────────────────────────────────── */
+      .cpk-copy-btn {
+        font-size: 10px;
+        font-weight: 500;
+        color: #57575b;
+        background: #ffffff;
+        border: 1px solid #dbdbe5;
+        cursor: pointer;
+        padding: 2px 8px;
+        border-radius: 4px;
+        flex-shrink: 0;
+        transition:
+          background-color 0.15s,
+          border-color 0.15s;
+      }
+      .cpk-copy-btn:hover {
+        background-color: #f0f0f4;
+        border-color: #afafb7;
+      }
+
+      .cpk-section-header {
+        background: #e8edf5;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        padding: 10px 16px;
+      }
+      .cpk-section-header h4 {
+        font-size: 11px;
+        font-weight: 600;
+        color: #181c1f;
+        margin: 0;
+      }
+
+      /* Inputs/selects inside the lavender header need an explicit white bg */
+      .cpk-section-header input,
+      .cpk-section-header select {
+        background-color: #ffffff !important;
+        box-shadow: none !important;
+      }
+      .cpk-section-header select {
+        padding-right: 24px !important;
+      }
+      /* Events table column headers */
+      table thead th {
+        font-weight: 600 !important;
       }
 
       .announcement-content {
-        color: #111827;
-        font-size: 14px;
-        line-height: 1.6;
+        color: #1f2230;
+        font-size: 13px;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
+        line-height: 1.55;
       }
 
       .announcement-content h1,
       .announcement-content h2,
       .announcement-content h3 {
+        color: #010507;
         font-weight: 700;
-        margin: 0.4rem 0 0.2rem;
+        line-height: 1.3;
+        margin: 0.9rem 0 0.4rem;
+      }
+      .announcement-content > h1:first-child,
+      .announcement-content > h2:first-child,
+      .announcement-content > h3:first-child {
+        margin-top: 0;
       }
 
       .announcement-content h1 {
-        font-size: 1.1rem;
+        font-size: 1.15rem;
+        letter-spacing: -0.01em;
       }
-
       .announcement-content h2 {
         font-size: 1rem;
       }
-
       .announcement-content h3 {
-        font-size: 0.95rem;
+        font-size: 0.9rem;
+        text-transform: none;
       }
 
       .announcement-content p {
-        margin: 0.25rem 0;
+        margin: 0.45rem 0;
+      }
+
+      .announcement-content strong {
+        color: #010507;
+        font-weight: 700;
       }
 
       .announcement-content ul {
         list-style: disc;
         padding-left: 1.25rem;
-        margin: 0.3rem 0;
+        margin: 0.45rem 0;
       }
 
       .announcement-content ol {
         list-style: decimal;
         padding-left: 1.25rem;
-        margin: 0.3rem 0;
+        margin: 0.45rem 0;
+      }
+
+      .announcement-content li + li {
+        margin-top: 0.15rem;
       }
 
       .announcement-content a {
-        color: #0f766e;
+        color: #757cf2;
         text-decoration: underline;
       }
+
+      .announcement-content :not(pre) > code {
+        background: #f3f3f7;
+        border: 1px solid #e4e4ec;
+        border-radius: 4px;
+        padding: 1px 5px;
+        font-size: 0.85em;
+        color: #4a3a8a;
+      }
+
+      .announcement-code {
+        position: relative;
+        margin: 0.6rem 0;
+      }
+
+      .announcement-code pre {
+        background: #0f1117;
+        color: #e6e8f2;
+        border-radius: 8px;
+        padding: 10px 12px;
+        overflow-x: auto;
+        font-size: 12px;
+        line-height: 1.5;
+        white-space: pre;
+      }
+
+      .announcement-code pre code::after {
+        content: "";
+        display: inline-block;
+        width: 80px;
+      }
+
+      .announcement-code__copy-shield {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        padding: 4px 4px 4px 24px;
+        border-top-right-radius: 8px;
+        background: linear-gradient(
+          to right,
+          rgba(15, 17, 23, 0) 0%,
+          rgba(15, 17, 23, 0.95) 40%,
+          #0f1117 100%
+        );
+        pointer-events: none;
+      }
+
+      .announcement-code pre code {
+        background: transparent;
+        border: none;
+        padding: 0;
+        color: inherit;
+        font-size: inherit;
+      }
+
+      .announcement-code pre::-webkit-scrollbar {
+        height: 6px;
+      }
+      .announcement-code pre::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .announcement-code pre::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 3px;
+      }
+
+      .announcement-code__copy {
+        position: relative;
+        pointer-events: auto;
+        padding: 3px 8px;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
+        font-size: 11px;
+        font-weight: 600;
+        color: #e6e8f2;
+        background: #1f222d;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 5px;
+        cursor: pointer;
+        transition:
+          background 0.12s ease,
+          color 0.12s ease;
+      }
+      .announcement-code__copy:hover {
+        background: #2a2e3c;
+      }
+      .announcement-code__copy[data-copied="true"] {
+        background: #eee6fe;
+        color: #6430ab;
+        border-color: transparent;
+      }
+
+      .announcement-body {
+        position: relative;
+        overflow: hidden;
+        transition: max-height 0.25s ease;
+      }
+      .announcement-body--collapsed {
+        max-height: 72px;
+      }
+      .announcement-body--expanded {
+        max-height: 2000px;
+      }
+      .announcement-fade {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        background: linear-gradient(to bottom, transparent, #ffffff);
+        pointer-events: none;
+      }
+      .announcement-toggle {
+        display: block;
+        width: 100%;
+        margin-top: 6px;
+        padding: 0;
+        background: none;
+        border: none;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
+        font-size: 12px;
+        font-weight: 500;
+        color: #757cf2;
+        cursor: pointer;
+        text-align: center;
+      }
+      .announcement-toggle:hover {
+        color: #6430ab;
+      }
+
+      /* ── Brand typography ────────────────────────────────────────── */
+      /* Override Tailwind font-mono stack → Spline Sans Mono */
+      .font-mono,
+      pre,
+      code {
+        font-family: "Spline Sans Mono", ui-monospace, "Cascadia Code", monospace;
+      }
+
+      /* ── Floating button ─────────────────────────────────────────── */
+      .console-button {
+        background-color: rgba(1, 5, 7, 0.95) !important;
+        border-color: rgba(190, 194, 255, 0.25) !important;
+        box-shadow:
+          0 0 0 1px rgba(190, 194, 255, 0.15),
+          0 4px 14px rgba(1, 5, 7, 0.28) !important;
+      }
+      .console-button:hover {
+        background-color: rgba(1, 5, 7, 1) !important;
+        border-color: rgba(190, 194, 255, 0.45) !important;
+      }
+      .console-button:focus-visible {
+        outline-color: #bec2ff !important;
+      }
+
+      /* ── Inspector window ────────────────────────────────────────── */
+      .inspector-window {
+        border-color: #dbdbe5 !important;
+        box-shadow:
+          0 8px 32px rgba(1, 5, 7, 0.1),
+          0 2px 8px rgba(1, 5, 7, 0.06) !important;
+      }
+
+      /* ── Header drag area ────────────────────────────────────────── */
+      .drag-handle {
+        border-bottom-color: #dbdbe5 !important;
+        /* Subtle pale lavender gradient — brand "light, spacious" surface */
+        background: linear-gradient(180deg, #f4f4fd 0%, #ffffff 100%) !important;
+      }
+
+      /* Tab strip row: soft off-white, separated from content */
+      .drag-handle > div:last-child {
+        border-top-color: #e2e2ea !important;
+        background-color: #fafafc !important;
+      }
+
+      /* ── Tab buttons ─────────────────────────────────────────────── */
+      /*
+       * Named classes owned by this component — no Tailwind conflict.
+       * Active: brand surface/surfaceContainerActive (lilac tint) +
+       *         border/borderActionEnabled underline.
+       * Dark fill is for primary action buttons only, not nav tabs.
+       */
+      .cpk-tab-active {
+        background-color: rgba(190, 194, 255, 0.18);
+        color: #010507;
+        font-weight: 600;
+      }
+      .cpk-tab-active .cpk-tab-icon {
+        color: #757cf2;
+      }
+      .cpk-tab-inactive {
+        background-color: transparent;
+        color: #2b2b2b;
+      }
+      .cpk-tab-inactive .cpk-tab-icon {
+        color: #838389;
+      }
+      .cpk-tab-inactive:hover {
+        background-color: rgba(190, 194, 255, 0.08);
+        color: #010507;
+        cursor: pointer;
+      }
+      .cpk-tab-active {
+        cursor: pointer;
+      }
+
+      /* ── Header control buttons (dock, close) — first row only ───── */
+      .drag-handle > div:first-child button {
+        color: #838389 !important;
+      }
+      .drag-handle > div:first-child button:hover {
+        background-color: #f0f0f4 !important;
+        color: #57575b !important;
+      }
+      .drag-handle > div:first-child button:focus-visible {
+        outline-color: #bec2ff !important;
+      }
+
+      /* ── Agent/context dropdown ──────────────────────────────────── */
+      [data-context-dropdown-root="true"] > button {
+        border-color: #dbdbe5 !important;
+        color: #010507 !important;
+      }
+      [data-context-dropdown-root="true"] > button:hover {
+        border-color: #bec2ff !important;
+        background-color: #f7f7f9 !important;
+      }
+      [data-context-dropdown-root="true"] > button > span:last-child {
+        color: #838389 !important;
+      }
+      [data-context-dropdown-root="true"] > div {
+        border-color: #dbdbe5 !important;
+        box-shadow: 0 4px 12px rgba(1, 5, 7, 0.08) !important;
+      }
+      [data-context-dropdown-root="true"] > div button:hover,
+      [data-context-dropdown-root="true"] > div button:focus {
+        background-color: #f7f7f9 !important;
+      }
+
+      /* ── Status bar (bottom chrome) ──────────────────────────────── */
+      .inspector-window > div > div:last-child {
+        border-top-color: #dbdbe5 !important;
+        background-color: #f7f7f9 !important;
+      }
+
+      /* ── Resize handle ───────────────────────────────────────────── */
+      .resize-handle {
+        color: #838389 !important;
+      }
+      .resize-handle:hover {
+        color: #57575b !important;
+      }
+
+      /* ── AG-UI Events tab ────────────────────────────────────────── */
+      /* Row hover: replace blue tint with brand lilac */
+      tr:hover td {
+        background-color: rgba(190, 194, 255, 0.08) !important;
+      }
+      /* Reset/dark action button */
+      button[class*="bg-gray-900"] {
+        background-color: #010507 !important;
+      }
+      button[class*="bg-gray-800"] {
+        background-color: #2b2b2b !important;
+      }
+      /* Copy "copied" state: generic green → brand mint */
+      button[class*="bg-green-100"] {
+        background-color: rgba(133, 236, 206, 0.2) !important;
+        color: #189370 !important;
+      }
+
+      /* ── Agents tab ──────────────────────────────────────────────── */
+      /* Agent icon bubble: blue → lilac */
+      span[class*="bg-blue-100"]:not([class*="text-blue-800"]) {
+        background-color: rgba(190, 194, 255, 0.15) !important;
+      }
+      span[class*="text-blue-600"] {
+        color: #757cf2 !important;
+      }
+      /* Running badge: emerald → mint */
+      span[class*="bg-emerald-50"] {
+        background-color: rgba(133, 236, 206, 0.15) !important;
+      }
+      span[class*="text-emerald-700"] {
+        color: #189370 !important;
+      }
+      /* Running status dot */
+      span[class*="bg-emerald-500"] {
+        background-color: #85ecce !important;
+      }
+      /* Idle dot */
+      span[class*="bg-gray-400"] {
+        background-color: #afafb7 !important;
+      }
+      /* User role badge (blue → lilac) */
+      span[class*="bg-blue-100"][class*="text-blue-800"] {
+        background-color: rgba(190, 194, 255, 0.22) !important;
+        border: 1px solid rgba(190, 194, 255, 0.45) !important;
+        color: #57575b !important;
+      }
+      /* Assistant role badge (green → mint) */
+      span[class*="bg-green-100"][class*="text-green-800"] {
+        background-color: rgba(133, 236, 206, 0.18) !important;
+        border: 1px solid rgba(133, 236, 206, 0.4) !important;
+        color: #189370 !important;
+      }
+      /* Tool role badge (amber → orange brand) */
+      span[class*="bg-amber-100"][class*="text-amber-800"] {
+        background-color: rgba(255, 172, 77, 0.15) !important;
+        color: #57575b !important;
+      }
+
+      /* ── Frontend Tools tab ──────────────────────────────────────── */
+      /* Handler badge (blue → lilac) */
+      span[class*="bg-blue-50"][class*="text-blue-700"] {
+        background-color: rgba(190, 194, 255, 0.12) !important;
+        border-color: rgba(190, 194, 255, 0.3) !important;
+        color: #010507 !important;
+      }
+      /* Renderer badge (purple → lilac-adjacent) */
+      span[class*="bg-purple-50"][class*="text-purple-700"] {
+        background-color: rgba(190, 194, 255, 0.12) !important;
+        border-color: rgba(190, 194, 255, 0.3) !important;
+        color: #57575b !important;
+      }
+      /* Required badge (rose → brand red) */
+      span[class*="bg-rose-50"][class*="text-rose-700"] {
+        background-color: rgba(250, 95, 103, 0.1) !important;
+        border-color: rgba(250, 95, 103, 0.25) !important;
+        color: #fa5f67 !important;
+      }
+      /* Code/default value blocks */
+      code[class*="bg-gray-100"],
+      span[class*="bg-gray-100"] {
+        background-color: #f0f0f4 !important;
+      }
+
+      /* ── Connected status bar: match threads header mint (#5BE4BB) ──── */
+      /* Outer strip bg + top border + text when connected badge is present */
+      .inspector-window
+        > div
+        > div:last-child
+        > div:last-child:has(div[class*="bg-emerald-50"]) {
+        background-color: rgba(91, 228, 187, 0.08) !important;
+        border-top-color: rgba(91, 228, 187, 0.3) !important;
+        color: #189370 !important;
+      }
+      /* Inner badge — slightly more opaque on the mint bg */
+      div[class*="bg-emerald-50"][class*="border-emerald-200"] {
+        background-color: rgba(91, 228, 187, 0.12) !important;
+        border-color: rgba(91, 228, 187, 0.4) !important;
+        color: #189370 !important;
+      }
+      /* Icon bubble inside connected badge → mint tint */
+      div[class*="bg-emerald-50"] span[class*="bg-white"] {
+        background-color: rgba(91, 228, 187, 0.3) !important;
+      }
+
+      /* ── Announcement panel ──────────────────────────────────────── */
+      div[class*="border-slate-200"][class*="bg-white"] {
+        border-color: #dbdbe5 !important;
+      }
+      /* Announcement icon bubble: black → brand light lavender + lilac icon */
+      span[class*="bg-slate-900"],
+      div[class*="bg-slate-900"] {
+        background-color: #eee6fe !important;
+        color: #757cf2 !important;
+      }
+      span[class*="text-slate-800"],
+      div[class*="text-slate-800"] {
+        color: #010507 !important;
+      }
     `];
 	}
 	connectedCallback() {
 		super.connectedCallback();
 		if (typeof window !== "undefined") {
+			this.ensureBrandFonts();
 			window.addEventListener("resize", this.handleResize);
 			window.addEventListener("pointerdown", this.handleGlobalPointerDown);
 			this.hydrateStateFromStorageEarly();
@@ -1036,6 +3471,15 @@ ${argsString}</pre
 			this.ensureAnnouncementLoading();
 		}
 	}
+	ensureBrandFonts() {
+		const FONT_LINK_ID = "cpk-inspector-brand-fonts";
+		if (document.getElementById(FONT_LINK_ID)) return;
+		const link = document.createElement("link");
+		link.id = FONT_LINK_ID;
+		link.rel = "stylesheet";
+		link.href = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=Spline+Sans+Mono:wght@600&display=swap";
+		document.head.appendChild(link);
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (typeof window !== "undefined") {
@@ -1113,7 +3557,7 @@ ${argsString}</pre
 			"focus-visible:outline",
 			"focus-visible:outline-2",
 			"focus-visible:outline-offset-2",
-			"focus-visible:outline-rose-500",
+			"focus-visible:outline-[#BEC2FF]",
 			"touch-none",
 			"select-none",
 			this.isDragging ? "cursor-grabbing" : "cursor-grab"
@@ -1221,14 +3665,12 @@ ${argsString}</pre
 			return html`
                   <button
                     type="button"
-                    class=${["inline-flex items-center gap-2 rounded-md px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300", isSelected ? "bg-gray-900 text-white shadow-sm" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"].join(" ")}
+                    class=${["inline-flex items-center gap-2 rounded-md px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300", isSelected ? "cpk-tab-active" : "cpk-tab-inactive"].join(" ")}
                     aria-pressed=${isSelected}
                     @click=${() => this.handleMenuSelect(key)}
                   >
-                    <span
-                      class="text-gray-400 ${isSelected ? "text-white" : ""}"
-                    >
-                      ${this.renderIcon(icon)}
+                    <span class="cpk-tab-icon">
+                      ${key in this.customTabIcons ? unsafeHTML(this.customTabIcons[key]) : this.renderIcon(icon)}
                     </span>
                     <span>${label}</span>
                   </button>
@@ -1237,8 +3679,8 @@ ${argsString}</pre
             </div>
           </div>
           <div class="flex flex-1 flex-col overflow-hidden">
-            <div class="flex-1 overflow-auto">
-              ${this.renderAnnouncementPanel()}
+            <div id="cpk-main-scroll" class="flex-1 overflow-auto">
+              ${this.renderAnnouncementBanner()}
               ${this.renderCoreWarningBanner()} ${this.renderMainContent()}
               <slot></slot>
             </div>
@@ -1682,7 +4124,8 @@ ${argsString}</pre
 			role,
 			contentText,
 			contentRaw: raw.content !== void 0 ? this.sanitizeForLogging(raw.content) : void 0,
-			toolCalls
+			toolCalls,
+			activityType: typeof raw.activityType === "string" ? raw.activityType : void 0
 		};
 	}
 	normalizeAgentMessages(messages) {
@@ -1701,9 +4144,6 @@ ${argsString}</pre
 		} else normalized[key] = { value: entry };
 		return normalized;
 	}
-	getSelectedMenu() {
-		return this.menuItems.find((item) => item.key === this.selectedMenu) ?? this.menuItems[0];
-	}
 	renderCoreWarningBanner() {
 		if (this._core) return nothing;
 		return html`
@@ -1760,27 +4200,99 @@ ${argsString}</pre
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "agent-context") return this.renderContextView();
+		if (this.selectedMenu === "threads") return this.renderThreadsView();
 		return nothing;
 	}
+	renderThreadsView() {
+		const displayThreads = this.selectedContext === "all-agents" ? this._threads : this._threadsByAgent.get(this.selectedContext) ?? [];
+		let threadsErrorMessage = null;
+		if (this.selectedContext === "all-agents") threadsErrorMessage = this._threadsErrorByAgent.values().next().value?.message ?? null;
+		else threadsErrorMessage = this._threadsErrorByAgent.get(this.selectedContext)?.message ?? null;
+		const selectedThread = this.selectedThreadId != null ? displayThreads.find((t) => t.id === this.selectedThreadId) ?? null : null;
+		return html`
+      <div style="display:flex;height:100%;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>
+
+        <!-- Center + right: thread details or empty state -->
+        <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
+          ${this.selectedThreadId ? html`<cpk-thread-details
+                  style="flex:1;min-width:0;"
+                  .threadId=${this.selectedThreadId}
+                  .thread=${selectedThread}
+                  .runtimeUrl=${this._core?.runtimeUrl ?? ""}
+                  .headers=${this._core?.headers ?? {}}
+                  .liveMessageVersion=${this.selectedThreadId ? this.liveMessageVersion.get(this.selectedThreadId) ?? 0 : 0}
+                  .agentStateInput=${selectedThread ? this.getLatestStateForAgent(selectedThread.agentId) : null}
+                  .agentEventsInput=${selectedThread ? this.agentEvents.get(selectedThread.agentId) ?? [] : []}
+                ></cpk-thread-details>` : 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"
+                    >
+                      <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>
+    `;
+	}
 	renderEventsTable() {
 		const events = this.getEventsForSelectedContext();
 		const filteredEvents = this.filterEvents(events);
 		const selectedLabel = this.selectedContext === "all-agents" ? "all agents" : `agent ${this.selectedContext}`;
 		if (events.length === 0) return html`
         <div
-          class="flex h-full items-center justify-center px-4 py-8 text-center"
+          class="flex h-full flex-col items-center justify-center gap-2 px-4 py-10 text-center"
         >
-          <div class="max-w-md">
-            <div
-              class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
-            >
-              ${this.renderIcon("Zap")}
-            </div>
-            <p class="text-sm text-gray-600">No events yet</p>
-            <p class="mt-2 text-xs text-gray-500">
-              Trigger an agent run to see live activity.
-            </p>
+          <div class="text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+            ${this.renderIcon("Zap")}
           </div>
+          <span class="text-sm text-gray-600">No events yet</span>
+          <span class="max-w-[240px] text-xs leading-snug text-gray-400"
+            >Events are recorded live. Run the agent to see them here.</span
+          >
         </div>
       `;
 		if (filteredEvents.length === 0) return html`
@@ -1877,23 +4389,32 @@ ${argsString}</pre
         </div>
         <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>
+            </colgroup>
             <thead class="sticky top-0 z-10">
               <tr class="bg-white">
+                ${[
+			"Agent",
+			"Time",
+			"Event Type"
+		].map((label, col) => 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;"
                 >
-                  Agent
-                </th>
-                <th
-                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
-                >
-                  Time
-                </th>
-                <th
-                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
-                >
-                  Event Type
-                </th>
+                  ${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"
                 >
@@ -1981,6 +4502,25 @@ ${prettyEvent}</pre
 		this.eventTypeFilter = "all";
 		this.requestUpdate();
 	}
+	_onEvtColResizeStart(e, col) {
+		e.preventDefault();
+		e.stopPropagation();
+		e.currentTarget.setPointerCapture(e.pointerId);
+		this._evtColResize = {
+			col,
+			startX: e.clientX,
+			startW: this.evtColWidths[col] ?? 0
+		};
+	}
+	_onEvtColResizeMove(e) {
+		if (!this._evtColResize) return;
+		const { col, startX, startW } = this._evtColResize;
+		this.evtColWidths = this.evtColWidths.map((w, i) => i === col ? Math.max(40, startW + (e.clientX - startX)) : w);
+		this.requestUpdate();
+	}
+	_onEvtColResizeEnd() {
+		this._evtColResize = null;
+	}
 	exportEvents(events) {
 		try {
 			const payload = JSON.stringify(events, null, 2);
@@ -2025,7 +4565,7 @@ ${prettyEvent}</pre
           <div class="flex items-start justify-between mb-4">
             <div class="flex items-center gap-3">
               <div
-                class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"
+                class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600 cpk-agent-icon"
               >
                 ${this.renderIcon("Bot")}
               </div>
@@ -2053,7 +4593,7 @@ ${prettyEvent}</pre
           <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
             <button
               type="button"
-              class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden"
+              class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden cpk-stat-card"
               @click=${() => this.handleMenuSelect("ag-ui-events")}
               title="View all events in AG-UI Events"
             >
@@ -2064,7 +4604,9 @@ ${prettyEvent}</pre
                 ${stats.totalEvents}
               </div>
             </button>
-            <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
+            <div
+              class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
+            >
               <div class="truncate whitespace-nowrap text-xs text-gray-600">
                 Messages
               </div>
@@ -2072,7 +4614,9 @@ ${prettyEvent}</pre
                 ${stats.messages}
               </div>
             </div>
-            <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
+            <div
+              class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
+            >
               <div class="truncate whitespace-nowrap text-xs text-gray-600">
                 Tool Calls
               </div>
@@ -2080,7 +4624,9 @@ ${prettyEvent}</pre
                 ${stats.toolCalls}
               </div>
             </div>
-            <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
+            <div
+              class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
+            >
               <div class="truncate whitespace-nowrap text-xs text-gray-600">
                 Errors
               </div>
@@ -2092,9 +4638,9 @@ ${prettyEvent}</pre
         </div>
 
         <!-- Current State Section -->
-        <div class="rounded-lg border border-gray-200 bg-white">
-          <div class="border-b border-gray-200 px-4 py-3">
-            <h4 class="text-sm font-semibold text-gray-900">Current State</h4>
+        <div class="cpk-section-card">
+          <div class="cpk-section-header">
+            <h4>Current State</h4>
           </div>
           <div class="overflow-auto p-4">
             ${this.hasRenderableState(state) ? html`
@@ -2103,7 +4649,7 @@ ${prettyEvent}</pre
                   ><code>${this.formatStateForDisplay(state)}</code></pre>
                 ` : html`
                   <div
-                    class="flex h-40 items-center justify-center text-xs text-gray-500"
+                    class="flex h-12 items-center justify-center text-xs text-gray-500"
                   >
                     <div class="flex items-center gap-2 text-gray-500">
                       <span class="text-lg text-gray-400"
@@ -2117,30 +4663,18 @@ ${prettyEvent}</pre
         </div>
 
         <!-- Current Messages Section -->
-        <div class="rounded-lg border border-gray-200 bg-white">
-          <div class="border-b border-gray-200 px-4 py-3">
-            <h4 class="text-sm font-semibold text-gray-900">
-              Current Messages
-            </h4>
+        <div class="cpk-section-card">
+          <div class="cpk-section-header">
+            <h4>Current Messages</h4>
           </div>
           <div class="overflow-auto">
             ${messages && messages.length > 0 ? html`
-                  <table class="w-full text-xs">
-                    <thead class="bg-gray-50">
-                      <tr>
-                        <th
-                          class="px-4 py-2 text-left font-medium text-gray-700"
-                        >
-                          Role
-                        </th>
-                        <th
-                          class="px-4 py-2 text-left font-medium text-gray-700"
-                        >
-                          Content
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200">
+                  <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>
+                    <div class="divide-y divide-gray-200">
                       ${messages.map((msg) => {
 			const role = msg.role || "unknown";
 			const roleColors = {
@@ -2155,34 +4689,32 @@ ${prettyEvent}</pre
 			const hasContent = rawContent.trim().length > 0;
 			const contentFallback = toolCalls.length > 0 ? "Invoked tool call" : "—";
 			return html`
-                          <tr>
-                            <td class="px-4 py-2 align-top">
+                          <div class="flex items-start">
+                            <div class="w-40 shrink-0 px-4 py-2">
                               <span
                                 class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}"
                               >
                                 ${role}
                               </span>
-                            </td>
-                            <td class="px-4 py-2">
+                            </div>
+                            <div class="flex-1 px-4 py-2">
                               ${hasContent ? html`<div
-                                    class="max-w-2xl whitespace-pre-wrap break-words text-gray-700"
+                                    class="whitespace-pre-line break-words text-gray-700"
                                   >
                                     ${rawContent}
-                                  </div>` : html`<div
-                                    class="text-xs italic text-gray-400"
-                                  >
+                                  </div>` : html`<div class="italic text-gray-400">
                                     ${contentFallback}
                                   </div>`}
                               ${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : nothing}
-                            </td>
-                          </tr>
+                            </div>
+                          </div>
                         `;
 		})}
-                    </tbody>
-                  </table>
+                    </div>
+                  </div>
                 ` : html`
                   <div
-                    class="flex h-40 items-center justify-center text-xs text-gray-500"
+                    class="flex h-12 items-center justify-center text-xs text-gray-500"
                   >
                     <div class="flex items-center gap-2 text-gray-500">
                       <span class="text-lg text-gray-400"
@@ -2243,14 +4775,29 @@ ${prettyEvent}</pre
 	}
 	handleMenuSelect(key) {
 		if (!this.menuItems.some((item) => item.key === key)) return;
+		const previousMenu = this.selectedMenu;
 		this.selectedMenu = key;
 		if (key === "agents" && this.selectedContext === "all-agents") {
 			const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
 			if (agentOptions.length > 0) {
-				const defaultAgent = agentOptions.find((opt) => opt.key === "default");
-				this.selectedContext = defaultAgent ? defaultAgent.key : agentOptions[0].key;
+				const mostRecent = agentOptions.reduce((best, opt) => {
+					const ts = this.getAgentStats(opt.key).lastActivity ?? -1;
+					return best === null || ts > best.ts ? {
+						key: opt.key,
+						ts
+					} : best;
+				}, null);
+				this.selectedContext = mostRecent ? mostRecent.key : agentOptions[0].key;
 			}
 		}
+		if (previousMenu === "agents" && key !== "agents") {
+			if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
+		}
+		if (key === "threads") this.autoSelectLatestThread();
+		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
+			const scroller = this.shadowRoot?.getElementById("cpk-main-scroll");
+			if (scroller) scroller.scrollTop = 0;
+		});
 		this.contextMenuOpen = false;
 		this.persistState();
 		this.requestUpdate();
@@ -2638,9 +5185,19 @@ ${prettyEvent}</pre
                 <div class="mb-3">
                   <h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
                   <code
-                    class="block rounded bg-white border border-gray-200 px-2 py-1 text-[10px] font-mono text-gray-600"
+                    class="font-mono text-xs font-medium text-gray-800 flex-1 truncate min-w-0"
                     >${id}</code
                   >
+                  <button
+                    type="button"
+                    class="cpk-copy-btn"
+                    @click=${(e) => {
+			e.stopPropagation();
+			this.copyContextValue(id, `${id}:id`);
+		}}
+                  >
+                    ${this.copiedContextItems.has(`${id}:id`) ? "✓" : "Copy"}
+                  </button>
                 </div>
                 ${hasValue ? html`
                       <div class="mb-2 flex items-center justify-between gap-2">
@@ -2648,8 +5205,8 @@ ${prettyEvent}</pre
                           Value
                         </h5>
                         <button
-                          class="flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] font-medium text-gray-700 transition hover:bg-gray-50"
                           type="button"
+                          class="cpk-copy-btn"
                           @click=${(e) => {
 			e.stopPropagation();
 			this.copyContextValue(context.value, id);
@@ -2658,13 +5215,6 @@ ${prettyEvent}</pre
                           ${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
                         </button>
                       </div>
-                      <div
-                        class="rounded-md border border-gray-200 bg-white p-3"
-                      >
-                        <pre
-                          class="overflow-auto text-xs text-gray-800 max-h-96"
-                        ><code>${this.formatContextValue(context.value)}</code></pre>
-                      </div>
                     ` : html`
                         <div class="flex items-center justify-center py-4 text-xs text-gray-500">
                           <span>No value available</span>
@@ -2677,7 +5227,7 @@ ${prettyEvent}</pre
 	}
 	getContextValuePreview(value) {
 		if (value === void 0 || value === null) return "—";
-		if (typeof value === "string") return value.length > 50 ? `${value.substring(0, 50)}...` : value;
+		if (typeof value === "string") return value.length > 50 ? `${value.slice(0, 50)}...` : value;
 		if (typeof value === "number" || typeof value === "boolean") return String(value);
 		if (Array.isArray(value)) return `Array(${value.length})`;
 		if (typeof value === "object") {
@@ -2727,50 +5277,25 @@ ${prettyEvent}</pre
 		else this.expandedRows.add(eventId);
 		this.requestUpdate();
 	}
-	renderAnnouncementPanel() {
-		if (!this.isOpen) return nothing;
-		this.ensureAnnouncementLoading();
+	renderAnnouncementBanner() {
 		if (!this.hasUnseenAnnouncement) return nothing;
-		if (!this.announcementLoaded && !this.announcementMarkdown) return html`<div
-        class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
-      >
-        <div class="flex items-center gap-2 font-semibold">
-          <span
-            class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
-          >
-            ${this.renderIcon("Megaphone")}
-          </span>
-          <span>Loading latest announcement…</span>
-        </div>
-      </div>`;
-		if (this.announcementLoadError) return html`<div
-        class="mx-4 my-3 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
+		if (!this.announcementLoaded && !this.announcementHtml) return html`<div
+        class="flex items-center gap-2 px-4 py-3 text-sm font-semibold text-slate-800"
       >
-        <div class="flex items-center gap-2 font-semibold">
-          <span
-            class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-rose-600 text-white shadow-sm"
-          >
-            ${this.renderIcon("Megaphone")}
-          </span>
-          <span>Announcement unavailable</span>
-        </div>
-        <p class="mt-2 text-xs text-rose-800">
-          We couldn’t load the latest notice. Please try opening the inspector
-          again.
-        </p>
+        <span
+          class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
+        >
+          ${this.renderIcon("Megaphone")}
+        </span>
+        <span>Loading latest announcement…</span>
       </div>`;
-		if (!this.announcementMarkdown) return nothing;
-		const content = this.announcementHtml ? unsafeHTML(this.announcementHtml) : html`<pre class="whitespace-pre-wrap text-sm text-gray-900">
-${this.announcementMarkdown}</pre
-        >`;
-		return html`<div
-      class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
-    >
+		if (!this.announcementHtml) return nothing;
+		return html`<div class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
       <div
-        class="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-900"
+        class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900"
       >
         <span
-          class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
+          class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
         >
           ${this.renderIcon("Megaphone")}
         </span>
@@ -2781,12 +5306,30 @@ ${this.announcementMarkdown}</pre
           @click=${this.handleDismissAnnouncement}
           aria-label="Dismiss announcement"
         >
-          Dismiss
+          ${this.renderIcon("X")}
         </button>
       </div>
-      <div class="announcement-content text-sm leading-relaxed text-gray-900">
-        ${content}
+      <div class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}">
+        <div
+          class="announcement-content"
+          @click=${this.handleAnnouncementContentClick}
+        >
+          ${unsafeHTML(this.announcementHtml)}
+        </div>
+        ${!this.announcementExpanded ? html`
+                <div class="announcement-fade"></div>
+              ` : nothing}
       </div>
+      <button
+        class="announcement-toggle"
+        type="button"
+        @click=${() => {
+			this.announcementExpanded = !this.announcementExpanded;
+			this.requestUpdate();
+		}}
+      >
+        ${this.announcementExpanded ? "Show less ↑" : "Show more ↓"}
+      </button>
     </div>`;
 	}
 	ensureAnnouncementLoading() {
@@ -2821,14 +5364,13 @@ ${this.announcementMarkdown}</pre
 			const storedTimestamp = this.loadStoredAnnouncementTimestamp();
 			this.announcementTimestamp = timestamp;
 			this.announcementPreviewText = previewText ?? "";
-			this.announcementMarkdown = markdown;
 			this.hasUnseenAnnouncement = (!storedTimestamp || storedTimestamp !== timestamp) && !!this.announcementPreviewText;
 			this.showAnnouncementPreview = this.hasUnseenAnnouncement;
 			this.announcementHtml = await this.convertMarkdownToHtml(markdown);
 			this.announcementLoaded = true;
 			this.requestUpdate();
 		} catch (error) {
-			this.announcementLoadError = error;
+			console.warn("[CopilotKit Inspector] Failed to load announcement", error);
 			this.announcementLoaded = true;
 			this.requestUpdate();
 		}
@@ -2838,7 +5380,28 @@ ${this.announcementMarkdown}</pre
 		renderer.link = (href, title, text) => {
 			return `<a href="${this.escapeHtmlAttr(this.appendRefParam(href ?? ""))}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
 		};
-		return marked.parse(markdown, { renderer });
+		renderer.code = (code, lang) => {
+			const safeLang = (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>`;
+		};
+		return marked.parse(markdown, {
+			renderer,
+			async: false
+		});
+	}
+	encodeBase64(value) {
+		if (typeof window === "undefined" || typeof window.btoa !== "function") return "";
+		const bytes = new TextEncoder().encode(value);
+		let binary = "";
+		for (const b of bytes) binary += String.fromCharCode(b);
+		return window.btoa(binary);
+	}
+	decodeBase64(value) {
+		if (typeof window === "undefined" || typeof window.atob !== "function") return "";
+		const decoded = window.atob(value);
+		const bytes = new Uint8Array(decoded.length);
+		for (let i = 0; i < decoded.length; i++) bytes[i] = decoded.charCodeAt(i);
+		return new TextDecoder().decode(bytes);
 	}
 	appendRefParam(href) {
 		try {
@@ -2850,7 +5413,7 @@ ${this.announcementMarkdown}</pre
 		}
 	}
 	escapeHtmlAttr(value) {
-		return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		return escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 	}
 	loadStoredAnnouncementTimestamp() {
 		if (typeof window === "undefined" || !window.localStorage) return null;
@@ -2888,5 +5451,5 @@ function defineWebInspector() {
 defineWebInspector();
 
 //#endregion
-export { WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector };
+export { WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector, ɵCpkThreadDetails };
 //# sourceMappingURL=index.mjs.map