@copilotkit/web-inspector 1.70.1 → 1.70.2

package/dist/index.mjs

@@ -1,14 +1,17 @@
 import generated_default from "./styles/generated.mjs";
 import inspector_logo_default from "./assets/inspector-logo.mjs";
 import inspector_logo_kite_default from "./assets/inspector-logo-kite.mjs";
+import { deriveLearningViewState } from "./components/learning-view.mjs";
 import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, keepPositionWithinViewport, updateAnchorFromPosition, updateSizeFromElement } from "./lib/context-helpers.mjs";
 import { INSPECTOR_DISMISSAL_MAX_DURATION_MS, clearLegacyAnnouncementReadState, isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadAnnouncementPulsedTimestamp, loadAnnouncementReadTimestamp, loadInspectorDismissedUntil, loadInspectorState, saveAnnouncementPulsedTimestamp, saveAnnouncementReadTimestamp, saveInspectorDismissedUntil, saveInspectorState } from "./lib/persistence.mjs";
+import { clearLearningSetupMarker, learningSetupMarkerMatches, readLearningSetupMarker, subscribeToLearningSetupMarker, writeLearningSetupMarker } from "./lib/learning-setup.mjs";
+import { InspectorLearningUnsupportedError, fetchInspectorLearning } from "./lib/inspector-learning.mjs";
 import { buildPopOutFeatures, ensureBrandFont, openPopOutWindow } from "./lib/pop-out.mjs";
 import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
 import { buildHomeModel, homeFeatureImplementationPrompt, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
 import { INSPECTOR_GROUPS, INSPECTOR_NAV_SECTIONS, getGroupForMenu, isInspectorMenuKey, shouldUseIconRail } from "./lib/inspector-nav.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeFeaturePromptClicked, trackHomePromptCopied, trackHomeStoryBeatSelected, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackThreadsTryFromHereClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, learningCountBucket, learningDurationBucket, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeFeaturePromptClicked, trackHomePromptCopied, trackHomeStoryBeatSelected, trackHomeViewed, trackInspectorOpened, trackLearningEvidenceOpened, trackLearningPageChanged, trackLearningPaneViewed, trackLearningSetupPromptClicked, trackLearningSkillToggled, trackLearningSnapshotLoaded, trackLearningWebAppOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackThreadsTryFromHereClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
 import { createOnboardingPrompt, createOnboardingRunId } from "./lib/onboarding-prompt.mjs";
 import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
@@ -388,6 +391,52 @@ const INTELLIGENCE_STORY_CHAIN = [
 ];
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK = "The demo video is unavailable. Use the example threads to explore Messages, AG-UI Events, and State.";
+const THREADS_LOCKED_VIDEO_URL = "https://www.loom.com/embed/79817778d29e490c97225127d2f17b3a?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true&hide_speed=true";
+const LEARNING_LOCKED_VIDEO_URL = "https://www.loom.com/embed/2978fbfe42324e509057ac5fd46b7a70?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true&hide_speed=true";
+const THREADS_LOCKED_FEATURE_OUTLINE = [
+	{
+		icon: "MessagesSquare",
+		title: "The whole conversation comes back",
+		description: "Rich Threads restores the complete interaction, not just a transcript. Messages, tool calls, shared state, generated interfaces, and supported files return together when a user reopens the thread."
+	},
+	{
+		icon: "LayoutGrid",
+		title: "Generated UI stays in the thread",
+		description: "Cards, charts, A2UI surfaces, MCP Apps, and tool renderers remain part of the conversation. The demo above shows a generated spending chart returning after a reload."
+	},
+	{
+		icon: "RefreshCw",
+		title: "Return without starting over",
+		description: "Users can move across sessions and devices while thread lists stay synchronized across open tabs. Rich Threads replays missed events and reconnects to work already in progress."
+	},
+	{
+		icon: "Server",
+		title: "Infrastructure you do not have to rebuild",
+		description: "CopilotKit handles durable event storage, replay, synchronization, lifecycle APIs, and thread locks on one portable AG-UI history model. Use CopilotKit Cloud or deploy Intelligence in your own Kubernetes environment."
+	}
+];
+const LEARNING_LOCKED_FEATURE_OUTLINE = [
+	{
+		icon: "History",
+		title: "Memory across sessions",
+		description: "Keep useful facts, preferences, and decisions after the thread closes. Learning gives future conversations the context they need without asking users to repeat themselves."
+	},
+	{
+		icon: "Search",
+		title: "Recall by meaning",
+		description: "Surface relevant memories by what they mean, not by an exact phrase. Your agent can bring the right context into a new interaction even when the user asks in a completely different way."
+	},
+	{
+		icon: "Layers",
+		title: "Built-in structure",
+		description: "Turn raw interactions into organized topical, episodic, and operational knowledge. Learning separates enduring facts from individual experiences and useful instructions automatically."
+	},
+	{
+		icon: "Eye",
+		title: "Full visibility",
+		description: "Inspect exactly what your agent learned and trace each memory back to the threads that shaped it. Review the stored context instead of treating memory like a black box."
+	}
+];
 const THREADS_EXAMPLE_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
 const THREADS_EXAMPLE_AGENT_ID = "threads-feature";
 /** Keep one row per thread id when flattening per-agent stores. */
@@ -4853,6 +4902,21 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this._memoryUnsub = null;
 		this._memorySubscribed = false;
 		this._memoryStoreUnsupported = false;
+		this.learningSnapshot = null;
+		this.learningSnapshotScope = null;
+		this.learningProjectIdentity = null;
+		this.learningLoading = false;
+		this.learningRefreshing = false;
+		this.learningError = null;
+		this.learningSupported = false;
+		this.learningRequestGeneration = 0;
+		this.learningAbortController = null;
+		this.learningPollTimer = null;
+		this.learningPollFailureCount = 0;
+		this.learningSetupMarker = null;
+		this.learningSetupUnsubscribe = null;
+		this.learningPromptCopyState = "idle";
+		this.learningViewedState = null;
 		this._recallResults = null;
 		this._recallLoading = false;
 		this._recallError = null;
@@ -5089,10 +5153,158 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.resizeEdge = "se";
 		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.refreshLearningSnapshot = async (options = {}) => {
+			const core = this.core;
+			const runtimeUrl = core?.runtimeUrl;
+			this.learningSupported = Boolean(core?.inspectorLearning);
+			if (!core || !runtimeUrl || !this.learningSupported) {
+				this.clearLearningSnapshot();
+				this.requestUpdate();
+				this.trackLearningViewState();
+				return;
+			}
+			this.cancelLearningPoll();
+			const startedAt = performance.now();
+			let loadOutcome = "failure";
+			let loadedSkills = 0;
+			let loadedInsights = 0;
+			let loadedPendingThreads = 0;
+			let resetSkillsPage = false;
+			let resetInsightsPage = false;
+			const previousSnapshot = this.learningSnapshot;
+			const agentId = this.getLearningAgentId();
+			const requestContext = `${runtimeUrl.replace(/\/+$/u, "")}|${agentId ?? ""}`;
+			if (this.learningSnapshotScope && !this.learningSnapshotScope.startsWith(`${requestContext}|`)) this.clearLearningSnapshot();
+			const generation = ++this.learningRequestGeneration;
+			this.learningAbortController?.abort();
+			const controller = new AbortController();
+			this.learningAbortController = controller;
+			const preserve = options.preserve === true && this.learningSnapshot !== null;
+			this.learningLoading = !preserve;
+			this.learningRefreshing = preserve;
+			this.learningError = null;
+			this.requestUpdate();
+			try {
+				const snapshot = await fetchInspectorLearning({
+					runtimeUrl,
+					runtimeTransport: core.runtimeTransport,
+					request: {
+						...agentId ? { agentId } : {},
+						skillsPage: options.skillsPage ?? this.learningSnapshot?.skillsPage.page ?? 1,
+						insightsPage: options.insightsPage ?? this.learningSnapshot?.insightsPage.page ?? 1
+					},
+					fetch: core.ɵruntimeFetch,
+					headers: core.headers,
+					credentials: core.credentials,
+					signal: controller.signal
+				});
+				if (generation !== this.learningRequestGeneration) return;
+				if (snapshot.pendingThreadCount > 0 && !snapshot.links.runs || snapshot.pendingCandidateCount > 0 && !snapshot.links.candidates) throw new Error("Learning snapshot is missing a required web-app link.");
+				const containerId = snapshot.configuration.state === "configured" ? snapshot.configuration.container.id : "";
+				const previousContainerId = previousSnapshot?.configuration.state === "configured" ? previousSnapshot.configuration.container.id : "";
+				const scopeChanged = previousSnapshot !== null && (previousSnapshot.projectKey !== snapshot.projectKey || previousContainerId !== containerId);
+				const isBackgroundRefresh = options.skillsPage === void 0 && options.insightsPage === void 0;
+				resetSkillsPage = Boolean(isBackgroundRefresh && previousSnapshot && previousSnapshot.skillsPage.page > 1 && (scopeChanged || JSON.stringify([previousSnapshot.skillsPage.total, previousSnapshot.skillsPage.items.map((skill) => [skill.id, skill.revision])]) !== JSON.stringify([snapshot.skillsPage.total, snapshot.skillsPage.items.map((skill) => [skill.id, skill.revision])])));
+				resetInsightsPage = Boolean(isBackgroundRefresh && previousSnapshot && previousSnapshot.insightsPage.page > 1 && (scopeChanged || JSON.stringify([previousSnapshot.insightsPage.total, previousSnapshot.insightsPage.items.map((insight) => insight.id)]) !== JSON.stringify([snapshot.insightsPage.total, snapshot.insightsPage.items.map((insight) => insight.id)])));
+				this.learningSnapshot = snapshot;
+				loadOutcome = "success";
+				loadedSkills = snapshot.skillsPage.total;
+				loadedInsights = snapshot.insightsPage.total;
+				loadedPendingThreads = snapshot.pendingThreadCount;
+				this.learningSnapshotScope = `${requestContext}|${snapshot.projectKey}|${containerId}`;
+				this.learningError = null;
+				this.learningPollFailureCount = 0;
+				if (snapshot.configuration.state === "configured") {
+					clearLearningSetupMarker();
+					this.learningSetupMarker = null;
+				}
+			} catch (error) {
+				if (generation !== this.learningRequestGeneration || controller.signal.aborted) return;
+				if (error instanceof InspectorLearningUnsupportedError) {
+					loadOutcome = "unsupported";
+					this.learningSupported = false;
+					this.learningSnapshot = null;
+				} else {
+					this.learningError = error instanceof Error ? error.message : "Learning data is unavailable.";
+					this.learningPollFailureCount += 1;
+				}
+			} finally {
+				if (generation === this.learningRequestGeneration) {
+					this.learningLoading = false;
+					this.learningRefreshing = false;
+					this.learningAbortController = null;
+					if (!core.telemetryDisabled) trackLearningSnapshotLoaded({
+						outcome: loadOutcome,
+						duration_bucket: learningDurationBucket(performance.now() - startedAt),
+						skills_bucket: learningCountBucket(loadedSkills),
+						insights_bucket: learningCountBucket(loadedInsights),
+						pending_threads_bucket: learningCountBucket(loadedPendingThreads)
+					});
+					this.scheduleLearningPoll();
+					this.requestUpdate();
+					this.trackLearningViewState();
+					if (resetSkillsPage || resetInsightsPage) this.refreshLearningSnapshot({
+						preserve: true,
+						...resetSkillsPage ? { skillsPage: 1 } : {},
+						...resetInsightsPage ? { insightsPage: 1 } : {}
+					});
+				}
+			}
+		};
+		this.copyFeaturePromptToClipboard = async (service, event, onboardingRunId = createOnboardingRunId()) => {
+			const clipboard = this.getClipboard(event);
+			if (!clipboard?.writeText) return false;
+			try {
+				await clipboard.writeText(homeFeatureImplementationPrompt(service, { onboardingRunId }));
+				return true;
+			} catch {
+				return false;
+			}
+		};
+		this.handleLearningSetupCopy = async (event) => {
+			const service = this.getHomeFeaturePromptTarget("threads");
+			if (!service || !this.core?.runtimeUrl) return;
+			const copied = await this.copyFeaturePromptToClipboard(service, event, this.getOnboardingRunId());
+			if (!this.core.telemetryDisabled) trackLearningSetupPromptClicked({ outcome: copied ? "success" : "failure" });
+			if (!copied) {
+				this.learningPromptCopyState = "error";
+				this.requestUpdate();
+				return;
+			}
+			this.learningPromptCopyState = "copied";
+			this.learningSetupMarker = writeLearningSetupMarker({
+				runtimeUrl: this.core.runtimeUrl,
+				agentId: this.getLearningAgentId()
+			});
+			this.selectedMenu = "memories";
+			this.persistState();
+			this.requestUpdate();
+			this.refreshLearningSnapshot({ preserve: false });
+		};
+		this.handleLearningPage = (event) => {
+			const { section, page } = event.detail;
+			const currentPage = section === "skills" ? this.learningSnapshot?.skillsPage.page ?? 1 : this.learningSnapshot?.insightsPage.page ?? 1;
+			if (!this.core?.telemetryDisabled) trackLearningPageChanged({
+				section,
+				direction: page < currentPage ? "previous" : "next"
+			});
+			this.refreshLearningSnapshot({
+				preserve: true,
+				...section === "skills" ? { skillsPage: page } : { insightsPage: page }
+			});
+		};
+		this.handleLearningEvidence = (event) => {
+			this.focusThread({
+				threadId: event.detail.threadId,
+				...event.detail.messageId ? { messageId: event.detail.messageId } : {}
+			});
+		};
 		this.handleDocumentVisibilityChange = () => {
 			this.accountCtaMotionPaused = document.visibilityState !== "visible";
 			this.refreshInspectorDismissalState();
 			if (document.visibilityState === "visible" && !this.isOpen && !this.isInspectorDismissed) this.flushPendingSignalPulse();
+			if (document.visibilityState === "visible" && this.isOpen && this.selectedMenu === "memories") this.refreshLearningSnapshot({ preserve: true });
+			else this.cancelLearningPoll();
 			this.requestUpdate();
 		};
 		this.handlePillClick = (event) => {
@@ -5214,17 +5426,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				feature_id: service.id,
 				onboarding_run_id: onboardingRunId
 			});
