@copilotkit/web-inspector 1.62.3 → 1.63.0

package/dist/index.cjs

@@ -35,7 +35,13 @@ const DOCKED_LEFT_WIDTH = 500;
 const MAX_AGENT_EVENTS = 200;
 const MAX_TOTAL_EVENTS = 500;
 const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
+const 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 THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
+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_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
+const THREADS_EXAMPLE_AGENT_ID = "threads-feature";
 const AGENT_EVENT_TYPES = [
 	"RUN_STARTED",
 	"RUN_FINISHED",
@@ -61,6 +67,201 @@ const AGENT_EVENT_TYPES = [
 	"ACTIVITY_SNAPSHOT",
 	"ACTIVITY_DELTA"
 ];
+const THREADS_EXAMPLE_THREADS = [
+	{
+		id: "example-realtime-sync",
+		name: "Realtime thread sync",
+		agentId: THREADS_EXAMPLE_AGENT_ID,
+		organizationId: "example-organization",
+		createdById: "example-user",
+		archived: false,
+		createdAt: "2026-07-08T16:00:00.000Z",
+		updatedAt: "2026-07-08T16:30:00.000Z",
+		isExample: true
+	},
+	{
+		id: "example-manage-history",
+		name: "Manage saved conversations",
+		agentId: THREADS_EXAMPLE_AGENT_ID,
+		organizationId: "example-organization",
+		createdById: "example-user",
+		archived: false,
+		createdAt: "2026-07-07T17:45:00.000Z",
+		updatedAt: "2026-07-07T18:15:00.000Z",
+		isExample: true
+	},
+	{
+		id: "example-inspect-runs",
+		name: "Inspect durable run history",
+		agentId: THREADS_EXAMPLE_AGENT_ID,
+		organizationId: "example-organization",
+		createdById: "example-user",
+		archived: false,
+		createdAt: "2026-07-06T20:15:00.000Z",
+		updatedAt: "2026-07-06T20:45:00.000Z",
+		isExample: true
+	}
+];
+const THREADS_EXAMPLE_DETAILS = {
+	"example-realtime-sync": {
+		messages: [{
+			id: "example-sync-user",
+			role: "user",
+			content: "Resume the checkout support thread from yesterday."
+		}, {
+			id: "example-sync-assistant",
+			role: "assistant",
+			content: "I found the saved thread, restored the cart state, and continued from the latest user message."
+		}],
+		events: [
+			{
+				type: "RUN_STARTED",
+				timestamp: "2026-07-08T16:30:00.000Z",
+				payload: {
+					threadId: "example-realtime-sync",
+					agentId: THREADS_EXAMPLE_AGENT_ID
+				}
+			},
+			{
+				type: "MESSAGES_SNAPSHOT",
+				timestamp: "2026-07-08T16:30:01.000Z",
+				payload: {
+					messageCount: 6,
+					source: "thread-history"
+				}
+			},
+			{
+				type: "STATE_SNAPSHOT",
+				timestamp: "2026-07-08T16:30:02.000Z",
+				payload: {
+					cartId: "cart_demo_42",
+					checkoutStep: "shipping",
+					resumed: true
+				}
+			},
+			{
+				type: "RUN_FINISHED",
+				timestamp: "2026-07-08T16:30:04.000Z",
+				payload: { status: "completed" }
+			}
+		],
+		state: {
+			cartId: "cart_demo_42",
+			checkoutStep: "shipping",
+			userIntent: "resume_previous_checkout",
+			persistedThread: true
+		}
+	},
+	"example-manage-history": {
+		messages: [{
+			id: "example-history-user",
+			role: "user",
+			content: "Rename this saved support conversation for the handoff."
+		}, {
+			id: "example-history-assistant",
+			role: "assistant",
+			content: "Renamed the thread and kept the prior messages available for the next session."
+		}],
+		events: [
+			{
+				type: "RUN_STARTED",
+				timestamp: "2026-07-07T18:15:00.000Z",
+				payload: {
+					threadId: "example-manage-history",
+					agentId: THREADS_EXAMPLE_AGENT_ID
+				}
+			},
+			{
+				type: "CUSTOM_EVENT",
+				timestamp: "2026-07-07T18:15:01.000Z",
+				payload: {
+					action: "thread_renamed",
+					previousName: "Untitled",
+					name: "Billing escalation handoff"
+				}
+			},
+			{
+				type: "RUN_FINISHED",
+				timestamp: "2026-07-07T18:15:03.000Z",
+				payload: { status: "completed" }
+			}
+		],
+		state: {
+			name: "Billing escalation handoff",
+			savedMessages: 14,
+			lastHandoff: "support-team"
+		}
+	},
+	"example-inspect-runs": {
+		messages: [{
+			id: "example-inspect-user",
+			role: "user",
+			content: "Why did the assistant recommend the enterprise plan?"
+		}, {
+			id: "example-inspect-assistant",
+			role: "assistant",
+			content: "The recommendation came from the account size, SSO requirement, and audit-log constraint in state."
+		}],
+		events: [
+			{
+				type: "RUN_STARTED",
+				timestamp: "2026-07-06T20:45:00.000Z",
+				payload: {
+					threadId: "example-inspect-runs",
+					agentId: THREADS_EXAMPLE_AGENT_ID
+				}
+			},
+			{
+				type: "TOOL_CALL_START",
+				timestamp: "2026-07-06T20:45:01.000Z",
+				payload: {
+					toolCallId: "call_account_lookup",
+					toolName: "lookupAccount"
+				}
+			},
+			{
+				type: "TOOL_CALL_RESULT",
+				timestamp: "2026-07-06T20:45:02.000Z",
+				payload: {
+					toolCallId: "call_account_lookup",
+					seats: 220,
+					requiresSso: true
+				}
+			},
+			{
+				type: "RUN_FINISHED",
+				timestamp: "2026-07-06T20:45:04.000Z",
+				payload: { status: "completed" }
+			}
+		],
+		state: {
+			accountTier: "growth",
+			seats: 220,
+			requiresSso: true,
+			auditLogsRequired: true
+		}
+	}
+};
+const THREADS_EXAMPLE_TOUR_STEPS = [
+	{
+		tab: "timeline",
+		label: "Timeline",
+		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",
+		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."
+	},
+	{
+		tab: "state",
+		label: "State",
+		title: "Check the durable state",
+		body: "The state tab shows the saved values that make a thread resumable across sessions."
+	}
+];
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -276,6 +477,11 @@ var CpkThreadList = class extends lit.LitElement {
       color: #57575b;
     }
 
+    .cpk-tl__pill--example {
+      background: rgba(133, 236, 206, 0.22);
+      color: #189370;
+    }
+
     /* ── Empty state ── */
     .cpk-tl__empty {
       padding: 32px 16px;
@@ -349,6 +555,9 @@ var CpkThreadList = class extends lit.LitElement {
                 </div>
                 <div class="cpk-tl__meta">
                   <span class="cpk-tl__pill">${thread.agentId}</span>
+                  ${thread.isExample ? lit.html`
+                          <span class="cpk-tl__pill cpk-tl__pill--example">Example</span>
+                        ` : lit.nothing}
                 </div>
               </div>
             `)}
@@ -572,6 +781,9 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 		}
 		this.maybeFetchTabData(id);
 	}
+	selectTab(id) {
+		this.activateTab(id);
+	}
 	maybeFetchTabData(id) {
 		if (!this.threadId) return;
 		if ((id === "timeline" || id === "raw-events") && !this._eventsFetched) {
@@ -3052,6 +3264,18 @@ var WebInspectorElement = class extends lit.LitElement {
 		this.pendingBannerViewed = null;
 		this.clickedBannerIds = /* @__PURE__ */ new Set();
 		this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
+		this.viewedExampleThreadIds = /* @__PURE__ */ new Set();
+		this.selectedExampleThreadIds = /* @__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.threadsExampleOverviewVideoLoadTimer = null;
+		this.threadsExampleOverviewVideoIdleCallbackId = null;
 		this.contextState = {
 			button: {
 				position: {
@@ -3298,6 +3522,10 @@ var WebInspectorElement = class extends lit.LitElement {
 			if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
 			this.threadDividerResizing = false;
 		};
+		this.handleThreadsExampleOverviewVideoLoaded = () => {
+			this.threadsExampleOverviewVideoReady = true;
+			this.requestUpdate();
+		};
 		this.handleClearEvents = () => {
 			if (this.selectedContext === "all-agents") {
 				this.agentEvents.clear();
@@ -3418,6 +3646,16 @@ var WebInspectorElement = class extends lit.LitElement {
 	areThreadEndpointsAvailable() {
 		return this.getThreadServiceStatus() !== "unavailable";
 	}
+	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;
+		return {
+			displayThreads,
+			threadsErrorMessage
+		};
+	}
 	getThreadsTelemetryProps(extra = {}, options = {}) {
 		const distinctId = options.includeUrlAttribution && !this.core?.telemetryDisabled ? require_telemetry.getTelemetryDistinctIdForUrl() : null;
 		const threadServiceStatus = this.getThreadServiceStatus();
@@ -3442,9 +3680,21 @@ var WebInspectorElement = class extends lit.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");
 	}
+	getThreadsTalkToEngineerUrl() {
+		return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
+	}
+	getThreadsDocsUrl() {
+		return this.appendRefParam(THREADS_DOCS_URL, "cpk-inspector-threads");
+	}
+	getSelfHostedIntelligenceUrl() {
+		return this.appendRefParam(SELF_HOSTED_INTELLIGENCE_URL, "cpk-inspector-threads");
+	}
 	subscribeToThreadStore(agentId, store) {
 		if (!this.areThreadEndpointsAvailable()) return;
 		if (this._threadStoreSubscriptions.has(agentId)) return;
@@ -3473,7 +3723,7 @@ var WebInspectorElement = class extends lit.LitElement {
 	}
 	autoSelectLatestThread() {
 		if (this._threads.length === 0) return;
-		if (!(this.selectedThreadId != null && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
+		if (!(this.selectedThreadId != null && !this.isExampleThreadId(this.selectedThreadId) && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
 	}
 	teardownThreadStoreSubscriptions() {
 		for (const unsub of this._threadStoreSubscriptions.values()) unsub();
@@ -4668,6 +4918,35 @@ ${argsString}</pre
       .cpk-tab-active {
         cursor: pointer;
       }
+      .cpk-threads-overview-video-frame {
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 440px;
+        aspect-ratio: 16 / 9;
+        margin: 0 0 14px;
+        overflow: hidden;
+        border: 1px solid #dbdbe5;
+        border-radius: 8px;
+        background:
+          linear-gradient(
+            135deg,
+            rgba(190, 194, 255, 0.18),
+            rgba(133, 236, 206, 0.12)
+          ),
+          #ffffff;
+        box-shadow: 0 8px 20px rgba(1, 5, 7, 0.08);
+      }
+      .cpk-threads-overview-video {
+        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 {
@@ -4844,6 +5123,7 @@ ${argsString}</pre
 			window.addEventListener("resize", this.handleResize);
 			window.addEventListener("pointerdown", this.handleGlobalPointerDown);
 			this.hydrateStateFromStorageEarly();
+			this.exampleTourDismissed = this.readThreadsExampleTourDismissed();
 			this.tryAutoAttachCore();
 			this.ensureAnnouncementLoading();
 		}
@@ -4869,6 +5149,14 @@ ${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.removeDockStyles(true);
 		this.detachFromCore();
 	}
@@ -5065,6 +5353,17 @@ ${argsString}</pre
                   </button>
                 `;
 		})}
