Fix invisible close button click zone on chat tabs

packages/core/src/client/AgentPanel.tsx

@@ -1352,7 +1352,7 @@
         <DesignSystemTooltip
           trigger={
             <button
               onClick={() => switchMode("chat")}
               aria-label={t("agentPanel.chatMode")}
               className={cn(
                 "flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none",
@@ -1696,7 +1696,7 @@
             ) : null}
             {mode === "chat" &&
             newTabMode !== "cli" &&
             onNewCliTab &&
             newCliTabLabel ? (
               <DropdownMenuItem onSelect={onNewCliTab}>
                 <IconTerminal2 size={14} className="shrink-0" />
@@ -1870,47 +1870,47 @@
         )}
       </div>
     ),
     [
       activeCliTab,
       addCliTab,
       availableClis,
       canUseCodeTools,
       closeHeaderMenuForOverlay,
       closeAllCliTabs,
       closeAllTabsHint,
       closeCliTab,
       closeOtherCliTabs,
       closeTabHint,
       feedbackOpen,
       feedbackEnabled,
       getChatThreadShareUrl,
       headerMenuOpen,
       isWideDrawer,
       mode,
       newTabMode,
       newCliTabLabel,
       newUiTabLabel,
       agentPageHref,
       fullViewAction,
       onCollapse,
       onFullViewRequest,
       onExitWideDrawer,
       onSnapTo75Percent,
       openRunThread,
       openNewCliTab,
       openNewUiTab,
       renderCliTab,
       selectCli,
       selectedCli,
       shareFromMenuOpen,
       showCollapseButton,
       storageKey,
       switchMode,
       t,
       wideDrawerAction,
       wideDrawerLabel,
       widenChatHint,
     ],
   );
 
   const renderPageChatOverlay = useCallback(
@@ -2582,7 +2582,8 @@
         <style
           dangerouslySetInnerHTML={{
             __html:
-              ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
+              ".agent-tab-close{opacity:0;pointer-events:none}" +
+              ".agent-tab:hover .agent-tab-close,.agent-tab-close:focus-visible{opacity:1;pointer-events:auto}" +
               ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
               ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
               `[data-agent-fullscreen='true'] .agent-thread-content,` +

packages/core/src/client/MultiTabAssistantChat.spec.tsx

@@ -2140,6 +2140,53 @@ describe("MultiTabAssistantChat tab close/open lifecycle", () => {
     ]);
   });
 
+  // Regression test: a click anywhere in a tab's close-button hit zone used to
+  // close it even though nothing was visibly clickable there. Each tab must
+  // render its own labeled close button, and switching tabs must never fire
+  // the close handler for the tab that was clicked to switch to.
+  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 switch button is a separate element from the close button, so
+    // clicking it must never remove the tab.
+    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");
+
+    // Clicking the explicit, labeled close button removes only that tab.
+    act(() => {
+      closeButtons()[1].click();
+    });
+    expect(closeButtons()).toHaveLength(1);
+  });
+
   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");

packages/core/src/client/MultiTabAssistantChat.tsx

@@ -1216,7 +1216,7 @@
         threadModelRef.current.get(threadId) ?? persistedModelSelection,
         availableModels,
       ),
     [availableModels, persistedModelSelection, modelSelectionVersion],
   );
 
   const persistModelSelection = useCallback(
@@ -1520,7 +1520,7 @@
     openTabsKeyRef.current = OPEN_TABS_KEY;
     initializedRef.current = false;
     if (!restoreActiveThread) {
       setOpenTabIds(activeThreadId ? [activeThreadId] : []);
       return;
     }
     const restored = readStoredOpenTabs();
@@ -2710,7 +2710,8 @@
       <style
         dangerouslySetInnerHTML={{
           __html:
-            ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
+            ".agent-tab-close{opacity:0;pointer-events:none}" +
+            ".agent-tab:hover .agent-tab-close,.agent-tab-close:focus-visible{opacity:1;pointer-events:auto}" +
             ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
             ".agent-tabs-scroll::-webkit-scrollbar{display:none;}",
         }}