@copilotkit/vue 2.0.0-rc.1 → 2.0.0-rc.3

package/src/v2/components/chat/__tests__/CopilotChatSuggestionPill.test.ts

@@ -34,7 +34,7 @@ describe("CopilotChatSuggestionPill", () => {
     );
     expect(button.attributes("aria-busy")).toBe("true");
     expect(button.attributes("disabled")).toBeDefined();
-    expect(wrapper.find(".cpk\\:animate-spin").exists()).toBe(true);
+    expect(wrapper.find(".cpk-suggestion-pill-spinner").exists()).toBe(true);
   });
 
   it("renders icon component when provided", () => {

package/src/v2/components/chat/__tests__/CopilotChatSuggestionView.slots.e2e.test.ts

@@ -88,7 +88,9 @@ describe("CopilotChatSuggestionView Slot System E2E Tests", () => {
         renderInWrapper(Host);
         const containerEl = document.querySelector(".custom-container-class");
         expect(containerEl).toBeTruthy();
-        expect(containerEl?.classList.contains("cpk:flex-wrap")).toBe(true);
+        expect(containerEl?.classList.contains("cpk-suggestion-view")).toBe(
+          true,
+        );
       });
     });
 

package/src/v2/components/chat/__tests__/CopilotChatToolCallsView.learning.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+import { mount } from "@vue/test-utils";
+import type { AssistantMessage } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import type { CopilotKitLearningOptions } from "../../../providers/CopilotKitProvider.types";
+import CopilotChatToolCallsView from "../CopilotChatToolCallsView.vue";
+
+// Ported from React's CopilotChatToolCallsView.learning test.
+
+const message: AssistantMessage = {
+  id: "message-1",
+  role: "assistant",
+  content: "",
+  toolCalls: [
+    {
+      id: "tool-1",
+      type: "function",
+      function: { name: "approve", arguments: "{}" },
+    },
+  ],
+};
+const learning: CopilotKitLearningOptions = {
+  sink: () => {},
+  capture: { clicks: false, navigation: false, network: false },
+  autoStart: false,
+};
+
+function mountView(learningProp?: CopilotKitLearningOptions) {
+  return mount(CopilotKitProvider, {
+    props: {
+      runtimeUrl: "/api/copilotkit",
+      ...(learningProp ? { learning: learningProp } : {}),
+    },
+    slots: {
+      default: () =>
+        h(
+          CopilotChatConfigurationProvider,
+          { threadId: "thread-1", agentId: "default" },
+          {
+            default: () =>
+              h("div", { "data-testid": "message" }, [
+                h(
+                  CopilotChatToolCallsView,
+                  { message, messages: [message] },
+                  { "tool-call-approve": () => h("button", "Approve") },
+                ),
+              ]),
+          },
+        ),
+    },
+  });
+}
+
+describe("tool call capture attributes", () => {
+  it("keeps tool UI as a direct child when learning is disabled", () => {
+    const wrapper = mountView();
+
+    const button = wrapper.get("button").element;
+    expect(button.parentElement?.getAttribute("data-testid")).toBe("message");
+    expect(wrapper.find("[data-tool-call-id]").exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("wraps tool UI in data-tool-call-id while learning is configured", () => {
+    const wrapper = mountView(learning);
+
+    const scope = wrapper.get("button").element.parentElement;
+    expect(scope?.getAttribute("data-tool-call-id")).toBe("tool-1");
+    expect((scope as HTMLElement).style.display).toBe("contents");
+    expect(scope?.parentElement?.getAttribute("data-testid")).toBe("message");
+    wrapper.unmount();
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatUserMessage.attachments.test.ts

@@ -0,0 +1,143 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { nextTick } from "vue";
+import { fireEvent, render, screen, within } from "@testing-library/vue";
+import type { UserMessage } from "@ag-ui/core";
+import CopilotChatUserMessage from "../CopilotChatUserMessage.vue";
+
+const message = {
+  id: "user-media",
+  role: "user",
+  content: [
+    { type: "text", text: "Look at these" },
+    {
+      type: "image",
+      source: { type: "url", value: "https://example.com/cat.png" },
+    },
+    {
+      type: "document",
+      source: {
+        type: "data",
+        value: "JVBERi0=",
+        mimeType: "application/pdf",
+      },
+      metadata: { filename: "report.pdf" },
+    },
+  ],
+} as unknown as UserMessage;
+
+describe("CopilotChatUserMessage attachments", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders media parts in the attachments row before the bubble", () => {
+    const { container } = render(CopilotChatUserMessage, {
+      props: { message },
+    });
+
+    const attachments = container.querySelector(
+      ".cpk-user-message-attachments",
+    );
+    expect(attachments).not.toBeNull();
+    const bubble = container.querySelector(".cpk-user-message-bubble");
+    expect(
+      attachments!.compareDocumentPosition(bubble!) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(bubble!.textContent?.trim()).toBe("Look at these");
+
+    const image = within(attachments as HTMLElement).getByRole("img", {
+      name: "Image attachment",
+    });
+    expect(image.getAttribute("src")).toBe("https://example.com/cat.png");
+
+    // The filename comes from the part's metadata.
+    const link = within(attachments as HTMLElement).getByRole("link", {
+      name: "report.pdf",
+    });
+    expect(link.getAttribute("href")).toBe(
+      "data:application/pdf;base64,JVBERi0=",
+    );
+    expect(link.getAttribute("download")).toBe("report.pdf");
+  });
+
+  it("renders no attachments row for a text-only message", () => {
+    const { container } = render(CopilotChatUserMessage, {
+      props: {
+        message: { id: "u", role: "user", content: "Hi" } as UserMessage,
+      },
+    });
+    expect(container.querySelector(".cpk-user-message-attachments")).toBeNull();
+  });
+
+  it("opens an attached image in the lightbox", async () => {
+    render(CopilotChatUserMessage, { props: { message } });
+
+    await fireEvent.click(
+      screen.getByRole("button", { name: "Image attachment" }),
+    );
+    const dialog = screen.getByRole("dialog", { name: "Image attachment" });
+    expect(
+      dialog.querySelector(".cpk-attachment-renderer-lightbox-image"),
+    ).not.toBeNull();
+  });
+
+  it("does not mark a multiline bubble with data-multiline, as React", () => {
+    const { container } = render(CopilotChatUserMessage, {
+      props: {
+        message: {
+          id: "u",
+          role: "user",
+          content: "one\ntwo",
+        } as UserMessage,
+      },
+    });
+    const bubble = container.querySelector(".cpk-user-message-bubble");
+    expect(bubble!.hasAttribute("data-multiline")).toBe(false);
+  });
+});
+
+describe("CopilotChatUserMessage toolbar tooltips", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("shows the copy and edit labels as tooltips, not as title", async () => {
+    render(CopilotChatUserMessage, {
+      props: {
+        message: { id: "u", role: "user", content: "Hi" } as UserMessage,
+        onEditMessage: () => {},
+      },
+    });
+
+    const copy = screen.getByRole("button", { name: "Copy" });
+    const edit = screen.getByTestId("copilot-edit-button");
+    expect(copy.hasAttribute("title")).toBe(false);
+    expect(edit.hasAttribute("title")).toBe(false);
+
+    await fireEvent.focus(copy);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip.textContent).toContain("Copy");
+    expect(tooltip.getAttribute("data-side")).toBe("bottom");
+    expect(copy.getAttribute("aria-describedby")).toBe(tooltip.id);
+    await fireEvent.blur(copy);
+    await nextTick();
+
+    await fireEvent.focus(edit);
+    expect(screen.getByRole("tooltip").textContent).toContain("Edit");
+  });
+
+  it("gives the branch buttons no tooltip or title, as React", async () => {
+    render(CopilotChatUserMessage, {
+      props: {
+        message: { id: "u", role: "user", content: "Hi" } as UserMessage,
+        numberOfBranches: 2,
+        onSwitchToBranch: () => {},
+      },
+    });
+    const next = screen.getByRole("button", { name: "Next branch" });
+    expect(next.hasAttribute("title")).toBe(false);
+    await fireEvent.focus(next);
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatView.inputOverlay.test.ts

@@ -80,10 +80,11 @@ describe("CopilotChatView input overlay layout", () => {
     await waitForMount(screen);
 
     const overlay = screen.getByTestId("copilot-input-overlay");
-    // Class-level assertion — the cpk: prefix avoids false positives from
-    // consumer classes. Absolute + bottom-0 is the contract we care about.
-    expect(overlay.className).toMatch(/cpk:absolute/);
-    expect(overlay.className).toMatch(/cpk:bottom-0/);
+    // The shared stylesheet pins this class to the bottom of the chat
+    // (position: absolute; bottom: 0). jsdom loads no CSS, so assert the class.
+    expect(overlay.classList.contains("cpk-chat-view-input-overlay")).toBe(
+      true,
+    );
 
     // Input (send button) lives inside the overlay, not outside it.
     const sendButton = screen.getByTestId("copilot-chat-input-send");

package/src/v2/components/chat/__tests__/CopilotChatView.rootWidth.test.ts

@@ -1,39 +1,13 @@
-import { readFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
 import { h } from "vue";
 import { mount } from "@vue/test-utils";
+import { stylesheet } from "@copilotkit/core/styles";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
 import CopilotChatView from "../CopilotChatView.vue";
 
 const CHAT_ROOT_SELECTOR = ".copilotKitChat[data-copilotkit]";
 
-// Resolve from this file, so the read does not depend on the working directory.
-// (A `new URL(...)` object fails here: under jsdom it is not Node's URL.)
-const globalsCss = readFileSync(
-  resolve(
-    dirname(fileURLToPath(import.meta.url)),
-    "../../../../styles/globals.css",
-  ),
-  { encoding: "utf8" },
-);
-
-/** Returns the body of the first `@layer <name> { ... }` block. */
-function layerBody(css: string, name: string): string {
-  const start = css.indexOf(`@layer ${name} {`);
-  if (start === -1) return "";
-  let depth = 0;
-  for (let i = css.indexOf("{", start); i < css.length; i++) {
-    if (css[i] === "{") depth++;
-    if (css[i] === "}" && --depth === 0) {
-      return css.slice(css.indexOf("{", start) + 1, i);
-    }
-  }
-  return "";
-}
-
 function mountChatView(props: Record<string, unknown>) {
   return mount(CopilotKitProvider, {
     props: { runtimeUrl: "/api/copilotkit" },
@@ -49,14 +23,14 @@ function mountChatView(props: Record<string, unknown>) {
 }
 
 // PE-1053, the Vue side of PE-788: the chat root is an inline-size container
-// (`cpk:@container`), so its content gives it no intrinsic width. As a flex
+// (`.cpk-chat-view`), so its content gives it no intrinsic width. As a flex
 // item in a row its auto width collapsed to a narrow column. jsdom does no
-// layout, so these tests pin the two halves of the fix: the base-layer width
-// rule, and a chat root that the rule's selector matches.
+// layout, so these tests pin the two halves of the fix: the zero-specificity
+// width rule in the shared stylesheet, and a chat root that the rule's
+// selector matches.
 describe("CopilotChatView root width (PE-1053)", () => {
-  it("fills its container from the base layer, so app widths still win", () => {
-    const base = layerBody(globalsCss, "base").replace(/\s+/g, " ");
-    expect(base).toContain(`${CHAT_ROOT_SELECTOR} { width: 100%; }`);
+  it("fills its container with a :where() rule, so app widths still win", () => {
+    expect(stylesheet).toContain(`:where(${CHAT_ROOT_SELECTOR}){width:100%}`);
   });
 
   // The welcome screen and the message view share this one root element.

package/src/v2/components/chat/__tests__/CopilotModalHeader.slots.e2e.test.ts

@@ -95,7 +95,7 @@ describe("CopilotModalHeader Slot System E2E Tests", () => {
 
         const title = screen.getByTestId("custom-title");
         expect(title.classList.contains("custom-title-class")).toBe(true);
-        expect(title.classList.contains("cpk:text-foreground")).toBe(true);
+        expect(title.classList.contains("cpk-modal-header-title")).toBe(true);
       });
     });
 

package/src/v2/components/chat/__tests__/CopilotPopupView.slots.e2e.test.ts

@@ -540,7 +540,7 @@ describe("CopilotPopupView Slot System E2E Tests", () => {
   });
 
   describe("8. Integration Tests", () => {
-    it("keeps the transparent-background utility on the positioning wrapper", () => {
+    it("keeps the positioning wrapper class on the popup's parent", () => {
       const Host = defineComponent({
         components: { CopilotPopupView },
         setup() {
@@ -554,8 +554,8 @@ describe("CopilotPopupView Slot System E2E Tests", () => {
       const positioningWrapper = popup?.parentElement;
 
       expect(positioningWrapper?.hasAttribute("data-copilotkit")).toBe(true);
-      // jsdom does not load the generated stylesheet; this guards the utility-class contract only.
-      expect(positioningWrapper?.classList.contains("cpk:bg-transparent")).toBe(
+      // jsdom does not load the stylesheet; this guards the class contract only.
+      expect(positioningWrapper?.classList.contains("cpk-popup-view")).toBe(
         true,
       );
     });

package/src/v2/components/chat/__tests__/CopilotSidebarView.position.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+import { mount } from "@vue/test-utils";
+import type { Message } from "@ag-ui/core";
+import { stylesheet } from "@copilotkit/core/styles";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import { StateCapturingAgent } from "../../../__tests__/utils/agents";
+import CopilotSidebar from "../CopilotSidebar.vue";
+import { CopilotSidebarView } from "../index";
+
+// Ported from react-core's CopilotSidebarView.position.test.tsx.
+
+const sampleMessages: Message[] = [
+  { id: "1", role: "user", content: "Hello", timestamp: new Date() } as Message,
+];
+
+/** Declarations of the stylesheet's `:where(<selector>)` rule, outside media queries. */
+function cssRule(selector: string): string {
+  const start = stylesheet.indexOf(`}:where(${selector}){`);
+  if (start === -1) throw new Error(`no rule for ${selector}`);
+  const body = stylesheet.indexOf("{", start + 1) + 1;
+  return stylesheet.slice(body, stylesheet.indexOf("}", body));
+}
+
+function mountSidebarView(props: Record<string, unknown> = {}) {
+  return mount(CopilotKitProvider, {
+    props: { runtimeUrl: "/api/copilotkit" },
+    slots: {
+      default: () =>
+        h(CopilotSidebarView, { messages: sampleMessages, ...props }),
+    },
+  });
+}
+
+function mountSidebar(props: Record<string, unknown> = {}) {
+  return mount(CopilotKitProvider, {
+    props: { agents__unsafe_dev_only: { default: new StateCapturingAgent() } },
+    slots: { default: () => h(CopilotSidebar, props) },
+  });
+}
+
+describe("CopilotSidebarView position prop", () => {
+  describe("CopilotSidebarView", () => {
+    it("defaults to right-anchored when position is omitted", () => {
+      const aside = mountSidebarView().get("[data-copilot-sidebar]");
+      expect(aside.classes()).toContain("cpk-sidebar-view");
+      expect(aside.attributes("data-position")).toBe("right");
+    });
+
+    it('renders right-anchored when position="right" explicitly', () => {
+      const aside = mountSidebarView({ position: "right" }).get(
+        "[data-copilot-sidebar]",
+      );
+      expect(aside.attributes("data-position")).toBe("right");
+    });
+
+    it('renders left-anchored when position="left"', () => {
+      const aside = mountSidebarView({ position: "left" }).get(
+        "[data-copilot-sidebar]",
+      );
+      expect(aside.classes()).toContain("cpk-sidebar-view");
+      expect(aside.attributes("data-position")).toBe("left");
+    });
+
+    it('slides off to the left when closed and position="left"', () => {
+      const aside = mountSidebarView({
+        position: "left",
+        defaultOpen: false,
+      }).get("[data-copilot-sidebar]");
+      expect(aside.classes()).toContain("cpk-sidebar-view-closed");
+      expect(aside.attributes("data-position")).toBe("left");
+    });
+
+    it('anchors the toggle button to the left when position="left"', () => {
+      const toggle = mountSidebarView({ position: "left" }).get(
+        '[data-slot="chat-toggle-button"]',
+      );
+      expect(toggle.classes()).toContain("cpk-sidebar-view-toggle-button-left");
+    });
+
+    it("keeps the toggle button right-anchored by default", () => {
+      const toggle = mountSidebarView().get('[data-slot="chat-toggle-button"]');
+      expect(toggle.classes()).toContain("cpk-chat-toggle-button");
+      expect(toggle.classes()).not.toContain(
+        "cpk-sidebar-view-toggle-button-left",
+      );
+    });
+
+    it("makes room for the sidebar on the edge it docks to", () => {
+      const left = mountSidebarView({ position: "left", width: 400 });
+      expect(left.html()).toContain("margin-inline-start: 400px");
+      expect(left.html()).not.toContain("margin-inline-end");
+
+      const right = mountSidebarView({ width: 400 });
+      expect(right.html()).toContain("margin-inline-end: 400px");
+    });
+  });
+
+  // jsdom does no layout, so these pin the rules the attributes above rely on.
+  describe("stylesheet", () => {
+    it("docks left for data-position=left", () => {
+      const left = cssRule(".cpk-sidebar-view[data-position=left]");
+      expect(left).toContain("right:auto;left:0");
+      expect(cssRule(".cpk-sidebar-view-closed[data-position=left]")).toBe(
+        "translate:-100% 0",
+      );
+      expect(cssRule(".cpk-sidebar-view-toggle-button-left")).toBe(
+        "right:auto;left:1.5rem",
+      );
+    });
+  });
+
+  describe("CopilotSidebar wrapper", () => {
+    it('forwards position="left" through to CopilotSidebarView', () => {
+      const aside = mountSidebar({ position: "left" }).get(
+        "[data-copilot-sidebar]",
+      );
+      expect(aside.attributes("data-position")).toBe("left");
+    });
+
+    it("defaults to right-anchored when position is omitted", () => {
+      const aside = mountSidebar().get("[data-copilot-sidebar]");
+      expect(aside.attributes("data-position")).toBe("right");
+    });
+  });
+});

package/src/v2/components/chat/__tests__/messageFeedbackDefaults.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import type { Component } from "vue";
+import CopilotChat from "../CopilotChat.vue";
+import CopilotChatView from "../CopilotChatView.vue";
+import CopilotChatMessageView from "../CopilotChatMessageView.vue";
+import CopilotPopup from "../CopilotPopup.vue";
+import CopilotPopupView from "../CopilotPopupView.vue";
+import CopilotSidebar from "../CopilotSidebar.vue";
+import CopilotSidebarView from "../CopilotSidebarView.vue";
+
+type WithProps = { props?: Record<string, { default?: unknown }> };
+
+// Vue turns a missing boolean prop into `false`, so each component that
+// declares `messageFeedback` must default it to `true`, or it would turn
+// reply ratings off for every chat built on it.
+describe("messageFeedback defaults", () => {
+  it.each([
+    ["CopilotChat", CopilotChat],
+    ["CopilotChatView", CopilotChatView],
+    ["CopilotChatMessageView", CopilotChatMessageView],
+    ["CopilotPopup", CopilotPopup],
+    ["CopilotPopupView", CopilotPopupView],
+    ["CopilotSidebar", CopilotSidebar],
+    ["CopilotSidebarView", CopilotSidebarView],
+  ] as [string, Component][])(
+    "%s defaults messageFeedback to true",
+    (_, component) => {
+      const props = (component as WithProps).props;
+      expect(props?.messageFeedback).toBeDefined();
+      expect(props?.messageFeedback?.default).toBe(true);
+    },
+  );
+});

package/src/v2/components/chat/__tests__/modalChatDisplayProps.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+import type { Component } from "vue";
+import { mount } from "@vue/test-utils";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import { StateCapturingAgent } from "../../../__tests__/utils/agents";
+import CopilotChatMessageView from "../CopilotChatMessageView.vue";
+import CopilotPopup from "../CopilotPopup.vue";
+import CopilotSidebar from "../CopilotSidebar.vue";
+
+function mountChat(component: Component, props: Record<string, unknown>) {
+  return mount(CopilotKitProvider, {
+    props: { agents__unsafe_dev_only: { default: new StateCapturingAgent() } },
+    slots: {
+      default: () => h(component, { welcomeScreen: false, ...props }),
+    },
+  });
+}
+
+// The sidebar and popup draw their chat through their own views, which must
+// pass the message view's display settings on.
+describe.each([
+  ["CopilotSidebar", CopilotSidebar],
+  ["CopilotPopup", CopilotPopup],
+] as [string, Component][])("%s message view settings", (_, component) => {
+  it("passes toolCallDisplay and messageFeedback to the message view", () => {
+    const wrapper = mountChat(component, {
+      toolCallDisplay: "line",
+      messageFeedback: false,
+    });
+
+    const view = wrapper.findComponent(CopilotChatMessageView);
+    expect(view.props("toolCallDisplay")).toBe("line");
+    expect(view.props("messageFeedback")).toBe(false);
+  });
+
+  it("keeps reply ratings on by default", () => {
+    const wrapper = mountChat(component, {});
+
+    const view = wrapper.findComponent(CopilotChatMessageView);
+    expect(view.props("toolCallDisplay")).toBe("grouped");
+    expect(view.props("messageFeedback")).toBe(true);
+  });
+});

package/src/v2/components/chat/index.ts

@@ -13,7 +13,9 @@ export { default as CopilotChatReasoningMessage } from "./CopilotChatReasoningMe
 export { default as CopilotChatSuggestionPill } from "./CopilotChatSuggestionPill.vue";
 export { default as CopilotChatSuggestionView } from "./CopilotChatSuggestionView.vue";
 export { default as CopilotChatToolCallsView } from "./CopilotChatToolCallsView.vue";
+export { default as CopilotChatToolCallGroup } from "./CopilotChatToolCallGroup.vue";
 export { default as CopilotChatUserMessage } from "./CopilotChatUserMessage.vue";
+export { default as CopilotChatWorkSummary } from "./CopilotChatWorkSummary.vue";
 export { default as CopilotChatView } from "./CopilotChatView.vue";
 export { default as CopilotThreadsDrawer } from "./CopilotThreadsDrawer.vue";
 import _CopilotChatToggleButton from "./CopilotChatToggleButton.vue";

package/src/v2/components/chat/inspector-shortcuts.ts

@@ -0,0 +1,34 @@
+import { onBeforeUnmount, readonly, ref } from "vue";
+import type { Ref } from "vue";
+
+// Page-lifetime preference, shared by every message and chat. Deliberately
+// avoid sessionStorage: it survives reloads, while this preference must not.
+let shortcutsHidden = false;
+const listeners = new Set<() => void>();
+
+/**
+ * Whether the user hid the Inspector buttons in the message toolbars ("Hide
+ * this icon"), until the page reloads.
+ * @internal
+ */
+export function useInspectorShortcutsHidden(): Readonly<Ref<boolean>> {
+  const hidden = ref(shortcutsHidden);
+  const listener = () => {
+    hidden.value = shortcutsHidden;
+  };
+  listeners.add(listener);
+  onBeforeUnmount(() => listeners.delete(listener));
+  return readonly(hidden);
+}
+
+/** Hides the Inspector buttons of every message until the page reloads. */
+export function hideInspectorShortcuts(): void {
+  shortcutsHidden = true;
+  listeners.forEach((listener) => listener());
+}
+
+/** @internal Shows the buttons again, so each test starts fresh. */
+export function ɵresetInspectorShortcuts(): void {
+  shortcutsHidden = false;
+  listeners.forEach((listener) => listener());
+}