feat: Add info tooltip next to agent status badges (Closes #7)#54
feat: Add info tooltip next to agent status badges (Closes #7)#54
Conversation
- Added (i) info icon next to each agent status badge on the dashboard - Hover reveals tooltip explaining what the status means - Uses existing statusConfig tooltip text - Pure CSS tooltip (no new dependencies)
There was a problem hiding this comment.
Pull request overview
Adds inline explanatory tooltips to agent status badges in the dashboard to clarify what each status means.
Changes:
- Wrapes the status badge with an info icon and hover tooltip UI.
- Displays
statusConfig[status].tooltipcontent in a positioned popover on hover.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| <span className="text-muted-foreground/60 hover:text-muted-foreground cursor-help transition-colors"> | ||
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | ||
| </span> | ||
| <div className="absolute left-0 top-full mt-2 z-50 hidden group-hover/tip:block w-64 px-3 py-2 text-xs text-popover-foreground bg-popover border border-border rounded-lg shadow-lg"> | ||
| {sc.tooltip} |
There was a problem hiding this comment.
This tooltip is hover-only and triggered from a non-focusable , so keyboard and touch users can’t reliably access it. Consider switching the icon to a focusable control (e.g., ) with an accessible name, showing the tooltip on focus/focus-within as well as hover, and marking up the tooltip with proper semantics (e.g., role="tooltip" + aria-describedby). Also ensure the SVG is aria-hidden if it’s purely decorative.
What
Adds an (i) info icon next to each agent status badge on the dashboard. Hovering reveals a tooltip explaining what the status means (Running, Active, Idle, Paused, Stopped, Error, Stuck).
How
statusConfigtooltip text that was already defined but never displayedCloses
Closes #7