@copilotkit/web-inspector 1.60.1 → 1.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/web-inspector",
-  "version": "1.60.1",
+  "version": "1.61.0",
   "description": "Lit-based web component for the CopilotKit web inspector",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "lit": "^3.2.0",
     "lucide": "^0.525.0",
     "marked": "^12.0.2",
-    "@copilotkit/core": "1.60.1"
+    "@copilotkit/core": "1.61.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

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

@@ -1,9 +1,7 @@
 import { WebInspectorElement, ɵCpkThreadDetails } from "../index";
-import {
-  CopilotKitCore,
-  CopilotKitCoreRuntimeConnectionStatus,
-  type CopilotKitCoreSubscriber,
-} from "@copilotkit/core";
+import type { CopilotKitCore } from "@copilotkit/core";
+import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkit/core";
+import type { CopilotKitCoreSubscriber } from "@copilotkit/core";
 import type { AbstractAgent, AgentSubscriber } from "@ag-ui/client";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
@@ -462,3 +460,118 @@ describe("ɵCpkThreadDetails caching", () => {
     expect(internals.renderEvents()).not.toBe(eventsA);
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────────
+// Announcement preview (popout) dismissal MUST persist
+// ─────────────────────────────────────────────────────────────────────────
+//
+// The preview bubble that pops out of the floating button carries an X. Clicking
+// it MUST persist the announcement timestamp to localStorage. Otherwise
+// fetchAnnouncement() recomputes `showAnnouncementPreview` from the (still
+// empty) stored timestamp on the next mount and the bubble pops straight back
+// out — the regression these tests guard against. Persistence lives only in
+// markAnnouncementSeen(); the body-click / open paths clear the flag in memory
+// only and are intentionally NOT persistent.
+
+const ANNOUNCEMENT_STORAGE_KEY = "cpk:inspector:announcements";
+
+type AnnouncementInternals = {
+  hasUnseenAnnouncement: boolean;
+  showAnnouncementPreview: boolean;
+  announcementPreviewText: string | null;
+  announcementTimestamp: string | null;
+  isOpen: boolean;
+};
+
+describe("WebInspectorElement announcement preview dismissal", () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    store = {};
+    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,
+    });
+  });
+
+  /** Mount a closed inspector with an unseen announcement so the popout renders. */
+  async function mountWithUnseenAnnouncement(timestamp: string) {
+    const { core } = createMockCore();
+    const inspector = createInspectorWithCore(core);
+    const a = inspector as unknown as AnnouncementInternals;
+    a.announcementTimestamp = timestamp;
+    a.announcementPreviewText = "Slack early access is here!";
+    a.hasUnseenAnnouncement = true;
+    a.showAnnouncementPreview = true;
+    inspector.requestUpdate();
+    await inspector.updateComplete;
+    return { inspector, a };
+  }
+
+  it("persists the announcement timestamp when the popout X is clicked", async () => {
+    const timestamp = "2026-06-11T13:00:00.000Z";
+    const { inspector, a } = await mountWithUnseenAnnouncement(timestamp);
+
+    const dismiss = inspector.shadowRoot?.querySelector<HTMLElement>(
+      ".announcement-preview__dismiss",
+    );
+    expect(dismiss, "popout dismiss control should render").not.toBeNull();
+
+    dismiss?.click();
+    await inspector.updateComplete;
+
+    // The dismissal is persisted, so a remount would stay closed.
+    expect(store[ANNOUNCEMENT_STORAGE_KEY]).toBe(JSON.stringify({ timestamp }));
+    // In-memory flags cleared and the bubble is gone.
+    expect(a.hasUnseenAnnouncement).toBe(false);
+    expect(a.showAnnouncementPreview).toBe(false);
+    expect(
+      inspector.shadowRoot?.querySelector(".announcement-preview"),
+    ).toBeNull();
+  });
+
+  it("dismissing the popout X does not open the inspector", async () => {
+    const { inspector, a } = await mountWithUnseenAnnouncement(
+      "2026-06-11T13:00:00.000Z",
+    );
+    expect(a.isOpen).toBe(false);
+
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>(".announcement-preview__dismiss")
+      ?.click();
+    await inspector.updateComplete;
+
+    // X dismisses without opening (only a body click opens the inspector).
+    expect(a.isOpen).toBe(false);
+  });
+
+  it("clicking the popout body opens the inspector without persisting", async () => {
+    const { inspector, a } = await mountWithUnseenAnnouncement(
+      "2026-06-11T13:00:00.000Z",
+    );
+
+    inspector.shadowRoot
+      ?.querySelector<HTMLElement>(".announcement-preview")
+      ?.click();
+    await inspector.updateComplete;
+
+    // Body click is engagement, not dismissal: it opens but must NOT persist,
+    // so the in-window banner still shows the announcement.
+    expect(a.isOpen).toBe(true);
+    expect(store[ANNOUNCEMENT_STORAGE_KEY]).toBeUndefined();
+    expect(a.hasUnseenAnnouncement).toBe(true);
+  });
+});

