From efe5028d5112491cf50a7044336812420a7c29df Mon Sep 17 00:00:00 2001
From: su-fen <715041@qq.com>
Date: Wed, 3 Jun 2026 15:43:43 +0800
Subject: [PATCH] fix(project-tools): make project tabs reliably clickable

---
 .../project-tools/ProjectToolsPanel.tsx       | 54 ++++++++++++------
 .../project-tools/ProjectToolsPanel.tsx       | 56 +++++++++++++------
 2 files changed, 77 insertions(+), 33 deletions(-)

diff --git a/crates/agent-gateway/web/src/components/project-tools/ProjectToolsPanel.tsx b/crates/agent-gateway/web/src/components/project-tools/ProjectToolsPanel.tsx
index c150a6ec..315a9e7e 100644
--- a/crates/agent-gateway/web/src/components/project-tools/ProjectToolsPanel.tsx
+++ b/crates/agent-gateway/web/src/components/project-tools/ProjectToolsPanel.tsx
@@ -1226,11 +1226,14 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
         disabled={!canReorderTabs}
         tabIndex={canReorderTabs ? 0 : -1}
         className={cn(
-          "flex h-6 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/45 opacity-70 transition-[background-color,color,opacity] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "relative z-10 flex h-6 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/45 opacity-70 transition-[background-color,color,opacity] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           canReorderTabs
             ? "cursor-grab touch-none hover:bg-background/80 hover:text-foreground hover:opacity-100 focus-visible:bg-background focus-visible:text-foreground focus-visible:opacity-100 active:cursor-grabbing"
             : "cursor-default opacity-30",
         )}
+        onClick={() => {
+          consumeSuppressedTabClick(tabId);
+        }}
         onKeyDown={(event) => handleTabReorderKeyDown(event, tabId)}
         onPointerCancel={finishTabDrag}
         onPointerDown={(event) => handleTabPointerDown(event, tabId)}
@@ -1246,6 +1249,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
       handleTabPointerDown,
       handleTabPointerMove,
       handleTabReorderKeyDown,
+      consumeSuppressedTabClick,
       t,
     ],
   );
@@ -1571,7 +1575,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           key={tab.id}
                           data-project-tools-tab-id={tab.id}
                           className={cn(
-                            "project-tools-panel-tab group flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
+                            "project-tools-panel-tab group relative flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
                             currentActiveTab === "fileTree" &&
                               "border-border bg-muted text-foreground shadow-sm",
                             draggingTabId === tab.id &&
@@ -1579,26 +1583,31 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           )}
                           title={t("projectTools.fileTreeTitle")}
                         >
-                          {renderTabDragHandle(tab.id, t("projectTools.fileTreeTitle"))}
                           <button
                             type="button"
+                            aria-label={t("projectTools.fileTreeTitle")}
+                            className="absolute inset-0 z-0 rounded-md bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                             onClick={() => {
                               if (consumeSuppressedTabClick(tab.id)) return;
                               onActiveTabChange("fileTree");
                             }}
-                            className="flex min-w-0 flex-1 items-center gap-1.5 bg-transparent p-0 text-left text-inherit"
+                          />
+                          {renderTabDragHandle(tab.id, t("projectTools.fileTreeTitle"))}
+                          <div
+                            aria-hidden="true"
+                            className="pointer-events-none relative z-10 flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-inherit"
                           >
                             <FolderTree className="h-3.5 w-3.5 shrink-0" />
                             <span className="min-w-0 truncate">
                               {t("projectTools.fileTreeTitle")}
                             </span>
-                          </button>
+                          </div>
                           <button
                             type="button"
                             data-project-tools-tab-action="close"
                             aria-label={t("projectTools.closeFileTree")}
                             title={t("projectTools.closeFileTree")}
-                            className="ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+                            className="relative z-10 ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
                             onPointerDown={(event) => {
                               event.stopPropagation();
                             }}
@@ -1607,6 +1616,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                             }}
                             onClick={(event) => {
                               event.stopPropagation();
+                              consumeSuppressedTabClick(tab.id);
                               closeFileTree();
                             }}
                           >
