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

package/src/__tests__/web-inspector.spec.ts

@@ -7,6 +7,7 @@ import type { ThreadDebuggerProvider } from "../index.js";
 import type { CopilotKitCore } from "@copilotkit/core";
 import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkit/core";
 import type { CopilotKitCoreSubscriber } from "@copilotkit/core";
+import type { Memory } from "@copilotkit/core";
 import type { AbstractAgent, AgentSubscriber } from "@ag-ui/client";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
@@ -101,6 +102,46 @@ function createMockAgent(
 
 // --- Mock core factory ---
 
+// --- Minimal no-op memory store stub ---
+// The inspector calls core.getMemoryStore() lazily, on first Memories-tab
+// activation (NOT on attach). All mock cores still expose this method so that
+// tests which do activate the tab don't hit a TypeError. The stub below seeds
+// the store with empty memories and available=true, which is the right default
+// for tests that don't exercise the memory feature.
+
+type MockMemoryStoreState = {
+  memories: never[];
+  isLoading: boolean;
+  isMutating: boolean;
+  error: null;
+  context: null;
+  sessionId: number;
+  available: boolean;
+  realtimeStatus: "connecting" | "connected" | "unavailable";
+};
+
+function createNoopMemoryStore() {
+  const state: MockMemoryStoreState = {
+    memories: [],
+    isLoading: false,
+    isMutating: false,
+    error: null,
+    context: null,
+    sessionId: 0,
+    available: true,
+    realtimeStatus: "connecting",
+  };
+  return {
+    getState: () => state,
+    select: <T>(selector: (s: MockMemoryStoreState) => T) => ({
+      subscribe: (cb: (v: T) => void) => {
+        cb(selector(state));
+        return { unsubscribe: () => undefined };
+      },
+    }),
+  };
+}
+
 type MockCore = {
   agents: Record<string, AbstractAgent>;
   context: Record<string, unknown>;
@@ -111,6 +152,7 @@ type MockCore = {
   };
   getThreadStores: () => Record<string, never>;
   getThreadStore: (agentId: string) => undefined;
+  getMemoryStore: () => ReturnType<typeof createNoopMemoryStore>;
 };
 
 function createMockCore(initialAgents: Record<string, AbstractAgent> = {}) {
@@ -130,6 +172,9 @@ function createMockCore(initialAgents: Record<string, AbstractAgent> = {}) {
     getThreadStore(_agentId: string) {
       return undefined;
     },
+    getMemoryStore() {
+      return createNoopMemoryStore();
+    },
   };
 
   return {
@@ -339,6 +384,7 @@ type ThreadDetailsInternals = {
   } | null;
   _expandedTools: Set<string>;
   _expandedMessages: Set<string>;
+  _expandedTimelineDetails: Set<string>;
   _stateNotAvailable: boolean;
   _eventsNotAvailable: boolean;
   _loadingMessages: boolean;
@@ -934,7 +980,22 @@ describe("CpkThreadInspector provider contract", () => {
       ?.click();
     await flushProviderWork(el);
 
+    const rawEvent = el.shadowRoot?.querySelector<HTMLElement>(
+      '.cpk-td__event[data-source-index="1"]',
+    );
+    expect(rawEvent?.textContent ?? "").toContain("Show details");
+    expect(rawEvent?.textContent ?? "").not.toContain("top-level-run");
+    expect(rawEvent?.textContent ?? "").not.toContain("sequence");
+    expect(rawEvent?.textContent ?? "").not.toContain("messageId");
+    expect(rawEvent?.textContent ?? "").not.toContain("hello");
+
+    rawEvent
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
     const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Hide details");
     expect(text).toContain("top-level-run");
     expect(text).toContain("sequence");
     expect(text).toContain("messageId");
@@ -1118,11 +1179,90 @@ describe("CpkThreadInspector provider contract", () => {
 
     expect(internals.activeTimelineItems).toHaveLength(1);
     expect(el.shadowRoot?.textContent ?? "").toContain("THREAD_STATE_WRITTEN");
-    expect(el.shadowRoot?.textContent ?? "").toContain("checkpointId");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Show details");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain("checkpointId");
     expect(el.shadowRoot?.textContent ?? "").toContain("Source event #1");
     expect(el.shadowRoot?.textContent ?? "").not.toContain(
       "No timeline events captured",
     );
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("checkpointId");
+  });
+
+  it("collapses structured timeline event details by default", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_STARTED",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: {
+            input: {
+              tools: [
+                {
+                  name: "generateSandboxedUi",
+                  description: "very chonky run-started payload",
+                },
+              ],
+            },
+          },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-chonky-run-started";
+    await flushProviderWork(el);
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Run started");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Show details");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain(
+      "very chonky run-started payload",
+    );
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Hide details");
+    expect(el.shadowRoot?.textContent ?? "").toContain(
+      "very chonky run-started payload",
+    );
+  });
+
+  it("shows expanded timeline details when an event also has a summary body", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_ERROR",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: {
+            message: "Tool failed",
+            errorCode: "ERR_TOOL_TIMEOUT",
+          },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-error-details";
+    await flushProviderWork(el);
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Tool failed");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Show details");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain("ERR_TOOL_TIMEOUT");
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Hide details");
+    expect(el.shadowRoot?.textContent ?? "").toContain("ERR_TOOL_TIMEOUT");
   });
 
   it("keeps the first-visible timeline intentional while provider message fallback is loading", async () => {
@@ -1306,6 +1446,7 @@ type HeaderMockCore = {
   getThreadStore: (agentId: string) => undefined;
   registerThreadStore: (agentId: string, store: unknown) => void;
   unregisterThreadStore: (agentId: string) => void;
+  getMemoryStore: () => ReturnType<typeof createNoopMemoryStore>;
 };
 
 function createHeaderMockCore(
@@ -1342,6 +1483,9 @@ function createHeaderMockCore(
     },
     registerThreadStore() {},
     unregisterThreadStore() {},
+    getMemoryStore() {
+      return createNoopMemoryStore();
+    },
   };
 
   const asCore = () => core as unknown as CopilotKitCore;
@@ -1677,3 +1821,1008 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     );
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────────
+// Wave 6 — Memories tab + cpk-memory-list coverage
+// ─────────────────────────────────────────────────────────────────────────
+//
+// 6.1  Helpers: makeCoreWithMemory / makeCoreNoIntelligence / mountMemories
+// 6.2  Subscription: inspector._memories is seeded from store
+// 6.3  Tab presence: "Learning" label appears in the rendered menu
+// 6.4  View states: locked teaser vs. enabled empty vs. enabled with cards
+// 6.5  cpk-memory-list: cards, kind filter, search filter, empty state
+// 6.6  Passive guard: inspector reads from core.getMemoryStore(), never creates its own
+
+// ── 6.1  Helpers ──────────────────────────────────────────────────────────
+
+type MemoryStoreState = {
+  memories: Memory[];
+  isLoading: boolean;
+  isMutating: boolean;
+  error: Error | null;
+  context: null;
+  sessionId: number;
+  available: boolean;
+  realtimeStatus: "connecting" | "connected" | "unavailable";
+};
+
+/**
+ * Returns a minimal mock memory store seeded with the given memories and
+ * availability flag. The `select(selector)` method returns an Observable-like
+ * that calls the subscriber once synchronously with the derived value, then
+ * never again — sufficient for the inspector's subscription wiring.
+ */
+function makeMockMemoryStore(
+  memories: Memory[],
+  available: boolean,
+  realtimeStatus: MemoryStoreState["realtimeStatus"] = "connected",
+): { store: ReturnType<typeof buildStore>; state: MemoryStoreState } {
+  const state: MemoryStoreState = {
+    memories,
+    isLoading: false,
+    isMutating: false,
+    error: null,
+    context: null,
+    sessionId: 0,
+    available,
+    realtimeStatus,
+  };
+
+  function buildStore() {
+    return {
+      getState: () => state,
+      select: <T>(selector: (s: MemoryStoreState) => T) => ({
+        subscribe: (cb: (v: T) => void) => {
+          cb(selector(state));
+          return { unsubscribe: () => undefined };
+        },
+      }),
+    };
+  }
+
+  const store = buildStore();
+  return { store, state };
+}
+
+type MemoryMockCore = {
+  agents: Record<string, AbstractAgent>;
+  context: Record<string, unknown>;
+  properties: Record<string, unknown>;
+  telemetryDisabled: boolean;
+  runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
+  intelligence: { wsUrl: string } | undefined;
+  subscribe: (subscriber: CopilotKitCoreSubscriber) => {
+    unsubscribe: () => void;
+  };
+  getThreadStores: () => Record<string, never>;
+  getThreadStore: (agentId: string) => undefined;
+  getMemoryStore: () => ReturnType<typeof makeMockMemoryStore>["store"];
+};
+
+/**
+ * Returns a mock core with an intelligence property set (so the memories view
+ * is not locked by the intelligence guard) and a memory store seeded with the
+ * supplied memories. Pass `available: false` to simulate memories being
+ * unavailable (which also locks the view).
+ */
+function makeCoreWithMemory(
+  memories: Memory[],
+  opts: {
+    available?: boolean;
+    telemetryDisabled?: boolean;
+    realtimeStatus?: MemoryStoreState["realtimeStatus"];
+  } = {},
+): MemoryMockCore {
+  const available = opts.available ?? true;
+  const { store } = makeMockMemoryStore(
+    memories,
+    available,
+    opts.realtimeStatus ?? "connected",
+  );
+
+  return {
+    agents: {},
+    context: {},
+    properties: {},
+    telemetryDisabled: opts.telemetryDisabled ?? false,
+    runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
+    // Intelligence present → locked teaser is NOT shown (unless available=false).
+    intelligence: { wsUrl: "wss://localhost" },
+    subscribe: (_subscriber: CopilotKitCoreSubscriber) => ({
+      unsubscribe: () => undefined,
+    }),
+    getThreadStores: () => ({}),
+    getThreadStore: (_agentId: string) => undefined,
+    getMemoryStore: () => store,
+  };
+}
+
+/**
+ * Returns a mock core that has NO intelligence property. Used to assert the
+ * locked teaser regardless of memory availability.
+ */
+function makeCoreNoIntelligence(): MemoryMockCore {
+  const { store } = makeMockMemoryStore([], true);
+
+  return {
+    agents: {},
+    context: {},
+    properties: {},
+    telemetryDisabled: false,
+    runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
+    intelligence: undefined,
+    subscribe: (_subscriber: CopilotKitCoreSubscriber) => ({
+      unsubscribe: () => undefined,
+    }),
+    getThreadStores: () => ({}),
+    getThreadStore: (_agentId: string) => undefined,
+    getMemoryStore: () => store,
+  };
+}
+
+/**
+ * Mounts a `<cpk-web-inspector>` with the given core, opens it, and switches
+ * to the memories tab. Returns the element ready for assertion.
+ */
+async function mountMemories(
+  core: MemoryMockCore,
+): Promise<WebInspectorElement> {
+  const el = new WebInspectorElement();
+  document.body.appendChild(el);
+  // CopilotKitCore is a full class — our mock covers what the inspector reads.
+  el.core = core as unknown as WebInspectorElement["core"];
+
+  // Open the inspector window so the tab content is rendered.
+  const internals = el as unknown as {
+    isOpen: boolean;
+    handleMenuSelect: (key: string) => void;
+  };
+  internals.isOpen = true;
+  internals.handleMenuSelect("memories");
+
+  await el.updateComplete;
+  return el;
+}
+
+// ── 6.2  Subscription ─────────────────────────────────────────────────────
+
+describe("WebInspectorElement memories — subscription", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      get length() {
+        return 0;
+      },
+      key: () => null,
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("seeds _memories from core.getMemoryStore() on Memories-tab activation", async () => {
+    const oneMemory: Memory = {
+      id: "m1",
+      kind: "topical",
+      scope: "user",
+      content: "Likes dogs",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    };
+
+    const core = makeCoreWithMemory([oneMemory]);
+    const el = await mountMemories(core);
+
+    const ids = (el as unknown as { _memories: Memory[] })._memories.map(
+      (m) => m.id,
+    );
+
+    expect(ids).toEqual(["m1"]);
+  });
+});
+
+// ── 6.3  Tab presence ─────────────────────────────────────────────────────
+
+describe("WebInspectorElement memories — tab presence", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      get length() {
+        return 0;
+      },
+      key: () => null,
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a Learning tab button in the inspector menu", async () => {
+    const core = makeCoreWithMemory([]);
+    const el = await mountMemories(core);
+
+    const buttons = Array.from(
+      el.shadowRoot?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+    );
+    const memoriesButton = buttons.find((btn) =>
+      btn.textContent?.trim().includes("Learning"),
+    );
+
+    expect(memoriesButton, "Learning tab button should render").toBeDefined();
+  });
+});
+
+// ── 6.4  View states ──────────────────────────────────────────────────────
+
+describe("WebInspectorElement memories — view states", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      get length() {
+        return 0;
+      },
+      key: () => null,
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders the locked teaser when intelligence is absent", async () => {
+    const core = makeCoreNoIntelligence();
+    const el = await mountMemories(core);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Long-term memory");
+    expect(text).toContain(
+      "Long-term memory isn't enabled on this deployment.",
+    );
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(
+      memoryList,
+      "cpk-memory-list should NOT render when locked",
+    ).toBeNull();
+  });
+
+  it("renders the locked teaser when memories are unavailable", async () => {
+    const core = makeCoreWithMemory([], { available: false });
+    const el = await mountMemories(core);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Long-term memory");
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(
+      memoryList,
+      "cpk-memory-list should NOT render when unavailable",
+    ).toBeNull();
+  });
+
+  it("renders cpk-memory-list with empty state when available and no memories", async () => {
+    const core = makeCoreWithMemory([], { available: true });
+    const el = await mountMemories(core);
+
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(
+      memoryList,
+      "cpk-memory-list should render when enabled",
+    ).not.toBeNull();
+
+    await (memoryList as unknown as { updateComplete: Promise<void> })
+      .updateComplete;
+    const listText = memoryList?.shadowRoot?.textContent ?? "";
+    expect(listText).toContain("No memories yet");
+  });
+
+  it("keeps the list rendered (not the full-screen error) when a mutation error arrives with memories present", async () => {
+    // INSP-2: a failed remove/update sets the store error while a valid list is
+    // already on screen. That must NOT blank the list with the full-screen
+    // "Failed to load memories" state — the error is surfaced inline instead.
+    const oneMemory: Memory = {
+      id: "m1",
+      kind: "topical",
+      scope: "user",
+      content: "Likes dogs",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    };
+
+    const core = makeCoreWithMemory([oneMemory]);
+    const el = await mountMemories(core);
+
+    // Simulate a mutation failure landing after the list is rendered.
+    (el as unknown as { _memoriesError: Error | null })._memoriesError =
+      new Error("could not delete memory");
+    el.requestUpdate();
+    await el.updateComplete;
+
+    // The list survives.
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(
+      memoryList,
+      "cpk-memory-list must remain rendered on a mutation error",
+    ).not.toBeNull();
+
+    const text = el.shadowRoot?.textContent ?? "";
+    // Inline, non-blocking error with distinct copy.
+    expect(text).toContain("Action failed: could not delete memory");
+    // The full-screen load-failure copy must NOT appear.
+    expect(text).not.toContain("Failed to load memories");
+  });
+
+  it("shows the full-screen load error only when no memories are loaded", async () => {
+    // INSP-2 counterpart: a snapshot-load failure (empty list) still shows the
+    // full-screen "Failed to load memories" state.
+    const core = makeCoreWithMemory([]);
+    const el = await mountMemories(core);
+
+    (el as unknown as { _memoriesError: Error | null })._memoriesError =
+      new Error("network down");
+    el.requestUpdate();
+    await el.updateComplete;
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Failed to load memories");
+    expect(text).toContain("network down");
+    expect(text).not.toContain("Action failed:");
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(memoryList).toBeNull();
+  });
+
+  it("shows the 'live' indicator only when realtime is connected", async () => {
+    const core = makeCoreWithMemory([], {
+      available: true,
+      realtimeStatus: "connected",
+    });
+    const el = await mountMemories(core);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("live");
+    expect(text).not.toContain("offline");
+    expect(text).not.toContain("reconnecting");
+  });
+
+  it("shows a muted 'reconnecting' indicator while realtime is connecting", async () => {
+    const core = makeCoreWithMemory([], {
+      available: true,
+      realtimeStatus: "connecting",
+    });
+    const el = await mountMemories(core);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("reconnecting");
+    // It must NOT claim "live" while still connecting.
+    expect(text).not.toMatch(/>\s*live\s*</);
+  });
+
+  it("shows a muted 'offline' indicator when realtime has permanently given up", async () => {
+    const core = makeCoreWithMemory([], {
+      available: true,
+      realtimeStatus: "unavailable",
+    });
+    const el = await mountMemories(core);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("offline");
+    // The frozen snapshot must NOT be labelled "live".
+    expect(text).not.toMatch(/>\s*live\s*</);
+  });
+
+  it("renders cpk-memory-list with a card when one memory is present", async () => {
+    const oneMemory: Memory = {
+      id: "m1",
+      kind: "topical",
+      scope: "user",
+      content: "Prefers dark mode",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    };
+
+    const core = makeCoreWithMemory([oneMemory]);
+    const el = await mountMemories(core);
+
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(memoryList, "cpk-memory-list should render").not.toBeNull();
+
+    await (memoryList as unknown as { updateComplete: Promise<void> })
+      .updateComplete;
+    const cards = memoryList?.shadowRoot?.querySelectorAll(".cpk-ml__card");
+    expect(cards?.length).toBe(1);
+  });
+});
+
+// ── 6.5  cpk-memory-list ──────────────────────────────────────────────────
+
+describe("cpk-memory-list", () => {
+  const threeMemories: Memory[] = [
+    {
+      id: "t1",
+      kind: "topical",
+      scope: "user",
+      content: "Likes cats",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    },
+    {
+      id: "e1",
+      kind: "episodic",
+      scope: "user",
+      content: "First login was on a Monday",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    },
+    {
+      id: "o1",
+      kind: "operational",
+      scope: "user",
+      content: "Deploys on Thursdays",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    },
+  ];
+
+  /** Create and mount a standalone cpk-memory-list element. */
+  async function mountList(memories: Memory[]): Promise<Element> {
+    const el = document.createElement("cpk-memory-list");
+    document.body.appendChild(el);
+    // Assign memories via property (same as Lit's .memories=${...} binding).
+    (el as unknown as { memories: Memory[] }).memories = memories;
+    // Trigger update if the element is a Lit element.
+    if ("updateComplete" in el) {
+      await (el as unknown as { updateComplete: Promise<void> }).updateComplete;
+    }
+    return el;
+  }
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders one card per memory in order", async () => {
+    const el = await mountList(threeMemories);
+    const cards = el.shadowRoot?.querySelectorAll(".cpk-ml__card");
+    expect(cards?.length).toBe(3);
+    const contents = Array.from(cards ?? []).map((card) =>
+      card.querySelector(".cpk-ml__content")?.textContent?.trim(),
+    );
+    expect(contents).toEqual([
+      "Likes cats",
+      "First login was on a Monday",
+      "Deploys on Thursdays",
+    ]);
+  });
+
+  it("narrows cards when an operational kind filter is clicked", async () => {
+    const el = await mountList(threeMemories);
+
+    const operationalSeg = el.shadowRoot?.querySelector<HTMLElement>(
+      '[data-kind="operational"]',
+    );
+    expect(
+      operationalSeg,
+      "operational filter segment should exist",
+    ).not.toBeNull();
+
+    operationalSeg!.click();
+    await (el as unknown as { updateComplete: Promise<void> }).updateComplete;
+
+    const cards = el.shadowRoot?.querySelectorAll(".cpk-ml__card");
+    expect(cards?.length).toBe(1);
+    expect(
+      cards?.[0]?.querySelector(".cpk-ml__content")?.textContent?.trim(),
+    ).toBe("Deploys on Thursdays");
+  });
+
+  it("filters cards by search text (case-insensitive)", async () => {
+    const el = await mountList(threeMemories);
+
+    const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>(
+      ".cpk-ml__search-input",
+    );
+    expect(searchInput, "search input should exist").not.toBeNull();
+
+    searchInput!.value = "deploy";
+    searchInput!.dispatchEvent(new Event("input", { bubbles: true }));
+    await (el as unknown as { updateComplete: Promise<void> }).updateComplete;
+
+    const cards = el.shadowRoot?.querySelectorAll(".cpk-ml__card");
+    expect(cards?.length).toBe(1);
+    expect(
+      cards?.[0]?.querySelector(".cpk-ml__content")?.textContent?.trim(),
+    ).toBe("Deploys on Thursdays");
+  });
+
+  it("shows the empty state when memories is empty", async () => {
+    const el = await mountList([]);
+    const empty = el.shadowRoot?.querySelector(".cpk-ml__empty");
+    expect(empty, "empty state should render").not.toBeNull();
+    expect(el.shadowRoot?.textContent ?? "").toContain("No memories yet");
+    const cards = el.shadowRoot?.querySelectorAll(".cpk-ml__card");
+    expect(cards?.length ?? 0).toBe(0);
+  });
+});
+
+// ── 6.6  Passive guard ────────────────────────────────────────────────────
+
+describe("WebInspectorElement memories — passive store guard", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      get length() {
+        return 0;
+      },
+      key: () => null,
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("calls core.getMemoryStore() on tab activation and reads from the returned store", async () => {
+    const core = makeCoreWithMemory([]);
+    const spy = vi.spyOn(core, "getMemoryStore");
+
+    await mountMemories(core);
+
+    expect(spy).toHaveBeenCalled();
+
+    // The store instance that spy captured is the exact same object that
+    // core.getMemoryStore() returns — inspector reads from it, never wraps it.
+    const returnedStore = spy.mock.results[0]?.value;
+    expect(returnedStore).toBeDefined();
+    // Verify the inspector consumed the store by checking its getState was accessible
+    // (if the inspector had created its own store instead, this reference would differ).
+    expect(typeof returnedStore.getState).toBe("function");
+    expect(typeof returnedStore.select).toBe("function");
+  });
+
+  it("does NOT call core.getMemoryStore() merely by attaching the inspector", async () => {
+    // INSP-1: getMemoryStore() lazily creates + starts the store and opens
+    // realtime, so attaching the inspector must touch nothing. The store is
+    // only created when the user activates the Memories tab.
+    const core = makeCoreWithMemory([]);
+    const spy = vi.spyOn(core, "getMemoryStore");
+
+    const el = new WebInspectorElement();
+    document.body.appendChild(el);
+    el.core = core as unknown as WebInspectorElement["core"];
+    (el as unknown as { isOpen: boolean }).isOpen = true;
+    await el.updateComplete;
+
+    expect(spy).not.toHaveBeenCalled();
+
+    // Activating the Memories tab is what creates + subscribes to the store.
+    (
+      el as unknown as { handleMenuSelect: (k: string) => void }
+    ).handleMenuSelect("memories");
+    await el.updateComplete;
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not double-subscribe when the Memories tab is re-activated", async () => {
+    const core = makeCoreWithMemory([]);
+    const spy = vi.spyOn(core, "getMemoryStore");
+
+    const el = await mountMemories(core);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    // Re-activate the Memories tab — the guard must prevent a second
+    // getMemoryStore() call (which would create a second store/realtime).
+    (
+      el as unknown as { handleMenuSelect: (k: string) => void }
+    ).handleMenuSelect("memories");
+    await el.updateComplete;
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it("re-subscribes after detach when the Memories tab is activated again", async () => {
+    const core = makeCoreWithMemory([]);
+    const spy = vi.spyOn(core, "getMemoryStore");
+
+    const el = await mountMemories(core);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    // Detach (core = null) must reset the lazy-subscription guard.
+    el.core = null;
+    await el.updateComplete;
+
+    // Re-attach + re-activate the tab → a fresh subscription is created.
+    el.core = core as unknown as WebInspectorElement["core"];
+    (el as unknown as { isOpen: boolean }).isOpen = true;
+    (
+      el as unknown as { handleMenuSelect: (k: string) => void }
+    ).handleMenuSelect("memories");
+    await el.updateComplete;
+
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});
+
+// ── 6.6.1  Active-on-boot subscription ─────────────────────────────────────
+//
+// The memory subscription is normally created on a Memories-tab CLICK
+// (handleMenuSelect → ensureMemorySubscription). But when the inspector boots
+// with the Memories tab ALREADY active — e.g. a persisted
+// `selectedMenu: "memories"` restored by hydrateStateFromStorageEarly — no
+// click ever fires, so historically no subscription was created: the realtime
+// indicator stayed stuck on the default "connecting" (rendered "reconnecting")
+// and the list was empty until the user toggled tabs. The fix subscribes when
+// the Memories tab is the active tab on boot, gated on the active tab so it
+// still does not subscribe in apps not viewing memory (INSP-1).
+
+describe("WebInspectorElement memories — active-on-boot subscription", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    // Persist `selectedMenu: "memories"` so hydrateStateFromStorageEarly (run in
+    // connectedCallback, before any user interaction) restores the Memories tab
+    // as the active tab — reproducing the stuck-indicator boot scenario.
+    const store: Record<string, string> = {
+      "cpk:inspector:state": JSON.stringify({ selectedMenu: "memories" }),
+    };
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => store[key] ?? null,
+      setItem: (key: string, value: string) => {
+        store[key] = value;
+      },
+      removeItem: (key: string) => {
+        delete store[key];
+      },
+      clear: () => {
+        for (const key of Object.keys(store)) delete store[key];
+      },
+      get length() {
+        return Object.keys(store).length;
+      },
+      key: (index: number) => Object.keys(store)[index] ?? null,
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("subscribes to the memory store on boot when the Memories tab is already active (no click)", async () => {
+    // The store reports a live realtime status. If the inspector subscribes on
+    // boot, _memoriesRealtimeStatus reflects "connected"; if it does NOT (the
+    // bug), it stays on the default "connecting".
+    const core = makeCoreWithMemory([], { realtimeStatus: "connected" });
+    const spy = vi.spyOn(core, "getMemoryStore");
+
+    const el = new WebInspectorElement();
+    document.body.appendChild(el);
+    // connectedCallback has already restored selectedMenu = "memories".
+    // Assigning core (the realistic boot path) must trigger the subscription
+    // without any handleMenuSelect click.
+    el.core = core as unknown as WebInspectorElement["core"];
+    (el as unknown as { isOpen: boolean }).isOpen = true;
+    await el.updateComplete;
+
+    expect(
+      (el as unknown as { selectedMenu: string }).selectedMenu,
+      "persisted Memories tab should be the active tab on boot",
+    ).toBe("memories");
+
+    // The store was created + subscribed WITHOUT a tab click.
+    expect(
+      spy,
+      "core.getMemoryStore() must be called on boot when Memories is active",
+    ).toHaveBeenCalled();
+
+    // The live status from the store is reflected — not the stuck default.
+    expect(
+      (el as unknown as { _memoriesRealtimeStatus: string })
+        ._memoriesRealtimeStatus,
+      "realtime status must reflect the store, not the default 'connecting'",
+    ).toBe("connected");
+  });
+
+  it("does not double-subscribe when boot subscription is followed by a Memories-tab click", async () => {
+    // The boot subscription must be idempotent: a later explicit click must not
+    // create a second store/realtime connection.
+    const core = makeCoreWithMemory([], { realtimeStatus: "connected" });
+    const spy = vi.spyOn(core, "getMemoryStore");
+
+    const el = new WebInspectorElement();
+    document.body.appendChild(el);
+    el.core = core as unknown as WebInspectorElement["core"];
+    (el as unknown as { isOpen: boolean }).isOpen = true;
+    await el.updateComplete;
+
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    (
+      el as unknown as { handleMenuSelect: (k: string) => void }
+    ).handleMenuSelect("memories");
+    await el.updateComplete;
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ── 6.7  Older-core compat: missing getMemoryStore ────────────────────────
+//
+// An inspector attached to an older @copilotkit/core that predates
+// getMemoryStore must not throw. The guard added in attachToCore must fall
+// through to the else branch, set _memoriesAvailable = false, and leave the
+// memories tab in the locked-teaser state — exactly like a core that defines
+// the method but returns available=false.
+
+describe("WebInspectorElement memories — older-core compat (no getMemoryStore)", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      get length() {
+        return 0;
+      },
+      key: () => null,
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("does not throw when core lacks getMemoryStore, and renders the locked teaser", async () => {
+    // Build a minimal core that does NOT define getMemoryStore — simulating an
+    // older @copilotkit/core package. We deliberately omit the method rather
+    // than setting it to undefined so the typeof guard fires correctly.
+    const olderCore = {
+      agents: {},
+      context: {},
+      properties: {},
+      runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
+      // intelligence present so the only lock-cause is the missing store method
+      intelligence: { wsUrl: "wss://localhost" },
+      subscribe: (_subscriber: CopilotKitCoreSubscriber) => ({
+        unsubscribe: () => undefined,
+      }),
+      getThreadStores: () => ({}),
+      getThreadStore: (_agentId: string) => undefined,
+      // getMemoryStore intentionally absent
+    };
+
+    const el = new WebInspectorElement();
+    document.body.appendChild(el);
+
+    // Assigning core must not throw even though getMemoryStore is missing.
+    expect(() => {
+      el.core = olderCore as unknown as WebInspectorElement["core"];
+    }).not.toThrow();
+
+    // Open and switch to the memories tab so the view state is rendered.
+    const internals = el as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: string) => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("memories");
+    await el.updateComplete;
+
+    // The locked teaser must render — cpk-memory-list must NOT appear.
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Long-term memory");
+    const memoryList = el.shadowRoot?.querySelector("cpk-memory-list");
+    expect(
+      memoryList,
+      "cpk-memory-list must not render when getMemoryStore is absent",
+    ).toBeNull();
+  });
+
+  it("shows the SDK-upgrade teaser (distinct from the not-enabled teaser) when getMemoryStore is absent", async () => {
+    // INSP-3: an older @copilotkit/core (no getMemoryStore) must guide an SDK
+    // upgrade, with copy distinct from the genuine "not enabled on this
+    // deployment" teaser shown by a current SDK against a memory-less backend.
+    const olderCore = {
+      agents: {},
+      context: {},
+      properties: {},
+      runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
+      intelligence: { wsUrl: "wss://localhost" },
+      subscribe: (_subscriber: CopilotKitCoreSubscriber) => ({
+        unsubscribe: () => undefined,
+      }),
+      getThreadStores: () => ({}),
+      getThreadStore: (_agentId: string) => undefined,
+      // getMemoryStore intentionally absent
+    };
+
+    const el = new WebInspectorElement();
+    document.body.appendChild(el);
+    el.core = olderCore as unknown as WebInspectorElement["core"];
+    const internals = el as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: string) => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("memories");
+    await el.updateComplete;
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("@copilotkit SDK");
+    expect(text).toContain("Upgrade");
+    // Must NOT show the deployment-not-enabled copy in this case.
+    expect(text).not.toContain(
+      "Long-term memory isn't enabled on this deployment.",
+    );
+  });
+
+  it("shows the not-enabled teaser (distinct from the upgrade teaser) when the current SDK reports memory unavailable", async () => {
+    // INSP-3 counterpart: a current SDK (getMemoryStore present) whose store
+    // reports available=false shows the deployment teaser, NOT upgrade copy.
+    const core = makeCoreWithMemory([], { available: false });
+    const el = await mountMemories(core);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain(
+      "Long-term memory isn't enabled on this deployment.",
+    );
+    expect(text).not.toContain("@copilotkit SDK");
+  });
+});
+
+// ── 6.8  Memories tab telemetry gating (A7) + detach reset (A8) ────────────
+//
+// The memories tab is the only telemetry call site that must honor the host
+// `core.telemetryDisabled` opt-out and must not re-fire on every click. These
+// tests mirror the Threads tab-click telemetry test. They also cover that
+// detachFromCore resets the memory view state so a later attach to an older
+// core never leaks stale memory counts into telemetry.
+
+describe("WebInspectorElement memories — tab telemetry + detach reset", () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  const telemetryPosts = () =>
+    fetchMock.mock.calls
+      .filter(
+        (call) =>
+          String(call[0]) === "https://telemetry.copilotkit.ai/ingest" &&
+          (call[1] as RequestInit | undefined)?.method === "POST",
+      )
+      .map((call) => {
+        const body =
+          ((call[1] as RequestInit | undefined)?.body as string) ?? "{}";
+        return JSON.parse(body) as {
+          event: string;
+          properties: Record<string, unknown>;
+        };
+      });
+
+  const memoriesTabClicks = () =>
+    telemetryPosts().filter(
+      (post) => post.event === "oss.inspector.memories_tab_clicked",
+    );
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    // localStorage not opted out → track() proceeds to the fetch sink.
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      get length() {
+        return 0;
+      },
+      key: () => null,
+    });
+    fetchMock = vi.fn(() =>
+      Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({}),
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("posts memories_tab_clicked when the Memories tab is selected", async () => {
+    const oneMemory: Memory = {
+      id: "m1",
+      kind: "topical",
+      scope: "user",
+      content: "Likes dogs",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    };
+
+    const core = makeCoreWithMemory([oneMemory]);
+    await mountMemories(core);
+    await Promise.resolve();
+
+    const clicks = memoriesTabClicks();
+    expect(clicks).toHaveLength(1);
+    expect(clicks[0]!.properties).toMatchObject({
+      memory_count: 1,
+      available: true,
+    });
+  });
+
+  it("does NOT post memories_tab_clicked when core.telemetryDisabled is true", async () => {
+    const core = makeCoreWithMemory([], { telemetryDisabled: true });
+    await mountMemories(core);
+    await Promise.resolve();
+
+    expect(memoriesTabClicks()).toHaveLength(0);
+  });
+
+  it("does not double-fire when the already-active Memories tab is re-selected", async () => {
+    const core = makeCoreWithMemory([]);
+    const el = await mountMemories(core);
+    await Promise.resolve();
+
+    // Re-select the already-active Memories tab.
+    const internals = el as unknown as {
+      handleMenuSelect: (key: string) => void;
+    };
+    internals.handleMenuSelect("memories");
+    await el.updateComplete;
+    await Promise.resolve();
+
+    expect(memoriesTabClicks()).toHaveLength(1);
+  });
+
+  it("resets memory view state on detachFromCore (memories empty, count 0)", async () => {
+    const oneMemory: Memory = {
+      id: "m1",
+      kind: "topical",
+      scope: "user",
+      content: "Likes dogs",
+      sourceThreadIds: [],
+      invalidatedAt: null,
+    };
+
+    const core = makeCoreWithMemory([oneMemory]);
+    const el = await mountMemories(core);
+    await Promise.resolve();
+
+    // Sanity: the seeded memory is present before detach.
+    expect(
+      (el as unknown as { _memories: Memory[] })._memories.map((m) => m.id),
+    ).toEqual(["m1"]);
+
+    // Reassigning core triggers detachFromCore(); null means no re-attach.
+    el.core = null;
+    await el.updateComplete;
+
+    const state = el as unknown as {
+      _memories: Memory[];
+      _memoriesLoading: boolean;
+      _memoriesError: Error | null;
+      _memoriesAvailable: boolean;
+    };
+    expect(state._memories).toEqual([]);
+    expect(state._memories).toHaveLength(0);
+    expect(state._memoriesLoading).toBe(false);
+    expect(state._memoriesError).toBeNull();
+    expect(state._memoriesAvailable).toBe(true);
+  });
+});