@copilotkit/web-inspector 1.62.2 → 1.62.3

package/dist/index.umd.js

@@ -191,7 +191,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region package.json
-	var version = "1.62.2";
+	var version = "1.62.3";
 
 //#endregion
 //#region src/lib/telemetry.ts
@@ -204,7 +204,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		threadsTalkToEngineerClicked: "oss.inspector.threads_talk_to_engineer_clicked",
 		talkToEngineerClicked: "oss.inspector.talk_to_engineer_clicked",
 		threadsEmptyEnabledViewed: "oss.inspector.threads_empty_enabled_viewed",
-		threadsEnabledViewed: "oss.inspector.threads_enabled_viewed"
+		threadsEnabledViewed: "oss.inspector.threads_enabled_viewed",
+		memoriesTabClicked: "oss.inspector.memories_tab_clicked"
 	};
 	const TELEMETRY_INGEST_URL = "https://telemetry.copilotkit.ai/ingest";
 	const TELEMETRY_DOCS_URL = "https://docs.copilotkit.ai/telemetry";
@@ -212,7 +213,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const PACKAGE_VERSION = version;
 	const FETCH_TIMEOUT_MS = 3e3;
 	function isThreadsTelemetryEvent(event) {
-		return event === TELEMETRY_EVENTS.threadsTabClicked || event === TELEMETRY_EVENTS.threadsLockedViewed || event === TELEMETRY_EVENTS.threadsIntelligenceSignupClicked || event === TELEMETRY_EVENTS.threadsTalkToEngineerClicked || event === TELEMETRY_EVENTS.talkToEngineerClicked || event === TELEMETRY_EVENTS.threadsEmptyEnabledViewed || event === TELEMETRY_EVENTS.threadsEnabledViewed;
+		return event === TELEMETRY_EVENTS.threadsTabClicked || event === TELEMETRY_EVENTS.threadsLockedViewed || event === TELEMETRY_EVENTS.threadsIntelligenceSignupClicked || event === TELEMETRY_EVENTS.threadsTalkToEngineerClicked || event === TELEMETRY_EVENTS.talkToEngineerClicked || event === TELEMETRY_EVENTS.threadsEmptyEnabledViewed || event === TELEMETRY_EVENTS.threadsEnabledViewed || event === TELEMETRY_EVENTS.memoriesTabClicked;
 	}
 	function getRuntimeUrlType(runtimeUrl) {
 		if (!runtimeUrl) return "missing";
@@ -291,6 +292,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	function trackThreadsEnabledViewed(props) {
 		track(TELEMETRY_EVENTS.threadsEnabledViewed, props);
 	}
+	function trackMemoriesTabClicked(props = {}) {
+		track(TELEMETRY_EVENTS.memoriesTabClicked, props);
+	}
 	/**
 	* Returns the inspector's anonymous distinct-ID for cross-domain
 	* propagation onto outbound banner-CTA links, or `null` when the user
@@ -3003,17 +3007,362 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       word-break: break-all;
       text-align: right;
     }
+  `;
+	var CpkMemoryList = class extends lit.LitElement {
+		constructor(..._args3) {
+			super(..._args3);
+			this.memories = [];
+			this.search = "";
+			this.kind = "all";
+			this.onSearchInput = (event) => {
+				this.search = event.target.value;
+			};
+			this.onKindClick = (event) => {
+				const seg = event.target.closest("[data-kind]");
+				if (!seg) return;
+				this.kind = seg.dataset["kind"];
+			};
+		}
+		/** 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>
+    `;
+		}
+	};
+	CpkMemoryList.properties = {
+		memories: { attribute: false },
+		search: { state: true },
+		kind: { state: true }
+	};
+	CpkMemoryList.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;
+    }
   `;
 	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(..._args3) {
-			super(..._args3);
+		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;
@@ -3431,6 +3780,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 					key: "threads",
 					label: "Threads",
 					icon: "MessageSquare"
+				},
+				{
+					key: "memories",
+					label: "Learning",
+					icon: "Brain"
 				}
 			];
 		}
@@ -3458,6 +3812,15 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				...extra
 			};
 		}
+		getMemoriesTelemetryProps() {
+			var _this$core9;
+			const distinctId = !((_this$core9 = this.core) === null || _this$core9 === void 0 ? void 0 : _this$core9.telemetryDisabled) ? getTelemetryDistinctIdForUrl() : null;
+			return {
+				posthog_distinct_id: distinctId !== null && distinctId !== void 0 ? distinctId : void 0,
+				memory_count: this._memories.length,
+				available: this._memoriesAvailable
+			};
+		}
 		getIntelligenceSignupUrl() {
 			return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
 		}
@@ -3502,9 +3865,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this._threads = [];
 		}
 		ensureOwnedThreadStore(agentId) {
-			var _this$core9, _core$intelligence;
+			var _this$core10, _core$intelligence;
 			if (this._ownedThreadStores.has(agentId)) return;
-			if ((_this$core9 = this.core) === null || _this$core9 === void 0 ? void 0 : _this$core9.getThreadStore(agentId)) return;
+			if ((_this$core10 = this.core) === null || _this$core10 === void 0 ? void 0 : _this$core10.getThreadStore(agentId)) return;
 			const core = this.core;
 			if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
 			if (!this.areThreadEndpointsAvailable()) return;
@@ -3539,18 +3902,18 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			}
 		}
 		removeOwnedThreadStore(agentId) {
-			var _this$core10;
+			var _this$core11;
 			const store = this._ownedThreadStores.get(agentId);
 			if (!store) return;
 			store.stop();
-			(_this$core10 = this.core) === null || _this$core10 === void 0 || _this$core10.unregisterThreadStore(agentId);
+			(_this$core11 = this.core) === null || _this$core11 === void 0 || _this$core11.unregisterThreadStore(agentId);
 			this._ownedThreadStores.delete(agentId);
 		}
 		teardownOwnedThreadStores() {
 			for (const [agentId, store] of this._ownedThreadStores) {
-				var _this$core11;
+				var _this$core12;
 				store.stop();
-				(_this$core11 = this.core) === null || _this$core11 === void 0 || _this$core11.unregisterThreadStore(agentId);
+				(_this$core12 = this.core) === null || _this$core12 === void 0 || _this$core12.unregisterThreadStore(agentId);
 			}
 			this._ownedThreadStores.clear();
 		}
@@ -3628,12 +3991,76 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			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() {
+			var _this$_memoryUnsub;
 			if (this.coreUnsubscribe) {
 				this.coreUnsubscribe();
 				this.coreUnsubscribe = null;
 			}
+			(_this$_memoryUnsub = this._memoryUnsub) === null || _this$_memoryUnsub === void 0 || _this$_memoryUnsub.call(this);
+			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;
@@ -4148,6 +4575,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");
@@ -4846,12 +5274,13 @@ ${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() {
-			var _this$core$telemetryD2, _this$core12;
-			const optedOut = (_this$core$telemetryD2 = (_this$core12 = this.core) === null || _this$core12 === void 0 ? void 0 : _this$core12.telemetryDisabled) !== null && _this$core$telemetryD2 !== void 0 ? _this$core$telemetryD2 : false;
+			var _this$core$telemetryD2, _this$core13;
+			const optedOut = (_this$core$telemetryD2 = (_this$core13 = this.core) === null || _this$core13 === void 0 ? void 0 : _this$core13.telemetryDisabled) !== null && _this$core$telemetryD2 !== void 0 ? _this$core$telemetryD2 : false;
 			return lit.html`
       <div class="flex h-full flex-col overflow-hidden">
         <div class="overflow-auto p-4">
@@ -4884,8 +5313,8 @@ ${argsString}</pre
     `;
 		}
 		trackBannerClickedOnce(opts) {
-			var _this$core13, _this$announcementCta;
-			if ((_this$core13 = this.core) === null || _this$core13 === void 0 ? void 0 : _this$core13.telemetryDisabled) return;
+			var _this$core14, _this$announcementCta;
+			if ((_this$core14 = this.core) === null || _this$core14 === void 0 ? void 0 : _this$core14.telemetryDisabled) return;
 			const id = this.announcementTimestamp;
 			if (!id) return;
 			const key = `${id}:${opts.cta}`;
@@ -4898,8 +5327,8 @@ ${argsString}</pre
 			});
 		}
 		trackThreadsViewStateOnce(state, threadCount) {
-			var _this$core14;
-			if ((_this$core14 = this.core) === null || _this$core14 === void 0 ? void 0 : _this$core14.telemetryDisabled) return;
+			var _this$core15;
+			if ((_this$core15 = this.core) === null || _this$core15 === void 0 ? void 0 : _this$core15.telemetryDisabled) return;
 			const key = `${state}:${this.getThreadServiceStatus()}`;
 			if (this.viewedThreadsTelemetryStates.has(key)) return;
 			this.viewedThreadsTelemetryStates.add(key);
@@ -5200,6 +5629,311 @@ ${argsString}</pre
           </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() {
+			var _this$core16;
+			if (!((_this$core16 = this.core) === null || _this$core16 === void 0 ? void 0 : _this$core16.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="
+                margin: 0 auto 18px;
+                display: flex;
+                justify-content: center;
+              "
+            >
+              <div
+                style="
+                  display: flex;
+                  height: 44px;
+                  width: 44px;
+                  align-items: center;
+                  justify-content: center;
+                  border: 1px solid #dfd6fb;
+                  border-radius: 8px;
+                  background: #eee6fe;
+                  color: #57575b;
+                  box-shadow: 0 8px 18px rgba(87, 87, 91, 0.14);
+                "
+              >
+                ${this.renderIcon("Lock")}
+              </div>
+            </div>
+            <h2
+              style="
+                margin: 0 0 8px;
+                font-size: 16px;
+                line-height: 1.35;
+                font-weight: 600;
+                color: #010507;
+              "
+            >
+              Long-term memory
+            </h2>
+            <p
+              style="
+                margin: 0 auto 18px;
+                max-width: 380px;
+                font-size: 13px;
+                line-height: 1.55;
+                color: #57575b;
+              "
+            >
+              ${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() {
@@ -5830,10 +6564,15 @@ ${prettyEvent}</pre
 				if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
 			}
 			if (key === "threads") {
-				var _this$core15;
-				if (previousMenu !== "threads" && !((_this$core15 = this.core) === null || _this$core15 === void 0 ? void 0 : _this$core15.telemetryDisabled)) trackThreadsTabClicked(this.getThreadsTelemetryProps());
+				var _this$core17;
+				if (previousMenu !== "threads" && !((_this$core17 = this.core) === null || _this$core17 === void 0 ? void 0 : _this$core17.telemetryDisabled)) trackThreadsTabClicked(this.getThreadsTelemetryProps());
 				this.autoSelectLatestThread();
 			}
+			if (key === "memories") {
+				var _this$core18;
+				this.ensureMemorySubscription();
+				if (previousMenu !== "memories" && !((_this$core18 = this.core) === null || _this$core18 === void 0 ? void 0 : _this$core18.telemetryDisabled)) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
+			}
 			if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
 				var _this$shadowRoot2;
 				const scroller = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.getElementById("cpk-main-scroll");
@@ -6403,8 +7142,8 @@ ${prettyEvent}</pre
     </div>`;
 		}
 		flushPendingBannerViewed() {
-			var _this$core16;
-			if (!this.pendingBannerViewed || ((_this$core16 = this.core) === null || _this$core16 === void 0 ? void 0 : _this$core16.telemetryDisabled)) {
+			var _this$core19;
+			if (!this.pendingBannerViewed || ((_this$core19 = this.core) === null || _this$core19 === void 0 ? void 0 : _this$core19.telemetryDisabled)) {
 				this.pendingBannerViewed = null;
 				return;
 			}
@@ -6512,11 +7251,11 @@ ${prettyEvent}</pre
 		}
 		appendRefParam(href, ref = "cpk-inspector") {
 			try {
-				var _this$core17;
+				var _this$core20;
 				const isRootRelative = href.startsWith("/") && !href.startsWith("//");
 				const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
 				if (!url.searchParams.has("ref")) url.searchParams.append("ref", ref);
-				if (!url.searchParams.has("posthog_distinct_id") && !((_this$core17 = this.core) === null || _this$core17 === void 0 ? void 0 : _this$core17.telemetryDisabled) && this.isCopilotKitDestination(url)) {
+				if (!url.searchParams.has("posthog_distinct_id") && !((_this$core20 = this.core) === null || _this$core20 === void 0 ? void 0 : _this$core20.telemetryDisabled) && this.isCopilotKitDestination(url)) {
 					const distinctId = getTelemetryDistinctIdForUrl();
 					if (distinctId) url.searchParams.append("posthog_distinct_id", distinctId);
 				}