@copilotkit/web-inspector 1.62.2 → 1.63.0

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";
 
@@ -23,7 +24,7 @@ type InspectorInternals = {
 
 type InspectorThreadViewInternals = {
   isOpen: boolean;
-  selectedMenu: "threads";
+  selectedMenu: "ag-ui-events" | "threads";
   selectedThreadId: string | null;
   _threads: Array<{
     id: string;
@@ -31,6 +32,15 @@ type InspectorThreadViewInternals = {
     agentId: string;
     updatedAt?: string | null;
   }>;
+  _threadsByAgent: Map<
+    string,
+    Array<{
+      id: string;
+      name?: string | null;
+      agentId: string;
+      updatedAt?: string | null;
+    }>
+  >;
 };
 
 type InspectorContextInternals = {
@@ -101,6 +111,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 +161,7 @@ type MockCore = {
   };
   getThreadStores: () => Record<string, never>;
   getThreadStore: (agentId: string) => undefined;
+  getMemoryStore: () => ReturnType<typeof createNoopMemoryStore>;
 };
 
 function createMockCore(initialAgents: Record<string, AbstractAgent> = {}) {
@@ -130,6 +181,9 @@ function createMockCore(initialAgents: Record<string, AbstractAgent> = {}) {
     getThreadStore(_agentId: string) {
       return undefined;
     },
+    getMemoryStore() {
+      return createNoopMemoryStore();
+    },
   };
 
   return {
@@ -1401,6 +1455,7 @@ type HeaderMockCore = {
   getThreadStore: (agentId: string) => undefined;
   registerThreadStore: (agentId: string, store: unknown) => void;
   unregisterThreadStore: (agentId: string) => void;
+  getMemoryStore: () => ReturnType<typeof createNoopMemoryStore>;
 };
 
 function createHeaderMockCore(
@@ -1437,6 +1492,9 @@ function createHeaderMockCore(
     },
     registerThreadStore() {},
     unregisterThreadStore() {},
+    getMemoryStore() {
+      return createNoopMemoryStore();
+    },
   };
 
   const asCore = () => core as unknown as CopilotKitCore;
@@ -1481,6 +1539,14 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
           properties: Record<string, unknown>;
         };
       });
+  const threadListText = (inspector: WebInspectorElement) =>
+    inspector.shadowRoot?.querySelector("cpk-thread-list")?.shadowRoot
+      ?.textContent ?? "";
+  const expectNoUtmParams = (url: URL) => {
+    expect(url.searchParams.has("utm_source")).toBe(false);
+    expect(url.searchParams.has("utm_medium")).toBe(false);
+    expect(url.searchParams.has("utm_campaign")).toBe(false);
+  };
 
   beforeEach(() => {
     document.body.innerHTML = "";
@@ -1497,6 +1563,7 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
   });
 
   afterEach(() => {
+    vi.useRealTimers();
     vi.unstubAllGlobals();
   });
 
@@ -1649,13 +1716,17 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
       "Talk to an Engineer",
       "Sign up for Intelligence",
     ]);
+    const engineer = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://www.copilotkit.ai/talk-to-an-engineer"]',
+    );
+    expect(engineer?.closest("#cpk-main-scroll")).toBeNull();
     expect(text).not.toContain("No threads yet");
     expect(
       fetchMock.mock.calls.some((call) => String(call[0]).includes("/threads")),
     ).toBe(false);
   });
 
