From 496fde5613fc8ba24962f5f2349c01e972481e93 Mon Sep 17 00:00:00 2001
From: inj-src <injamulislam132@gmail.com>
Date: Sat, 28 Mar 2026 10:17:28 +0000
Subject: [PATCH] fix(web): compact chat header actions into an overflow menu

---
 apps/web/src/components/GitActionsControl.tsx | 54 ++++++++++-
 apps/web/src/components/chat/ChatHeader.tsx   | 92 +++++++++++++++++--
 2 files changed, 139 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 1593a151da..92c54d680a 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -54,6 +54,7 @@ import { readNativeApi } from "~/nativeApi";
 interface GitActionsControlProps {
   gitCwd: string | null;
   activeThreadId: ThreadId | null;
+  inMenu?: boolean;
 }
 
 interface PendingDefaultBranchAction {
@@ -203,7 +204,11 @@ function GitQuickActionIcon({ quickAction }: { quickAction: GitQuickAction }) {
   return <InfoIcon className={iconClassName} />;
 }
 
-export default function GitActionsControl({ gitCwd, activeThreadId }: GitActionsControlProps) {
+export default function GitActionsControl({
+  gitCwd,
+  activeThreadId,
+  inMenu,
+}: GitActionsControlProps) {
   const threadToastData = useMemo(
     () => (activeThreadId ? { threadId: activeThreadId } : undefined),
     [activeThreadId],
@@ -738,6 +743,53 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
 
   if (!gitCwd) return null;
 
+  if (inMenu) {
+    return (
+      <>
+        {gitActionMenuItems.map((item) => {
+          const disabledReason = getMenuActionDisabledReason({
+            item,
+            gitStatus: gitStatusForActions,
+            isBusy: isGitActionRunning,
+            hasOriginRemote,
+          });
+          if (item.disabled && disabledReason) {
+            return (
+              <Popover key={`${item.id}-${item.label}`}>
+                <PopoverTrigger
+                  openOnHover
+                  nativeButton={false}
+                  render={<span className="block w-max cursor-not-allowed" />}
+                >
+                  <MenuItem className="w-full" disabled>
+                    <GitActionItemIcon icon={item.icon} />
+                    {item.label}
+                  </MenuItem>
+                </PopoverTrigger>
+                <PopoverPopup tooltipStyle side="left" align="center">
+                  {disabledReason}
+                </PopoverPopup>
+              </Popover>
+            );
+          }
+
+          return (
+            <MenuItem
+              key={`${item.id}-${item.label}`}
+              disabled={item.disabled}
+              onClick={() => {
+                openDialogForMenuItem(item);
+              }}
+            >
+              <GitActionItemIcon icon={item.icon} />
+              {item.label}
+            </MenuItem>
+          );
+        })}
+      </>
+    );
+  }
+
   return (
     <>
       {!isRepo ? (
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index f04c9879fa..2b243f4a76 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -4,15 +4,20 @@ import {
   type ResolvedKeybindingsConfig,
   type ThreadId,
 } from "@t3tools/contracts";
-import { memo } from "react";
+import { EllipsisIcon, DiffIcon, TerminalSquareIcon, PlayIcon, FolderOpenIcon } from "lucide-react";
+import { memo, useEffect, useRef, useState } from "react";
 import GitActionsControl from "../GitActionsControl";
-import { DiffIcon, TerminalSquareIcon } from "lucide-react";
 import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Menu, MenuItem, MenuPopup, MenuSeparator as MenuDivider, MenuTrigger } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
 import { Toggle } from "../ui/toggle";
 import { SidebarTrigger } from "../ui/sidebar";
 import { OpenInPicker } from "./OpenInPicker";
+import { readNativeApi } from "~/nativeApi";
+
+const HEADER_ACTIONS_COMPACT_BREAKPOINT_PX = 860;
 
 interface ChatHeaderProps {
   activeThreadId: ThreadId;
@@ -61,8 +66,35 @@ export const ChatHeader = memo(function ChatHeader({
   onToggleTerminal,
   onToggleDiff,
 }: ChatHeaderProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [useOverflowPopover, setUseOverflowPopover] = useState(false);
+  const hasOverflowActions = activeProjectScripts !== undefined || activeProjectName !== undefined;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const updateLayout = (width: number) => {
+      setUseOverflowPopover(width < HEADER_ACTIONS_COMPACT_BREAKPOINT_PX);
+    };
+
+    updateLayout(container.clientWidth);
+
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      updateLayout(entry.contentRect.width);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
   return (
-    <div className="@container/header-actions flex min-w-0 flex-1 items-center gap-2">
+    <div
+      ref={containerRef}
+      className="@container/header-actions flex min-w-0 flex-1 items-center gap-2"
+    >
       <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
         <SidebarTrigger className="size-7 shrink-0 md:hidden" />
         <h2
@@ -83,7 +115,53 @@ export const ChatHeader = memo(function ChatHeader({
         )}
       </div>
       <div className="flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3">
-        {activeProjectScripts && (
+        {hasOverflowActions && useOverflowPopover ? (
+          <Menu>
+            <MenuTrigger
+              render={<Button size="icon-xs" variant="outline" aria-label="More actions" />}
+            >
+              <EllipsisIcon className="size-4" />
+            </MenuTrigger>
+            <MenuPopup align="end">
+              {activeProjectScripts && activeProjectScripts.length > 0 && (
+                <>
+                  <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">
+                    Run script
+                  </div>
+                  {activeProjectScripts.slice(0, 5).map((script) => (
+                    <MenuItem key={script.id} onClick={() => onRunProjectScript(script)}>
+                      <PlayIcon className="size-4 shrink-0" />
+                      {script.name}
+                    </MenuItem>
+                  ))}
+                  {activeProjectScripts.length > 5 && (
+                    <MenuItem disabled className="text-muted-foreground">
+                      +{activeProjectScripts.length - 5} more
+                    </MenuItem>
+                  )}
+                  <MenuDivider />
+                </>
+              )}
+              {activeProjectName && (
+                <>
+                  <MenuItem
+                    onClick={() => {
+                      const api = readNativeApi();
+                      if (!api || !openInCwd) return;
+                      void api.shell.openInEditor(openInCwd, "file-manager");
+                    }}
+                  >
+                    <FolderOpenIcon className="size-4 shrink-0" />
+                    Open folder
+                  </MenuItem>
+                  <MenuDivider />
+                  <GitActionsControl inMenu gitCwd={gitCwd} activeThreadId={activeThreadId} />
+                </>
+              )}
+            </MenuPopup>
+          </Menu>
+        ) : null}
+        {!useOverflowPopover && activeProjectScripts && (
           <ProjectScriptsControl
             scripts={activeProjectScripts}
             keybindings={keybindings}
@@ -94,14 +172,16 @@ export const ChatHeader = memo(function ChatHeader({
             onDeleteScript={onDeleteProjectScript}
           />
         )}
-        {activeProjectName && (
+        {!useOverflowPopover && activeProjectName && (
           <OpenInPicker
             keybindings={keybindings}
             availableEditors={availableEditors}
             openInCwd={openInCwd}
           />
         )}
-        {activeProjectName && <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />}
+        {!useOverflowPopover && activeProjectName && (
+          <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />
+        )}
         <Tooltip>
           <TooltipTrigger
             render={