@copilotkit/web-inspector 1.66.4 → 1.67.0

package/dist/index.mjs

@@ -3,23 +3,61 @@ 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, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerDismissed, trackBannerViewed, trackInspectorOpened, trackMemoriesTabClicked, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked } from "./lib/telemetry.mjs";
+import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
+import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerDismissed, trackBannerViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, 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";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { icons } from "lucide";
-import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError } from "@copilotkit/core";
+import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
 const THREAD_INSPECTOR_TAG = "cpk-thread-inspector";
 /**
-* User-facing label for the memory surface (nav item + view header). The menu
-* KEY stays "memories" for persistence/telemetry stability; only the label
-* changed from "Learning" to "Memory".
+* User-facing label for the memory view header. The legacy menu key stays
+* "memories" for persistence and telemetry stability.
 */
 const MEMORY_VIEW_LABEL = "Memory";
+const INSPECTOR_GROUPS = {
+	threads: ["threads"],
+	agents: [
+		"ag-ui-events",
+		"agents",
+		"frontend-tools",
+		"capabilities",
+		"agent-context"
+	],
+	learning: ["memories"]
+};
+const INSPECTOR_MENU_KEYS = [
+	...INSPECTOR_GROUPS.threads,
+	...INSPECTOR_GROUPS.agents,
+	...INSPECTOR_GROUPS.learning
+];
+/** Return whether persisted state names a legacy Inspector leaf. */
+function isInspectorMenuKey(value) {
+	return typeof value === "string" && INSPECTOR_MENU_KEYS.some((menuKey) => menuKey === value);
+}
+const INSPECTOR_PRIMARY_NAVIGATION = [
+	{
+		key: "threads",
+		label: "Threads",
+		icon: "MessageSquare"
+	},
+	{
+		key: "agents",
+		label: "Agents",
+		icon: "Bot"
+	},
+	{
+		key: "learning",
+		label: "Learning",
+		icon: "Brain"
+	}
+];
 const EDGE_MARGIN = 16;
 const DRAG_THRESHOLD = 6;
 const MIN_WINDOW_WIDTH = 600;
@@ -38,17 +76,49 @@ const DEFAULT_WINDOW_SIZE = {
 };
 const DOCKED_LEFT_WIDTH = 500;
 const MAX_AGENT_EVENTS = 200;
+const INTERACTIVE_FOCUS_BASE_STYLE = "outline-style:solid;outline-width:2px;outline-color:transparent;outline-offset:2px;cursor:pointer;";
 const MAX_PENDING_BANNER_VIEWED = 20;
 const MAX_TOTAL_EVENTS = 500;
 const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
-const THREADS_INTELLIGENCE_SIGNIN_URL = "https://dashboard.operations.copilotkit.ai/sign-in";
 const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
 const CAPABILITIES_TAB_LABEL = "Capabilities";
 const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
+const THREADS_RUNTIME_SETUP_DOCS_URL = "https://docs.copilotkit.ai/backend/runtime-endpoints#enable-rich-threads-routes";
+const THREADS_RUNTIME_SETUP_PROMPT = [
+	`Read ${THREADS_RUNTIME_SETUP_DOCS_URL} and finish setting up Rich Threads in this repository.`,
+	"",
+	"First inspect the repository's agent instructions, installed CopilotKit versions, Runtime adapter, frontend provider, route or proxy setup, and existing authentication. Preserve the current framework and deployment model. Preserve existing authentication middleware and access checks on every Runtime route.",
+	"",
+	"Follow the guide to enable the multi-route Runtime, align the frontend transport, scope identifyUser to the existing server-verified signed-in application user, and expose the full Runtime subtree for GET, POST, PATCH, and DELETE. Never use a fixed demo identity in production. If no trusted user identity exists, stop and ask me which auth source to use.",
+	"",
+	"Start the app and verify GET {basePath}/info reports threadEndpoints.list, inspect, mutations, and realtimeMetadata as true. Run focused tests, lint, and typecheck. Report the files changed, commands run, and verification result. If blocked, explain the missing input; do not invent setup."
+].join("\n");
 const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
+const THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK = "The demo video is unavailable. Use the example threads to explore Messages, AG-UI Events, and State.";
 const THREADS_EXAMPLE_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
 const THREADS_EXAMPLE_AGENT_ID = "threads-feature";
+/**
+* Selects the Thread store status with a stable object identity so loading-only
+* transitions reach one of the Inspector's two existing store subscriptions.
+*/
+function createThreadStoreStatusSelector() {
+	let previousError;
+	let previousIsLoading;
+	let previousStatus;
+	return (state) => {
+		const error = ɵselectThreadsError(state);
+		const isLoading = ɵselectThreadsIsLoading(state);
+		if (previousStatus && previousError === error && previousIsLoading === isLoading) return previousStatus;
+		previousError = error;
+		previousIsLoading = isLoading;
+		previousStatus = {
+			error,
+			isLoading
+		};
+		return previousStatus;
+	};
+}
 const AGENT_EVENT_TYPES = [
 	"RUN_STARTED",
 	"RUN_FINISHED",
@@ -134,6 +204,15 @@ const THREADS_EXAMPLE_THREADS = [
 		isExample: true
 	}
 ];