@@ -1622,7 +1632,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           key={tab.id}
                           data-project-tools-tab-id={tab.id}
                           className={cn(
-                            "project-tools-panel-tab group flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
+                            "project-tools-panel-tab group relative flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
                             currentActiveTab === "gitReview" &&
                               "border-border bg-muted text-foreground shadow-sm",
                             draggingTabId === tab.id &&
@@ -1630,26 +1640,31 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           )}
                           title={t("projectTools.gitReviewTitle")}
                         >
-                          {renderTabDragHandle(tab.id, t("projectTools.gitReviewTitle"))}
                           <button
                             type="button"
+                            aria-label={t("projectTools.gitReviewTitle")}
+                            className="absolute inset-0 z-0 rounded-md bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                             onClick={() => {
                               if (consumeSuppressedTabClick(tab.id)) return;
                               onActiveTabChange("gitReview");
                             }}
-                            className="flex min-w-0 flex-1 items-center gap-1.5 bg-transparent p-0 text-left text-inherit"
+                          />
+                          {renderTabDragHandle(tab.id, t("projectTools.gitReviewTitle"))}
+                          <div
+                            aria-hidden="true"
+                            className="pointer-events-none relative z-10 flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-inherit"
                           >
                             <GitBranch className="h-3.5 w-3.5 shrink-0" />
                             <span className="min-w-0 truncate">
                               {t("projectTools.gitReviewTitle")}
                             </span>
-                          </button>
+                          </div>
                           <button
                             type="button"
                             data-project-tools-tab-action="close"
                             aria-label={t("projectTools.closeGitReview")}
                             title={t("projectTools.closeGitReview")}
-                            className="ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+                            className="relative z-10 ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
                             onPointerDown={(event) => {
                               event.stopPropagation();
                             }}
@@ -1658,6 +1673,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                             }}
                             onClick={(event) => {
                               event.stopPropagation();
+                              consumeSuppressedTabClick(tab.id);
                               closeGitReview();
                             }}
                           >
@@ -1679,7 +1695,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         key={session.id}
                         data-project-tools-tab-id={session.id}
                         className={cn(
-                          "project-tools-panel-tab group flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
+                          "project-tools-panel-tab group relative flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
                           currentActiveTab === "terminal" &&
                             activeSession?.id === session.id &&
                             "border-border bg-muted text-foreground shadow-sm",
@@ -1690,15 +1706,20 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         )}
                         title={sessionTitle}
                       >
-                        {renderTabDragHandle(session.id, sessionTitle)}
                         <button
                           type="button"
+                          aria-label={sessionTitle}
+                          className="absolute inset-0 z-0 rounded-md bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                           onClick={() => {
                             if (consumeSuppressedTabClick(session.id)) return;
                             setActiveSessionId(session.id);
                             onActiveTabChange("terminal");
                           }}
-                          className="flex min-w-0 flex-1 items-center gap-1.5 bg-transparent p-0 text-left text-inherit"
+                        />
+                        {renderTabDragHandle(session.id, sessionTitle)}
+                        <div
+                          aria-hidden="true"
+                          className="pointer-events-none relative z-10 flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-inherit"
                         >
                           <Terminal className="h-3.5 w-3.5 shrink-0" />
                           <span className="min-w-0 truncate">{sessionTitle}</span>
@@ -1707,7 +1728,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           ) : (
                             <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />
                           )}
-                        </button>
+                        </div>
                         <button
                           type="button"
                           data-project-tools-tab-action="close"
@@ -1719,7 +1740,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           }
                           disabled={isClosing}
                           className={cn(
-                            "ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                            "relative z-10 ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                             isPendingClose
                               ? "bg-destructive/10 text-destructive hover:bg-destructive hover:text-destructive-foreground md:opacity-100"
                               : "md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100",
@@ -1732,6 +1753,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           }}
                           onClick={(event) => {
                             event.stopPropagation();
+                            consumeSuppressedTabClick(session.id);
                             handleCloseRequest(session);
                           }}
                         >
