feat: add tooltip for Running status (Closes #7)#77
Conversation
- Add (i) icon next to Running status badge - Show tooltip explaining what Running means - Explain how Running differs from Idle, Completed, Stopped - Note that status updates automatically from heartbeat - Uses shadcn/ui tooltip component with lucide-react Info icon
There was a problem hiding this comment.
Pull request overview
Adds an explanatory tooltip for the Running agent status to address UX confusion (Closes #7), using a new shared tooltip UI component built on Base UI primitives.
Changes:
- Introduces a reusable
Tooltipcomponent wrapper incomponents/ui. - Wraps
AgentsTabcontent inTooltipProviderand renders an info icon + tooltip next to the Running status badge. - Adds “Running status” explanatory copy shown on hover.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
frontend/src/components/ui/tooltip.tsx |
New shared tooltip wrapper around @base-ui/react/tooltip with Tailwind styling and positioning helpers. |
frontend/src/app/dashboard/components/AgentsTab.tsx |
Adds tooltip provider + info icon/tooltip UI shown only when agent.status === "running". |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {agent.status === "running" && ( | ||
| <Tooltip> | ||
| <TooltipTrigger | ||
| render={<span className="inline-flex items-center cursor-help" aria-label="About Running status" />} |
There was a problem hiding this comment.
TooltipTrigger is rendered as a <span> via the render prop, which is not keyboard-focusable. This makes the tooltip inaccessible to keyboard users (and the aria-label on a non-interactive element won’t be announced reliably). Consider using the trigger’s default interactive element (if it defaults to a <button>), or render a <button type="button"> (or add tabIndex={0} + appropriate role/keyboard handlers) and ensure it has a visible focus style.
| render={<span className="inline-flex items-center cursor-help" aria-label="About Running status" />} | |
| render={ | |
| <button | |
| type="button" | |
| className="inline-flex items-center cursor-help rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" | |
| aria-label="About Running status" | |
| /> | |
| } |
| <span className="font-medium">How it differs:</span> "Idle" means no active sessions, | ||
| "Completed" means the session finished, and "Stopped" means the agent process isn't running. |
There was a problem hiding this comment.
The tooltip copy references a “Completed” status, but AgentStatus (and the status badges in this list) don’t include a completed state. This is likely to confuse users; consider updating the text to reference the actual agent statuses shown here (e.g., Active/Idle/Paused/Stopped) or explicitly call out that “completed” refers to a session status instead of an agent status.
| <span className="font-medium">How it differs:</span> "Idle" means no active sessions, | |
| "Completed" means the session finished, and "Stopped" means the agent process isn't running. | |
| <span className="font-medium">How it differs:</span> "Paused" means the agent is temporarily halted, | |
| and "Stopped" means the agent process isn't running. |
Closes #7
Changes
Implementation
Testing