@copilotkit/web-inspector 1.61.1 → 1.62.0

package/src/index.ts

@@ -28,7 +28,7 @@ import type {
   DockMode,
   Position,
   Size,
-} from "./lib/types";
+} from "./lib/types.js";
 import {
   applyAnchorPosition as applyAnchorPositionHelper,
   centerContext as centerContextHelper,
@@ -37,7 +37,7 @@ import {
   updateAnchorFromPosition as updateAnchorFromPositionHelper,
   updateSizeFromElement,
   clampSize as clampSizeToViewport,
-} from "./lib/context-helpers";
+} from "./lib/context-helpers.js";
 import {
   loadInspectorState,
   saveInspectorState,
@@ -45,19 +45,30 @@ import {
   isValidPosition,
   isValidSize,
   isValidDockMode,
-} from "./lib/persistence";
-import type { PersistedState } from "./lib/persistence";
+} from "./lib/persistence.js";
+import type { PersistedState } from "./lib/persistence.js";
 import {
   TELEMETRY_DOCS_URL,
   ensureTelemetryDistinctId,
+  getRuntimeUrlType,
   getTelemetryDistinctIdForUrl,
   maybeShowDisclosure,
   trackBannerClicked,
   trackBannerViewed,
+  trackTalkToEngineerClicked,
+  trackThreadsEmptyEnabledViewed,
+  trackThreadsEnabledViewed,
+  trackThreadsIntelligenceSignupClicked,
+  trackThreadsLockedViewed,
   trackThreadsTabClicked,
-} from "./lib/telemetry";
+  trackThreadsTalkToEngineerClicked,
+} from "./lib/telemetry.js";
+import type { InspectorThreadTelemetryProps } from "./lib/telemetry.js";
+
+export type { Anchor } from "./lib/types.js";
 
 export const WEB_INSPECTOR_TAG = "cpk-web-inspector" as const;
+export const THREAD_INSPECTOR_TAG = "cpk-thread-inspector" as const;
 
 type LucideIconName = keyof typeof icons;
 
@@ -88,6 +99,10 @@ const DEFAULT_WINDOW_SIZE: Size = { width: 840, height: 700 };
 const DOCKED_LEFT_WIDTH = 500; // Sensible width for left dock with collapsed sidebar
 const MAX_AGENT_EVENTS = 200;
 const MAX_TOTAL_EVENTS = 500;
+const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
+const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
+
+type ThreadServiceStatus = "available" | "unavailable" | "unknown" | "error";
 
 type InspectorAgentEventType =
   | "RUN_STARTED"
