Fix invisible close button click zone on chat tabs

[builder-io-integration]

Summary

Fixes an accidental chat-tab-closing bug by making the close ("X") button's hit area only clickable when it's visibly shown (on hover or focus), instead of being clickable while invisible.

Problem

In the tab bar used by AgentPanel and MultiTabAssistantChat, the .agent-tab-close element was hidden via opacity:0 but still received pointer events. This meant users could click in the close-button area without seeing any visual affordance (no X icon, no hover state), and accidentally close a chat tab they intended to keep open — as reported in Slack.

Slack source: https://slack.com/app_redirect?team=T0GCV21GE&channel=C0ATH3CCZT4&message_ts=1789428768.771499
Factory item: 1c7871fd3c45162d14089abb1d8c9dda620129b1e1b7d93281d3d119cf19c08e

Solution

Added pointer-events:none to the hidden state of .agent-tab-close, and pointer-events:auto alongside opacity:1 when the tab is hovered or the close button is focus-visible. This ensures the close button is only clickable when it is actually visible, eliminating the invisible hit-zone while preserving the existing hover-reveal pattern.

This fix applies to two shared instances of the same tab bar pattern: AgentPanel.tsx and MultiTabAssistantChat.tsx, both of which had the identical CSS.

Key Changes

• packages/core/src/client/AgentPanel.tsx: Updated .agent-tab-close styles so the close button is pointer-events:none when hidden and pointer-events:auto only when visible via hover or :focus-visible.
• packages/core/src/client/MultiTabAssistantChat.tsx: Applied the same fix to its identical .agent-tab-close style block.
• packages/core/src/client/MultiTabAssistantChat.spec.tsx: Added a regression test verifying each tab renders a labeled close button (aria-label="Close tab") and that clicking the tab's switch button (not the close button) never closes the tab, while clicking the explicit close button correctly closes only that tab.

---

  

---

To clone this PR locally use the Github CLI with command gh pr checkout 5012

You can tag me at @BuilderIO for anything you want me to fix or change

[builder-io-integration]

Builder reviewed your changes and has a few items to flag 🟡

Review Details

Code Review Summary

PR #5012 addresses the invisible close affordance in the shared chat-tab CSS by disabling pointer events while the close button is hidden and restoring them for hover/focus-visible states. The approach is appropriate for MultiTabAssistantChat, where .agent-tab wraps the close button, and the change is low risk in scope because it is limited to shared UI CSS and a regression test.

Key Findings

Medium: In AgentPanel.tsx, the close button is a sibling of the .agent-tab element, so the new descendant selector .agent-tab:hover .agent-tab-close never matches. Mouse users therefore lose the ability to reveal and click the close control in AgentPanel; the old invisible-but-clickable behavior is removed without a working visible hover path. The selector should target the shared wrapper or the DOM should be adjusted.

Medium: The added jsdom test uses direct .click() calls and does not exercise browser hit testing or the invisible overlay coordinates, so it passes with the old CSS too and does not guard the reported regression.

The explicit :focus-visible path is a good accessibility affordance, and the MultiTabAssistantChat selector structure is consistent with the intended behavior.

🧪 Browser testing: Could not verify — dev server was healthy, but all browser executors lacked Chrome automation tools after retry; the affected flows were reported as couldnt_verify/escalated.