fix(#7): Add tooltips explaining agent status badges

[GalDayan]

Problem

Agent status labels (Running, Idle, Paused, etc.) were displayed without explanation. Users didn't understand what each status meant or when they update.

Solution

• Added shadcn/ui Tooltip component
• Wrapped app layout with TooltipProvider
• All status badges now show descriptive tooltips on hover
• Tooltips explain:
  • What each status means
  • How it differs from other statuses
  • When status updates

Status Tooltips

• Running: Active session with messages in the last 5 minutes. Updates automatically when new activity is detected.
• Idle: No active sessions for over 1 hour. Agent remains available but inactive.
• Paused: Agent was manually paused and won't accept new tasks until resumed.
• Stopped: Agent daemon process is not running on the host.
• Error: Agent encountered an error. Check logs for details.
• Stuck: No activity detected for an extended period despite having an open session.

Testing

• Build passes (npm run build)
• Tooltip appears on hover over any status badge
• No visual breaking changes

Closes #7

[Copilot]

Pull request overview

Adds explanatory tooltips to agent status badges so users can understand what each status means and when it updates.

Changes:

• Added a reusable Tooltip component wrapper (provider/trigger/content) under components/ui.
• Wrapped the app root layout with TooltipProvider so tooltips work across the app.
• Wrapped agent status badges in AgentsTab with tooltips and expanded the tooltip copy for each status.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/components/ui/tooltip.tsx	Introduces TooltipProvider/Tooltip/Trigger/Content wrappers around @base-ui/react/tooltip.
frontend/src/app/layout.tsx	Wraps the app body content with TooltipProvider.
frontend/src/app/dashboard/components/AgentsTab.tsx	Adds tooltips to agent status badges and updates tooltip text per status.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

origin-(--transform-origin) is not valid Tailwind arbitrary value syntax, so the transform-origin styling will be ignored. Use Tailwind’s arbitrary value form (e.g., origin-[var(--transform-origin)] / origin-[--transform-origin]) to ensure the popup animates from the correct origin.

Suggested change

"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",

"z-50 inline-flex w-fit max-w-xs origin-[var(--transform-origin)] items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",

[Copilot]

Classes like top-1/2! aren’t valid Tailwind important syntax (Tailwind uses a leading !, e.g. !top-1/2). As written, those rules will be dropped, which can misplace the tooltip arrow for inline-start/inline-end/left/right sides.

Suggested change

<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />

<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:!top-1/2 data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:!top-1/2 data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:!top-1/2 data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:!top-1/2 data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />

[GalDayan]

Closing as duplicate of #77 (most recent, cleanest scope for Issue #7 tooltip). Triage by @dOr (PM) during 19-day blocker — see memory/tasks.md for full duplicate PR map.