@@ -186,15 +201,62 @@ type InspectorEvent = {
 
 // ─── Thread details types ────────────────────────────────────────────────────
 
-interface ApiThreadMessage {
+export type ThreadDebuggerProviderLoadOptions = {
+  signal: AbortSignal;
+};
+
+export type ThreadDebuggerToolCall = {
+  id: string;
+  name: string;
+  args: string | Record<string, unknown>;
+};
+
+export type ThreadDebuggerMessage = {
   id: string;
   role: string;
   content?: string;
-  toolCalls?: Array<{ id: string; name: string; args: string }>;
+  toolCalls?: ThreadDebuggerToolCall[];
   toolCallId?: string;
   /** Present when role === "activity" (Generative UI output). */
   activityType?: string;
-}
+};
+
+export type ThreadDebuggerEvent = {
+  type: string;
+  timestamp: string | number;
+  payload?: Record<string, unknown>;
+  [key: string]: unknown;
+};
+
+export type ThreadDebuggerMetadata = {
+  id: string;
+  name?: string | null;
+  agentId?: string | null;
+  endUserId?: string | null;
+  createdById?: string | null;
+  status?: string | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+};
+
+export type ThreadDebuggerProvider = {
+  getThreadMetadata?: (
+    threadId: string,
+    options: ThreadDebuggerProviderLoadOptions,
+  ) => Promise<ThreadDebuggerMetadata | null>;
+  getMessages?: (
+    threadId: string,
+    options: ThreadDebuggerProviderLoadOptions,
+  ) => Promise<ThreadDebuggerMessage[]>;
+  getEvents?: (
+    threadId: string,
+    options: ThreadDebuggerProviderLoadOptions,
+  ) => Promise<ThreadDebuggerEvent[]>;
+  getState?: (
+    threadId: string,
+    options: ThreadDebuggerProviderLoadOptions,
+  ) => Promise<Record<string, unknown> | null>;
+};
 
 interface ConversationUser {
   id: string;
@@ -268,9 +330,39 @@ interface ApiAgentEvent {
   type: string;
   timestamp: string | number;
   payload: Record<string, unknown>;
+  sourceIndex?: number;
+  rawEvent?: ThreadDebuggerEvent;
 }
 
-type ThreadDetailsTab = "conversation" | "agent-state" | "ag-ui-events";
+type ThreadDetailsTab = "timeline" | "state" | "raw-events";
+type ThreadDetailsPanelCacheSlot = ThreadDetailsTab | "timeline-fallback";
+
+type TimelineItemKind =
+  | "message"
+  | "tool"
+  | "state"
+  | "run"
+  | "event"
+  | "warning";
+
+type TimelineItem = {
+  id: string;
+  kind: TimelineItemKind;
+  title: string;
+  body?: string;
+  timestamp: string | number;
+  sourceIndex: number;
+  severity?: "warning" | "error";
+  details?: Record<string, unknown>;
+};
+
+type RuntimeEventsFetchResult =
+  | { status: "available"; events: ThreadDebuggerEvent[] }
+  | { status: "not-available" };
+
+type RuntimeStateFetchResult =
+  | { status: "available"; state: Record<string, unknown> | null }
+  | { status: "not-available" };
 
 // ─── JSON syntax highlighter ─────────────────────────────────────────────────
 // Inline-styled so shadow DOM encapsulation preserves colors when the output
@@ -334,9 +426,10 @@ function eventColors(type: string): { bg: string; fg: string } {
     return { bg: "rgba(133,236,206,0.15)", fg: "#189370" };
   if (type.startsWith("STATE"))
     return { bg: "rgba(190,194,255,0.102)", fg: "#5558B2" };
+  if (type === "RUN_ERROR" || type === "ERROR")
+    return { bg: "rgba(250,95,103,0.13)", fg: "#c0333a" };
   if (type.startsWith("RUN_") || type.startsWith("STEP_"))
     return { bg: "rgba(255,172,77,0.2)", fg: "#996300" };
-  if (type === "ERROR") return { bg: "rgba(250,95,103,0.13)", fg: "#c0333a" };
   return { bg: "#F7F7F9", fg: "#838389" };
 }
 
@@ -603,28 +696,30 @@ class CpkThreadList extends LitElement {
                   ${
                     this.errorMessage
                       ? html`
-                          <svg
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class="cpk-tl__empty-icon"
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class="cpk-tl__empty-icon"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <line x1="12" y1="8" x2="12" y2="12" />
+                          <line x1="12" y1="16" x2="12.01" y2="16" />
+                        </svg>
+                        <div>
+                          Failed to load threads
+                          <div
+                            style="font-size:11px;margin-top:4px;color:#c0333a;"
                           >
-                            <circle cx="12" cy="12" r="10" />
-                            <line x1="12" y1="8" x2="12" y2="12" />
-                            <line x1="12" y1="16" x2="12.01" y2="16" />
-                          </svg>
-                          <div>
-                            Failed to load threads
-                            <div style="font-size:11px;margin-top:4px;color:#c0333a;">
-                              ${this.errorMessage}
-                            </div>
+                            ${this.errorMessage}
                           </div>
-                        `
+                        </div>
+                      `
                       : this.threads.length === 0
                         ? html`
                             <svg
@@ -656,21 +751,14 @@ class CpkThreadList extends LitElement {
   }
 }
 
-// ─── cpk-thread-details ──────────────────────────────────────────────────────
-// Renders the selected thread's conversation, agent state, and AG-UI events.
-// Conversation comes from the runtime's `/threads/:id/messages` endpoint
-// (always thread-accurate). Agent state and AG-UI events accept live inputs
-// (`agentStateInput`, `agentEventsInput`) from the parent inspector's ongoing
-// agent subscriptions; when those are absent we fall back to the per-thread
-// fetched data via `/threads/:id/{events,state}`.
-
-// Exported (with the underscore-prefixed name signalling internal/test-only)
-// so unit tests can pin down the per-panel template-cache invariants without
-// reaching through `customElements`. Production consumers continue to use the
-// `cpk-thread-details` custom element registered below.
-export class ɵCpkThreadDetails extends LitElement {
+// ─── cpk-thread-inspector ────────────────────────────────────────────────────
+// Renders the selected thread's read-only timeline, state, raw AG-UI events,
+// and compact technical metadata. External hosts provide a ThreadDebuggerProvider;
+// the legacy CopilotKit Inspector wrapper can still pass runtime URL inputs.
+export class CpkThreadInspector extends LitElement {
   static properties = {
     threadId: { attribute: false },
+    provider: { attribute: false },
     thread: { attribute: false },
     runtimeUrl: { attribute: false },
     headers: { attribute: false },
@@ -679,6 +767,7 @@ export class ɵCpkThreadDetails extends LitElement {
     agentEventsInput: { attribute: false },
     liveMessageVersion: { attribute: false },
     _tab: { state: true },
+    _fetchedMetadata: { state: true },
     _conversation: { state: true },
     _fetchedEvents: { state: true },
     _fetchedState: { state: true },
@@ -699,7 +788,8 @@ export class ɵCpkThreadDetails extends LitElement {
   };
 
   threadId: string | null = null;
-  thread: ɵThread | null = null;
+  provider: ThreadDebuggerProvider | null = null;
+  thread: ThreadDebuggerMetadata | ɵThread | null = null;
   runtimeUrl = "";
   headers: Record<string, string> = {};
   threadInspectionAvailable = false;
@@ -713,7 +803,8 @@ export class ɵCpkThreadDetails extends LitElement {
    */
   liveMessageVersion = 0;
 
-  private _tab: ThreadDetailsTab = "conversation";
+  private _tab: ThreadDetailsTab = "timeline";
+  private _fetchedMetadata: ThreadDebuggerMetadata | null = null;
   private _conversation: ConversationItem[] = [];
   private _fetchedEvents: ApiAgentEvent[] | null = null;
   private _fetchedState: Record<string, unknown> | null = null;
@@ -746,9 +837,9 @@ export class ɵCpkThreadDetails extends LitElement {
    * switching back to AG-UI Events on a thread with hundreds of events
    * triggers a multi-second DOM-creation pass each time.
    *
-   * Reset to {"conversation"} when the selected thread changes.
+   * Reset to {"timeline"} when the selected thread changes.
    */
-  private _activatedTabs: Set<ThreadDetailsTab> = new Set(["conversation"]);
+  private _activatedTabs: Set<ThreadDetailsTab> = new Set(["timeline"]);
   /**
    * Memoized per-panel templates keyed by the inputs they render from.
    * When the underlying data hasn't changed (same `_conversation` /
@@ -760,9 +851,17 @@ export class ɵCpkThreadDetails extends LitElement {
    * reference; if any element flips, the cache misses and rebuilds.
    */
   private _panelTplCache: Map<
-    ThreadDetailsTab,
+    ThreadDetailsPanelCacheSlot,
     { key: readonly unknown[]; tpl: TemplateResult }
   > = new Map();
+  private _timelineItemsCache: {
+    events: ApiAgentEvent[];
+    items: TimelineItem[];
+  } | null = null;
+  private _liveEventsWithSourceIndexCache: {
+    events: ApiAgentEvent[];
+    indexedEvents: ApiAgentEvent[];
+  } | null = null;
   /**
    * Tracks whether we've fetched events for the current thread yet. Events
    * fetch lazily on first sub-tab click so a large response's JSON.parse
@@ -775,8 +874,9 @@ export class ɵCpkThreadDetails extends LitElement {
    * lazy-load reasoning as `_eventsFetched`.
    */
   private _stateFetched = false;
-  private _lastFetchedThreadId: string | null = null;
+  private _lastLoadKey: string | null = null;
   private _lastSeenLiveMessageVersion = 0;
+  private _metadataAbort: AbortController | null = null;
   private _messagesAbort: AbortController | null = null;
   private _eventsAbort: AbortController | null = null;
   private _stateAbort: AbortController | null = null;
@@ -786,18 +886,53 @@ export class ɵCpkThreadDetails extends LitElement {
   private _dividerStartWidth = 0;
 
   static readonly COLLAPSE_THRESHOLD = 800;
-  private static readonly TAB_LIST: ReadonlyArray<{
+  static readonly TAB_LIST: ReadonlyArray<{
     id: ThreadDetailsTab;
     label: string;
   }> = [
-    { id: "conversation", label: "Conversation" },
-    { id: "agent-state", label: "Agent State" },
-    { id: "ag-ui-events", label: "AG-UI Events" },
+    { id: "timeline", label: "Timeline" },
+    { id: "raw-events", label: "Raw AG-UI Events" },
+    { id: "state", label: "State" },
   ];
 
+  private static providerIds = new WeakMap<ThreadDebuggerProvider, number>();
+  private static nextProviderId = 1;
+
+  private static providerLoadKey(
+    provider: ThreadDebuggerProvider | null,
+  ): string {
+    if (!provider) return "provider:none";
+    let id = CpkThreadInspector.providerIds.get(provider);
+    if (!id) {
+      id = CpkThreadInspector.nextProviderId;
+      CpkThreadInspector.nextProviderId += 1;
+      CpkThreadInspector.providerIds.set(provider, id);
+    }
+    return [
+      `provider:${id}`,
+      provider.getThreadMetadata ? "metadata:1" : "metadata:0",
+      provider.getMessages ? "messages:1" : "messages:0",
+      provider.getEvents ? "events:1" : "events:0",
+      provider.getState ? "state:1" : "state:0",
+    ].join("|");
+  }
+
+  /**
+   * Build a deterministic signature for runtime fetch headers so auth/CSRF
+   * changes invalidate cached thread data even when the selected thread is
+   * otherwise unchanged.
+   */
+  private static headersLoadKey(headers: Record<string, string>): string {
+    return JSON.stringify(
+      Object.entries(headers).sort(([leftKey], [rightKey]) =>
+        leftKey.localeCompare(rightKey),
+      ),
+    );
+  }
+
   private renderTabContent(id: ThreadDetailsTab): TemplateResult {
-    if (id === "conversation") return this.renderConversation();
-    if (id === "agent-state") return this.renderState();
+    if (id === "timeline") return this.renderTimeline();
+    if (id === "state") return this.renderState();
     return this.renderEvents();
   }
 
@@ -830,10 +965,10 @@ export class ɵCpkThreadDetails extends LitElement {
     // the entire panel for seconds — including making the tab buttons
     // themselves feel unresponsive.
     if (!this.threadId) return;
-    if (id === "ag-ui-events" && !this._eventsFetched) {
+    if ((id === "timeline" || id === "raw-events") && !this._eventsFetched) {
       this._eventsFetched = true;
       void this.fetchEvents(this.threadId);
-    } else if (id === "agent-state" && !this._stateFetched) {
+    } else if (id === "state" && !this._stateFetched) {
       this._stateFetched = true;
       void this.fetchState(this.threadId);
     }
@@ -965,6 +1100,42 @@ export class ɵCpkThreadDetails extends LitElement {
       flex-shrink: 0;
     }
 
+    .cpk-td__metadata-strip {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      padding: 10px 16px;
+      border-bottom: 1px solid #e9e9ef;
+      background: #fbfbfd;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__metadata-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      max-width: 220px;
+      padding: 3px 7px;
+      border: 1px solid #e9e9ef;
+      border-radius: 5px;
+      background: #ffffff;
+      color: #57575b;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
+      white-space: nowrap;
+    }
+
+    .cpk-td__metadata-label {
+      color: #838389;
+      text-transform: uppercase;
+      font-size: 9px;
+    }
+
+    .cpk-td__metadata-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -1185,6 +1356,81 @@ export class ɵCpkThreadDetails extends LitElement {
       background: #e9e9ef;
     }
 
+    /* ── Interaction timeline ───────────────────────────────────────── */
+    .cpk-td__timeline-item {
+      border: 1px solid #e9e9ef;
+      border-radius: 6px;
+      background: #ffffff;
+      overflow: hidden;
+    }
+
+    .cpk-td__timeline-item--warning {
+      border-color: rgba(250, 95, 103, 0.35);
+      background: rgba(250, 95, 103, 0.04);
+    }
+
+    .cpk-td__timeline-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 10px;
+      background: #f7f7f9;
+    }
+
+    .cpk-td__timeline-kind {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #5558b2;
+    }
+
+    .cpk-td__timeline-title {
+      flex: 1;
+      min-width: 0;
+      font-size: 12px;
+      font-weight: 500;
+      color: #010507;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .cpk-td__timeline-time {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      color: #838389;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__timeline-body {
+      padding: 9px 10px;
+      font-size: 12px;
+      line-height: 1.55;
+      color: #57575b;
+      white-space: pre-wrap;
+      word-break: break-word;
+      border-top: 1px solid #e9e9ef;
+    }
+
+    .cpk-td__source-link {
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: #5558b2;
+      cursor: pointer;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__source-link:hover {
+      color: #010507;
+    }
+
     /* ── Generative UI ──────────────────────────────────────────────── */
     @keyframes cpk-genui-enter {
       from {
@@ -1394,36 +1640,27 @@ export class ɵCpkThreadDetails extends LitElement {
   `;
 
   updated(_changed: Map<string, unknown>): void {
-    if (this.threadId !== this._lastFetchedThreadId) {
-      this._lastFetchedThreadId = this.threadId;
+    const loadKey = this.currentLoadKey();
+    if (loadKey !== this._lastLoadKey) {
+      this._lastLoadKey = loadKey;
       this._lastSeenLiveMessageVersion = this.liveMessageVersion;
-      this._tab = "conversation";
-      this._activatedTabs = new Set(["conversation"]);
-      this._panelTplCache = new Map();
-      this._expandedTools = new Set();
-      this._expandedMessages = new Set();
-      this._messagesAbort?.abort();
-      this._messagesAbort = null;
-      this._eventsAbort?.abort();
-      this._eventsAbort = null;
-      this._stateAbort?.abort();
-      this._stateAbort = null;
-      // Reset cleared so the next click into events/state triggers a fresh
-      // fetch. Eagerly clear `_fetchedEvents` / `_fetchedState` so the empty
-      // state doesn't briefly show last thread's data.
-      this._eventsFetched = false;
-      this._stateFetched = false;
-      this._fetchedEvents = null;
-      this._fetchedState = null;
+      this.resetLoadedThreadData();
 
       if (this.threadId) {
-        // Conversation is the default tab and shows immediately on thread
-        // open, so fetch eagerly. Events and state are only visible once the
-        // user clicks their sub-tab; deferring those fetches prevents a long
-        // JSON.parse of a large events payload from blocking the main thread
-        // before the user has even shown intent to view them.
-        void this.fetchMessages(this.threadId);
+        // Timeline is the default tab and should be event-derived. Fetch
+        // events eagerly; the raw tab reuses the same response when opened.
+        void this.fetchMetadata(this.threadId);
+        if (this.canFetchEvents()) {
+          this._eventsFetched = true;
+          void this.fetchEvents(this.threadId);
+        } else {
+          // Last-resort compatibility path for consumers that only implement
+          // messages. New integrations should provide events so Timeline can
+          // expose source references and decode warnings.
+          void this.fetchMessages(this.threadId);
+        }
       } else {
+        this._fetchedMetadata = null;
         this._conversation = [];
       }
     } else if (
@@ -1444,6 +1681,90 @@ export class ɵCpkThreadDetails extends LitElement {
     }
   }
 
+  private canFetchMessages(): boolean {
+    return (
+      !!this.provider?.getMessages ||
+      (!!this.runtimeUrl && this.threadInspectionAvailable)
+    );
+  }
+
+  private canFetchEvents(): boolean {
+    return (
+      !!this.provider?.getEvents ||
+      (!!this.runtimeUrl && this.threadInspectionAvailable)
+    );
+  }
+
+  private canFetchState(): boolean {
+    return (
+      !!this.provider?.getState ||
+      (!!this.runtimeUrl && this.threadInspectionAvailable)
+    );
+  }
+
+  private currentLoadKey(): string {
+    return [
+      this.threadId ?? "thread:none",
+      CpkThreadInspector.providerLoadKey(this.provider),
+      `runtime:${this.runtimeUrl}`,
+      `headers:${CpkThreadInspector.headersLoadKey(this.headers)}`,
+      `inspect:${this.threadInspectionAvailable ? "1" : "0"}`,
+    ].join("||");
+  }
+
+  private resetLoadedThreadData(): void {
+    this._tab = "timeline";
+    this._activatedTabs = new Set(["timeline"]);
+    this._panelTplCache = new Map();
+    this._timelineItemsCache = null;
+    this._liveEventsWithSourceIndexCache = null;
+    this._expandedTools = new Set();
+    this._expandedMessages = new Set();
+    this._metadataAbort?.abort();
+    this._metadataAbort = null;
+    this._messagesAbort?.abort();
+    this._messagesAbort = null;
+    this._eventsAbort?.abort();
+    this._eventsAbort = null;
+    this._stateAbort?.abort();
+    this._stateAbort = null;
+    // Reset cleared so the next click into events/state triggers a fresh
+    // fetch. Eagerly clear fetched data so a provider/runtime swap cannot
+    // briefly show the old source's values for the same threadId.
+    this._eventsFetched = false;
+    this._stateFetched = false;
+    this._eventsNotAvailable = false;
+    this._stateNotAvailable = false;
+    this._loadingMessages = false;
+    this._loadingEvents = false;
+    this._loadingState = false;
+    this._messagesError = null;
+    this._eventsError = null;
+    this._stateError = null;
+    this._fetchedMetadata = null;
+    this._conversation = [];
+    this._fetchedEvents = null;
+    this._fetchedState = null;
+  }
+
+  private async fetchMetadata(threadId: string): Promise<void> {
+    if (!this.provider?.getThreadMetadata) return;
+    this._metadataAbort?.abort();
+    const controller = new AbortController();
+    this._metadataAbort = controller;
+    try {
+      const metadata = await this.provider.getThreadMetadata(threadId, {
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted || this.threadId !== threadId) return;
+      this._fetchedMetadata = metadata;
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") return;
+      if (this.threadId !== threadId) return;
+      this._fetchedMetadata = null;
+    }
+  }
+
   /**
    * Fetch the canonical conversation for `threadId` from the runtime.
    *
@@ -1458,10 +1779,11 @@ export class ɵCpkThreadDetails extends LitElement {
     threadId: string,
     silent: boolean = false,
   ): Promise<void> {
-    if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+    if (!this.canFetchMessages()) {
       if (!silent) this._conversation = [];
       return;
     }
+    this._messagesAbort?.abort();
     const controller = new AbortController();
     this._messagesAbort = controller;
     if (!silent) {
@@ -1469,15 +1791,13 @@ export class ɵCpkThreadDetails extends LitElement {
       this._messagesError = null;
     }
     try {
-      const res = await fetch(
-        `${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/messages`,
-        { headers: { ...this.headers }, signal: controller.signal },
-      );
-      if (controller.signal.aborted || this.threadId !== threadId) return;
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = (await res.json()) as { messages: ApiThreadMessage[] };
+      const messages = this.provider?.getMessages
+        ? await this.provider.getMessages(threadId, {
+            signal: controller.signal,
+          })
+        : await this.fetchRuntimeMessages(threadId, controller.signal);
       if (controller.signal.aborted || this.threadId !== threadId) return;
-      this._conversation = this.mapMessages(data.messages);
+      this._conversation = this.mapMessages(messages);
     } catch (err) {
       if (err instanceof Error && err.name === "AbortError") return;
       if (!silent) {
@@ -1495,45 +1815,51 @@ export class ɵCpkThreadDetails extends LitElement {
   }
 
   private async fetchEvents(threadId: string): Promise<void> {
-    this._eventsNotAvailable = false;
-    if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+    if (!this.canFetchEvents()) {
       this._fetchedEvents = null;
       return;
     }
+    this._eventsAbort?.abort();
     const controller = new AbortController();
     this._eventsAbort = controller;
     this._loadingEvents = true;
     this._eventsError = null;
     try {
-      const res = await fetch(
-        `${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/events`,
-        { headers: { ...this.headers }, signal: controller.signal },
-      );
+      const result = this.provider?.getEvents
+        ? {
+            status: "available" as const,
+            events: await this.provider.getEvents(threadId, {
+              signal: controller.signal,
+            }),
+          }
+        : await this.fetchRuntimeEvents(threadId, controller.signal);
       // Drop results if a newer fetch superseded this one (thread switched
-      // mid-flight). Without this, switching A→B can leave thread B's view
-      // showing thread A's events when A's request resolves last.
+      // or provider/runtime changed mid-flight). Without this, switching A→B
+      // can leave thread B's view showing thread A's events when A's request
+      // resolves last.
       if (controller.signal.aborted || this.threadId !== threadId) return;
-      if (res.status === 501) {
-        // Endpoint not supported on this runtime (e.g. Intelligence platform).
-        // Mark unavailable so we don't misleadingly fall back to the parent's
-        // live agent events — those are agent-keyed, not thread-keyed, and
-        // would render identical across every thread on the same agent.
+      if (result.status === "not-available") {
         this._eventsNotAvailable = true;
-        this._fetchedEvents = null;
+        this._fetchedEvents = [];
+        if (this.canFetchMessages()) {
+          void this.fetchMessages(threadId);
+        }
         return;
       }
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = (await res.json()) as {
-        events: Array<Record<string, unknown>>;
-      };
-      if (controller.signal.aborted || this.threadId !== threadId) return;
-      this._fetchedEvents = this.mapApiEvents(data.events);
+      const mappedEvents = this.mapApiEvents(result.events);
+      this._fetchedEvents = mappedEvents;
+      if (mappedEvents.length === 0 && this.canFetchMessages()) {
+        void this.fetchMessages(threadId);
+      }
     } catch (err) {
       if (err instanceof Error && err.name === "AbortError") return;
       if (this.threadId !== threadId) return;
       this._eventsError =
         err instanceof Error ? err.message : "Failed to load events";
       this._fetchedEvents = [];
+      if (this.canFetchMessages()) {
+        void this.fetchMessages(threadId);
+      }
     } finally {
       if (!controller.signal.aborted && this.threadId === threadId) {
         this._loadingEvents = false;
@@ -1542,32 +1868,31 @@ export class ɵCpkThreadDetails extends LitElement {
   }
 
   private async fetchState(threadId: string): Promise<void> {
-    this._stateNotAvailable = false;
-    if (!this.runtimeUrl || !this.threadInspectionAvailable) {
+    if (!this.canFetchState()) {
       this._fetchedState = null;
       return;
     }
+    this._stateAbort?.abort();
     const controller = new AbortController();
     this._stateAbort = controller;
     this._loadingState = true;
     this._stateError = null;
     try {
-      const res = await fetch(
-        `${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/state`,
-        { headers: { ...this.headers }, signal: controller.signal },
-      );
+      const result = this.provider?.getState
+        ? {
+            status: "available" as const,
+            state: await this.provider.getState(threadId, {
+              signal: controller.signal,
+            }),
+          }
+        : await this.fetchRuntimeState(threadId, controller.signal);
       if (controller.signal.aborted || this.threadId !== threadId) return;
-      if (res.status === 501) {
+      if (result.status === "not-available") {
         this._stateNotAvailable = true;
         this._fetchedState = null;
         return;
       }
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = (await res.json()) as {
-        state: Record<string, unknown> | null;
-      };
-      if (controller.signal.aborted || this.threadId !== threadId) return;
-      this._fetchedState = data.state ?? null;
+      this._fetchedState = result.state ?? null;
     } catch (err) {
       if (err instanceof Error && err.name === "AbortError") return;
       if (this.threadId !== threadId) return;
@@ -1581,7 +1906,63 @@ export class ɵCpkThreadDetails extends LitElement {
     }
   }
 
-  private mapMessages(messages: ApiThreadMessage[]): ConversationItem[] {
+  private async fetchRuntimeMessages(
+    threadId: string,
+    signal: AbortSignal,
+  ): Promise<ThreadDebuggerMessage[]> {
+    const res = await fetch(this.getThreadInspectionUrl(threadId, "messages"), {
+      headers: { ...this.headers },
+      signal,
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = (await res.json()) as { messages: ThreadDebuggerMessage[] };
+    return data.messages;
+  }
+
+  private async fetchRuntimeEvents(
+    threadId: string,
+    signal: AbortSignal,
+  ): Promise<RuntimeEventsFetchResult> {
+    const res = await fetch(this.getThreadInspectionUrl(threadId, "events"), {
+      headers: { ...this.headers },
+      signal,
+    });
+    if (res.status === 501) {
+      return { status: "not-available" };
+    }
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = (await res.json()) as {
+      events: ThreadDebuggerEvent[];
+    };
+    return { status: "available", events: data.events };
+  }
+
+  private async fetchRuntimeState(
+    threadId: string,
+    signal: AbortSignal,
+  ): Promise<RuntimeStateFetchResult> {
+    const res = await fetch(this.getThreadInspectionUrl(threadId, "state"), {
+      headers: { ...this.headers },
+      signal,
+    });
+    if (res.status === 501) {
+      return { status: "not-available" };
+    }
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = (await res.json()) as {
+      state: Record<string, unknown> | null;
+    };
+    return { status: "available", state: data.state ?? null };
+  }
+
+  private getThreadInspectionUrl(
+    threadId: string,
+    resource: "messages" | "events" | "state",
+  ): string {
+    return `${this.runtimeUrl.replace(/\/+$/, "")}/threads/${encodeURIComponent(threadId)}/${resource}`;
+  }
+
+  private mapMessages(messages: ThreadDebuggerMessage[]): ConversationItem[] {
     const items: ConversationItem[] = [];
     const toolCallMap = new Map<string, ConversationToolCall>();
     for (const msg of messages) {
@@ -1596,19 +1977,20 @@ export class ɵCpkThreadDetails extends LitElement {
         if (msg.toolCalls?.length) {
           for (const tc of msg.toolCalls) {
             let args: Record<string, unknown> = {};
-            try {
-              args = JSON.parse(tc.args) as Record<string, unknown>;
-            } catch (err) {
-              // Inspector is a debugging surface — surface malformed payloads
-              // instead of silently substituting `{}`. The sentinel lets the
-              // renderer flag "raw arguments — failed to parse" if/when it
-              // grows that branch; the console.error gives anyone with the
-              // devtools open immediate visibility into the offending blob.
-              console.error(
-                "[CopilotKit Inspector] Failed to parse tool-call arguments",
-                { toolCallId: tc.id, raw: tc.args, error: err },
-              );
-              args = { __parseError: true, __raw: tc.args };
+            if (typeof tc.args === "string") {
+              try {
+                args = JSON.parse(tc.args) as Record<string, unknown>;
+              } catch (err) {
+                // Inspector is a debugging surface — surface malformed payloads
+                // instead of silently substituting `{}`.
+                console.error(
+                  "[CopilotKit Inspector] Failed to parse tool-call arguments",
+                  { toolCallId: tc.id, raw: tc.args, error: err },
+                );
+                args = { __parseError: true, __raw: tc.args };
+              }
+            } else {
+              args = tc.args;
             }
             const item: ConversationToolCall = {
               id: tc.id,
@@ -1662,22 +2044,284 @@ export class ɵCpkThreadDetails extends LitElement {
     return items;
   }
 
-  private mapApiEvents(
-    events: Array<Record<string, unknown>>,
-  ): ApiAgentEvent[] {
-    return events.map((event) => {
-      const { type, timestamp, ...rest } = event;
+  private mapApiEvents(events: ThreadDebuggerEvent[]): ApiAgentEvent[] {
+    return events.map((event, index) => {
+      const { type, timestamp, payload, ...rest } = event;
       return {
         type: typeof type === "string" ? type : "UNKNOWN",
         timestamp:
           typeof timestamp === "string" || typeof timestamp === "number"
             ? timestamp
             : Date.now(),
-        payload: rest,
+        payload: payload ?? rest,
+        sourceIndex: index + 1,
+        rawEvent: event,
       };
     });
   }
 
+  private get activeTimelineItems(): TimelineItem[] {
+    return this.timelineItemsForEvents(this.activeEvents);
+  }
+
+  private timelineItemsForEvents(events: ApiAgentEvent[]): TimelineItem[] {
+    if (this._timelineItemsCache?.events === events) {
+      return this._timelineItemsCache.items;
+    }
+    const items = this.timelineItemsFromEvents(events);
+    this._timelineItemsCache = { events, items };
+    return items;
+  }
+
+  private timelineItemsFromEvents(events: ApiAgentEvent[]): TimelineItem[] {
+    if (events.length === 0) return [];
+
+    const items: TimelineItem[] = [];
+    const messageItems = new Map<string, TimelineItem>();
+    const toolItems = new Map<string, TimelineItem & { rawArgs?: string }>();
+
+    const readString = (
+      payload: Record<string, unknown>,
+      keys: string[],
+    ): string | null => {
+      for (const key of keys) {
+        const value = payload[key];
+        if (typeof value === "string") return value;
+      }
+      return null;
+    };
+
+    const sourceIndexFor = (event: ApiAgentEvent): number =>
+      event.sourceIndex ?? 0;
+
+    const appendWarning = (
+      event: ApiAgentEvent,
+      title: string,
+      body: string,
+      severity: "warning" | "error" = "warning",
+    ): void => {
+      const sourceIndex = sourceIndexFor(event);
+      items.push({
+        id: `warning-${sourceIndex}-${items.length}`,
+        kind: "warning",
+        title,
+        body,
+        timestamp: event.timestamp,
+        sourceIndex,
+        severity,
+      });
+    };
+
+    const ensureMessage = (
+      event: ApiAgentEvent,
+      role: string,
+    ): TimelineItem => {
+      const sourceIndex = sourceIndexFor(event);
+      const key =
+        readString(event.payload, ["messageId", "message_id", "id"]) ??
+        `message-${sourceIndex}`;
+      let item = messageItems.get(key);
+      if (!item) {
+        item = {
+          id: `message-${key}`,
+          kind: "message",
+          title: `${role || "message"} message`,
+          body: "",
+          timestamp: event.timestamp,
+          sourceIndex,
+        };
+        messageItems.set(key, item);
+        items.push(item);
+      }
+      return item;
+    };
+
+    const ensureTool = (
+      event: ApiAgentEvent,
+    ): TimelineItem & {
+      rawArgs?: string;
+    } => {
+      const sourceIndex = sourceIndexFor(event);
+      const key =
+        readString(event.payload, [
+          "toolCallId",
+          "tool_call_id",
+          "id",
+          "callId",
+        ]) ?? `tool-${sourceIndex}`;
+      let item = toolItems.get(key);
+      if (!item) {
+        item = {
+          id: `tool-${key}`,
+          kind: "tool",
+          title:
+            readString(event.payload, [
+              "toolCallName",
+              "toolName",
+              "name",
+              "functionName",
+            ]) ?? "Tool call",
+          body: "",
+          timestamp: event.timestamp,
+          sourceIndex,
+        };
+        toolItems.set(key, item);
+        items.push(item);
+      }
+      return item;
+    };
+
+    for (const event of events) {
+      const { type, payload } = event;
+      const sourceIndex = sourceIndexFor(event);
+
+      if (type === "UNKNOWN") {
+        appendWarning(
+          event,
+          "Unknown AG-UI event",
+          "The event is missing a string type and could not be normalized.",
+        );
+        continue;
+      }
+
+      if (type === "RUN_STARTED" || type === "STEP_STARTED") {
+        items.push({
+          id: `${type}-${sourceIndex}`,
+          kind: "run",
+          title: type === "RUN_STARTED" ? "Run started" : "Step started",
+          timestamp: event.timestamp,
+          sourceIndex,
+          details: payload,
+        });
+        continue;
+      }
+
+      if (type === "RUN_FINISHED" || type === "STEP_FINISHED") {
+        items.push({
+          id: `${type}-${sourceIndex}`,
+          kind: "run",
+          title: type === "RUN_FINISHED" ? "Run finished" : "Step finished",
+          timestamp: event.timestamp,
+          sourceIndex,
+          details: payload,
+        });
+        continue;
+      }
+
+      if (type === "RUN_ERROR" || type === "ERROR") {
+        items.push({
+          id: `${type}-${sourceIndex}`,
+          kind: "warning",
+          title: "Run error",
+          body: readString(payload, ["message", "error", "description"]) ?? "",
+          timestamp: event.timestamp,
+          sourceIndex,
+          severity: "error",
+          details: payload,
+        });
+        continue;
+      }
+
+      if (type === "TEXT_MESSAGE_START") {
+        ensureMessage(event, readString(payload, ["role"]) ?? "assistant");
+        continue;
+      }
+
+      if (type === "TEXT_MESSAGE_CONTENT") {
+        const item = ensureMessage(
+          event,
+          readString(payload, ["role"]) ?? "assistant",
+        );
+        item.body = `${item.body ?? ""}${
+          readString(payload, ["delta", "content", "text"]) ?? ""
+        }`;
+        continue;
+      }
+
+      if (type === "TEXT_MESSAGE_END") {
+        ensureMessage(event, readString(payload, ["role"]) ?? "assistant");
+        continue;
+      }
+
+      if (type === "TOOL_CALL_START") {
+        ensureTool(event);
+        continue;
+      }
+
+      if (type === "TOOL_CALL_ARGS") {
+        const item = ensureTool(event);
+        const chunk =
+          readString(payload, ["args", "arguments", "delta"]) ??
+          (typeof payload.args === "object"
+            ? JSON.stringify(payload.args)
+            : null);
+        if (chunk) {
+          item.rawArgs = `${item.rawArgs ?? ""}${chunk}`;
+          item.body = item.rawArgs;
+        }
+        continue;
+      }
+
+      if (type === "TOOL_CALL_END") {
+        const item = ensureTool(event);
+        if (item.rawArgs) {
+          try {
+            JSON.parse(item.rawArgs);
+          } catch {
+            appendWarning(
+              event,
+              "Could not decode tool call arguments",
+              item.rawArgs,
+            );
+          }
+        }
+        continue;
+      }
+
+      if (type === "TOOL_CALL_RESULT") {
+        const item = ensureTool(event);
+        const result = readString(payload, ["result", "content", "delta"]);
+        if (result) {
+          item.body = item.body
+            ? `${item.body}\nResult: ${result}`
+            : `Result: ${result}`;
+          try {
+            JSON.parse(result);
+          } catch {
+            appendWarning(event, "Could not decode tool result", result);
+          }
+        }
+        continue;
+      }
+
+      if (type.startsWith("STATE_")) {
+        items.push({
+          id: `${type}-${sourceIndex}`,
+          kind: "state",
+          title:
+            type === "STATE_SNAPSHOT"
+              ? "State snapshot captured"
+              : "State delta captured",
+          timestamp: event.timestamp,
+          sourceIndex,
+          details: payload,
+        });
+        continue;
+      }
+
+      items.push({
+        id: `event-${sourceIndex}`,
+        kind: "event",
+        title: type,
+        timestamp: event.timestamp,
+        sourceIndex,
+        details: payload,
+      });
+    }
+
+    return items;
+  }
+
   private get renderItems(): RenderItem[] {
     const items = this._conversation;
     const result: RenderItem[] = [];
@@ -1720,7 +2364,7 @@ export class ɵCpkThreadDetails extends LitElement {
   }
 
   private get duration(): string {
-    const t = this.thread;
+    const t = this.metadata;
     if (!t?.createdAt || !t?.updatedAt) return "—";
     const ms =
       new Date(t.updatedAt).getTime() - new Date(t.createdAt).getTime();
@@ -1753,7 +2397,16 @@ export class ɵCpkThreadDetails extends LitElement {
     // threads (those would render identically for every thread on the same
     // agent and mislead the reader).
     if (this._eventsNotAvailable) return [];
-    return this._fetchedEvents ?? this.agentEventsInput ?? [];
+    const events = this._fetchedEvents ?? this.agentEventsInput ?? [];
+    if (events.every((event) => event.sourceIndex != null)) return events;
+    if (this._liveEventsWithSourceIndexCache?.events === events) {
+      return this._liveEventsWithSourceIndexCache.indexedEvents;
+    }
+    const indexedEvents = events.map((event, index) =>
+      event.sourceIndex == null ? { ...event, sourceIndex: index + 1 } : event,
+    );
+    this._liveEventsWithSourceIndexCache = { events, indexedEvents };
+    return indexedEvents;
   }
 
   private get activeState(): Record<string, unknown> | null {
@@ -1771,6 +2424,10 @@ export class ɵCpkThreadDetails extends LitElement {
     return id.length > 20 ? id.slice(0, 8) + "…" : id;
   }
 
+  private get metadata(): ThreadDebuggerMetadata | null {
+    return this._fetchedMetadata ?? this.thread ?? null;
+  }
+
   private fmtTime(dateStr: string | null | undefined): string {
     if (!dateStr) return "—";
     const d = new Date(dateStr);
@@ -1819,7 +2476,7 @@ export class ɵCpkThreadDetails extends LitElement {
           <!-- Tab bar -->
           <div class="cpk-td__tabs-header">
             <div class="cpk-td__tab-group" role="tablist">
-              ${ɵCpkThreadDetails.TAB_LIST.map(
+              ${CpkThreadInspector.TAB_LIST.map(
                 (tab) => html`
                   <button
                     role="tab"
@@ -1835,6 +2492,7 @@ export class ɵCpkThreadDetails extends LitElement {
             </div>
             ${this.renderPanelToggle()}
           </div>
+          ${this.renderMetadataStrip()}
 
           <!-- Scrollable content -->
           <div class="cpk-td__content">
@@ -1845,50 +2503,178 @@ export class ɵCpkThreadDetails extends LitElement {
                   `
                 : nothing
             }
-            ${ɵCpkThreadDetails.TAB_LIST.map((tab) =>
+            ${CpkThreadInspector.TAB_LIST.map((tab) =>
               this._activatedTabs.has(tab.id)
                 ? html`<div
-                      class="cpk-td__panel"
-                      style=${
-                        this._tab === tab.id && !this._panelInitializing
-                          ? ""
-                          : "display:none"
-                      }
-                    >
-                      ${this.renderTabContent(tab.id)}
-                    </div>`
+                    class="cpk-td__panel"
+                    style=${
+                      this._tab === tab.id && !this._panelInitializing
+                        ? ""
+                        : "display:none"
+                    }
+                  >
+                    ${this.renderTabContent(tab.id)}
+                  </div>`
                 : nothing,
             )}
           </div>
         </div>
 
-        <!--
-          Drawer always rendered so width animates between 0 and its
-          target. Divider lives INSIDE the drawer and is absolutely
-          positioned over its left edge so the toggle (rightmost of the
-          tab row) and the drawer touch with no flex-gap between them.
-        -->
-        <div
-          class="cpk-td__detail"
-          data-open=${this._showDetailPanel ? "true" : "false"}
-          style="width:${this._showDetailPanel ? this._detailPanelWidth : 0}px"
-          aria-hidden=${this._showDetailPanel ? "false" : "true"}
-        >
-          ${
-            this._showDetailPanel
-              ? html`
-                <div
-                  class="cpk-td__detail-divider"
-                  @pointerdown=${this.onDetailDividerDown}
-                  @pointermove=${this.onDetailDividerMove}
-                  @pointerup=${this.onDetailDividerUp}
-                  @pointercancel=${this.onDetailDividerUp}
-                ></div>
-              `
-              : nothing
-          }
-          ${this.renderDetailPanel()}
+        <!--
+          Drawer always rendered so width animates between 0 and its
+          target. Divider lives INSIDE the drawer and is absolutely
+          positioned over its left edge so the toggle (rightmost of the
+          tab row) and the drawer touch with no flex-gap between them.
+        -->
+        <div
+          class="cpk-td__detail"
+          data-open=${this._showDetailPanel ? "true" : "false"}
+          style="width:${this._showDetailPanel ? this._detailPanelWidth : 0}px"
+          aria-hidden=${this._showDetailPanel ? "false" : "true"}
+        >
+          ${
+            this._showDetailPanel
+              ? html`
+                <div
+                  class="cpk-td__detail-divider"
+                  @pointerdown=${this.onDetailDividerDown}
+                  @pointermove=${this.onDetailDividerMove}
+                  @pointerup=${this.onDetailDividerUp}
+                  @pointercancel=${this.onDetailDividerUp}
+                ></div>
+              `
+              : nothing
+          }
+          ${this.renderDetailPanel()}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMetadataStrip() {
+    const metadata = this.metadata;
+    const pills: Array<{ label: string; value: string | null | undefined }> = [
+      { label: "Thread", value: metadata?.id ?? this.threadId },
+      { label: "Agent", value: metadata?.agentId },
+      {
+        label: "End user",
+        value: metadata?.endUserId ?? metadata?.createdById,
+      },
+      { label: "Status", value: metadata?.status },
+    ].filter((pill) => pill.value != null && pill.value !== "");
+
+    if (pills.length === 0) return nothing;
+
+    return html`
+      <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
+        ${pills.map(
+          (pill) => html`
+            <span class="cpk-td__metadata-pill" title=${pill.value ?? ""}>
+              <span class="cpk-td__metadata-label">${pill.label}</span>
+              <span class="cpk-td__metadata-value"
+                >${this.shortId(pill.value)}</span
+              >
+            </span>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  private revealSourceEvent(sourceIndex: number): void {
+    this._activatedTabs = new Set([...this._activatedTabs, "raw-events"]);
+    this._tab = "raw-events";
+    this.requestUpdate();
+    requestAnimationFrame(() => {
+      const source = this.shadowRoot?.querySelector<HTMLElement>(
+        `[data-source-index="${sourceIndex}"]`,
+      );
+      source?.scrollIntoView?.({ block: "center" });
+    });
+  }
+
+  private renderTimeline() {
+    if (this._loadingEvents) {
+      return html`
+        <div class="cpk-td__status">Loading timeline…</div>
+      `;
+    }
+    if (this._eventsError) {
+      return html`<div class="cpk-td__status cpk-td__status--error">
+        ${this._eventsError}
+      </div>`;
+    }
+    if (this._eventsNotAvailable) {
+      if (this._conversation.length > 0) return this.renderConversation();
+      if (this._loadingMessages) return this.renderConversation();
+      return html`
+        <div class="cpk-td__empty-state">
+          <span>Timeline event history not available</span>
+          <span class="cpk-td__empty-hint"
+            >This runtime doesn't yet expose per-thread AG-UI events. Check State for
+            the latest snapshot when available.</span
+          >
+        </div>
+      `;
+    }
+
+    const events = this.activeEvents;
+    const cachedTimeline = this.getCachedPanelTpl("timeline", [events]);
+    if (cachedTimeline) return cachedTimeline;
+
+    const timelineItems = this.timelineItemsForEvents(events);
+    if (timelineItems.length === 0) {
+      if (this._conversation.length > 0) return this.renderConversation();
+      if (this._loadingMessages) return this.renderConversation();
+      return html`
+        <div class="cpk-td__empty-state">
+          <span>No timeline events captured</span>
+          <span class="cpk-td__empty-hint"
+            >Timeline rows are normalized from AG-UI events. Open Raw AG-UI Events or
+            State to inspect the available thread data.</span
+          >
+        </div>
+      `;
+    }
+
+    return this.cachedPanelTpl("timeline", [events], () => {
+      return html`${timelineItems.map((item) => this.renderTimelineItem(item))}`;
+    });
+  }
+
+  private renderTimelineItem(item: TimelineItem) {
+    const isWarning = item.kind === "warning";
+    return html`
+      <div
+        class="cpk-td__timeline-item ${
+          isWarning ? "cpk-td__timeline-item--warning" : ""
+        }"
+      >
+        <div class="cpk-td__timeline-header">
+          <span class="cpk-td__timeline-kind"
+            >${item.severity === "error" ? "error" : item.kind}</span
+          >
+          <span class="cpk-td__timeline-title">${item.title}</span>
+          <button
+            type="button"
+            class="cpk-td__source-link"
+            @click=${() => this.revealSourceEvent(item.sourceIndex)}
+          >
+            Source event #${item.sourceIndex}
+          </button>
+          <span class="cpk-td__timeline-time"
+            >${formatTimestamp(item.timestamp)}</span
+          >
         </div>
+        ${
+          item.body
+            ? html`<div class="cpk-td__timeline-body">${item.body}</div>`
+            : item.details
+              ? html`<pre class="cpk-td__timeline-body">
+${unsafeHTML(highlightedJson(item.details))}</pre
+              >`
+              : nothing
+        }
       </div>
     `;
   }
@@ -1929,7 +2715,7 @@ export class ɵCpkThreadDetails extends LitElement {
     // `_conversation` — without those keys the cache returns the
     // pre-toggle template and the disclosure appears broken.
     return this.cachedPanelTpl(
-      "conversation",
+      "timeline-fallback",
       [this._conversation, this._expandedTools, this._expandedMessages],
       () => {
         const items = this.renderItems;
@@ -1948,10 +2734,21 @@ export class ɵCpkThreadDetails extends LitElement {
    * change without the listed key flipping.
    */
   private cachedPanelTpl(
-    slot: ThreadDetailsTab,
+    slot: ThreadDetailsPanelCacheSlot,
     key: readonly unknown[],
     build: () => TemplateResult,
   ): TemplateResult {
+    const cached = this.getCachedPanelTpl(slot, key);
+    if (cached) return cached;
+    const tpl = build();
+    this._panelTplCache.set(slot, { key, tpl });
+    return tpl;
+  }
+
+  private getCachedPanelTpl(
+    slot: ThreadDetailsPanelCacheSlot,
+    key: readonly unknown[],
+  ): TemplateResult | null {
     const cached = this._panelTplCache.get(slot);
     if (
       cached &&
@@ -1960,9 +2757,7 @@ export class ɵCpkThreadDetails extends LitElement {
     ) {
       return cached.tpl;
     }
-    const tpl = build();
-    this._panelTplCache.set(slot, { key, tpl });
-    return tpl;
+    return null;
   }
 
   private renderRenderItem(item: RenderItem) {
@@ -1993,7 +2788,7 @@ export class ɵCpkThreadDetails extends LitElement {
 
   private renderBubble(item: ConversationUser | ConversationAssistant) {
     const isUser = item.type === "user";
-    const threshold = ɵCpkThreadDetails.COLLAPSE_THRESHOLD;
+    const threshold = CpkThreadInspector.COLLAPSE_THRESHOLD;
     const expanded = this._expandedMessages.has(item.id);
     const tooLong = item.content.length > threshold;
     const shown =
@@ -2176,7 +2971,7 @@ ${unsafeHTML(highlightedJson(item.result))}</pre
       `;
     }
     const stateValue = this.activeState;
-    return this.cachedPanelTpl("agent-state", [stateValue], () => {
+    return this.cachedPanelTpl("state", [stateValue], () => {
       return html`<pre class="cpk-td__json-block">
 ${unsafeHTML(highlightedJson(stateValue))}</pre
       >`;
@@ -2216,11 +3011,11 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
         </div>
       `;
     }
-    return this.cachedPanelTpl("ag-ui-events", [events], () => {
+    return this.cachedPanelTpl("raw-events", [events], () => {
       return html`${events.map((event) => {
         const { bg, fg } = eventColors(event.type);
         return html`
-          <div class="cpk-td__event">
+          <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
             <div class="cpk-td__event-header" style="background:${bg}">
               <span class="cpk-td__event-type" style="color:${fg}"
                 >${event.type}</span
@@ -2230,7 +3025,7 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
               >
             </div>
             <pre class="cpk-td__event-payload">
-${unsafeHTML(highlightedJson(event.payload))}</pre
+${unsafeHTML(highlightedJson(event.rawEvent ?? event))}</pre
             >
           </div>
         `;
@@ -2269,29 +3064,42 @@ ${unsafeHTML(highlightedJson(event.payload))}</pre
 
   private renderDetailPanel() {
     const counts = this.activityCounts;
+    const metadata = this.metadata;
     return html`
       <!-- Thread -->
       <div class="cpk-tdp__section-title">Thread</div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">ID</span>
         <span class="cpk-tdp__value cpk-tdp__value--wrap"
-          >${this.shortId(this.thread?.id)}</span
+          >${this.shortId(metadata?.id)}</span
         >
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Name</span>
-        <span class="cpk-tdp__value">${this.thread?.name ?? "—"}</span>
+        <span class="cpk-tdp__value">${metadata?.name ?? "—"}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Agent</span>
         <span class="cpk-tdp__value cpk-tdp__value--truncate"
-          >${this.thread?.agentId ?? "—"}</span
+          >${metadata?.agentId ?? "—"}</span
+        >
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">End user</span>
+        <span class="cpk-tdp__value cpk-tdp__value--truncate"
+          >${metadata?.endUserId ?? "—"}</span
         >
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Created by</span>
         <span class="cpk-tdp__value cpk-tdp__value--truncate"
-          >${this.thread?.createdById ?? "—"}</span
+          >${metadata?.createdById ?? "—"}</span
+        >
+      </div>
+      <div class="cpk-tdp__row">
+        <span class="cpk-tdp__label">Status</span>
+        <span class="cpk-tdp__value cpk-tdp__value--truncate"
+          >${metadata?.status ?? "—"}</span
         >
       </div>
 
@@ -2301,11 +3109,11 @@ ${unsafeHTML(highlightedJson(event.payload))}</pre
       <div class="cpk-tdp__section-title">Timestamps</div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Created</span>
-        <span class="cpk-tdp__value">${this.fmtTime(this.thread?.createdAt)}</span>
+        <span class="cpk-tdp__value">${this.fmtTime(metadata?.createdAt)}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Updated</span>
-        <span class="cpk-tdp__value">${this.fmtTime(this.thread?.updatedAt)}</span>
+        <span class="cpk-tdp__value">${this.fmtTime(metadata?.updatedAt)}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Duration</span>
@@ -2332,9 +3140,17 @@ ${unsafeHTML(highlightedJson(event.payload))}</pre
   }
 }
 
+// Backwards-compatible internal element name used by the full CopilotKit
+// Inspector shell. Keep this class thin so the public body remains the single
+// implementation.
+export class ɵCpkThreadDetails extends CpkThreadInspector {}
+
 if (!customElements.get("cpk-thread-list")) {
   customElements.define("cpk-thread-list", CpkThreadList);
 }
+if (!customElements.get(THREAD_INSPECTOR_TAG)) {
+  customElements.define(THREAD_INSPECTOR_TAG, CpkThreadInspector);
+}
 if (!customElements.get("cpk-thread-details")) {
   customElements.define("cpk-thread-details", ɵCpkThreadDetails);
 }
@@ -2446,6 +3262,7 @@ export class WebInspectorElement extends LitElement {
   // `${bannerId}:${cta}`) so copy-button retries and accidental multi-clicks
   // don't inflate funnel counts beyond one signal per intent type per banner.
   private clickedBannerIds: Set<string> = new Set();
+  private viewedThreadsTelemetryStates: Set<string> = new Set();
 
   get core(): CopilotKitCore | null {
     return this._core;
@@ -2527,7 +3344,54 @@ export class WebInspectorElement extends LitElement {
     ];
   }
 
+  private getThreadServiceStatus(): ThreadServiceStatus {
+    if (!this._core) return "unknown";
+    if (!this._core.threadEndpoints) return "unknown";
+    return this._core.threadEndpoints?.list === false
+      ? "unavailable"
+      : "available";
+  }
+
+  private areThreadEndpointsAvailable(): boolean {
+    return this.getThreadServiceStatus() !== "unavailable";
+  }
+
+  private getThreadsTelemetryProps(
+    extra: Partial<InspectorThreadTelemetryProps> = {},
+    options: { includeUrlAttribution?: boolean } = {},
+  ): InspectorThreadTelemetryProps {
+    const distinctId =
+      options.includeUrlAttribution && !this.core?.telemetryDisabled
+        ? getTelemetryDistinctIdForUrl()
+        : null;
+    const threadServiceStatus = this.getThreadServiceStatus();
+    return {
+      posthog_distinct_id: distinctId ?? undefined,
+      intelligence_status:
+        threadServiceStatus === "available"
+          ? "intelligence_enabled"
+          : threadServiceStatus === "unavailable"
+            ? "intelligence_not_enabled"
+            : "unknown",
+      thread_service_status: threadServiceStatus,
+      license_status: this.core?.licenseStatus ?? undefined,
+      runtime_mode: this.core?.runtimeMode ?? undefined,
+      runtime_url_type: getRuntimeUrlType(this.core?.runtimeUrl),
+      telemetry_disabled: this.core?.telemetryDisabled ?? false,
+      ...extra,
+    };
+  }
+
+  private getIntelligenceSignupUrl(): string {
+    return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
+  }
+
+  private getTalkToEngineerUrl(): string {
+    return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
+  }
+
   private subscribeToThreadStore(agentId: string, store: ɵThreadStore): void {
+    if (!this.areThreadEndpointsAvailable()) return;
     if (this._threadStoreSubscriptions.has(agentId)) return;
     const threadsSub = store.select(ɵselectThreads).subscribe((threads) => {
       this._threadsByAgent.set(agentId, threads as ɵThread[]);
@@ -2587,7 +3451,7 @@ export class WebInspectorElement extends LitElement {
     if (this.core?.getThreadStore(agentId)) return;
     const core = this.core;
     if (!core?.runtimeUrl) return;
-    if (core.threadEndpoints?.list === false) return;
+    if (!this.areThreadEndpointsAvailable()) return;
 
     const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
     store.start();
@@ -2626,6 +3490,7 @@ export class WebInspectorElement extends LitElement {
       store.setContext({
         runtimeUrl: core.runtimeUrl,
         headers: { ...headers },
+        wsUrl: core.intelligence?.wsUrl,
         agentId,
       });
     }
@@ -2661,7 +3526,7 @@ export class WebInspectorElement extends LitElement {
             maybeShowDisclosure();
           }
           this.flushPendingBannerViewed();
-          if (core.threadEndpoints?.list !== false) {
+          if (this.areThreadEndpointsAvailable()) {
             for (const agentId of this._ownedThreadStores.keys()) {
               this.refreshOwnedThreadStore(agentId);
             }
@@ -2681,6 +3546,7 @@ export class WebInspectorElement extends LitElement {
       },
       onHeadersChanged: ({ headers }) => {
         this.updateOwnedThreadStoreHeaders(headers);
+        this.requestUpdate();
       },
       onError: ({ code, error }) => {
         this.lastCoreError = { code, message: error.message };
@@ -2689,6 +3555,14 @@ export class WebInspectorElement extends LitElement {
       onAgentsChanged: ({ agents }) => {
         this.processAgentsChanged(agents);
       },
+      onAgentRunStarted: ({ agent }) => {
+        // Per-thread clones (from useAgent) are not in the agent registry, so
+        // onAgentsChanged never fires for them. Subscribe to the running
+        // instance here so its AG-UI events reach the event timeline.
+        if (agent?.agentId) {
+          this.subscribeToAgent(agent);
+        }
+      },
       onContextChanged: ({ context }) => {
         this.contextStore = this.normalizeContextStore(context);
         this.requestUpdate();
@@ -2713,6 +3587,14 @@ export class WebInspectorElement extends LitElement {
     this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
     this.processAgentsChanged(core.agents);
 
+    if (core.runtimeConnectionStatus === "connected") {
+      if (!core.telemetryDisabled) {
+        ensureTelemetryDistinctId();
+        maybeShowDisclosure();
+      }
+      this.flushPendingBannerViewed();
+    }
+
     // Subscribe to any already-registered thread stores. `getThreadStores` was
     // added in the same release as this inspector; guard so consumers still on
     // an older @copilotkit/core don't throw when assigning `inspector.core`.
@@ -2859,8 +3741,11 @@ export class WebInspectorElement extends LitElement {
       onRunStartedEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "RUN_STARTED", event);
       },
-      onRunFinishedEvent: ({ event, result }) => {
-        this.recordAgentEvent(agentId, "RUN_FINISHED", { event, result });
+      onRunFinishedEvent: (params) => {
+        this.recordAgentEvent(agentId, "RUN_FINISHED", {
+          event: params.event,
+          result: "result" in params ? params.result : undefined,
+        });
         this.refreshOwnedThreadStore(agentId);
       },
       onRunErrorEvent: ({ event }) => {
@@ -3404,6 +4289,10 @@ ${argsString}</pre
     const base =
       "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
 
+    if (type === "RUN_ERROR") {
+      return `${base} bg-rose-50 text-rose-700 border-rose-200`;
+    }
+
     if (type.startsWith("RUN_")) {
       return `${base} bg-blue-50 text-blue-700 border-blue-200`;
     }
@@ -3428,10 +4317,6 @@ ${argsString}</pre
       return `${base} bg-sky-50 text-sky-700 border-sky-200`;
     }
 
-    if (type === "RUN_ERROR") {
-      return `${base} bg-rose-50 text-rose-700 border-rose-200`;
-    }
-
     return `${base} bg-gray-100 text-gray-600 border-gray-200`;
   }
 
@@ -5750,7 +6635,9 @@ ${argsString}</pre
 
             <div class="space-y-2">
               <h3 class="text-sm text-slate-500">Privacy</h3>
-              <div class="rounded-lg border border-slate-200 bg-white p-4 space-y-3">
+              <div
+                class="rounded-lg border border-slate-200 bg-white p-4 space-y-3"
+              >
                 <p class="text-sm text-gray-600 flex items-start gap-2">
                   <span>${optedOut ? "❌" : "✅"}</span>
                   <span>
@@ -5766,7 +6653,8 @@ ${argsString}</pre
                   href=${TELEMETRY_DOCS_URL}
                   target="_blank"
                   rel="noopener"
-                >Learn more →</a>
+                  >Learn more →</a
+                >
               </div>
             </div>
           </div>
@@ -5791,6 +6679,45 @@ ${argsString}</pre
     });
   }
 
+  private handleTalkToEngineerClick = (): void => {
+    if (this.core?.telemetryDisabled) return;
+    trackTalkToEngineerClicked(
+      this.getThreadsTelemetryProps(
+        {
+          cta: "talk_to_engineer",
+          cta_surface: "threads_header",
+        },
+        { includeUrlAttribution: true },
+      ),
+    );
+  };
+
+  private handleThreadsIntelligenceSignupClick = (): void => {
+    if (this.core?.telemetryDisabled) return;
+    trackThreadsIntelligenceSignupClicked(
+      this.getThreadsTelemetryProps(
+        {
+          cta: "signup",
+          cta_surface: "threads_locked",
+        },
+        { includeUrlAttribution: true },
+      ),
+    );
+  };
+
+  private handleThreadsTalkToEngineerClick = (): void => {
+    if (this.core?.telemetryDisabled) return;
+    trackThreadsTalkToEngineerClicked(
+      this.getThreadsTelemetryProps(
+        {
+          cta: "talk_to_engineer",
+          cta_surface: "threads_locked",
+        },
+        { includeUrlAttribution: true },
+      ),
+    );
+  };
+
   private handleThreadDividerPointerDown = (event: PointerEvent) => {
     this.threadDividerResizing = true;
     this.threadDividerPointerId = event.pointerId;
@@ -5823,7 +6750,326 @@ ${argsString}</pre
     this.threadDividerResizing = false;
   };
 
+  private trackThreadsViewStateOnce(
+    state: "locked" | "empty_enabled" | "enabled",
+    threadCount: number,
+  ): void {
+    if (this.core?.telemetryDisabled) return;
+    const key = `${state}:${this.getThreadServiceStatus()}`;
+    if (this.viewedThreadsTelemetryStates.has(key)) return;
+    this.viewedThreadsTelemetryStates.add(key);
+    const props = this.getThreadsTelemetryProps({ thread_count: threadCount });
+    if (state === "locked") {
+      trackThreadsLockedViewed(props);
+    } else if (state === "empty_enabled") {
+      trackThreadsEmptyEnabledViewed(props);
+    } else {
+      trackThreadsEnabledViewed(props);
+    }
+  }
+
+  private renderThreadsLockedBackgroundMockup() {
+    const threadRows = [
+      { width: 74, accent: true },
+      { width: 92 },
+      { width: 68 },
+      { width: 84 },
+      { width: 58 },
+      { width: 76 },
+    ];
+
+    return html`
+      <div
+        aria-hidden="true"
+        style="
+          position: absolute;
+          inset: 0;
+          display: grid;
+          grid-template-columns: minmax(180px, 28%) 1fr;
+          overflow: hidden;
+          opacity: 0.58;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            padding: 28px 24px;
+            border-right: 1px solid #dbdbe5;
+            background: #fafafa;
+          "
+        >
+          ${threadRows.map(
+            (row) => html`
+              <div
+                style="
+                  padding: 12px;
+                  border-radius: 8px;
+                  background: ${row.accent ? "#eee6fe" : "#ffffff"};
+                  box-shadow: inset 0 0 0 1px #eeeef4;
+                "
+              >
+                <div
+                  style="
+                    height: 8px;
+                    width: ${row.width}%;
+                    border-radius: 99px;
+                    background: ${row.accent ? "#a984f5" : "#d7d7df"};
+                  "
+                ></div>
+                <div
+                  style="
+                    height: 6px;
+                    width: 88%;
+                    margin-top: 10px;
+                    border-radius: 99px;
+                    background: #e3e3eb;
+                  "
+                ></div>
+                <div
+                  style="
+                    height: 6px;
+                    width: 62%;
+                    margin-top: 7px;
+                    border-radius: 99px;
+                    background: #e8e8ef;
+                  "
+                ></div>
+              </div>
+            `,
+          )}
+        </div>
+        <div
+          style="
+            min-width: 0;
+            padding: 42px 48px;
+            background: #ffffff;
+          "
+        >
+          <div
+            style="
+              height: 10px;
+              width: 180px;
+              border-radius: 99px;
+              background: #d7d7df;
+            "
+          ></div>
+          <div
+            style="
+              height: 8px;
+              width: min(520px, 58%);
+              margin-top: 28px;
+              border-radius: 99px;
+              background: #e3e3eb;
+            "
+          ></div>
+          <div
+            style="
+              height: 8px;
+              width: min(430px, 48%);
+              margin-top: 12px;
+              border-radius: 99px;
+              background: #e8e8ef;
+            "
+          ></div>
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(2, minmax(0, 1fr));
+              gap: 16px;
+              max-width: 620px;
+              margin-top: 30px;
+            "
+          >
+            <div
+              style="
+                height: 116px;
+                border-radius: 8px;
+                background: #f5f5f8;
+                box-shadow: inset 0 0 0 1px #eeeef4;
+              "
+            ></div>
+            <div
+              style="
+                height: 116px;
+                border-radius: 8px;
+                background: #f5f5f8;
+                box-shadow: inset 0 0 0 1px #eeeef4;
+              "
+            ></div>
+          </div>
+          <div
+            style="
+              height: 10px;
+              width: min(680px, 74%);
+              margin-top: 34px;
+              border-radius: 99px;
+              background: #e3e3eb;
+            "
+          ></div>
+          <div
+            style="
+              height: 10px;
+              width: min(560px, 60%);
+              margin-top: 14px;
+              border-radius: 99px;
+              background: #e8e8ef;
+            "
+          ></div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderThreadsLockedView() {
+    this.trackThreadsViewStateOnce("locked", 0);
+    return html`
+      <div
+        style="
+          position: relative;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+          overflow: hidden;
+          background: #ffffff;
+        "
+      >
+        ${this.renderThreadsLockedBackgroundMockup()}
+        <div
+          aria-hidden="true"
+          style="
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background:
+              radial-gradient(circle at center, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.78) 24%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0.56) 100%);
+          "
+        ></div>
+        <div
+          style="
+            position: relative;
+            z-index: 1;
+            max-width: 440px;
+            text-align: center;
+            color: #57575b;
+          "
+        >
+          <div
+            aria-hidden="true"
+            style="
+              margin: 0 auto 18px;
+              display: flex;
+              justify-content: center;
+            "
+          >
+            <div
+              style="
+                display: flex;
+                height: 44px;
+                width: 44px;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid #dfd6fb;
+                border-radius: 8px;
+                background: #eee6fe;
+                color: #57575b;
+                box-shadow: 0 8px 18px rgba(87, 87, 91, 0.14);
+              "
+            >
+              ${this.renderIcon("Lock")}
+            </div>
+          </div>
+          <h2
+            style="
+              margin: 0 0 8px;
+              font-size: 16px;
+              line-height: 1.35;
+              font-weight: 600;
+              color: #010507;
+            "
+          >
+            Enable Intelligence to inspect Threads.
+          </h2>
+          <p
+            style="
+              margin: 0 auto 18px;
+              max-width: 380px;
+              font-size: 13px;
+              line-height: 1.55;
+              color: #57575b;
+            "
+          >
+            Persist conversations and inspect saved thread history from the
+            Inspector.
+          </p>
+          <div
+            style="
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              gap: 8px;
+            "
+          >
+            <a
+              href=${this.getTalkToEngineerUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                min-height: 34px;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                border-radius: 6px;
+                background: #010507;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #ffffff;
+                text-decoration: none;
+              "
+              @click=${this.handleThreadsTalkToEngineerClick}
+            >
+              Talk to an Engineer
+            </a>
+            <a
+              href=${this.getIntelligenceSignupUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                min-height: 34px;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                border-radius: 6px;
+                border: 1px solid #dbdbe5;
+                background: #ffffff;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #57575b;
+                text-decoration: none;
+              "
+              @click=${this.handleThreadsIntelligenceSignupClick}
+            >
+              Sign up for Intelligence
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   private renderThreadsView() {
+    if (!this.areThreadEndpointsAvailable()) {
+      return this.renderThreadsLockedView();
+    }
+
     const displayThreads =
       this.selectedContext === "all-agents"
         ? this._threads
@@ -5847,91 +7093,110 @@ ${argsString}</pre
         ? (displayThreads.find((t) => t.id === this.selectedThreadId) ?? null)
         : null;
 
+    if (!threadsErrorMessage) {
+      this.trackThreadsViewStateOnce(
+        displayThreads.length === 0 ? "empty_enabled" : "enabled",
+        displayThreads.length,
+      );
+    }
+
     return html`
-      <div style="display:flex;height:100%;overflow:hidden;">
-        <!-- Left sidebar: thread list -->
+      <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
         <div
-          style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+          style="display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid #DBDBE5;background:#ffffff;padding:8px 12px;flex-shrink:0;"
         >
-          <cpk-thread-list
-            style="height:100%;"
-            .threads=${displayThreads}
-            .selectedThreadId=${this.selectedThreadId}
-            .errorMessage=${threadsErrorMessage}
-            @threadSelected=${(e: CustomEvent<string>) => {
-              this.selectedThreadId = e.detail;
-              this.requestUpdate();
-            }}
-          ></cpk-thread-list>
+          <a
+            href=${this.getTalkToEngineerUrl()}
+            target="_blank"
+            rel="noopener"
+            style="display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
+            @click=${this.handleTalkToEngineerClick}
+          >
+            Talk to an Engineer
+          </a>
         </div>
+        <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
+          <!-- Left sidebar: thread list -->
+          <div
+            style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+          >
+            <cpk-thread-list
+              style="height:100%;"
+              .threads=${displayThreads}
+              .selectedThreadId=${this.selectedThreadId}
+              .errorMessage=${threadsErrorMessage}
+              @threadSelected=${(e: CustomEvent<string>) => {
+                this.selectedThreadId = e.detail;
+                this.requestUpdate();
+              }}
+            ></cpk-thread-list>
+          </div>
 
-        <!-- Resize divider -->
-        <div
-          style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
-          @pointerdown=${this.handleThreadDividerPointerDown}
-          @pointermove=${this.handleThreadDividerPointerMove}
-          @pointerup=${this.handleThreadDividerPointerUp}
-          @pointercancel=${this.handleThreadDividerPointerUp}
-        ></div>
-
-        <!-- Center + right: thread details or empty state -->
-        <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
-          ${
-            this.selectedThreadId
-              ? html`<cpk-thread-details
-                  style="flex:1;min-width:0;"
-                  .threadId=${this.selectedThreadId}
-                  .thread=${selectedThread}
-                  .runtimeUrl=${this._core?.runtimeUrl ?? ""}
-                  .headers=${this._core?.headers ?? {}}
-                  .threadInspectionAvailable=${
-                    this._core?.threadEndpoints?.inspect !== false
-                  }
-                  .liveMessageVersion=${
-                    this.selectedThreadId
-                      ? (this.liveMessageVersion.get(this.selectedThreadId) ??
-                        0)
-                      : 0
-                  }
-                  .agentStateInput=${
-                    selectedThread
-                      ? this.getLatestStateForAgent(selectedThread.agentId)
-                      : null
-                  }
-                  .agentEventsInput=${
-                    selectedThread
-                      ? (this.agentEvents.get(selectedThread.agentId) ?? [])
-                      : []
-                  }
-                ></cpk-thread-details>`
-              : html`
-                  <div
-                    style="
-                      flex: 1;
-                      display: flex;
-                      flex-direction: column;
-                      align-items: center;
-                      justify-content: center;
-                      gap: 8px;
-                      color: #838389;
-                    "
-                  >
-                    <svg
-                      width="32"
-                      height="32"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="#c0c0c8"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
+          <!-- Resize divider -->
+          <div
+            style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
+            @pointerdown=${this.handleThreadDividerPointerDown}
+            @pointermove=${this.handleThreadDividerPointerMove}
+            @pointerup=${this.handleThreadDividerPointerUp}
+            @pointercancel=${this.handleThreadDividerPointerUp}
+          ></div>
+
+          <!-- Center + right: thread details or empty state -->
+          <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
+            ${
+              selectedThread
+                ? html`<cpk-thread-details
+                    style="flex:1;min-width:0;"
+                    .threadId=${selectedThread.id}
+                    .thread=${selectedThread}
+                    .runtimeUrl=${this._core?.runtimeUrl ?? ""}
+                    .headers=${this._core?.headers ?? {}}
+                    .threadInspectionAvailable=${
+                      this._core?.threadEndpoints?.inspect !== false
+                    }
+                    .liveMessageVersion=${
+                      this.liveMessageVersion.get(selectedThread.id) ?? 0
+                    }
+                    .agentStateInput=${this.getLatestStateForAgent(
+                      selectedThread.agentId,
+                    )}
+                    .agentEventsInput=${
+                      this.agentEvents.get(selectedThread.agentId) ?? []
+                    }
+                  ></cpk-thread-details>`
+                : html`
+                    <div
+                      style="
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 8px;
+                        color: #838389;
+                      "
                     >
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                    </svg>
-                    <span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
-                  </div>
-                `
-          }
+                      <svg
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="#c0c0c8"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                      </svg>
+                      <span style="font-size: 13px">${
+                        displayThreads.length === 0
+                          ? "No threads yet"
+                          : "Select a thread to inspect"
+                      }</span>
+                    </div>
+                  `
+            }
+          </div>
         </div>
       </div>
     `;
@@ -6068,28 +7333,30 @@ ${argsString}</pre
         <div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
           <table class="w-full table-fixed border-collapse text-xs box-border">
             <colgroup>
-              <col style="width:${this.evtColWidths[0]}px">
-              <col style="width:${this.evtColWidths[1]}px">
-              <col style="width:${this.evtColWidths[2]}px">
-              <col>
+              <col style="width:${this.evtColWidths[0]}px" />
+              <col style="width:${this.evtColWidths[1]}px" />
+              <col style="width:${this.evtColWidths[2]}px" />
+              <col />
             </colgroup>
             <thead class="sticky top-0 z-10">
               <tr class="bg-white">
                 ${["Agent", "Time", "Event Type"].map(
-                  (label, col) => html`
-                <th
-                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
-                  style="position:relative;overflow:hidden;"
-                >
-                  ${label}
-                  <div
-                    style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;"
-                    @pointerdown=${(e: PointerEvent) => this._onEvtColResizeStart(e, col)}
-                    @pointermove=${(e: PointerEvent) => this._onEvtColResizeMove(e)}
-                    @pointerup=${() => this._onEvtColResizeEnd()}
-                    @pointercancel=${() => this._onEvtColResizeEnd()}
-                  ></div>
-                </th>`,
+                  (label, col) =>
+                    html` <th
+                      class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
+                      style="position:relative;overflow:hidden;"
+                    >
+                      ${label}
+                      <div
+                        style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;"
+                        @pointerdown=${(e: PointerEvent) =>
+                          this._onEvtColResizeStart(e, col)}
+                        @pointermove=${(e: PointerEvent) =>
+                          this._onEvtColResizeMove(e)}
+                        @pointerup=${() => this._onEvtColResizeEnd()}
+                        @pointercancel=${() => this._onEvtColResizeEnd()}
+                      ></div>
+                    </th>`,
                 )}
                 <th
                   class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
@@ -6421,8 +7688,14 @@ ${prettyEvent}</pre
                 ? html`
                   <div class="w-full text-xs">
                     <div class="flex bg-gray-50">
-                      <div class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700">Role</div>
-                      <div class="flex-1 px-4 py-2 font-medium text-gray-700">Content</div>
+                      <div
+                        class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700"
+                      >
+                        Role
+                      </div>
+                      <div class="flex-1 px-4 py-2 font-medium text-gray-700">
+                        Content
+                      </div>
                     </div>
                     <div class="divide-y divide-gray-200">
                       ${messages.map((msg) => {
@@ -6445,7 +7718,9 @@ ${prettyEvent}</pre
                           <div class="flex items-start">
                             <div class="w-40 shrink-0 px-4 py-2">
                               <span
-                                class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}"
+                                class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${
+                                  roleColors[role] || roleColors.unknown
+                                }"
                               >
                                 ${role}
                               </span>
@@ -6603,8 +7878,8 @@ ${prettyEvent}</pre
     }
 
     if (key === "threads") {
-      if (this.selectedMenu !== "threads" && !this.core?.telemetryDisabled) {
-        trackThreadsTabClicked();
+      if (previousMenu !== "threads" && !this.core?.telemetryDisabled) {
+        trackThreadsTabClicked(this.getThreadsTelemetryProps());
       }
       this.autoSelectLatestThread();
     }
@@ -7284,6 +8559,22 @@ ${prettyEvent}</pre
                           }
                         </button>
                       </div>
+                      <pre
+                        style="
+                          margin: 0;
+                          max-height: 180px;
+                          overflow: auto;
+                          white-space: pre-wrap;
+                          word-break: break-word;
+                          border-radius: 6px;
+                          border: 1px solid #eeeef4;
+                          background: #f7f7f9;
+                          padding: 10px;
+                          font-size: 11px;
+                          line-height: 1.5;
+                          color: #2d2d30;
+                        "
+                      >${this.formatContextValue(context.value)}</pre>
                     `
                     : html`
                         <div class="flex items-center justify-center py-4 text-xs text-gray-500">
@@ -7435,7 +8726,9 @@ ${prettyEvent}</pre
       return nothing;
     }
 
-    return html`<div class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
+    return html`<div
+      class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3"
+    >
       <div
         class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900"
       >
@@ -7454,7 +8747,13 @@ ${prettyEvent}</pre
           ${this.renderIcon("X")}
         </button>
       </div>
-      <div class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}">
+      <div
+        class="announcement-body ${
+          this.announcementExpanded
+            ? "announcement-body--expanded"
+            : "announcement-body--collapsed"
+        }"
+      >
         <div
           class="announcement-content"
           @click=${this.handleAnnouncementContentClick}
@@ -7632,10 +8931,15 @@ ${prettyEvent}</pre
   ): Promise<string | null> {
     const renderer = new marked.Renderer();
     renderer.link = (href, title, text) => {
-      const safeHref = this.escapeHtmlAttr(this.appendRefParam(href ?? ""));
+      const safeHref = this.escapeHtmlAttr(
+        this.isSafeAnnouncementHref(href ?? "")
+          ? this.appendRefParam(href ?? "")
+          : "#",
+      );
       const titleAttr = title ? ` title="${this.escapeHtmlAttr(title)}"` : "";
       return `<a href="${safeHref}" target="_blank" rel="noopener"${titleAttr}>${text}</a>`;
     };
+    renderer.html = (html) => escapeHtml(html);
     renderer.code = (code, lang) => {
       const safeLang = (lang ?? "").replace(/[^a-z0-9-]/gi, "");
       const langClass = safeLang ? ` class="language-${safeLang}"` : "";
@@ -7646,6 +8950,24 @@ ${prettyEvent}</pre
     return marked.parse(markdown, { renderer, async: false });
   }
 
+  private isSafeAnnouncementHref(href: string): boolean {
+    try {
+      const url = new URL(
+        href,
+        typeof window !== "undefined"
+          ? window.location.href
+          : "https://copilotkit.ai",
+      );
+      return (
+        url.protocol === "http:" ||
+        url.protocol === "https:" ||
+        url.protocol === "mailto:"
+      );
+    } catch {
+      return false;
+    }
+  }
+
   private copyResetTimeouts = new WeakMap<HTMLButtonElement, number>();
 
   private encodeBase64(value: string): string {
@@ -7710,8 +9032,9 @@ ${prettyEvent}</pre
     }
   };
 
-  private appendRefParam(href: string): string {
+  private appendRefParam(href: string, ref = "cpk-inspector"): string {
     try {
+      const isRootRelative = href.startsWith("/") && !href.startsWith("//");
       const url = new URL(
         href,
         typeof window !== "undefined"
@@ -7719,7 +9042,7 @@ ${prettyEvent}</pre
           : "https://copilotkit.ai",
       );
       if (!url.searchParams.has("ref")) {
-        url.searchParams.append("ref", "cpk-inspector");
+        url.searchParams.append("ref", ref);
       }
       // Propagate the inspector's anonymous distinct-ID so the website /
       // Ops API can call posthog.alias(...) on signup-flow landing and
@@ -7728,19 +9051,28 @@ ${prettyEvent}</pre
       // suppresses cross-domain ID leaks too.
       if (
         !url.searchParams.has("posthog_distinct_id") &&
-        !this.core?.telemetryDisabled
+        !this.core?.telemetryDisabled &&
+        this.isCopilotKitDestination(url)
       ) {
         const distinctId = getTelemetryDistinctIdForUrl();
         if (distinctId) {
           url.searchParams.append("posthog_distinct_id", distinctId);
         }
       }
+      if (isRootRelative) {
+        return `${url.pathname}${url.search}${url.hash}`;
+      }
       return url.toString();
     } catch {
       return href;
     }
   }
 
+  private isCopilotKitDestination(url: URL): boolean {
+    const hostname = url.hostname.toLowerCase();
+    return hostname === "copilotkit.ai" || hostname.endsWith(".copilotkit.ai");
+  }
+
   private escapeHtmlAttr(value: string): string {
     return escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }