@agent-native/toolkit 0.23.1 → 0.198.1

package/src/app/chat/MultiTabAssistantChat.spec.tsx

@@ -0,0 +1,3623 @@
+// @vitest-environment happy-dom
+
+import {
+  AGENT_CHAT_SUBMIT_RESULT_EVENT,
+  AGENT_CHAT_CONTEXT_CHANGED_EVENT,
+  cancelAgentChatSubmit,
+  claimAgentChatOpenRequest,
+  claimAgentChatSubmit,
+  clearAgentChatContext,
+  drainBufferedAgentChatOpenRequests,
+  drainBufferedAgentChatSubmits,
+  listAgentChatContext,
+  removeAgentChatContextItem,
+  requestAgentChatThreadOpen,
+  requestAgentTaskOpen,
+  setAgentChatContextItem,
+  sendToAgentChat,
+} from "@agent-native/core/client/agent-chat";
+import { CHAT_MODEL_SELECTION_CHANGED_EVENT } from "@agent-native/core/client/agent-chat";
+import type {
+  ChatThreadScope,
+  ChatThreadSummary,
+} from "@agent-native/core/client/agent-chat";
+import { buildChatModelGroups } from "@agent-native/core/client/chat-model-groups";
+import { getBrowserTabId } from "@agent-native/core/client/hooks";
+import { invalidateClientStatusRequests } from "@agent-native/core/client/status-requests";
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  MultiTabAssistantChat,
+  type MultiTabAssistantChatHeaderProps,
+} from "./MultiTabAssistantChat.js";
+
+afterEach(() => {
+  invalidateClientStatusRequests();
+  modelCatalogMocks.load = null;
+});
+
+function clearBufferedAgentChatRequests(): void {
+  for (const submit of drainBufferedAgentChatSubmits()) {
+    if (typeof submit.submitMessageId === "string") {
+      claimAgentChatSubmit(submit.submitMessageId);
+    }
+  }
+  for (const request of drainBufferedAgentChatOpenRequests()) {
+    claimAgentChatOpenRequest(request.id);
+  }
+}
+
+function openTabsStorageKey(
+  storageKey: string,
+  scope?: { type: string; id: string },
+): string {
+  const scopePart = scope ? `:scope:${scope.type}:${scope.id}` : "";
+  return `agent-chat-open-tabs:${storageKey}:tab:${getBrowserTabId()}${scopePart}`;
+}
+
+function legacyOpenTabsStorageKey(
+  storageKey: string,
+  scope?: { type: string; id: string },
+): string {
+  const scopePart = scope ? `:scope:${scope.type}:${scope.id}` : "";
+  return `agent-chat-open-tabs:${storageKey}${scopePart}`;
+}
+
+const chatHandleMocks = vi.hoisted(() => ({
+  sendMessage: vi.fn(async () => ({ status: "submitted" as const })),
+  implementPlan: vi.fn(() => false),
+  prefillMessage: vi.fn(),
+  setComposerContextItem: vi.fn(),
+  removeComposerContextItem: vi.fn(),
+  clearComposerContextItems: vi.fn(),
+  sendRecoveryMessage: vi.fn(),
+  queueMessage: vi.fn(),
+  focusComposer: vi.fn(),
+  exportThreadSnapshot: vi.fn(() => null),
+}));
+
+const assistantChatMockState = vi.hoisted(() => ({
+  onThreadRestoreNotFound: undefined as (() => void) | undefined,
+  onSlashCommand: undefined as ((command: string) => void) | undefined,
+  onForkedThread: undefined as ((threadId: string) => void) | undefined,
+  branchNavigation: undefined as
+    | {
+        index: number;
+        count: number;
+        onPrevious: () => void | Promise<void>;
+        onNext: () => void | Promise<void>;
+      }
+    | undefined,
+}));
+
+const threadMocks = vi.hoisted(() => ({
+  activeThreadId: "thread-1" as string | null,
+  evictedThreadIds: [] as string[],
+  threads: [
+    {
+      id: "thread-1",
+      title: "Main thread",
+      preview: "",
+      messageCount: 0,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      scope: null,
+    },
+  ],
+  createThread: vi.fn(
+    async (requestedId?: string) => requestedId ?? "thread-2",
+  ),
+  openThread: vi.fn(async () => "opened" as const),
+  switchThread: vi.fn(),
+  detachThread: vi.fn(),
+  forkThread: vi.fn(),
+  saveThreadData: vi.fn(),
+  generateTitle: vi.fn(async () => null),
+  searchThreads: vi.fn(async () => []),
+  refreshThreads: vi.fn(async () => undefined),
+  isNewThread: vi.fn(() => false),
+  pinThread: vi.fn(async () => true),
+  renameThread: vi.fn(async () => true),
+}));
+
+const chatThreadHookMocks = vi.hoisted(() => ({
+  useChatThreads: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/host", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@agent-native/core/client/host")>();
+  return {
+    ...actual,
+    getFramePostMessageTargetOrigin: () => null,
+    isInBuilderFrame: () => false,
+    isTrustedBuilderMessage: () => false,
+    isTrustedFrameMessage: () => true,
+    sendToBuilderChat: vi.fn(),
+  };
+});
+vi.mock("@agent-native/core/client/mcp-app-host", () => ({
+  sendMcpAppHostMessage: () => null,
+}));
+vi.mock("@agent-native/core/client/api-path", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@agent-native/core/client/api-path")>();
+  return { ...actual, agentNativePath: (path: string) => path };
+});
+vi.mock("@agent-native/core/client/agent-chat", async (importOriginal) => {
+  const actual =
+    await importOriginal<
+      typeof import("@agent-native/core/client/agent-chat")
+    >();
+  return {
+    ...actual,
+    useChatThreads: chatThreadHookMocks.useChatThreads,
+    loadChatModelCatalog: () =>
+      modelCatalogMocks.load?.() ?? actual.loadChatModelCatalog(),
+  };
+});
+vi.mock("./RunStuckBanner.js", () => ({
+  RunStuckBanner: () => null,
+}));
+
+vi.mock("@agent-native/toolkit/ui/tooltip", () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+vi.mock("@agent-native/toolkit/ui/popover", () => ({
+  Popover: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  PopoverAnchor: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+const ANTHROPIC_ENGINES = [
+  {
+    name: "anthropic",
+    label: "Claude",
+    supportedModels: ["claude-sonnet-5"],
+    requiredEnvVars: ["ANTHROPIC_API_KEY"],
+  },
+  {
+    name: "ai-sdk:openai",
+    label: "OpenAI",
+    supportedModels: ["gpt-5.6-luna"],
+    requiredEnvVars: ["OPENAI_API_KEY"],
+  },
+];
+
+const actionMocks = vi.hoisted(() => ({ callAction: vi.fn(async () => null) }));
+const modelCatalogMocks = vi.hoisted(() => ({
+  load: null as null | (() => Promise<unknown>),
+}));
+
+vi.mock("@agent-native/core/client/hooks", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@agent-native/core/client/hooks")>();
+  return { ...actual, ...actionMocks };
+});
+
+function stubCatalog(
+  engines: unknown[],
+  configuredKeys: string[],
+  builderConfigured = false,
+) {
+  invalidateClientStatusRequests();
+  modelCatalogMocks.load = async () => ({
+    state: "available",
+    groups: buildChatModelGroups({
+      engines: engines as Parameters<typeof buildChatModelGroups>[0]["engines"],
+      configuredKeys,
+      builderConnected: builderConfigured,
+    }),
+    defaultModel: "gpt-5-6-luna",
+    loadLiveGroups: async () => null,
+  });
+  actionMocks.callAction.mockResolvedValue({ engines } as never);
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: unknown) => {
+      const url = String(input);
+      if (url.includes("env-status")) {
+        return Response.json(
+          configuredKeys.map((key) => ({ key, configured: true })),
+        );
+      }
+      if (url.includes("builder/status")) {
+        return Response.json({ configured: builderConfigured });
+      }
+      return Response.json({ value: null });
+    }),
+  );
+}
+
+async function mountWithCatalog(
+  engines: unknown[],
+  configuredKeys: string[],
+  builderConfigured = false,
+) {
+  stubCatalog(engines, configuredKeys, builderConfigured);
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const localRoot = createRoot(el);
+  await act(async () => {
+    localRoot.render(<MultiTabAssistantChat storageKey="catalog-test" />);
+  });
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+  return {
+    engineOf: () =>
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-selected-engine") ?? null,
+    modelOf: () =>
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-selected-model") ?? null,
+    catalogOf: () =>
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-model-catalog") ?? null,
+    async cleanup() {
+      await act(async () => localRoot.unmount());
+      el.remove();
+    },
+  };
+}
+
+chatThreadHookMocks.useChatThreads.mockImplementation(() => threadMocks);
+
+vi.mock("./AgentKitAssistantChat.js", async () => {
+  const React = await import("react");
+  return {
+    AgentKitAssistantChat: React.forwardRef(function AgentKitAssistantChatMock(
+      _props: unknown,
+      ref,
+    ) {
+      const props = _props as {
+        composerSlot?: React.ReactNode;
+        emptyStateAddon?: React.ReactNode;
+        selectedModel?: string;
+        selectedEngine?: string;
+        selectedEffort?: string;
+        availableModels?: Array<{ engine: string; configured: boolean }>;
+        composerDisabled?: boolean;
+        composerDisabledPlaceholder?: string;
+        isActiveComposer?: boolean;
+        contextScope?: ChatThreadScope | null;
+        contextNamespace?: string;
+        onThreadRestoreNotFound?: () => void;
+        onSlashCommand?: (command: string) => void;
+        onForkedThread?: (threadId: string) => void;
+        branchNavigation?: typeof assistantChatMockState.branchNavigation;
+      };
+      assistantChatMockState.onThreadRestoreNotFound =
+        props.onThreadRestoreNotFound;
+      assistantChatMockState.onSlashCommand = props.onSlashCommand;
+      assistantChatMockState.onForkedThread = props.onForkedThread;
+      assistantChatMockState.branchNavigation = props.branchNavigation;
+      React.useImperativeHandle(ref, () => ({
+        sendMessage: chatHandleMocks.sendMessage,
+        implementPlan: chatHandleMocks.implementPlan,
+        prefillMessage: chatHandleMocks.prefillMessage,
+        setComposerContextItem: chatHandleMocks.setComposerContextItem,
+        removeComposerContextItem: chatHandleMocks.removeComposerContextItem,
+        clearComposerContextItems: chatHandleMocks.clearComposerContextItems,
+        sendRecoveryMessage: chatHandleMocks.sendRecoveryMessage,
+        queueMessage: chatHandleMocks.queueMessage,
+        isRunning: () => false,
+        hasInFlightWork: () => false,
+        focusComposer: chatHandleMocks.focusComposer,
+        exportThreadSnapshot: chatHandleMocks.exportThreadSnapshot,
+      }));
+      return (
+        <div
+          data-testid="assistant-chat"
+          data-selected-model={props.selectedModel}
+          data-selected-engine={props.selectedEngine}
+          data-reasoning-effort={props.selectedEffort}
+          data-model-catalog={props.availableModels
+            ?.map((group) => `${group.engine}:${group.configured}`)
+            .join(",")}
+          data-composer-disabled={props.composerDisabled ? "true" : "false"}
+          data-composer-submission-disabled={
+            props.composerSubmissionDisabled ? "true" : "false"
+          }
+          data-disabled-placeholder={props.composerDisabledPlaceholder}
+          data-composer-active={props.isActiveComposer ? "true" : "false"}
+          data-context-scope={
+            props.contextScope
+              ? `${props.contextScope.type}:${props.contextScope.id}`
+              : undefined
+          }
+          data-context-namespace={props.contextNamespace}
+        >
+          {props.emptyStateAddon}
+          {props.composerSlot}
+        </div>
+      );
+    }),
+  };
+});
+
+function resetThreadMocks() {
+  assistantChatMockState.onThreadRestoreNotFound = undefined;
+  assistantChatMockState.onSlashCommand = undefined;
+  assistantChatMockState.onForkedThread = undefined;
+  assistantChatMockState.branchNavigation = undefined;
+  threadMocks.activeThreadId = "thread-1";
+  threadMocks.evictedThreadIds = [];
+  threadMocks.threads = [
+    {
+      id: "thread-1",
+      title: "Main thread",
+      preview: "",
+      messageCount: 0,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      scope: null,
+    },
+  ];
+  threadMocks.createThread.mockReset();
+  threadMocks.createThread.mockImplementation(
+    async (requestedId?: string) => requestedId ?? "thread-2",
+  );
+  threadMocks.openThread.mockReset();
+  threadMocks.openThread.mockResolvedValue("opened");
+  threadMocks.switchThread.mockReset();
+  threadMocks.isNewThread.mockReset();
+  threadMocks.isNewThread.mockReturnValue(false);
+  threadMocks.pinThread.mockReset();
+  threadMocks.pinThread.mockImplementation(async () => true);
+  threadMocks.renameThread.mockReset();
+  threadMocks.renameThread.mockImplementation(async () => true);
+  chatThreadHookMocks.useChatThreads.mockReset();
+  chatThreadHookMocks.useChatThreads.mockImplementation(() => threadMocks);
+}
+
+function dispatchSubmitChat(data: Record<string, unknown>) {
+  window.dispatchEvent(
+    new MessageEvent("message", {
+      data: {
+        type: "agentNative.submitChat",
+        data,
+      },
+      origin: window.location.origin,
+    }),
+  );
+}
+
+function ensureLocalStorage() {
+  if (window.localStorage) return;
+  const values = new Map<string, string>();
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    value: {
+      get length() {
+        return values.size;
+      },
+      clear: () => values.clear(),
+      getItem: (key: string) => values.get(key) ?? null,
+      key: (index: number) => Array.from(values.keys())[index] ?? null,
+      removeItem: (key: string) => values.delete(key),
+      setItem: (key: string, value: string) => values.set(key, String(value)),
+    } satisfies Storage,
+  });
+}
+
+describe("MultiTabAssistantChat postMessage bridge", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    resetThreadMocks();
+    ensureLocalStorage();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ value: null })),
+    );
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      openTabsStorageKey("bridge-test"),
+      JSON.stringify(["thread-1"]),
+    );
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    clearAgentChatContext();
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("prefills the active composer without submitting when submit is false", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Review this before sending",
+        context: "Selected rows: a, b",
+        submit: false,
+        openSidebar: true,
+      });
+    });
+
+    expect(chatHandleMocks.prefillMessage).toHaveBeenCalledWith(
+      "Review this before sending\n\n<context>\nSelected rows: a, b\n</context>",
+    );
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+  });
+
+  it("reports a rejected queued submission instead of leaving it unhandled", async () => {
+    const results: unknown[] = [];
+    const onResult = (event: Event) =>
+      results.push((event as CustomEvent).detail);
+    window.addEventListener(AGENT_CHAT_SUBMIT_RESULT_EVENT, onResult);
+    chatHandleMocks.sendMessage.mockRejectedValueOnce(
+      new Error("attachment upload failed"),
+    );
+
+    act(() => {
+      dispatchSubmitChat({
+        message: "Create a deck",
+        submitMessageId: "failed-send",
+      });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    window.removeEventListener(AGENT_CHAT_SUBMIT_RESULT_EVENT, onResult);
+    expect(results).toContainEqual({
+      submitMessageId: "failed-send",
+      delivered: false,
+      reason: "submission-failed",
+    });
+  });
+
+  it("routes a correlated continuation to its original tab after focus changes", async () => {
+    const generationThread = {
+      id: "generation-thread",
+      title: "Generation thread",
+      preview: "Create a presentation",
+      messageCount: 1,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      scope: null,
+    };
+    threadMocks.activeThreadId = "other-thread";
+    threadMocks.threads = [...threadMocks.threads, generationThread];
+    window.localStorage.setItem(
+      openTabsStorageKey("bridge-test"),
+      JSON.stringify(["thread-1", "generation-thread", "other-thread"]),
+    );
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "other-thread",
+        title: "Other thread",
+        preview: "Unrelated chat",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+      await Promise.resolve();
+    });
+    chatHandleMocks.sendMessage.mockClear();
+    threadMocks.switchThread.mockClear();
+
+    const targetEvents: Event[] = [];
+    const onTarget = (event: Event) => targetEvents.push(event);
+    window.addEventListener("agentNative.chatSubmitTarget", onTarget);
+    act(() => {
+      dispatchSubmitChat({
+        message: "Here are my answers.",
+        context: "Continue deck generation.",
+        submit: true,
+        targetTabId: "generation-thread",
+        submitMessageId: "guided-answer-submit",
+      });
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Here are my answers.\n\n<context>\nContinue deck generation.\n</context>",
+      undefined,
+      { submitMessageId: "guided-answer-submit" },
+    );
+    expect((targetEvents[0] as CustomEvent).detail).toEqual({
+      submitMessageId: "guided-answer-submit",
+      tabId: "generation-thread",
+    });
+    expect(threadMocks.switchThread).not.toHaveBeenCalled();
+    window.removeEventListener("agentNative.chatSubmitTarget", onTarget);
+  });
+
+  it("preserves a host-disabled composer and its explanation after model loading", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          composerDisabled
+          composerDisabledPlaceholder="Connect an integration first"
+        />,
+      );
+      await Promise.resolve();
+    });
+    const composer = container.querySelector('[data-testid="assistant-chat"]');
+    expect(composer?.getAttribute("data-composer-disabled")).toBe("true");
+    expect(composer?.getAttribute("data-disabled-placeholder")).toBe(
+      "Connect an integration first",
+    );
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          composerDisabled={false}
+        />,
+      );
+    });
+    expect(composer?.getAttribute("data-composer-disabled")).toBe("false");
+    expect(composer?.getAttribute("data-disabled-placeholder")).toBeNull();
+  });
+
+  it("deactivates the selected composer while chat content is hidden", async () => {
+    await act(async () =>
+      root.render(
+        <MultiTabAssistantChat storageKey="bridge-test" contentHidden />,
+      ),
+    );
+    const composer = container.querySelector('[data-testid="assistant-chat"]');
+    expect(composer?.getAttribute("data-composer-active")).toBe("false");
+    await act(async () =>
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          contentHidden={false}
+        />,
+      ),
+    );
+    expect(composer?.getAttribute("data-composer-active")).toBe("true");
+  });
+
+  it("reopens a closed target tab before delivering a continuation", async () => {
+    const generationThread = {
+      id: "closed-generation-thread",
+      title: "Generation thread",
+      preview: "Create a presentation",
+      messageCount: 1,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      scope: null,
+    };
+    threadMocks.threads = [...threadMocks.threads, generationThread];
+    threadMocks.switchThread.mockImplementation((threadId: string) => {
+      threadMocks.activeThreadId = threadId;
+    });
+    threadMocks.switchThread.mockClear();
+    chatHandleMocks.sendMessage.mockClear();
+
+    act(() => {
+      dispatchSubmitChat({
+        message: "Continue the deck generation.",
+        submit: true,
+        targetTabId: generationThread.id,
+        submitMessageId: "closed-generation-submit",
+      });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 60));
+    });
+
+    expect(threadMocks.switchThread).toHaveBeenCalledWith(generationThread.id);
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Continue the deck generation.",
+      undefined,
+      { submitMessageId: "closed-generation-submit" },
+    );
+    expect(
+      JSON.parse(
+        window.localStorage.getItem(openTabsStorageKey("bridge-test")) ?? "[]",
+      ),
+    ).toContain(generationThread.id);
+  });
+
+  it("activates an open targeted tab when it has no mounted chat ref", async () => {
+    const generationThread = {
+      id: "unmounted-generation-thread",
+      title: "Generation thread",
+      preview: "Create a presentation",
+      messageCount: 1,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      scope: null,
+    };
+    threadMocks.threads = [...threadMocks.threads, generationThread];
+    threadMocks.switchThread.mockImplementation(() => undefined);
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent("agent-task-open", {
+          detail: {
+            threadId: generationThread.id,
+          },
+        }),
+      );
+    });
+    expect(threadMocks.activeThreadId).toBe("thread-1");
+    expect(
+      container.querySelectorAll('[data-testid="assistant-chat"]'),
+    ).toHaveLength(1);
+
+    threadMocks.switchThread.mockImplementation((threadId: string) => {
+      threadMocks.activeThreadId = threadId;
+    });
+    threadMocks.switchThread.mockClear();
+    chatHandleMocks.sendMessage.mockClear();
+    act(() => {
+      dispatchSubmitChat({
+        message: "Continue the deck generation.",
+        submit: true,
+        targetTabId: generationThread.id,
+        submitMessageId: "unmounted-generation-submit",
+      });
+    });
+    expect(threadMocks.switchThread).toHaveBeenCalledWith(generationThread.id);
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+      await Promise.resolve();
+    });
+    expect(
+      container.querySelectorAll('[data-testid="assistant-chat"]'),
+    ).toHaveLength(2);
+  });
+
+  it("defaults effort to high", () => {
+    expect(
+      container
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-reasoning-effort"),
+    ).toBe("high");
+  });
+
+  it("defaults a fresh chat to a configured model group", async () => {
+    const view = await mountWithCatalog(
+      [
+        {
+          name: "builder",
+          label: "Builder.io Gateway",
+          supportedModels: ["gpt-5-6-luna"],
+          requiredEnvVars: ["BUILDER_PRIVATE_KEY", "BUILDER_PUBLIC_KEY"],
+        },
+      ],
+      [],
+      true,
+    );
+
+    expect(view.engineOf()).toBe("builder");
+    await view.cleanup();
+  });
+
+  it("offers a provider's own key next to Builder.io", async () => {
+    const view = await mountWithCatalog(
+      [
+        {
+          name: "builder",
+          label: "Builder.io Gateway",
+          supportedModels: ["gpt-5-6-luna"],
+          requiredEnvVars: ["BUILDER_PRIVATE_KEY", "BUILDER_PUBLIC_KEY"],
+        },
+        {
+          name: "ai-sdk:openai",
+          label: "OpenAI",
+          supportedModels: ["gpt-5.6-luna"],
+          requiredEnvVars: ["OPENAI_API_KEY"],
+        },
+      ],
+      ["OPENAI_API_KEY"],
+      true,
+    );
+
+    expect(view.catalogOf()).toBe("builder:true,ai-sdk:openai:true");
+    await view.cleanup();
+  });
+
+  it("keeps a fresh chat editable and preserves the host send gate", async () => {
+    const engines = [
+      {
+        name: "builder",
+        label: "Builder.io Gateway",
+        supportedModels: ["gpt-5-6-luna"],
+        requiredEnvVars: ["BUILDER_PRIVATE_KEY", "BUILDER_PUBLIC_KEY"],
+      },
+    ];
+    stubCatalog(engines, [], true);
+    let resolveEngineList!: (value: unknown) => void;
+    modelCatalogMocks.load = () =>
+      new Promise((resolve) => (resolveEngineList = resolve));
+
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const localRoot = createRoot(el);
+    act(() => {
+      localRoot.render(
+        <MultiTabAssistantChat
+          storageKey="pending-catalog"
+          composerSubmissionDisabled
+        />,
+      );
+    });
+
+    expect(
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-composer-disabled"),
+    ).toBe("false");
+    expect(
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-composer-submission-disabled"),
+    ).toBe("true");
+
+    await act(async () => {
+      resolveEngineList({
+        state: "available",
+        groups: [],
+        defaultModel: "gpt-5-6-luna",
+        loadLiveGroups: async () => null,
+      });
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    modelCatalogMocks.load = null;
+
+    expect(
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-composer-disabled"),
+    ).toBe("false");
+    expect(
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-composer-submission-disabled"),
+    ).toBe("true");
+
+    await act(async () => localRoot.unmount());
+    el.remove();
+  });
+
+  it("applies a submitted model override before the engine list loads", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Generate design for hi page",
+        submit: true,
+        model: "gpt-5-6-luna",
+        engine: "builder",
+        effort: "medium",
+      });
+    });
+
+    const chat = container.querySelector("[data-testid='assistant-chat']");
+    expect(chat?.getAttribute("data-selected-model")).toBe("gpt-5-6-luna");
+    expect(chat?.getAttribute("data-selected-engine")).toBe("builder");
+  });
+
+  it("treats a blank submitted engine as absent rather than as a value", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Generate design for hi page",
+        submit: true,
+        model: "gpt-5-6-luna",
+        engine: "",
+      });
+    });
+
+    const chat = container.querySelector("[data-testid='assistant-chat']");
+    expect(chat?.getAttribute("data-selected-model")).toBe("gpt-5-6-luna");
+    expect(chat?.getAttribute("data-selected-engine")).toBeNull();
+  });
+
+  it("resolves an engine from the catalog when the submit carries none", async () => {
+    const view = await mountWithCatalog(ANTHROPIC_ENGINES, [
+      "ANTHROPIC_API_KEY",
+    ]);
+    await act(async () => {
+      dispatchSubmitChat({
+        message: "m",
+        submit: true,
+        model: "claude-sonnet-5",
+      });
+      await Promise.resolve();
+    });
+    expect(view.engineOf()).toBe("anthropic");
+    await view.cleanup();
+  });
+
+  it("keeps the last model readiness when status refresh is unavailable", async () => {
+    const view = await mountWithCatalog(ANTHROPIC_ENGINES, [
+      "ANTHROPIC_API_KEY",
+    ]);
+    const initialCatalog = view.catalogOf();
+    expect(initialCatalog).toContain("anthropic:true");
+    expect(initialCatalog).toContain("ai-sdk:openai:false");
+
+    invalidateClientStatusRequests();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Promise.reject(new Error("down"))),
+    );
+    await act(async () => {
+      window.dispatchEvent(new Event("agent-engine:configured-changed"));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(view.catalogOf()).toBe(initialCatalog);
+    await view.cleanup();
+  });
+
+  it("keeps a host-supplied model catalog instead of the discovered one", async () => {
+    stubCatalog(ANTHROPIC_ENGINES, ["ANTHROPIC_API_KEY"]);
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const localRoot = createRoot(el);
+    await act(async () => {
+      localRoot.render(
+        <MultiTabAssistantChat
+          storageKey="host-catalog-test"
+          availableModels={[
+            {
+              engine: "host",
+              label: "Host",
+              models: ["host-model"],
+              configured: true,
+            },
+          ]}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(
+      el
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-model-catalog"),
+    ).toBe("host:true");
+
+    await act(async () => localRoot.unmount());
+    el.remove();
+  });
+
+  it("honors a submitted engine the catalog offers but does not pair with the model", async () => {
+    const view = await mountWithCatalog(ANTHROPIC_ENGINES, [
+      "ANTHROPIC_API_KEY",
+    ]);
+    await act(async () => {
+      dispatchSubmitChat({
+        message: "m",
+        submit: true,
+        model: "claude-sonnet-5",
+        engine: "ai-sdk:openai",
+      });
+      await Promise.resolve();
+    });
+    expect(view.engineOf()).toBe("ai-sdk:openai");
+    await view.cleanup();
+  });
+
+  it("heals a selection whose engine the catalog no longer offers", async () => {
+    const view = await mountWithCatalog(ANTHROPIC_ENGINES, [
+      "ANTHROPIC_API_KEY",
+    ]);
+    await act(async () => {
+      dispatchSubmitChat({
+        message: "m",
+        submit: true,
+        model: "claude-sonnet-5",
+        engine: "builder",
+      });
+      await Promise.resolve();
+    });
+    expect(view.engineOf()).toBe("anthropic");
+    await view.cleanup();
+  });
+
+  it("heals a persisted selection when its provider is hidden as unconfigured", async () => {
+    window.localStorage.setItem(
+      "agent-native:chat-models:selection:catalog-test",
+      JSON.stringify({ model: "z-ai/glm-5.2", engine: "ai-sdk:openrouter" }),
+    );
+    const view = await mountWithCatalog(
+      [
+        ...ANTHROPIC_ENGINES,
+        {
+          name: "ai-sdk:openrouter",
+          label: "OpenRouter",
+          supportedModels: ["z-ai/glm-5.2"],
+          requiredEnvVars: ["OPENROUTER_API_KEY"],
+        },
+      ],
+      ["ANTHROPIC_API_KEY"],
+    );
+
+    expect(view.engineOf()).toBe("anthropic");
+    expect(view.modelOf()).toBe("claude-sonnet-5");
+    await view.cleanup();
+  });
+
+  it("applies a submitted model override sent without an engine", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Generate design for hi page",
+        submit: true,
+        model: "claude-opus-4-8",
+      });
+    });
+
+    expect(
+      container
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-selected-model"),
+    ).toBe("claude-opus-4-8");
+  });
+
+  it("adopts model changes persisted by another shared chat surface", async () => {
+    const key = "agent-native:chat-models:selection:bridge-test";
+    window.localStorage.setItem(
+      key,
+      JSON.stringify({ model: "claude-sonnet-5", engine: "anthropic" }),
+    );
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent(CHAT_MODEL_SELECTION_CHANGED_EVENT, {
+          detail: { key },
+        }),
+      );
+      await Promise.resolve();
+    });
+
+    expect(
+      container
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-selected-model"),
+    ).toBe("claude-sonnet-5");
+  });
+
+  it("migrates persisted legacy auto effort to high", async () => {
+    window.localStorage.setItem(
+      "agent-native:chat-models:selection:legacy-medium-test",
+      JSON.stringify({ model: "claude-sonnet-5", effort: "auto" }),
+    );
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="legacy-medium-test" />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(
+      container
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-reasoning-effort"),
+    ).toBe("high");
+  });
+
+  it("continues to submit when submit is omitted", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Send this now",
+      });
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Send this now",
+      undefined,
+    );
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalled();
+  });
+
+  it("preserves plan mode on submitted bridge messages", () => {
+    act(() => {
+      root.render(
+        <MultiTabAssistantChat storageKey="bridge-test" execMode="plan" />,
+      );
+    });
+
+    act(() => {
+      dispatchSubmitChat({
+        message: "Plan this first",
+      });
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Plan this first",
+      undefined,
+      { requestMode: "plan" },
+    );
+  });
+
+  it("forwards approval keys as a hidden protocol continuation", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Approved.",
+        approvedToolCalls: ["publish-release:{}"],
+      });
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Approved.",
+      undefined,
+      { approvedToolCalls: ["publish-release:{}"], hideUserMessage: true },
+    );
+  });
+
+  it("implements the latest plan when /act is selected", () => {
+    chatHandleMocks.implementPlan.mockImplementationOnce(() => true);
+
+    act(() => {
+      assistantChatMockState.onSlashCommand?.("act");
+    });
+
+    expect(chatHandleMocks.implementPlan).toHaveBeenCalledOnce();
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+  });
+
+  it("opens a forked thread reported by AgentKit recovery", () => {
+    act(() => {
+      assistantChatMockState.onForkedThread?.("thread-forked");
+    });
+
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("thread-forked");
+  });
+
+  it("persists AgentKit fork parents and navigates between sibling threads", async () => {
+    await act(async () => {
+      assistantChatMockState.onForkedThread?.("thread-forked-a");
+      assistantChatMockState.onForkedThread?.("thread-forked-b");
+    });
+
+    expect(
+      window.localStorage.getItem(
+        `agent-chat-fork-parent-map:bridge-test:tab:${getBrowserTabId()}`,
+      ),
+    ).toBe(
+      JSON.stringify({
+        "thread-forked-a": "thread-1",
+        "thread-forked-b": "thread-1",
+      }),
+    );
+    expect(assistantChatMockState.branchNavigation).toMatchObject({
+      index: 1,
+      count: 3,
+    });
+
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-forked-a",
+        title: "Fork A",
+        preview: "",
+        messageCount: 0,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+      {
+        id: "thread-forked-b",
+        title: "Fork B",
+        preview: "",
+        messageCount: 0,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+
+    act(() => assistantChatMockState.branchNavigation?.onNext());
+    expect(threadMocks.switchThread).toHaveBeenLastCalledWith(
+      "thread-forked-a",
+    );
+
+    threadMocks.activeThreadId = "thread-forked-a";
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+    });
+    expect(assistantChatMockState.branchNavigation).toMatchObject({
+      index: 2,
+      count: 3,
+    });
+
+    act(() => assistantChatMockState.branchNavigation?.onNext());
+    expect(threadMocks.switchThread).toHaveBeenLastCalledWith(
+      "thread-forked-b",
+    );
+  });
+
+  it("reuses a known-new empty active chat for opted-in foreground sends", () => {
+    threadMocks.isNewThread.mockReturnValue(true);
+    const targetEvents: Event[] = [];
+    const onTarget = (event: Event) => targetEvents.push(event);
+    window.addEventListener("agentNative.chatSubmitTarget", onTarget);
+
+    act(() => {
+      dispatchSubmitChat({
+        message: "Create a presentation",
+        submit: true,
+        newTab: true,
+        reuseEmptyTab: true,
+        tabId: "unused-new-thread",
+        submitMessageId: "submit-reused",
+      });
+    });
+
+    expect(threadMocks.createThread).not.toHaveBeenCalled();
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Create a presentation",
+      undefined,
+      { submitMessageId: "submit-reused" },
+    );
+    expect((targetEvents[0] as CustomEvent).detail).toEqual({
+      submitMessageId: "submit-reused",
+      tabId: "thread-1",
+    });
+    window.removeEventListener("agentNative.chatSubmitTarget", onTarget);
+  });
+
+  it("creates a foreground tab when the active chat has messages", async () => {
+    threadMocks.isNewThread.mockReturnValue(true);
+    chatHandleMocks.exportThreadSnapshot.mockReturnValueOnce({
+      threadData: "{}",
+      title: "Existing chat",
+      preview: "Existing request",
+      messageCount: 1,
+    });
+
+    act(() => {
+      dispatchSubmitChat({
+        message: "Create another presentation",
+        submit: true,
+        newTab: true,
+        reuseEmptyTab: true,
+        tabId: "thread-foreground",
+      });
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(threadMocks.createThread).toHaveBeenCalledWith("thread-foreground");
+  });
+
+  it("does not reuse a restoring chat that only appears empty", async () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Create a presentation",
+        submit: true,
+        newTab: true,
+        reuseEmptyTab: true,
+        tabId: "thread-restoring",
+      });
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(threadMocks.createThread).toHaveBeenCalledWith("thread-restoring");
+  });
+
+  it("starts background new-tab sends without focusing the new tab", async () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Run quietly",
+        submit: true,
+        newTab: true,
+        background: true,
+        tabId: "thread-bg",
+      });
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 80));
+    });
+
+    expect(threadMocks.createThread).toHaveBeenCalledWith("thread-bg");
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("thread-1");
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Run quietly",
+      undefined,
+      { trackInRunsTray: true },
+    );
+  });
+
+  it("adds keyed context to the active composer without prefill or submit", () => {
+    const dispatchEventSpy = vi.spyOn(window, "dispatchEvent");
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agentNative.setChatContext",
+            data: {
+              key: "selected-element",
+              title: "Selected Element",
+              context: "<button>Buy</button>",
+            },
+          },
+          origin: window.location.origin,
+        }),
+      );
+    });
+
+    expect(
+      dispatchEventSpy.mock.calls.some(
+        ([event]) => event.type === "agent-panel:open",
+      ),
+    ).toBe(true);
+    expect(chatHandleMocks.setComposerContextItem).toHaveBeenCalledWith(
+      {
+        key: "selected-element",
+        title: "Selected Element",
+        context: "<button>Buy</button>",
+      },
+      { focus: true },
+    );
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalled();
+    dispatchEventSpy.mockRestore();
+  });
+
+  it("stages keyed context quietly when openSidebar is false", () => {
+    const dispatchEventSpy = vi.spyOn(window, "dispatchEvent");
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agentNative.setChatContext",
+            data: {
+              key: "selected-element",
+              title: "Selected Element",
+              context: "<button>Buy</button>",
+              openSidebar: false,
+            },
+          },
+          origin: window.location.origin,
+        }),
+      );
+    });
+
+    expect(
+      dispatchEventSpy.mock.calls.some(
+        ([event]) => event.type === "agent-panel:open",
+      ),
+    ).toBe(false);
+    expect(chatHandleMocks.setComposerContextItem).toHaveBeenCalledWith(
+      {
+        key: "selected-element",
+        title: "Selected Element",
+        context: "<button>Buy</button>",
+      },
+      { focus: true },
+    );
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalled();
+    dispatchEventSpy.mockRestore();
+  });
+
+  it("stages keyed context without focus when focus is false", () => {
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agentNative.setChatContext",
+            data: {
+              key: "selected-element",
+              title: "Selected Element",
+              context: "<button>Buy</button>",
+              openSidebar: false,
+              focus: false,
+            },
+          },
+          origin: window.location.origin,
+        }),
+      );
+    });
+
+    expect(chatHandleMocks.setComposerContextItem).toHaveBeenCalledWith(
+      {
+        key: "selected-element",
+        title: "Selected Element",
+        context: "<button>Buy</button>",
+      },
+      { focus: false },
+    );
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalled();
+  });
+
+  it("removes keyed context from the active composer", () => {
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agentNative.removeChatContext",
+            data: {
+              key: "selected-element",
+            },
+          },
+          origin: window.location.origin,
+        }),
+      );
+    });
+
+    expect(chatHandleMocks.removeComposerContextItem).toHaveBeenCalledWith(
+      "selected-element",
+    );
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalled();
+  });
+
+  it("clears context from the active composer", () => {
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: "agentNative.clearChatContext",
+            data: {},
+          },
+          origin: window.location.origin,
+        }),
+      );
+    });
+
+    expect(chatHandleMocks.clearComposerContextItems).toHaveBeenCalled();
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalled();
+  });
+
+  it("opens a replacement tab and closes the current tab when clearing chat", async () => {
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    threadMocks.createThread.mockImplementationOnce(async () => {
+      const id = "thread-clear";
+      threadMocks.activeThreadId = id;
+      threadMocks.threads = [
+        {
+          id,
+          title: "",
+          preview: "",
+          messageCount: 0,
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+          scope: null,
+        },
+        ...threadMocks.threads,
+      ];
+      return id;
+    });
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual(["thread-1"]);
+
+    await act(async () => {
+      headerProps?.clearActiveTab();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual(["thread-clear"]);
+  });
+
+  it("keeps a chat mounted when scoped navigation has no saved open tabs", async () => {
+    let tabs: Array<{ id: string }> = [];
+    const renderHeader = (props: { tabs: Array<{ id: string }> }) => {
+      tabs = props.tabs;
+      return null;
+    };
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="scope-reset-test"
+          renderHeader={renderHeader}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(tabs.map((tab) => tab.id)).toEqual(["thread-1"]);
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="scope-reset-test"
+          scope={{ type: "design", id: "design-1", label: "QA Smoke" }}
+          renderHeader={renderHeader}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(tabs.map((tab) => tab.id)).toEqual(["thread-1"]);
+    expect(
+      container.querySelectorAll("[data-testid='assistant-chat']"),
+    ).toHaveLength(1);
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      "/_agent-native/agent-chat",
+      "scope-reset-test",
+      { type: "design", id: "design-1", label: "QA Smoke" },
+      expect.objectContaining({ restoreActiveThread: true }),
+    );
+  });
+
+  it("rehydrates the open tabs for the newly active resource scope", async () => {
+    const storageKey = "scope-navigation-test";
+    const scopedOpenTabsKey = (designId: string) =>
+      openTabsStorageKey(storageKey, { type: "design", id: designId });
+    const baseThread = threadMocks.threads[0];
+    threadMocks.threads = [
+      { ...baseThread, id: "thread-a" },
+      { ...baseThread, id: "thread-b" },
+    ];
+    threadMocks.activeThreadId = "thread-a";
+    window.localStorage.setItem(
+      scopedOpenTabsKey("design-a"),
+      JSON.stringify(["thread-a"]),
+    );
+    window.localStorage.setItem(
+      scopedOpenTabsKey("design-b"),
+      JSON.stringify(["thread-b"]),
+    );
+
+    let tabs: Array<{ id: string }> = [];
+    const renderHeader = (props: { tabs: Array<{ id: string }> }) => {
+      tabs = props.tabs;
+      return null;
+    };
+
+    act(() => root.unmount());
+    root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          scope={{ type: "design", id: "design-a" }}
+          renderHeader={renderHeader}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(tabs.map((tab) => tab.id)).toEqual(["thread-a"]);
+
+    threadMocks.activeThreadId = "thread-b";
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          scope={{ type: "design", id: "design-b" }}
+          renderHeader={renderHeader}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(tabs.map((tab) => tab.id)).toEqual(["thread-b"]);
+  });
+
+  it("renders resource context as a normal composer context item", async () => {
+    threadMocks.threads = [
+      {
+        ...threadMocks.threads[0],
+        scope: { type: "form", id: "form-1" },
+      },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{ type: "form", id: "form-1" }}
+          composerSlot={<div data-testid="host-composer-slot">Host slot</div>}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const hostSlot = container.querySelector(
+      "[data-testid='host-composer-slot']",
+    );
+    const composerChildren = Array.from(
+      container.querySelector("[data-testid='assistant-chat']")?.children ?? [],
+    );
+    expect(
+      container.querySelectorAll(".agent-scope-badge-wrapper"),
+    ).toHaveLength(0);
+    expect(container.textContent).not.toContain("Using this form");
+    expect(listAgentChatContext()).toEqual([
+      expect.objectContaining({
+        key: "agent-current-resource-context",
+        title: "Form",
+        context: expect.stringContaining("Resource context: form:form-1"),
+      }),
+    ]);
+    expect(composerChildren).toEqual([hostSlot]);
+  });
+
+  it("replaces a legacy generated resource chip when the scope changes", async () => {
+    setAgentChatContextItem({
+      key: "agent-current-resource-context",
+      title: "Old app",
+      context: "Resource context: desktop-app:old-app\nResource name: Old app",
+    });
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{
+            type: "desktop-app",
+            id: "new-app",
+            label: "New app",
+          }}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    expect(listAgentChatContext()).toEqual([
+      expect.objectContaining({
+        key: "agent-current-resource-context",
+        title: "New app",
+        context: expect.stringContaining(
+          "Resource context: desktop-app:new-app",
+        ),
+      }),
+    ]);
+  });
+
+  it("updates resource context in place when only its label changes", async () => {
+    const contextTransitions: string[][] = [];
+    const onContextChanged = (event: Event) => {
+      const items = (event as CustomEvent<{ items: Array<{ key: string }> }>)
+        .detail.items;
+      contextTransitions.push(items.map((item) => item.key));
+    };
+    window.addEventListener(AGENT_CHAT_CONTEXT_CHANGED_EVENT, onContextChanged);
+
+    try {
+      await act(async () => {
+        root.render(
+          <MultiTabAssistantChat
+            storageKey="bridge-test"
+            scope={{ type: "deck", id: "deck-1", label: "This Slide" }}
+          />,
+        );
+        await Promise.resolve();
+      });
+      contextTransitions.length = 0;
+
+      await act(async () => {
+        root.render(
+          <MultiTabAssistantChat
+            storageKey="bridge-test"
+            scope={{
+              type: "deck",
+              id: "deck-1",
+              label: "Current Selection",
+            }}
+          />,
+        );
+        await Promise.resolve();
+      });
+
+      expect(listAgentChatContext()).toEqual([
+        expect.objectContaining({ title: "Current Selection" }),
+      ]);
+      expect(contextTransitions).not.toContainEqual([]);
+    } finally {
+      window.removeEventListener(
+        AGENT_CHAT_CONTEXT_CHANGED_EVENT,
+        onContextChanged,
+      );
+    }
+  });
+
+  it("does not restore a resource context after it is dismissed", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{ type: "deck", id: "deck-1", label: "This Slide" }}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    removeAgentChatContextItem("agent-current-resource-context");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{
+            type: "deck",
+            id: "deck-1",
+            label: "Current Selection",
+          }}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    expect(listAgentChatContext()).toEqual([]);
+  });
+
+  it("restores dismissed resource context when the target slide changes", async () => {
+    const baseScope = {
+      type: "deck" as const,
+      id: "deck-1",
+      label: "This Slide",
+      context: "Current slide id: slide-1.",
+      contextVersion: "deck-1|slide-1|1",
+    };
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat storageKey="bridge-test" scope={baseScope} />,
+      );
+      await Promise.resolve();
+    });
+
+    removeAgentChatContextItem("agent-current-resource-context");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{
+            ...baseScope,
+            context: "Current slide id: slide-2.",
+            contextVersion: "deck-1|slide-2|2",
+          }}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    expect(listAgentChatContext()).toEqual([
+      expect.objectContaining({
+        context: expect.stringContaining("Current slide id: slide-2."),
+      }),
+    ]);
+  });
+
+  it("passes an app context namespace to the active composer", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{
+            type: "desktop-app",
+            id: "calendar",
+            label: "Calendar",
+            contextKey: "desktop-app:calendar",
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(
+      container
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-context-namespace"),
+    ).toBe("desktop-app:calendar");
+    expect(
+      container
+        .querySelector("[data-testid='assistant-chat']")
+        ?.getAttribute("data-context-scope"),
+    ).toBe("desktop-app:calendar");
+    expect(listAgentChatContext()).toEqual([
+      expect.objectContaining({
+        key: "desktop-app:calendar",
+        contextNamespace: "desktop-app:calendar",
+      }),
+    ]);
+  });
+
+  it("keeps resource context in the composer when the legacy badge flag is false", async () => {
+    threadMocks.threads = [
+      {
+        ...threadMocks.threads[0],
+        scope: { type: "design", id: "design-1" },
+      },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{ type: "design", id: "design-1" }}
+          showScopeBadge={false}
+          composerSlot={<div data-testid="host-composer-slot">Host slot</div>}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(
+      container.querySelectorAll(".agent-scope-badge-wrapper"),
+    ).toHaveLength(0);
+    expect(listAgentChatContext()).toEqual([
+      expect.objectContaining({
+        key: "agent-current-resource-context",
+        title: "Design",
+      }),
+    ]);
+  });
+
+  it("does not remove richer app-owned context when resource context unmounts", async () => {
+    setAgentChatContextItem({
+      key: "analytics-selected-dashboard",
+      title: "Dashboard",
+      context: "Dashboard context from the analytics app",
+    });
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{
+            type: "dashboard",
+            id: "dashboard-1",
+            contextKey: "analytics-selected-dashboard",
+          }}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+      await Promise.resolve();
+    });
+
+    expect(listAgentChatContext()).toEqual([
+      expect.objectContaining({
+        key: "analytics-selected-dashboard",
+        context: "Dashboard context from the analytics app",
+      }),
+    ]);
+  });
+
+  it("keeps resource history out of the empty chat state", async () => {
+    const now = Date.now();
+    threadMocks.threads = [
+      {
+        ...threadMocks.threads[0],
+        scope: { type: "form", id: "form-1" },
+        messageCount: 0,
+        updatedAt: now,
+      },
+      {
+        id: "thread-2",
+        title: "Older form chat",
+        preview: "",
+        messageCount: 1,
+        createdAt: now - 1000,
+        updatedAt: now - 1000,
+        scope: { type: "form", id: "form-1" },
+      },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          scope={{ type: "form", id: "form-1" }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).not.toContain("Using this form");
+    expect(container.textContent).not.toContain("Previous chats for this form");
+  });
+
+  it("syncs selected and new chat states to the URL when enabled", async () => {
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-2",
+        title: "Second thread",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+    threadMocks.createThread.mockImplementationOnce(async () => "thread-new");
+    window.history.replaceState(null, "", "/?thread=thread-1");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          threadUrlSync
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    act(() => {
+      headerProps?.setActiveTabId("thread-2");
+    });
+    expect(window.location.search).toBe("?thread=thread-2");
+
+    await act(async () => {
+      await headerProps?.addTab();
+      await Promise.resolve();
+    });
+    expect(window.location.search).toBe("");
+  });
+
+  it("reacts when client-side navigation clears the thread query param", async () => {
+    window.history.replaceState(null, "", "/?thread=thread-1");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat storageKey="bridge-test" threadUrlSync />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      expect.any(String),
+      "bridge-test",
+      null,
+      expect.objectContaining({ routeThreadId: "thread-1" }),
+    );
+
+    act(() => {
+      window.history.pushState(null, "", "/");
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      expect.any(String),
+      "bridge-test",
+      null,
+      expect.objectContaining({ routeThreadId: null }),
+    );
+  });
+
+  it("opens a shared thread link even when URL syncing is not enabled", async () => {
+    window.history.replaceState(null, "", "/overview?thread=thread-1");
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      expect.any(String),
+      "bridge-test",
+      null,
+      expect.objectContaining({ routeThreadId: "thread-1" }),
+    );
+  });
+
+  it("accepts a shared query thread on a route-owned chat home", async () => {
+    window.history.replaceState(null, "", "/?thread=thread-1");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          threadUrlSync={{
+            routeThreadId: null,
+            getPath: (threadId) =>
+              threadId ? `/chat/${encodeURIComponent(threadId)}` : "/",
+            navigate: vi.fn(),
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      expect.any(String),
+      "bridge-test",
+      null,
+      expect.objectContaining({ routeThreadId: "thread-1" }),
+    );
+  });
+
+  it("accepts a route-owned thread id for path-based chat routes", async () => {
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    const navigate = vi.fn();
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-2",
+        title: "Second thread",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+    window.history.replaceState(null, "", "/chat/thread-1");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          threadUrlSync={{
+            routeThreadId: "thread-1",
+            getPath: (threadId) =>
+              threadId ? `/chat/${encodeURIComponent(threadId)}` : "/",
+            navigate,
+          }}
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      expect.any(String),
+      "bridge-test",
+      null,
+      expect.objectContaining({ routeThreadId: "thread-1" }),
+    );
+
+    act(() => {
+      headerProps?.setActiveTabId("thread-2");
+    });
+
+    expect(navigate).toHaveBeenCalledWith("/chat/thread-2", {
+      replace: false,
+    });
+
+    window.history.pushState(null, "", "/");
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          threadUrlSync={{
+            routeThreadId: null,
+            getPath: (threadId) =>
+              threadId ? `/chat/${encodeURIComponent(threadId)}` : "/",
+            navigate,
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(chatThreadHookMocks.useChatThreads).toHaveBeenLastCalledWith(
+      expect.any(String),
+      "bridge-test",
+      null,
+      expect.objectContaining({ routeThreadId: null }),
+    );
+  });
+});
+
+describe("MultiTabAssistantChat cold-start first message", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ value: null })),
+    );
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      openTabsStorageKey("cold-start"),
+      JSON.stringify(["thread-1"]),
+    );
+    threadMocks.activeThreadId = "";
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    threadMocks.activeThreadId = "thread-1";
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("buffers the first message and delivers it once a thread exists", async () => {
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="cold-start" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    act(() => {
+      dispatchSubmitChat({ message: "First message" });
+    });
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+
+    threadMocks.activeThreadId = "thread-1";
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="cold-start" />);
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 80));
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledTimes(1);
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "First message",
+      undefined,
+    );
+    expect(threadMocks.createThread).not.toHaveBeenCalled();
+  });
+});
+
+describe("MultiTabAssistantChat cold-start delivery (Mode B)", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ value: null })),
+    );
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      openTabsStorageKey("mode-b"),
+      JSON.stringify(["thread-1"]),
+    );
+    clearBufferedAgentChatRequests();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    clearBufferedAgentChatRequests();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("delivers a message sent before the lazy panel mounted its listener", async () => {
+    act(() => {
+      sendToAgentChat({ message: "Sent before mount", submit: true });
+    });
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 80));
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledTimes(1);
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Sent before mount",
+      undefined,
+      { submitMessageId: expect.any(String) },
+    );
+  });
+
+  it("ignores a duplicate submit with the same submitMessageId", async () => {
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    act(() => {
+      dispatchSubmitChat({ message: "Once only", submitMessageId: "dup-1" });
+    });
+    act(() => {
+      dispatchSubmitChat({ message: "Once only", submitMessageId: "dup-1" });
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledTimes(1);
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Once only",
+      undefined,
+      { submitMessageId: "dup-1" },
+    );
+  });
+
+  it("drops a pending delivery after its confirmation times out", async () => {
+    threadMocks.activeThreadId = "";
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+
+    act(() => {
+      dispatchSubmitChat({
+        message: "Never deliver late",
+        submitMessageId: "cancelled-submit",
+      });
+    });
+    cancelAgentChatSubmit("cancelled-submit");
+
+    threadMocks.activeThreadId = "thread-1";
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+      await new Promise((resolve) => setTimeout(resolve, 80));
+    });
+
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+  });
+
+  it("replays an open-thread request sent before the lazy panel mounted", async () => {
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-2",
+        title: "Run thread",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+
+    act(() => {
+      requestAgentChatThreadOpen({ threadId: "thread-2" });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(threadMocks.switchThread).not.toHaveBeenCalled();
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("thread-2");
+    expect(threadMocks.openThread).toHaveBeenCalledWith("thread-2");
+  });
+
+  it("opens and prefills the requested thread without sending to the previous chat", async () => {
+    resetThreadMocks();
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "background-thread",
+        title: "Background run",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+
+    act(() => {
+      requestAgentChatThreadOpen({
+        threadId: "background-thread",
+        prefill: "Continue the background run",
+      });
+    });
+    threadMocks.activeThreadId = "background-thread";
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 80));
+    });
+
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("background-thread");
+    expect(threadMocks.openThread).toHaveBeenCalledWith("background-thread");
+    expect(chatHandleMocks.prefillMessage).toHaveBeenCalledWith(
+      "Continue the background run",
+    );
+    expect(chatHandleMocks.sendMessage).not.toHaveBeenCalled();
+  });
+
+  it("does not let an earlier slow open override a later request", async () => {
+    let resolveFirst!: (value: "opened") => void;
+    const firstOpen = new Promise<"opened">((resolve) => {
+      resolveFirst = resolve;
+    });
+    threadMocks.openThread.mockImplementation((threadId: string) =>
+      threadId === "slow-thread" ? firstOpen : Promise.resolve("opened"),
+    );
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+
+    act(() => {
+      requestAgentChatThreadOpen({ threadId: "slow-thread" });
+      requestAgentChatThreadOpen({ threadId: "latest-thread" });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("latest-thread");
+
+    await act(async () => {
+      resolveFirst("opened");
+      await Promise.resolve();
+    });
+    expect(threadMocks.switchThread).not.toHaveBeenCalledWith("slow-thread");
+    threadMocks.openThread.mockReset();
+    threadMocks.openThread.mockResolvedValue("opened");
+  });
+
+  it("does not retain a prefill when the requested thread is unavailable", async () => {
+    threadMocks.openThread.mockResolvedValue("missing");
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+
+    act(() => {
+      requestAgentChatThreadOpen({
+        threadId: "missing-thread",
+        prefill: "Do not retain this prefill",
+      });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(threadMocks.switchThread).not.toHaveBeenCalledWith("missing-thread");
+    expect(chatHandleMocks.prefillMessage).not.toHaveBeenCalledWith(
+      "Do not retain this prefill",
+    );
+    threadMocks.openThread.mockReset();
+    threadMocks.openThread.mockResolvedValue("opened");
+  });
+
+  it("does not restore a transient thread after the user selected another one", async () => {
+    threadMocks.activeThreadId = "thread-2";
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-2",
+        title: "Other thread",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+    });
+
+    act(() => {
+      requestAgentChatThreadOpen({
+        threadId: "thread-1",
+        onlyIfActiveThreadId: "thread-1",
+      });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(threadMocks.switchThread).not.toHaveBeenCalled();
+  });
+
+  it("restores a transient thread while its captured thread is still active", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="mode-b" />);
+    });
+
+    act(() => {
+      requestAgentChatThreadOpen({
+        threadId: "thread-1",
+        onlyIfActiveThreadId: "thread-1",
+      });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("thread-1");
+  });
+
+  it("replays an agent-task open request sent before the lazy panel mounted", async () => {
+    let tabs: Array<{
+      id: string;
+      parentThreadId?: string;
+      subAgentName?: string;
+    }> = [];
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-child",
+        title: "Research child",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+
+    act(() => {
+      requestAgentTaskOpen({
+        threadId: "thread-child",
+        parentThreadId: "thread-1",
+        name: "Research",
+      });
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(threadMocks.switchThread).not.toHaveBeenCalled();
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="mode-b"
+          renderHeader={(props) => {
+            tabs = props.tabs;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("thread-child");
+    expect(tabs).toContainEqual(
+      expect.objectContaining({
+        id: "thread-child",
+        parentThreadId: "thread-1",
+        subAgentName: "Research",
+      }),
+    );
+  });
+});
+
+describe("MultiTabAssistantChat agent-team tabs", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    resetThreadMocks();
+    threadMocks.threads = [
+      {
+        id: "thread-1",
+        title: "Main thread",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+      {
+        id: "thread-child",
+        title: "Research child",
+        preview: "",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.includes("/runs/list?goalId=agent-team")) {
+          return Response.json({
+            runs: [
+              {
+                title: "Research child",
+                status: "running",
+                sourceRecord: {
+                  type: "agent-team-task",
+                  threadId: "thread-child",
+                  parentThreadId: "thread-1",
+                  name: "Research",
+                },
+                metadata: {},
+              },
+            ],
+          });
+        }
+        return Response.json({ value: null });
+      }),
+    );
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      openTabsStorageKey("agent-team-test"),
+      JSON.stringify(["thread-1"]),
+    );
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("hydrates running sub-agent tasks into child tabs", async () => {
+    let tabs: Array<{
+      id: string;
+      parentThreadId?: string;
+      status: string;
+      subAgentName?: string;
+    }> = [];
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="agent-team-test"
+          renderHeader={(props) => {
+            tabs = props.tabs;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(tabs).toContainEqual(
+      expect.objectContaining({
+        id: "thread-child",
+        parentThreadId: "thread-1",
+        status: "running",
+        subAgentName: "Research",
+      }),
+    );
+  });
+});
+
+describe("MultiTabAssistantChat tab close/open lifecycle", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  function makeThread(id: string): ChatThreadSummary {
+    return {
+      id,
+      title: "",
+      preview: "",
+      messageCount: 0,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      scope: null,
+    };
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    resetThreadMocks();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ value: null })),
+    );
+    window.localStorage.clear();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("de-duplicates an open-tabs list restored from localStorage", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [makeThread("thread-1"), makeThread("thread-2")];
+    window.localStorage.setItem(
+      openTabsStorageKey("dup-test"),
+      JSON.stringify(["thread-1", "thread-2", "thread-2"]),
+    );
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="dup-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-2",
+    ]);
+  });
+
+  it("does not use the first message preview as the tab label", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [
+      {
+        ...makeThread("thread-1"),
+        preview: "Please summarize the latest release notes",
+        messageCount: 1,
+      },
+    ];
+    window.localStorage.setItem(
+      openTabsStorageKey("prompt-label-test"),
+      JSON.stringify(["thread-1"]),
+    );
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="prompt-label-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs[0]?.label).not.toBe(
+      "Please summarize the latest release notes",
+    );
+  });
+
+  it("renders a labeled close button per tab and only closes the tab whose close button is clicked", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [makeThread("thread-1"), makeThread("thread-2")];
+    window.localStorage.setItem(
+      openTabsStorageKey("close-button-test"),
+      JSON.stringify(["thread-1", "thread-2"]),
+    );
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="close-button-test" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const closeButtons = () =>
+      Array.from(
+        container.querySelectorAll<HTMLButtonElement>(
+          'button[aria-label="Close tab"]',
+        ),
+      );
+    expect(closeButtons()).toHaveLength(2);
+
+    // The reported bug was a hit zone that stayed clickable while invisible
+    // (opacity alone does not disable pointer-events). jsdom/happy-dom does
+    // not compute real hover-driven hit-testing for a plain `.click()` call,
+    // so guard the actual CSS invariant directly: the close button must be
+    // non-interactive by default and only regain pointer-events together
+    // with becoming visible, scoped to a real ancestor of the button.
+    const styleText = container.querySelector("style")?.textContent ?? "";
+    expect(styleText).toContain(
+      ".agent-tab-close{opacity:0;pointer-events:none}",
+    );
+    expect(styleText).toContain(
+      ".agent-tab-group:hover .agent-tab-close,.agent-tab-close:focus-visible{opacity:1;pointer-events:auto}",
+    );
+    const closeButtonGroupAncestor =
+      closeButtons()[0].closest(".agent-tab-group");
+    expect(closeButtonGroupAncestor?.contains(closeButtons()[0])).toBe(true);
+
+    const secondTabSwitchButton = container.querySelectorAll<HTMLButtonElement>(
+      ".agent-tab > button:first-child",
+    )[1];
+    expect(secondTabSwitchButton).toBeTruthy();
+    act(() => {
+      secondTabSwitchButton.click();
+    });
+    expect(closeButtons()).toHaveLength(2);
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("thread-2");
+
+    act(() => {
+      closeButtons()[1].click();
+    });
+    expect(closeButtons()).toHaveLength(1);
+  });
+
+  it("removes a revoked explicit thread from open and mounted tabs", async () => {
+    const storageKey = "revoked-explicit-thread";
+    threadMocks.activeThreadId = "protected-thread";
+    threadMocks.threads = [
+      makeThread("protected-thread"),
+      makeThread("remaining-thread"),
+    ];
+    window.localStorage.setItem(
+      openTabsStorageKey(storageKey),
+      JSON.stringify(["protected-thread", "remaining-thread"]),
+    );
+    let tabs: MultiTabAssistantChatHeaderProps["tabs"] = [];
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          renderHeader={(props) => {
+            tabs = props.tabs;
+            return null;
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(tabs.map((tab) => tab.id)).toContain("protected-thread");
+
+    threadMocks.activeThreadId = null;
+    threadMocks.threads = [makeThread("remaining-thread")];
+    threadMocks.evictedThreadIds = ["protected-thread"];
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          renderHeader={(props) => {
+            tabs = props.tabs;
+            return null;
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(tabs.map((tab) => tab.id)).not.toContain("protected-thread");
+    expect(
+      JSON.parse(
+        window.localStorage.getItem(openTabsStorageKey(storageKey)) ?? "[]",
+      ),
+    ).not.toContain("protected-thread");
+  });
+
+  it("migrates legacy open tabs and sub-agent metadata into this browser tab", async () => {
+    const storageKey = "legacy-tab-migration-test";
+    const child = makeThread("thread-child");
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [
+      makeThread("thread-1"),
+      makeThread("thread-2"),
+      child,
+    ];
+    window.localStorage.setItem(
+      legacyOpenTabsStorageKey(storageKey),
+      JSON.stringify(["thread-1", "thread-2", "thread-2", "thread-child"]),
+    );
+    window.localStorage.setItem(
+      `agent-chat-parent-map:${storageKey}`,
+      JSON.stringify({ "thread-child": "thread-1" }),
+    );
+    window.localStorage.setItem(
+      `agent-chat-sub-agent-names:${storageKey}`,
+      JSON.stringify({ "thread-child": "Research" }),
+    );
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const tabId = getBrowserTabId();
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-2",
+    ]);
+    expect(
+      JSON.parse(
+        window.localStorage.getItem(openTabsStorageKey(storageKey)) ?? "null",
+      ),
+    ).toEqual(["thread-1", "thread-2"]);
+    expect(
+      JSON.parse(
+        window.localStorage.getItem(
+          `agent-chat-parent-map:${storageKey}:tab:${tabId}`,
+        ) ?? "null",
+      ),
+    ).toEqual({ "thread-child": "thread-1" });
+    expect(
+      JSON.parse(
+        window.localStorage.getItem(
+          `agent-chat-sub-agent-names:${storageKey}:tab:${tabId}`,
+        ) ?? "null",
+      ),
+    ).toEqual({ "thread-child": "Research" });
+  });
+
+  it("commits new and cleared tabs without disturbing the other open tabs", async () => {
+    const storageKey = "new-tab-lifecycle-test";
+    threadMocks.activeThreadId = "thread-2";
+    threadMocks.threads = [
+      makeThread("thread-1"),
+      makeThread("thread-2"),
+      makeThread("thread-3"),
+    ];
+    window.localStorage.setItem(
+      openTabsStorageKey(storageKey),
+      JSON.stringify(["thread-1", "thread-2", "thread-3"]),
+    );
+
+    const createdIds = ["thread-new", "thread-replacement"];
+    threadMocks.createThread.mockImplementation(async () => {
+      const id = createdIds.shift();
+      if (!id) throw new Error("test exhausted its thread ids");
+      threadMocks.activeThreadId = id;
+      threadMocks.threads = [...threadMocks.threads, makeThread(id)];
+      return id;
+    });
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      await headerProps?.addTab();
+    });
+
+    expect(headerProps?.activeTabId).toBe("thread-new");
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-2",
+      "thread-3",
+      "thread-new",
+    ]);
+
+    await act(async () => {
+      headerProps?.clearActiveTab();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.activeTabId).toBe("thread-replacement");
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-2",
+      "thread-3",
+      "thread-replacement",
+    ]);
+  });
+
+  it("replaces an active missing thread with a fresh chat", async () => {
+    const replacementId = "thread-replacement";
+    threadMocks.createThread.mockImplementationOnce(async () => {
+      threadMocks.activeThreadId = replacementId;
+      threadMocks.threads = [makeThread(replacementId), ...threadMocks.threads];
+      return replacementId;
+    });
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="missing-thread-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(assistantChatMockState.onThreadRestoreNotFound).toEqual(
+      expect.any(Function),
+    );
+
+    await act(async () => {
+      assistantChatMockState.onThreadRestoreNotFound?.();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([replacementId]);
+  });
+
+  it("does not replace a desktop thread before identity restore settles", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          agentChatSurface="desktop"
+          desktopIdentityAuthenticated={false}
+          storageKey="desktop-missing-thread-test"
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(assistantChatMockState.onThreadRestoreNotFound).toBeUndefined();
+  });
+
+  it("gives short chat titles enough room before the close target", async () => {
+    threadMocks.activeThreadId = "short-title-thread";
+    threadMocks.threads = [
+      {
+        ...makeThread("short-title-thread"),
+        title: "hi",
+        messageCount: 1,
+      },
+    ];
+    window.localStorage.setItem(
+      openTabsStorageKey("short-title-test"),
+      JSON.stringify(["short-title-thread"]),
+    );
+
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="short-title-test" />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(container.querySelector(".agent-tab")?.className).toContain(
+      "min-w-[56px]",
+    );
+  });
+
+  it("closes a duplicated active tab instead of the effect re-adding it", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [makeThread("thread-1")];
+    window.localStorage.setItem(
+      openTabsStorageKey("dup-active-test"),
+      JSON.stringify(["thread-1", "thread-1"]),
+    );
+    threadMocks.createThread.mockImplementation(async () => {
+      threadMocks.activeThreadId = "thread-new";
+      threadMocks.threads = [makeThread("thread-new")];
+      return "thread-new";
+    });
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="dup-active-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      headerProps?.closeTab("thread-1");
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).not.toContain("thread-1");
+  });
+
+  it("closing one tab removes only that tab, leaving its siblings open", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [
+      makeThread("thread-1"),
+      makeThread("thread-2"),
+      makeThread("thread-3"),
+    ];
+    window.localStorage.setItem(
+      openTabsStorageKey("close-test"),
+      JSON.stringify(["thread-1", "thread-2", "thread-3"]),
+    );
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="close-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-2",
+      "thread-3",
+    ]);
+
+    await act(async () => {
+      headerProps?.closeTab("thread-2");
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-3",
+    ]);
+
+    await act(async () => {
+      threadMocks.threads = [...threadMocks.threads, makeThread("thread-4")];
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="close-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-3",
+    ]);
+  });
+
+  it("replaces the only open tab with a fresh one instead of ending up empty", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [makeThread("thread-1")];
+    window.localStorage.setItem(
+      openTabsStorageKey("last-tab-test"),
+      JSON.stringify(["thread-1"]),
+    );
+    threadMocks.createThread.mockImplementation(async () => {
+      threadMocks.activeThreadId = "thread-new";
+      threadMocks.threads = [...threadMocks.threads, makeThread("thread-new")];
+      return "thread-new";
+    });
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="last-tab-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      headerProps?.closeTab("thread-1");
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(threadMocks.createThread).toHaveBeenCalledTimes(1);
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual(["thread-new"]);
+  });
+
+  it("does not create duplicate replacement threads when the final tab is closed twice", async () => {
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [makeThread("thread-1")];
+    window.localStorage.setItem(
+      openTabsStorageKey("duplicate-close-test"),
+      JSON.stringify(["thread-1"]),
+    );
+
+    let resolveReplacement: ((id: string) => void) | undefined;
+    threadMocks.createThread.mockImplementationOnce(async () => {
+      threadMocks.activeThreadId = "thread-new";
+      threadMocks.threads = [...threadMocks.threads, makeThread("thread-new")];
+      return await new Promise<string>((resolve) => {
+        resolveReplacement = resolve;
+      });
+    });
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="duplicate-close-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      headerProps?.closeTab("thread-1");
+      headerProps?.closeTab("thread-1");
+    });
+
+    expect(threadMocks.createThread).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      resolveReplacement?.("thread-new");
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual(["thread-new"]);
+  });
+
+  it("does not duplicate a tab when a buffered backlog opens one thread twice", async () => {
+    clearBufferedAgentChatRequests();
+    threadMocks.activeThreadId = "thread-1";
+    threadMocks.threads = [makeThread("thread-1"), makeThread("thread-2")];
+    window.localStorage.setItem(
+      openTabsStorageKey("backlog-test"),
+      JSON.stringify(["thread-1"]),
+    );
+
+    requestAgentTaskOpen({
+      threadId: "thread-2",
+      parentThreadId: "thread-1",
+      name: "Sub agent",
+    });
+    requestAgentTaskOpen({
+      threadId: "thread-2",
+      parentThreadId: "thread-1",
+      name: "Sub agent",
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    let headerProps: MultiTabAssistantChatHeaderProps | null = null;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="backlog-test"
+          renderHeader={(props) => {
+            headerProps = props;
+            return null;
+          }}
+        />,
+      );
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual([
+      "thread-1",
+      "thread-2",
+    ]);
+
+    await act(async () => {
+      headerProps?.closeTab("thread-2");
+      await Promise.resolve();
+    });
+
+    expect(headerProps?.tabs.map((tab) => tab.id)).toEqual(["thread-1"]);
+  });
+});
+
+describe("MultiTabAssistantChat page overlay", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    resetThreadMocks();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ value: null })),
+    );
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      openTabsStorageKey("page-overlay-test"),
+      JSON.stringify(["thread-1"]),
+    );
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("marks the page overlay only after the thread scrolls", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="page-overlay-test"
+          renderOverlay={() => (
+            <div className="agent-chat-scroll" data-testid="chat-scroll" />
+          )}
+        />,
+      );
+    });
+
+    const scrollTarget = container.querySelector<HTMLElement>(
+      '[data-testid="chat-scroll"]',
+    );
+    expect(scrollTarget).not.toBeNull();
+    expect(
+      container.querySelector("[data-agent-page-chat-topbar]"),
+    ).not.toBeNull();
+    expect(
+      container.querySelector("[data-agent-page-chat-scrolled]"),
+    ).toBeNull();
+
+    await act(async () => {
+      if (!scrollTarget) return;
+      scrollTarget.scrollTop = 24;
+      scrollTarget.dispatchEvent(new Event("scroll"));
+    });
+
+    expect(
+      container.querySelector("[data-agent-page-chat-scrolled]"),
+    ).not.toBeNull();
+  });
+
+  it("reserves the page top bar even when its actions are temporarily empty", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="page-overlay-test"
+          renderOverlay={() => null}
+        />,
+      );
+    });
+
+    const topbar = container.querySelector<HTMLElement>(
+      "[data-agent-page-chat-topbar]",
+    );
+    expect(topbar).not.toBeNull();
+    expect(topbar?.className).toContain("pt-14");
+  });
+});
+
+describe("MultiTabAssistantChat history popover", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+    resetThreadMocks();
+    const now = Date.now();
+    threadMocks.activeThreadId = "thread-1";
+    const historyThreads: ChatThreadSummary[] = [
+      {
+        id: "thread-1",
+        title: "Active chat",
+        preview: "",
+        messageCount: 1,
+        createdAt: now,
+        updatedAt: now,
+        scope: null,
+      },
+      {
+        id: "thread-2",
+        title: "Pinned chat",
+        preview: "",
+        messageCount: 2,
+        createdAt: now,
+        updatedAt: now,
+        scope: null,
+        pinnedAt: now,
+      },
+      {
+        id: "thread-3",
+        title: "Other chat",
+        preview: "",
+        messageCount: 3,
+        createdAt: now,
+        updatedAt: now,
+        scope: null,
+      },
+    ];
+    threadMocks.threads = historyThreads;
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ value: null })),
+    );
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      openTabsStorageKey("history-test"),
+      JSON.stringify(["thread-1"]),
+    );
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  async function openHistory() {
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="history-test" />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+    const historyButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="All chats"]',
+    );
+    expect(historyButton).not.toBeNull();
+    act(() => {
+      historyButton!.click();
+    });
+  }
+
+  async function openRowMenu(trigger: HTMLButtonElement) {
+    await act(async () => {
+      trigger.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          bubbles: true,
+          button: 0,
+          pointerType: "mouse",
+        }),
+      );
+      await Promise.resolve();
+    });
+  }
+
+  it("groups pinned threads into a dedicated section, sorted ahead of the rest", async () => {
+    await openHistory();
+
+    const labels = Array.from(
+      container.querySelectorAll(".an-chat-history__section-label"),
+    ).map((el) => el.textContent);
+    expect(labels).toEqual(["Pinned"]);
+
+    const titles = Array.from(
+      container.querySelectorAll(".an-chat-history-row__title"),
+    ).map((el) => el.textContent);
+    expect(titles).toEqual(["Pinned chat", "Active chat", "Other chat"]);
+  });
+
+  it("anchors page-overlay chat history to the left below the page header", async () => {
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="history-test"
+          renderOverlay={({ toggleHistory }) => (
+            <button
+              type="button"
+              data-testid="page-history-trigger"
+              onClick={toggleHistory}
+            >
+              All chats
+            </button>
+          )}
+        />,
+      );
+    });
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          '[data-testid="page-history-trigger"]',
+        )
+        ?.click();
+    });
+
+    const anchor = Array.from(
+      container.querySelectorAll<HTMLElement>("span"),
+    ).find((span) => span.classList.contains("w-px"));
+    expect(anchor).toBeDefined();
+    expect(anchor?.className).toContain("start-2");
+    expect(anchor?.className).not.toContain("end-2");
+  });
+
+  it("does not expose an untitled prompt in history", async () => {
+    threadMocks.threads = [
+      ...threadMocks.threads,
+      {
+        id: "thread-4",
+        title: "",
+        preview: "Please summarize the latest release notes",
+        messageCount: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        scope: null,
+      },
+    ];
+
+    await openHistory();
+
+    expect(container.textContent).not.toContain(
+      "Please summarize the latest release notes",
+    );
+  });
+
+  it("pins an unpinned thread via the row action menu", async () => {
+    await openHistory();
+
+    const rows = container.querySelectorAll(".an-chat-history-row");
+    const otherRow = rows[2];
+    const trigger = otherRow.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openRowMenu(trigger!);
+    const pinItem = Array.from(
+      document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+    ).find((el) => el.textContent?.includes("Pin to top"));
+    expect(pinItem).toBeDefined();
+    act(() => {
+      (pinItem as HTMLButtonElement).click();
+    });
+
+    expect(threadMocks.pinThread).toHaveBeenCalledWith("thread-3", true);
+  });
+
+  it("unpins an already-pinned thread via the row action menu", async () => {
+    await openHistory();
+
+    const pinnedRow = container.querySelector(".an-chat-history-row");
+    const trigger = pinnedRow!.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openRowMenu(trigger!);
+    const unpinItem = Array.from(
+      document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+    ).find((el) => el.textContent?.includes("Unpin from top"));
+    expect(unpinItem).toBeDefined();
+    act(() => {
+      (unpinItem as HTMLButtonElement).click();
+    });
+
+    expect(threadMocks.pinThread).toHaveBeenCalledWith("thread-2", false);
+  });
+
+  it("renames a thread via the row action menu", async () => {
+    await openHistory();
+
+    const rows = container.querySelectorAll(".an-chat-history-row");
+    const activeRow = rows[1];
+    const trigger = activeRow.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openRowMenu(trigger!);
+    const renameItem = Array.from(
+      document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+    ).find((el) => el.textContent?.includes("Rename"));
+    act(() => {
+      (renameItem as HTMLButtonElement).click();
+    });
+
+    const input = activeRow.querySelector<HTMLInputElement>(
+      ".an-chat-history-row__rename-input",
+    );
+    expect(input).not.toBeNull();
+
+    act(() => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(input, "Renamed chat");
+      input!.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    act(() => {
+      input!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+      );
+    });
+
+    expect(threadMocks.renameThread).toHaveBeenCalledWith(
+      "thread-1",
+      "Renamed chat",
+    );
+  });
+
+  it("does not render a delete row action (no confirm UX wired yet)", async () => {
+    await openHistory();
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openRowMenu(trigger!);
+
+    const menuItems = Array.from(
+      document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+    ).map((el) => el.textContent);
+    expect(menuItems.length).toBeGreaterThan(0);
+    expect(menuItems.some((text) => text?.includes("Delete"))).toBe(false);
+  });
+});