diff --git a/crates/agent-gui/src/components/project-tools/ProjectToolsPanel.tsx b/crates/agent-gui/src/components/project-tools/ProjectToolsPanel.tsx
index 6547995c..f0b59194 100644
--- a/crates/agent-gui/src/components/project-tools/ProjectToolsPanel.tsx
+++ b/crates/agent-gui/src/components/project-tools/ProjectToolsPanel.tsx
@@ -1098,11 +1098,14 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
         disabled={!canReorderTabs}
         tabIndex={canReorderTabs ? 0 : -1}
         className={cn(
-          "flex h-6 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/45 opacity-70 transition-[background-color,color,opacity] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "relative z-10 flex h-6 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/45 opacity-70 transition-[background-color,color,opacity] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           canReorderTabs
             ? "cursor-grab touch-none hover:bg-background/80 hover:text-foreground hover:opacity-100 focus-visible:bg-background focus-visible:text-foreground focus-visible:opacity-100 active:cursor-grabbing"
             : "cursor-default opacity-30",
         )}
+        onClick={() => {
+          consumeSuppressedTabClick(tabId);
+        }}
         onKeyDown={(event) => handleTabReorderKeyDown(event, tabId)}
         onPointerCancel={finishTabDrag}
         onPointerDown={(event) => handleTabPointerDown(event, tabId)}
@@ -1118,6 +1121,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
       handleTabPointerDown,
       handleTabPointerMove,
       handleTabReorderKeyDown,
+      consumeSuppressedTabClick,
       t,
     ],
   );
@@ -1336,7 +1340,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
             <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
               <div
                 ref={tabsScrollRef}
-                className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto"
+                className="project-tools-panel-tabs flex min-w-0 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden"
               >
                 {orderedProjectTabs.map((tab) => {
                   if (tab.kind === "fileTree") {
@@ -1345,7 +1349,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         key={tab.id}
                         data-project-tools-tab-id={tab.id}
                         className={cn(
-                          "group flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
+                          "group relative flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
                           currentActiveTab === "fileTree" &&
                             "border-border bg-muted text-foreground shadow-sm",
                           draggingTabId === tab.id &&
@@ -1353,26 +1357,31 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         )}
                         title={t("projectTools.fileTreeTitle")}
                       >
-                        {renderTabDragHandle(tab.id, t("projectTools.fileTreeTitle"))}
                         <button
                           type="button"
+                          aria-label={t("projectTools.fileTreeTitle")}
+                          className="absolute inset-0 z-0 rounded-md bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                           onClick={() => {
                             if (consumeSuppressedTabClick(tab.id)) return;
                             onActiveTabChange("fileTree");
                           }}
-                          className="flex min-w-0 flex-1 items-center gap-1.5 bg-transparent p-0 text-left text-inherit"
+                        />
+                        {renderTabDragHandle(tab.id, t("projectTools.fileTreeTitle"))}
+                        <div
+                          aria-hidden="true"
+                          className="pointer-events-none relative z-10 flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-inherit"
                         >
                           <FolderTree className="h-3.5 w-3.5 shrink-0" />
                           <span className="min-w-0 truncate">
                             {t("projectTools.fileTreeTitle")}
                           </span>
-                        </button>
+                        </div>
                         <button
                           type="button"
                           data-project-tools-tab-action="close"
                           aria-label={t("projectTools.closeFileTree")}
                           title={t("projectTools.closeFileTree")}
-                          className="ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+                          className="relative z-10 ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
                           onPointerDown={(event) => {
                             event.stopPropagation();
                           }}
@@ -1381,6 +1390,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           }}
                           onClick={(event) => {
                             event.stopPropagation();
+                            consumeSuppressedTabClick(tab.id);
                             closeFileTree();
                           }}
                         >
