fix(ui): avoid duplicate agent state tooltips

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"')
+  })
 })

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 (

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}>

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)

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}>