package/src/index.ts

@@ -3463,6 +3463,11 @@ ${argsString}</pre
         transition: transform 300ms ease;
       }
 
+      .console-button-wrapper {
+        position: relative;
+        display: inline-flex;
+      }
+
       .console-button {
         transition:
           transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -3590,6 +3595,36 @@ ${argsString}</pre
         box-shadow: -6px 6px 10px rgba(1, 5, 7, 0.08);
       }
 
+      .announcement-preview__dismiss {
+        flex: none;
+        margin-top: -1px;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        appearance: none;
+        background: none;
+        border: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        color: #838389;
+        cursor: pointer;
+        transition:
+          background 120ms ease,
+          color 120ms ease;
+      }
+
+      .announcement-preview__dismiss:hover {
+        background: rgba(0, 0, 0, 0.06);
+        color: #010507;
+      }
+
+      .announcement-preview__dismiss:focus-visible {
+        outline: 2px solid #bec2ff;
+        outline-offset: 1px;
+      }
+
       .announcement-dismiss {
         background: none;
         border: none;
@@ -4270,29 +4305,38 @@ ${argsString}</pre
       this.isDragging ? "cursor-grabbing" : "cursor-grab",
     ].join(" ");
 
+    // The announcement preview renders as a SIBLING of the floating button (not
+    // a child) so its dismiss affordance can be a real <button>. Nesting any
+    // interactive/tabbable element inside the floating <button> violates the
+    // HTML button content model. The wrapper is position: relative so the
+    // absolutely-positioned preview still anchors to the button's edge.
     return html`
-      <button
-        class=${buttonClasses}
-        type="button"
-        aria-label="Web Inspector"
-        data-drag-context="button"
-        data-dragging=${
-          this.isDragging && this.pointerContext === "button" ? "true" : "false"
-        }
-        @pointerdown=${this.handlePointerDown}
-        @pointermove=${this.handlePointerMove}
-        @pointerup=${this.handlePointerUp}
-        @pointercancel=${this.handlePointerCancel}
-        @click=${this.handleButtonClick}
-      >
+      <div class="console-button-wrapper">
+        <button
+          class=${buttonClasses}
+          type="button"
+          aria-label="Web Inspector"
+          data-drag-context="button"
+          data-dragging=${
+            this.isDragging && this.pointerContext === "button"
+              ? "true"
+              : "false"
+          }
+          @pointerdown=${this.handlePointerDown}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerCancel}
+          @click=${this.handleButtonClick}
+        >
+          <img
+            src=${inspectorLogoIconUrl}
+            alt="Inspector logo"
+            class="h-5 w-auto"
+            loading="lazy"
+          />
+        </button>
         ${this.renderAnnouncementPreview()}
-        <img
-          src=${inspectorLogoIconUrl}
-          alt="Inspector logo"
-          class="h-5 w-auto"
-          loading="lazy"
-        />
-      </button>
+      </div>
     `;
   }
 
@@ -7439,6 +7483,9 @@ ${prettyEvent}</pre
     const side =
       this.contextState.button.anchor.horizontal === "left" ? "right" : "left";
 
+    // The preview is a sibling of the floating button (see renderButton), so the
+    // dismiss control is a real <button>. stopPropagation keeps the X from
+    // bubbling to the preview body, whose click opens the inspector.
     return html`<div
       class="announcement-preview"
       data-side=${side}
@@ -7446,6 +7493,14 @@ ${prettyEvent}</pre
       @click=${() => this.handleAnnouncementPreviewClick()}
     >
       <span>${this.announcementPreviewText}</span>
+      <button
+        type="button"
+        class="announcement-preview__dismiss"
+        aria-label="Dismiss announcement"
+        @click=${this.handleDismissAnnouncementPreview}
+      >
+        ${this.renderIcon("X")}
+      </button>
       <span class="announcement-preview__arrow"></span>
     </div>`;
   }
@@ -7455,6 +7510,19 @@ ${prettyEvent}</pre
     this.openInspector();
   }
 
+  // Dismissing the preview bubble must PERSIST via markAnnouncementSeen(),
+  // otherwise the bubble pops back out on the next mount because
+  // fetchAnnouncement() recomputes showAnnouncementPreview from the stored
+  // timestamp. Clearing only the in-memory flag (as handleAnnouncementPreviewClick
+  // and openInspector do) is intentionally transient — it's the X that makes
+  // the dismissal stick.
+  private handleDismissAnnouncementPreview = (event: Event): void => {
+    // Don't let the dismiss bubble to the preview body, whose click opens the
+    // inspector.
+    event.stopPropagation();
+    this.handleDismissAnnouncement();
+  };
+
   private handleDismissAnnouncement = (): void => {
     this.trackBannerClickedOnce({ cta: "dismiss" });
     this.markAnnouncementSeen();