@copilotkit/web-inspector 1.62.1 → 1.62.2-canary.1783457132

package/dist/index.umd.js

@@ -191,7 +191,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region package.json
-	var version = "1.62.1";
+	var version = "1.62.2-canary.1783457132";
 
 //#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
@@ -772,6 +776,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._stateError = null;
 			this._expandedTools = /* @__PURE__ */ new Set();
 			this._expandedMessages = /* @__PURE__ */ new Set();
+			this._expandedTimelineDetails = /* @__PURE__ */ new Set();
+			this._expandedRawEvents = /* @__PURE__ */ new Set();
 			this._showDetailPanel = false;
 			this._detailPanelWidth = 250;
 			this._eventsNotAvailable = false;
@@ -920,6 +926,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._liveEventsWithSourceIndexCache = null;
 			this._expandedTools = /* @__PURE__ */ new Set();
 			this._expandedMessages = /* @__PURE__ */ new Set();
+			this._expandedTimelineDetails = /* @__PURE__ */ new Set();
+			this._expandedRawEvents = /* @__PURE__ */ new Set();
 			(_this$_metadataAbort = this._metadataAbort) === null || _this$_metadataAbort === void 0 || _this$_metadataAbort.abort();
 			this._metadataAbort = null;
 			(_this$_messagesAbort2 = this._messagesAbort) === null || _this$_messagesAbort2 === void 0 || _this$_messagesAbort2.abort();
@@ -1474,10 +1482,42 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			else next.add(id);
 			this._expandedMessages = next;
 		}
+		toggleTimelineDetails(id) {
+			const next = new Set(this._expandedTimelineDetails);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			this._expandedTimelineDetails = next;
+		}
+		expandTimelineDetails(ids) {
+			this._expandedTimelineDetails = new Set([...this._expandedTimelineDetails, ...ids]);
+		}
+		collapseTimelineDetails(ids) {
+			const next = new Set(this._expandedTimelineDetails);
+			for (const id of ids) next.delete(id);
+			this._expandedTimelineDetails = next;
+		}
+		toggleRawEventDetails(id) {
+			const next = new Set(this._expandedRawEvents);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			this._expandedRawEvents = next;
+		}
+		expandRawEventDetails(ids) {
+			this._expandedRawEvents = new Set([...this._expandedRawEvents, ...ids]);
+		}
+		collapseRawEventDetails(ids) {
+			const next = new Set(this._expandedRawEvents);
+			for (const id of ids) next.delete(id);
+			this._expandedRawEvents = next;
+		}
+		rawEventId(event) {
+			var _ref, _event$sourceIndex2;
+			return `raw-event-${(_ref = (_event$sourceIndex2 = event.sourceIndex) !== null && _event$sourceIndex2 !== void 0 ? _event$sourceIndex2 : event.timestamp) !== null && _ref !== void 0 ? _ref : event.type}`;
+		}
 		get activeEvents() {
-			var _ref, _this$_fetchedEvents, _this$_liveEventsWith;
+			var _ref2, _this$_fetchedEvents, _this$_liveEventsWith;
 			if (this._eventsNotAvailable) return [];
-			const events = (_ref = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref !== void 0 ? _ref : [];
+			const events = (_ref2 = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref2 !== void 0 ? _ref2 : [];
 			if (events.every((event) => event.sourceIndex != null)) return events;
 			if (((_this$_liveEventsWith = this._liveEventsWithSourceIndexCache) === null || _this$_liveEventsWith === void 0 ? void 0 : _this$_liveEventsWith.events) === events) return this._liveEventsWithSourceIndexCache.indexedEvents;
 			const indexedEvents = events.map((event, index) => event.sourceIndex == null ? {
@@ -1491,9 +1531,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			return indexedEvents;
 		}
 		get activeState() {
-			var _ref2, _this$_fetchedState;
+			var _ref3, _this$_fetchedState;
 			if (this._stateNotAvailable) return null;
-			return (_ref2 = (_this$_fetchedState = this._fetchedState) !== null && _this$_fetchedState !== void 0 ? _this$_fetchedState : this.agentStateInput) !== null && _ref2 !== void 0 ? _ref2 : null;
+			return (_ref3 = (_this$_fetchedState = this._fetchedState) !== null && _this$_fetchedState !== void 0 ? _this$_fetchedState : this.agentStateInput) !== null && _ref3 !== void 0 ? _ref3 : null;
 		}
 		hasRenderableState() {
 			const s = this.activeState;
@@ -1504,8 +1544,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			return id.length > 20 ? id.slice(0, 8) + "…" : id;
 		}
 		get metadata() {
-			var _ref3, _this$_fetchedMetadat;
-			return (_ref3 = (_this$_fetchedMetadat = this._fetchedMetadata) !== null && _this$_fetchedMetadat !== void 0 ? _this$_fetchedMetadat : this.thread) !== null && _ref3 !== void 0 ? _ref3 : null;
+			var _ref4, _this$_fetchedMetadat;
+			return (_ref4 = (_this$_fetchedMetadat = this._fetchedMetadata) !== null && _this$_fetchedMetadat !== void 0 ? _this$_fetchedMetadat : this.thread) !== null && _ref4 !== void 0 ? _ref4 : null;
 		}
 		fmtTime(dateStr) {
 			if (!dateStr) return "—";
@@ -1601,22 +1641,73 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					value: metadata === null || metadata === void 0 ? void 0 : metadata.status
 				}
 			].filter((pill) => pill.value != null && pill.value !== "");
-			if (pills.length === 0) return lit.nothing;
+			const bulkControls = this.renderActiveBulkControls();
+			if (pills.length === 0 && bulkControls === lit.nothing) return lit.nothing;
 			return lit.html`
       <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
-        ${pills.map((pill) => {
+        <div class="cpk-td__metadata-pills">
+          ${pills.map((pill) => {
 				var _pill$value;
 				return lit.html`
-            <span class="cpk-td__metadata-pill" title=${(_pill$value = pill.value) !== null && _pill$value !== void 0 ? _pill$value : ""}>
-              <span class="cpk-td__metadata-label">${pill.label}</span>
-              <span class="cpk-td__metadata-value"
-                >${this.shortId(pill.value)}</span
-              >
-            </span>
-          `;
+              <span class="cpk-td__metadata-pill" title=${(_pill$value = pill.value) !== null && _pill$value !== void 0 ? _pill$value : ""}>
+                <span class="cpk-td__metadata-label">${pill.label}</span>
+                <span class="cpk-td__metadata-value"
+                  >${this.shortId(pill.value)}</span
+                >
+              </span>
+            `;
 			})}