+/** Map Sam's fixed example IDs to a closed telemetry vocabulary. */
+function getExampleKind(threadId) {
+	switch (threadId) {
+		case "example-realtime-sync": return "realtime_sync";
+		case "example-manage-history": return "manage_history";
+		case "example-inspect-runs": return "inspect_runs";
+		default: return;
+	}
+}
 const THREADS_EXAMPLE_DETAILS = {
 	"example-realtime-sync": {
 		messages: [{
@@ -277,13 +356,13 @@ const THREADS_EXAMPLE_DETAILS = {
 const THREADS_EXAMPLE_TOUR_STEPS = [
 	{
 		tab: "timeline",
-		label: "Timeline",
+		label: "Messages",
 		title: "Read the run as a story",
 		body: "The timeline turns messages, tool calls, state changes, and run markers into a scannable debugging trail."
 	},
 	{
 		tab: "raw-events",
-		label: "Raw AG-UI Events",
+		label: "AG-UI Events",
 		title: "Drop into the protocol payloads",
 		body: "Raw events show the exact AG-UI stream behind the timeline when you need to verify ordering or payload shape."
 	},
@@ -294,6 +373,28 @@ const THREADS_EXAMPLE_TOUR_STEPS = [
 		body: "The state tab shows the saved values that make a thread resumable across sessions."
 	}
 ];
+/** Return only the three supported tour step/tab pairs. */
+function getExampleTourTelemetryPair(index) {
+	switch (index) {
+		case 0: return {
+			tour_step: 1,
+			tour_tab: "timeline"
+		};
+		case 1: return {
+			tour_step: 2,
+			tour_tab: "raw-events"
+		};
+		case 2: return {
+			tour_step: 3,
+			tour_tab: "state"
+		};
+		default: return;
+	}
+}
+/** Convert rendered action placement to its stable telemetry key. */
+function getMetadataActionPlacement(placement) {
+	return placement === "threads-footer" ? "threads_footer" : "threads_locked";
+}
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -305,10 +406,10 @@ function highlightedJson(obj) {
 	}
 	const colors = {
 		key: "#5558B2",
-		str: "#189370",
-		num: "#996300",
+		str: "#087653",
+		num: "#8a5900",
 		bool: "#c0333a",
-		nil: "#838389"
+		nil: "#68686e"
 	};
 	const json = JSON.stringify(obj, null, 2);
 	if (!json) return "";
@@ -338,7 +439,7 @@ function eventColors(type) {
 	};
 	if (type.startsWith("TOOL_CALL")) return {
 		bg: "rgba(133,236,206,0.15)",
-		fg: "#189370"
+		fg: "#087653"
 	};
 	if (type.startsWith("STATE")) return {
 		bg: "rgba(190,194,255,0.102)",
@@ -350,11 +451,11 @@ function eventColors(type) {
 	};
 	if (type.startsWith("RUN_") || type.startsWith("STEP_")) return {
 		bg: "rgba(255,172,77,0.2)",
-		fg: "#996300"
+		fg: "#8a5900"
 	};
 	return {
 		bg: "#F7F7F9",
-		fg: "#838389"
+		fg: "#68686e"
 	};
 }
 function formatTimestamp(ts) {
@@ -374,6 +475,7 @@ var CpkThreadList = class extends LitElement {
 		this.threads = [];
 		this.selectedThreadId = null;
 		this.errorMessage = null;
+		this.suppressEmptyState = false;
 		this._query = "";
 		this.onSearchInput = (event) => {
 			this._query = event.target.value;
@@ -384,6 +486,7 @@ var CpkThreadList = class extends LitElement {
 			threads: { attribute: false },
 			selectedThreadId: { attribute: false },
 			errorMessage: { attribute: false },
+			suppressEmptyState: { attribute: false },
 			_query: { state: true }
 		};
 	}
@@ -440,7 +543,18 @@ var CpkThreadList = class extends LitElement {
 
     /* ── Thread item ── */
     .cpk-tl__item {
+      appearance: none;
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0;
+      border: 0;
+      border-radius: 0;
       padding: 11px 13px;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: left;
       cursor: pointer;
       border-bottom: 1px solid #e9e9ef;
       border-left: 3px solid transparent;
@@ -460,6 +574,13 @@ var CpkThreadList = class extends LitElement {
       background: #bec2ff33;
     }
 
+    .cpk-tl__item:focus-visible {
+      outline-color: #5558b2;
+      outline-offset: -2px;
+      outline-style: solid;
+      outline-width: 2px;
+    }
+
     .cpk-tl__row1 {
       display: flex;
       align-items: center;
@@ -478,7 +599,7 @@ var CpkThreadList = class extends LitElement {
     }
 
     .cpk-tl__name--unnamed {
-      color: #838389;
+      color: #68686e;
       font-style: italic;
       font-weight: 400;
     }
@@ -486,7 +607,7 @@ var CpkThreadList = class extends LitElement {
     .cpk-tl__time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
-      color: #838389;
+      color: #68686e;
       flex-shrink: 0;
     }
 
@@ -511,14 +632,14 @@ var CpkThreadList = class extends LitElement {
 
     .cpk-tl__pill--example {
       background: rgba(133, 236, 206, 0.22);
-      color: #189370;
+      color: #087653;
     }
 
     /* ── Empty state ── */
     .cpk-tl__empty {
       padding: 32px 16px;
       text-align: center;
-      color: #838389;
+      color: #68686e;
       font-size: 12px;
       display: flex;
       flex-direction: column;
@@ -572,11 +693,13 @@ var CpkThreadList = class extends LitElement {
         <!-- Thread list -->
         <div class="cpk-tl__list">
           ${filtered.map((thread) => html`
-              <div
+              <button
+                type="button"
+                aria-current=${this.selectedThreadId === thread.id ? "true" : nothing}
                 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__row1">
                   <span
                     class="cpk-tl__name ${!thread.name ? "cpk-tl__name--unnamed" : ""}"
                     >${thread.name ?? "Untitled"}</span
@@ -584,16 +707,16 @@ var CpkThreadList = class extends LitElement {
                   <span class="cpk-tl__time"
                     >${this.relativeTime(thread.updatedAt)}</span
                   >
-                </div>
-                <div class="cpk-tl__meta">
+                </span>
+                <span class="cpk-tl__meta">
                   <span class="cpk-tl__pill">${thread.agentId}</span>
                   ${thread.isExample ? html`
                           <span class="cpk-tl__pill cpk-tl__pill--example">Example</span>
                         ` : nothing}
-                </div>
-              </div>
+                </span>
+              </button>
             `)}
-          ${filtered.length === 0 ? html`
+          ${filtered.length === 0 && !this.suppressEmptyState ? html`
                 <div class="cpk-tl__empty">
                   ${this.errorMessage ? html`
                         <svg
@@ -688,10 +811,12 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		this._messagesAbort = null;
 		this._eventsAbort = null;
 		this._stateAbort = null;
+		this._hasConnectedOnce = false;
 		this._dividerResizing = false;
 		this._dividerPointerId = -1;
 		this._dividerStartX = 0;
 		this._dividerStartWidth = 0;
+		this.domIdPrefix = `cpk-thread-detail-${CpkThreadInspector.nextDomId++}`;
 		this.onDetailDividerDown = (event) => {
 			this._dividerResizing = true;
 			this._dividerPointerId = event.pointerId;
@@ -746,6 +871,9 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 			_activatedTabs: { state: true }
 		};
 	}
+	static {
+		this.nextDomId = 1;
+	}
 	static {
 		this.COLLAPSE_THRESHOLD = 800;
 	}
@@ -753,11 +881,11 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		this.TAB_LIST = [
 			{
 				id: "timeline",
-				label: "Timeline"
+				label: "Messages"
 			},
 			{
 				id: "raw-events",
-				label: "Raw AG-UI Events"
+				label: "AG-UI Events"
 			},
 			{
 				id: "state",
@@ -800,6 +928,30 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		if (id === "state") return this.renderState();
 		return this.renderEvents();
 	}
+	/** Returns the stable DOM ID for one tab in this inspector instance. */
+	tabDomId(id) {
+		return `${this.domIdPrefix}-tab-${id}`;
+	}
+	/** Returns the stable DOM ID for the panel controlled by one tab. */
+	panelDomId(id) {
+		return `${this.domIdPrefix}-panel-${id}`;
+	}
+	/** Selects and focuses the tab targeted by an ARIA tabs navigation key. */
+	handleTabKeyDown(event, currentId) {
+		const currentIndex = CpkThreadInspector.TAB_LIST.findIndex((tab) => tab.id === currentId);
+		if (currentIndex < 0) return;
+		let targetIndex = null;
+		if (event.key === "ArrowRight") targetIndex = (currentIndex + 1) % CpkThreadInspector.TAB_LIST.length;
+		else if (event.key === "ArrowLeft") targetIndex = (currentIndex - 1 + CpkThreadInspector.TAB_LIST.length) % CpkThreadInspector.TAB_LIST.length;
+		else if (event.key === "Home") targetIndex = 0;
+		else if (event.key === "End") targetIndex = CpkThreadInspector.TAB_LIST.length - 1;
+		if (targetIndex === null) return;
+		const target = CpkThreadInspector.TAB_LIST[targetIndex];
+		if (!target) return;
+		event.preventDefault();
+		this.activateTab(target.id);
+		this.shadowRoot?.querySelector(`#${this.tabDomId(target.id)}`)?.focus();
+	}
 	activateTab(id) {
 		if (this._tab === id) return;
 		const isFirstActivation = !this._activatedTabs.has(id);
@@ -889,7 +1041,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       border-bottom: 2px solid transparent;
       cursor: pointer;
       background: transparent;
-      color: #838389;
+      color: #68686e;
       transition:
         color 0.12s,
         border-color 0.12s;
@@ -900,6 +1052,12 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       color: #010507;
     }
 
+    .cpk-td__tab:focus-visible {
+      outline: 2px solid #5558b2;
+      outline-offset: -3px;
+      border-radius: 4px;
+    }
+
     .cpk-td__tab--active {
       color: #010507;
       border-bottom-color: #bec2ff;
@@ -919,7 +1077,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       border: none;
       border-left: 1px solid #dbdbe5;
       background: transparent;
-      color: #838389;
+      color: #68686e;
       cursor: pointer;
       flex-shrink: 0;
       transition:
@@ -988,7 +1146,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
     }
 
     .cpk-td__metadata-label {
-      color: #838389;
+      color: #68686e;
       text-transform: uppercase;
       font-size: 9px;
     }
@@ -998,6 +1156,18 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       text-overflow: ellipsis;
     }
 
+    .cpk-td__metadata-pill--wrap {
+      max-width: 100%;
+      white-space: normal;
+    }
+
+    .cpk-td__metadata-value--wrap {
+      overflow: visible;
+      text-overflow: clip;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -1015,6 +1185,10 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       flex-shrink: 0;
     }
 
+    .cpk-td__panel[hidden] {
+      display: none;
+    }
+
     /* ── Empty state ─────────────────────────────────────────────────── */
     .cpk-td__empty-state {
       flex: 1;
@@ -1023,14 +1197,14 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       align-items: center;
       justify-content: center;
       gap: 8px;
-      color: #838389;
+      color: #68686e;
       font-size: 13px;
       padding: 40px 0;
     }
 
     .cpk-td__empty-hint {
       font-size: 11px;
-      color: #838389;
+      color: #68686e;
       text-align: center;
       max-width: 220px;
       line-height: 1.5;
@@ -1040,7 +1214,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
     .cpk-td__status {
       padding: 16px;
       font-size: 12px;
-      color: #838389;
+      color: #68686e;
       text-align: center;
     }
 
@@ -1119,7 +1293,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
       font-weight: 500;
-      color: #189370;
+      color: #087653;
       text-transform: uppercase;
       flex: 1;
     }
@@ -1128,15 +1302,15 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       text-transform: uppercase;
-      color: #189370;
+      color: #087653;
     }
 
     .cpk-td__tool-status--pending {
-      color: #996300;
+      color: #8a5900;
     }
 
     .cpk-td__tool-chevron {
-      color: #838389;
+      color: #68686e;
       font-size: 10px;
     }
 
@@ -1150,7 +1324,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       font-weight: 500;
-      color: #838389;
+      color: #68686e;
       text-transform: uppercase;
       margin-bottom: 4px;
       letter-spacing: 0.3px;
@@ -1182,7 +1356,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       background: rgba(133, 236, 206, 0.15);
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
-      color: #189370;
+      color: #087653;
       text-transform: uppercase;
       font-weight: 500;
       border-bottom: 1px solid #e9e9ef;
@@ -1204,7 +1378,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       align-items: center;
       gap: 8px;
       padding: 5px 0;
-      color: #838389;
+      color: #68686e;
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       text-transform: uppercase;
@@ -1261,7 +1435,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
     .cpk-td__timeline-time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
-      color: #838389;
+      color: #68686e;
       flex-shrink: 0;
     }
 
@@ -1439,7 +1613,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
     .cpk-td__event-time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
-      color: #838389;
+      color: #68686e;
     }
 
     .cpk-td__event-payload {
@@ -1511,7 +1685,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
       font-weight: 500;
-      color: #838389;
+      color: #68686e;
       text-transform: uppercase;
       letter-spacing: 0.6px;
       margin-bottom: 8px;
@@ -1532,7 +1706,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
     }
 
     .cpk-tdp__label {
-      color: #838389;
+      color: #68686e;
       font-size: 11px;
       white-space: nowrap;
       flex-shrink: 0;
@@ -1561,6 +1735,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
   `;
 	}
 	updated(_changed) {
+		if (!this.isConnected) return;
 		const loadKey = this.currentLoadKey();
 		if (loadKey !== this._lastLoadKey) {
 			this._lastLoadKey = loadKey;
@@ -1583,6 +1758,16 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 			this.fetchMessages(this.threadId, true);
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this._hasConnectedOnce) this.requestUpdate();
+		this._hasConnectedOnce = true;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resetLoadedThreadData();
+		this._lastLoadKey = null;
+	}
 	canFetchMessages() {
 		return !!this.provider?.getMessages || !!this.runtimeUrl && this.threadInspectionAvailable;
 	}
@@ -2223,12 +2408,22 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
         <div class="cpk-td__left">
           <!-- Tab bar -->
           <div class="cpk-td__tabs-header">
-            <div class="cpk-td__tab-group" role="tablist">
+            <div
+              class="cpk-td__tab-group"
+              role="tablist"
+              aria-label="Thread detail views"
+            >
               ${CpkThreadInspector.TAB_LIST.map((tab) => html`
                   <button
+                    id=${this.tabDomId(tab.id)}
+                    type="button"
                     role="tab"
+                    aria-controls=${this.panelDomId(tab.id)}
+                    aria-selected=${this._tab === tab.id ? "true" : "false"}
+                    tabindex=${this._tab === tab.id ? "0" : "-1"}
                     class="cpk-td__tab ${this._tab === tab.id ? "cpk-td__tab--active" : ""}"
                     @click=${() => this.activateTab(tab.id)}
+                    @keydown=${(event) => this.handleTabKeyDown(event, tab.id)}
                   >
                     ${tab.label}
                   </button>
@@ -2244,8 +2439,11 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
                     <div class="cpk-td__status">Loading…</div>
                   ` : nothing}
             ${CpkThreadInspector.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? html`<div
+                    id=${this.panelDomId(tab.id)}
                     class="cpk-td__panel"
-                    style=${this._tab === tab.id && !this._panelInitializing ? "" : "display:none"}
+                    role="tabpanel"
+                    aria-labelledby=${this.tabDomId(tab.id)}
+                    ?hidden=${this._tab !== tab.id || this._panelInitializing}
                   >
                     ${this.renderTabContent(tab.id)}
                   </div>` : nothing)}
@@ -2280,34 +2478,53 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 	}
 	renderMetadataStrip() {
 		const metadata = this.metadata;
-		const pills = [
-			{
-				label: "Thread",
-				value: metadata?.id ?? this.threadId
-			},
+		const pills = [{
+			label: "Name",
+			value: metadata?.name ?? this.thread?.name ?? "Untitled"
+		}, {
+			label: "ID",
+			value: metadata?.id ?? this.threadId ?? "—",
+			wrap: true
+		}];
+		for (const fact of [
 			{
 				label: "Agent",
 				value: metadata?.agentId
 			},
 			{
-				label: "End user",
-				value: metadata?.endUserId ?? metadata?.createdById
+				label: "Created",
+				value: metadata?.createdAt
 			},
 			{
-				label: "Status",
-				value: metadata?.status
+				label: "Updated",
+				value: metadata?.updatedAt
 			}
-		].filter((pill) => pill.value != null && pill.value !== "");
+		]) {
+			if (fact.value == null || fact.value === "") continue;
+			pills.push({
+				label: fact.label,
+				value: fact.label === "Created" || fact.label === "Updated" ? this.fmtTime(fact.value) : fact.value
+			});
+		}
 		const bulkControls = this.renderActiveBulkControls();
-		if (pills.length === 0 && bulkControls === nothing) return nothing;
 		return html`
-      <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
+      <div
+        class="cpk-td__metadata-strip"
+        role="group"
+        aria-label="Thread metadata"
+      >
         <div class="cpk-td__metadata-pills">
           ${pills.map((pill) => html`
-              <span class="cpk-td__metadata-pill" title=${pill.value ?? ""}>
+              <span
+                class="cpk-td__metadata-pill ${pill.wrap ? "cpk-td__metadata-pill--wrap" : ""}"
+                role="group"
+                title=${pill.value}
+                aria-label=${`${pill.label}: ${pill.value}`}
+              >
                 <span class="cpk-td__metadata-label">${pill.label}</span>
-                <span class="cpk-td__metadata-value"
-                  >${this.shortId(pill.value)}</span
+                <span
+                  class="cpk-td__metadata-value ${pill.wrap ? "cpk-td__metadata-value--wrap" : ""}"
+                  >${pill.value}</span
                 >
               </span>
             `)}
@@ -2402,8 +2619,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
         <div class="cpk-td__empty-state">
           <span>No timeline events captured</span>
           <span class="cpk-td__empty-hint"
-            >Timeline rows are normalized from AG-UI events. Open Raw AG-UI Events or
-            State to inspect the available thread data.</span
+            >Timeline rows are normalized from AG-UI events. Open AG-UI Events or State
+            to inspect the available thread data.</span
           >
         </div>
       `;
@@ -2577,7 +2794,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
           <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="#087653"
               stroke-width="1.2"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -2809,7 +3026,7 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">ID</span>
         <span class="cpk-tdp__value cpk-tdp__value--wrap"
-          >${this.shortId(metadata?.id)}</span
+          >${metadata?.id ?? this.threadId ?? "—"}</span
         >
       </div>
       <div class="cpk-tdp__row">
@@ -3049,7 +3266,7 @@ var CpkMemoryList = class extends LitElement {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       margin-left: 4px;
-      color: #838389;
+      color: #68686e;
     }
 
     /* ── List ── */
@@ -3116,7 +3333,7 @@ var CpkMemoryList = class extends LitElement {
       font-weight: 500;
       white-space: nowrap;
       background: #f0f0f5;
-      color: #838389;
+      color: #68686e;
     }
 
     /* Content */
@@ -3138,7 +3355,7 @@ var CpkMemoryList = class extends LitElement {
 
     .cpk-ml__footer-threads {
       font-size: 10px;
-      color: #838389;
+      color: #68686e;
     }
 
     .cpk-ml__footer-id {
@@ -3151,7 +3368,7 @@ var CpkMemoryList = class extends LitElement {
     .cpk-ml__empty {
       padding: 32px 16px;
       text-align: center;
-      color: #838389;
+      color: #68686e;
       font-size: 12px;
       display: flex;
       flex-direction: column;
@@ -3232,7 +3449,7 @@ var CpkMemoryList = class extends LitElement {
     .cpk-ml__recall-clear {
       font-family: "Plus Jakarta Sans", sans-serif;
       font-size: 10px;
-      color: #838389;
+      color: #68686e;
       background: none;
       border: none;
       cursor: pointer;
@@ -3243,7 +3460,7 @@ var CpkMemoryList = class extends LitElement {
     }
     .cpk-ml__recall-msg {
       font-size: 11px;
-      color: #838389;
+      color: #68686e;
       line-height: 1.45;
     }
     .cpk-ml__recall-msg--error {
@@ -3267,7 +3484,7 @@ var CpkMemoryList = class extends LitElement {
     /* ── Scope badge variants ── */
     .cpk-ml__scope-badge--user {
       background: #f0f0f5;
-      color: #838389;
+      color: #68686e;
     }
     .cpk-ml__scope-badge--project {
       background: #fef3c7;
@@ -3486,6 +3703,8 @@ var WebInspectorElement = class extends LitElement {
 		this._recallQuery = "";
 		this._recallSeq = 0;
 		this.runtimeStatus = null;
+		this.inspectorMetadataProjection = projectInspectorMetadata(void 0, void 0);
+		this.metadataTelemetryFingerprints = /* @__PURE__ */ new Map();
 		this.coreProperties = {};
 		this.lastCoreError = null;
 		this.agentSubscriptions = /* @__PURE__ */ new Map();
@@ -3507,8 +3726,19 @@ var WebInspectorElement = class extends LitElement {
 		this.isOpen = false;
 		this.draggedDuringInteraction = false;
 		this.ignoreNextButtonClick = false;
-		this.selectedMenu = "ag-ui-events";
+		this.selectedMenu = "threads";
+		this.pendingPersistedMenu = null;
+		this.hasResolvedCore = false;
+		this.settingsOpen = false;
+		this.lastSelectedMenuByGroup = {
+			threads: "threads",
+			agents: "ag-ui-events",
+			learning: "memories"
+		};
+		this.lastScrolledAgentNavigationLayout = null;
 		this.selectedThreadId = null;
+		this.selectedRealThreadIsExplicit = false;
+		this.selectedLocalExampleThreadId = null;
 		this.threadListWidth = 290;
 		this.threadDividerResizing = false;
 		this.threadDividerPointerId = -1;
@@ -3518,7 +3748,10 @@ var WebInspectorElement = class extends LitElement {
 		this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
 		this._threadsByAgent = /* @__PURE__ */ new Map();
 		this._threadsErrorByAgent = /* @__PURE__ */ new Map();
+		this._threadsLoadingByAgent = /* @__PURE__ */ new Map();
 		this._ownedThreadStores = /* @__PURE__ */ new Map();
+		this.threadCapabilityEnabled = null;
+		this.threadCapabilityGeneration = 0;
 		this.contextMenuOpen = false;
 		this.dockMode = "floating";
 		this.previousBodyMargins = null;
@@ -3551,18 +3784,28 @@ var WebInspectorElement = class extends LitElement {
 		this.pendingBannerViewed = [];
 		this.clickedBannerIds = /* @__PURE__ */ new Set();
 		this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
-		this.viewedExampleThreadIds = /* @__PURE__ */ new Set();
-		this.selectedExampleThreadIds = /* @__PURE__ */ new Set();
+		this.viewedExampleKinds = /* @__PURE__ */ new Set();
+		this.selectedExampleKinds = /* @__PURE__ */ new Set();
 		this.viewedExampleTourSteps = /* @__PURE__ */ new Set();
 		this.exampleThreadProviders = /* @__PURE__ */ new Map();
 		this.exampleTourDismissed = false;
 		this.exampleTourActive = false;
 		this.exampleTourStep = 0;
 		this.exampleTourAutoShown = false;
-		this.threadsExampleOverviewVideoShouldLoad = false;
-		this.threadsExampleOverviewVideoReady = false;
+		this.threadsExampleOverviewVideoState = "deferred";
+		this.threadsExampleOverviewVideoLoaded = false;
+		this.threadsExampleOverviewVideoReducedMotion = false;
 		this.threadsExampleOverviewVideoLoadTimer = null;
 		this.threadsExampleOverviewVideoIdleCallbackId = null;
+		this.threadsExampleOverviewVideoElement = null;
+		this.threadsExampleOverviewVideoListeners = null;
+		this.threadsExampleOverviewVideoLifecycleGeneration = 0;
+		this.threadsExampleOverviewVideoPlayAttemptGeneration = 0;
+		this.threadsExampleOverviewVideoPlayPromise = null;
+		this.threadsExampleOverviewVideoPlayOnNextBind = false;
+		this.threadsSetupPromptCopyState = "idle";
+		this.threadsSetupPromptCopyResetTimeoutId = null;
+		this.threadsSetupPromptCopyGeneration = 0;
 		this.contextState = {
 			button: {
 				position: {
@@ -3609,7 +3852,7 @@ var WebInspectorElement = class extends LitElement {
 			const target = event.currentTarget;
 			const context = target?.dataset.dragContext === "window" ? "window" : "button";
 			const eventTarget = event.target;
-			if (context === "window" && eventTarget?.closest("button")) return;
+			if (context === "window" && eventTarget?.closest("button, a, nav")) return;
 			this.pointerContext = context;
 			this.measureContext(context);
 			event.preventDefault();
@@ -3754,8 +3997,10 @@ var WebInspectorElement = class extends LitElement {
 			this.measureContext("button");
 			this.applyAnchorPosition("button");
 			this.measureContext("window");
+			this.contextState.window.size = this.clampWindowSize(this.contextState.window.size);
 			if (this.hasCustomPosition.window) this.applyAnchorPosition("window");
 			else this.centerContext("window");
+			this.requestUpdate();
 			this.updateHostTransform();
 		};
 		this.contextOptions = [{
@@ -3768,26 +4013,32 @@ var WebInspectorElement = class extends LitElement {
 		this.expandedTools = /* @__PURE__ */ new Set();
 		this.expandedContextItems = /* @__PURE__ */ new Set();
 		this.copiedContextItems = /* @__PURE__ */ new Set();
+		this.handleInspectorMetadataActionClick = (action, placement) => {
+			if (!this.isOpen || this.runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
+			if (action.kind === "enable_intelligence") {
+				this.handleThreadsIntelligenceSignupClick();
+				return;
+			}
+			try {
+				trackMetadataActionClicked({
+					action_kind: action.kind,
+					license_bucket: this.inspectorMetadataProjection.licenseState,
+					...this.getMetadataTelemetryContext(),
+					action_placement: getMetadataActionPlacement(placement)
+				});
+			} catch {}
+		};
 		this.handleTalkToEngineerClick = () => {
 			if (this.core?.telemetryDisabled) return;
-			trackTalkToEngineerClicked(this.getThreadsTelemetryProps({
-				cta: "talk_to_engineer",
-				cta_surface: "threads_header"
-			}, { includeUrlAttribution: true }));
+			trackTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_header"));
 		};
 		this.handleThreadsIntelligenceSignupClick = () => {
 			if (this.core?.telemetryDisabled) return;
-			trackThreadsIntelligenceSignupClicked(this.getThreadsTelemetryProps({
-				cta: "signup",
-				cta_surface: "threads_locked"
-			}, { includeUrlAttribution: true }));
+			trackThreadsIntelligenceSignupClicked(this.getThreadsCtaTelemetryProps("signup", "threads_locked"));
 		};
 		this.handleThreadsTalkToEngineerClick = () => {
 			if (this.core?.telemetryDisabled) return;
-			trackThreadsTalkToEngineerClicked(this.getThreadsTelemetryProps({
-				cta: "talk_to_engineer",
-				cta_surface: "threads_locked"
-			}, { includeUrlAttribution: true }));
+			trackThreadsTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_locked"));
 		};
 		this.handleThreadDividerPointerDown = (event) => {
 			this.threadDividerResizing = true;
@@ -3809,9 +4060,51 @@ var WebInspectorElement = class extends LitElement {
 			if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
 			this.threadDividerResizing = false;
 		};
-		this.handleThreadsExampleOverviewVideoLoaded = () => {
-			this.threadsExampleOverviewVideoReady = true;
+		this.handleThreadsExampleOverviewVideoControl = () => {
+			const video = this.threadsExampleOverviewVideoElement;
+			if (!video) return;
+			if (this.threadsExampleOverviewVideoState === "playing") {
+				this.invalidateThreadsExampleOverviewVideoPlay();
+				try {
+					video.pause();
+				} catch {}
+				this.threadsExampleOverviewVideoState = "ready";
+				this.requestUpdate();
+				return;
+			}
+			if (this.threadsExampleOverviewVideoState === "failed") {
+				this.cleanupThreadsExampleOverviewVideo();
+				if (!this.isConnected || !video.isConnected) return;
+				this.threadsExampleOverviewVideoPlayOnNextBind = true;
+				this.requestUpdate();
+				return;
+			}
+			this.cancelThreadsExampleOverviewVideoGate();
+			const lifecycleGeneration = this.threadsExampleOverviewVideoLifecycleGeneration;
+			if (this.threadsExampleOverviewVideoState === "deferred") {
+				this.activateThreadsExampleOverviewVideo(video, lifecycleGeneration, true);
+				return;
+			}
+			this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
+		};
+		this.handleThreadsSetupPromptCopy = async () => {
+			const generation = this.threadsSetupPromptCopyGeneration += 1;
+			if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
+				window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
+				this.threadsSetupPromptCopyResetTimeoutId = null;
+			}
+			this.threadsSetupPromptCopyState = "idle";
 			this.requestUpdate();
+			if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+				this.showThreadsSetupPromptCopyState("error", generation);
+				return;
+			}
+			try {
+				await navigator.clipboard.writeText(THREADS_RUNTIME_SETUP_PROMPT);
+				this.showThreadsSetupPromptCopyState("copied", generation);
+			} catch {
+				this.showThreadsSetupPromptCopyState("error", generation);
+			}
 		};
 		this.handleClearEvents = () => {
 			if (this.selectedContext === "all-agents") {
@@ -3884,7 +4177,11 @@ var WebInspectorElement = class extends LitElement {
 		const oldValue = this._core;
 		if (oldValue === value) return;
 		this.detachFromCore();
+		const hadResolvedCore = this.hasResolvedCore;
 		this._core = value ?? null;
+		if (this._core) this.hasResolvedCore = true;
+		if (!hadResolvedCore && this._core) this.resolvePendingPersistedMenu();
+		else if (hadResolvedCore) this.reconcileSelectedMenuVisibility();
 		this.requestUpdate("core", oldValue);
 		if (this._core) this.attachToCore(this._core);
 	}
@@ -3930,36 +4227,141 @@ var WebInspectorElement = class extends LitElement {
 			}
 		];
 	}
+	/** Return the primary navigation group that owns a legacy leaf key. */
+	getGroupForMenu(key) {
+		for (const group of INSPECTOR_PRIMARY_NAVIGATION) if (INSPECTOR_GROUPS[group.key].some((menuKey) => menuKey === key)) return group.key;
+		return "threads";
+	}
+	/** Return the primary group for the current legacy leaf selection. */
+	get selectedGroup() {
+		return this.getGroupForMenu(this.selectedMenu);
+	}
+	/** Return only currently visible legacy leaves owned by a group. */
+	getVisibleMenuItemsForGroup(group) {
+		return this.menuItems.filter((item) => INSPECTOR_GROUPS[group].some((menuKey) => menuKey === item.key));
+	}
+	/** Resolve a group's last visible leaf, falling back to its first leaf. */
+	getMenuForGroup(group) {
+		const visibleItems = this.getVisibleMenuItemsForGroup(group);
+		const rememberedMenu = this.lastSelectedMenuByGroup[group];
+		return visibleItems.find((item) => item.key === rememberedMenu)?.key ?? visibleItems[0]?.key ?? "threads";
+	}
+	/** Replace a leaf that became hidden with its group's first visible leaf. */
+	reconcileSelectedMenuVisibility() {
+		if (this.menuItems.some((item) => item.key === this.selectedMenu)) return;
+		const group = this.getGroupForMenu(this.selectedMenu);
+		this.selectedMenu = this.getVisibleMenuItemsForGroup(group)[0]?.key ?? "threads";
+		this.lastSelectedMenuByGroup[group] = this.selectedMenu;
+		this.persistState();
+	}
+	/** Open a primary group at its last currently visible legacy leaf. */
+	handleGroupSelect(group) {
+		this.handleMenuSelect(this.getMenuForGroup(group));
+	}
+	/** Toggle Settings without replacing or persisting the active legacy leaf. */
+	handleSettingsToggle() {
+		this.settingsOpen = !this.settingsOpen;
+		this.contextMenuOpen = false;
+		this.requestUpdate();
+	}
 	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";
+		const endpoints = this._core?.threadEndpoints;
+		return endpoints !== null && typeof endpoints === "object" && endpoints.list !== false;
+	}
+	synchronizeThreadCapability() {
+		const enabled = this.areThreadEndpointsAvailable();
+		if (this.threadCapabilityEnabled === enabled) return;
+		this.threadCapabilityEnabled = enabled;
+		this.threadCapabilityGeneration += 1;
+		if (enabled) {
+			const core = this.core;
+			if (!core) return;
+			const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
+			for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
+			for (const agent of Object.values(core.agents)) if (agent?.agentId) this.ensureOwnedThreadStore(agent.agentId);
+			return;
+		}
+		this.teardownThreadStoreSubscriptions();
+		this.teardownOwnedThreadStores();
+		if (this.selectedThreadId !== this.selectedLocalExampleThreadId) {
+			this.selectedThreadId = null;
+			this.selectedLocalExampleThreadId = null;
+		}
+		this.selectedRealThreadIsExplicit = false;
+		this.requestUpdate();
 	}
 	getActiveThreadsState() {
 		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 threadsLoading = this.selectedContext === "all-agents" ? Array.from(this._threadsLoadingByAgent.values()).some(Boolean) : this._threadsLoadingByAgent.get(this.selectedContext) ?? false;
 		return {
 			displayThreads,
-			threadsErrorMessage
+			threadsErrorMessage,
+			threadsLoading
 		};
 	}
-	getThreadsTelemetryProps(extra = {}, options = {}) {
-		const distinctId = options.includeUrlAttribution && !this.core?.telemetryDisabled ? getTelemetryDistinctIdForUrl() : null;
+	/** Bucket trusted usage without retaining exact counts or limits. */
+	getThreadsUsageBucket() {
+		const usage = this.inspectorMetadataProjection.usage;
+		if (!usage) return "absent";
+		if (usage.used === 0) return "empty";
+		if (usage.limit.kind === "finite") return usage.used < usage.limit.value ? "within_limit" : "at_or_over_limit";
+		if (usage.limit.kind === "unlimited") return "unlimited";
+		return "unknown_limit";
+	}
+	/** Classify finite usage for render-only capacity copy and color. */
+	getThreadsCapacityState() {
+		const usage = this.inspectorMetadataProjection.usage;
+		if (!usage || usage.limit.kind !== "finite") return void 0;
+		if (usage.used >= usage.limit.value) return "critical";
+		const warningThreshold = usage.limit.value - Math.floor(usage.limit.value / 10);
+		return usage.used >= warningThreshold ? "warning" : "normal";
+	}
+	/** Bucket trusted expiry data independently from the usage-limit bucket. */
+	getThreadsExpiryBucket() {
+		const usage = this.inspectorMetadataProjection.usage;
+		if (!usage || !Object.prototype.hasOwnProperty.call(usage, "expiringSoonCount")) return "unavailable";
+		if (usage.expiringSoonCount === 0) return "zero";
+		return typeof usage.expiringSoonCount === "number" && usage.expiringSoonCount > 0 ? "positive" : "unavailable";
+	}
+	/** Report only real rows visible in the active, settled Threads view. */
+	hasActiveVisibleThreads() {
+		if (this.selectedMenu !== "threads" || this.settingsOpen || !this.areThreadEndpointsAvailable()) return false;
+		const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
+		return !threadsErrorMessage && !threadsLoading && displayThreads.length > 0;
+	}
+	/** Build the closed common property set shared by all Thread events. */
+	getThreadsTelemetryProps() {
 		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
+			telemetry_disabled: false,
+			has_threads: this.hasActiveVisibleThreads(),
+			usage_bucket: this.getThreadsUsageBucket(),
+			expiry_bucket: this.getThreadsExpiryBucket(),
+			group_key: "threads",
+			leaf_key: "threads"
+		};
+	}
+	/** Add the frozen CTA leaves and anonymous URL attribution when allowed. */
+	getThreadsCtaTelemetryProps(cta, ctaSurface) {
+		const distinctId = getTelemetryDistinctIdForUrl();
+		return {
+			...this.getThreadsTelemetryProps(),
+			cta,
+			cta_surface: ctaSurface,
+			posthog_distinct_id: distinctId ?? void 0
 		};
 	}
 	getMemoriesTelemetryProps() {
@@ -3972,9 +4374,6 @@ var WebInspectorElement = class extends LitElement {
 	getIntelligenceSignupUrl() {
 		return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
 	}
-	getThreadsIntelligenceSignupUrl() {
-		return this.appendRefParam(THREADS_INTELLIGENCE_SIGNIN_URL, "cpk-inspector");
-	}
 	getTalkToEngineerUrl() {
 		return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
 	}
@@ -3984,29 +4383,53 @@ var WebInspectorElement = class extends LitElement {
 	getThreadsDocsUrl() {
 		return this.appendRefParam(THREADS_DOCS_URL, "cpk-inspector-threads");
 	}
+	getThreadsRuntimeSetupDocsUrl() {
+		return this.appendRefParam(THREADS_RUNTIME_SETUP_DOCS_URL, "cpk-inspector-threads");
+	}
+	getThreadsIntelligenceSignupUrl() {
+		return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector-threads");
+	}
 	getSelfHostedIntelligenceUrl() {
 		return this.appendRefParam(SELF_HOSTED_INTELLIGENCE_URL, "cpk-inspector-threads");
 	}
+	/** Selects the onboarding path for an enabled runtime with no saved Threads. */
+	getThreadsEmptyOnboardingAction() {
+		const planCode = this.inspectorMetadataProjection.plan?.code.trim().toLowerCase();
+		if (planCode === "team_self_hosted" || planCode === "team-self-hosted") return {
+			href: this.getSelfHostedIntelligenceUrl(),
+			label: "Explore self-hosted Intelligence"
+		};
+		return {
+			href: this.getThreadsIntelligenceSignupUrl(),
+			label: "Sign up for Intelligence"
+		};
+	}
 	subscribeToThreadStore(agentId, store) {
 		if (!this.areThreadEndpointsAvailable()) return;
 		if (this._threadStoreSubscriptions.has(agentId)) return;
+		const capabilityGeneration = this.threadCapabilityGeneration;
 		const threadsSub = store.select(ɵselectThreads).subscribe((threads) => {
+			if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 			this._threadsByAgent.set(agentId, threads);
 			this._threads = Array.from(this._threadsByAgent.values()).flat();
 			this.autoSelectLatestThread();
 			this.requestUpdate();
 		});
-		const errorSub = store.select(ɵselectThreadsError).subscribe((error) => {
+		const statusSub = store.select(createThreadStoreStatusSelector()).subscribe(({ error, isLoading }) => {
+			if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 			if (error) this._threadsErrorByAgent.set(agentId, error);
 			else this._threadsErrorByAgent.delete(agentId);
+			this._threadsLoadingByAgent.set(agentId, isLoading);
 			this.requestUpdate();
 		});
 		this._threadStoreSubscriptions.set(agentId, () => {
 			threadsSub.unsubscribe();
-			errorSub.unsubscribe();
+			statusSub.unsubscribe();
 		});
+		if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 		const initialState = store.getState();
 		this._threadsByAgent.set(agentId, ɵselectThreads(initialState));
+		this._threadsLoadingByAgent.set(agentId, ɵselectThreadsIsLoading(initialState));
 		const initialError = ɵselectThreadsError(initialState);
 		if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
 		else this._threadsErrorByAgent.delete(agentId);
@@ -4014,22 +4437,37 @@ var WebInspectorElement = class extends LitElement {
 		this.autoSelectLatestThread();
 	}
 	autoSelectLatestThread() {
-		if (this._threads.length === 0) return;
-		if (!(this.selectedThreadId != null && !this.isExampleThreadId(this.selectedThreadId) && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
+		if (!this.areThreadEndpointsAvailable()) return;
+		const { displayThreads } = this.getActiveThreadsState();
+		const previousSelectedThreadId = this.selectedThreadId;
+		if (this.selectedLocalExampleThreadId !== null && previousSelectedThreadId === this.selectedLocalExampleThreadId && displayThreads.length === 0) {
+			this.selectedRealThreadIsExplicit = false;
+			return;
+		}
+		if (this.selectedLocalExampleThreadId !== null) this.exampleTourActive = false;
+		this.selectedLocalExampleThreadId = null;
+		const explicitSelectedThreadId = this.selectedRealThreadIsExplicit ? previousSelectedThreadId : null;
+		const nextSelectedThreadId = selectVisibleRealThreadId({
+			threads: displayThreads,
+			selectedThreadId: explicitSelectedThreadId
+		});
+		this.selectedThreadId = nextSelectedThreadId;
+		this.selectedRealThreadIsExplicit = explicitSelectedThreadId !== null && nextSelectedThreadId === explicitSelectedThreadId;
 	}
 	teardownThreadStoreSubscriptions() {
 		for (const unsub of this._threadStoreSubscriptions.values()) unsub();
 		this._threadStoreSubscriptions.clear();
 		this._threadsByAgent.clear();
 		this._threadsErrorByAgent.clear();
+		this._threadsLoadingByAgent.clear();
 		this._threads = [];
 	}
 	ensureOwnedThreadStore(agentId) {
+		if (!this.areThreadEndpointsAvailable()) return;
 		if (this._ownedThreadStores.has(agentId)) return;
 		if (this.core?.getThreadStore(agentId)) return;
 		const core = this.core;
 		if (!core?.runtimeUrl) return;
-		if (!this.areThreadEndpointsAvailable()) return;
 		const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
 		store.start();
 		store.setContext({
@@ -4043,11 +4481,13 @@ var WebInspectorElement = class extends LitElement {
 		core.registerThreadStore(agentId, store);
 	}
 	refreshOwnedThreadStore(agentId) {
+		if (!this.areThreadEndpointsAvailable()) return;
 		const store = this._ownedThreadStores.get(agentId);
 		if (!store) return;
 		store.refresh();
 	}
 	updateOwnedThreadStoreHeaders(headers) {
+		if (!this.areThreadEndpointsAvailable()) return;
 		const core = this.core;
 		if (!core?.runtimeUrl) return;
 		for (const [agentId, store] of this._ownedThreadStores) store.setContext({
@@ -4060,32 +4500,62 @@ var WebInspectorElement = class extends LitElement {
 	removeOwnedThreadStore(agentId) {
 		const store = this._ownedThreadStores.get(agentId);
 		if (!store) return;
-		store.stop();
-		this.core?.unregisterThreadStore(agentId);
 		this._ownedThreadStores.delete(agentId);
+		store.stop();
+		if (this.core?.getThreadStore(agentId) === store) this.core.unregisterThreadStore(agentId);
 	}
 	teardownOwnedThreadStores() {
-		for (const [agentId, store] of this._ownedThreadStores) {
+		const ownedThreadStores = Array.from(this._ownedThreadStores);
+		this._ownedThreadStores.clear();
+		for (const [agentId, store] of ownedThreadStores) {
 			store.stop();
-			this.core?.unregisterThreadStore(agentId);
+			if (this.core?.getThreadStore(agentId) === store) this.core.unregisterThreadStore(agentId);
 		}
-		this._ownedThreadStores.clear();
+	}
+	coreSupportsInspectorMetadata(core) {
+		try {
+			return "inspectorMetadata" in core;
+		} catch {
+			return false;
+		}
+	}
+	readCoreInspectorMetadata(core) {
+		if (!this.coreSupportsInspectorMetadata(core)) return;
+		try {
+			return core.inspectorMetadata;
+		} catch {
+			return;
+		}
+	}
+	updateInspectorMetadataProjection(value) {
+		this.inspectorMetadataValue = value;
+		let runtimeLicense;
+		try {
+			runtimeLicense = this._core?.licenseStatus;
+		} catch {
+			runtimeLicense = void 0;
+		}
+		this.inspectorMetadataProjection = projectInspectorMetadata(value, runtimeLicense);
 	}
 	attachToCore(core) {
 		this.runtimeStatus = core.runtimeConnectionStatus;
 		this.coreProperties = core.properties;
 		this.lastCoreError = null;
+		const supportsInspectorMetadata = this.coreSupportsInspectorMetadata(core);
+		this.updateInspectorMetadataProjection(this.readCoreInspectorMetadata(core));
 		this.coreSubscriber = {
 			onRuntimeConnectionStatusChanged: ({ status }) => {
 				this.runtimeStatus = status;
+				this.updateInspectorMetadataProjection(this.inspectorMetadataValue);
+				const threadCapabilityWasEnabled = this.threadCapabilityEnabled === true;
+				this.synchronizeThreadCapability();
 				if (status === "connected") {
 					if (!core.telemetryDisabled) {
 						ensureTelemetryDistinctId();
 						maybeShowDisclosure();
 					}
 					this.flushPendingBannerViewed();
-					if (this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
-					else this.teardownOwnedThreadStores();
+					if (threadCapabilityWasEnabled && this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
 				} else {
 					this._threadsByAgent.clear();
 					this._threads = [];
@@ -4100,6 +4570,11 @@ var WebInspectorElement = class extends LitElement {
 				this.updateOwnedThreadStoreHeaders(headers);
 				this.requestUpdate();
 			},
+			...supportsInspectorMetadata ? { onInspectorMetadataChanged: ({ inspectorMetadata }) => {
+				if (this._core !== core) return;
+				this.updateInspectorMetadataProjection(inspectorMetadata);
+				this.requestUpdate();
+			} } : {},
 			onError: ({ code, error }) => {
 				this.lastCoreError = {
 					code,
@@ -4118,18 +4593,25 @@ var WebInspectorElement = class extends LitElement {
 				this.requestUpdate();
 			},
 			onThreadStoreRegistered: ({ agentId, store }) => {
+				if (!this.areThreadEndpointsAvailable()) return;
 				this.subscribeToThreadStore(agentId, store);
 				this.requestUpdate();
 			},
-			onThreadStoreUnregistered: ({ agentId }) => {
+			onThreadStoreUnregistered: ({ agentId, prevStore }) => {
 				const unsub = this._threadStoreSubscriptions.get(agentId);
 				if (unsub) {
 					unsub();
 					this._threadStoreSubscriptions.delete(agentId);
 				}
+				if (this._ownedThreadStores.get(agentId) === prevStore) {
+					this._ownedThreadStores.delete(agentId);
+					prevStore.stop();
+				}
 				this._threadsByAgent.delete(agentId);
 				this._threadsErrorByAgent.delete(agentId);
+				this._threadsLoadingByAgent.delete(agentId);
 				this._threads = Array.from(this._threadsByAgent.values()).flat();
+				this.autoSelectLatestThread();
 				this.requestUpdate();
 			}
 		};
@@ -4143,7 +4625,7 @@ var WebInspectorElement = class extends LitElement {
 			this.flushPendingBannerViewed();
 		}
 		const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
-		for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
+		if (this.areThreadEndpointsAvailable()) for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
 		if (core.context) this.contextStore = this.normalizeContextStore(core.context);
 		if (this.selectedMenu === "memories") this.ensureMemorySubscription();
 	}
@@ -4245,6 +4727,13 @@ var WebInspectorElement = class extends LitElement {
 		this.requestUpdate();
 	}
 	detachFromCore() {
+		this.threadCapabilityGeneration += 1;
+		this.threadCapabilityEnabled = null;
+		if (this.selectedThreadId !== this.selectedLocalExampleThreadId) {
+			this.selectedThreadId = null;
+			this.selectedLocalExampleThreadId = null;
+		}
+		this.selectedRealThreadIsExplicit = false;
 		if (this.coreUnsubscribe) {
 			this.coreUnsubscribe();
 			this.coreUnsubscribe = null;
@@ -4265,6 +4754,9 @@ var WebInspectorElement = class extends LitElement {
 		this._recallQuery = "";
 		this.coreSubscriber = null;
 		this.runtimeStatus = null;
+		this.inspectorMetadataValue = void 0;
+		this.inspectorMetadataProjection = projectInspectorMetadata(void 0, void 0);
+		this.metadataTelemetryFingerprints.clear();
 		this.lastCoreError = null;
 		this.coreProperties = {};
 		this.cachedTools = [];
@@ -4283,6 +4775,7 @@ var WebInspectorElement = class extends LitElement {
 		this.eventCounter = 0;
 	}
 	processAgentsChanged(agents) {
+		this.synchronizeThreadCapability();
 		const seenAgentIds = /* @__PURE__ */ new Set();
 		for (const agent of Object.values(agents)) {
 			if (!agent?.agentId) continue;
@@ -4347,7 +4840,7 @@ var WebInspectorElement = class extends LitElement {
 					event: params.event,
 					result: "result" in params ? params.result : void 0
 				});
-				this.refreshOwnedThreadStore(agentId);
+				if (this.areThreadEndpointsAvailable()) this.refreshOwnedThreadStore(agentId);
 			},
 			onRunErrorEvent: ({ event }) => {
 				this.recordAgentEvent(agentId, "RUN_ERROR", event);
@@ -4513,6 +5006,7 @@ var WebInspectorElement = class extends LitElement {
 		}
 	}
 	updateContextOptions(agentIds) {
+		let selectedContextChanged = false;
 		const nextOptions = [{
 			key: "all-agents",
 			label: "All Agents"
@@ -4526,12 +5020,14 @@ var WebInspectorElement = class extends LitElement {
 			if ((pendingContext === "all-agents" || agentIds.has(pendingContext)) && (pendingContext === "all-agents" || agentIds.size === 1)) {
 				if (this.selectedContext !== pendingContext) {
 					this.selectedContext = pendingContext;
+					selectedContextChanged = true;
 					this.expandedRows.clear();
 				}
 				this.pendingSelectedContext = null;
 			} else if (agentIds.size > 0) {
 				if (this.selectedContext !== "all-agents") {
 					this.selectedContext = "all-agents";
+					selectedContextChanged = true;
 					this.expandedRows.clear();
 				}
 				this.pendingSelectedContext = null;
@@ -4542,10 +5038,12 @@ var WebInspectorElement = class extends LitElement {
 			if (agentIds.size === 1) nextSelected = Array.from(agentIds)[0];
 			if (this.selectedContext !== nextSelected) {
 				this.selectedContext = nextSelected;
+				selectedContextChanged = true;
 				this.expandedRows.clear();
 				this.persistState();
 			}
 		}
+		if (selectedContextChanged) this.autoSelectLatestThread();
 	}
 	getEventsForSelectedContext() {
 		if (this.selectedContext === "all-agents") return this.flattenedEvents;
@@ -4866,7 +5364,7 @@ ${argsString}</pre
         align-items: center;
         justify-content: center;
         border-radius: 6px;
-        color: #838389;
+        color: #68686e;
         cursor: pointer;
         transition:
           background 120ms ease,
@@ -4887,7 +5385,7 @@ ${argsString}</pre
         background: none;
         border: none;
         cursor: pointer;
-        color: #838389;
+        color: #68686e;
         width: 28px;
         height: 28px;
         display: flex;
@@ -4936,7 +5434,7 @@ ${argsString}</pre
         height: 24px;
         border-radius: 50%;
         background-color: #f0f0f4;
-        color: #838389;
+        color: #68686e;
         flex-shrink: 0;
         transition: transform 0.2s;
       }
@@ -5053,7 +5551,7 @@ ${argsString}</pre
       }
 
       .announcement-content a {
-        color: #757cf2;
+        color: #5558b2;
         text-decoration: underline;
       }
 
@@ -5177,7 +5675,7 @@ ${argsString}</pre
         font-family: "Plus Jakarta Sans", system-ui, sans-serif;
         font-size: 12px;
         font-weight: 500;
-        color: #757cf2;
+        color: #5558b2;
         cursor: pointer;
         text-align: center;
       }
@@ -5248,14 +5746,14 @@ ${argsString}</pre
         align-items: center;
       }
       .cpk-tab-active .cpk-tab-icon {
-        color: #757cf2;
+        color: #5558b2;
       }
       .cpk-tab-inactive {
         background-color: transparent;
         color: #2b2b2b;
       }
       .cpk-tab-inactive .cpk-tab-icon {
-        color: #838389;
+        color: #68686e;
       }
       .cpk-tab-inactive:hover {
         background-color: rgba(190, 194, 255, 0.08);
@@ -5288,24 +5786,40 @@ ${argsString}</pre
         width: 100%;
         height: 100%;
         object-fit: cover;
-        opacity: 0;
-        transition: opacity 220ms ease;
-      }
-      .cpk-threads-overview-video[data-ready="true"] {
-        opacity: 1;
       }
 
-      /* ── Header control buttons (dock, close) — first row only ───── */
-      .drag-handle > div:first-child button {
-        color: #838389 !important;
+      /* ── Header controls on the dark account strip ──────────────── */
+      .drag-handle > div[data-inspector-account-strip] button {
+        color: #afafb7 !important;
+        cursor: pointer;
       }
-      .drag-handle > div:first-child button:hover {
-        background-color: #f0f0f4 !important;
-        color: #57575b !important;
+      .drag-handle > div[data-inspector-account-strip] button,
+      .inspector-nav-control,
+      [data-inspector-thread-cta] {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+      .drag-handle > div[data-inspector-account-strip] button:hover {
+        background-color: rgba(255, 255, 255, 0.12) !important;
+        color: #ffffff !important;
       }
-      .drag-handle > div:first-child button:focus-visible {
+      .drag-handle > div[data-inspector-account-strip] button:focus-visible {
         outline-color: #bec2ff !important;
       }
+      .drag-handle > div[data-inspector-account-strip] button:focus,
+      .drag-handle > div[data-inspector-account-strip] button:focus-visible {
+        outline: 2px solid #bec2ff !important;
+        outline-offset: 2px;
+      }
+      .inspector-nav-control:focus,
+      .inspector-nav-control:focus-visible,
+      [data-inspector-thread-cta]:focus,
+      [data-inspector-thread-cta]:focus-visible,
+      [data-inspector-action-placement="threads-footer"]:focus,
+      [data-inspector-action-placement="threads-footer"]:focus-visible {
+        outline: 2px solid #6430ab !important;
+        outline-offset: 2px;
+      }
 
       /* ── Agent/context dropdown ──────────────────────────────────── */
       [data-context-dropdown-root="true"] > button {
@@ -5317,7 +5831,7 @@ ${argsString}</pre
         background-color: #f7f7f9 !important;
       }
       [data-context-dropdown-root="true"] > button > span:last-child {
-        color: #838389 !important;
+        color: #68686e !important;
       }
       [data-context-dropdown-root="true"] > div {
         border-color: #dbdbe5 !important;
@@ -5327,6 +5841,28 @@ ${argsString}</pre
       [data-context-dropdown-root="true"] > div button:focus {
         background-color: #f7f7f9 !important;
       }
+      [data-inspector-account-strip]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button {
+        border-color: rgba(255, 255, 255, 0.28) !important;
+        background-color: transparent !important;
+        color: #e7e7ec !important;
+      }
+      [data-inspector-account-strip]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button:hover {
+        border-color: rgba(190, 194, 255, 0.7) !important;
+        background-color: rgba(255, 255, 255, 0.08) !important;
+      }
+      [data-inspector-account-strip]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button
+        > span:last-child {
+        color: #afafb7 !important;
+      }
 
       /* ── Status bar (bottom chrome) ──────────────────────────────── */
       .inspector-window > div > div:last-child {
@@ -5336,7 +5872,7 @@ ${argsString}</pre
 
       /* ── Resize handle ───────────────────────────────────────────── */
       .resize-handle {
-        color: #838389 !important;
+        color: #68686e !important;
       }
       .resize-handle:hover {
         color: #57575b !important;
@@ -5357,7 +5893,7 @@ ${argsString}</pre
       /* Copy "copied" state: generic green → brand mint */
       button[class*="bg-green-100"] {
         background-color: rgba(133, 236, 206, 0.2) !important;
-        color: #189370 !important;
+        color: #087653 !important;
       }
 
       /* ── Agents tab ──────────────────────────────────────────────── */
@@ -5366,14 +5902,14 @@ ${argsString}</pre
         background-color: rgba(190, 194, 255, 0.15) !important;
       }
       span[class*="text-blue-600"] {
-        color: #757cf2 !important;
+        color: #5558b2 !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;
+        color: #087653 !important;
       }
       /* Running status dot */
       span[class*="bg-emerald-500"] {
@@ -5393,7 +5929,7 @@ ${argsString}</pre
       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;
+        color: #087653 !important;
       }
       /* Tool role badge (amber → orange brand) */
       span[class*="bg-amber-100"][class*="text-amber-800"] {
@@ -5434,13 +5970,17 @@ ${argsString}</pre
         > 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;
+        color: #087653 !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;
+        color: #087653 !important;
+      }
+      div[class*="bg-emerald-50"][class*="border-emerald-200"]
+        span[class*="opacity-80"] {
+        opacity: 1 !important;
       }
       /* Icon bubble inside connected badge → mint tint */
       div[class*="bg-emerald-50"] span[class*="bg-white"] {
@@ -5455,7 +5995,7 @@ ${argsString}</pre
       span[class*="bg-slate-900"],
       div[class*="bg-slate-900"] {
         background-color: #eee6fe !important;
-        color: #757cf2 !important;
+        color: #5558b2 !important;
       }
       span[class*="text-slate-800"],
       div[class*="text-slate-800"] {
@@ -5466,6 +6006,7 @@ ${argsString}</pre
 	connectedCallback() {
 		super.connectedCallback();
 		if (typeof window !== "undefined") {
+			this.threadsExampleOverviewVideoReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
 			this.ensureBrandFonts();
 			window.addEventListener("resize", this.handleResize);
 			window.addEventListener("pointerdown", this.handleGlobalPointerDown);
@@ -5474,6 +6015,7 @@ ${argsString}</pre
 			this.tryAutoAttachCore();
 			this.ensureAnnouncementLoading();
 		}
+		this.requestUpdate();
 	}
 	ensureBrandFonts() {
 		const FONT_LINK_ID = "cpk-inspector-brand-fonts";
@@ -5496,14 +6038,13 @@ ${argsString}</pre
 			clearTimeout(this.transitionTimeoutId);
 			this.transitionTimeoutId = null;
 		}
-		if (this.threadsExampleOverviewVideoLoadTimer !== null) {
-			window.clearTimeout(this.threadsExampleOverviewVideoLoadTimer);
-			this.threadsExampleOverviewVideoLoadTimer = null;
-		}
-		if (this.threadsExampleOverviewVideoIdleCallbackId !== null && typeof window.cancelIdleCallback === "function") {
-			window.cancelIdleCallback(this.threadsExampleOverviewVideoIdleCallbackId);
-			this.threadsExampleOverviewVideoIdleCallbackId = null;
+		this.threadsSetupPromptCopyGeneration += 1;
+		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
+			window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
+			this.threadsSetupPromptCopyResetTimeoutId = null;
 		}
+		this.threadsSetupPromptCopyState = "idle";
+		this.cleanupThreadsExampleOverviewVideo();
 		this.removeDockStyles(true);
 		this.detachFromCore();
 	}
@@ -5529,6 +6070,7 @@ ${argsString}</pre
 			y: EDGE_MARGIN
 		};
 		this.hydrateStateFromStorage();
+		this.contextState.window.size = this.clampWindowSize(this.contextState.window.size);
 		if (this.selectedMenu === "memories") this.ensureMemorySubscription();
 		if (this.isOpen && this.dockMode !== "floating") this.applyDockStyles(true);
 		this.applyAnchorPosition("button");
@@ -5540,6 +6082,35 @@ ${argsString}</pre
 	render() {
 		return this.isOpen ? this.renderWindow() : this.renderButton();
 	}
+	willUpdate() {
+		this.reconcileSelectedMenuVisibility();
+	}
+	updated() {
+		this.syncThreadsExampleOverviewVideo();
+		this.maybeTrackInspectorMetadataViews();
+		if (!this.isOpen || this.selectedGroup !== "agents") {
+			this.lastScrolledAgentNavigationLayout = null;
+			return;
+		}
+		const navigation = this.shadowRoot?.querySelector("nav[aria-label=\"Agent navigation\"]");
+		if (!navigation) return;
+		const activeControl = navigation.querySelector("[aria-current=\"page\"]");
+		if (!activeControl) return;
+		const layoutKey = [
+			this.selectedMenu,
+			this.dockMode,
+			Math.round(this.contextState.window.size.width),
+			typeof window === "undefined" ? 0 : window.innerWidth,
+			navigation.clientWidth,
+			navigation.scrollWidth
+		].join(":");
+		if (this.lastScrolledAgentNavigationLayout === layoutKey) return;
+		if (typeof activeControl.scrollIntoView === "function") activeControl.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+		this.lastScrolledAgentNavigationLayout = layoutKey;
+	}
 	renderButton() {
 		return html`
       <div class="console-button-wrapper">
@@ -5595,24 +6166,79 @@ ${argsString}</pre
         </button>
         ${this.renderAnnouncementPreview()}
       </div>
+    `;
+	}
+	/** Render a trusted action with optional context-specific copy. */
+	renderInspectorAction(action, placement, displayLabel = action.label) {
+		return html`
+      <a
+        data-inspector-action-placement=${placement}
+        data-inspector-action-intent=${(displayLabel === "Upgrade Your Plan" ? "upgrade" : void 0) ?? nothing}
+        href=${action.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="${displayLabel} (opens in a new tab)"
+        style=${placement === "threads-footer" ? "" : "display:inline-flex;min-height:34px;align-items:center;justify-content:center;gap:6px;border:1px solid #dbdbe5;border-radius:6px;background:#ffffff;padding:8px 12px;color:#57575b;font-size:12px;font-weight:600;text-decoration:none;outline-style:solid;outline-width:2px;outline-color:transparent;outline-offset:2px;cursor:pointer;"}
+        @click=${() => this.handleInspectorMetadataActionClick(action, placement)}
+      >
+        ${displayLabel}
+      </a>
+    `;
+	}
+	renderInspectorMetadataHeader() {
+		const { identity, plan } = this.inspectorMetadataProjection;
+		if (!identity && !plan) return nothing;
+		return html`
+      <div
+        style="display:flex;min-width:0;flex:1 1 220px;flex-wrap:wrap;align-items:center;gap:6px 8px;"
+        role="group"
+        aria-label="Inspector account details"
+      >
+        ${identity ? html`
+                <div
+                  data-inspector-metadata="identity"
+                  style="display:flex;min-width:0;max-width:100%;align-items:center;gap:6px;color:#e7e7ec;font-size:11px;line-height:1.3;"
+                  title="${identity.organizationName} / ${identity.projectName}"
+                >
+                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+                    >${identity.organizationName}</span
+                  >
+                  <span aria-hidden="true" style="color:#68686e;">/</span>
+                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+                    >${identity.projectName}</span
+                  >
+                </div>
+              ` : nothing}
+        ${plan ? html`
+                <span
+                  data-inspector-metadata="plan"
+                  style="display:inline-flex;min-height:22px;align-items:center;border:1px solid rgba(133,236,206,0.5);border-radius:4px;background:rgba(133,236,206,0.14);padding:2px 7px;color:#85ecce;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;"
+                  >${plan.label}</span
+                >
+              ` : nothing}
+      </div>
     `;
 	}
 	renderWindow() {
 		const windowState = this.contextState.window;
 		const isDocked = this.dockMode !== "floating";
 		const isTransitioning = this.hasAttribute("data-transitioning");
-		const windowStyles = isDocked ? this.getDockedWindowStyles() : {
+		const windowStyles = isDocked ? {
+			...this.getDockedWindowStyles(),
+			overflowX: "hidden"
+		} : {
 			width: `${Math.round(windowState.size.width)}px`,
 			height: `${Math.round(windowState.size.height)}px`,
 			minWidth: `${MIN_WINDOW_WIDTH}px`,
-			minHeight: `${MIN_WINDOW_HEIGHT}px`
+			minHeight: `${MIN_WINDOW_HEIGHT}px`,
+			overflowX: "hidden"
 		};
-		const hasContextDropdown = this.contextOptions.length > 0;
+		const hasContextDropdown = this.contextOptions.some((option) => option.key !== "all-agents");
 		const contextDropdown = hasContextDropdown ? this.renderContextDropdown() : nothing;
 		const coreStatus = this.getCoreStatusSummary();
 		const agentSelector = hasContextDropdown ? contextDropdown : html`
           <div
-            class="flex items-center gap-2 rounded-md border border-dashed border-gray-200 px-2 py-1 text-xs text-gray-400"
+            class="inspector-agent-placeholder flex items-center gap-2 rounded-md border border-dashed px-2 py-1 text-xs"
           >
             <span>${this.renderIcon("Bot")}</span>
             <span class="truncate">No agents available</span>
@@ -5647,32 +6273,41 @@ ${argsString}</pre
             @pointerup=${isDocked ? void 0 : this.handlePointerUp}
             @pointercancel=${isDocked ? void 0 : this.handlePointerCancel}
           >
-            <div class="flex flex-wrap items-center gap-3 px-4 py-3">
+            <div
+              class="inspector-account-strip flex flex-wrap items-center gap-3 px-4 py-3"
+              data-inspector-account-strip
+              style="width:100%;min-width:0;background-color:#010507;color:#ffffff;"
+            >
               <div class="flex items-center min-w-0">
                 <img
                   src=${inspector_logo_default}
                   alt="Inspector logo"
-                  class="h-6 w-auto"
+                  class="inspector-account-logo h-6 w-auto"
                   loading="lazy"
                 />
               </div>
+              ${this.renderInspectorMetadataHeader()}
               <div class="ml-auto flex min-w-0 items-center gap-2">
-                <div class="min-w-[160px] max-w-xs">${agentSelector}</div>
+                <div class="inspector-agent-selector min-w-[160px] max-w-xs">
+                  ${agentSelector}
+                </div>
                 <div class="flex items-center gap-1">
                   ${this.renderDockControls()}
                   <button
-                    class="flex h-8 w-8 items-center justify-center rounded-md transition hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 ${this.selectedMenu === "settings" ? "bg-gray-100 text-gray-700" : "text-gray-400 hover:text-gray-600"}"
+                    class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${this.settingsOpen ? "inspector-account-control-active" : ""}"
                     type="button"
                     aria-label="Settings"
-                    aria-pressed=${this.selectedMenu === "settings"}
-                    @click=${() => this.handleMenuSelect(this.selectedMenu === "settings" ? "ag-ui-events" : "settings")}
+                    aria-pressed=${this.settingsOpen}
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                    @click=${this.handleSettingsToggle}
                   >
                     ${this.renderIcon("Settings")}
                   </button>
                   <button
-                    class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
+                    class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                     type="button"
                     aria-label="Close Web Inspector"
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
                     @pointerdown=${this.handleClosePointerDown}
                     @click=${this.handleCloseClick}
                   >
@@ -5681,37 +6316,72 @@ ${argsString}</pre
                 </div>
               </div>
             </div>
-            <div
-              class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-3 py-2 text-xs"
+            <nav
+              class="inspector-primary-navigation"
+              aria-label="Inspector primary navigation"
+              style="overflow-x:auto;overflow-y:hidden;cursor:default;"
             >
-              ${this.menuItems.map(({ key, label, icon }) => {
-			const isSelected = this.selectedMenu === key;
+              ${INSPECTOR_PRIMARY_NAVIGATION.map(({ key, label, icon }) => {
+			const isSelected = this.selectedGroup === key;
 			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 ? "cpk-tab-active" : "cpk-tab-inactive"].join(" ")}
-                    aria-pressed=${isSelected}
-                    @click=${() => this.handleMenuSelect(key)}
+                    class="inspector-nav-control inspector-primary-control ${isSelected ? "inspector-nav-control-active" : ""}"
+                    data-inspector-group=${key}
+                    data-inspector-menu-key=${(key === "threads" ? "threads" : key === "learning" ? "memories" : void 0) ?? nothing}
+                    aria-current=${isSelected ? "page" : nothing}
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                    @click=${() => this.handleGroupSelect(key)}
                   >
-                    <span class="cpk-tab-icon">
-                      ${key in this.customTabIcons ? unsafeHTML(this.customTabIcons[key]) : this.renderIcon(icon)}
+                    <span class="inspector-nav-icon" aria-hidden="true">
+                      ${key === "threads" ? unsafeHTML(this.customTabIcons.threads) : this.renderIcon(icon)}
                     </span>
                     <span>${label}</span>
                   </button>
                 `;
 		})}
-              ${this.selectedMenu === "threads" ? html`
+              ${this.selectedGroup === "threads" ? html`
                       <a
+                        data-inspector-thread-cta
                         href=${this.getThreadsTalkToEngineerUrl()}
                         target="_blank"
-                        rel="noopener"
-                        style="margin-left:auto;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;"
+                        rel="noopener noreferrer"
+                        aria-label="Talk to an Engineer (opens in a new tab)"
+                        style=${INTERACTIVE_FOCUS_BASE_STYLE}
                         @click=${this.handleTalkToEngineerClick}
                       >
                         Talk to an Engineer
                       </a>
                     ` : nothing}
-            </div>
+            </nav>
+            ${this.selectedGroup === "agents" ? html`
+                    <nav
+                      class="inspector-child-navigation"
+                      aria-label="Agent navigation"
+                      style="overflow-x:auto;overflow-y:hidden;white-space:nowrap;cursor:default;"
+                    >
+                      ${this.getVisibleMenuItemsForGroup("agents").map(({ key, label, icon }) => {
+			const isSelected = this.selectedMenu === key;
+			return html`
+                            <button
+                              type="button"
+                              class="inspector-nav-control inspector-child-control ${isSelected ? "inspector-nav-control-active" : ""}"
+                              data-inspector-menu-key=${key}
+                              aria-current=${isSelected ? "page" : nothing}
+                              style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                              @click=${() => this.handleMenuSelect(key)}
+                            >
+                              <span
+                                class="inspector-nav-icon"
+                                aria-hidden="true"
+                                >${this.renderIcon(icon)}</span
+                              >
+                              <span>${label}</span>
+                            </button>
+                          `;
+		})}
+                    </nav>
+                  ` : nothing}
           </div>
           <div class="flex flex-1 flex-col overflow-hidden">
             <div id="cpk-main-scroll" class="flex-1 overflow-auto">
@@ -5767,10 +6437,7 @@ ${argsString}</pre
 		if (!persisted) return;
 		if (typeof persisted.isOpen === "boolean") this.isOpen = persisted.isOpen;
 		if (isValidDockMode(persisted.dockMode)) this.dockMode = persisted.dockMode;
-		if (typeof persisted.selectedMenu === "string") {
-			const validMenu = this.menuItems.find((item) => item.key === persisted.selectedMenu);
-			if (validMenu) this.selectedMenu = validMenu.key;
-		}
+		this.restorePersistedMenu(persisted.selectedMenu);
 		if (typeof persisted.selectedContext === "string") {
 			this.selectedContext = persisted.selectedContext;
 			this.pendingSelectedContext = persisted.selectedContext;
@@ -5780,6 +6447,7 @@ ${argsString}</pre
 		if (typeof document === "undefined" || typeof window === "undefined") return;
 		const persisted = loadInspectorState(INSPECTOR_STORAGE_KEY);
 		if (!persisted) return;
+		this.restorePersistedMenu(persisted.selectedMenu);
 		const persistedButton = persisted.button;
 		if (persistedButton) {
 			if (isValidAnchor(persistedButton.anchor)) this.contextState.button.anchor = persistedButton.anchor;
@@ -5798,6 +6466,28 @@ ${argsString}</pre
 			this.pendingSelectedContext = persisted.selectedContext;
 		}
 	}
+	/** Restore a visible legacy leaf, or use Threads for stale state. */
+	restorePersistedMenu(value) {
+		this.selectedMenu = "threads";
+		this.lastSelectedMenuByGroup.threads = "threads";
+		this.pendingPersistedMenu = null;
+		if (!isInspectorMenuKey(value)) return;
+		const validMenu = this.menuItems.find((item) => item.key === value);
+		if (!validMenu) {
+			if (!this.hasResolvedCore) this.pendingPersistedMenu = value;
+			return;
+		}
+		this.selectedMenu = validMenu.key;
+		this.lastSelectedMenuByGroup[this.getGroupForMenu(validMenu.key)] = validMenu.key;
+	}
+	/** Resolve a valid stored leaf after the first Core exposes its sources. */
+	resolvePendingPersistedMenu() {
+		const pendingMenu = this.pendingPersistedMenu;
+		if (!pendingMenu) return;
+		this.pendingPersistedMenu = null;
+		this.restorePersistedMenu(pendingMenu);
+		this.persistState();
+	}
 	get activeContext() {
 		return this.isOpen ? "window" : "button";
 	}
@@ -5863,7 +6553,7 @@ ${argsString}</pre
 			},
 			isOpen: this.isOpen,
 			dockMode: this.dockMode,
-			selectedMenu: this.selectedMenu,
+			selectedMenu: this.pendingPersistedMenu ?? this.selectedMenu,
 			selectedContext: this.selectedContext
 		};
 		saveInspectorState(INSPECTOR_STORAGE_KEY, state);
@@ -5886,7 +6576,7 @@ ${argsString}</pre
 			if (mode === "docked-left") this.contextState.window.size.width = DOCKED_LEFT_WIDTH;
 			this.applyDockStyles();
 		} else {
-			this.contextState.window.size = { ...DEFAULT_WINDOW_SIZE };
+			this.contextState.window.size = this.clampWindowSize(DEFAULT_WINDOW_SIZE);
 			this.centerContext("window");
 		}
 		this.persistState();
@@ -6045,6 +6735,7 @@ ${argsString}</pre
           type="button"
           aria-label="Dock to left"
           title="Dock Left"
+          style=${INTERACTIVE_FOCUS_BASE_STYLE}
           @click=${() => this.handleDockClick("docked-left")}
         >
           ${this.renderIcon("PanelLeft")}
@@ -6056,6 +6747,7 @@ ${argsString}</pre
           type="button"
           aria-label="Float window"
           title="Float"
+          style=${INTERACTIVE_FOCUS_BASE_STYLE}
           @click=${() => this.handleDockClick("floating")}
         >
           ${this.renderIcon("Maximize2")}
@@ -6234,6 +6926,7 @@ ${argsString}</pre
 		};
 	}
 	renderMainContent() {
+		if (this.settingsOpen) return this.renderSettingsPanel();
 		if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
@@ -6241,7 +6934,6 @@ ${argsString}</pre
 		if (this.selectedMenu === "agent-context") return this.renderContextView();
 		if (this.selectedMenu === "threads") return this.renderThreadsView();
 		if (this.selectedMenu === "memories") return this.renderMemoriesView();
-		if (this.selectedMenu === "settings") return this.renderSettingsPanel();
 		return nothing;
 	}
 	renderSettingsPanel() {
@@ -6289,6 +6981,94 @@ ${argsString}</pre
 			has_unseen_announcement: hadUnseenAnnouncement
 		});
 	}
+	getVisibleInspectorMetadataAction() {
+		const { threadsFooterAction, lockedAction } = this.inspectorMetadataProjection;
+		if (threadsFooterAction && !this.settingsOpen && this.selectedMenu === "threads") return {
+			action: threadsFooterAction,
+			placement: "threads-footer"
+		};
+		if (lockedAction && !this.settingsOpen && this.selectedMenu === "threads" && !this.areThreadEndpointsAvailable()) return {
+			action: lockedAction,
+			placement: "locked"
+		};
+	}
+	/** Return paired stable navigation keys, or neither for an invalid leaf. */
+	getMetadataTelemetryNavigation() {
+		const selectedLeaf = this.selectedMenu;
+		if (!isInspectorMenuKey(selectedLeaf)) return {};
+		for (const group of INSPECTOR_PRIMARY_NAVIGATION) if (INSPECTOR_GROUPS[group.key].some((menuKey) => menuKey === selectedLeaf)) return {
+			group_key: group.key,
+			leaf_key: selectedLeaf
+		};
+		return {};
+	}
+	/** Build metadata's shared coarse buckets and stable navigation context. */
+	getMetadataTelemetryContext() {
+		return {
+			usage_bucket: this.getThreadsUsageBucket(),
+			expiry_bucket: this.getThreadsExpiryBucket(),
+			...this.getMetadataTelemetryNavigation()
+		};
+	}
+	trackMetadataModuleIfChanged(props, fingerprint) {
+		if (this.metadataTelemetryFingerprints.get(props.module) === fingerprint) return;
+		this.metadataTelemetryFingerprints.set(props.module, fingerprint);
+		try {
+			trackMetadataModuleViewed(props);
+		} catch {}
+	}
+	maybeTrackInspectorMetadataViews() {
+		if (!this.isOpen || this.runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
+		const { identity, plan } = this.inspectorMetadataProjection;
+		const license_bucket = this.inspectorMetadataProjection.licenseState;
+		const telemetryContext = this.getMetadataTelemetryContext();
+		const contextFingerprint = [
+			telemetryContext.usage_bucket,
+			telemetryContext.expiry_bucket,
+			telemetryContext.group_key ?? null,
+			telemetryContext.leaf_key ?? null
+		];
+		if (identity) this.trackMetadataModuleIfChanged({
+			module: "identity",
+			license_bucket,
+			...telemetryContext
+		}, JSON.stringify([
+			license_bucket,
+			...contextFingerprint,
+			identity.organizationName,
+			identity.projectName
+		]));
+		else this.metadataTelemetryFingerprints.delete("identity");
+		if (plan) this.trackMetadataModuleIfChanged({
+			module: "plan",
+			license_bucket,
+			...telemetryContext
+		}, JSON.stringify([
+			license_bucket,
+			...contextFingerprint,
+			plan.code,
+			plan.label
+		]));
+		else this.metadataTelemetryFingerprints.delete("plan");
+		const visibleAction = this.getVisibleInspectorMetadataAction();
+		if (visibleAction) {
+			const { action, placement } = visibleAction;
+			const action_placement = getMetadataActionPlacement(placement);
+			this.trackMetadataModuleIfChanged({
+				module: "action",
+				action_kind: action.kind,
+				license_bucket,
+				...telemetryContext,
+				action_placement
+			}, JSON.stringify([
+				license_bucket,
+				...contextFingerprint,
+				action_placement,
+				action.kind,
+				action.url
+			]));
+		} else this.metadataTelemetryFingerprints.delete("action");
+	}
 	trackBannerDismissedOnce(surface) {
 		if (this.core?.telemetryDisabled) return;
 		const id = this.announcementTimestamp;
@@ -6315,21 +7095,18 @@ ${argsString}</pre
 			cta_label: this.announcementCtaLabel ?? void 0
 		});
 	}
-	trackThreadsViewStateOnce(state, threadCount) {
+	trackThreadsViewStateOnce(state) {
 		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 });
+		const props = this.getThreadsTelemetryProps();
 		if (state === "locked") trackThreadsLockedViewed(props);
 		else if (state === "empty_enabled") trackThreadsEmptyEnabledViewed(props);
 		else trackThreadsEnabledViewed(props);
 	}
-	shouldRenderExampleThreads(displayThreads, threadsErrorMessage) {
-		return this.areThreadEndpointsAvailable() && !threadsErrorMessage && displayThreads.length === 0;
-	}
-	getVisibleThreads(displayThreads, threadsErrorMessage) {
-		return this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage) ? THREADS_EXAMPLE_THREADS : displayThreads;
+	shouldRenderExampleThreads(locked, displayThreads, threadsErrorMessage, threadsLoading) {
+		return locked || !threadsErrorMessage && !threadsLoading && displayThreads.length === 0;
 	}
 	isExampleThreadId(threadId) {
 		return THREADS_EXAMPLE_THREADS.some((thread) => thread.id === threadId);
@@ -6346,6 +7123,7 @@ ${argsString}</pre
 				agentId: thread.agentId,
 				endUserId: "example-user",
 				status: "completed",
+				createdAt: thread.createdAt,
 				updatedAt: thread.updatedAt
 			} : null,
 			getMessages: async () => details?.messages ?? [],
@@ -6358,39 +7136,43 @@ ${argsString}</pre
 	trackThreadsExampleViewedOnce() {
 		if (this.core?.telemetryDisabled) return;
 		for (const thread of THREADS_EXAMPLE_THREADS) {
-			if (this.viewedExampleThreadIds.has(thread.id)) continue;
-			this.viewedExampleThreadIds.add(thread.id);
-			trackThreadsExampleViewed(this.getThreadsTelemetryProps({
-				example_thread_id: thread.id,
-				thread_count: 0
-			}));
+			const exampleKind = getExampleKind(thread.id);
+			if (!exampleKind || this.viewedExampleKinds.has(exampleKind)) continue;
+			this.viewedExampleKinds.add(exampleKind);
+			trackThreadsExampleViewed({
+				...this.getThreadsTelemetryProps(),
+				example_kind: exampleKind
+			});
 		}
 	}
 	trackThreadsExampleSelectedOnce(threadId) {
 		if (this.core?.telemetryDisabled) return;
-		if (this.selectedExampleThreadIds.has(threadId)) return;
-		this.selectedExampleThreadIds.add(threadId);
-		trackThreadsExampleSelected(this.getThreadsTelemetryProps({
-			example_thread_id: threadId,
-			thread_count: 0
-		}));
+		const exampleKind = getExampleKind(threadId);
+		if (!exampleKind || this.selectedExampleKinds.has(exampleKind)) return;
+		this.selectedExampleKinds.add(exampleKind);
+		trackThreadsExampleSelected({
+			...this.getThreadsTelemetryProps(),
+			example_kind: exampleKind
+		});
 	}
 	getCurrentExampleTourProps() {
-		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
-		return this.getThreadsTelemetryProps({
-			example_thread_id: this.selectedThreadId ?? void 0,
-			thread_count: 0,
-			tour_step: this.exampleTourStep + 1,
-			tour_tab: step?.tab
-		});
+		const exampleKind = this.selectedThreadId ? getExampleKind(this.selectedThreadId) : void 0;
+		const tourPair = getExampleTourTelemetryPair(this.exampleTourStep);
+		if (!exampleKind || !tourPair) return void 0;
+		return {
+			...this.getThreadsTelemetryProps(),
+			example_kind: exampleKind,
+			...tourPair
+		};
 	}
 	trackThreadsExampleTourStepViewedOnce() {
 		if (this.core?.telemetryDisabled || !this.selectedThreadId) return;
-		if (!(THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0])) return;
-		const key = `${this.selectedThreadId}:${this.exampleTourStep}`;
+		const props = this.getCurrentExampleTourProps();
+		if (!props) return;
+		const key = `${props.example_kind}:${props.tour_step}`;
 		if (this.viewedExampleTourSteps.has(key)) return;
 		this.viewedExampleTourSteps.add(key);
-		trackThreadsExampleTourStepViewed(this.getCurrentExampleTourProps());
+		trackThreadsExampleTourStepViewed(props);
 	}
 	syncExampleTourTab() {
 		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
@@ -6405,44 +7187,65 @@ ${argsString}</pre
 		this.exampleTourStep = 0;
 		if (autoStarted) {
 			this.exampleTourAutoShown = true;
-			if (!this.core?.telemetryDisabled) trackThreadsExampleTourStarted(this.getCurrentExampleTourProps());
-		} else if (!this.core?.telemetryDisabled) trackThreadsExampleTourReopened(this.getCurrentExampleTourProps());
+			if (!this.core?.telemetryDisabled) {
+				const props = this.getCurrentExampleTourProps();
+				if (props) trackThreadsExampleTourStarted(props);
+			}
+		} else if (!this.core?.telemetryDisabled) {
+			const props = this.getCurrentExampleTourProps();
+			if (props) trackThreadsExampleTourReopened(props);
+		}
 		this.trackThreadsExampleTourStepViewedOnce();
 		this.syncExampleTourTab();
 		this.requestUpdate();
 	}
 	setExampleTourStep(nextStep) {
+		const telemetryStepIsValid = getExampleTourTelemetryPair(nextStep) !== void 0;
 		this.exampleTourStep = Math.max(0, Math.min(THREADS_EXAMPLE_TOUR_STEPS.length - 1, nextStep));
-		this.trackThreadsExampleTourStepViewedOnce();
+		if (telemetryStepIsValid) this.trackThreadsExampleTourStepViewedOnce();
 		this.syncExampleTourTab();
 		this.requestUpdate();
 	}
 	dismissExampleTour(method) {
 		if (!this.selectedThreadId) return;
-		const props = {
-			...this.getCurrentExampleTourProps(),
-			dismiss_method: method
-		};
 		this.exampleTourActive = false;
 		this.exampleTourDismissed = true;
 		this.writeThreadsExampleTourDismissed();
-		if (!this.core?.telemetryDisabled) if (method === "done") trackThreadsExampleTourCompleted(props);
-		else trackThreadsExampleTourDismissed(props);
+		if (!this.core?.telemetryDisabled) {
+			const currentProps = this.getCurrentExampleTourProps();
+			if (currentProps) {
+				const props = {
+					...currentProps,
+					dismiss_method: method
+				};
+				if (method === "done") trackThreadsExampleTourCompleted(props);
+				else trackThreadsExampleTourDismissed(props);
+			}
+		}
 		this.requestUpdate();
 	}
 	handleThreadsThreadSelected(threadId, showingExamples) {
-		if (showingExamples && this.selectedThreadId === threadId) {
+		if (showingExamples && this.selectedThreadId === threadId && this.selectedLocalExampleThreadId === threadId) {
 			this.selectedThreadId = null;
+			this.selectedRealThreadIsExplicit = false;
+			this.selectedLocalExampleThreadId = null;
 			this.exampleTourActive = false;
 			this.requestUpdate();
 			return;
 		}
 		this.selectedThreadId = threadId;
 		if (showingExamples && this.isExampleThreadId(threadId)) {
+			this.selectedRealThreadIsExplicit = false;
+			this.selectedLocalExampleThreadId = threadId;
 			this.trackThreadsExampleSelectedOnce(threadId);
 			if (!this.exampleTourDismissed && !this.exampleTourAutoShown) this.startExampleTour(true);
 			else this.exampleTourActive = false;
-		} else this.exampleTourActive = false;
+		} else {
+			const { displayThreads } = this.getActiveThreadsState();
+			this.selectedRealThreadIsExplicit = displayThreads.some((thread) => thread.id === threadId);
+			this.selectedLocalExampleThreadId = null;
+			this.exampleTourActive = false;
+		}
 		this.requestUpdate();
 	}
 	readThreadsExampleTourDismissed() {
@@ -6461,42 +7264,228 @@ ${argsString}</pre
 			window.localStorage.setItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY, JSON.stringify({ dismissed: true }));
 		} catch {}
 	}
-	scheduleThreadsExampleOverviewVideoLoad() {
-		if (this.threadsExampleOverviewVideoShouldLoad || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || typeof window === "undefined") return;
-		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
-		const loadVideo = () => {
+	/** Cancels the one deferred gate without disturbing a newer lifecycle. */
+	cancelThreadsExampleOverviewVideoGate() {
+		if (this.threadsExampleOverviewVideoLoadTimer !== null) {
+			if (typeof window !== "undefined") window.clearTimeout(this.threadsExampleOverviewVideoLoadTimer);
 			this.threadsExampleOverviewVideoLoadTimer = null;
+		}
+		if (this.threadsExampleOverviewVideoIdleCallbackId !== null) {
+			if (typeof window !== "undefined" && typeof window.cancelIdleCallback === "function") window.cancelIdleCallback(this.threadsExampleOverviewVideoIdleCallbackId);
 			this.threadsExampleOverviewVideoIdleCallbackId = null;
-			this.threadsExampleOverviewVideoShouldLoad = true;
-			this.requestUpdate();
-		};
+		}
+	}
+	/** Returns whether media work still belongs to the mounted lifecycle. */
+	isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) {
+		return this.isConnected && video.isConnected && this.threadsExampleOverviewVideoElement === video && this.threadsExampleOverviewVideoLifecycleGeneration === lifecycleGeneration;
+	}
+	/** Invalidates any unresolved play request without exposing another state. */
+	invalidateThreadsExampleOverviewVideoPlay() {
+		this.threadsExampleOverviewVideoPlayAttemptGeneration += 1;
+		this.threadsExampleOverviewVideoPlayPromise = null;
+	}
+	/** Moves a current media lifecycle into its readable failure state. */
+	failThreadsExampleOverviewVideo(video, lifecycleGeneration) {
+		if (!this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration)) return;
+		this.invalidateThreadsExampleOverviewVideoPlay();
+		this.threadsExampleOverviewVideoLoaded = false;
+		this.threadsExampleOverviewVideoState = "failed";
+		this.requestUpdate();
+	}
+	/** Settles one guarded play promise and ignores stale completion. */
+	async settleThreadsExampleOverviewVideoPlay(video, lifecycleGeneration, playAttemptGeneration, playback) {
+		try {
+			await playback;
+			if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration && this.threadsExampleOverviewVideoState !== "failed") {
+				this.threadsExampleOverviewVideoState = "playing";
+				this.requestUpdate();
+			}
+		} catch {
+			if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration) this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
+		} finally {
+			if (this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration) this.threadsExampleOverviewVideoPlayPromise = null;
+		}
+	}
+	/** Starts at most one play request for the current media lifecycle. */
+	playThreadsExampleOverviewVideo(video, lifecycleGeneration) {
+		if (this.threadsExampleOverviewVideoPlayPromise !== null || this.threadsExampleOverviewVideoState === "deferred" || this.threadsExampleOverviewVideoState === "failed" || !this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration)) return;
+		const playAttemptGeneration = this.threadsExampleOverviewVideoPlayAttemptGeneration + 1;
+		this.threadsExampleOverviewVideoPlayAttemptGeneration = playAttemptGeneration;
+		try {
+			const playback = Promise.resolve(video.play());
+			this.threadsExampleOverviewVideoPlayPromise = this.settleThreadsExampleOverviewVideoPlay(video, lifecycleGeneration, playAttemptGeneration, playback);
+		} catch {
+			this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
+		}
+	}
+	/** Attaches the sole source for a generation and optionally starts playback. */
+	activateThreadsExampleOverviewVideo(video, lifecycleGeneration, play) {
+		if (this.threadsExampleOverviewVideoState !== "deferred" || !this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration)) return;
+		this.threadsExampleOverviewVideoState = "ready";
+		this.threadsExampleOverviewVideoLoaded = false;
+		video.autoplay = !this.threadsExampleOverviewVideoReducedMotion;
+		video.setAttribute("src", THREADS_EXAMPLE_OVERVIEW_VIDEO_URL);
+		this.requestUpdate();
+		if (play) this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
+	}
+	/** Schedules exactly one idle or timer gate for the current video. */
+	scheduleThreadsExampleOverviewVideoLoad() {
+		const video = this.threadsExampleOverviewVideoElement;
+		if (!video || !this.isConnected || this.threadsExampleOverviewVideoState !== "deferred" || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || typeof window === "undefined") return;
+		const lifecycleGeneration = this.threadsExampleOverviewVideoLifecycleGeneration;
 		if (typeof window.requestIdleCallback === "function") {
-			this.threadsExampleOverviewVideoIdleCallbackId = window.requestIdleCallback(loadVideo, { timeout: 1200 });
+			let idleCallbackId = 0;
+			const loadVideo = () => {
+				if (this.threadsExampleOverviewVideoIdleCallbackId !== idleCallbackId) return;
+				this.threadsExampleOverviewVideoIdleCallbackId = null;
+				this.activateThreadsExampleOverviewVideo(video, lifecycleGeneration, !this.threadsExampleOverviewVideoReducedMotion);
+			};
+			idleCallbackId = window.requestIdleCallback(loadVideo, { timeout: 1200 });
+			this.threadsExampleOverviewVideoIdleCallbackId = idleCallbackId;
+			return;
+		}
+		const loadTimer = window.setTimeout(() => {
+			if (this.threadsExampleOverviewVideoLoadTimer !== loadTimer) return;
+			this.threadsExampleOverviewVideoLoadTimer = null;
+			this.activateThreadsExampleOverviewVideo(video, lifecycleGeneration, !this.threadsExampleOverviewVideoReducedMotion);
+		}, 450);
+		this.threadsExampleOverviewVideoLoadTimer = loadTimer;
+	}
+	/** Attaches one generation-scoped media listener set to the stable video. */
+	bindThreadsExampleOverviewVideo(video) {
+		const lifecycleGeneration = this.threadsExampleOverviewVideoLifecycleGeneration;
+		const listeners = {
+			loadeddata: () => {
+				if (!this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) || this.threadsExampleOverviewVideoState === "deferred" || this.threadsExampleOverviewVideoState === "failed") return;
+				this.threadsExampleOverviewVideoLoaded = true;
+				this.requestUpdate();
+			},
+			play: () => {
+				if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoState !== "deferred" && this.threadsExampleOverviewVideoState !== "failed") {
+					this.threadsExampleOverviewVideoState = "playing";
+					this.requestUpdate();
+				}
+			},
+			pause: () => {
+				if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoState !== "deferred" && this.threadsExampleOverviewVideoState !== "failed") {
+					this.invalidateThreadsExampleOverviewVideoPlay();
+					this.threadsExampleOverviewVideoState = "ready";
+					this.requestUpdate();
+				}
+			},
+			error: () => {
+				this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
+			}
+		};
+		this.threadsExampleOverviewVideoElement = video;
+		this.threadsExampleOverviewVideoListeners = listeners;
+		video.addEventListener("loadeddata", listeners.loadeddata);
+		video.addEventListener("play", listeners.play);
+		video.addEventListener("pause", listeners.pause);
+		video.addEventListener("error", listeners.error);
+		video.muted = true;
+		video.loop = true;
+		video.playsInline = true;
+		video.autoplay = this.threadsExampleOverviewVideoState !== "deferred" && !this.threadsExampleOverviewVideoReducedMotion;
+	}
+	/** Tears down gates, listeners, playback, and source in cleanup order. */
+	cleanupThreadsExampleOverviewVideo() {
+		const video = this.threadsExampleOverviewVideoElement;
+		if (video) this.threadsExampleOverviewVideoLifecycleGeneration += 1;
+		this.invalidateThreadsExampleOverviewVideoPlay();
+		this.cancelThreadsExampleOverviewVideoGate();
+		this.threadsExampleOverviewVideoPlayOnNextBind = false;
+		const listeners = this.threadsExampleOverviewVideoListeners;
+		if (video && listeners) {
+			video.removeEventListener("loadeddata", listeners.loadeddata);
+			video.removeEventListener("play", listeners.play);
+			video.removeEventListener("pause", listeners.pause);
+			video.removeEventListener("error", listeners.error);
+		}
+		this.threadsExampleOverviewVideoElement = null;
+		this.threadsExampleOverviewVideoListeners = null;
+		if (video) {
+			try {
+				video.pause();
+			} catch {}
+			video.removeAttribute("src");
+			try {
+				video.load();
+			} catch {}
+		}
+		this.threadsExampleOverviewVideoLoaded = false;
+		this.threadsExampleOverviewVideoState = "deferred";
+	}
+	/** Reconciles the rendered media node with its current lifecycle. */
+	syncThreadsExampleOverviewVideo() {
+		const video = this.shadowRoot?.querySelector(".cpk-threads-overview-video");
+		if (!video) {
+			if (this.threadsExampleOverviewVideoElement || this.threadsExampleOverviewVideoState !== "deferred" || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || this.threadsExampleOverviewVideoPlayOnNextBind) this.cleanupThreadsExampleOverviewVideo();
 			return;
 		}
-		this.threadsExampleOverviewVideoLoadTimer = window.setTimeout(loadVideo, 450);
+		if (this.threadsExampleOverviewVideoElement !== video) {
+			if (this.threadsExampleOverviewVideoElement) this.cleanupThreadsExampleOverviewVideo();
+			this.bindThreadsExampleOverviewVideo(video);
+		}
+		if (this.threadsExampleOverviewVideoPlayOnNextBind) {
+			this.threadsExampleOverviewVideoPlayOnNextBind = false;
+			this.activateThreadsExampleOverviewVideo(video, this.threadsExampleOverviewVideoLifecycleGeneration, true);
+			return;
+		}
+		this.scheduleThreadsExampleOverviewVideoLoad();
 	}
 	renderThreadsExampleOverviewVideo() {
-		this.scheduleThreadsExampleOverviewVideoLoad();
+		const isPlaying = this.threadsExampleOverviewVideoState === "playing";
+		const sourceIsAttached = this.threadsExampleOverviewVideoState !== "deferred";
+		const video = html`<video
+      class="cpk-threads-overview-video"
+      data-loaded=${this.threadsExampleOverviewVideoLoaded}
+      ?autoplay=${sourceIsAttached && !this.threadsExampleOverviewVideoReducedMotion}
+      .autoplay=${sourceIsAttached && !this.threadsExampleOverviewVideoReducedMotion}
+      loop
+      .loop=${true}
+      muted
+      .muted=${true}
+      playsinline
+      .playsInline=${true}
+      preload="metadata"
+    ></video>`;
 		return html`
       <div class="cpk-threads-overview-video-frame" aria-hidden="true">
-        ${this.threadsExampleOverviewVideoShouldLoad ? html`
-                <video
-                  class="cpk-threads-overview-video"
-                  data-ready=${this.threadsExampleOverviewVideoReady}
-                  src=${THREADS_EXAMPLE_OVERVIEW_VIDEO_URL}
-                  autoplay
-                  loop
-                  muted
-                  playsinline
-                  preload="metadata"
-                  @loadeddata=${this.handleThreadsExampleOverviewVideoLoaded}
-                ></video>
-              ` : nothing}
+        ${this.threadsExampleOverviewVideoLifecycleGeneration % 2 === 0 ? html`<!-- cpk-video-generation-even -->${video}` : html`<!-- cpk-video-generation-odd -->${video}`}
       </div>
+      <button
+        class="cpk-threads-overview-video-control"
+        type="button"
+        aria-pressed=${isPlaying ? "false" : "true"}
+        @click=${this.handleThreadsExampleOverviewVideoControl}
+      >
+        ${isPlaying ? "Pause demo" : "Play demo"}
+      </button>
+      ${this.threadsExampleOverviewVideoState === "failed" ? html`
+              <p class="cpk-threads-overview-video-fallback" role="status">
+                ${THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK}
+              </p>
+            ` : nothing}
     `;
 	}