-  it("adds ref and posthog distinct ID attribution to locked-state CTAs", async () => {
+  it("adds inspector attribution to locked-state CTAs", async () => {
     const { agent } = createMockAgent("alpha");
     const harness = createHeaderMockCore(
       { alpha: agent },
@@ -1678,7 +1749,7 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     await inspector.updateComplete;
 
     const signup = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
-      'a[href^="https://go.copilotkit.ai/intelligence-signup"]',
+      'a[href^="https://dashboard.operations.copilotkit.ai/sign-in"]',
     );
     const engineer = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
       'a[href^="https://www.copilotkit.ai/talk-to-an-engineer"]',
@@ -1688,7 +1759,10 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     expect(engineer).not.toBeNull();
 
     const signupUrl = new URL(signup!.href);
+    expect(signupUrl.origin).toBe("https://dashboard.operations.copilotkit.ai");
+    expect(signupUrl.pathname).toBe("/sign-in");
     expect(signupUrl.searchParams.get("ref")).toBe("cpk-inspector");
+    expectNoUtmParams(signupUrl);
     const distinctId = signupUrl.searchParams.get("posthog_distinct_id");
     expect(distinctId).toMatch(/^[0-9a-f-]{36}$/);
 
@@ -1696,6 +1770,7 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     expect(engineerUrl.origin).toBe("https://www.copilotkit.ai");
     expect(engineerUrl.pathname).toBe("/talk-to-an-engineer");
     expect(engineerUrl.searchParams.get("ref")).toBe("cpk-inspector-threads");
+    expectNoUtmParams(engineerUrl);
     expect(engineerUrl.searchParams.get("posthog_distinct_id")).toBe(
       distinctId,
     );
@@ -1746,7 +1821,7 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     }
   });
 
-  it("keeps the enabled empty Threads state when thread listing is available", async () => {
+  it("renders example threads and the deselected overview when enabled thread history is empty", async () => {
     const { agent } = createMockAgent("alpha");
     const harness = createHeaderMockCore({ alpha: agent }, {}, {}, true);
 
@@ -1763,12 +1838,1481 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     internals.handleMenuSelect("threads");
     await inspector.updateComplete;
 
-    expect(inspector.shadowRoot?.textContent ?? "").toContain("No threads yet");
+    await vi.waitFor(() => {
+      const text = threadListText(inspector);
+      expect(text).toContain("Realtime thread sync");
+      expect(text).toContain("Manage saved conversations");
+      expect(text).toContain("Inspect durable run history");
+    });
+
+    const text = inspector.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Threads are persistent, inspectable conversations");
+    expect(text).toContain(
+      "Take a tour with the example threads in the sidebar.",
+    );
+    const threadsDocs = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://docs.copilotkit.ai/threads"]',
+    );
+    expect(threadsDocs?.textContent?.trim()).toBe("Learn how Threads work");
+    const threadsDocsUrl = new URL(threadsDocs!.href);
+    expect(threadsDocsUrl.origin).toBe("https://docs.copilotkit.ai");
+    expect(threadsDocsUrl.pathname).toBe("/threads");
+    expect(threadsDocsUrl.searchParams.get("ref")).toBe(
+      "cpk-inspector-threads",
+    );
+    expectNoUtmParams(threadsDocsUrl);
+    const selfHosted = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://docs.copilotkit.ai/premium/self-hosting"]',
+    );
+    expect(selfHosted?.textContent?.trim()).toBe(
+      "Explore self-hosted Intelligence",
+    );
+    const selfHostedUrl = new URL(selfHosted!.href);
+    expect(selfHostedUrl.origin).toBe("https://docs.copilotkit.ai");
+    expect(selfHostedUrl.pathname).toBe("/premium/self-hosting");
+    expect(selfHostedUrl.searchParams.get("ref")).toBe("cpk-inspector-threads");
+    expectNoUtmParams(selfHostedUrl);
+    expect(threadListText(inspector)).toContain("Example");
+    expect(text).not.toContain("No threads yet");
+    expect(
+      inspector.shadowRoot?.querySelector("cpk-thread-details"),
+    ).toBeNull();
+    expect(
+      (inspector as unknown as InspectorThreadViewInternals).selectedThreadId,
+    ).toBeNull();
+
     const engineer = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
       'a[href^="https://www.copilotkit.ai/talk-to-an-engineer"]',
     );
-    expect(engineer?.href).toBe(
-      "https://www.copilotkit.ai/talk-to-an-engineer?ref=cpk-inspector-threads",
+    const engineerUrl = new URL(engineer!.href);
+    expect(engineerUrl.origin).toBe("https://www.copilotkit.ai");
+    expect(engineerUrl.pathname).toBe("/talk-to-an-engineer");
+    expect(engineerUrl.searchParams.get("ref")).toBe("cpk-inspector-threads");
+    expectNoUtmParams(engineerUrl);
+    expect(engineer?.closest("#cpk-main-scroll")).toBeNull();
+  });
+
+  it("defers loading the empty overview video until after the overview paints", async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal("matchMedia", () => ({ matches: false }));
+
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, false);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    expect(inspector.shadowRoot?.textContent ?? "").toContain(
+      "Threads are persistent, inspectable conversations",
+    );
+    expect(
+      inspector.shadowRoot?.querySelector(".cpk-threads-overview-video-frame"),
+    ).not.toBeNull();
+    expect(
+      inspector.shadowRoot?.querySelector(".cpk-threads-overview-video"),
+    ).toBeNull();
+
+    await vi.advanceTimersByTimeAsync(450);
+    await inspector.updateComplete;
+
+    const video = inspector.shadowRoot?.querySelector<HTMLVideoElement>(
+      ".cpk-threads-overview-video",
+    );
+    expect(video?.src).toBe(
+      "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm",
+    );
+  });
+
+  it("does not load the empty overview video when reduced motion is preferred", async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal("matchMedia", () => ({ matches: true }));
+
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, false);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    expect(inspector.shadowRoot?.textContent ?? "").toContain(
+      "Threads are persistent, inspectable conversations",
+    );
+    expect(
+      inspector.shadowRoot?.querySelector(".cpk-threads-overview-video-frame"),
+    ).not.toBeNull();
+
+    await vi.advanceTimersByTimeAsync(1200);
+    await inspector.updateComplete;
+
+    expect(
+      inspector.shadowRoot?.querySelector(".cpk-threads-overview-video"),
+    ).toBeNull();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("clears the deferred video timeout when disconnected before load", async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal("matchMedia", () => ({ matches: false }));
+    Object.defineProperty(window, "requestIdleCallback", {
+      configurable: true,
+      value: undefined,
+    });
+    const clearTimeoutSpy = vi.spyOn(window, "clearTimeout");
+
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, false);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    expect(vi.getTimerCount()).toBe(1);
+    inspector.remove();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("cancels the deferred video idle callback when disconnected before load", async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal("matchMedia", () => ({ matches: false }));
+    const requestIdleCallback = vi.fn(() => 123);
+    const cancelIdleCallback = vi.fn();
+    Object.defineProperty(window, "requestIdleCallback", {
+      configurable: true,
+      value: requestIdleCallback,
+    });
+    Object.defineProperty(window, "cancelIdleCallback", {
+      configurable: true,
+      value: cancelIdleCallback,
+    });
+
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, false);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    expect(requestIdleCallback).toHaveBeenCalledTimes(1);
+    inspector.remove();
+    expect(cancelIdleCallback).toHaveBeenCalledWith(123);
+  });
+
+  it("does not render example threads once real threads are present", async () => {
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = createHeaderMockCore({}, {}, {}, true)
+      .core as unknown as WebInspectorElement["core"];
+
+    const internals = inspector as unknown as InspectorThreadViewInternals;
+    internals.isOpen = true;
+    internals.selectedMenu = "threads";
+    internals._threads = [
+      {
+        id: "real-thread",
+        name: "Real customer thread",
+        agentId: "alpha",
+        updatedAt: "2026-06-25T10:00:00.000Z",
+      },
+    ];
+    internals._threadsByAgent = new Map([["alpha", internals._threads]]);
+    inspector.requestUpdate();
+    await inspector.updateComplete;
+
+    const text = threadListText(inspector);
+    expect(text).toContain("Real customer thread");
+    expect(text).not.toContain("Realtime thread sync");
+    expect(text).not.toContain("Example");
+  });
+
+  it("selects an example thread, shows the tour, and toggles back to the overview on second click", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, true);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+      selectedThreadId: string | null;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(threadListText(inspector)).toContain("Realtime thread sync");
+    });
+
+    const threadList = inspector.shadowRoot?.querySelector("cpk-thread-list");
+    const firstRow =
+      threadList?.shadowRoot?.querySelector<HTMLElement>(".cpk-tl__item");
+    expect(firstRow).toBeDefined();
+
+    firstRow!.click();
+    await inspector.updateComplete;
+    await vi.waitFor(() => {
+      expect(internals.selectedThreadId).toBe("example-realtime-sync");
+      expect(
+        inspector.shadowRoot?.querySelector("cpk-thread-details"),
+      ).not.toBe(null);
+      expect(inspector.shadowRoot?.textContent ?? "").toContain(
+        "Read the run as a story",
+      );
+    });
+
+    firstRow!.click();
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(internals.selectedThreadId).toBeNull();
+      expect(
+        inspector.shadowRoot?.querySelector("cpk-thread-details"),
+      ).toBeNull();
+      expect(inspector.shadowRoot?.textContent ?? "").toContain(
+        "Threads are persistent, inspectable conversations",
+      );
+    });
+  });
+
+  it("persists example tour dismissal so it does not auto-open again", async () => {
+    const stored = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => stored.get(key) ?? null,
+      setItem: (key: string, value: string) => stored.set(key, value),
+      removeItem: (key: string) => stored.delete(key),
+      clear: () => stored.clear(),
+      get length() {
+        return stored.size;
+      },
+      key: (index: number) => Array.from(stored.keys())[index] ?? null,
+    });
+
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, false);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(threadListText(inspector)).toContain("Realtime thread sync");
+    });
+
+    const firstRow = inspector.shadowRoot
+      ?.querySelector("cpk-thread-list")
+      ?.shadowRoot?.querySelector<HTMLElement>(".cpk-tl__item");
+    firstRow!.click();
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(inspector.shadowRoot?.textContent ?? "").toContain(
+        "Read the run as a story",
+      );
+    });
+
+    const skip = Array.from(
+      inspector.shadowRoot?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+    ).find((button) => button.textContent?.trim() === "Skip");
+    expect(skip).toBeDefined();
+    skip!.click();
+    await inspector.updateComplete;
+
+    expect(stored.get("cpk:inspector:threads-example-tour:v1")).toContain(
+      '"dismissed":true',
+    );
+
+    const secondInspector = new WebInspectorElement();
+    document.body.appendChild(secondInspector);
+    secondInspector.core =
+      harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+    const secondInternals = secondInspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    secondInternals.isOpen = true;
+    secondInternals.handleMenuSelect("threads");
+    await secondInspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(threadListText(secondInspector)).toContain("Realtime thread sync");
+    });
+
+    const secondRow = secondInspector.shadowRoot
+      ?.querySelector("cpk-thread-list")
+      ?.shadowRoot?.querySelector<HTMLElement>(".cpk-tl__item");
+    secondRow!.click();
+    await secondInspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(
+        secondInspector.shadowRoot?.querySelector("cpk-thread-details"),
+      ).not.toBeNull();
+    });
+    expect(secondInspector.shadowRoot?.textContent ?? "").not.toContain(
+      "Read the run as a story",
+    );
+    expect(secondInspector.shadowRoot?.textContent ?? "").toContain(
+      "Show tour",
     );