+              ${this.selectedMenu === "threads" ? lit.html`
+                      <a
+                        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;"
+                        @click=${this.handleTalkToEngineerClick}
+                      >
+                        Talk to an Engineer
+                      </a>
+                    ` : lit.nothing}
             </div>
           </div>
           <div class="flex flex-1 flex-col overflow-hidden">
@@ -5650,6 +5949,372 @@ ${argsString}</pre
 		else if (state === "empty_enabled") require_telemetry.trackThreadsEmptyEnabledViewed(props);
 		else require_telemetry.trackThreadsEnabledViewed(props);
 	}
+	shouldRenderExampleThreads(displayThreads, threadsErrorMessage) {
+		return this.areThreadEndpointsAvailable() && !threadsErrorMessage && displayThreads.length === 0;
+	}
+	getVisibleThreads(displayThreads, threadsErrorMessage) {
+		return this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage) ? THREADS_EXAMPLE_THREADS : displayThreads;
+	}
+	isExampleThreadId(threadId) {
+		return THREADS_EXAMPLE_THREADS.some((thread) => thread.id === threadId);
+	}
+	getExampleThreadProvider(threadId) {
+		const cached = this.exampleThreadProviders.get(threadId);
+		if (cached) return cached;
+		const thread = THREADS_EXAMPLE_THREADS.find((item) => item.id === threadId);
+		const details = THREADS_EXAMPLE_DETAILS[threadId];
+		const provider = {
+			getThreadMetadata: async () => thread ? {
+				id: thread.id,
+				name: thread.name,
+				agentId: thread.agentId,
+				endUserId: "example-user",
+				status: "completed",
+				updatedAt: thread.updatedAt
+			} : null,
+			getMessages: async () => details?.messages ?? [],
+			getEvents: async () => details?.events ?? [],
+			getState: async () => details?.state ?? null
+		};
+		this.exampleThreadProviders.set(threadId, provider);
+		return provider;
+	}
+	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);
+			require_telemetry.trackThreadsExampleViewed(this.getThreadsTelemetryProps({
+				example_thread_id: thread.id,
+				thread_count: 0
+			}));
+		}
+	}
+	trackThreadsExampleSelectedOnce(threadId) {
+		if (this.core?.telemetryDisabled) return;
+		if (this.selectedExampleThreadIds.has(threadId)) return;
+		this.selectedExampleThreadIds.add(threadId);
+		require_telemetry.trackThreadsExampleSelected(this.getThreadsTelemetryProps({
+			example_thread_id: threadId,
+			thread_count: 0
+		}));
+	}
+	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
+		});
+	}
+	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}`;
+		if (this.viewedExampleTourSteps.has(key)) return;
+		this.viewedExampleTourSteps.add(key);
+		require_telemetry.trackThreadsExampleTourStepViewed(this.getCurrentExampleTourProps());
+	}
+	syncExampleTourTab() {
+		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
+		if (!step) return;
+		this.updateComplete.then(() => {
+			(this.shadowRoot?.querySelector("cpk-thread-details"))?.selectTab?.(step.tab);
+		});
+	}
+	startExampleTour(autoStarted) {
+		if (!this.selectedThreadId) return;
+		this.exampleTourActive = true;
+		this.exampleTourStep = 0;
+		if (autoStarted) {
+			this.exampleTourAutoShown = true;
+			if (!this.core?.telemetryDisabled) require_telemetry.trackThreadsExampleTourStarted(this.getCurrentExampleTourProps());
+		} else if (!this.core?.telemetryDisabled) require_telemetry.trackThreadsExampleTourReopened(this.getCurrentExampleTourProps());
+		this.trackThreadsExampleTourStepViewedOnce();
+		this.syncExampleTourTab();
+		this.requestUpdate();
+	}
+	setExampleTourStep(nextStep) {
+		this.exampleTourStep = Math.max(0, Math.min(THREADS_EXAMPLE_TOUR_STEPS.length - 1, nextStep));
+		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") require_telemetry.trackThreadsExampleTourCompleted(props);
+		else require_telemetry.trackThreadsExampleTourDismissed(props);
+		this.requestUpdate();
+	}
+	handleThreadsThreadSelected(threadId, showingExamples) {
+		if (showingExamples && this.selectedThreadId === threadId) {
+			this.selectedThreadId = null;
+			this.exampleTourActive = false;
+			this.requestUpdate();
+			return;
+		}
+		this.selectedThreadId = threadId;
+		if (showingExamples && this.isExampleThreadId(threadId)) {
+			this.trackThreadsExampleSelectedOnce(threadId);
+			if (!this.exampleTourDismissed && !this.exampleTourAutoShown) this.startExampleTour(true);
+			else this.exampleTourActive = false;
+		} else this.exampleTourActive = false;
+		this.requestUpdate();
+	}
+	readThreadsExampleTourDismissed() {
+		if (typeof window === "undefined") return false;
+		try {
+			const raw = window.localStorage.getItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY);
+			if (!raw) return false;
+			return JSON.parse(raw).dismissed === true;
+		} catch {
+			return false;
+		}
+	}
+	writeThreadsExampleTourDismissed() {
+		if (typeof window === "undefined") return;
+		try {
+			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 = () => {
+			this.threadsExampleOverviewVideoLoadTimer = null;
+			this.threadsExampleOverviewVideoIdleCallbackId = null;
+			this.threadsExampleOverviewVideoShouldLoad = true;
+			this.requestUpdate();
+		};
+		if (typeof window.requestIdleCallback === "function") {
+			this.threadsExampleOverviewVideoIdleCallbackId = window.requestIdleCallback(loadVideo, { timeout: 1200 });
+			return;
+		}
+		this.threadsExampleOverviewVideoLoadTimer = window.setTimeout(loadVideo, 450);
+	}
+	renderThreadsExampleOverviewVideo() {
+		this.scheduleThreadsExampleOverviewVideoLoad();
+		return lit.html`
+      <div class="cpk-threads-overview-video-frame" aria-hidden="true">
+        ${this.threadsExampleOverviewVideoShouldLoad ? lit.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>
+              ` : lit.nothing}
+      </div>
+    `;
+	}
+	renderThreadsExampleOverview() {
+		return lit.html`
+      <div
+        style="
+          flex: 1;
+          min-width: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+          background: #f7f7f9;
+        "
+      >
+        <div style="max-width: 440px; color: #57575b;">
+          <h2
+            style="
+              margin: 0 0 10px;
+              font-size: 20px;
+              line-height: 1.25;
+              font-weight: 600;
+              color: #010507;
+            "
+          >
+            Threads are persistent, inspectable conversations
+          </h2>
+          ${this.renderThreadsExampleOverviewVideo()}
+          <p
+            style="
+              margin: 0 0 16px;
+              font-size: 13px;
+              line-height: 1.55;
+              color: #57575b;
+            "
+          >
+            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>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	renderThreadsExampleTour() {
+		if (!this.selectedThreadId || !this.isExampleThreadId(this.selectedThreadId)) return lit.nothing;
+		if (!this.exampleTourActive) return lit.html`
+        <button
+          type="button"
+          style="
+            position: absolute;
+            right: 16px;
+            bottom: 16px;
+            z-index: 2;
+            border: 1px solid #dbdbe5;
+            border-radius: 6px;
+            background: #ffffff;
+            padding: 7px 10px;
+            color: #57575b;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            box-shadow: 0 8px 18px rgba(1, 5, 7, 0.08);
+          "
+          @click=${() => this.startExampleTour(false)}
+        >
+          Show tour
+        </button>
+      `;
+		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
+		const isFirst = this.exampleTourStep === 0;
+		const isLast = this.exampleTourStep === THREADS_EXAMPLE_TOUR_STEPS.length - 1;
+		return lit.html`
+      <div
+        role="dialog"
+        aria-label="Example thread tour"
+        style="
+          position: absolute;
+          right: 16px;
+          bottom: 16px;
+          z-index: 3;
+          width: min(340px, calc(100% - 32px));
+          border: 1px solid #dbdbe5;
+          border-radius: 8px;
+          background: #ffffff;
+          padding: 14px;
+          box-shadow: 0 16px 36px rgba(1, 5, 7, 0.14);
+          color: #57575b;
+        "
+      >
+        <div
+          style="
+            margin-bottom: 8px;
+            font-family: 'Spline Sans Mono', monospace;
+            font-size: 10px;
+            font-weight: 600;
+            color: #189370;
+            text-transform: uppercase;
+          "
+        >
+          ${this.exampleTourStep + 1}/${THREADS_EXAMPLE_TOUR_STEPS.length}
+          ${step.label}
+        </div>
+        <div
+          style="
+            margin-bottom: 6px;
+            font-size: 14px;
+            line-height: 1.35;
+            font-weight: 600;
+            color: #010507;
+          "
+        >
+          ${step.title}
+        </div>
+        <div style="font-size: 12px; line-height: 1.5; color: #57575b;">
+          ${step.body}
+        </div>
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
+            margin-top: 14px;
+          "
+        >
+          <button
+            type="button"
+            style="border:0;background:transparent;color:#838389;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;"
+            @click=${() => this.dismissExampleTour("skip")}
+          >
+            Skip
+          </button>
+          <div style="display:flex;gap:8px;">
+            <button
+              type="button"
+              style="border:1px solid #dbdbe5;border-radius:6px;background:#ffffff;color:#57575b;font-size:12px;font-weight:600;cursor:pointer;padding:7px 10px;"
+              ?disabled=${isFirst}
+              @click=${() => this.setExampleTourStep(this.exampleTourStep - 1)}
+            >
+              Back
+            </button>
+            <button
+              type="button"
+              style="border:1px solid #010507;border-radius:6px;background:#010507;color:#ffffff;font-size:12px;font-weight:600;cursor:pointer;padding:7px 10px;"
+              @click=${() => isLast ? this.dismissExampleTour("done") : this.setExampleTourStep(this.exampleTourStep + 1)}
+            >
+              ${isLast ? "Done" : "Next"}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+	}
 	renderThreadsLockedBackgroundMockup() {
 		return lit.html`
       <div
@@ -5895,29 +6560,7 @@ ${argsString}</pre
             "
           >
             <a
-              href=${this.getTalkToEngineerUrl()}
-              target="_blank"
-              rel="noopener"
-              style="
-                display: inline-flex;
-                min-height: 34px;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                border-radius: 6px;
-                background: #010507;
-                padding: 8px 12px;
-                font-size: 12px;
-                font-weight: 600;
-                color: #ffffff;
-                text-decoration: none;
-              "
-              @click=${this.handleThreadsTalkToEngineerClick}
-            >
-              Talk to an Engineer
-            </a>
-            <a
-              href=${this.getIntelligenceSignupUrl()}
+              href=${this.getThreadsIntelligenceSignupUrl()}
               target="_blank"
               rel="noopener"
               style="
@@ -6250,27 +6893,15 @@ ${argsString}</pre
 	}
 	renderThreadsView() {
 		if (!this.areThreadEndpointsAvailable()) return this.renderThreadsLockedView();
-		const displayThreads = this.selectedContext === "all-agents" ? this._threads : this._threadsByAgent.get(this.selectedContext) ?? [];
-		let threadsErrorMessage = null;
-		if (this.selectedContext === "all-agents") threadsErrorMessage = this._threadsErrorByAgent.values().next().value?.message ?? null;
-		else threadsErrorMessage = this._threadsErrorByAgent.get(this.selectedContext)?.message ?? null;
-		const selectedThread = this.selectedThreadId != null ? displayThreads.find((t) => t.id === this.selectedThreadId) ?? null : null;
+		const { displayThreads, threadsErrorMessage } = this.getActiveThreadsState();
+		const showingExamples = this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage);
+		const visibleThreads = this.getVisibleThreads(displayThreads, threadsErrorMessage);
+		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);
 		return lit.html`
       <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
-        <div
-          style="display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid #DBDBE5;background:#ffffff;padding:8px 12px;flex-shrink:0;"
-        >
-          <a
-            href=${this.getTalkToEngineerUrl()}
-            target="_blank"
-            rel="noopener"
-            style="display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
-            @click=${this.handleTalkToEngineerClick}
-          >
-            Talk to an Engineer
-          </a>
-        </div>
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
           <!-- Left sidebar: thread list -->
           <div
@@ -6278,12 +6909,11 @@ ${argsString}</pre
           >
             <cpk-thread-list
               style="height:100%;"
-              .threads=${displayThreads}
+              .threads=${visibleThreads}
               .selectedThreadId=${this.selectedThreadId}
               .errorMessage=${threadsErrorMessage}
               @threadSelected=${(e) => {
-			this.selectedThreadId = e.detail;
-			this.requestUpdate();
+			this.handleThreadsThreadSelected(e.detail, showingExamples);
 		}}
             ></cpk-thread-list>
           </div>
@@ -6298,18 +6928,20 @@ ${argsString}</pre
           ></div>
 
           <!-- Center + right: thread details or empty state -->
-          <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
+          <div style="flex:1;min-width:0;overflow:hidden;display:flex;position:relative;">
             ${selectedThread ? lit.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 ?? ""}
                     .headers=${this._core?.headers ?? {}}
-                    .threadInspectionAvailable=${this._core?.threadEndpoints?.inspect !== false}
+                    .threadInspectionAvailable=${selectedThreadIsExample || 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>` : lit.html`
+                  ></cpk-thread-details>
+                  ${selectedThreadIsExample ? this.renderThreadsExampleTour() : lit.nothing}` : showingExamples ? this.renderThreadsExampleOverview() : lit.html`
                     <div
                       style="
                         flex: 1;