@copilotkit/web-inspector 1.64.2-canary.rc-1 → 1.64.2

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

@@ -236,6 +236,26 @@ function getContextInternals(inspector: WebInspectorElement) {
   return inspector as unknown as InspectorContextInternals;
 }
 
+type TelemetryPost = { event: string; properties: Record<string, unknown> };
+
+/** Decode the `oss.inspector.*` payloads a stubbed fetch received. */
+function telemetryPostsFrom(fetchMock: {
+  mock: { calls: unknown[][] };
+}): TelemetryPost[] {
+  return fetchMock.mock.calls
+    .filter(
+      (call) =>
+        String(call[0]) === "https://telemetry.copilotkit.ai/ingest" &&
+        (call[1] as RequestInit | undefined)?.method === "POST",
+    )
+    .map(
+      (call) =>
+        JSON.parse(
+          ((call[1] as RequestInit | undefined)?.body as string) ?? "{}",
+        ) as TelemetryPost,
+    );
+}
+
 // --- Tests ---
 
 describe("WebInspectorElement", () => {
@@ -1161,6 +1181,14 @@ describe("CpkThreadInspector provider contract", () => {
     vi.stubGlobal("fetch", fetchMock);
     const { el, internals } = createThreadInspector();
 
+    // Count only thread-inspection requests. This stub replaces the global
+    // fetch, so a fire-and-forget telemetry POST from an earlier case can land
+    // here too; the assertion is about refetches, not total network calls.
+    const threadFetches = () =>
+      fetchMock.mock.calls.filter((call) =>
+        String(call[0]).startsWith("http://runtime"),
+      );
+
     internals.runtimeUrl = "http://runtime";
     internals.threadInspectionAvailable = true;
     internals.headers = { Authorization: "Bearer first" };
@@ -1168,7 +1196,7 @@ describe("CpkThreadInspector provider contract", () => {
     await flushProviderWork(el);
 
     await vi.waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(threadFetches()).toHaveLength(1);
       expect(internals._fetchedEvents?.[0]?.payload).toEqual({
         auth: "Bearer first",
       });
@@ -1178,12 +1206,12 @@ describe("CpkThreadInspector provider contract", () => {
     await flushProviderWork(el);
 
     await vi.waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledTimes(2);
+      expect(threadFetches()).toHaveLength(2);
       expect(internals._fetchedEvents?.[0]?.payload).toEqual({
         auth: "Bearer second",
       });
     });
-    expect(headersOf(fetchMock.mock.calls.at(-1)!)).toMatchObject({
+    expect(headersOf(threadFetches().at(-1)!)).toMatchObject({
       Authorization: "Bearer second",
     });
   });
@@ -1473,6 +1501,36 @@ describe("WebInspectorElement announcement preview dismissal", () => {
     expect(a.isOpen).toBe(false);
   });
 
+  it("emits banner_dismissed with the bubble surface alongside banner_clicked", async () => {
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response(null, { status: 204 }));
+    const timestamp = "2026-06-11T13:00:00.000Z";
+    const { inspector } = await mountWithUnseenAnnouncement(timestamp);
+
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>(".announcement-preview__dismiss")
+      ?.click();
+    await inspector.updateComplete;
+
+    const posts = telemetryPostsFrom(fetchMock);
+    const dismissed = posts.find(
+      (post) => post.event === "oss.inspector.banner_dismissed",
+    );
+    expect(dismissed?.properties).toMatchObject({
+      banner_id: timestamp,
+      surface: "collapsed_preview",
+    });
+    // The legacy signal keeps flowing so existing dashboards don't zero out.
+    const clicked = posts.find(
+      (post) => post.event === "oss.inspector.banner_clicked",
+    );
+    expect(clicked?.properties).toMatchObject({
+      banner_id: timestamp,
+      cta: "dismiss",
+    });
+  });
+
   it("clicking the popout body opens the inspector without persisting", async () => {
     const { inspector, a } = await mountWithUnseenAnnouncement(
       "2026-06-11T13:00:00.000Z",
@@ -1491,6 +1549,258 @@ describe("WebInspectorElement announcement preview dismissal", () => {
   });
 });
 
+// ─────────────────────────────────────────────────────────────────────────
+// Panel-open + banner-surface telemetry (OSS-566 / OSS-568)
+// ─────────────────────────────────────────────────────────────────────────
+//
+// `oss.inspector.opened` exists because opens were previously only inferable
+// from in-panel activity (a floor) or from `banner_clicked` cta=body (which
+// misses the floating-button path). `banner_viewed` carries a `surface`
+// because the bubble on the collapsed widget and the card inside the opened
+// panel are separate impressions — reach on one says nothing about the other.
+
+const ANNOUNCEMENT_URL = "https://cdn.copilotkit.ai/announcements.json";
+
+type OpenTelemetryInternals = {
+  isOpen: boolean;
+  announcementTimestamp: string | null;
+  fetchAnnouncement: () => Promise<void>;
+  openInspector: (source: "floating_button" | "announcement_preview") => void;
+};
+
+describe("WebInspectorElement open + banner surface telemetry", () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+  const timestamp = "2026-07-01T09:00:00.000Z";
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    fetchMock = vi.fn((input: unknown) => {
+      if (String(input) === ANNOUNCEMENT_URL) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              timestamp,
+              previewText: "Channels are here",
+              announcement: "Channels are here — [read more](https://x.test)",
+            }),
+            { status: 200 },
+          ),
+        );
+      }
+      return Promise.resolve(new Response(null, { status: 204 }));
+    });
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  /** Mount an inspector attached to a connected core with telemetry on. */
+  function mount(telemetryDisabled = false, connected = true) {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore(
+      { alpha: agent },
+      {},
+      {},
+      telemetryDisabled,
+    );
+    if (!connected) {
+      harness.core.runtimeConnectionStatus =
+        CopilotKitCoreRuntimeConnectionStatus.Disconnected;
+    }
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    return {
+      inspector,
+      harness,
+      internals: inspector as unknown as OpenTelemetryInternals,
+    };
+  }
+
+  const posts = () => telemetryPostsFrom(fetchMock);
+  const eventsNamed = (name: string) =>
+    posts().filter((post) => post.event === name);
+
+  it("records the collapsed bubble impression, then the in-panel card on open", async () => {
+    const { inspector, internals } = mount();
+
+    await internals.fetchAnnouncement();
+    await inspector.updateComplete;
+
+    const first = eventsNamed("oss.inspector.banner_viewed");
+    expect(first).toHaveLength(1);
+    expect(first[0]!.properties).toMatchObject({
+      banner_id: timestamp,
+      surface: "collapsed_preview",
+    });
+
+    // Opening reveals the in-panel card — a distinct impression.
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>(".announcement-preview")
+      ?.click();
+    await inspector.updateComplete;
+
+    const surfaces = eventsNamed("oss.inspector.banner_viewed").map(
+      (post) => post.properties.surface,
+    );
+    expect(surfaces).toEqual(["collapsed_preview", "expanded_card"]);
+  });
+
+  it("does not re-record an impression for a surface already seen this mount", async () => {
+    const { inspector, internals } = mount();
+
+    await internals.fetchAnnouncement();
+    await internals.fetchAnnouncement();
+    await inspector.updateComplete;
+
+    expect(eventsNamed("oss.inspector.banner_viewed")).toHaveLength(1);
+  });
+
+  it("emits opened with the floating-button source and announcement context", async () => {
+    const { inspector, internals } = mount();
+
+    await internals.fetchAnnouncement();
+    await inspector.updateComplete;
+
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>('button[aria-label="Web Inspector"]')
+      ?.click();
+    await inspector.updateComplete;
+
+    const opened = eventsNamed("oss.inspector.opened");
+    expect(opened).toHaveLength(1);
+    expect(opened[0]!.properties).toMatchObject({
+      open_source: "floating_button",
+      has_unseen_announcement: true,
+      package_name: "@copilotkit/web-inspector",
+    });
+  });
+
+  it("attributes an open through the announcement bubble to that surface", async () => {
+    const { inspector, internals } = mount();
+
+    await internals.fetchAnnouncement();
+    await inspector.updateComplete;
+
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>(".announcement-preview")
+      ?.click();
+    await inspector.updateComplete;
+
+    expect(eventsNamed("oss.inspector.opened")[0]!.properties).toMatchObject({
+      open_source: "announcement_preview",
+    });
+  });
+
+  it("counts one open per open, and nothing for an already-open panel", async () => {
+    const { inspector, internals } = mount();
+    await inspector.updateComplete;
+
+    internals.openInspector("floating_button");
+    internals.openInspector("floating_button");
+    await inspector.updateComplete;
+
+    expect(eventsNamed("oss.inspector.opened")).toHaveLength(1);
+  });
+
+  it("does not count a restored-open panel as an open", async () => {
+    const { inspector, internals } = mount();
+    // Restoring persisted state assigns isOpen directly rather than calling
+    // openInspector — otherwise every reload / dev-server hot reload would
+    // register as a fresh open.
+    internals.isOpen = true;
+    inspector.requestUpdate();
+    await inspector.updateComplete;
+
+    expect(eventsNamed("oss.inspector.opened")).toHaveLength(0);
+  });
+
+  // An open while disconnected is still a real open, so it is reported — but the
+  // /info-derived dimensions are omitted rather than guessed. Recording the
+  // `sse` default would permanently misattribute an Intelligence runtime.
+  it("omits license and runtime mode for an open before the handshake", async () => {
+    const { inspector, internals } = mount(false, false);
+
+    internals.openInspector("floating_button");
+    await inspector.updateComplete;
+
+    const opened = eventsNamed("oss.inspector.opened");
+    expect(opened).toHaveLength(1);
+    expect(opened[0]!.properties).toMatchObject({
+      open_source: "floating_button",
+      // Config-derived, so accurate immediately.
+      runtime_url_type: "localhost",
+    });
+    expect(opened[0]!.properties).not.toHaveProperty("runtime_mode");
+    expect(opened[0]!.properties).not.toHaveProperty("license_status");
+  });
+
+  it("records license and runtime mode for an open against a connected Intelligence runtime", async () => {
+    const { inspector, harness, internals } = mount(false, false);
+    harness.completeHandshake({
+      telemetryDisabled: false,
+      runtimeMode: "intelligence",
+      licenseStatus: "valid",
+    });
+    await inspector.updateComplete;
+
+    internals.openInspector("floating_button");
+    await inspector.updateComplete;
+
+    expect(eventsNamed("oss.inspector.opened")[0]!.properties).toMatchObject({
+      open_source: "floating_button",
+      runtime_mode: "intelligence",
+      license_status: "valid",
+    });
+  });
+
+  // The impression deferral predates the surface split and must survive it: the
+  // runtime's opt-out only arrives with /info.
+  it("holds a banner impression until the handshake, then drops it when telemetry is disabled", async () => {
+    const { inspector, harness, internals } = mount(false, false);
+
+    await internals.fetchAnnouncement();
+    await inspector.updateComplete;
+    expect(eventsNamed("oss.inspector.banner_viewed")).toHaveLength(0);
+
+    harness.completeHandshake({ telemetryDisabled: true });
+    await inspector.updateComplete;
+
+    expect(eventsNamed("oss.inspector.banner_viewed")).toHaveLength(0);
+  });
+
+  it("releases a held banner impression once the runtime allows telemetry", async () => {
+    const { inspector, harness, internals } = mount(false, false);
+
+    await internals.fetchAnnouncement();
+    await inspector.updateComplete;
+    expect(eventsNamed("oss.inspector.banner_viewed")).toHaveLength(0);
+
+    harness.completeHandshake({ telemetryDisabled: false });
+    await inspector.updateComplete;
+
+    const viewed = eventsNamed("oss.inspector.banner_viewed");
+    expect(viewed).toHaveLength(1);
+    expect(viewed[0]!.properties).toMatchObject({
+      surface: "collapsed_preview",
+    });
+  });
+
+  it("emits nothing when the runtime has telemetry disabled", async () => {
+    const { inspector, internals } = mount(true);
+
+    await internals.fetchAnnouncement();
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>(".announcement-preview")
+      ?.click();
+    await inspector.updateComplete;
+
+    expect(posts()).toEqual([]);
+  });
+});
+
 // --- Owned thread store header forwarding (issue #5581) ---
 //
 // When useThreads() isn't mounted, the inspector creates its own thread store
