@copilotkit/web-inspector 1.62.2 → 1.62.3

package/dist/index.mjs

@@ -3,13 +3,13 @@ import inspector_logo_default from "./assets/inspector-logo.mjs";
 import inspector_logo_icon_default from "./assets/inspector-logo-icon.mjs";
 import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, keepPositionWithinViewport, updateAnchorFromPosition, updateSizeFromElement } from "./lib/context-helpers.mjs";
 import { isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadInspectorState, saveInspectorState } from "./lib/persistence.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerViewed, trackMemoriesTabClicked, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked } from "./lib/telemetry.mjs";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { icons } from "lucide";
-import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectThreads, ɵselectThreadsError } from "@copilotkit/core";
+import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError } from "@copilotkit/core";
 
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
@@ -2627,16 +2627,365 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
     `;
 	}
 };
+var CpkMemoryList = class extends 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"];
+		};
+	}
+	static {
+		this.properties = {
+			memories: { attribute: false },
+			search: { state: true },
+			kind: { state: true }
+		};
+	}
+	static {
+		this.styles = 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 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 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 html`
+        <div class="cpk-ml__empty">
+          No memories match &ldquo;${q}&rdquo;.
+        </div>
+      `;
+		return html`
+      <div class="cpk-ml__empty">No ${this.kind} memories yet.</div>
+    `;
+	}
+	render() {
+		const filtered = this.filtered;
+		return 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) => 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) => 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() : 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 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;
@@ -3052,6 +3401,11 @@ var WebInspectorElement = class extends LitElement {
 				key: "threads",
 				label: "Threads",
 				icon: "MessageSquare"
+			},
+			{
+				key: "memories",
+				label: "Learning",
+				icon: "Brain"
 			}
 		];
 	}
@@ -3077,6 +3431,13 @@ var WebInspectorElement = class extends LitElement {
 			...extra
 		};
 	}
+	getMemoriesTelemetryProps() {
+		return {
+			posthog_distinct_id: (!this.core?.telemetryDisabled ? getTelemetryDistinctIdForUrl() : null) ?? void 0,
+			memory_count: this._memories.length,
+			available: this._memoriesAvailable
+		};
+	}
 	getIntelligenceSignupUrl() {
 		return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
 	}
@@ -3241,12 +3602,75 @@ var WebInspectorElement = class extends 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 = ɵselectMemories(ms);
+		this._memoriesLoading = ɵselectMemoriesIsLoading(ms);
+		this._memoriesError = ɵselectMemoriesError(ms);
+		this._memoriesAvailable = ɵselectMemoriesAvailable(ms);
+		this._memoriesRealtimeStatus = ɵselectMemoriesRealtimeStatus(ms);
+		const memSubs = [
+			memoryStore.select(ɵselectMemories).subscribe((v) => {
+				this._memories = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(ɵselectMemoriesIsLoading).subscribe((v) => {
+				this._memoriesLoading = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(ɵselectMemoriesError).subscribe((v) => {
+				this._memoriesError = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(ɵselectMemoriesAvailable).subscribe((v) => {
+				this._memoriesAvailable = v;
+				this.requestUpdate();
+			}),
+			memoryStore.select(ɵ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;
@@ -4469,6 +4893,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");
@@ -5164,6 +5589,7 @@ ${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 nothing;
 	}
@@ -5515,6 +5941,310 @@ ${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 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 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 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 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 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 ? 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>
+              ` : 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() {
@@ -6134,6 +6864,10 @@ ${prettyEvent}</pre
 			if (previousMenu !== "threads" && !this.core?.telemetryDisabled) trackThreadsTabClicked(this.getThreadsTelemetryProps());
 			this.autoSelectLatestThread();
 		}
+		if (key === "memories") {
+			this.ensureMemorySubscription();
+			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
+		}
 		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
 			const scroller = this.shadowRoot?.getElementById("cpk-main-scroll");
 			if (scroller) scroller.scrollTop = 0;