+        </div>
+        ${bulkControls}
       </div>
     `;
+		}
+		renderActiveBulkControls() {
+			if (this._eventsNotAvailable) return lit.nothing;
+			if (this._tab === "raw-events") return this.renderRawEventBulkControls();
+			if (this._tab !== "timeline") return lit.nothing;
+			const detailIds = this.timelineItemsForEvents(this.activeEvents).filter((item) => item.details).map((item) => item.id);
+			if (detailIds.length <= 1) return lit.nothing;
+			return lit.html`<div class="cpk-td__timeline-toolbar">
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${detailIds.every((id) => this._expandedTimelineDetails.has(id))}
+        @click=${() => this.expandTimelineDetails(detailIds)}
+      >
+        Expand all
+      </button>
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${detailIds.every((id) => !this._expandedTimelineDetails.has(id))}
+        @click=${() => this.collapseTimelineDetails(detailIds)}
+      >
+        Collapse all
+      </button>
+    </div>`;
+		}
+		renderRawEventBulkControls() {
+			const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
+			if (eventIds.length <= 1) return lit.nothing;
+			return lit.html`<div class="cpk-td__timeline-toolbar">
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${eventIds.every((id) => this._expandedRawEvents.has(id))}
+        @click=${() => this.expandRawEventDetails(eventIds)}
+      >
+        Expand all
+      </button>
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${eventIds.every((id) => !this._expandedRawEvents.has(id))}
+        @click=${() => this.collapseRawEventDetails(eventIds)}
+      >
+        Collapse all
+      </button>
+    </div>`;
 		}
 		revealSourceEvent(sourceIndex) {
 			this._activatedTabs = new Set([...this._activatedTabs, "raw-events"]);
@@ -1649,7 +1740,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
       `;
 			}
 			const events = this.activeEvents;