@@ -1503,6 +1813,12 @@ type HeaderMockCore = {
   context: Record<string, unknown>;
   properties: Record<string, unknown>;
   telemetryDisabled: boolean;
+  // Mirrors CopilotKitCore's pre-handshake state (`agent-registry.ts:77`):
+  // `runtimeMode` already reads its `sse` default and `licenseStatus` is absent,
+  // both of which only become real once /info answers. Without this, telemetry
+  // assertions about pre-handshake segmentation pass for the wrong reason.
+  runtimeMode: string;
+  licenseStatus?: string;
   runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
   runtimeUrl: string;
   headers: Record<string, string>;
@@ -1534,6 +1850,7 @@ function createHeaderMockCore(
     context: {},
     properties: {},
     telemetryDisabled,
+    runtimeMode: "sse",
     runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
     runtimeUrl: "http://localhost/api",
     headers,
@@ -1575,6 +1892,29 @@ function createHeaderMockCore(
         s.onHeadersChanged?.({ copilotkit: asCore(), headers: nextHeaders }),
       );
     },
+    /**
+     * Simulates the /info handshake landing: applies what the runtime reported,
+     * then transitions to `connected`. Lets a test observe what is sent after
+     * the handshake versus before it — the segmentation fields do not exist
+     * until this point.
+     */
+    completeHandshake(
+      reported: {
+        telemetryDisabled?: boolean;
+        licenseStatus?: string;
+        runtimeMode?: string;
+      } = {},
+    ) {
+      Object.assign(core, reported);
+      core.runtimeConnectionStatus =
+        CopilotKitCoreRuntimeConnectionStatus.Connected;
+      subscribers.forEach((s) =>
+        s.onRuntimeConnectionStatusChanged?.({
+          copilotkit: asCore(),
+          status: core.runtimeConnectionStatus,
+        }),
+      );
+    },
   };
 }
 

