From fb2c0edfa12acbe0f6d3020dd18d4eabbe36848d Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 12 Apr 2026 15:42:09 -0700
Subject: [PATCH] Fix active agent display: hide separator when empty, add
 quick-hide option (#555)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the border-bottom separator in the agent hovercard when no agents
  are active (looked off as a stray line under "No agents active")
- Add a "Hide from titlebar" button at the bottom of the hovercard that
  disables the badge via settings and shows a persistent dismissible toast
  pointing users to Settings → Appearance to re-enable
---
 src/renderer/src/App.tsx         | 19 ++++++++++++++++++-
 src/renderer/src/assets/main.css | 25 +++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index c240e5a1c25..2681caf8915 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -6,6 +6,7 @@ import { isGitRepoKind } from '../../shared/repo-kind'
 import { Minimize2, PanelLeft, PanelRight } from 'lucide-react'
 import { TOGGLE_TERMINAL_PANE_EXPAND_EVENT } from '@/constants/terminal'
 import { syncZoomCSSVar } from '@/lib/ui-zoom'
+import { toast } from 'sonner'
 import { Toaster } from '@/components/ui/sonner'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useAppStore } from './store'
@@ -132,6 +133,7 @@ function App(): React.JSX.Element {
   useGlobalFileDrop()
 
   const settings = useAppStore((s) => s.settings)
+  const updateSettings = useAppStore((s) => s.updateSettings)
 
   // Fetch initial data + hydrate GitHub cache from disk
   useEffect(() => {
@@ -553,7 +555,9 @@ function App(): React.JSX.Element {
                   </span>
                 </HoverCardTrigger>
                 <HoverCardContent side="bottom" sideOffset={6} className="titlebar-agent-hovercard">
-                  <div className="titlebar-agent-hovercard-header">
+                  <div
+                    className={`titlebar-agent-hovercard-header${activeAgentCount > 0 ? ' titlebar-agent-hovercard-header-with-list' : ''}`}
+                  >
                     {activeAgentCount === 0
                       ? 'No agents active'
                       : `${activeAgentCount} ${activeAgentCount === 1 ? 'agent' : 'agents'} active`}
@@ -579,6 +583,19 @@ function App(): React.JSX.Element {
                       })}
                     </div>
                   )}
+                  <button
+                    className="titlebar-agent-hovercard-hide"
+                    onClick={() => {
+                      void updateSettings({ showTitlebarAgentActivity: false })
+                      toast('Agent activity badge hidden', {
+                        description: 'You can turn it back on in Settings → Appearance.',
+                        duration: Infinity,
+                        dismissible: true
+                      })
+                    }}
+                  >
+                    Hide from titlebar
+                  </button>
                 </HoverCardContent>
               </HoverCard>
             ) : null}
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 3738668ccef..e6f03df244d 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -396,10 +396,35 @@
   font-size: 11px;
   font-weight: 500;
   color: var(--muted-foreground);
+}
+
+.titlebar-agent-hovercard-header-with-list {
   border-bottom: 1px solid var(--border);
   margin-bottom: 4px;
 }
 
+.titlebar-agent-hovercard-hide {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 5px 12px;
+  margin-top: 4px;
+  border-top: 1px solid var(--border);
+  background: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  color: var(--muted-foreground);
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.titlebar-agent-hovercard-hide:hover {
+  color: var(--foreground);
+  background: var(--accent);
+}
+
 .titlebar-agent-hovercard-list {
   display: flex;
   flex-direction: column;