From 9874557f16e4e5a8001a52d50ebeabdbc5200cde Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Thu, 27 Aug 2026 23:51:42 -0700
Subject: [PATCH] fix(ui): avoid duplicate agent state tooltips

---
 src/renderer/src/components/AgentStateDot.test.ts        | 9 +++++++++
 src/renderer/src/components/AgentStateDot.tsx            | 6 +++---
 .../src/components/activity/ActivityPrototypePage.tsx    | 2 +-
 .../src/components/dashboard/DashboardAgentRow.test.tsx  | 1 +
 .../src/components/dashboard/DashboardAgentRow.tsx       | 2 +-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/AgentStateDot.test.ts b/src/renderer/src/components/AgentStateDot.test.ts
index c3819152665..4b31b5fc8ef 100644
--- a/src/renderer/src/components/AgentStateDot.test.ts
+++ b/src/renderer/src/components/AgentStateDot.test.ts
@@ -121,4 +121,13 @@ describe('AgentStateDot', () => {
     expect(markup).toContain('title="Finished 2m ago"')
     expect(markup).toContain('aria-label="Done"')
   })
+
+  it('lets a caller with an existing tooltip suppress the native title', () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(AgentStateDot, { state: 'interrupted', title: null })
+    )
+
+    expect(markup).not.toContain(' title=')
+    expect(markup).toContain('aria-label="Interrupted"')
+  })
 })
diff --git a/src/renderer/src/components/AgentStateDot.tsx b/src/renderer/src/components/AgentStateDot.tsx
index 5aa9b5027e4..fadff65ad6b 100644
--- a/src/renderer/src/components/AgentStateDot.tsx
+++ b/src/renderer/src/components/AgentStateDot.tsx
@@ -61,8 +61,8 @@ type Props = {
   state: AgentDotState
   size?: 'sm' | 'md'
   className?: string
-  /** Overrides the native hover tooltip; defaults to the state's label. */
-  title?: string
+  /** Overrides the native hover tooltip; null suppresses it for an existing tooltip. */
+  title?: string | null
 }
 
 /** Render the compact state glyph used by agent rows and terminal tabs. */
@@ -77,7 +77,7 @@ export const AgentStateDot = React.memo(function AgentStateDot({
   const icon = size === 'md' ? 'size-3' : 'size-2.5'
   // Why: aria-label alone never renders a hover tooltip, so these glyphs read as
   // unlabeled to sighted users (STA-5794). Mirrors StatusIndicator's `title`.
-  const resolvedTitle = title ?? agentStateLabel(state)
+  const resolvedTitle = title === null ? undefined : (title ?? agentStateLabel(state))
 
   if (state === 'working') {
     return (
diff --git a/src/renderer/src/components/activity/ActivityPrototypePage.tsx b/src/renderer/src/components/activity/ActivityPrototypePage.tsx
index 623e41d4c89..4be36a721ec 100644
--- a/src/renderer/src/components/activity/ActivityPrototypePage.tsx
+++ b/src/renderer/src/components/activity/ActivityPrototypePage.tsx
@@ -1187,7 +1187,7 @@ function ThreadAgentStateIndicator({ thread }: { thread: AgentPaneThread }): Rea
     <Tooltip>
       <TooltipTrigger asChild>
         <span className="inline-flex size-4 shrink-0 items-center justify-center">
-          <AgentStateDot state={state} size="md" />
+          <AgentStateDot state={state} size="md" title={null} />
         </span>
       </TooltipTrigger>
       <TooltipContent side="top" sideOffset={4}>
diff --git a/src/renderer/src/components/dashboard/DashboardAgentRow.test.tsx b/src/renderer/src/components/dashboard/DashboardAgentRow.test.tsx
index 85a8a4a45e6..a32056df297 100644
--- a/src/renderer/src/components/dashboard/DashboardAgentRow.test.tsx
+++ b/src/renderer/src/components/dashboard/DashboardAgentRow.test.tsx
@@ -320,6 +320,7 @@ describe('DashboardAgentRow', () => {
     // on the response line so it does not compete with the user's prompt.
     expect(markup).toContain('data-slot="tooltip-trigger"')
     expect(markup).toContain('aria-label="Interrupted by user"')
+    expect(markup).not.toContain('title="Interrupted"')
     expect(markup).toContain('bg-red-500')
     expect(markup).not.toContain('data-slot="badge"')
     expect(interruptedIndex).toBeGreaterThan(promptIndex)
diff --git a/src/renderer/src/components/dashboard/DashboardAgentRow.tsx b/src/renderer/src/components/dashboard/DashboardAgentRow.tsx
index 8bc76da2709..6063aa32e4d 100644
--- a/src/renderer/src/components/dashboard/DashboardAgentRow.tsx
+++ b/src/renderer/src/components/dashboard/DashboardAgentRow.tsx
@@ -253,7 +253,7 @@ const DashboardAgentRow = React.memo(function DashboardAgentRow({
               className="inline-flex shrink-0 items-center justify-center"
               aria-label={dotTooltipLabel}
             >
-              <AgentStateDot state={dotState} size={stateDotSize} />
+              <AgentStateDot state={dotState} size={stateDotSize} title={null} />
             </span>
           </TooltipTrigger>
           <TooltipContent side="top" sideOffset={4}>