package/src/index.ts

@@ -61,7 +61,9 @@ import {
   getTelemetryDistinctIdForUrl,
   maybeShowDisclosure,
   trackBannerClicked,
+  trackBannerDismissed,
   trackBannerViewed,
+  trackInspectorOpened,
   trackTalkToEngineerClicked,
   trackThreadsEmptyEnabledViewed,
   trackThreadsEnabledViewed,
@@ -79,7 +81,9 @@ import {
   trackThreadsTalkToEngineerClicked,
 } from "./lib/telemetry.js";
 import type {
+  BannerSurface,
   InspectorMemoryTelemetryProps,
+  InspectorOpenSource,
   InspectorThreadTelemetryProps,
 } from "./lib/telemetry.js";
 
@@ -127,6 +131,9 @@ const DEFAULT_BUTTON_SIZE: Size = { width: 48, height: 48 };
 const DEFAULT_WINDOW_SIZE: Size = { width: 840, height: 700 };
 const DOCKED_LEFT_WIDTH = 500; // Sensible width for left dock with collapsed sidebar
 const MAX_AGENT_EVENTS = 200;
+// Cap on banner impressions held while waiting for the runtime handshake, so a
+// runtime that never connects can't accumulate an unbounded queue.
+const MAX_PENDING_BANNER_VIEWED = 20;
 const MAX_TOTAL_EVENTS = 500;
 const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
 const THREADS_INTELLIGENCE_SIGNIN_URL =
@@ -4556,16 +4563,27 @@ export class WebInspectorElement extends LitElement {
   private announcementPromise: Promise<void> | null = null;
   private showAnnouncementPreview = true;
   private announcementExpanded = false;
-  // Per-instance dedup for `oss.inspector.banner_viewed` so the event fires
-  // at most once per announcement timestamp per inspector mount. Plan calls
-  // for "de-dup per timestamp per session"; instance-scoping is closer
-  // to per-mount than per-tab (sessionStorage), but for the inspector the
-  // distinction is academic — inspector instances rarely outlive the page.
-  private viewedBannerTimestamps: Set<string> = new Set();
-  private pendingBannerViewed: {
+  // Per-instance dedup for `oss.inspector.banner_viewed`, keyed by
+  // `${timestamp}:${surface}` so the event fires at most once per
+  // announcement per surface per inspector mount. Plan calls for "de-dup per
+  // timestamp per session"; instance-scoping is closer to per-mount than
+  // per-tab (sessionStorage), but for the inspector the distinction is
+  // academic — inspector instances rarely outlive the page. The surface is
+  // part of the key (OSS-568) because the bubble on the collapsed widget and
+  // the card inside the opened panel are separate impressions: a user can see
+  // one without ever seeing the other.
+  private viewedBannerSurfaces: Set<string> = new Set();
+  // Impressions wait for the runtime handshake before going out: the runtime's
+  // opt-out arrives in the /info response, and `telemetryDisabled` reads `false`
+  // until then, so sending directly would post on a placeholder. This deferral
+  // predates the surface split — preserved here, widened from a single slot to a
+  // queue because opening the panel reveals the second surface and can happen
+  // before the first impression has flushed.
+  private pendingBannerViewed: Array<{
     banner_id: string;
+    surface: BannerSurface;
     cta_label?: string;
-  } | null = null;
+  }> = [];
   // Per-instance dedup for `oss.inspector.banner_clicked` (keyed by
   // `${bannerId}:${cta}`) so copy-button retries and accidental multi-clicks
   // don't inflate funnel counts beyond one signal per intent type per banner.
@@ -7255,7 +7273,7 @@ ${argsString}</pre
       !this.isOpen &&
       !this.draggedDuringInteraction
     ) {
-      this.openInspector();
+      this.openInspector("floating_button");
     }
 
     this.resetPointerTracking();
@@ -7288,7 +7306,7 @@ ${argsString}</pre
 
     if (!this.isOpen) {
       event.preventDefault();
-      this.openInspector();
+      this.openInspector("floating_button");
     }
   };
 
