W9-5: Tooltip sweep — HelpTip helper + per-view decode (#533)

* [W9-5a] Tooltip sweep foundation: HelpTip helper + shared cryptic badges

HelpTip: DRY wrapper over the verbose 3-element Radix Tooltip pattern so a
broad sweep stays a one-line wrap per site (falsy label short-circuits to the
bare child). Unit-tested (3 cases).

TaskStatusBadge + AgentStateBadge: the panel's most cryptic, most-frequent
elements (15 task lifecycle states, 11 agent states) had no explanation
anywhere. Add a per-state tooltip via HelpTip, with the canonical text in one
description map and exported as taskStatusDescription / agentStateDescription
so the per-view inline renderers (kanban, task header) reuse it instead of
re-declaring. This is part 1 of the W9-5 tooltip sweep; the per-view inline
surfaces follow in subsequent PRs.

* [W9-5b] Per-view tooltip sweep: decode cryptic badges, icon-only buttons, status dots

35 HelpTip additions across 22 panel components, reusing the W9-5a
helper plus taskStatusDescription/agentStateDescription. Tipped:
task-id/commit-hash/branch/PR badges, severity/origin/status badges,
priority (P0-P3), migration/shared flags, MegaTask umbrella badge,
Review Gate / For Resumption / Confidential note badges, icon-only
view/delete/edit/clear/show-hide buttons, semver bump + gate-state
badges, ahead-not-pushed badge. Skipped self-explanatory labeled
buttons and elements already carrying title=.

---------

Co-authored-by: Renn F <rennf93@users.noreply.github.com>

panel/src/components/dashboard/active-blockers-panel.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { AlertTriangle, Clock, ArrowRight } from "lucide-react";
 import Link from "next/link";
+import { HelpTip } from "@/components/ui/help-tip";
 
 interface ActiveBlockersPanelProps {
   tasks: Task[] | undefined;
@@ -71,9 +72,11 @@ export function ActiveBlockersPanel({
                   <span className="text-lg">\uD83D\uDD34</span>
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 mb-1">
-                      <span className="font-medium text-sm truncate">
-                        Task #{task.id.slice(0, 8)}
-                      </span>
+                      <HelpTip label="Short task ID — first 8 characters of the full task identifier">
+                        <span className="font-medium text-sm truncate">
+                          Task #{task.id.slice(0, 8)}
+                        </span>
+                      </HelpTip>
                       <Badge variant="outline" className="text-xs capitalize">
                         {task.team.replace(/_/g, " ")}
                       </Badge>

panel/src/components/dashboard/ceo-approval-queue.tsx

@@ -34,6 +34,7 @@ import {
 import Link from "next/link";
 import { TaskStatus, Team, type Task } from "@/types";
 import { toast } from "sonner";
+import { HelpTip } from "@/components/ui/help-tip";
 
 interface CeoApprovalQueueProps {
   className?: string;
@@ -171,18 +172,24 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
       {
         label: string;
         variant: "default" | "secondary" | "destructive" | "outline";
+        desc: string;
       }
     > = {
-      0: { label: "P0", variant: "destructive" },
-      1: { label: "P1", variant: "destructive" },
-      2: { label: "P2", variant: "secondary" },
-      3: { label: "P3", variant: "outline" },
+      0: { label: "P0", variant: "destructive", desc: "Critical priority — blocks all other work" },
+      1: { label: "P1", variant: "destructive", desc: "High priority — should be done soon" },
+      2: { label: "P2", variant: "secondary", desc: "Medium priority — normal scheduling" },
+      3: { label: "P3", variant: "outline", desc: "Low priority — can wait" },
     };
-    const { label, variant } = variants[priority] || {
+    const { label, variant, desc } = variants[priority] || {
       label: `P${priority}`,
       variant: "outline" as const,
+      desc: `Priority level ${priority}`,
     };
-    return <Badge variant={variant}>{label}</Badge>;
+    return (
+      <HelpTip label={desc}>
+        <Badge variant={variant}>{label}</Badge>
+      </HelpTip>
+    );
   };
 
   if (isLoading) {
@@ -237,9 +244,11 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
           clipping against it (mirrors the dialog footer's flex-col sm:flex-row). */}
       <div className="flex flex-wrap items-center gap-2 sm:ml-4 sm:shrink-0">
         <Link href={`/tasks/${task.id}`} prefetch={false}>
-          <Button variant="ghost" size="sm">
-            <FileText className="h-4 w-4" />
-          </Button>
+          <HelpTip label="View task details">
+            <Button variant="ghost" size="sm">
+              <FileText className="h-4 w-4" />
+            </Button>
+          </HelpTip>
         </Link>
         <Button
           variant="outline"

panel/src/components/dashboard/release-proposal-card.tsx

@@ -26,6 +26,7 @@ import { Label } from "@/components/ui/label";
 import { CheckCircle2, XCircle, Rocket, AlertTriangle } from "lucide-react";
 import { toast } from "sonner";
 import { usePageRefresh } from "@/hooks";
+import { HelpTip } from "@/components/ui/help-tip";
 
 const _MIN_REJECT_CHARS = 10;
 
@@ -166,10 +167,14 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
             <Rocket className="h-5 w-5" />
             Release Proposal
             <Badge variant="outline">v{report.proposed_version}</Badge>
-            <Badge variant="secondary">{report.bump_kind}</Badge>
-            <Badge variant={gateBadgeVariant(report.gate_state)}>
-              gate: {report.gate_state}
-            </Badge>
+            <HelpTip label="Semver bump type — how the version number increases (major, minor, or patch)">
+              <Badge variant="secondary">{report.bump_kind}</Badge>
+            </HelpTip>
+            <HelpTip label="Quality gate status — green means all checks pass, red means failures must be fixed before release">
+              <Badge variant={gateBadgeVariant(report.gate_state)}>
+                gate: {report.gate_state}
+              </Badge>
+            </HelpTip>
           </CardTitle>
           <CardDescription>
             {report.change_summary.length} change(s) since the last tag · review

panel/src/components/dashboard/roadmap-review-queue.tsx

@@ -25,6 +25,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { CheckCircle2, Map, XCircle } from "lucide-react";
 import { toast } from "sonner";
+import { HelpTip } from "@/components/ui/help-tip";
 
 const _MIN_REASON_CHARS = 4;
 
@@ -68,8 +69,12 @@ function RoadmapItemRow({
       <div className="mb-2 flex flex-wrap items-center gap-2">
         <span className="font-medium">{item.title}</span>
         <Badge variant="outline">{item.team}</Badge>
-        <Badge variant="outline">{item.project_slug}</Badge>
-        <Badge variant="secondary">P{item.priority}</Badge>
+        <HelpTip label="The project (repository) this roadmap item targets">
+          <Badge variant="outline">{item.project_slug}</Badge>
+        </HelpTip>
+        <HelpTip label={`Priority P${item.priority} — ${item.priority === 0 ? "critical" : item.priority === 1 ? "high" : item.priority === 2 ? "medium" : "low"}`}>
+          <Badge variant="secondary">P{item.priority}</Badge>
+        </HelpTip>
         {itemStatusBadge(item)}
       </div>
       <p className="text-sm text-muted-foreground">{item.description}</p>