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

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";
@@ -427,6 +427,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		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;
@@ -492,6 +494,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 			_stateError: { state: true },
 			_expandedTools: { state: true },
 			_expandedMessages: { state: true },
+			_expandedTimelineDetails: { state: true },
+			_expandedRawEvents: { state: true },
 			_showDetailPanel: { state: true },
 			_detailPanelWidth: { state: true },
 			_eventsNotAvailable: { state: true },
@@ -706,6 +710,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 
     .cpk-td__metadata-strip {
       display: flex;
+      align-items: center;
       gap: 6px;
       flex-wrap: wrap;
       padding: 10px 16px;
@@ -714,6 +719,14 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       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;
@@ -1008,13 +1021,44 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
     }
 
     .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 {
@@ -1035,6 +1079,34 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       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 {
@@ -1292,6 +1364,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		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?.abort();
 		this._metadataAbort = null;
 		this._messagesAbort?.abort();
@@ -1820,6 +1894,37 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		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) {
+		return `raw-event-${event.sourceIndex ?? event.timestamp ?? event.type}`;
+	}
 	get activeEvents() {
 		if (this._eventsNotAvailable) return [];
 		const events = this._fetchedEvents ?? this.agentEventsInput ?? [];
@@ -1943,19 +2048,70 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 				value: metadata?.status
 			}
 		].filter((pill) => pill.value != null && pill.value !== "");
-		if (pills.length === 0) return nothing;
+		const bulkControls = this.renderActiveBulkControls();
+		if (pills.length === 0 && bulkControls === nothing) return nothing;
 		return html`
       <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
-        ${pills.map((pill) => html`
-            <span class="cpk-td__metadata-pill" title=${pill.value ?? ""}>
-              <span class="cpk-td__metadata-label">${pill.label}</span>
-              <span class="cpk-td__metadata-value"
-                >${this.shortId(pill.value)}</span
-              >
-            </span>
-          `)}
+        <div class="cpk-td__metadata-pills">
+          ${pills.map((pill) => html`
+              <span class="cpk-td__metadata-pill" title=${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 nothing;
+		if (this._tab === "raw-events") return this.renderRawEventBulkControls();
+		if (this._tab !== "timeline") return nothing;
+		const detailIds = this.timelineItemsForEvents(this.activeEvents).filter((item) => item.details).map((item) => item.id);
+		if (detailIds.length <= 1) return nothing;
+		return 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 nothing;
+		return 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"]);
@@ -1986,7 +2142,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       `;
 		}
 		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) {
@@ -2002,14 +2158,14 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
         </div>
       `;
 		}
-		return this.cachedPanelTpl("timeline", [events], () => {
-			return html`${timelineItems.map((item) => this.renderTimelineItem(item))}`;
-		});
+		return this.cachedPanelTpl("timeline", [events, this._expandedTimelineDetails], () => html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
 	}
 	renderTimelineItem(item) {
+		const isWarning = item.kind === "warning";
+		const detailsExpanded = this._expandedTimelineDetails.has(item.id);
 		return 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"
@@ -2027,9 +2183,39 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
             >${formatTimestamp(item.timestamp)}</span
           >
         </div>
-        ${item.body ? html`<div class="cpk-td__timeline-body">${item.body}</div>` : item.details ? html`<pre class="cpk-td__timeline-body">
-${unsafeHTML(highlightedJson(item.details))}</pre
-              >` : nothing}
+        ${item.details ? html`<button
+                type="button"
+                class="cpk-td__timeline-details-toggle"
+                aria-expanded=${detailsExpanded ? "true" : "false"}
+                @click=${() => this.toggleTimelineDetails(item.id)}
+              >
+                ${detailsExpanded ? 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>
+                      ` : 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>` : nothing}
+        ${item.body ? html`<div class="cpk-td__timeline-body">${item.body}</div>` : nothing}
+        ${item.details && detailsExpanded ? html`<pre class="cpk-td__timeline-body">${unsafeHTML(highlightedJson(item.details))}</pre>` : nothing}
       </div>
     `;
 	}
@@ -2286,9 +2472,11 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
           >
         </div>
       `;
-		return this.cachedPanelTpl("raw-events", [events], () => {
+		return this.cachedPanelTpl("raw-events", [events, this._expandedRawEvents], () => {
 			return html`${events.map((event) => {
 				const { bg, fg } = eventColors(event.type);
+				const eventId = this.rawEventId(event);
+				const detailsExpanded = this._expandedRawEvents.has(eventId);
 				return html`
           <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
             <div class="cpk-td__event-header" style="background:${bg}">
@@ -2299,9 +2487,38 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
                 >${formatTimestamp(event.timestamp)}</span
               >
             </div>
-            <pre class="cpk-td__event-payload">
-${unsafeHTML(highlightedJson(event.rawEvent ?? event))}</pre
+            <button
+              type="button"
+              class="cpk-td__timeline-details-toggle"
+              aria-expanded=${detailsExpanded ? "true" : "false"}
+              @click=${() => this.toggleRawEventDetails(eventId)}
             >
+              ${detailsExpanded ? 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>
+                    ` : 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 ? html`<pre class="cpk-td__event-payload">${unsafeHTML(highlightedJson(event.rawEvent ?? event))}</pre>` : nothing}
           </div>
         `;
 			})}`;
@@ -2410,16 +2627,365 @@ ${unsafeHTML(highlightedJson(event.rawEvent ?? event))}</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;
@@ -2835,6 +3401,11 @@ var WebInspectorElement = class extends LitElement {
 				key: "threads",
 				label: "Threads",
 				icon: "MessageSquare"
+			},
+			{
+				key: "memories",
+				label: "Learning",
+				icon: "Brain"
 			}
 		];
 	}
@@ -2860,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");
 	}
@@ -3024,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;
@@ -4252,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");
@@ -4947,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;
 	}
@@ -5298,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() {
@@ -5917,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;