+
+    const showTour = Array.from(
+      secondInspector.shadowRoot?.querySelectorAll<HTMLButtonElement>(
+        "button",
+      ) ?? [],
+    ).find((button) => button.textContent?.trim() === "Show tour");
+    expect(showTour).toBeDefined();
+    showTour!.click();
+    await secondInspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(secondInspector.shadowRoot?.textContent ?? "").toContain(
+        "Read the run as a story",
+      );
+    });
+  });
+
+  it("tracks example thread selection and tour dismissal telemetry", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, false);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(threadListText(inspector)).toContain("Realtime thread sync");
+    });
+
+    const firstRow = inspector.shadowRoot
+      ?.querySelector("cpk-thread-list")
+      ?.shadowRoot?.querySelector<HTMLElement>(".cpk-tl__item");
+    firstRow!.click();
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(inspector.shadowRoot?.textContent ?? "").toContain(
+        "Read the run as a story",
+      );
+    });
+
+    const skip = Array.from(
+      inspector.shadowRoot?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+    ).find((button) => button.textContent?.trim() === "Skip");
+    skip!.click();
+    await inspector.updateComplete;
+
+    const posts = telemetryPosts();
+    expect(
+      posts.some(
+        (post) => post.event === "oss.inspector.threads_example_selected",
+      ),
+    ).toBe(true);
+    expect(
+      posts.some(
+        (post) => post.event === "oss.inspector.threads_example_tour_started",
+      ),
+    ).toBe(true);
+    const stepViewed = posts.find(
+      (post) => post.event === "oss.inspector.threads_example_tour_step_viewed",
+    );
+    expect(stepViewed?.properties).toMatchObject({
+      example_thread_id: "example-realtime-sync",
+      tour_step: 1,
+    });
+    const dismissed = posts.find(
+      (post) => post.event === "oss.inspector.threads_example_tour_dismissed",
+    );
+    expect(dismissed?.properties).toMatchObject({
+      example_thread_id: "example-realtime-sync",
+      dismiss_method: "skip",
+    });
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────
+// 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("does not use Threads onboarding UTM attribution for locked memory CTAs", async () => {
+    const core = makeCoreNoIntelligence();
+    const el = await mountMemories(core);
+
+    const talkToEngineer = el.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://www.copilotkit.ai/talk-to-an-engineer"]',
+    );
+    const signup = el.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://go.copilotkit.ai/intelligence-signup"]',
+    );
+
+    expect(talkToEngineer).not.toBeNull();
+    expect(signup).not.toBeNull();
+
+    for (const href of [talkToEngineer!.href, signup!.href]) {
+      const url = new URL(href);
+      expect(url.searchParams.get("ref")).toBeTruthy();
+      expect(url.searchParams.has("utm_source")).toBe(false);
+      expect(url.searchParams.has("utm_medium")).toBe(false);
+      expect(url.searchParams.has("utm_campaign")).toBe(false);
+    }
+  });
+
+  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);
   });
 });