-			const clipboard = this.getClipboard(event);
-			if (!clipboard?.writeText) {
-				this.showHomeFeaturePromptCopyState(service.id, "error", generation);
-				return;
-			}
-			try {
-				await clipboard.writeText(homeFeatureImplementationPrompt(service, { onboardingRunId }));
-				this.showHomeFeaturePromptCopyState(service.id, "copied", generation);
-			} catch {
-				this.showHomeFeaturePromptCopyState(service.id, "error", generation);
-			}
+			if (await this.copyFeaturePromptToClipboard(service, event, onboardingRunId)) this.showHomeFeaturePromptCopyState(service.id, "copied", generation);
+			else this.showHomeFeaturePromptCopyState(service.id, "error", generation);
 		};
 		this.handleIntelligencePromptCopy = async (event) => {
 			this.clearIntelligencePromptReset();
@@ -6077,6 +6280,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this._threadsByAgent.set(agentId, threads);
 			this.rebuildFlattenedThreads();
 			this.autoSelectLatestThread();
+			if (this.selectedMenu === "memories" && this.shouldPollLearningSetup() && !this.learningLoading && !this.learningRefreshing) this.refreshLearningSnapshot({ preserve: true });
 			this.requestUpdate();
 		});
 		const statusSub = store.select(createThreadStoreStatusSelector()).subscribe(({ error, isLoading }) => {
@@ -6257,6 +6461,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.clearAllEventErrors();
 		const supportsInspectorMetadata = this.coreSupportsInspectorMetadata(core);
 		this.updateInspectorMetadataProjection(this.readCoreInspectorMetadata(core));
+		this.learningSupported = core.inspectorLearning;
+		this.learningProjectIdentity = JSON.stringify(this.inspectorMetadataProjection.identity ?? null);
 		this.coreSubscriber = {
 			onRuntimeConnectionStatusChanged: ({ status }) => {
 				this.runtimeStatus = status;
@@ -6264,16 +6470,22 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				const threadCapabilityWasEnabled = this.threadCapabilityEnabled === true;
 				this.synchronizeThreadCapability();
 				if (status === "connected") {
+					this.learningSupported = core.inspectorLearning;
 					if (!core.telemetryDisabled) {
 						ensureTelemetryDistinctId();
 						maybeShowDisclosure();
 					}
 					this.flushPendingWhatsNewTelemetry();
+					if (this.isOpen && this.selectedMenu === "memories") {
+						this.clearLearningSnapshot();
+						this.refreshLearningSnapshot({ preserve: false });
+					}
 					if (threadCapabilityWasEnabled && this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
 				} else {
 					this._threadsByAgent.clear();
 					this._threads = [];
 					this.clearInspectorUsageRefresh();
+					this.clearLearningSnapshot();
 				}
 				this.requestUpdate();
 			},
@@ -6288,6 +6500,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			...supportsInspectorMetadata ? { onInspectorMetadataChanged: ({ inspectorMetadata }) => {
 				if (this._core !== core) return;
 				this.updateInspectorMetadataProjection(inspectorMetadata);
+				const identity = JSON.stringify(this.inspectorMetadataProjection.identity ?? null);
+				if (identity !== this.learningProjectIdentity) {
+					this.learningProjectIdentity = identity;
+					this.clearLearningSnapshot();
+					if (this.isOpen && this.selectedMenu === "memories") this.refreshLearningSnapshot({ preserve: false });
+				}
 				this.requestUpdate();
 			} } : {},
 			onError: ({ code, error, context }) => {
@@ -6447,6 +6665,64 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this._recallQuery = "";
 		this.requestUpdate();
 	}
+	getLearningAgentId() {
+		if (this.selectedContext !== "all-agents" && this.core?.agents[this.selectedContext]) return this.selectedContext;
+		return null;
+	}
+	isLearningSetupActive() {
+		const runtimeUrl = this.core?.runtimeUrl;
+		if (!runtimeUrl) return false;
+		return learningSetupMarkerMatches(this.learningSetupMarker, runtimeUrl, this.getLearningAgentId());
+	}
+	trackLearningViewState() {
+		if (!this.isOpen || this.selectedMenu !== "memories" || this.core?.telemetryDisabled) return;
+		const state = deriveLearningViewState({
+			supported: this.learningSupported,
+			loading: this.learningLoading,
+			error: this.learningError,
+			snapshot: this.learningSnapshot,
+			setupActive: this.isLearningSetupActive()
+		});
+		if (state === this.learningViewedState) return;
+		this.learningViewedState = state;
+		trackLearningPaneViewed({ state });
+	}
+	cancelLearningPoll() {
+		if (this.learningPollTimer !== null) {
+			clearTimeout(this.learningPollTimer);
+			this.learningPollTimer = null;
+		}
+	}
+	shouldPollLearningSetup() {
+		if (!this.isOpen || this.selectedMenu !== "memories" || document.visibilityState !== "visible" || !this.learningSupported) return false;
+		const snapshot = this.learningSnapshot;
+		if (!snapshot) return this.isLearningSetupActive();
+		if (snapshot.configuration.state === "not_configured") return this.isLearningSetupActive();
+		return snapshot.configuration.state === "configured" && !snapshot.run.hasEverSucceeded && !snapshot.run.hasActiveRun && snapshot.pendingThreadCount === 0 && snapshot.skillsPage.total === 0 && snapshot.insightsPage.total === 0;
+	}
+	scheduleLearningPoll() {
+		this.cancelLearningPoll();
+		if (!this.shouldPollLearningSetup()) return;
+		const delay = this.learningPollFailureCount === 0 ? 5e3 : this.learningPollFailureCount === 1 ? 1e4 : 3e4;
+		this.learningPollTimer = setTimeout(() => {
+			this.learningPollTimer = null;
+			this.refreshLearningSnapshot({ preserve: true });
+		}, delay);
+	}
+	clearLearningSnapshot() {
+		this.cancelLearningRequest();
+		this.learningSnapshot = null;
+		this.learningSnapshotScope = null;
+		this.learningError = null;
+		this.learningLoading = false;
+		this.learningRefreshing = false;
+		this.cancelLearningPoll();
+	}
+	cancelLearningRequest() {
+		this.learningRequestGeneration += 1;
+		this.learningAbortController?.abort();
+		this.learningAbortController = null;
+	}
 	detachFromCore() {
 		this.threadCapabilityGeneration += 1;
 		this.threadCapabilityEnabled = null;
@@ -6473,6 +6749,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this._recallLoading = false;
 		this._recallError = null;
 		this._recallQuery = "";
+		this.clearLearningSnapshot();
+		this.learningSupported = false;
 		this.coreSubscriber = null;
 		this.runtimeStatus = null;
 		this.cancelThreadRefreshDebounce();
@@ -6499,6 +6777,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.eventCounter = 0;
 	}
 	processAgentsChanged(agents) {
+		const previousLearningAgentId = this.getLearningAgentId();
 		this.synchronizeThreadCapability();
 		const seenAgentIds = /* @__PURE__ */ new Set();
 		for (const agent of Object.values(agents)) {
@@ -6514,6 +6793,15 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.agentStates.delete(agentId);
 		}
 		this.updateContextOptions(seenAgentIds);
+		const learningAgentId = this.getLearningAgentId();
+		if (learningAgentId && this.core?.runtimeUrl && this.learningSetupMarker?.agentId === null && learningSetupMarkerMatches(this.learningSetupMarker, this.core.runtimeUrl, null)) this.learningSetupMarker = writeLearningSetupMarker({
+			runtimeUrl: this.core.runtimeUrl,
+			agentId: learningAgentId
+		});
+		if (previousLearningAgentId !== learningAgentId && this.isOpen && this.selectedMenu === "memories") {
+			this.clearLearningSnapshot();
+			this.refreshLearningSnapshot({ preserve: false });
+		}
 		this.refreshToolsSnapshot();
 		this.requestUpdate();
 	}
@@ -8865,6 +9153,11 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         height: 100%;
         object-fit: cover;
       }
+      .cpk-threads-overview-video-embed {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
 
       /* ── Header controls on the branded account strip ──────────── */
       .drag-handle > div[data-inspector-account-strip] button {
@@ -9168,6 +9461,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			const viteHot = import.meta.hot;
 			if (viteHot) viteHot.on("vite:beforeUpdate", this.handleAppBeforeUnload);
 			this.hydrateStateFromStorageEarly();
+			this.learningSetupMarker = readLearningSetupMarker();
+			this.learningSetupUnsubscribe = subscribeToLearningSetupMarker((marker) => {
+				this.learningSetupMarker = marker;
+				this.requestUpdate();
+				this.scheduleLearningPoll();
+			});
 			this.refreshInspectorDismissalState();
 			this.subscribeToSystemColorScheme();
 			this.exampleTourDismissed = this.readThreadsExampleTourDismissed();
@@ -9199,6 +9498,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 		this.clearIconRailContextCloseTimer();
 		this.unsubscribeFromInspectorThreadBridge();
+		this.learningSetupUnsubscribe?.();
+		this.learningSetupUnsubscribe = null;
+		this.clearLearningSnapshot();
 		this.stopIntelligenceStory();
 		this.clearIntelligencePromptReset();
 		this.homeFeaturePromptCopyGeneration += 1;
@@ -10488,10 +10790,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	getHomeFeaturePromptTarget(serviceId) {
 		return this.getHomeModel().services.find((service) => service.id === serviceId);
 	}
-	renderFeatureSetupPrompt(serviceId, className) {
+	renderFeatureSetupPrompt(serviceId, className, options) {
 		const service = this.getHomeFeaturePromptTarget(serviceId);
 		if (!service) return nothing;
-		const copyState = this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle";
+		const copyState = options?.copyState ?? (this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle");
 		const label = copyState === "copied" ? "Copied" : copyState === "error" ? "Copy blocked" : "Copy setup prompt";
 		return html`
       <button
@@ -10501,7 +10803,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         data-inspector-threads-setup-prompt=${service.id === "threads" ? "" : nothing}
         data-copy-state=${copyState}
         aria-label=${copyState === "copied" ? `${service.label} setup prompt copied` : copyState === "error" ? `Could not copy the ${service.label} setup prompt. Try again` : `Copy setup prompt for ${service.label}`}
-        @click=${(event) => this.handleHomeFeaturePromptCopy(service, event)}
+        @click=${(event) => options?.onClick ? options.onClick(event) : this.handleHomeFeaturePromptCopy(service, event)}
       >
         ${this.renderIcon(copyState === "copied" ? "Check" : "Copy")}
         ${label}
@@ -11527,6 +11829,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 		this.ensureAnnouncementLoading();
 		this.isOpen = true;
+		if (this.selectedMenu === "memories") this.refreshLearningSnapshot({ preserve: this.learningSnapshot !== null });
 		this.cancelGestureTail();
 		this.persistState();
 		this.trackOpened(source, hadUnseenAnnouncement, firstOpen, activeSignalAtOpen);
@@ -11544,6 +11847,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		if (this.isPoppedOut) return;
 		if (!this.isOpen) return;
 		this.isOpen = false;
+		this.cancelLearningPoll();
+		this.cancelLearningRequest();
+		this.learningViewedState = null;
 		if (this.dockMode !== "floating") this.removeDockStyles();
 		this.persistState();
 		this.updateHostTransform("button");
@@ -12445,15 +12751,11 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		});
 	}
 	getVisibleInspectorMetadataAction() {
-		const { threadsFooterAction, lockedAction } = this.inspectorMetadataProjection;
-		if (threadsFooterAction && !this.settingsOpen && this.selectedMenu === "threads") return {
+		const { threadsFooterAction } = this.inspectorMetadataProjection;
+		if (threadsFooterAction && !this.settingsOpen && this.selectedMenu === "threads" && this.areThreadEndpointsAvailable()) return {
 			action: threadsFooterAction,
 			placement: "threads-footer"
 		};
-		if (lockedAction && !this.settingsOpen && this.selectedMenu === "threads" && !this.areThreadEndpointsAvailable()) return {
-			action: lockedAction,
-			placement: "locked"
-		};
 	}
 	/** Return paired stable navigation keys, or neither for an invalid leaf. */
 	getMetadataTelemetryNavigation() {
@@ -12554,8 +12856,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		else if (state === "empty_enabled") trackThreadsEmptyEnabledViewed(props);
 		else trackThreadsEnabledViewed(props);
 	}
-	shouldRenderExampleThreads(locked, displayThreads, threadsErrorMessage, threadsLoading) {
-		return locked || !threadsErrorMessage && !threadsLoading && displayThreads.length === 0;
+	shouldRenderExampleThreads(displayThreads, threadsErrorMessage, threadsLoading) {
+		return !threadsErrorMessage && !threadsLoading && displayThreads.length === 0;
 	}
 	isExampleThreadId(threadId) {
 		return THREADS_EXAMPLE_THREADS.some((thread) => thread.id === threadId);
@@ -12966,46 +13268,114 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           ` : nothing}
     `;
 	}
-	renderThreadsExampleOverview(locked) {
-		const lockedCopy = locked ? this.getThreadsLockedCopy() : void 0;
-		const { lockedAction } = this.inspectorMetadataProjection;
+	renderThreadsExampleOverview() {
 		const onboardingAction = this.getThreadsEmptyOnboardingAction();
 		return html`
       <div class="cpk-threads-overview">
         <div class="cpk-threads-overview-content">
           <h2 class="cpk-threads-overview-title">
-            ${lockedCopy?.heading ?? "Threads are persistent, inspectable conversations"}
+            Threads are persistent, inspectable conversations
           </h2>
           ${this.renderThreadsExampleOverviewVideo()}
           <p class="cpk-threads-overview-copy">
-            ${lockedCopy?.description ?? "Take a tour with the example threads in the sidebar. Then, start chatting in your app to create the first real thread."}
+            Take a tour with the example threads in the sidebar. Then, start
+            chatting in your app to create the first real thread.
           </p>
-          ${locked ? this.renderRuntimeEntitlementDiagnostic(this.getRuntimeEntitlementDiagnostic()) : nothing}
           <div class="cpk-threads-overview-actions">
-            ${locked ? html`
-                  ${this.renderFeatureSetupPrompt("threads", "cpk-threads-overview-action cpk-threads-overview-action-primary")}
-                  ${lockedAction ? this.renderInspectorAction(lockedAction, "locked") : nothing}
-                ` : html`
-                  <a
-                    href=${this.getThreadsDocsUrl()}
-                    target="_blank"
-                    rel="noopener"
-                    class="cpk-threads-overview-action cpk-threads-overview-action-primary"
-                  >
-                    Learn how Threads work
-                  </a>
-                  <a
-                    href=${onboardingAction.href}
-                    target="_blank"
-                    rel="noopener"
-                    class="cpk-threads-overview-action cpk-threads-overview-action-secondary"
-                  >
-                    ${onboardingAction.label}
-                  </a>
-                `}
+            <a
+              href=${this.getThreadsDocsUrl()}
+              target="_blank"
+              rel="noopener"
+              class="cpk-threads-overview-action cpk-threads-overview-action-primary"
+            >
+              Learn how Threads work
+            </a>
+            <a
+              href=${onboardingAction.href}
+              target="_blank"
+              rel="noopener"
+              class="cpk-threads-overview-action cpk-threads-overview-action-secondary"
+            >
+              ${onboardingAction.label}
+            </a>
           </div>
         </div>
       </div>
+    `;
+	}
+	renderLockedFeatureOverview({ serviceId, featureName, heading, description, videoUrl, videoTitle, outlineItems, setupPrompt }) {
+		return html`
+      <div
+        class="cpk-locked-feature"
+        data-inspector-locked-feature=${serviceId}
+      >
+        <div class="cpk-locked-feature-layout">
+          <div class="cpk-locked-feature-hero">
+            <div class="cpk-locked-feature-copy">
+              <div class="cpk-locked-feature-name">
+                <span class="cpk-locked-feature-icon" aria-hidden="true">
+                  ${serviceId === "threads" ? unsafeHTML(this.customTabIcons.threads) : this.renderIcon("Brain")}
+                </span>
+                ${featureName}
+              </div>
+              <h2 class="cpk-locked-feature-title">${heading}</h2>
+              <p class="cpk-locked-feature-description">${description}</p>
+              <div class="cpk-threads-overview-actions">
+                ${this.renderFeatureSetupPrompt(setupPrompt?.serviceId ?? serviceId, "inspector-account-cta cpk-locked-feature-setup-cta", setupPrompt ? {
+			copyState: setupPrompt.copyState,
+			onClick: setupPrompt.onClick
+		} : void 0)}
+                <a
+                  data-inspector-locked-feature-talk=${serviceId}
+                  href=${this.getTalkToEngineerUrl()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Talk to an Engineer (opens in a new tab)"
+                  class="cpk-threads-overview-action cpk-threads-overview-action-secondary"
+                  @click=${this.handleThreadsTalkToEngineerClick}
+                >
+                  Talk to an Engineer
+                </a>
+              </div>
+            </div>
+            <div class="cpk-locked-feature-media">
+              <div class="cpk-threads-overview-video-frame cpk-locked-feature-video">
+                <iframe
+                  class="cpk-threads-overview-video-embed"
+                  data-inspector-feature-video=${serviceId}
+                  src=${videoUrl}
+                  title=${videoTitle}
+                  loading="lazy"
+                  allow="fullscreen; picture-in-picture"
+                  allowfullscreen
+                ></iframe>
+              </div>
+            </div>
+          </div>
+          <section
+            class="cpk-locked-feature-outline"
+            data-inspector-feature-outline=${serviceId}
+            aria-label="${featureName} capabilities"
+          >
+            <div class="cpk-locked-feature-outline-list">
+              ${outlineItems.map((item) => html`
+                  <section class="cpk-locked-feature-outline-item">
+                    <h3>
+                      <span
+                        class="cpk-locked-feature-outline-icon"
+                        aria-hidden="true"
+                      >
+                        ${this.renderIcon(item.icon)}
+                      </span>
+                      ${item.title}
+                    </h3>
+                    <p>${item.description}</p>
+                  </section>
+                `)}
+            </div>
+          </section>
+        </div>
+      </div>
     `;
 	}
 	renderThreadsExampleTour() {
@@ -13061,56 +13431,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           </div>
         </div>
       </div>
-    `;
-	}
-	renderThreadsLockedBackgroundMockup() {
-		return html`
-      <div aria-hidden="true" class="cpk-locked-preview">
-        <div class="cpk-locked-preview-sidebar">
-          ${[
-			{
-				width: 74,
-				accent: true
-			},
-			{ width: 92 },
-			{ width: 68 },
-			{ width: 84 },
-			{ width: 58 },
-			{ width: 76 }
-		].map((row) => html`
-              <div
-                class="cpk-locked-preview-row"
-                data-accent=${row.accent ? "true" : "false"}
-              >
-                <div
-                  class="cpk-locked-preview-bar cpk-locked-preview-row-title"
-                  style="--preview-width: ${row.width}%;"
-                ></div>
-                <div
-                  class="cpk-locked-preview-bar cpk-locked-preview-row-line"
-                ></div>
-                <div
-                  class="cpk-locked-preview-bar cpk-locked-preview-row-line"
-                ></div>
-              </div>
-            `)}
-        </div>
-        <div class="cpk-locked-preview-main">
-          <div class="cpk-locked-preview-bar cpk-locked-preview-heading"></div>
-          <div class="cpk-locked-preview-bar cpk-locked-preview-copy"></div>
-          <div class="cpk-locked-preview-bar cpk-locked-preview-copy"></div>
-          <div class="cpk-locked-preview-cards">
-            <div class="cpk-locked-preview-card"></div>
-            <div class="cpk-locked-preview-card"></div>
-          </div>
-          <div
-            class="cpk-locked-preview-bar cpk-locked-preview-footer-line"
-          ></div>
-          <div
-            class="cpk-locked-preview-bar cpk-locked-preview-footer-line"
-          ></div>
-        </div>
-      </div>
     `;
 	}
 	getThreadsLockedCopy() {
@@ -13119,89 +13439,18 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				heading: "Finish setting up Rich Threads",
 				description: "Copy this prompt into your coding agent to finish the setup."
 			};
-			case "none": return {
-				heading: "Enable Intelligence to inspect Threads.",
-				description: "Persist conversations and inspect saved thread history from the Inspector."
+			case "none":
+			case "unknown": return {
+				heading: "Production-grade chat threads without the complexity. Self hostable.",
+				description: "Chat threads that go beyond text with generative UI and multimodal inputs, built to replay missed events and stay in sync across tabs, sessions, and devices."
 			};
 			case "expired": return {
 				heading: "Renew Intelligence to inspect Threads.",
 				description: "Your Intelligence access has expired. Renew it to inspect saved thread history."
 			};
-			case "unknown": return {
-				heading: "Threads are unavailable.",
-				description: "This runtime does not expose Threads for the Inspector."
-			};
 		}
 	}
 	/**
-	* Prefer the Runtime's structured entitlement diagnostic and derive a
-	* compatibility diagnostic only when an older Core exposes legacy status.
-	*/
-	getRuntimeEntitlementDiagnostic() {
-		const runtimeEntitlements = this.core?.runtimeEntitlements;
-		if (runtimeEntitlements) return runtimeEntitlements.status === "ready" ? { status: runtimeEntitlements.status } : {
-			status: runtimeEntitlements.status,
-			error: runtimeEntitlements.error
-		};
-		switch (this.core?.licenseStatus) {
-			case "valid": return { status: "ready" };
-			case "expired": return {
-				status: "degraded",
-				error: {
-					code: "legacy_license_expired",
-					message: "Legacy Runtime license has expired.",
-					retryable: false
-				}
-			};
-			case "expiring": return {
-				status: "degraded",
-				error: {
-					code: "legacy_license_expiring",
-					message: "Legacy Runtime license is expiring.",
-					retryable: false
-				}
-			};
-			case "invalid": return {
-				status: "misconfigured",
-				error: {
-					code: "legacy_license_invalid",
-					message: "Legacy Runtime license is invalid.",
-					retryable: false
-				}
-			};
-			case "none":
-			case "unknown": return { status: "unavailable" };
-			default: return null;
-		}
-	}
-	/** Render exact Runtime entitlement correlation details without gating UI. */
-	renderRuntimeEntitlementDiagnostic(diagnostic) {
-		if (!diagnostic) return nothing;
-		return html`
-      <div
-        role="status"
-        data-runtime-entitlement-status=${diagnostic.status}
-        style="
-          margin: -8px auto 18px;
-          max-width: 380px;
-          font-size: 11px;
-          line-height: 1.5;
-          color: #57575b;
-        "
-      >
-        <div style="font-weight: 600;">
-          Runtime entitlement: ${diagnostic.status}
-        </div>
-        ${diagnostic.error ? html`
-              <div>${diagnostic.error.message}</div>
-              <div>Code: ${diagnostic.error.code}</div>
-              ${diagnostic.error.requestId ? html`<div>Request ID: ${diagnostic.error.requestId}</div>` : nothing}
-              ${diagnostic.error.traceId ? html`<div>Trace ID: ${diagnostic.error.traceId}</div>` : nothing}
-            ` : nothing}
-      </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
@@ -13236,44 +13485,64 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
     `;
 	}
 	renderMemoriesView() {
-		if (!this.getHomeModel().services.some((service) => service.id === "memory" && service.enabled)) return html`
-        <div class="cpk-memory-locked">
-          ${this.renderThreadsLockedBackgroundMockup()}
-          <div aria-hidden="true" class="cpk-memory-locked-scrim"></div>
-          <div class="cpk-memory-locked-content">
-            <div aria-hidden="true" class="cpk-memory-locked-icon-wrap">
-              <div class="cpk-memory-locked-icon">
-                ${this.renderIcon("Lock")}
-              </div>
-            </div>
-            <h2 class="cpk-memory-locked-title">Learning</h2>
-            <p class="cpk-memory-locked-copy">
-              ${this._memoryStoreUnsupported ? "Learning is unavailable in this version of the @copilotkit SDK. Upgrade @copilotkit/core (and @copilotkit/react) to a version that supports long-term memory." : "Learning turns durable information from agent interactions into reusable context. It isn't enabled on this deployment."}
-            </p>
-            <div class="cpk-memory-locked-actions">
-              ${this.renderFeatureSetupPrompt("memory", "cpk-memory-locked-action")}
-              <a
-                href=${this.getTalkToEngineerUrl()}
-                target="_blank"
-                rel="noopener"
-                class="cpk-memory-locked-action"
-                @click=${this.handleThreadsTalkToEngineerClick}
-              >
-                Talk to an Engineer
-              </a>
-              <a
-                href=${this.getIntelligenceSignupUrl()}
-                target="_blank"
-                rel="noopener"
-                class="cpk-memory-locked-action cpk-memory-locked-action-secondary"
-                @click=${this.handleThreadsIntelligenceSignupClick}
-              >
-                Sign up for Intelligence
-              </a>
-            </div>
-          </div>
-        </div>
-      `;
+		if (deriveLearningViewState({
+			supported: this.learningSupported,
+			loading: this.learningLoading,
+			error: this.learningError,
+			snapshot: this.learningSnapshot,
+			setupActive: this.isLearningSetupActive()
+		}) === "landing") return this.renderLockedFeatureOverview({
+			serviceId: "memory",
+			featureName: "Learning",
+			heading: "Turn every interaction into reusable context.",
+			description: "Learning captures durable information from agent interactions and brings it back when it matters, so your product gets more useful over time.",
+			videoUrl: LEARNING_LOCKED_VIDEO_URL,
+			videoTitle: "CopilotKit Learning overview",
+			outlineItems: LEARNING_LOCKED_FEATURE_OUTLINE,
+			setupPrompt: {
+				serviceId: "threads",
+				copyState: this.learningPromptCopyState,
+				onClick: (event) => void this.handleLearningSetupCopy(event)
+			}
+		});
+		return html`
+      <cpk-learning-view
+        data-color-scheme=${this.colorScheme}
+        .supported=${this.learningSupported}
+        .loading=${this.learningLoading}
+        .refreshing=${this.learningRefreshing}
+        .error=${this.learningError}
+        .snapshot=${this.learningSnapshot}
+        .setupActive=${this.isLearningSetupActive()}
+        .copyState=${this.learningPromptCopyState}
+        .setupPrompt=${this.getHomeFeaturePromptTarget("threads") ? homeFeatureImplementationPrompt(this.getHomeFeaturePromptTarget("threads"), { onboardingRunId: this.getOnboardingRunId() }) : ""}
+        @learning-retry=${() => this.refreshLearningSnapshot({ preserve: this.learningSnapshot !== null })}
+        @learning-copy-setup=${(event) => this.handleLearningSetupCopy(event)}
+        @learning-page=${(event) => this.handleLearningPage(event)}
+        @learning-open-evidence=${(event) => this.handleLearningEvidence(event)}
+        @learning-evidence-opened=${() => {
+			if (!this.core?.telemetryDisabled) trackLearningEvidenceOpened();
+		}}
+        @learning-skill-toggle=${(event) => {
+			if (!this.core?.telemetryDisabled) trackLearningSkillToggled({ action: event.detail.action });
+		}}
+        @learning-web-link=${(event) => {
+			if (!this.core?.telemetryDisabled) trackLearningWebAppOpened({ category: event.detail.category });
+		}}
+      ></cpk-learning-view>
+    `;
+	}
+	/** Legacy Memory rendering kept isolated while published Memory APIs remain. */
+	renderLegacyMemoriesView() {
+		if (!this.getHomeModel().services.some((service) => service.id === "memory" && service.enabled)) return this.renderLockedFeatureOverview({
+			serviceId: "memory",
+			featureName: "Learning",
+			heading: this._memoryStoreUnsupported ? "Upgrade to enable Learning" : "Turn every interaction into reusable context.",
+			description: this._memoryStoreUnsupported ? "Learning requires a newer version of @copilotkit/core and @copilotkit/react. Copy the setup prompt to upgrade and add long-term memory." : "Learning captures durable information from agent interactions and brings it back when it matters, so your product gets more useful over time.",
+			videoUrl: LEARNING_LOCKED_VIDEO_URL,
+			videoTitle: "CopilotKit Learning overview",
+			outlineItems: LEARNING_LOCKED_FEATURE_OUTLINE
+		});
 		if (this._memoriesError && this._memories.length === 0) return html`
         <div
           style="
@@ -13484,16 +13753,27 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
     `;
 	}
 	renderThreadsView() {
-		const locked = !this.areThreadEndpointsAvailable();
+		if (!this.areThreadEndpointsAvailable()) {
+			this.trackThreadsViewStateOnce("locked");
+			const lockedCopy = this.getThreadsLockedCopy();
+			return this.renderLockedFeatureOverview({
+				serviceId: "threads",
+				featureName: "Rich Threads",
+				heading: lockedCopy.heading,
+				description: lockedCopy.description,
+				videoUrl: THREADS_LOCKED_VIDEO_URL,
+				videoTitle: "Rich Threads overview",
+				outlineItems: THREADS_LOCKED_FEATURE_OUTLINE
+			});
+		}
 		const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
-		const loadingWithoutRows = !locked && threadsLoading && !threadsErrorMessage && displayThreads.length === 0;
-		const showingExamples = this.shouldRenderExampleThreads(locked, displayThreads, threadsErrorMessage, threadsLoading);
-		const visibleThreads = !locked && (threadsErrorMessage || loadingWithoutRows) ? [] : showingExamples ? THREADS_EXAMPLE_THREADS : displayThreads;
+		const loadingWithoutRows = threadsLoading && !threadsErrorMessage && displayThreads.length === 0;
+		const showingExamples = this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage, threadsLoading);
+		const visibleThreads = threadsErrorMessage || loadingWithoutRows ? [] : showingExamples ? THREADS_EXAMPLE_THREADS : displayThreads;
 		if (showingExamples) this.trackThreadsExampleViewedOnce();
 		const selectedThread = this.selectedThreadId != null ? visibleThreads.find((t) => t.id === this.selectedThreadId) ?? null : null;
 		const selectedThreadIsLocalExample = selectedThread !== null && selectedThread.id === this.selectedLocalExampleThreadId;
-		if (locked) this.trackThreadsViewStateOnce("locked");
-		else if (!threadsErrorMessage && (!threadsLoading || displayThreads.length > 0)) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled");
+		if (!threadsErrorMessage && (!threadsLoading || displayThreads.length > 0)) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled");
 		return html`
       <div
         style="display:flex;height:100%;overflow:hidden;flex-direction:column;"
@@ -13531,7 +13811,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           <div
             style="flex:1;min-width:0;overflow:hidden;display:flex;position:relative;"
           >
-            ${!locked && threadsErrorMessage ? html`
+            ${threadsErrorMessage ? html`
                   <div
                     role="alert"
                     style="
@@ -13594,7 +13874,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.handleTryFromHere(event.detail);
 		}}
                       ></cpk-thread-details>
-                      ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview(locked) : html`
+                      ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview() : html`
                         <div
                           style="
                         flex: 1;
@@ -14286,8 +14566,13 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 		if (key === "playground" && !this.playgroundAgent) this.startPlaygroundSession(false);
 		if (key === "memories") {
-			this.ensureMemorySubscription();
+			this.learningSupported = Boolean(this.core?.inspectorLearning);
+			if (previousMenu !== "memories" || this.learningSnapshot === null) this.refreshLearningSnapshot({ preserve: previousMenu === "memories" });
 			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
+		} else if (previousMenu === "memories") {
+			this.learningViewedState = null;
+			this.cancelLearningPoll();
+			this.cancelLearningRequest();
 		}
 		if (key === "home" && previousMenu !== "home") this.homeViewedThisOpen = false;
 		if (key === "ag-ui-events" || key === "agents") {
@@ -14321,6 +14606,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.expandedRows.clear();
 			this.autoSelectLatestThread();
 			if (this.selectedMenu === "playground") this.startPlaygroundSession(false);
+			else if (this.selectedMenu === "memories") {
+				this.clearLearningSnapshot();
+				this.refreshLearningSnapshot({ preserve: false });
+			}
 		}
 		this.contextMenuOpen = false;
 		this.persistState();