-			const cachedTimeline = this.getCachedPanelTpl("timeline", [events]);
+			const cachedTimeline = this.getCachedPanelTpl("timeline", [events, this._expandedTimelineDetails]);
 			if (cachedTimeline) return cachedTimeline;
 			const timelineItems = this.timelineItemsForEvents(events);
 			if (timelineItems.length === 0) {
@@ -1665,14 +1756,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         </div>
       `;
 			}
-			return this.cachedPanelTpl("timeline", [events], () => {
-				return lit.html`${timelineItems.map((item) => this.renderTimelineItem(item))}`;
-			});
+			return this.cachedPanelTpl("timeline", [events, this._expandedTimelineDetails], () => lit.html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
 		}
 		renderTimelineItem(item) {
+			const isWarning = item.kind === "warning";
+			const detailsExpanded = this._expandedTimelineDetails.has(item.id);
 			return lit.html`
       <div
-        class="cpk-td__timeline-item ${item.kind === "warning" ? "cpk-td__timeline-item--warning" : ""}"
+        class="cpk-td__timeline-item ${isWarning ? "cpk-td__timeline-item--warning" : ""}"
       >
         <div class="cpk-td__timeline-header">
           <span class="cpk-td__timeline-kind"
@@ -1690,9 +1781,39 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
             >${formatTimestamp(item.timestamp)}</span
           >
         </div>
-        ${item.body ? lit.html`<div class="cpk-td__timeline-body">${item.body}</div>` : item.details ? lit.html`<pre class="cpk-td__timeline-body">
-${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.details))}</pre
-              >` : lit.nothing}
+        ${item.details ? lit.html`<button
+                type="button"
+                class="cpk-td__timeline-details-toggle"
+                aria-expanded=${detailsExpanded ? "true" : "false"}
+                @click=${() => this.toggleTimelineDetails(item.id)}
+              >
+                ${detailsExpanded ? lit.html`
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <path d="m6 9 6 6 6-6" />
+                        </svg>
+                      ` : lit.html`
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <path d="m9 18 6-6-6-6" />
+                        </svg>
+                      `}
+                <span>${detailsExpanded ? "Hide details" : "Show details"}</span>
+              </button>` : lit.nothing}
+        ${item.body ? lit.html`<div class="cpk-td__timeline-body">${item.body}</div>` : lit.nothing}
+        ${item.details && detailsExpanded ? lit.html`<pre class="cpk-td__timeline-body">${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.details))}</pre>` : lit.nothing}
       </div>
     `;
 		}
@@ -1949,10 +2070,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
           >
         </div>
       `;
-			return this.cachedPanelTpl("raw-events", [events], () => {
+			return this.cachedPanelTpl("raw-events", [events, this._expandedRawEvents], () => {
 				return lit.html`${events.map((event) => {
 					var _event$rawEvent;
 					const { bg, fg } = eventColors(event.type);
+					const eventId = this.rawEventId(event);
+					const detailsExpanded = this._expandedRawEvents.has(eventId);
 					return lit.html`
           <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
             <div class="cpk-td__event-header" style="background:${bg}">
@@ -1963,9 +2086,38 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
                 >${formatTimestamp(event.timestamp)}</span
               >
             </div>
-            <pre class="cpk-td__event-payload">
-${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent = event.rawEvent) !== null && _event$rawEvent !== void 0 ? _event$rawEvent : event))}</pre
+            <button
+              type="button"
+              class="cpk-td__timeline-details-toggle"
+              aria-expanded=${detailsExpanded ? "true" : "false"}
+              @click=${() => this.toggleRawEventDetails(eventId)}
             >
+              ${detailsExpanded ? lit.html`
+                      <svg
+                        aria-hidden="true"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="m6 9 6 6 6-6" />
+                      </svg>
+                    ` : lit.html`
+                      <svg
+                        aria-hidden="true"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="m9 18 6-6-6-6" />
+                      </svg>
+                    `}
+              <span>${detailsExpanded ? "Hide details" : "Show details"}</span>
+            </button>
+            ${detailsExpanded ? lit.html`<pre class="cpk-td__event-payload">${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent = event.rawEvent) !== null && _event$rawEvent !== void 0 ? _event$rawEvent : event))}</pre>` : lit.nothing}
           </div>
         `;
 				})}`;
@@ -2098,6 +2250,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 		_stateError: { state: true },
 		_expandedTools: { state: true },
 		_expandedMessages: { state: true },
+		_expandedTimelineDetails: { state: true },
+		_expandedRawEvents: { state: true },
 		_showDetailPanel: { state: true },
 		_detailPanelWidth: { state: true },
 		_eventsNotAvailable: { state: true },
@@ -2250,6 +2404,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 
     .cpk-td__metadata-strip {
       display: flex;
+      align-items: center;
       gap: 6px;
       flex-wrap: wrap;
       padding: 10px 16px;
@@ -2258,6 +2413,14 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
       flex-shrink: 0;
     }
 
+    .cpk-td__metadata-pills {
+      display: flex;
+      gap: 6px;
+      flex: 1;
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+
     .cpk-td__metadata-pill {
       display: inline-flex;
       align-items: center;
@@ -2552,13 +2715,44 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
     }
 
     .cpk-td__timeline-body {
-      padding: 9px 10px;
+      margin: 0;
+      padding: 0 10px 9px;
       font-size: 12px;
       line-height: 1.55;
       color: #57575b;
       white-space: pre-wrap;
       word-break: break-word;
-      border-top: 1px solid #e9e9ef;
+    }
+
+    .cpk-td__timeline-toolbar {
+      display: flex;
+      gap: 6px;
+      margin-left: auto;
+    }
+
+    .cpk-td__timeline-bulk-toggle {
+      margin: 0;
+      padding: 4px 8px;
+      border: 1px solid #dcdce8;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #36363a;
+      cursor: pointer;
+      font-family: "Inter", sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .cpk-td__timeline-bulk-toggle:hover {
+      border-color: rgba(85, 88, 178, 0.38);
+      background: #f7f7ff;
+      color: #010507;
+    }
+
+    .cpk-td__timeline-bulk-toggle:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
     }
 
     .cpk-td__source-link {
@@ -2579,6 +2773,34 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
       color: #010507;
     }
 
+    .cpk-td__timeline-details-toggle {
+      margin: 0;
+      padding: 5px 10px;
+      border: none;
+      background: #ffffff;
+      color: #5558b2;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-family: "Inter", sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.2;
+      width: 100%;
+    }
+
+    .cpk-td__timeline-details-toggle:hover {
+      background: #f7f7ff;
+      color: #010507;
+    }
+
+    .cpk-td__timeline-details-toggle svg {
+      width: 12px;
+      height: 12px;
+      stroke-width: 2;
+    }
+
     /* ── Generative UI ──────────────────────────────────────────────── */
     @keyframes cpk-genui-enter {
       from {
@@ -2785,17 +3007,362 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
       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;
@@ -3213,6 +3780,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 					key: "threads",
 					label: "Threads",
 					icon: "MessageSquare"
+				},
+				{
+					key: "memories",
+					label: "Learning",
+					icon: "Brain"
 				}
 			];
 		}
@@ -3240,6 +3812,15 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 				...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");
 		}
@@ -3284,9 +3865,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 			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;
@@ -3321,18 +3902,18 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 			}
 		}
 		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();
 		}