-	renderThreadsExampleOverview() {
+	/** Show a copy result briefly and announce it to assistive technology. */
+	showThreadsSetupPromptCopyState(state, generation) {
+		if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
+		if (this.threadsSetupPromptCopyResetTimeoutId !== null) window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
+		this.threadsSetupPromptCopyState = state;
+		this.requestUpdate();
+		this.threadsSetupPromptCopyResetTimeoutId = window.setTimeout(() => {
+			if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
+			this.threadsSetupPromptCopyState = "idle";
+			this.threadsSetupPromptCopyResetTimeoutId = null;
+			this.requestUpdate();
+		}, 2e3);
+	}
+	renderThreadsExampleOverview(locked) {
+		const lockedCopy = locked ? this.getThreadsLockedCopy() : void 0;
+		const { lockedAction } = this.inspectorMetadataProjection;
+		const onboardingAction = this.getThreadsEmptyOnboardingAction();
 		return html`
       <div
         style="
@@ -6519,7 +7508,7 @@ ${argsString}</pre
               color: #010507;
             "
           >
-            Threads are persistent, inspectable conversations
+            ${lockedCopy?.heading ?? "Threads are persistent, inspectable conversations"}
           </h2>
           ${this.renderThreadsExampleOverviewVideo()}
           <p
@@ -6530,60 +7519,89 @@ ${argsString}</pre
               color: #57575b;
             "
           >
-            Take a tour with the example threads in the sidebar. Then, start
-            chatting in your app to create the first real thread.
+            ${lockedCopy?.description ?? "Take a tour with the example threads in the sidebar. Then, start chatting in your app to create the first real thread."}
           </p>
           <div style="display:flex;flex-wrap:wrap;gap:8px;">
-            <a
-              href=${this.getThreadsDocsUrl()}
-              target="_blank"
-              rel="noopener"
-              style="
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                min-height: 34px;
-                border-radius: 6px;
-                background: #010507;
-                padding: 8px 12px;
-                font-size: 12px;
-                font-weight: 600;
-                color: #ffffff;
-                text-decoration: none;
-              "
-            >
-              Learn how Threads work
-            </a>
-            <a
-              href=${this.getSelfHostedIntelligenceUrl()}
-              target="_blank"
-              rel="noopener"
-              style="
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                min-height: 34px;
-                border-radius: 6px;
-                border: 1px solid #dbdbe5;
-                background: #ffffff;
-                padding: 8px 12px;
-                font-size: 12px;
-                font-weight: 600;
-                color: #010507;
-                text-decoration: none;
-              "
-            >
-              Explore self-hosted Intelligence
-            </a>
+            ${locked ? html`
+                    ${this.inspectorMetadataProjection.licenseState === "valid" ? html`
+                            <button
+                              data-inspector-threads-setup-prompt
+                              type="button"
+                              aria-label=${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied" : this.threadsSetupPromptCopyState === "error" ? "Copy setup prompt failed. Try again" : "Copy setup prompt for your coding agent"}
+                              @click=${this.handleThreadsSetupPromptCopy}
+                            >
+                              ${this.renderIcon(this.threadsSetupPromptCopyState === "copied" ? "Check" : "Copy")}
+                              ${this.threadsSetupPromptCopyState === "copied" ? "Copied" : this.threadsSetupPromptCopyState === "error" ? "Copy blocked" : "Copy prompt for your agent"}
+                            </button>
+                            <a
+                              data-inspector-threads-setup-link
+                              href=${this.getThreadsRuntimeSetupDocsUrl()}
+                              target="_blank"
+                              rel="noopener"
+                              aria-label="Open setup guide (opens in a new tab)"
+                            >
+                              Open setup guide
+                            </a>
+                            <span
+                              class="sr-only"
+                              data-inspector-threads-setup-copy-status
+                              aria-live="polite"
+                              >${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied." : this.threadsSetupPromptCopyState === "error" ? "Setup prompt copy failed. Open the setup guide and copy it manually." : ""}</span
+                            >
+                          ` : nothing}
+                    ${lockedAction ? this.renderInspectorAction(lockedAction, "locked") : nothing}
+                  ` : html`
+                    <a
+                      href=${this.getThreadsDocsUrl()}
+                      target="_blank"
+                      rel="noopener"
+                      style="
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6px;
+                        min-height: 34px;
+                        border-radius: 6px;
+                        background: #010507;
+                        padding: 8px 12px;
+                        font-size: 12px;
+                        font-weight: 600;
+                        color: #ffffff;
+                        text-decoration: none;
+                      "
+                    >
+                      Learn how Threads work
+                    </a>
+                    <a
+                      href=${onboardingAction.href}
+                      target="_blank"
+                      rel="noopener"
+                      style="
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6px;
+                        min-height: 34px;
+                        border-radius: 6px;
+                        border: 1px solid #dbdbe5;
+                        background: #ffffff;
+                        padding: 8px 12px;
+                        font-size: 12px;
+                        font-weight: 600;
+                        color: #010507;
+                        text-decoration: none;
+                      "
+                    >
+                      ${onboardingAction.label}
+                    </a>
+                  `}
           </div>
         </div>
       </div>
     `;
 	}
 	renderThreadsExampleTour() {
-		if (!this.selectedThreadId || !this.isExampleThreadId(this.selectedThreadId)) return nothing;
+		if (!this.selectedThreadId || this.selectedThreadId !== this.selectedLocalExampleThreadId) return nothing;
 		if (!this.exampleTourActive) return html`
         <button
           type="button"
@@ -6634,7 +7652,7 @@ ${argsString}</pre
             font-family: 'Spline Sans Mono', monospace;
             font-size: 10px;
             font-weight: 600;
-            color: #189370;
+            color: #087653;
             text-transform: uppercase;
           "
         >
@@ -6665,7 +7683,7 @@ ${argsString}</pre
         >
           <button
             type="button"
-            style="border:0;background:transparent;color:#838389;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;"
+            style="border:0;background:transparent;color:#68686e;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;"
             @click=${() => this.dismissExampleTour("skip")}
           >
             Skip
@@ -6844,124 +7862,25 @@ ${argsString}</pre
       </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.getThreadsIntelligenceSignupUrl()}
-              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>
-    `;
+	getThreadsLockedCopy() {
+		switch (this.inspectorMetadataProjection.licenseState) {
+			case "valid": return {
+				heading: "Finish setting up Rich Threads",
+				description: "Copy this prompt into your coding agent to finish the setup."
+			};
+			case "none": return {
+				heading: "Enable Intelligence to inspect Threads.",
+				description: "Persist conversations and inspect saved thread history from the Inspector."
+			};
+			case "expired": return {
+				heading: "Renew Intelligence to inspect Threads.",
+				description: "Your Intelligence access has expired. Renew it to inspect saved thread history."
+			};
+			case "unknown": return {
+				heading: "Threads are unavailable.",
+				description: "This runtime does not expose Threads for the Inspector."
+			};
+		}
 	}
 	/**
 	* Renders the realtime-connection indicator in the memory-store header.
@@ -6981,7 +7900,7 @@ ${argsString}</pre
           gap: 4px;
           font-size: 10px;
           font-weight: 500;
-          color: ${connected ? "#57575b" : "#838389"};
+          color: ${connected ? "#57575b" : "#68686e"};
         "
       >
         <span
@@ -7144,7 +8063,7 @@ ${argsString}</pre
             align-items: center;
             justify-content: center;
             gap: 8px;
-            color: #838389;
+            color: #68686e;
           "
         >
           <svg
@@ -7186,7 +8105,7 @@ ${argsString}</pre
             align-items: center;
             justify-content: center;
             gap: 8px;
-            color: #838389;
+            color: #68686e;
           "
         >
           <svg
@@ -7278,17 +8197,65 @@ ${argsString}</pre
           ></cpk-memory-list>
         </div>
       </div>
+    `;
+	}
+	/** Renders trusted Threads usage and its independent plan action. */
+	renderThreadsUsageFooter() {
+		const { usage, threadsFooterAction } = this.inspectorMetadataProjection;
+		if (!usage && !threadsFooterAction) return nothing;
+		let countLabel;
+		let progressMax;
+		let progressValue;
+		const capacityState = this.getThreadsCapacityState();
+		if (usage) if (usage.limit.kind === "finite") {
+			countLabel = `${usage.used > usage.limit.value ? `${usage.limit.value}+` : String(usage.used)} / ${usage.limit.value} Threads`;
+			progressMax = usage.limit.value;
+			progressValue = Math.min(usage.used, usage.limit.value);
+		} else if (usage.limit.kind === "unlimited") countLabel = `${usage.used} Threads · Unlimited`;
+		else countLabel = `${usage.used} Threads · Limit unavailable`;
+		return html`
+      <footer
+        class="inspector-threads-footer"
+        data-inspector-threads-footer
+        role="group"
+        aria-label="Threads usage"
+      >
+        ${usage && countLabel ? html`
+                <div class="inspector-threads-usage">
+                  <span data-inspector-thread-count>${countLabel}</span>
+                  ${progressMax !== void 0 && progressValue !== void 0 ? html`
+                          <progress
+                            class="inspector-thread-progress"
+                            data-inspector-thread-progress
+                            data-inspector-thread-capacity=${capacityState}
+                            max=${progressMax}
+                            value=${progressValue}
+                            aria-label=${capacityState === "warning" ? `${countLabel}. Near thread limit.` : capacityState === "critical" ? `${countLabel}. Thread limit reached.` : countLabel}
+                            >${countLabel}</progress
+                          >
+                        ` : nothing}
+                  ${usage.expiringSoonCount !== void 0 ? html`
+                          <span data-inspector-thread-expiry
+                            >${usage.expiringSoonCount} Expiring Soon</span
+                          >
+                        ` : nothing}
+                </div>
+              ` : nothing}
+        ${threadsFooterAction ? this.renderInspectorAction(threadsFooterAction, "threads-footer", capacityState === "warning" || capacityState === "critical" ? "Upgrade Your Plan" : threadsFooterAction.label) : nothing}
+      </footer>
     `;
 	}
 	renderThreadsView() {
-		if (!this.areThreadEndpointsAvailable()) return this.renderThreadsLockedView();
-		const { displayThreads, threadsErrorMessage } = this.getActiveThreadsState();
-		const showingExamples = this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage);
-		const visibleThreads = this.getVisibleThreads(displayThreads, threadsErrorMessage);
+		const locked = !this.areThreadEndpointsAvailable();
+		const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
+		const loadingWithoutRows = !locked && threadsLoading && !threadsErrorMessage && displayThreads.length === 0;
+		const showingExamples = this.shouldRenderExampleThreads(locked, displayThreads, threadsErrorMessage, threadsLoading);
+		const visibleThreads = !locked && (threadsErrorMessage || loadingWithoutRows) ? [] : showingExamples ? THREADS_EXAMPLE_THREADS : displayThreads;
 		if (showingExamples) this.trackThreadsExampleViewedOnce();
 		const selectedThread = this.selectedThreadId != null ? visibleThreads.find((t) => t.id === this.selectedThreadId) ?? null : null;
-		const selectedThreadIsExample = this.isExampleThreadId(selectedThread?.id);
-		if (!threadsErrorMessage) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled", displayThreads.length);
+		const selectedThreadIsLocalExample = selectedThread !== null && selectedThread.id === this.selectedLocalExampleThreadId;
+		if (locked) this.trackThreadsViewStateOnce("locked");
+		else if (!threadsErrorMessage && (!threadsLoading || displayThreads.length > 0)) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled");
 		return html`
       <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
@@ -7297,14 +8264,16 @@ ${argsString}</pre
             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%;"
+              style="min-height:0;flex:1;"
               .threads=${visibleThreads}
               .selectedThreadId=${this.selectedThreadId}
               .errorMessage=${threadsErrorMessage}
+              .suppressEmptyState=${loadingWithoutRows}
               @threadSelected=${(e) => {
 			this.handleThreadsThreadSelected(e.detail, showingExamples);
 		}}
             ></cpk-thread-list>
+            ${this.renderThreadsUsageFooter()}
           </div>
 
           <!-- Resize divider -->
@@ -7318,19 +8287,53 @@ ${argsString}</pre
 
           <!-- Center + right: thread details or empty state -->
           <div style="flex:1;min-width:0;overflow:hidden;display:flex;position:relative;">
-            ${selectedThread ? html`<cpk-thread-details
+            ${!locked && threadsErrorMessage ? html`
+                    <div
+                      role="alert"
+                      style="
+                        display: flex;
+                        flex: 1;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6px;
+                        padding: 24px;
+                        color: #c0333a;
+                        text-align: center;
+                      "
+                    >
+                      <strong style="font-size:13px;">Failed to load threads</strong>
+                      <span style="max-width:440px;font-size:12px;line-height:1.5;"
+                        >${threadsErrorMessage}</span
+                      >
+                    </div>
+                  ` : loadingWithoutRows ? html`
+                      <div
+                        role="status"
+                        style="
+                          display: flex;
+                          flex: 1;
+                          align-items: center;
+                          justify-content: center;
+                          color: #57575b;
+                          font-size: 13px;
+                        "
+                      >
+                        Loading threads…
+                      </div>
+                    ` : selectedThread ? html`<cpk-thread-details
                     style="flex:1;min-width:0;"
                     .threadId=${selectedThread.id}
                     .thread=${selectedThread}
-                    .provider=${selectedThreadIsExample ? this.getExampleThreadProvider(selectedThread.id) : null}
-                    .runtimeUrl=${this._core?.runtimeUrl ?? ""}
+                    .provider=${selectedThreadIsLocalExample ? this.getExampleThreadProvider(selectedThread.id) : null}
+                    .runtimeUrl=${selectedThreadIsLocalExample ? "" : this._core?.runtimeUrl ?? ""}
                     .headers=${this._core?.headers ?? {}}
-                    .threadInspectionAvailable=${selectedThreadIsExample || this._core?.threadEndpoints?.inspect !== false}
+                    .threadInspectionAvailable=${selectedThreadIsLocalExample || this.areThreadEndpointsAvailable() && 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>
-                  ${selectedThreadIsExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview() : html`
+                  ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview(locked) : html`
                     <div
                       style="
                         flex: 1;
@@ -7339,7 +8342,7 @@ ${argsString}</pre
                         align-items: center;
                         justify-content: center;
                         gap: 8px;
-                        color: #838389;
+                        color: #68686e;
                       "
                     >
                       <svg
@@ -7863,9 +8866,12 @@ ${prettyEvent}</pre
     `;
 	}
 	handleMenuSelect(key) {
-		if (key !== "settings" && !this.menuItems.some((item) => item.key === key)) return;
+		if (!this.menuItems.some((item) => item.key === key)) return;
 		const previousMenu = this.selectedMenu;
+		this.pendingPersistedMenu = null;
 		this.selectedMenu = key;
+		this.settingsOpen = false;
+		this.lastSelectedMenuByGroup[this.getGroupForMenu(key)] = key;
 		if (key === "agents" && this.selectedContext === "all-agents") {
 			const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
 			if (agentOptions.length > 0) {
@@ -7909,6 +8915,7 @@ ${prettyEvent}</pre
 		if (this.selectedContext !== key) {
 			this.selectedContext = key;
 			this.expandedRows.clear();
+			this.autoSelectLatestThread();
 		}
 		this.contextMenuOpen = false;
 		this.persistState();