@copilotkit/web-inspector 1.62.2 → 1.63.0

package/dist/index.cjs

@@ -35,7 +35,13 @@ const DOCKED_LEFT_WIDTH = 500;
 const MAX_AGENT_EVENTS = 200;
 const MAX_TOTAL_EVENTS = 500;
 const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
+const THREADS_INTELLIGENCE_SIGNIN_URL = "https://dashboard.operations.copilotkit.ai/sign-in";
 const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
+const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
+const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
+const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
+const THREADS_EXAMPLE_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
+const THREADS_EXAMPLE_AGENT_ID = "threads-feature";
 const AGENT_EVENT_TYPES = [
 	"RUN_STARTED",
 	"RUN_FINISHED",
@@ -61,6 +67,201 @@ const AGENT_EVENT_TYPES = [
 	"ACTIVITY_SNAPSHOT",
 	"ACTIVITY_DELTA"
 ];
+const THREADS_EXAMPLE_THREADS = [
+	{
+		id: "example-realtime-sync",
+		name: "Realtime thread sync",
+		agentId: THREADS_EXAMPLE_AGENT_ID,
+		organizationId: "example-organization",
+		createdById: "example-user",
+		archived: false,
+		createdAt: "2026-07-08T16:00:00.000Z",
+		updatedAt: "2026-07-08T16:30:00.000Z",
+		isExample: true
+	},
+	{
+		id: "example-manage-history",
+		name: "Manage saved conversations",
+		agentId: THREADS_EXAMPLE_AGENT_ID,
+		organizationId: "example-organization",
+		createdById: "example-user",
+		archived: false,
+		createdAt: "2026-07-07T17:45:00.000Z",
+		updatedAt: "2026-07-07T18:15:00.000Z",
+		isExample: true
+	},
+	{
+		id: "example-inspect-runs",
+		name: "Inspect durable run history",
+		agentId: THREADS_EXAMPLE_AGENT_ID,
+		organizationId: "example-organization",
+		createdById: "example-user",
+		archived: false,
+		createdAt: "2026-07-06T20:15:00.000Z",
+		updatedAt: "2026-07-06T20:45:00.000Z",
+		isExample: true
+	}
+];
+const THREADS_EXAMPLE_DETAILS = {
+	"example-realtime-sync": {
+		messages: [{
+			id: "example-sync-user",
+			role: "user",
+			content: "Resume the checkout support thread from yesterday."
+		}, {
+			id: "example-sync-assistant",
+			role: "assistant",
+			content: "I found the saved thread, restored the cart state, and continued from the latest user message."
+		}],
+		events: [
+			{
+				type: "RUN_STARTED",
+				timestamp: "2026-07-08T16:30:00.000Z",
+				payload: {
+					threadId: "example-realtime-sync",
+					agentId: THREADS_EXAMPLE_AGENT_ID
+				}
+			},
+			{
+				type: "MESSAGES_SNAPSHOT",
+				timestamp: "2026-07-08T16:30:01.000Z",
+				payload: {
+					messageCount: 6,
+					source: "thread-history"
+				}
+			},
+			{
+				type: "STATE_SNAPSHOT",
+				timestamp: "2026-07-08T16:30:02.000Z",
+				payload: {
+					cartId: "cart_demo_42",
+					checkoutStep: "shipping",
+					resumed: true
+				}
+			},
+			{
+				type: "RUN_FINISHED",
+				timestamp: "2026-07-08T16:30:04.000Z",
+				payload: { status: "completed" }
+			}
+		],
+		state: {
+			cartId: "cart_demo_42",
+			checkoutStep: "shipping",
+			userIntent: "resume_previous_checkout",
+			persistedThread: true
+		}
+	},
+	"example-manage-history": {
+		messages: [{
+			id: "example-history-user",
+			role: "user",
+			content: "Rename this saved support conversation for the handoff."
+		}, {
+			id: "example-history-assistant",
+			role: "assistant",
+			content: "Renamed the thread and kept the prior messages available for the next session."
+		}],
+		events: [
+			{
+				type: "RUN_STARTED",
+				timestamp: "2026-07-07T18:15:00.000Z",
+				payload: {
+					threadId: "example-manage-history",
+					agentId: THREADS_EXAMPLE_AGENT_ID
+				}
+			},
+			{
+				type: "CUSTOM_EVENT",
+				timestamp: "2026-07-07T18:15:01.000Z",
+				payload: {
+					action: "thread_renamed",
+					previousName: "Untitled",
+					name: "Billing escalation handoff"
+				}
+			},
+			{
+				type: "RUN_FINISHED",
+				timestamp: "2026-07-07T18:15:03.000Z",
+				payload: { status: "completed" }
+			}
+		],
+		state: {
+			name: "Billing escalation handoff",
+			savedMessages: 14,
+			lastHandoff: "support-team"
+		}
+	},
+	"example-inspect-runs": {
+		messages: [{
+			id: "example-inspect-user",
+			role: "user",
+			content: "Why did the assistant recommend the enterprise plan?"
+		}, {
+			id: "example-inspect-assistant",
+			role: "assistant",
+			content: "The recommendation came from the account size, SSO requirement, and audit-log constraint in state."
+		}],
+		events: [
+			{
+				type: "RUN_STARTED",
+				timestamp: "2026-07-06T20:45:00.000Z",
+				payload: {
+					threadId: "example-inspect-runs",
+					agentId: THREADS_EXAMPLE_AGENT_ID
+				}
+			},
+			{
+				type: "TOOL_CALL_START",
+				timestamp: "2026-07-06T20:45:01.000Z",
+				payload: {
+					toolCallId: "call_account_lookup",
+					toolName: "lookupAccount"
+				}
+			},
+			{
+				type: "TOOL_CALL_RESULT",
+				timestamp: "2026-07-06T20:45:02.000Z",
+				payload: {
+					toolCallId: "call_account_lookup",
+					seats: 220,
+					requiresSso: true
+				}
+			},
+			{
+				type: "RUN_FINISHED",
+				timestamp: "2026-07-06T20:45:04.000Z",
+				payload: { status: "completed" }
+			}
+		],
+		state: {
+			accountTier: "growth",
+			seats: 220,
+			requiresSso: true,
+			auditLogsRequired: true
+		}
+	}
+};
+const THREADS_EXAMPLE_TOUR_STEPS = [
+	{
+		tab: "timeline",
+		label: "Timeline",
+		title: "Read the run as a story",
+		body: "The timeline turns messages, tool calls, state changes, and run markers into a scannable debugging trail."
+	},
+	{
+		tab: "raw-events",
+		label: "Raw AG-UI Events",
+		title: "Drop into the protocol payloads",
+		body: "Raw events show the exact AG-UI stream behind the timeline when you need to verify ordering or payload shape."
+	},
+	{
+		tab: "state",
+		label: "State",
+		title: "Check the durable state",
+		body: "The state tab shows the saved values that make a thread resumable across sessions."
+	}
+];
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -276,6 +477,11 @@ var CpkThreadList = class extends lit.LitElement {
       color: #57575b;
     }
 
+    .cpk-tl__pill--example {
+      background: rgba(133, 236, 206, 0.22);
+      color: #189370;
+    }
+
     /* ── Empty state ── */
     .cpk-tl__empty {
       padding: 32px 16px;
@@ -349,6 +555,9 @@ var CpkThreadList = class extends lit.LitElement {
                 </div>
                 <div class="cpk-tl__meta">
                   <span class="cpk-tl__pill">${thread.agentId}</span>
+                  ${thread.isExample ? lit.html`
+                          <span class="cpk-tl__pill cpk-tl__pill--example">Example</span>
+                        ` : lit.nothing}
                 </div>
               </div>
             `)}
@@ -572,6 +781,9 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 		}
 		this.maybeFetchTabData(id);
 	}
+	selectTab(id) {
+		this.activateTab(id);
+	}
 	maybeFetchTabData(id) {
 		if (!this.threadId) return;
 		if ((id === "timeline" || id === "raw-events") && !this._eventsFetched) {
@@ -2628,219 +2840,580 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     `;
 	}
 };
-var ɵCpkThreadDetails = class 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);
-var WebInspectorElement = class extends lit.LitElement {
+var CpkMemoryList = class extends lit.LitElement {
 	constructor(..._args3) {
 		super(..._args3);
-		this._core = null;
-		this.coreSubscriber = null;
-		this.coreUnsubscribe = null;
-		this.runtimeStatus = null;
-		this.coreProperties = {};
-		this.lastCoreError = null;
-		this.agentSubscriptions = /* @__PURE__ */ new Map();
-		this.agentEvents = /* @__PURE__ */ new Map();
-		this.agentMessages = /* @__PURE__ */ new Map();
-		this.liveMessageVersion = /* @__PURE__ */ new Map();
-		this.agentStates = /* @__PURE__ */ new Map();
-		this.flattenedEvents = [];
-		this.eventCounter = 0;
-		this.contextStore = {};
-		this.pointerId = null;
-		this.dragStart = null;
-		this.dragOffset = {
-			x: 0,
-			y: 0
-		};
-		this.isDragging = false;
-		this.pointerContext = null;
-		this.isOpen = false;
-		this.draggedDuringInteraction = false;
-		this.ignoreNextButtonClick = false;
-		this.selectedMenu = "ag-ui-events";
-		this.selectedThreadId = null;
-		this.threadListWidth = 290;
-		this.threadDividerResizing = false;
-		this.threadDividerPointerId = -1;
-		this.threadDividerStartX = 0;
-		this.threadDividerStartWidth = 0;
-		this._threads = [];
-		this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
-		this._threadsByAgent = /* @__PURE__ */ new Map();
-		this._threadsErrorByAgent = /* @__PURE__ */ new Map();
-		this._ownedThreadStores = /* @__PURE__ */ new Map();
-		this.contextMenuOpen = false;
-		this.dockMode = "floating";
-		this.previousBodyMargins = null;
-		this.transitionTimeoutId = null;
-		this.bodyTransitionTimeoutIds = /* @__PURE__ */ new Set();
-		this.pendingSelectedContext = null;
-		this.autoAttachCore = true;
-		this.attemptedAutoAttach = false;
-		this.cachedTools = [];
-		this.toolSignature = "";
-		this.eventFilterText = "";
-		this.eventTypeFilter = "all";
-		this.evtColWidths = [
-			100,
-			80,
-			150
-		];
-		this._evtColResize = null;
-		this.announcementHtml = null;
-		this.announcementTimestamp = null;
-		this.announcementPreviewText = null;
-		this.announcementCtaLabel = null;
-		this.hasUnseenAnnouncement = false;
-		this.announcementLoaded = false;
-		this.announcementPromise = null;
-		this.showAnnouncementPreview = true;
-		this.announcementExpanded = false;
-		this.viewedBannerTimestamps = /* @__PURE__ */ new Set();
-		this.pendingBannerViewed = null;
-		this.clickedBannerIds = /* @__PURE__ */ new Set();
-		this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
-		this.contextState = {
-			button: {
-				position: {
-					x: EDGE_MARGIN,
-					y: EDGE_MARGIN
-				},
-				size: { ...DEFAULT_BUTTON_SIZE },
-				anchor: {
-					horizontal: "right",
-					vertical: "top"
-				},
-				anchorOffset: {
-					x: EDGE_MARGIN,
-					y: EDGE_MARGIN
-				}
-			},
-			window: {
-				position: {
-					x: EDGE_MARGIN,
-					y: EDGE_MARGIN
-				},
-				size: { ...DEFAULT_WINDOW_SIZE },
-				anchor: {
-					horizontal: "right",
-					vertical: "top"
-				},
-				anchorOffset: {
-					x: EDGE_MARGIN,
-					y: EDGE_MARGIN
-				}
-			}
-		};
-		this.hasCustomPosition = {
-			button: false,
-			window: false
-		};
-		this.resizePointerId = null;
-		this.resizeStart = null;
-		this.resizeInitialSize = null;
-		this.isResizing = false;
-		this.customTabIcons = { threads: `<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>` };
-		this.handlePointerDown = (event) => {
-			if (this.dockMode !== "floating" && this.isOpen) return;
-			const target = event.currentTarget;
-			const context = target?.dataset.dragContext === "window" ? "window" : "button";
-			const eventTarget = event.target;
-			if (context === "window" && eventTarget?.closest("button")) return;
-			this.pointerContext = context;
-			this.measureContext(context);
-			event.preventDefault();
-			this.pointerId = event.pointerId;
-			this.dragStart = {
-				x: event.clientX,
-				y: event.clientY
-			};
-			const state = this.contextState[context];
-			this.dragOffset = {
-				x: event.clientX - state.position.x,
-				y: event.clientY - state.position.y
-			};
-			this.isDragging = false;
-			this.draggedDuringInteraction = false;
-			this.ignoreNextButtonClick = false;
-			target?.setPointerCapture?.(this.pointerId);
-		};
-		this.handlePointerMove = (event) => {
-			if (this.pointerId !== event.pointerId || !this.dragStart || !this.pointerContext) return;
-			const distance = Math.hypot(event.clientX - this.dragStart.x, event.clientY - this.dragStart.y);
-			if (!this.isDragging && distance < DRAG_THRESHOLD) return;
-			event.preventDefault();
-			this.setDragging(true);
-			this.draggedDuringInteraction = true;
-			const desired = {
-				x: event.clientX - this.dragOffset.x,
-				y: event.clientY - this.dragOffset.y
-			};
-			const constrained = this.constrainToViewport(desired, this.pointerContext);
-			this.contextState[this.pointerContext].position = constrained;
-			this.updateHostTransform(this.pointerContext);
-		};
-		this.handlePointerUp = (event) => {
-			if (this.pointerId !== event.pointerId) return;
-			const target = event.currentTarget;
-			if (target?.hasPointerCapture(this.pointerId)) target.releasePointerCapture(this.pointerId);
-			const context = this.pointerContext ?? this.activeContext;
-			if (this.isDragging && this.pointerContext) {
-				event.preventDefault();
-				this.setDragging(false);
-				if (this.pointerContext === "window") {
-					this.updateAnchorFromPosition(this.pointerContext);
-					this.hasCustomPosition.window = true;
-					this.applyAnchorPosition(this.pointerContext);
-				} else if (this.pointerContext === "button") {
-					this.snapButtonToCorner();
-					this.hasCustomPosition.button = true;
-					if (this.draggedDuringInteraction) this.ignoreNextButtonClick = true;
-				}
-			} else if (context === "button" && !this.isOpen && !this.draggedDuringInteraction) this.openInspector();
-			this.resetPointerTracking();
-		};
-		this.handlePointerCancel = (event) => {
-			if (this.pointerId !== event.pointerId) return;
-			const target = event.currentTarget;
-			if (target?.hasPointerCapture(this.pointerId)) target.releasePointerCapture(this.pointerId);
-			this.resetPointerTracking();
-		};
-		this.handleButtonClick = (event) => {
-			if (this.isDragging) {
-				event.preventDefault();
-				return;
-			}
-			if (this.ignoreNextButtonClick) {
-				event.preventDefault();
-				this.ignoreNextButtonClick = false;
-				return;
-			}
-			if (!this.isOpen) {
-				event.preventDefault();
-				this.openInspector();
-			}
+		this.memories = [];
+		this.search = "";
+		this.kind = "all";
+		this.onSearchInput = (event) => {
+			this.search = event.target.value;
 		};
-		this.handleClosePointerDown = (event) => {
-			event.stopPropagation();
-			event.preventDefault();
+		this.onKindClick = (event) => {
+			const seg = event.target.closest("[data-kind]");
+			if (!seg) return;
+			this.kind = seg.dataset["kind"];
 		};
-		this.handleCloseClick = () => {
-			this.closeInspector();
+	}
+	static {
+		this.properties = {
+			memories: { attribute: false },
+			search: { state: true },
+			kind: { state: true }
 		};
-		this.handleResizePointerDown = (event) => {
-			event.stopPropagation();
-			event.preventDefault();
-			this.hasCustomPosition.window = true;
-			this.isResizing = true;
-			this.resizePointerId = event.pointerId;
-			this.resizeStart = {
-				x: event.clientX,
-				y: event.clientY
-			};
+	}
+	static {
+		this.styles = lit.css`
+    @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap");
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .cpk-ml {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      background: #f7f7f9;
+    }
+
+    /* ── Search ── */
+    .cpk-ml__search {
+      padding: 10px 12px;
+      border-bottom: 1px solid #dbdbe5;
+      flex-shrink: 0;
+    }
+
+    .cpk-ml__search-input {
+      width: 100%;
+      box-sizing: border-box;
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 12px;
+      padding: 7px 10px;
+      border-radius: 6px;
+      border: 1px solid #dbdbe5;
+      background: #ffffff;
+      color: #010507;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .cpk-ml__search-input:focus {
+      border-color: #bec2ff;
+    }
+
+    /* ── Kind filter ── */
+    .cpk-ml__filter {
+      display: flex;
+      gap: 4px;
+      padding: 8px 12px;
+      border-bottom: 1px solid #dbdbe5;
+      flex-shrink: 0;
+      flex-wrap: wrap;
+    }
+
+    .cpk-ml__filter-seg {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 11px;
+      font-weight: 500;
+      padding: 3px 9px;
+      border-radius: 5px;
+      border: 1px solid #dbdbe5;
+      background: #ffffff;
+      color: #57575b;
+      cursor: pointer;
+      transition:
+        background 0.1s,
+        border-color 0.1s,
+        color 0.1s;
+      user-select: none;
+    }
+
+    .cpk-ml__filter-seg:hover {
+      background: #f0f0f5;
+    }
+
+    .cpk-ml__filter-seg--active {
+      background: #bec2ff1a;
+      border-color: #bec2ff;
+      color: #010507;
+    }
+
+    .cpk-ml__filter-count {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      margin-left: 4px;
+      color: #838389;
+    }
+
+    /* ── List ── */
+    .cpk-ml__list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    /* ── Card ── */
+    .cpk-ml__card {
+      background: #ffffff;
+      border: 1px solid #e9e9ef;
+      border-radius: 8px;
+      padding: 10px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .cpk-ml__card-badges {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    /* Kind badge — color per kind */
+    .cpk-ml__kind-badge {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      padding: 1px 7px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    .cpk-ml__kind-badge--topical {
+      background: #eee6fe;
+      color: #57575b;
+    }
+
+    .cpk-ml__kind-badge--episodic {
+      background: #e6f4fe;
+      color: #2d5f80;
+    }
+
+    .cpk-ml__kind-badge--operational {
+      background: #e6feee;
+      color: #2d6645;
+    }
+
+    /* Scope badge */
+    .cpk-ml__scope-badge {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      padding: 1px 7px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 500;
+      white-space: nowrap;
+      background: #f0f0f5;
+      color: #838389;
+    }
+
+    /* Content */
+    .cpk-ml__content {
+      font-size: 12px;
+      color: #010507;
+      line-height: 1.5;
+      word-break: break-word;
+    }
+
+    /* Footer */
+    .cpk-ml__footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-top: 2px;
+    }
+
+    .cpk-ml__footer-threads {
+      font-size: 10px;
+      color: #838389;
+    }
+
+    .cpk-ml__footer-id {
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 9px;
+      color: #c0c0c8;
+    }
+
+    /* ── Empty state ── */
+    .cpk-ml__empty {
+      padding: 32px 16px;
+      text-align: center;
+      color: #838389;
+      font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .cpk-ml__empty-icon {
+      color: #c0c0c8;
+    }
+  `;
+	}
+	/** Memories that pass the current text search (before kind filter). */
+	get searchFiltered() {
+		const q = this.search.trim().toLowerCase();
+		if (!q) return this.memories;
+		return this.memories.filter((m) => m.content.toLowerCase().includes(q));
+	}
+	/** Memories that pass both search and kind filter. */
+	get filtered() {
+		const searched = this.searchFiltered;
+		if (this.kind === "all") return searched;
+		return searched.filter((m) => m.kind === this.kind);
+	}
+	/** Count of search-filtered memories for a given kind (for segment labels). */
+	countForKind(kind) {
+		return this.searchFiltered.filter((m) => m.kind === kind).length;
+	}
+	/** Truncate an id to first-4…last-4 characters. */
+	shortId(id) {
+		if (id.length <= 12) return id;
+		return `${id.slice(0, 4)}…${id.slice(-4)}`;
+	}
+	renderKindBadge(kind) {
+		return lit.html`<span class="cpk-ml__kind-badge cpk-ml__kind-badge--${kind}"
+      >${kind}</span
+    >`;
+	}
+	renderEmpty() {
+		const q = this.search.trim();
+		if (this.memories.length === 0) return lit.html`
+        <div class="cpk-ml__empty">
+          <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-ml__empty-icon"
+          >
+            <ellipse cx="12" cy="5" rx="9" ry="3" />
+            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+          </svg>
+          No memories yet — tell the agent a durable fact and watch it appear.
+        </div>
+      `;
+		if (q) return lit.html`
+        <div class="cpk-ml__empty">
+          No memories match &ldquo;${q}&rdquo;.
+        </div>
+      `;
+		return lit.html`
+      <div class="cpk-ml__empty">No ${this.kind} memories yet.</div>
+    `;
+	}
+	render() {
+		const filtered = this.filtered;
+		return lit.html`
+      <div class="cpk-ml">
+        <!-- Search -->
+        <div class="cpk-ml__search">
+          <input
+            type="text"
+            placeholder="Search memories…"
+            .value=${this.search}
+            @input=${this.onSearchInput}
+            class="cpk-ml__search-input"
+          />
+        </div>
+
+        <!-- Kind filter -->
+        <div class="cpk-ml__filter" @click=${this.onKindClick}>
+          <button
+            class="cpk-ml__filter-seg ${this.kind === "all" ? "cpk-ml__filter-seg--active" : ""}"
+            data-kind="all"
+          >
+            All<span class="cpk-ml__filter-count">${this.searchFiltered.length}</span>
+          </button>
+          ${[
+			"topical",
+			"episodic",
+			"operational"
+		].map((k) => lit.html`
+              <button
+                class="cpk-ml__filter-seg ${this.kind === k ? "cpk-ml__filter-seg--active" : ""}"
+                data-kind="${k}"
+              >
+                ${k}<span class="cpk-ml__filter-count">${this.countForKind(k)}</span>
+              </button>
+            `)}
+        </div>
+
+        <!-- Memory list -->
+        <div class="cpk-ml__list">
+          ${filtered.map((m) => lit.html`
+              <div class="cpk-ml__card">
+                <div class="cpk-ml__card-badges">
+                  ${this.renderKindBadge(m.kind)}
+                  <span class="cpk-ml__scope-badge">${m.scope}</span>
+                </div>
+                <div class="cpk-ml__content">${m.content}</div>
+                <div class="cpk-ml__footer">
+                  <span class="cpk-ml__footer-threads"
+                    >${m.sourceThreadIds.length} source thread${m.sourceThreadIds.length === 1 ? "" : "s"}</span
+                  >
+                  <span class="cpk-ml__footer-id">${this.shortId(m.id)}</span>
+                </div>
+              </div>
+            `)}
+          ${filtered.length === 0 ? this.renderEmpty() : lit.nothing}
+        </div>
+      </div>
+    `;
+	}
+};
+var ɵCpkThreadDetails = class 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);
+if (!customElements.get("cpk-memory-list")) customElements.define("cpk-memory-list", CpkMemoryList);
+var WebInspectorElement = class extends lit.LitElement {
+	constructor(..._args4) {
+		super(..._args4);
+		this._core = null;
+		this.coreSubscriber = null;
+		this.coreUnsubscribe = null;
+		this._memories = [];
+		this._memoriesLoading = false;
+		this._memoriesError = null;
+		this._memoriesAvailable = true;
+		this._memoriesRealtimeStatus = "connecting";
+		this._memoryUnsub = null;
+		this._memorySubscribed = false;
+		this._memoryStoreUnsupported = false;
+		this.runtimeStatus = null;
+		this.coreProperties = {};
+		this.lastCoreError = null;
+		this.agentSubscriptions = /* @__PURE__ */ new Map();
+		this.agentEvents = /* @__PURE__ */ new Map();
+		this.agentMessages = /* @__PURE__ */ new Map();
+		this.liveMessageVersion = /* @__PURE__ */ new Map();
+		this.agentStates = /* @__PURE__ */ new Map();
+		this.flattenedEvents = [];
+		this.eventCounter = 0;
+		this.contextStore = {};
+		this.pointerId = null;
+		this.dragStart = null;
+		this.dragOffset = {
+			x: 0,
+			y: 0
+		};
+		this.isDragging = false;
+		this.pointerContext = null;
+		this.isOpen = false;
+		this.draggedDuringInteraction = false;
+		this.ignoreNextButtonClick = false;
+		this.selectedMenu = "ag-ui-events";
+		this.selectedThreadId = null;
+		this.threadListWidth = 290;
+		this.threadDividerResizing = false;
+		this.threadDividerPointerId = -1;
+		this.threadDividerStartX = 0;
+		this.threadDividerStartWidth = 0;
+		this._threads = [];
+		this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
+		this._threadsByAgent = /* @__PURE__ */ new Map();
+		this._threadsErrorByAgent = /* @__PURE__ */ new Map();
+		this._ownedThreadStores = /* @__PURE__ */ new Map();
+		this.contextMenuOpen = false;
+		this.dockMode = "floating";
+		this.previousBodyMargins = null;
+		this.transitionTimeoutId = null;
+		this.bodyTransitionTimeoutIds = /* @__PURE__ */ new Set();
+		this.pendingSelectedContext = null;
+		this.autoAttachCore = true;
+		this.attemptedAutoAttach = false;
+		this.cachedTools = [];
+		this.toolSignature = "";
+		this.eventFilterText = "";
+		this.eventTypeFilter = "all";
+		this.evtColWidths = [
+			100,
+			80,
+			150
+		];
+		this._evtColResize = null;
+		this.announcementHtml = null;
+		this.announcementTimestamp = null;
+		this.announcementPreviewText = null;
+		this.announcementCtaLabel = null;
+		this.hasUnseenAnnouncement = false;
+		this.announcementLoaded = false;
+		this.announcementPromise = null;
+		this.showAnnouncementPreview = true;
+		this.announcementExpanded = false;
+		this.viewedBannerTimestamps = /* @__PURE__ */ new Set();
+		this.pendingBannerViewed = null;
+		this.clickedBannerIds = /* @__PURE__ */ new Set();
+		this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
+		this.viewedExampleThreadIds = /* @__PURE__ */ new Set();
+		this.selectedExampleThreadIds = /* @__PURE__ */ new Set();
+		this.viewedExampleTourSteps = /* @__PURE__ */ new Set();
+		this.exampleThreadProviders = /* @__PURE__ */ new Map();
+		this.exampleTourDismissed = false;
+		this.exampleTourActive = false;
+		this.exampleTourStep = 0;
+		this.exampleTourAutoShown = false;
+		this.threadsExampleOverviewVideoShouldLoad = false;
+		this.threadsExampleOverviewVideoReady = false;
+		this.threadsExampleOverviewVideoLoadTimer = null;
+		this.threadsExampleOverviewVideoIdleCallbackId = null;
+		this.contextState = {
+			button: {
+				position: {
+					x: EDGE_MARGIN,
+					y: EDGE_MARGIN
+				},
+				size: { ...DEFAULT_BUTTON_SIZE },
+				anchor: {
+					horizontal: "right",
+					vertical: "top"
+				},
+				anchorOffset: {
+					x: EDGE_MARGIN,
+					y: EDGE_MARGIN
+				}
+			},
+			window: {
+				position: {
+					x: EDGE_MARGIN,
+					y: EDGE_MARGIN
+				},
+				size: { ...DEFAULT_WINDOW_SIZE },
+				anchor: {
+					horizontal: "right",
+					vertical: "top"
+				},
+				anchorOffset: {
+					x: EDGE_MARGIN,
+					y: EDGE_MARGIN
+				}
+			}
+		};
+		this.hasCustomPosition = {
+			button: false,
+			window: false
+		};
+		this.resizePointerId = null;
+		this.resizeStart = null;
+		this.resizeInitialSize = null;
+		this.isResizing = false;
+		this.customTabIcons = { threads: `<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>` };
+		this.handlePointerDown = (event) => {
+			if (this.dockMode !== "floating" && this.isOpen) return;
+			const target = event.currentTarget;
+			const context = target?.dataset.dragContext === "window" ? "window" : "button";
+			const eventTarget = event.target;
+			if (context === "window" && eventTarget?.closest("button")) return;
+			this.pointerContext = context;
+			this.measureContext(context);
+			event.preventDefault();
+			this.pointerId = event.pointerId;
+			this.dragStart = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			const state = this.contextState[context];
+			this.dragOffset = {
+				x: event.clientX - state.position.x,
+				y: event.clientY - state.position.y
+			};
+			this.isDragging = false;
+			this.draggedDuringInteraction = false;
+			this.ignoreNextButtonClick = false;
+			target?.setPointerCapture?.(this.pointerId);
+		};
+		this.handlePointerMove = (event) => {
+			if (this.pointerId !== event.pointerId || !this.dragStart || !this.pointerContext) return;
+			const distance = Math.hypot(event.clientX - this.dragStart.x, event.clientY - this.dragStart.y);
+			if (!this.isDragging && distance < DRAG_THRESHOLD) return;
+			event.preventDefault();
+			this.setDragging(true);
+			this.draggedDuringInteraction = true;
+			const desired = {
+				x: event.clientX - this.dragOffset.x,
+				y: event.clientY - this.dragOffset.y
+			};
+			const constrained = this.constrainToViewport(desired, this.pointerContext);
+			this.contextState[this.pointerContext].position = constrained;
+			this.updateHostTransform(this.pointerContext);
+		};
+		this.handlePointerUp = (event) => {
+			if (this.pointerId !== event.pointerId) return;
+			const target = event.currentTarget;
+			if (target?.hasPointerCapture(this.pointerId)) target.releasePointerCapture(this.pointerId);
+			const context = this.pointerContext ?? this.activeContext;
+			if (this.isDragging && this.pointerContext) {
+				event.preventDefault();
+				this.setDragging(false);
+				if (this.pointerContext === "window") {
+					this.updateAnchorFromPosition(this.pointerContext);
+					this.hasCustomPosition.window = true;
+					this.applyAnchorPosition(this.pointerContext);
+				} else if (this.pointerContext === "button") {
+					this.snapButtonToCorner();
+					this.hasCustomPosition.button = true;
+					if (this.draggedDuringInteraction) this.ignoreNextButtonClick = true;
+				}
+			} else if (context === "button" && !this.isOpen && !this.draggedDuringInteraction) this.openInspector();
+			this.resetPointerTracking();
+		};
+		this.handlePointerCancel = (event) => {
+			if (this.pointerId !== event.pointerId) return;
+			const target = event.currentTarget;
+			if (target?.hasPointerCapture(this.pointerId)) target.releasePointerCapture(this.pointerId);
+			this.resetPointerTracking();
+		};
+		this.handleButtonClick = (event) => {
+			if (this.isDragging) {
+				event.preventDefault();
+				return;
+			}
+			if (this.ignoreNextButtonClick) {
+				event.preventDefault();
+				this.ignoreNextButtonClick = false;
+				return;
+			}
+			if (!this.isOpen) {
+				event.preventDefault();
+				this.openInspector();
+			}
+		};
+		this.handleClosePointerDown = (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		};
+		this.handleCloseClick = () => {
+			this.closeInspector();
+		};
+		this.handleResizePointerDown = (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			this.hasCustomPosition.window = true;
+			this.isResizing = true;
+			this.resizePointerId = event.pointerId;
+			this.resizeStart = {
+				x: event.clientX,
+				y: event.clientY
+			};
 			this.resizeInitialSize = { ...this.contextState.window.size };
 			if (document.body && this.dockMode !== "floating") document.body.style.transition = "";
 			event.currentTarget?.setPointerCapture?.(event.pointerId);
@@ -2949,6 +3522,10 @@ var WebInspectorElement = class extends lit.LitElement {
 			if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
 			this.threadDividerResizing = false;
 		};
+		this.handleThreadsExampleOverviewVideoLoaded = () => {
+			this.threadsExampleOverviewVideoReady = true;
+			this.requestUpdate();
+		};
 		this.handleClearEvents = () => {
 			if (this.selectedContext === "all-agents") {
 				this.agentEvents.clear();
@@ -3053,6 +3630,11 @@ var WebInspectorElement = class extends lit.LitElement {
 				key: "threads",
 				label: "Threads",
 				icon: "MessageSquare"
+			},
+			{
+				key: "memories",
+				label: "Learning",
+				icon: "Brain"
 			}
 		];
 	}
@@ -3064,6 +3646,16 @@ var WebInspectorElement = class extends lit.LitElement {
 	areThreadEndpointsAvailable() {
 		return this.getThreadServiceStatus() !== "unavailable";
 	}
+	getActiveThreadsState() {
+		const displayThreads = this.selectedContext === "all-agents" ? this._threads : this._threadsByAgent.get(this.selectedContext) ?? [];
+		let threadsErrorMessage = null;
+		if (this.selectedContext === "all-agents") threadsErrorMessage = this._threadsErrorByAgent.values().next().value?.message ?? null;
+		else threadsErrorMessage = this._threadsErrorByAgent.get(this.selectedContext)?.message ?? null;
+		return {
+			displayThreads,
+			threadsErrorMessage
+		};
+	}
 	getThreadsTelemetryProps(extra = {}, options = {}) {
 		const distinctId = options.includeUrlAttribution && !this.core?.telemetryDisabled ? require_telemetry.getTelemetryDistinctIdForUrl() : null;
 		const threadServiceStatus = this.getThreadServiceStatus();
@@ -3078,12 +3670,31 @@ var WebInspectorElement = class extends lit.LitElement {
 			...extra
 		};
 	}
+	getMemoriesTelemetryProps() {
+		return {
+			posthog_distinct_id: (!this.core?.telemetryDisabled ? require_telemetry.getTelemetryDistinctIdForUrl() : null) ?? void 0,
+			memory_count: this._memories.length,
+			available: this._memoriesAvailable
+		};
+	}
 	getIntelligenceSignupUrl() {
 		return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
 	}
+	getThreadsIntelligenceSignupUrl() {
+		return this.appendRefParam(THREADS_INTELLIGENCE_SIGNIN_URL, "cpk-inspector");
+	}
 	getTalkToEngineerUrl() {
 		return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
 	}
+	getThreadsTalkToEngineerUrl() {
+		return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
+	}
+	getThreadsDocsUrl() {
+		return this.appendRefParam(THREADS_DOCS_URL, "cpk-inspector-threads");
+	}
+	getSelfHostedIntelligenceUrl() {
+		return this.appendRefParam(SELF_HOSTED_INTELLIGENCE_URL, "cpk-inspector-threads");
+	}
 	subscribeToThreadStore(agentId, store) {
 		if (!this.areThreadEndpointsAvailable()) return;
 		if (this._threadStoreSubscriptions.has(agentId)) return;
@@ -3112,7 +3723,7 @@ var WebInspectorElement = class extends lit.LitElement {
 	}
 	autoSelectLatestThread() {
 		if (this._threads.length === 0) return;
-		if (!(this.selectedThreadId != null && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
+		if (!(this.selectedThreadId != null && !this.isExampleThreadId(this.selectedThreadId) && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
 	}
 	teardownThreadStoreSubscriptions() {
 		for (const unsub of this._threadStoreSubscriptions.values()) unsub();
@@ -3242,12 +3853,75 @@ var WebInspectorElement = class extends lit.LitElement {
 		const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
 		for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
 		if (core.context) this.contextStore = this.normalizeContextStore(core.context);
+		if (this.selectedMenu === "memories") this.ensureMemorySubscription();
+	}
+	/**
+	* Lazily subscribes to the singleton memory store the first time the user
+	* activates the Memories tab. This is deferred out of `attachToCore` because
+	* `core.getMemoryStore()` is what creates + starts the store and opens
+	* realtime — doing it on attach would start memory for apps that never use
+	* it. Idempotent: repeated tab activations are guarded by
+	* `_memorySubscribed`. On an older @copilotkit/core without `getMemoryStore`,
+	* records the unsupported state so the teaser can guide an SDK upgrade.
+	*/
+	ensureMemorySubscription() {
+		if (this._memorySubscribed) return;
+		const core = this._core;
+		if (!core) return;
+		if (typeof core.getMemoryStore !== "function") {
+			this._memoryStoreUnsupported = true;
+			this._memoriesAvailable = false;
+			this.requestUpdate();
+			return;
+		}
+		this._memorySubscribed = true;
+		this._memoryStoreUnsupported = false;
+		const memoryStore = core.getMemoryStore();
+		const ms = memoryStore.getState();
+		this._memories = (0, _copilotkit_core.ɵselectMemories)(ms);
+		this._memoriesLoading = (0, _copilotkit_core.ɵselectMemoriesIsLoading)(ms);
+		this._memoriesError = (0, _copilotkit_core.ɵselectMemoriesError)(ms);
+		this._memoriesAvailable = (0, _copilotkit_core.ɵselectMemoriesAvailable)(ms);
+		this._memoriesRealtimeStatus = (0, _copilotkit_core.ɵselectMemoriesRealtimeStatus)(ms);
+		const memSubs = [
+			memoryStore.select(_copilotkit_core.ɵselectMemories).subscribe((v) => {
+				this._memories = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(_copilotkit_core.ɵselectMemoriesIsLoading).subscribe((v) => {
+				this._memoriesLoading = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(_copilotkit_core.ɵselectMemoriesError).subscribe((v) => {
+				this._memoriesError = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(_copilotkit_core.ɵselectMemoriesAvailable).subscribe((v) => {
+				this._memoriesAvailable = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(_copilotkit_core.ɵselectMemoriesRealtimeStatus).subscribe((v) => {
+				this._memoriesRealtimeStatus = v;
+				this.requestUpdate();
+			})
+		];
+		this._memoryUnsub = () => memSubs.forEach((s) => s.unsubscribe());
+		this.requestUpdate();
 	}
 	detachFromCore() {
 		if (this.coreUnsubscribe) {
 			this.coreUnsubscribe();
 			this.coreUnsubscribe = null;
 		}
+		this._memoryUnsub?.();
+		this._memoryUnsub = null;
+		this._memories = [];
+		this._memoriesLoading = false;
+		this._memoriesError = null;
+		this._memoriesAvailable = true;
+		this._memoriesRealtimeStatus = "connecting";
+		this._memorySubscribed = false;
+		this._memoryStoreUnsupported = false;
 		this.coreSubscriber = null;
 		this.runtimeStatus = null;
 		this.lastCoreError = null;
@@ -4244,6 +4918,35 @@ ${argsString}</pre
       .cpk-tab-active {
         cursor: pointer;
       }
+      .cpk-threads-overview-video-frame {
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 440px;
+        aspect-ratio: 16 / 9;
+        margin: 0 0 14px;
+        overflow: hidden;
+        border: 1px solid #dbdbe5;
+        border-radius: 8px;
+        background:
+          linear-gradient(
+            135deg,
+            rgba(190, 194, 255, 0.18),
+            rgba(133, 236, 206, 0.12)
+          ),
+          #ffffff;
+        box-shadow: 0 8px 20px rgba(1, 5, 7, 0.08);
+      }
+      .cpk-threads-overview-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 0;
+        transition: opacity 220ms ease;
+      }
+      .cpk-threads-overview-video[data-ready="true"] {
+        opacity: 1;
+      }
 
       /* ── Header control buttons (dock, close) — first row only ───── */
       .drag-handle > div:first-child button {
@@ -4420,6 +5123,7 @@ ${argsString}</pre
 			window.addEventListener("resize", this.handleResize);
 			window.addEventListener("pointerdown", this.handleGlobalPointerDown);
 			this.hydrateStateFromStorageEarly();
+			this.exampleTourDismissed = this.readThreadsExampleTourDismissed();
 			this.tryAutoAttachCore();
 			this.ensureAnnouncementLoading();
 		}
@@ -4445,6 +5149,14 @@ ${argsString}</pre
 			clearTimeout(this.transitionTimeoutId);
 			this.transitionTimeoutId = null;
 		}
+		if (this.threadsExampleOverviewVideoLoadTimer !== null) {
+			window.clearTimeout(this.threadsExampleOverviewVideoLoadTimer);
+			this.threadsExampleOverviewVideoLoadTimer = null;
+		}
+		if (this.threadsExampleOverviewVideoIdleCallbackId !== null && typeof window.cancelIdleCallback === "function") {
+			window.cancelIdleCallback(this.threadsExampleOverviewVideoIdleCallbackId);
+			this.threadsExampleOverviewVideoIdleCallbackId = null;
+		}
 		this.removeDockStyles(true);
 		this.detachFromCore();
 	}
@@ -4470,6 +5182,7 @@ ${argsString}</pre
 			y: EDGE_MARGIN
 		};
 		this.hydrateStateFromStorage();
+		if (this.selectedMenu === "memories") this.ensureMemorySubscription();
 		if (this.isOpen && this.dockMode !== "floating") this.applyDockStyles(true);
 		this.applyAnchorPosition("button");
 		if (this.dockMode === "floating") if (this.hasCustomPosition.window) this.applyAnchorPosition("window");
@@ -4640,6 +5353,17 @@ ${argsString}</pre
                   </button>
                 `;
 		})}
+              ${this.selectedMenu === "threads" ? lit.html`
+                      <a
+                        href=${this.getThreadsTalkToEngineerUrl()}
+                        target="_blank"
+                        rel="noopener"
+                        style="margin-left:auto;display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
+                        @click=${this.handleTalkToEngineerClick}
+                      >
+                        Talk to an Engineer
+                      </a>
+                    ` : lit.nothing}
             </div>
           </div>
           <div class="flex flex-1 flex-col overflow-hidden">
@@ -5165,65 +5889,432 @@ ${argsString}</pre
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "agent-context") return this.renderContextView();
 		if (this.selectedMenu === "threads") return this.renderThreadsView();
+		if (this.selectedMenu === "memories") return this.renderMemoriesView();
 		if (this.selectedMenu === "settings") return this.renderSettingsPanel();
 		return lit.nothing;
 	}
-	renderSettingsPanel() {
-		const optedOut = this.core?.telemetryDisabled ?? false;
+	renderSettingsPanel() {
+		const optedOut = this.core?.telemetryDisabled ?? false;
+		return lit.html`
+      <div class="flex h-full flex-col overflow-hidden">
+        <div class="overflow-auto p-4">
+          <div class="space-y-3">
+            <h2 class="text-sm font-semibold text-slate-900">Settings</h2>
+
+            <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"
+              >
+                <p class="text-sm text-gray-600 flex items-start gap-2">
+                  <span>${optedOut ? "❌" : "✅"}</span>
+                  <span>
+                    ${optedOut ? "You have disabled anonymous interaction data collection." : "CopilotKit is currently collecting anonymous interaction data from the inspector so we know which features people use. We never collect message content, agent state, prompts, or completions."}
+                  </span>
+                </p>
+                <a
+                  class="inline-flex items-center gap-1 text-sm text-slate-700 underline hover:text-slate-900"
+                  href=${require_telemetry.TELEMETRY_DOCS_URL}
+                  target="_blank"
+                  rel="noopener"
+                  >Learn more →</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	trackBannerClickedOnce(opts) {
+		if (this.core?.telemetryDisabled) return;
+		const id = this.announcementTimestamp;
+		if (!id) return;
+		const key = `${id}:${opts.cta}`;
+		if (this.clickedBannerIds.has(key)) return;
+		this.clickedBannerIds.add(key);
+		require_telemetry.trackBannerClicked({
+			banner_id: id,
+			cta: opts.cta,
+			cta_label: this.announcementCtaLabel ?? void 0
+		});
+	}
+	trackThreadsViewStateOnce(state, threadCount) {
+		if (this.core?.telemetryDisabled) return;
+		const key = `${state}:${this.getThreadServiceStatus()}`;
+		if (this.viewedThreadsTelemetryStates.has(key)) return;
+		this.viewedThreadsTelemetryStates.add(key);
+		const props = this.getThreadsTelemetryProps({ thread_count: threadCount });
+		if (state === "locked") require_telemetry.trackThreadsLockedViewed(props);
+		else if (state === "empty_enabled") require_telemetry.trackThreadsEmptyEnabledViewed(props);
+		else require_telemetry.trackThreadsEnabledViewed(props);
+	}
+	shouldRenderExampleThreads(displayThreads, threadsErrorMessage) {
+		return this.areThreadEndpointsAvailable() && !threadsErrorMessage && displayThreads.length === 0;
+	}
+	getVisibleThreads(displayThreads, threadsErrorMessage) {
+		return this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage) ? THREADS_EXAMPLE_THREADS : displayThreads;
+	}
+	isExampleThreadId(threadId) {
+		return THREADS_EXAMPLE_THREADS.some((thread) => thread.id === threadId);
+	}
+	getExampleThreadProvider(threadId) {
+		const cached = this.exampleThreadProviders.get(threadId);
+		if (cached) return cached;
+		const thread = THREADS_EXAMPLE_THREADS.find((item) => item.id === threadId);
+		const details = THREADS_EXAMPLE_DETAILS[threadId];
+		const provider = {
+			getThreadMetadata: async () => thread ? {
+				id: thread.id,
+				name: thread.name,
+				agentId: thread.agentId,
+				endUserId: "example-user",
+				status: "completed",
+				updatedAt: thread.updatedAt
+			} : null,
+			getMessages: async () => details?.messages ?? [],
+			getEvents: async () => details?.events ?? [],
+			getState: async () => details?.state ?? null
+		};
+		this.exampleThreadProviders.set(threadId, provider);
+		return provider;
+	}
+	trackThreadsExampleViewedOnce() {
+		if (this.core?.telemetryDisabled) return;
+		for (const thread of THREADS_EXAMPLE_THREADS) {
+			if (this.viewedExampleThreadIds.has(thread.id)) continue;
+			this.viewedExampleThreadIds.add(thread.id);
+			require_telemetry.trackThreadsExampleViewed(this.getThreadsTelemetryProps({
+				example_thread_id: thread.id,
+				thread_count: 0
+			}));
+		}
+	}
+	trackThreadsExampleSelectedOnce(threadId) {
+		if (this.core?.telemetryDisabled) return;
+		if (this.selectedExampleThreadIds.has(threadId)) return;
+		this.selectedExampleThreadIds.add(threadId);
+		require_telemetry.trackThreadsExampleSelected(this.getThreadsTelemetryProps({
+			example_thread_id: threadId,
+			thread_count: 0
+		}));
+	}
+	getCurrentExampleTourProps() {
+		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
+		return this.getThreadsTelemetryProps({
+			example_thread_id: this.selectedThreadId ?? void 0,
+			thread_count: 0,
+			tour_step: this.exampleTourStep + 1,
+			tour_tab: step?.tab
+		});
+	}
+	trackThreadsExampleTourStepViewedOnce() {
+		if (this.core?.telemetryDisabled || !this.selectedThreadId) return;
+		if (!(THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0])) return;
+		const key = `${this.selectedThreadId}:${this.exampleTourStep}`;
+		if (this.viewedExampleTourSteps.has(key)) return;
+		this.viewedExampleTourSteps.add(key);
+		require_telemetry.trackThreadsExampleTourStepViewed(this.getCurrentExampleTourProps());
+	}
+	syncExampleTourTab() {
+		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
+		if (!step) return;
+		this.updateComplete.then(() => {
+			(this.shadowRoot?.querySelector("cpk-thread-details"))?.selectTab?.(step.tab);
+		});
+	}
+	startExampleTour(autoStarted) {
+		if (!this.selectedThreadId) return;
+		this.exampleTourActive = true;
+		this.exampleTourStep = 0;
+		if (autoStarted) {
+			this.exampleTourAutoShown = true;
+			if (!this.core?.telemetryDisabled) require_telemetry.trackThreadsExampleTourStarted(this.getCurrentExampleTourProps());
+		} else if (!this.core?.telemetryDisabled) require_telemetry.trackThreadsExampleTourReopened(this.getCurrentExampleTourProps());
+		this.trackThreadsExampleTourStepViewedOnce();
+		this.syncExampleTourTab();
+		this.requestUpdate();
+	}
+	setExampleTourStep(nextStep) {
+		this.exampleTourStep = Math.max(0, Math.min(THREADS_EXAMPLE_TOUR_STEPS.length - 1, nextStep));
+		this.trackThreadsExampleTourStepViewedOnce();
+		this.syncExampleTourTab();
+		this.requestUpdate();
+	}
+	dismissExampleTour(method) {
+		if (!this.selectedThreadId) return;
+		const props = {
+			...this.getCurrentExampleTourProps(),
+			dismiss_method: method
+		};
+		this.exampleTourActive = false;
+		this.exampleTourDismissed = true;
+		this.writeThreadsExampleTourDismissed();
+		if (!this.core?.telemetryDisabled) if (method === "done") require_telemetry.trackThreadsExampleTourCompleted(props);
+		else require_telemetry.trackThreadsExampleTourDismissed(props);
+		this.requestUpdate();
+	}
+	handleThreadsThreadSelected(threadId, showingExamples) {
+		if (showingExamples && this.selectedThreadId === threadId) {
+			this.selectedThreadId = null;
+			this.exampleTourActive = false;
+			this.requestUpdate();
+			return;
+		}
+		this.selectedThreadId = threadId;
+		if (showingExamples && this.isExampleThreadId(threadId)) {
+			this.trackThreadsExampleSelectedOnce(threadId);
+			if (!this.exampleTourDismissed && !this.exampleTourAutoShown) this.startExampleTour(true);
+			else this.exampleTourActive = false;
+		} else this.exampleTourActive = false;
+		this.requestUpdate();
+	}
+	readThreadsExampleTourDismissed() {
+		if (typeof window === "undefined") return false;
+		try {
+			const raw = window.localStorage.getItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY);
+			if (!raw) return false;
+			return JSON.parse(raw).dismissed === true;
+		} catch {
+			return false;
+		}
+	}
+	writeThreadsExampleTourDismissed() {
+		if (typeof window === "undefined") return;
+		try {
+			window.localStorage.setItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY, JSON.stringify({ dismissed: true }));
+		} catch {}
+	}
+	scheduleThreadsExampleOverviewVideoLoad() {
+		if (this.threadsExampleOverviewVideoShouldLoad || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || typeof window === "undefined") return;
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const loadVideo = () => {
+			this.threadsExampleOverviewVideoLoadTimer = null;
+			this.threadsExampleOverviewVideoIdleCallbackId = null;
+			this.threadsExampleOverviewVideoShouldLoad = true;
+			this.requestUpdate();
+		};
+		if (typeof window.requestIdleCallback === "function") {
+			this.threadsExampleOverviewVideoIdleCallbackId = window.requestIdleCallback(loadVideo, { timeout: 1200 });
+			return;
+		}
+		this.threadsExampleOverviewVideoLoadTimer = window.setTimeout(loadVideo, 450);
+	}
+	renderThreadsExampleOverviewVideo() {
+		this.scheduleThreadsExampleOverviewVideoLoad();
+		return lit.html`
+      <div class="cpk-threads-overview-video-frame" aria-hidden="true">
+        ${this.threadsExampleOverviewVideoShouldLoad ? lit.html`
+                <video
+                  class="cpk-threads-overview-video"
+                  data-ready=${this.threadsExampleOverviewVideoReady}
+                  src=${THREADS_EXAMPLE_OVERVIEW_VIDEO_URL}
+                  autoplay
+                  loop
+                  muted
+                  playsinline
+                  preload="metadata"
+                  @loadeddata=${this.handleThreadsExampleOverviewVideoLoaded}
+                ></video>
+              ` : lit.nothing}
+      </div>
+    `;
+	}
+	renderThreadsExampleOverview() {
+		return lit.html`
+      <div
+        style="
+          flex: 1;
+          min-width: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+          background: #f7f7f9;
+        "
+      >
+        <div style="max-width: 440px; color: #57575b;">
+          <h2
+            style="
+              margin: 0 0 10px;
+              font-size: 20px;
+              line-height: 1.25;
+              font-weight: 600;
+              color: #010507;
+            "
+          >
+            Threads are persistent, inspectable conversations
+          </h2>
+          ${this.renderThreadsExampleOverviewVideo()}
+          <p
+            style="
+              margin: 0 0 16px;
+              font-size: 13px;
+              line-height: 1.55;
+              color: #57575b;
+            "
+          >
+            Take a tour with the example threads in the sidebar. Then, start
+            chatting in your app to create the first real thread.
+          </p>
+          <div style="display:flex;flex-wrap:wrap;gap:8px;">
+            <a
+              href=${this.getThreadsDocsUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                min-height: 34px;
+                border-radius: 6px;
+                background: #010507;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #ffffff;
+                text-decoration: none;
+              "
+            >
+              Learn how Threads work
+            </a>
+            <a
+              href=${this.getSelfHostedIntelligenceUrl()}
+              target="_blank"
+              rel="noopener"
+              style="
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                min-height: 34px;
+                border-radius: 6px;
+                border: 1px solid #dbdbe5;
+                background: #ffffff;
+                padding: 8px 12px;
+                font-size: 12px;
+                font-weight: 600;
+                color: #010507;
+                text-decoration: none;
+              "
+            >
+              Explore self-hosted Intelligence
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	renderThreadsExampleTour() {
+		if (!this.selectedThreadId || !this.isExampleThreadId(this.selectedThreadId)) return lit.nothing;
+		if (!this.exampleTourActive) return lit.html`
+        <button
+          type="button"
+          style="
+            position: absolute;
+            right: 16px;
+            bottom: 16px;
+            z-index: 2;
+            border: 1px solid #dbdbe5;
+            border-radius: 6px;
+            background: #ffffff;
+            padding: 7px 10px;
+            color: #57575b;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            box-shadow: 0 8px 18px rgba(1, 5, 7, 0.08);
+          "
+          @click=${() => this.startExampleTour(false)}
+        >
+          Show tour
+        </button>
+      `;
+		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
+		const isFirst = this.exampleTourStep === 0;
+		const isLast = this.exampleTourStep === THREADS_EXAMPLE_TOUR_STEPS.length - 1;
 		return lit.html`
-      <div class="flex h-full flex-col overflow-hidden">
-        <div class="overflow-auto p-4">
-          <div class="space-y-3">
-            <h2 class="text-sm font-semibold text-slate-900">Settings</h2>
-
-            <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"
-              >
-                <p class="text-sm text-gray-600 flex items-start gap-2">
-                  <span>${optedOut ? "❌" : "✅"}</span>
-                  <span>
-                    ${optedOut ? "You have disabled anonymous interaction data collection." : "CopilotKit is currently collecting anonymous interaction data from the inspector so we know which features people use. We never collect message content, agent state, prompts, or completions."}
-                  </span>
-                </p>
-                <a
-                  class="inline-flex items-center gap-1 text-sm text-slate-700 underline hover:text-slate-900"
-                  href=${require_telemetry.TELEMETRY_DOCS_URL}
-                  target="_blank"
-                  rel="noopener"
-                  >Learn more →</a
-                >
-              </div>
-            </div>
+      <div
+        role="dialog"
+        aria-label="Example thread tour"
+        style="
+          position: absolute;
+          right: 16px;
+          bottom: 16px;
+          z-index: 3;
+          width: min(340px, calc(100% - 32px));
+          border: 1px solid #dbdbe5;
+          border-radius: 8px;
+          background: #ffffff;
+          padding: 14px;
+          box-shadow: 0 16px 36px rgba(1, 5, 7, 0.14);
+          color: #57575b;
+        "
+      >
+        <div
+          style="
+            margin-bottom: 8px;
+            font-family: 'Spline Sans Mono', monospace;
+            font-size: 10px;
+            font-weight: 600;
+            color: #189370;
+            text-transform: uppercase;
+          "
+        >
+          ${this.exampleTourStep + 1}/${THREADS_EXAMPLE_TOUR_STEPS.length}
+          ${step.label}
+        </div>
+        <div
+          style="
+            margin-bottom: 6px;
+            font-size: 14px;
+            line-height: 1.35;
+            font-weight: 600;
+            color: #010507;
+          "
+        >
+          ${step.title}
+        </div>
+        <div style="font-size: 12px; line-height: 1.5; color: #57575b;">
+          ${step.body}
+        </div>
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
+            margin-top: 14px;
+          "
+        >
+          <button
+            type="button"
+            style="border:0;background:transparent;color:#838389;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;"
+            @click=${() => this.dismissExampleTour("skip")}
+          >
+            Skip
+          </button>
+          <div style="display:flex;gap:8px;">
+            <button
+              type="button"
+              style="border:1px solid #dbdbe5;border-radius:6px;background:#ffffff;color:#57575b;font-size:12px;font-weight:600;cursor:pointer;padding:7px 10px;"
+              ?disabled=${isFirst}
+              @click=${() => this.setExampleTourStep(this.exampleTourStep - 1)}
+            >
+              Back
+            </button>
+            <button
+              type="button"
+              style="border:1px solid #010507;border-radius:6px;background:#010507;color:#ffffff;font-size:12px;font-weight:600;cursor:pointer;padding:7px 10px;"
+              @click=${() => isLast ? this.dismissExampleTour("done") : this.setExampleTourStep(this.exampleTourStep + 1)}
+            >
+              ${isLast ? "Done" : "Next"}
+            </button>
           </div>
         </div>
       </div>
     `;
 	}
-	trackBannerClickedOnce(opts) {
-		if (this.core?.telemetryDisabled) return;
-		const id = this.announcementTimestamp;
-		if (!id) return;
-		const key = `${id}:${opts.cta}`;
-		if (this.clickedBannerIds.has(key)) return;
-		this.clickedBannerIds.add(key);
-		require_telemetry.trackBannerClicked({
-			banner_id: id,
-			cta: opts.cta,
-			cta_label: this.announcementCtaLabel ?? void 0
-		});
-	}
-	trackThreadsViewStateOnce(state, threadCount) {
-		if (this.core?.telemetryDisabled) return;
-		const key = `${state}:${this.getThreadServiceStatus()}`;
-		if (this.viewedThreadsTelemetryStates.has(key)) return;
-		this.viewedThreadsTelemetryStates.add(key);
-		const props = this.getThreadsTelemetryProps({ thread_count: threadCount });
-		if (state === "locked") require_telemetry.trackThreadsLockedViewed(props);
-		else if (state === "empty_enabled") require_telemetry.trackThreadsEmptyEnabledViewed(props);
-		else require_telemetry.trackThreadsEnabledViewed(props);
-	}
 	renderThreadsLockedBackgroundMockup() {
 		return lit.html`
       <div
@@ -5469,7 +6560,7 @@ ${argsString}</pre
             "
           >
             <a
-              href=${this.getTalkToEngineerUrl()}
+              href=${this.getThreadsIntelligenceSignupUrl()}
               target="_blank"
               rel="noopener"
               style="
@@ -5479,68 +6570,338 @@ ${argsString}</pre
                 justify-content: center;
                 gap: 6px;
                 border-radius: 6px;
-                background: #010507;
+                border: 1px solid #dbdbe5;
+                background: #ffffff;
                 padding: 8px 12px;
                 font-size: 12px;
                 font-weight: 600;
-                color: #ffffff;
+                color: #57575b;
                 text-decoration: none;
               "
-              @click=${this.handleThreadsTalkToEngineerClick}
+              @click=${this.handleThreadsIntelligenceSignupClick}
             >
-              Talk to an Engineer
+              Sign up for Intelligence
             </a>
-            <a
-              href=${this.getIntelligenceSignupUrl()}
-              target="_blank"
-              rel="noopener"
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* Renders the realtime-connection indicator in the memory-store header.
+	* Only `"connected"` shows the live (green-dot) state; `"connecting"` shows a
+	* muted amber "reconnecting" and `"unavailable"` a muted grey "offline", so
+	* the indicator never claims "live" over a frozen snapshot once the realtime
+	* socket has permanently given up.
+	*/
+	renderMemoryRealtimeIndicator() {
+		const status = this._memoriesRealtimeStatus;
+		const connected = status === "connected";
+		return lit.html`
+      <span
+        style="
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 10px;
+          font-weight: 500;
+          color: ${connected ? "#57575b" : "#838389"};
+        "
+      >
+        <span
+          style="
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: ${connected ? "#22c55e" : status === "connecting" ? "#f59e0b" : "#9ca3af"};
+          "
+        ></span>
+        ${status === "connected" ? "live" : status === "connecting" ? "reconnecting" : "offline"}
+      </span>
+    `;
+	}
+	renderMemoriesView() {
+		if (!this.core?.intelligence || !this._memoriesAvailable) return lit.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="
-                display: inline-flex;
-                min-height: 34px;
-                align-items: center;
+                margin: 0 auto 18px;
+                display: flex;
                 justify-content: center;
-                gap: 6px;
-                border-radius: 6px;
-                border: 1px solid #dbdbe5;
-                background: #ffffff;
-                padding: 8px 12px;
-                font-size: 12px;
+              "
+            >
+              <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;
+              "
+            >
+              Long-term memory
+            </h2>
+            <p
+              style="
+                margin: 0 auto 18px;
+                max-width: 380px;
+                font-size: 13px;
+                line-height: 1.55;
                 color: #57575b;
-                text-decoration: none;
               "
-              @click=${this.handleThreadsIntelligenceSignupClick}
             >
-              Sign up for Intelligence
-            </a>
+              ${this._memoryStoreUnsupported ? "Long-term memory isn't available in this version of the @copilotkit SDK. Upgrade @copilotkit/core (and @copilotkit/react) to a version that supports memory." : "Long-term memory isn't enabled on this deployment."}
+            </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>
+      `;
+		if (this._memoriesError && this._memories.length === 0) return lit.html`
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            color: #838389;
+          "
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#c0333a"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <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>
+          <span style="font-size: 13px; color: #c0333a;">
+            Failed to load memories
+          </span>
+          <span
+            style="
+              max-width: 320px;
+              text-align: center;
+              font-size: 11px;
+              line-height: 1.5;
+              color: #c0333a;
+            "
+          >
+            ${this._memoriesError.message}
+          </span>
+        </div>
+      `;
+		if (this._memoriesLoading && this._memories.length === 0) return lit.html`
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            color: #838389;
+          "
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#c0c0c8"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          <span style="font-size: 13px">Loading memories…</span>
+        </div>
+      `;
+		return lit.html`
+      <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
+        <div class="cpk-section-header" style="display:flex;align-items:center;justify-content:space-between;">
+          <h4>Learning</h4>
+          <div style="display:flex;align-items:center;gap:6px;">
+            ${this.renderMemoryRealtimeIndicator()}
+            <span
+              style="
+                font-size: 11px;
+                font-weight: 500;
+                color: #57575b;
+                background: rgba(0,0,0,0.07);
+                border-radius: 9999px;
+                padding: 1px 7px;
+              "
+            >
+              ${this._memories.length}
+            </span>
+          </div>
+        </div>
+        ${this._memoriesError ? lit.html`
+                <div
+                  role="alert"
+                  style="
+                    display: flex;
+                    align-items: flex-start;
+                    gap: 8px;
+                    flex-shrink: 0;
+                    border-bottom: 1px solid #f1c7c9;
+                    background: #fdf3f3;
+                    padding: 8px 12px;
+                    color: #c0333a;
+                    font-size: 12px;
+                    line-height: 1.45;
+                  "
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#c0333a"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="flex-shrink:0;margin-top:1px;"
+                  >
+                    <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>
+                  <span>Action failed: ${this._memoriesError.message}</span>
+                </div>
+              ` : lit.nothing}
+        <div style="flex:1;min-height:0;overflow:hidden;">
+          <cpk-memory-list
+            style="height:100%;"
+            .memories=${this._memories}
+          ></cpk-memory-list>
+        </div>
       </div>
     `;
 	}
 	renderThreadsView() {
 		if (!this.areThreadEndpointsAvailable()) return this.renderThreadsLockedView();
-		const displayThreads = this.selectedContext === "all-agents" ? this._threads : this._threadsByAgent.get(this.selectedContext) ?? [];
-		let threadsErrorMessage = null;
-		if (this.selectedContext === "all-agents") threadsErrorMessage = this._threadsErrorByAgent.values().next().value?.message ?? null;
-		else threadsErrorMessage = this._threadsErrorByAgent.get(this.selectedContext)?.message ?? null;
-		const selectedThread = this.selectedThreadId != null ? displayThreads.find((t) => t.id === this.selectedThreadId) ?? null : null;
+		const { displayThreads, threadsErrorMessage } = this.getActiveThreadsState();
+		const showingExamples = this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage);
+		const visibleThreads = this.getVisibleThreads(displayThreads, threadsErrorMessage);
+		if (showingExamples) this.trackThreadsExampleViewedOnce();
+		const selectedThread = this.selectedThreadId != null ? visibleThreads.find((t) => t.id === this.selectedThreadId) ?? null : null;
+		const selectedThreadIsExample = this.isExampleThreadId(selectedThread?.id);
 		if (!threadsErrorMessage) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled", displayThreads.length);
 		return lit.html`
       <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
-        <div
-          style="display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid #DBDBE5;background:#ffffff;padding:8px 12px;flex-shrink:0;"
-        >
-          <a
-            href=${this.getTalkToEngineerUrl()}
-            target="_blank"
-            rel="noopener"
-            style="display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
-            @click=${this.handleTalkToEngineerClick}
-          >
-            Talk to an Engineer
-          </a>
-        </div>
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
           <!-- Left sidebar: thread list -->
           <div
@@ -5548,12 +6909,11 @@ ${argsString}</pre
           >
             <cpk-thread-list
               style="height:100%;"
-              .threads=${displayThreads}
+              .threads=${visibleThreads}
               .selectedThreadId=${this.selectedThreadId}
               .errorMessage=${threadsErrorMessage}
               @threadSelected=${(e) => {
-			this.selectedThreadId = e.detail;
-			this.requestUpdate();
+			this.handleThreadsThreadSelected(e.detail, showingExamples);
 		}}
             ></cpk-thread-list>
           </div>
@@ -5568,18 +6928,20 @@ ${argsString}</pre
           ></div>
 
           <!-- Center + right: thread details or empty state -->
-          <div style="flex:1;min-width:0;overflow:hidden;display:flex;">
+          <div style="flex:1;min-width:0;overflow:hidden;display:flex;position:relative;">
             ${selectedThread ? lit.html`<cpk-thread-details
                     style="flex:1;min-width:0;"
                     .threadId=${selectedThread.id}
                     .thread=${selectedThread}
+                    .provider=${selectedThreadIsExample ? this.getExampleThreadProvider(selectedThread.id) : null}
                     .runtimeUrl=${this._core?.runtimeUrl ?? ""}
                     .headers=${this._core?.headers ?? {}}
-                    .threadInspectionAvailable=${this._core?.threadEndpoints?.inspect !== false}
+                    .threadInspectionAvailable=${selectedThreadIsExample || this._core?.threadEndpoints?.inspect !== false}
                     .liveMessageVersion=${this.liveMessageVersion.get(selectedThread.id) ?? 0}
                     .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                     .agentEventsInput=${this.agentEvents.get(selectedThread.agentId) ?? []}
-                  ></cpk-thread-details>` : lit.html`
+                  ></cpk-thread-details>
+                  ${selectedThreadIsExample ? this.renderThreadsExampleTour() : lit.nothing}` : showingExamples ? this.renderThreadsExampleOverview() : lit.html`
                     <div
                       style="
                         flex: 1;
@@ -6135,6 +7497,10 @@ ${prettyEvent}</pre
 			if (previousMenu !== "threads" && !this.core?.telemetryDisabled) require_telemetry.trackThreadsTabClicked(this.getThreadsTelemetryProps());
 			this.autoSelectLatestThread();
 		}
+		if (key === "memories") {
+			this.ensureMemorySubscription();
+			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) require_telemetry.trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
+		}
 		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
 			const scroller = this.shadowRoot?.getElementById("cpk-main-scroll");
 			if (scroller) scroller.scrollTop = 0;