@@ -3410,12 +3991,76 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 			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;
@@ -3765,8 +4410,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 			return lit.html`
       <div class="mt-2 space-y-2">
         ${toolCalls.map((call, index) => {
-				var _ref4, _call$function$name, _call$function, _call$function2;
-				const functionName = (_ref4 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref4 !== void 0 ? _ref4 : "Unknown function";
+				var _ref5, _call$function$name, _call$function, _call$function2;
+				const functionName = (_ref5 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref5 !== void 0 ? _ref5 : "Unknown function";
 				const callId = typeof (call === null || call === void 0 ? void 0 : call.id) === "string" ? call.id : `tool-call-${index + 1}`;
 				const argsString = this.formatToolCallArguments((_call$function2 = call.function) === null || _call$function2 === void 0 ? void 0 : _call$function2.arguments);
 				return lit.html`
@@ -3930,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");
@@ -4628,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">
@@ -4666,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}`;
@@ -4680,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);
@@ -4982,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() {
@@ -5612,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");
@@ -5918,9 +6875,9 @@ ${prettyEvent}</pre
 			let currentSchema = schema;
 			let def = currentSchema._def;
 			while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
-				var _ref5;
+				var _ref6;
 				if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
-				currentSchema = (_ref5 = def.innerType) !== null && _ref5 !== void 0 ? _ref5 : currentSchema;
+				currentSchema = (_ref6 = def.innerType) !== null && _ref6 !== void 0 ? _ref6 : currentSchema;
 				if (!(currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema._def)) break;
 				def = currentSchema._def;
 			}
@@ -6185,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;
 			}
@@ -6294,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);
 				}