@@ -7759,11 +7777,12 @@ ${argsString}</pre
     this.draggedDuringInteraction = false;
   }
 
-  private openInspector(): void {
+  private openInspector(source: InspectorOpenSource): void {
     if (this.isOpen) {
       return;
     }
 
+    const hadUnseenAnnouncement = this.hasUnseenAnnouncement;
     this.showAnnouncementPreview = false; // hide the bubble once the inspector is opened
 
     this.ensureAnnouncementLoading();
@@ -7771,6 +7790,12 @@ ${argsString}</pre
     this.isOpen = true;
     this.persistState(); // Save the open state
 
+    this.trackOpened(source, hadUnseenAnnouncement);
+    // The in-panel announcement card is now the visible surface, so it earns
+    // its own banner_viewed impression (no-op when the announcement hasn't
+    // loaded yet — fetchAnnouncement records it on arrival instead).
+    this.maybeTrackBannerViewed();
+
     // Apply docking styles if in docked mode
     if (this.dockMode !== "floating") {
       this.applyDockStyles();
@@ -8290,6 +8315,52 @@ ${argsString}</pre
     `;
   }
 
+  // Fires `oss.inspector.opened` for a user-initiated open (OSS-566).
+  // Restoring a persisted-open panel on mount assigns `isOpen` directly
+  // instead of routing through `openInspector`, so page reloads and dev-server
+  // hot reloads are not counted as opens.
+  private trackOpened(
+    source: InspectorOpenSource,
+    hadUnseenAnnouncement: boolean,
+  ): void {
+    if (this.core?.telemetryDisabled) return;
+    // `license_status` and `runtime_mode` come from /info. Before the handshake
+    // `licenseStatus` is undefined and `runtimeMode` reads its `sse` default, so
+    // recording them would permanently attribute an early open against an
+    // Intelligence runtime to SSE. Omitted rather than guessed — an absent
+    // dimension is honest, a wrong one is not. `runtime_url_type` is derived
+    // from configuration, so it is accurate immediately.
+    const handshakeComplete = this.runtimeStatus === "connected";
+    trackInspectorOpened({
+      open_source: source,
+      ...(handshakeComplete
+        ? {
+            license_status: this.core?.licenseStatus ?? undefined,
+            runtime_mode: this.core?.runtimeMode ?? undefined,
+          }
+        : {}),
+      runtime_url_type: getRuntimeUrlType(this.core?.runtimeUrl),
+      has_unseen_announcement: hadUnseenAnnouncement,
+    });
+  }
+
+  // Fires `banner_dismissed` at most once per `${bannerId}:${surface}` per
+  // mount. Emitted alongside `banner_clicked { cta: "dismiss" }` rather than
+  // replacing it, so dashboards reading the `cta` value keep working.
+  private trackBannerDismissedOnce(surface: BannerSurface): void {
+    if (this.core?.telemetryDisabled) return;
+    const id = this.announcementTimestamp;
+    if (!id) return;
+    const key = `${id}:dismissed:${surface}`;
+    if (this.clickedBannerIds.has(key)) return;
+    this.clickedBannerIds.add(key);
+    trackBannerDismissed({
+      banner_id: id,
+      surface,
+      cta_label: this.announcementCtaLabel ?? undefined,
+    });
+  }
+
   // Fires `banner_clicked` at most once per `${bannerId}:${cta}` per mount so
   // copy-button retries and accidental multi-clicks don't inflate funnel counts.
   private trackBannerClickedOnce(opts: { cta: "body" | "dismiss" }): void {
@@ -11332,7 +11403,7 @@ ${prettyEvent}</pre
         <button
           class="announcement-dismiss ml-auto"
           type="button"
-          @click=${this.handleDismissAnnouncement}
+          @click=${() => this.dismissAnnouncement("expanded_card")}
           aria-label="Dismiss announcement"
         >
           ${this.renderIcon("X")}
@@ -11372,14 +11443,56 @@ ${prettyEvent}</pre
     </div>`;
   }
 
+  /**
+   * Which announcement surface is on screen right now, or null when the
+   * announcement isn't visible. Mirrors the render gates in
+   * `renderAnnouncementPreview` (bubble) and `renderAnnouncementBanner`
+   * (in-panel card) — opening the panel clears `showAnnouncementPreview`, so
+   * the two are mutually exclusive.
+   */
+  private getVisibleBannerSurface(): BannerSurface | null {
+    if (!this.hasUnseenAnnouncement) return null;
+    if (this.isOpen) {
+      return this.announcementHtml ? "expanded_card" : null;
+    }
+    return this.showAnnouncementPreview && this.announcementPreviewText
+      ? "collapsed_preview"
+      : null;
+  }
+
+  /**
+   * Records a `banner_viewed` impression for whichever surface is currently
+   * visible, once per announcement per surface.
+   */
+  private maybeTrackBannerViewed(): void {
+    const id = this.announcementTimestamp;
+    if (!id) return;
+    const surface = this.getVisibleBannerSurface();
+    if (!surface) return;
+    const key = `${id}:${surface}`;
+    if (this.viewedBannerSurfaces.has(key)) return;
+    if (this.pendingBannerViewed.length >= MAX_PENDING_BANNER_VIEWED) return;
+    this.viewedBannerSurfaces.add(key);
+    this.pendingBannerViewed.push({
+      banner_id: id,
+      surface,
+      cta_label: this.announcementCtaLabel ?? undefined,
+    });
+    this.flushPendingBannerViewed();
+  }
+
+  // Releases held impressions once /info has answered, or discards them when it
+  // reports telemetry disabled.
   private flushPendingBannerViewed(): void {
-    if (!this.pendingBannerViewed || this.core?.telemetryDisabled) {
-      this.pendingBannerViewed = null;
+    if (this.pendingBannerViewed.length === 0) return;
+    if (this.core?.telemetryDisabled) {
+      this.pendingBannerViewed = [];
       return;
     }
     if (this.runtimeStatus !== "connected") return;
-    trackBannerViewed(this.pendingBannerViewed);
-    this.pendingBannerViewed = null;
+    const queued = this.pendingBannerViewed;
+    this.pendingBannerViewed = [];
+    for (const props of queued) trackBannerViewed(props);
   }
 
   private ensureAnnouncementLoading(): void {
@@ -11429,7 +11542,7 @@ ${prettyEvent}</pre
 
   private handleAnnouncementPreviewClick(): void {
     this.showAnnouncementPreview = false;
-    this.openInspector();
+    this.openInspector("announcement_preview");
   }
 
   // Dismissing the preview bubble must PERSIST via markAnnouncementSeen(),
@@ -11442,13 +11555,14 @@ ${prettyEvent}</pre
     // Don't let the dismiss bubble to the preview body, whose click opens the
     // inspector.
     event.stopPropagation();
-    this.handleDismissAnnouncement();
+    this.dismissAnnouncement("collapsed_preview");
   };
 
-  private handleDismissAnnouncement = (): void => {
+  private dismissAnnouncement(surface: BannerSurface): void {
     this.trackBannerClickedOnce({ cta: "dismiss" });
+    this.trackBannerDismissedOnce(surface);
     this.markAnnouncementSeen();
-  };
+  }
 
   private async fetchAnnouncement(): Promise<void> {
     try {
@@ -11489,21 +11603,9 @@ ${prettyEvent}</pre
       this.announcementHtml = await this.convertMarkdownToHtml(markdown);
       this.announcementLoaded = true;
 
-      // banner_viewed: gate on actual visibility and per-mount dedup.
-      // Store as pending rather than firing immediately — telemetryDisabled
-      // may not be known yet if /info hasn't returned. Flushed in
-      // onRuntimeConnectionStatusChanged once the handshake completes.
-      if (
-        this.hasUnseenAnnouncement &&
-        !this.viewedBannerTimestamps.has(timestamp)
-      ) {
-        this.viewedBannerTimestamps.add(timestamp);
-        this.pendingBannerViewed = {
-          banner_id: timestamp,
-          cta_label: ctaLabel ?? undefined,
-        };
-        this.flushPendingBannerViewed();
-      }
+      // banner_viewed: gate on actual visibility and per-mount dedup, and
+      // stamp the surface the announcement is showing on right now.
+      this.maybeTrackBannerViewed();
 
       this.requestUpdate();
     } catch (error) {