@copilotkit/web-inspector 1.61.1 → 1.61.2

package/dist/index.mjs

@@ -3,7 +3,7 @@ import inspector_logo_default from "./assets/inspector-logo.mjs";
 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 { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerViewed, trackThreadsTabClicked } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked } from "./lib/telemetry.mjs";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
@@ -32,6 +32,8 @@ const DEFAULT_WINDOW_SIZE = {
 const DOCKED_LEFT_WIDTH = 500;
 const MAX_AGENT_EVENTS = 200;
 const MAX_TOTAL_EVENTS = 500;
+const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
+const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
 const AGENT_EVENT_TYPES = [
 	"RUN_STARTED",
 	"RUN_FINISHED",
@@ -107,14 +109,14 @@ function eventColors(type) {
 		bg: "rgba(190,194,255,0.102)",
 		fg: "#5558B2"
 	};
+	if (type === "RUN_ERROR" || type === "ERROR") return {
+		bg: "rgba(250,95,103,0.13)",
+		fg: "#c0333a"
+	};
 	if (type.startsWith("RUN_") || type.startsWith("STEP_")) return {
 		bg: "rgba(255,172,77,0.2)",
 		fg: "#996300"
 	};
-	if (type === "ERROR") return {
-		bg: "rgba(250,95,103,0.13)",
-		fg: "#c0333a"
-	};
 	return {
 		bg: "#F7F7F9",
 		fg: "#838389"
@@ -1140,7 +1142,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends LitElement {
 			this._messagesError = null;
 		}
 		try {
-			const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/messages`, {
+			const res = await fetch(this.getThreadInspectionUrl(threadId, "messages"), {
 				headers: { ...this.headers },
 				signal: controller.signal
 			});
@@ -1170,7 +1172,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends LitElement {
 		this._loadingEvents = true;
 		this._eventsError = null;
 		try {
-			const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/events`, {
+			const res = await fetch(this.getThreadInspectionUrl(threadId, "events"), {
 				headers: { ...this.headers },
 				signal: controller.signal
 			});
@@ -1204,7 +1206,7 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends LitElement {
 		this._loadingState = true;
 		this._stateError = null;
 		try {
-			const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/state`, {
+			const res = await fetch(this.getThreadInspectionUrl(threadId, "state"), {
 				headers: { ...this.headers },
 				signal: controller.signal
 			});
@@ -1227,6 +1229,9 @@ var ɵCpkThreadDetails = class ɵCpkThreadDetails extends LitElement {
 			if (!controller.signal.aborted && this.threadId === threadId) this._loadingState = false;
 		}
 	}
+	getThreadInspectionUrl(threadId, resource) {
+		return `${this.runtimeUrl.replace(/\/+$/, "")}/threads/${encodeURIComponent(threadId)}/${resource}`;
+	}
 	mapMessages(messages) {
 		const items = [];
 		const toolCallMap = /* @__PURE__ */ new Map();
@@ -1881,6 +1886,7 @@ var WebInspectorElement = class extends LitElement {
 		this.viewedBannerTimestamps = /* @__PURE__ */ new Set();
 		this.pendingBannerViewed = null;
 		this.clickedBannerIds = /* @__PURE__ */ new Set();
+		this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
 		this.contextState = {
 			button: {
 				position: {
@@ -2086,6 +2092,27 @@ var WebInspectorElement = class extends LitElement {
 		this.expandedTools = /* @__PURE__ */ new Set();
 		this.expandedContextItems = /* @__PURE__ */ new Set();
 		this.copiedContextItems = /* @__PURE__ */ new Set();
+		this.handleTalkToEngineerClick = () => {
+			if (this.core?.telemetryDisabled) return;
+			trackTalkToEngineerClicked(this.getThreadsTelemetryProps({
+				cta: "talk_to_engineer",
+				cta_surface: "threads_header"
+			}, { includeUrlAttribution: true }));
+		};
+		this.handleThreadsIntelligenceSignupClick = () => {
+			if (this.core?.telemetryDisabled) return;
+			trackThreadsIntelligenceSignupClicked(this.getThreadsTelemetryProps({
+				cta: "signup",
+				cta_surface: "threads_locked"
+			}, { includeUrlAttribution: true }));
+		};
+		this.handleThreadsTalkToEngineerClick = () => {
+			if (this.core?.telemetryDisabled) return;
+			trackThreadsTalkToEngineerClicked(this.getThreadsTelemetryProps({
+				cta: "talk_to_engineer",
+				cta_surface: "threads_locked"
+			}, { includeUrlAttribution: true }));
+		};
 		this.handleThreadDividerPointerDown = (event) => {
 			this.threadDividerResizing = true;
 			this.threadDividerPointerId = event.pointerId;
@@ -2213,7 +2240,36 @@ var WebInspectorElement = class extends LitElement {
 			}
 		];
 	}
+	getThreadServiceStatus() {
+		if (!this._core) return "unknown";
+		if (!this._core.threadEndpoints) return "unknown";
+		return this._core.threadEndpoints?.list === false ? "unavailable" : "available";
+	}
+	areThreadEndpointsAvailable() {
+		return this.getThreadServiceStatus() !== "unavailable";
+	}
+	getThreadsTelemetryProps(extra = {}, options = {}) {
+		const distinctId = options.includeUrlAttribution && !this.core?.telemetryDisabled ? getTelemetryDistinctIdForUrl() : null;
+		const threadServiceStatus = this.getThreadServiceStatus();
+		return {
+			posthog_distinct_id: distinctId ?? void 0,
+			intelligence_status: threadServiceStatus === "available" ? "intelligence_enabled" : threadServiceStatus === "unavailable" ? "intelligence_not_enabled" : "unknown",
+			thread_service_status: threadServiceStatus,
+			license_status: this.core?.licenseStatus ?? void 0,
+			runtime_mode: this.core?.runtimeMode ?? void 0,
+			runtime_url_type: getRuntimeUrlType(this.core?.runtimeUrl),
+			telemetry_disabled: this.core?.telemetryDisabled ?? false,
+			...extra
+		};
+	}
+	getIntelligenceSignupUrl() {
+		return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
+	}
+	getTalkToEngineerUrl() {
+		return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
+	}
 	subscribeToThreadStore(agentId, store) {
+		if (!this.areThreadEndpointsAvailable()) return;
 		if (this._threadStoreSubscriptions.has(agentId)) return;
 		const threadsSub = store.select(ɵselectThreads).subscribe((threads) => {
 			this._threadsByAgent.set(agentId, threads);
@@ -2254,7 +2310,7 @@ var WebInspectorElement = class extends LitElement {
 		if (this.core?.getThreadStore(agentId)) return;
 		const core = this.core;
 		if (!core?.runtimeUrl) return;
-		if (core.threadEndpoints?.list === false) return;
+		if (!this.areThreadEndpointsAvailable()) return;
 		const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
 		store.start();
 		store.setContext({
@@ -2278,6 +2334,7 @@ var WebInspectorElement = class extends LitElement {
 		for (const [agentId, store] of this._ownedThreadStores) store.setContext({
 			runtimeUrl: core.runtimeUrl,
 			headers: { ...headers },
+			wsUrl: core.intelligence?.wsUrl,
 			agentId
 		});
 	}
@@ -2308,7 +2365,7 @@ var WebInspectorElement = class extends LitElement {
 						maybeShowDisclosure();
 					}
 					this.flushPendingBannerViewed();
-					if (core.threadEndpoints?.list !== false) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
+					if (this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
 					else this.teardownOwnedThreadStores();
 				} else {
 					this._threadsByAgent.clear();
@@ -2355,6 +2412,13 @@ var WebInspectorElement = class extends LitElement {
 		};
 		this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
 		this.processAgentsChanged(core.agents);
+		if (core.runtimeConnectionStatus === "connected") {
+			if (!core.telemetryDisabled) {
+				ensureTelemetryDistinctId();
+				maybeShowDisclosure();
+			}
+			this.flushPendingBannerViewed();
+		}
 		const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
 		for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
 		if (core.context) this.contextStore = this.normalizeContextStore(core.context);
@@ -2443,10 +2507,10 @@ var WebInspectorElement = class extends LitElement {
 			onRunStartedEvent: ({ event }) => {
 				this.recordAgentEvent(agentId, "RUN_STARTED", event);
 			},
-			onRunFinishedEvent: ({ event, result }) => {
+			onRunFinishedEvent: (params) => {
 				this.recordAgentEvent(agentId, "RUN_FINISHED", {
-					event,
-					result
+					event: params.event,
+					result: "result" in params ? params.result : void 0
 				});
 				this.refreshOwnedThreadStore(agentId);
 			},
@@ -2764,13 +2828,13 @@ ${argsString}</pre
 	}
 	getEventBadgeClasses(type) {
 		const base = "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
+		if (type === "RUN_ERROR") return `${base} bg-rose-50 text-rose-700 border-rose-200`;
 		if (type.startsWith("RUN_")) return `${base} bg-blue-50 text-blue-700 border-blue-200`;
 		if (type.startsWith("TEXT_MESSAGE")) return `${base} bg-emerald-50 text-emerald-700 border-emerald-200`;
 		if (type.startsWith("TOOL_CALL")) return `${base} bg-amber-50 text-amber-700 border-amber-200`;
 		if (type.startsWith("REASONING")) return `${base} bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200`;
 		if (type.startsWith("STATE")) return `${base} bg-violet-50 text-violet-700 border-violet-200`;
 		if (type.startsWith("MESSAGES")) return `${base} bg-sky-50 text-sky-700 border-sky-200`;
-		if (type === "RUN_ERROR") return `${base} bg-rose-50 text-rose-700 border-rose-200`;
 		return `${base} bg-gray-100 text-gray-600 border-gray-200`;
 	}
 	stringifyPayload(payload, pretty) {
@@ -4327,78 +4391,399 @@ ${argsString}</pre
 			cta_label: this.announcementCtaLabel ?? void 0
 		});
 	}
+	trackThreadsViewStateOnce(state, threadCount) {
+		if (this.core?.telemetryDisabled) return;
+		const key = `${state}:${this.getThreadServiceStatus()}`;
+		if (this.viewedThreadsTelemetryStates.has(key)) return;
+		this.viewedThreadsTelemetryStates.add(key);
+		const props = this.getThreadsTelemetryProps({ thread_count: threadCount });
+		if (state === "locked") trackThreadsLockedViewed(props);
+		else if (state === "empty_enabled") trackThreadsEmptyEnabledViewed(props);
+		else trackThreadsEnabledViewed(props);
+	}
+	renderThreadsLockedBackgroundMockup() {
+		return html`
+      <div
+        aria-hidden="true"
+        style="
+          position: absolute;
+          inset: 0;
+          display: grid;
+          grid-template-columns: minmax(180px, 28%) 1fr;
+          overflow: hidden;
+          opacity: 0.58;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            padding: 28px 24px;
+            border-right: 1px solid #dbdbe5;
+            background: #fafafa;
+          "
+        >
+          ${[
+			{
+				width: 74,
+				accent: true
+			},
+			{ width: 92 },
+			{ width: 68 },
+			{ width: 84 },
+			{ width: 58 },
+			{ width: 76 }
+		].map((row) => html`
+              <div
+                style="
+                  padding: 12px;
+                  border-radius: 8px;
+                  background: ${row.accent ? "#eee6fe" : "#ffffff"};
+                  box-shadow: inset 0 0 0 1px #eeeef4;
+                "
+              >
+                <div
+                  style="
+                    height: 8px;
+                    width: ${row.width}%;
+                    border-radius: 99px;
+                    background: ${row.accent ? "#a984f5" : "#d7d7df"};
+                  "
+                ></div>
+                <div
+                  style="
+                    height: 6px;
+                    width: 88%;
+                    margin-top: 10px;
+                    border-radius: 99px;
+                    background: #e3e3eb;
+                  "
+                ></div>
+                <div
+                  style="
+                    height: 6px;
+                    width: 62%;
+                    margin-top: 7px;
+                    border-radius: 99px;
+                    background: #e8e8ef;
+                  "
+                ></div>
+              </div>
+            `)}
+        </div>
+        <div
+          style="
+            min-width: 0;
+            padding: 42px 48px;
+            background: #ffffff;
+          "
+        >
+          <div
+            style="
+              height: 10px;
+              width: 180px;
+              border-radius: 99px;
+              background: #d7d7df;
+            "
+          ></div>
+          <div
+            style="
+              height: 8px;
+              width: min(520px, 58%);
+              margin-top: 28px;
+              border-radius: 99px;
+              background: #e3e3eb;
+            "
+          ></div>
+          <div
+            style="
+              height: 8px;
+              width: min(430px, 48%);
+              margin-top: 12px;
+              border-radius: 99px;
+              background: #e8e8ef;
+            "
+          ></div>
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(2, minmax(0, 1fr));
+              gap: 16px;
+              max-width: 620px;
+              margin-top: 30px;
+            "
+          >
+            <div
+              style="
+                height: 116px;
+                border-radius: 8px;
+                background: #f5f5f8;
+                box-shadow: inset 0 0 0 1px #eeeef4;
+              "
+            ></div>
+            <div
+              style="
+                height: 116px;
+                border-radius: 8px;
+                background: #f5f5f8;
+                box-shadow: inset 0 0 0 1px #eeeef4;
+              "
+            ></div>
+          </div>
+          <div
+            style="
+              height: 10px;
+              width: min(680px, 74%);
+              margin-top: 34px;
+              border-radius: 99px;
+              background: #e3e3eb;
+            "
+          ></div>
+          <div
+            style="
+              height: 10px;
+              width: min(560px, 60%);
+              margin-top: 14px;
+              border-radius: 99px;
+              background: #e8e8ef;
+            "
+          ></div>
+        </div>
+      </div>
+    `;
+	}
+	renderThreadsLockedView() {
+		this.trackThreadsViewStateOnce("locked", 0);
+		return html`
+      <div
+        style="
+          position: relative;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+          overflow: hidden;
+          background: #ffffff;
+        "
+      >
+        ${this.renderThreadsLockedBackgroundMockup()}
+        <div
+          aria-hidden="true"
+          style="
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background:
+              radial-gradient(circle at center, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.78) 24%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0.56) 100%);
+          "
+        ></div>
+        <div
+          style="
+            position: relative;
+            z-index: 1;
+            max-width: 440px;
+            text-align: center;
+            color: #57575b;
+          "
+        >
+          <div
+            aria-hidden="true"
+            style="
+              margin: 0 auto 18px;
+              display: flex;
+              justify-content: center;
+            "
+          >
+            <div
+              style="
+                display: flex;
+                height: 44px;
+                width: 44px;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid #dfd6fb;
+                border-radius: 8px;
+                background: #eee6fe;
+                color: #57575b;
+                box-shadow: 0 8px 18px rgba(87, 87, 91, 0.14);
+              "
+            >
+              ${this.renderIcon("Lock")}
+            </div>
+          </div>
+          <h2
+            style="
+              margin: 0 0 8px;
+              font-size: 16px;
+              line-height: 1.35;
+              font-weight: 600;
+              color: #010507;
+            "
+          >
+            Enable Intelligence to inspect Threads.
+          </h2>
+          <p
+            style="
+              margin: 0 auto 18px;
+              max-width: 380px;
+              font-size: 13px;
+              line-height: 1.55;
+              color: #57575b;
+            "
+          >
+            Persist conversations and inspect saved thread history from the
+            Inspector.
+          </p>
+          <div
+            style="
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              gap: 8px;
+            "
+          >
+            <a
+              href=${this.getTalkToEngineerUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                min-height: 34px;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                border-radius: 6px;
+                background: #010507;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #ffffff;
+                text-decoration: none;
+              "
+              @click=${this.handleThreadsTalkToEngineerClick}
+            >
+              Talk to an Engineer
+            </a>
+            <a
+              href=${this.getIntelligenceSignupUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                min-height: 34px;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                border-radius: 6px;
+                border: 1px solid #dbdbe5;
+                background: #ffffff;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #57575b;
+                text-decoration: none;
+              "
+              @click=${this.handleThreadsIntelligenceSignupClick}
+            >
+              Sign up for Intelligence
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+	}
 	renderThreadsView() {
+		if (!this.areThreadEndpointsAvailable()) return this.renderThreadsLockedView();
 		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;
+		if (!threadsErrorMessage) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled", displayThreads.length);
 		return html`
-      <div style="display:flex;height:100%;overflow:hidden;">
-        <!-- Left sidebar: thread list -->
+      <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
         <div
-          style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+          style="display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid #DBDBE5;background:#ffffff;padding:8px 12px;flex-shrink:0;"
         >
-          <cpk-thread-list
-            style="height:100%;"
-            .threads=${displayThreads}
-            .selectedThreadId=${this.selectedThreadId}
-            .errorMessage=${threadsErrorMessage}
-            @threadSelected=${(e) => {
+          <a
+            href=${this.getTalkToEngineerUrl()}
+            target="_blank"
+            rel="noopener"
+            style="display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
+            @click=${this.handleTalkToEngineerClick}
+          >
+            Talk to an Engineer
+          </a>
+        </div>
+        <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
+          <!-- Left sidebar: thread list -->
+          <div
+            style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+          >
+            <cpk-thread-list
+              style="height:100%;"
+              .threads=${displayThreads}
+              .selectedThreadId=${this.selectedThreadId}
+              .errorMessage=${threadsErrorMessage}
+              @threadSelected=${(e) => {
 			this.selectedThreadId = e.detail;
 			this.requestUpdate();
 		}}
-          ></cpk-thread-list>
-        </div>
-
-        <!-- Resize divider -->
-        <div
-          style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
-          @pointerdown=${this.handleThreadDividerPointerDown}
-          @pointermove=${this.handleThreadDividerPointerMove}
-          @pointerup=${this.handleThreadDividerPointerUp}
-          @pointercancel=${this.handleThreadDividerPointerUp}
-        ></div>
+            ></cpk-thread-list>
+          </div>
 
-        <!-- Center + right: thread details or empty state -->
-        <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
-          ${this.selectedThreadId ? html`<cpk-thread-details
-                  style="flex:1;min-width:0;"
-                  .threadId=${this.selectedThreadId}
-                  .thread=${selectedThread}
-                  .runtimeUrl=${this._core?.runtimeUrl ?? ""}
-                  .headers=${this._core?.headers ?? {}}
-                  .threadInspectionAvailable=${this._core?.threadEndpoints?.inspect !== false}
-                  .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"
+          <!-- Resize divider -->
+          <div
+            style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
+            @pointerdown=${this.handleThreadDividerPointerDown}
+            @pointermove=${this.handleThreadDividerPointerMove}
+            @pointerup=${this.handleThreadDividerPointerUp}
+            @pointercancel=${this.handleThreadDividerPointerUp}
+          ></div>
+
+          <!-- Center + right: thread details or empty state -->
+          <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
+            ${selectedThread ? html`<cpk-thread-details
+                    style="flex:1;min-width:0;"
+                    .threadId=${selectedThread.id}
+                    .thread=${selectedThread}
+                    .runtimeUrl=${this._core?.runtimeUrl ?? ""}
+                    .headers=${this._core?.headers ?? {}}
+                    .threadInspectionAvailable=${this._core?.threadEndpoints?.inspect !== false}
+                    .liveMessageVersion=${this.liveMessageVersion.get(selectedThread.id) ?? 0}
+                    .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
+                    .agentEventsInput=${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;
+                      "
                     >
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                    </svg>
-                    <span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
-                  </div>
-                `}
+                      <svg
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="#c0c0c8"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                      </svg>
+                      <span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
+                    </div>
+                  `}
+          </div>
         </div>
       </div>
     `;
@@ -4919,7 +5304,7 @@ ${prettyEvent}</pre
 			if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
 		}
 		if (key === "threads") {
-			if (this.selectedMenu !== "threads" && !this.core?.telemetryDisabled) trackThreadsTabClicked();
+			if (previousMenu !== "threads" && !this.core?.telemetryDisabled) trackThreadsTabClicked(this.getThreadsTelemetryProps());
 			this.autoSelectLatestThread();
 		}
 		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
@@ -5343,6 +5728,22 @@ ${prettyEvent}</pre
                           ${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
                         </button>
                       </div>
+                      <pre
+                        style="
+                          margin: 0;
+                          max-height: 180px;
+                          overflow: auto;
+                          white-space: pre-wrap;
+                          word-break: break-word;
+                          border-radius: 6px;
+                          border: 1px solid #eeeef4;
+                          background: #f7f7f9;
+                          padding: 10px;
+                          font-size: 11px;
+                          line-height: 1.5;
+                          color: #2d2d30;
+                        "
+                      >${this.formatContextValue(context.value)}</pre>
                     ` : html`
                         <div class="flex items-center justify-center py-4 text-xs text-gray-500">
                           <span>No value available</span>
@@ -5533,8 +5934,9 @@ ${prettyEvent}</pre
 	async convertMarkdownToHtml(markdown) {
 		const renderer = new marked.Renderer();
 		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 `<a href="${this.escapeHtmlAttr(this.isSafeAnnouncementHref(href ?? "") ? this.appendRefParam(href ?? "") : "#")}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
 		};
+		renderer.html = (html) => escapeHtml(html);
 		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>`;
@@ -5544,6 +5946,14 @@ ${prettyEvent}</pre
 			async: false
 		});
 	}
+	isSafeAnnouncementHref(href) {
+		try {
+			const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
+			return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "mailto:";
+		} catch {
+			return false;
+		}
+	}
 	encodeBase64(value) {
 		if (typeof window === "undefined" || typeof window.btoa !== "function") return "";
 		const bytes = new TextEncoder().encode(value);
@@ -5558,19 +5968,25 @@ ${prettyEvent}</pre
 		for (let i = 0; i < decoded.length; i++) bytes[i] = decoded.charCodeAt(i);
 		return new TextDecoder().decode(bytes);
 	}
-	appendRefParam(href) {
+	appendRefParam(href, ref = "cpk-inspector") {
 		try {
+			const isRootRelative = href.startsWith("/") && !href.startsWith("//");
 			const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
-			if (!url.searchParams.has("ref")) url.searchParams.append("ref", "cpk-inspector");
-			if (!url.searchParams.has("posthog_distinct_id") && !this.core?.telemetryDisabled) {
+			if (!url.searchParams.has("ref")) url.searchParams.append("ref", ref);
+			if (!url.searchParams.has("posthog_distinct_id") && !this.core?.telemetryDisabled && this.isCopilotKitDestination(url)) {
 				const distinctId = getTelemetryDistinctIdForUrl();
 				if (distinctId) url.searchParams.append("posthog_distinct_id", distinctId);
 			}
+			if (isRootRelative) return `${url.pathname}${url.search}${url.hash}`;
 			return url.toString();
 		} catch {
 			return href;
 		}
 	}
+	isCopilotKitDestination(url) {
+		const hostname = url.hostname.toLowerCase();
+		return hostname === "copilotkit.ai" || hostname.endsWith(".copilotkit.ai");
+	}
 	escapeHtmlAttr(value) {
 		return escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 	}