@@ -1396,7 +1406,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         key={tab.id}
                         data-project-tools-tab-id={tab.id}
                         className={cn(
-                          "group flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
+                          "group relative flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
                           currentActiveTab === "gitReview" &&
                             "border-border bg-muted text-foreground shadow-sm",
                           draggingTabId === tab.id &&
@@ -1404,26 +1414,31 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         )}
                         title={t("projectTools.gitReviewTitle")}
                       >
-                        {renderTabDragHandle(tab.id, t("projectTools.gitReviewTitle"))}
                         <button
                           type="button"
+                          aria-label={t("projectTools.gitReviewTitle")}
+                          className="absolute inset-0 z-0 rounded-md bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                           onClick={() => {
                             if (consumeSuppressedTabClick(tab.id)) return;
                             onActiveTabChange("gitReview");
                           }}
-                          className="flex min-w-0 flex-1 items-center gap-1.5 bg-transparent p-0 text-left text-inherit"
+                        />
+                        {renderTabDragHandle(tab.id, t("projectTools.gitReviewTitle"))}
+                        <div
+                          aria-hidden="true"
+                          className="pointer-events-none relative z-10 flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-inherit"
                         >
                           <GitBranch className="h-3.5 w-3.5 shrink-0" />
                           <span className="min-w-0 truncate">
                             {t("projectTools.gitReviewTitle")}
                           </span>
-                        </button>
+                        </div>
                         <button
                           type="button"
                           data-project-tools-tab-action="close"
                           aria-label={t("projectTools.closeGitReview")}
                           title={t("projectTools.closeGitReview")}
-                          className="ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+                          className="relative z-10 ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
                           onPointerDown={(event) => {
                             event.stopPropagation();
                           }}
@@ -1432,6 +1447,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                           }}
                           onClick={(event) => {
                             event.stopPropagation();
+                            consumeSuppressedTabClick(tab.id);
                             closeGitReview();
                           }}
                         >
@@ -1453,7 +1469,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                       key={session.id}
                       data-project-tools-tab-id={session.id}
                       className={cn(
-                        "group flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
+                        "group relative flex h-8 max-w-[12rem] shrink-0 select-none items-center gap-1 rounded-md border border-transparent px-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,opacity,transform,box-shadow] hover:bg-muted/80 hover:text-foreground",
                         currentActiveTab === "terminal" &&
                           activeSession?.id === session.id &&
                           "border-border bg-muted text-foreground shadow-sm",
@@ -1464,15 +1480,20 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                       )}
                       title={sessionTitle}
                     >
-                      {renderTabDragHandle(session.id, sessionTitle)}
                       <button
                         type="button"
+                        aria-label={sessionTitle}
+                        className="absolute inset-0 z-0 rounded-md bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         onClick={() => {
                           if (consumeSuppressedTabClick(session.id)) return;
                           setActiveSessionId(session.id);
                           onActiveTabChange("terminal");
                         }}
-                        className="flex min-w-0 flex-1 items-center gap-1.5 bg-transparent p-0 text-left text-inherit"
+                      />
+                      {renderTabDragHandle(session.id, sessionTitle)}
+                      <div
+                        aria-hidden="true"
+                        className="pointer-events-none relative z-10 flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-inherit"
                       >
                         <Terminal className="h-3.5 w-3.5 shrink-0" />
                         <span className="min-w-0 truncate">{sessionTitle}</span>
@@ -1481,7 +1502,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         ) : (
                           <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />
                         )}
-                      </button>
+                      </div>
                       <button
                         type="button"
                         data-project-tools-tab-action="close"
@@ -1493,7 +1514,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         }
                         disabled={isClosing}
                         className={cn(
-                          "ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                          "relative z-10 ml-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                           isPendingClose
                             ? "bg-destructive/10 text-destructive hover:bg-destructive hover:text-destructive-foreground md:opacity-100"
                             : "md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100",
@@ -1506,6 +1527,7 @@ export function ProjectToolsPanel(props: ProjectToolsPanelProps) {
                         }}
                         onClick={(event) => {
                           event.stopPropagation();
+                          consumeSuppressedTabClick(session.id);
                           handleCloseRequest(session);
                         }}
                       >