feat(panel): dense tooltip pass — org surfaces + layout chrome (253 tips)

Every sidebar destination, metric derivation, sortable column, queue
action, and dialog control explains itself; mobile tab bar shares the
sidebar's descriptions so the two nav surfaces can't drift.

panel/src/app/(dashboard)/a2a/page.tsx

@@ -310,6 +310,7 @@ function A2APageContent() {
         <>
           {/* Mobile-only back affordance — drills back up to the list. */}
           {onDetailLevel && (
+            <HelpTip label="Returns to the switchboard/list">
               <Button
                 variant="ghost"
                 size="sm"
@@ -319,6 +320,7 @@ function A2APageContent() {
                 <ArrowLeft className="h-4 w-4 mr-2" />
                 Back
               </Button>
+            </HelpTip>
           )}
 
           <div className="grid flex-1 min-h-0 grid-cols-12 gap-4 lg:gap-6">
@@ -423,21 +425,25 @@ function A2APageContent() {
                           {" ↔ "}
                           {getAgentDisplayName(selected.agent_b)}
                         </span>
+                        <HelpTip label={selected.status === "active" ? "Actively exchanging messages" : "No longer active"}>
                           <Badge
                             variant={
                               selected.status === "active"
                                 ? "default"
                                 : "secondary"
                             }
-                          className="text-xs"
+                            className="text-xs w-fit"
                           >
                             {selected.status}
                           </Badge>
-                        <span className="text-xs text-muted-foreground ml-auto">
+                        </HelpTip>
+                        <HelpTip label={new Date(selected.updated_at).toLocaleString()}>
+                          <span className="text-xs text-muted-foreground ml-auto w-fit">
                             {selected.message_count} msgs · updated{" "}
                             {formatDistanceToNow(new Date(selected.updated_at))}{" "}
                             ago
                           </span>
+                        </HelpTip>
                       </div>
                     )}
                     {/* Scoped to the stream pane, not a full-page takeover —

panel/src/app/(dashboard)/agents/[agentId]/page.tsx

@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import {
   ArrowLeft,
   Play,
@@ -118,10 +119,12 @@ export default function AgentDetailPage() {
   if (isInvalidAgent) {
     return (
       <div className="space-y-6">
+        <HelpTip label="Returns to the previous page">
           <Button variant="ghost" onClick={() => router.back()}>
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back
           </Button>
+        </HelpTip>
         <Card className="w-full max-w-lg mx-auto">
           <CardContent className="pt-6">
             <div className="flex items-center gap-2 text-red-500">
@@ -131,6 +134,8 @@ export default function AgentDetailPage() {
             <p className="text-muted-foreground mt-2">
               The agent may not be running or the ID is invalid.
             </p>
+            <HelpTip label="Starts a fresh container for this agent so it can pick up work">
+              <span>
                 <SpawnAgentDialog
                   agentId={agentId}
                   agentName={displayName}
@@ -141,6 +146,8 @@ export default function AgentDetailPage() {
                     </Button>
                   }
                 />
+              </span>
+            </HelpTip>
           </CardContent>
         </Card>
       </div>
@@ -172,37 +179,49 @@ export default function AgentDetailPage() {
                 {displayName}
               </h1>
               {roleLabel && (
+                <HelpTip label="Fixed org role — set at agent creation, cannot change at runtime">
                   <Badge variant="secondary" className="gap-1">
                     <User className="h-3 w-3" />
                     {roleLabel}
                   </Badge>
+                </HelpTip>
               )}
               {teamLabel && (
+                <HelpTip label="Cell/team this agent belongs to in the org hierarchy">
                   <Badge variant="outline" className="gap-1">
                     <Users className="h-3 w-3" />
                     {teamLabel}
                   </Badge>
+                </HelpTip>
               )}
             </div>
-            <p className="text-muted-foreground">
+            <HelpTip label={agentId !== displayName ? "This agent's slug — used in URLs, branch names, and commits" : ""}>
+              <p className="text-muted-foreground w-fit">
                 {agentId !== displayName ? `@${agentId}` : "Agent Details"}
               </p>
+            </HelpTip>
           </div>
         </div>
         <div className="flex items-center gap-2">
           {isWaiting && <ResolveWaitDialog agentId={agentId} />}
           {isActive ? (
             <>
+              <HelpTip label="Lets the agent finish its current step before stopping">
                 <Button variant="outline" onClick={() => handleStop(true)}>
                   <Square className="h-4 w-4 mr-2" />
                   Stop
                 </Button>
+              </HelpTip>
+              <HelpTip label="Kills the container immediately, even mid-task">
                 <Button variant="destructive" onClick={() => handleStop(false)}>
                   <Square className="h-4 w-4 mr-2" />
                   Force Stop
                 </Button>
+              </HelpTip>
             </>
           ) : (
+            <HelpTip label="Starts a fresh container for this agent so it can pick up work">
+              <span>
                 <SpawnAgentDialog
                   agentId={agentId}
                   agentName={displayName}
@@ -213,6 +232,8 @@ export default function AgentDetailPage() {
                     </Button>
                   }
                 />
+              </span>
+            </HelpTip>
           )}
         </div>
       </div>
@@ -245,6 +266,8 @@ export default function AgentDetailPage() {
               Live status is unavailable — this agent isn&apos;t currently
               active. Spawn it to see live state.
             </p>
+            <HelpTip label="Starts a fresh container for this agent so it can pick up work">
+              <span>
                 <SpawnAgentDialog
                   agentId={agentId}
                   agentName={displayName}
@@ -255,6 +278,8 @@ export default function AgentDetailPage() {
                     </Button>
                   }
                 />
+              </span>
+            </HelpTip>
           </CardContent>
         </Card>
       ) : agent ? (
@@ -287,9 +312,11 @@ export default function AgentDetailPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <p className="text-lg font-semibold text-red-600">
+                <HelpTip label="Errors this agent has hit since its current session started">
+                  <p className="text-lg font-semibold text-red-600 w-fit">
                     {agent.error_count} error(s)
                   </p>
+                </HelpTip>
               </CardContent>
             </Card>
           )}

panel/src/app/(dashboard)/agents/page.tsx

@@ -108,6 +108,7 @@ export default function AgentsPage() {
           one Leadership band so a lone Main PM card never wastes a full row. */}
       <AgentGrid
         title="Leadership"
+        titleHint="Board (Product Owner, Head of Marketing, Auditor) plus the Main PM"
         agents={[...getBoardAgents(agents), ...getMainPm(agents)]}
         agentStatuses={agentStatuses}
         agentUsage={agentUsageMap}
@@ -116,6 +117,7 @@ export default function AgentsPage() {
 
       <AgentGrid
         title="Backend Cell"
+        titleHint="2 Devs, 1 QA, 1 PM, 1 Documenter, 1 PR Reviewer"
         agents={getBackendAgents(agents)}
         agentStatuses={agentStatuses}
         agentUsage={agentUsageMap}
@@ -124,6 +126,7 @@ export default function AgentsPage() {
 
       <AgentGrid
         title="Frontend Cell"
+        titleHint="2 Devs, 1 QA, 1 PM, 1 Documenter, 1 PR Reviewer"
         agents={getFrontendAgents(agents)}
         agentStatuses={agentStatuses}
         agentUsage={agentUsageMap}
@@ -132,6 +135,7 @@ export default function AgentsPage() {
 
       <AgentGrid
         title="UX/UI Cell"
+        titleHint="2 Devs, 1 QA, 1 PM, 1 Documenter, 1 PR Reviewer"
         agents={getUxAgents(agents)}
         agentStatuses={agentStatuses}
         agentUsage={agentUsageMap}
@@ -143,6 +147,7 @@ export default function AgentsPage() {
       {getSupportAgents(agents).length > 0 && (
         <AgentGrid
           title="Support"
+          titleHint="CEO-direct helpers: Intake/Prompter, Secretary, and the root PR Reviewer"
           agents={getSupportAgents(agents)}
           agentStatuses={agentStatuses}
           agentUsage={agentUsageMap}

panel/src/app/(dashboard)/journals/[entryId]/page.tsx

@@ -129,7 +129,9 @@ export default function JournalEntryPage({ params }: JournalEntryPageProps) {
             <div className="flex items-center gap-2 mb-1">
               <EntryTypeBadge type={entry.type} />
               {entry.sentiment && (
+                <HelpTip label="Agent's self-reported sentiment when writing this entry">
                   <Badge variant="outline">{entry.sentiment}</Badge>
+                </HelpTip>
               )}
             </div>
             <h1 className="text-2xl font-bold">{entry.title}</h1>
@@ -192,7 +194,9 @@ export default function JournalEntryPage({ params }: JournalEntryPageProps) {
       {/* Content */}
       <Card>
         <CardHeader>
+          <HelpTip label="The entry body, rendered as Markdown">
             <CardTitle>Content</CardTitle>
+          </HelpTip>
         </CardHeader>
         <CardContent>
           <div className="prose prose-sm dark:prose-invert max-w-none">
@@ -205,10 +209,12 @@ export default function JournalEntryPage({ params }: JournalEntryPageProps) {
       {entry.tags.length > 0 && (
         <Card>
           <CardHeader>
+            <HelpTip label="Free-form labels the agent attached to this entry">
               <CardTitle className="flex items-center gap-2">
                 <Tag className="h-4 w-4" />
                 Tags
               </CardTitle>
+            </HelpTip>
           </CardHeader>
           <CardContent>
             <div className="flex flex-wrap gap-2">

panel/src/app/(dashboard)/journals/page.tsx

@@ -9,6 +9,7 @@ import { JournalView } from "@/components/journals/journal-view";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { usePageRefresh } from "@/hooks";
 import { BookOpen, Search } from "lucide-react";
 
@@ -179,6 +180,7 @@ function JournalsPageContent() {
           <Card className="h-full flex flex-col">
             <CardContent className="p-3 flex flex-1 flex-col min-h-0">
               {/* Agent Search */}
+              <HelpTip label="Filters the agent list below by ID, role, or team">
                 <div className="relative mb-3">
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
@@ -188,6 +190,7 @@ function JournalsPageContent() {
                     className="pl-9"
                   />
                 </div>
+              </HelpTip>
 
               {/* Agent List */}
               <AgentList

panel/src/app/(dashboard)/metrics/page.tsx

@@ -26,6 +26,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SegmentedControl } from "@/components/ui/segmented-control";
 import { OfflineState } from "@/components/ui/offline-state";
 import { HelpTip } from "@/components/ui/help-tip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   ResponsiveTable,
   ResponsiveTableCardList,
@@ -89,6 +94,7 @@ interface MetricCardProps {
   icon: React.ReactNode;
   trend?: "up" | "down" | "neutral";
   trendValue?: string;
+  tip?: string;
 }
 
 function MetricCard({
@@ -98,16 +104,19 @@ function MetricCard({
   icon,
   trend,
   trendValue,
+  tip,
 }: MetricCardProps) {
   const displayValue = typeof value === "number" ? humanizeCount(value) : value;
   return (
     <Card>
+      <HelpTip label={tip}>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="text-sm font-medium text-muted-foreground">
             {title}
           </CardTitle>
           {icon}
         </CardHeader>
+      </HelpTip>
       <CardContent>
         <div className="text-2xl font-bold">{displayValue}</div>
         {subtitle && (
@@ -305,18 +314,21 @@ function PerformanceTabContent() {
             value={completedToday}
             subtitle="Tasks finished"
             icon={<Zap className="h-4 w-4 text-green-500" />}
+            tip="Tasks whose completed_at timestamp falls on today's calendar date"
           />
           <MetricCard
             title="Completed This Week"
             value={completedThisWeek}
             subtitle="Rolling 7 days"
             icon={<TrendingUp className="h-4 w-4 text-blue-500" />}
+            tip="Tasks completed in the trailing 7 days from now"
           />
           <MetricCard
             title="Total Completed"
             value={completed}
             subtitle="All time"
             icon={<CheckCircle className="h-4 w-4 text-green-500" />}
+            tip="Every task that has ever reached the completed status"
           />
           <MetricCard
             title="Completion Rate"
@@ -327,6 +339,7 @@ function PerformanceTabContent() {
             }
             subtitle="Of all tasks"
             icon={<Activity className="h-4 w-4 text-purple-500" />}
+            tip="Completed tasks divided by every task in the table, all-time"
           />
         </div>
       </div>
@@ -390,24 +403,28 @@ function PerformanceTabContent() {
             value={runningAgents}
             subtitle="Active agents"
             icon={<Users className="h-4 w-4 text-green-500" />}
+            tip="Agents currently spawned and actively working a task"
           />
           <MetricCard
             title="Idle"
             value={idleAgents}
             subtitle="Available"
             icon={<Users className="h-4 w-4 text-gray-500" />}
+            tip="Agents with no container running — free to be spawned for new work"
           />
           <MetricCard
             title="Waiting"
             value={waitingAgents}
             subtitle="Needs input"
             icon={<Clock className="h-4 w-4 text-yellow-500" />}
+            tip="Agents stuck waiting unusually long, possibly needing human attention"
           />
           <MetricCard
             title="Errors"
             value={errorAgents}
             subtitle="Failed agents"
             icon={<XCircle className="h-4 w-4 text-red-500" />}
+            tip="Agents whose last spawn exited in an error state"
           />
         </div>
       </div>
@@ -624,12 +641,14 @@ interface ProjectionCardProps {
 function ProjectionCard({ projection, isLoading }: ProjectionCardProps) {
   return (
     <Card>
+      <HelpTip label="Projected month cost extrapolated from the recent daily-average spend, not a hard budget">
         <CardHeader className="pb-2">
           <CardTitle className="text-base flex items-center gap-2">
             <TrendingUp className="h-4 w-4 text-blue-500" />
             Monthly Projection
           </CardTitle>
         </CardHeader>
+      </HelpTip>
       <CardContent>
         {isLoading ? (
           <Skeleton className="h-10 w-full" />
@@ -699,12 +718,14 @@ interface RoleUsageTableProps {
 function RoleUsageTable({ data, isLoading }: RoleUsageTableProps) {
   return (
     <Card>
+      <HelpTip label="Spend and cache-hit rate broken down by agent role (be-dev, qa, main_pm, ...) in the selected window">
         <CardHeader className="pb-2">
           <CardTitle className="text-base flex items-center gap-2">
             <Users className="h-4 w-4 text-blue-500" />
             Cost &amp; Cache by Role
           </CardTitle>
         </CardHeader>
+      </HelpTip>
       <CardContent>
         {isLoading ? (
           <Skeleton className="h-40 w-full" />
@@ -869,6 +890,13 @@ const VALID_METRICS_TABS: MetricsTab[] = [
   "scorecards",
 ];
 
+const METRICS_TAB_HINTS: Record<MetricsTab, string> = {
+  performance: "Task velocity, status counts, agent load, and team health",
+  "token-usage": "Token spend, cost projections, cache efficiency, and per-session detail",
+  delivery: "Cycle time, bottlenecks, and rework rate reconstructed from the audit log",
+  scorecards: "Per-agent and per-team delivery scorecards",
+};
+
 function isValidMetricsTab(value: string | null): value is MetricsTab {
   return VALID_METRICS_TABS.includes(value as MetricsTab);
 }
@@ -905,10 +933,29 @@ function MetricsPageContent() {
 
       <Tabs value={activeTab} onValueChange={handleTabChange}>
         <TabsList>
-          <TabsTrigger value="performance">Performance</TabsTrigger>
+          {VALID_METRICS_TABS.map((tab) => (
-          <TabsTrigger value="token-usage">Token Usage</TabsTrigger>
+            <Tooltip key={tab}>
-          <TabsTrigger value="delivery">Delivery</TabsTrigger>
+              <TooltipTrigger asChild>
-          <TabsTrigger value="scorecards">Scorecards</TabsTrigger>
+                {/* TooltipTrigger's asChild Slot merge overwrites the
+                    data-state Radix Tabs sets on this trigger, so the
+                    data-[state=active] style never fires unless it's
+                    re-asserted explicitly after the merge. */}
+                <TabsTrigger
+                  value={tab}
+                  data-state={tab === activeTab ? "active" : "inactive"}
+                >
+                  {tab === "performance"
+                    ? "Performance"
+                    : tab === "token-usage"
+                      ? "Token Usage"
+                      : tab === "delivery"
+                        ? "Delivery"
+                        : "Scorecards"}
+                </TabsTrigger>
+              </TooltipTrigger>
+              <TooltipContent>{METRICS_TAB_HINTS[tab]}</TooltipContent>
+            </Tooltip>
+          ))}
         </TabsList>
 
         <TabsContent value="performance" className="mt-6">

panel/src/components/a2a/a2a-connection-badge.tsx

@@ -12,7 +12,8 @@ import { connectionDotClasses, connectionStateLabel } from "./a2a-utils";
  * conversation must read differently from a stream that is the problem. */
 export function A2AConnectionBadge({ state }: { state: ConnectionState }) {
   return (
-    <div className="flex items-center gap-1.5">
+    <HelpTip label="Live /ws/system connection status for this A2A view — auto-reconnects on drop">
+      <div className="flex items-center gap-1.5 w-fit">
         <span
           className={cn("h-2 w-2 rounded-full", connectionDotClasses(state))}
         />
@@ -26,6 +27,7 @@ export function A2AConnectionBadge({ state }: { state: ConnectionState }) {
           <WifiOff className="h-3 w-3 text-muted-foreground" />
         )}
       </div>
+    </HelpTip>
   );
 }
 

panel/src/components/a2a/a2a-context-pane.tsx

@@ -40,12 +40,14 @@ function IdentityCard({ slug }: { slug: string }) {
         <div className="text-sm font-medium truncate">
           {getAgentDisplayName(slug)}
         </div>
+        <HelpTip label="Team this agent belongs to in the org hierarchy">
           <Badge
             variant="outline"
-          className={cn("text-[10px] mt-0.5", TEAM_COLOR_CLASSES[teamColor])}
+            className={cn("text-[10px] mt-0.5 w-fit", TEAM_COLOR_CLASSES[teamColor])}
           >
             {teamColor.replace("_", "/")}
           </Badge>
+        </HelpTip>
       </div>
     </Link>
   );
@@ -70,10 +72,12 @@ export function A2AContextPane({
 
   return (
     <div className="p-3 space-y-4">
-      <div className="flex items-center gap-2 pb-2 border-b">
+      <HelpTip label="Read-only: participant identities and the conversation's linked task">
+        <div className="flex items-center gap-2 pb-2 border-b w-fit">
           <Users className="h-4 w-4 text-muted-foreground" />
           <span className="text-sm font-medium">Context</span>
         </div>
+      </HelpTip>
 
       <div className="space-y-2">
         <IdentityCard slug={agentA} />
@@ -94,12 +98,15 @@ export function A2AContextPane({
           <div className="rounded-lg border p-2.5 space-y-1.5">
             <div className="text-sm font-medium truncate">{task.title}</div>
             <div className="flex items-center justify-between gap-2">
+              <HelpTip label="Current lifecycle status of the linked task">
                 <Badge
                   variant={task.status === "completed" ? "default" : "secondary"}
-                className="text-xs"
+                  className="text-xs w-fit"
                 >
                   {task.status}
                 </Badge>
+              </HelpTip>
+              <HelpTip label="Opens this task's full detail page">
                 <Link
                   prefetch={false}
                   href={`/tasks/${taskId}`}
@@ -108,6 +115,7 @@ export function A2AContextPane({
                   <ListTodo className="h-3 w-3" />
                   View task
                 </Link>
+              </HelpTip>
             </div>
           </div>
         )}

panel/src/components/a2a/a2a-conversation-list.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { HelpTip } from "@/components/ui/help-tip";
 import { getAgentDisplayName } from "@/lib/agent-utils";
 import type { AdminConversationSummary } from "@/lib/api/a2a";
 import { usePulseFlash } from "@/hooks/use-pulse-flash";
@@ -81,7 +82,12 @@ function ConversationRow({
                 {conversation.topic}
               </div>
             )}
-            <div className="text-xs text-muted-foreground mt-1">
+            <HelpTip
+              label={new Date(
+                conversation.last_message_at ?? conversation.created_at,
+              ).toLocaleString()}
+            >
+              <div className="text-xs text-muted-foreground mt-1 w-fit">
                 {formatDistanceToNow(
                   new Date(
                     conversation.last_message_at ?? conversation.created_at,
@@ -89,12 +95,14 @@ function ConversationRow({
                 )}{" "}
                 ago
               </div>
+            </HelpTip>
             {conversation.last_message_preview && (
               <p className="text-xs text-muted-foreground truncate mt-1">
                 {conversation.last_message_preview}
               </p>
             )}
             {conversation.task_id && (
+              <HelpTip label="Opens the task this conversation is scoped to">
                 <Link
                   prefetch={false}
                   href={`/tasks/${conversation.task_id}`}
@@ -104,19 +112,24 @@ function ConversationRow({
                   <ListTodo className="h-3 w-3" />
                   Task {conversation.task_id.slice(0, 8)}
                 </Link>
+              </HelpTip>
             )}
           </div>
         </div>
         <div className="flex flex-col items-end gap-1 shrink-0">
+          <HelpTip label={conversation.status === "active" ? "Actively exchanging messages" : "No longer active"}>
             <Badge
               variant={conversation.status === "active" ? "default" : "secondary"}
-            className="text-xs"
+              className="text-xs w-fit"
             >
               {conversation.status}
             </Badge>
-          <span className="text-xs text-muted-foreground">
+          </HelpTip>
+          <HelpTip label="Total messages exchanged in this conversation">
+            <span className="text-xs text-muted-foreground w-fit">
               {conversation.message_count} msgs
             </span>
+          </HelpTip>
         </div>
       </div>
     </div>

panel/src/components/a2a/a2a-filter-bar.tsx

@@ -10,6 +10,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { SlidersHorizontal, X } from "lucide-react";
+import { HelpTip } from "@/components/ui/help-tip";
 import { getAgentDisplayName } from "@/lib/agent-utils";
 import {
   EMPTY_A2A_FILTERS,
@@ -128,6 +129,7 @@ export function A2AFilterBar({
     <div className="mb-2 shrink-0">
       <div className="flex items-center justify-end">
         <Popover>
+          <HelpTip label={count > 0 ? `${count} active filter${count === 1 ? "" : "s"} — click to edit` : "Narrow by agent, task, status, or date"}>
             <PopoverTrigger asChild>
               <Button
                 type="button"
@@ -139,6 +141,7 @@ export function A2AFilterBar({
                 {count > 0 ? `Filters · ${count}` : "Filters"}
               </Button>
             </PopoverTrigger>
+          </HelpTip>
           <PopoverContent
             align="end"
             className="w-72 max-h-[70vh] space-y-3 overflow-y-auto"
@@ -152,8 +155,11 @@ export function A2AFilterBar({
 
             <div>
               <div className="mb-1 flex items-center justify-between">
-                <span className="text-sm font-medium">Agent</span>
+                <HelpTip label="Matches when either participant is one of the checked agents">
+                  <span className="text-sm font-medium w-fit">Agent</span>
+                </HelpTip>
                 {filters.agents.length > 0 && (
+                  <HelpTip label="Unchecks every selected agent">
                     <Button
                       variant="ghost"
                       size="sm"
@@ -162,6 +168,7 @@ export function A2AFilterBar({
                     >
                       Clear
                     </Button>
+                  </HelpTip>
                 )}
               </div>
               <div className="max-h-40 space-y-1 overflow-y-auto">
@@ -183,7 +190,9 @@ export function A2AFilterBar({
             </div>
 
             <div className="border-t pt-2">
-              <span className="text-sm font-medium">Task</span>
+              <HelpTip label="Case-insensitive substring match against the conversation's task id">
+                <span className="text-sm font-medium w-fit">Task</span>
+              </HelpTip>
               <Input
                 value={filters.taskIdFragment}
                 onChange={(e) =>
@@ -196,7 +205,8 @@ export function A2AFilterBar({
                 className="mt-1 h-7 text-xs"
                 aria-label="Task id fragment"
               />
-              <label className="mt-2 flex cursor-pointer items-center gap-2">
+              <HelpTip label="Also shows conversations with no linked task (combined with the fragment above using OR, not AND)">
+                <label className="mt-2 flex w-fit cursor-pointer items-center gap-2">
                   <Checkbox
                     checked={filters.noLinkedTask}
                     onCheckedChange={(checked) =>
@@ -208,14 +218,17 @@ export function A2AFilterBar({
                   />
                   <span className="text-sm">No linked task</span>
                 </label>
+              </HelpTip>
             </div>
 
             <div className="border-t pt-2">
-              <span className="text-sm font-medium">Status</span>
+              <HelpTip label="List view only — switchboard pairs have no status to filter on">
+                <span className="text-sm font-medium w-fit">Status</span>
+              </HelpTip>
               <div className="mt-1 flex items-center gap-1">
                 {STATUS_OPTIONS.map((opt) => (
+                  <HelpTip key={opt.value} label={`Toggle showing ${opt.label.toLowerCase()} conversations`}>
                     <Button
-                    key={opt.value}
                       type="button"
                       variant={
                         filters.statuses.includes(opt.value)
@@ -229,12 +242,15 @@ export function A2AFilterBar({
                     >
                       {opt.label}
                     </Button>
+                  </HelpTip>
                 ))}
               </div>
             </div>
 
             <div className="border-t pt-2">
-              <span className="text-sm font-medium">Date range</span>
+              <HelpTip label="Inclusive day-granularity bounds on the conversation's last activity">
+                <span className="text-sm font-medium w-fit">Date range</span>
+              </HelpTip>
               <div className="mt-1 flex items-center gap-2">
                 <Input
                   type="date"
@@ -259,6 +275,7 @@ export function A2AFilterBar({
 
             {count > 0 && (
               <div className="flex justify-end border-t pt-2">
+                <HelpTip label="Resets every filter dimension back to empty">
                   <Button
                     variant="ghost"
                     size="sm"
@@ -267,6 +284,7 @@ export function A2AFilterBar({
                   >
                     Clear all
                   </Button>
+                </HelpTip>
               </div>
             )}
           </PopoverContent>
@@ -278,6 +296,7 @@ export function A2AFilterBar({
           {chips.map((chip) => (
             <Badge key={chip.key} variant="secondary" className="gap-1">
               {chip.label}
+              <HelpTip label="Remove this filter">
                 <button
                   type="button"
                   aria-label={`Remove ${chip.label} filter`}
@@ -285,8 +304,10 @@ export function A2AFilterBar({
                 >
                   <X className="h-3 w-3 cursor-pointer hover:text-destructive" />
                 </button>
+              </HelpTip>
             </Badge>
           ))}
+          <HelpTip label="Resets every filter dimension back to empty">
             <Button
               variant="ghost"
               size="sm"
@@ -295,6 +316,7 @@ export function A2AFilterBar({
             >
               Clear all
             </Button>
+          </HelpTip>
         </div>
       )}
     </div>

panel/src/components/a2a/a2a-pair-card.tsx

@@ -89,11 +89,19 @@ export function A2APairCard({
             {" ↔ "}
             {getAgentDisplayName(pair.agent_b)}
           </div>
-          <div className="text-xs text-muted-foreground">
+          <HelpTip
+            label={
+              hasHistory && pair.last_message_at
+                ? new Date(pair.last_message_at).toLocaleString()
+                : "These two agents have never exchanged an A2A message"
+            }
+          >
+            <div className="text-xs text-muted-foreground w-fit">
               {hasHistory && pair.last_message_at
                 ? `${formatDistanceToNow(new Date(pair.last_message_at))} ago`
                 : "No A2A yet"}
             </div>
+          </HelpTip>
         </div>
         {hasHistory && (
           <HelpTip label="Total messages exchanged in this conversation">

panel/src/components/a2a/a2a-reply-composer.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/select";
 import { Send } from "lucide-react";
 import { toast } from "sonner";
+import { HelpTip } from "@/components/ui/help-tip";
 import { getAgentDisplayName } from "@/lib/agent-utils";
 import { getErrorMessage } from "@/lib/api/client";
 import { useReplyAsCeo } from "@/hooks/use-a2a-live";
@@ -88,9 +89,11 @@ export function A2AReplyComposer({
         </div>
         <div className="flex flex-col gap-2">
           <Select value={recipient} onValueChange={setChosenRecipient}>
+            <HelpTip label="Defaults to whoever sent the latest message — pick to override">
               <SelectTrigger className="w-auto min-w-32 h-8">
                 <SelectValue />
               </SelectTrigger>
+            </HelpTip>
             <SelectContent>
               {options.map((slug) => (
                 <SelectItem key={slug} value={slug}>
@@ -99,6 +102,8 @@ export function A2AReplyComposer({
               ))}
             </SelectContent>
           </Select>
+          <HelpTip label="Sends as the CEO, visible to both participants">
+            <span>
               <Button
                 type="submit"
                 size="sm"
@@ -107,6 +112,8 @@ export function A2AReplyComposer({
                 <Send className="h-4 w-4 mr-1" />
                 Send
               </Button>
+            </span>
+          </HelpTip>
         </div>
       </div>
       <p className="text-xs text-muted-foreground mt-2">

panel/src/components/a2a/a2a-switchboard.tsx

@@ -2,6 +2,7 @@
 
 import { Radio } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import type { AdminPairSummary } from "@/lib/api/a2a";
 import { A2APairCard } from "./a2a-pair-card";
 import { groupPairsBySection, pairKey } from "./a2a-switchboard-utils";
@@ -56,12 +57,14 @@ export function A2ASwitchboard({
     <div className="h-full overflow-y-auto p-2 space-y-4">
       {sections.map((section) => (
         <div key={section.groupKey}>
-          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2 px-1">
+          <HelpTip label="Pairs with prior conversation history are listed first">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2 px-1 w-fit">
               {section.label}
               <span className="ml-1.5 text-muted-foreground/60 normal-case">
                 ({section.pairs.length})
               </span>
             </h3>
+          </HelpTip>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
             {section.pairs.map((pair) => {
               const key = pairKey(pair.agent_a, pair.agent_b);

panel/src/components/a2a/a2a-transcript.tsx

@@ -156,9 +156,11 @@ export function A2ATranscript({
           <AlertTriangle className="h-8 w-8 mx-auto mb-2 opacity-50 text-destructive" />
           <p className="text-sm mb-3">Couldn&apos;t load this conversation</p>
           {onRetry && (
+            <HelpTip label="Re-fetches this conversation's messages">
               <Button variant="outline" size="sm" onClick={onRetry}>
                 Retry
               </Button>
+            </HelpTip>
           )}
         </div>
       </div>
@@ -224,9 +226,11 @@ export function A2ATranscript({
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1.5">
-                    <span className="font-semibold text-sm">
+                    <HelpTip label={`${teamColor.replace("_", "/")} team`}>
+                      <span className="font-semibold text-sm w-fit">
                         {getAgentDisplayName(message.from_agent)}
                       </span>
+                    </HelpTip>
                     {message.message_kind && (
                       <HelpTip label="Type of agent-to-agent message">
                         <Badge variant="outline" className="text-[10px]">
@@ -234,9 +238,11 @@ export function A2ATranscript({
                         </Badge>
                       </HelpTip>
                     )}
-                    <span className="text-xs text-muted-foreground ml-auto">
+                    <HelpTip label={new Date(message.created_at).toLocaleString()}>
+                      <span className="text-xs text-muted-foreground ml-auto w-fit">
                         {formatDistanceToNow(new Date(message.created_at))} ago
                       </span>
+                    </HelpTip>
                   </div>
                   <div className="text-sm prose prose-sm dark:prose-invert max-w-none">
                     <Markdown>{message.content}</Markdown>
@@ -248,6 +254,7 @@ export function A2ATranscript({
         </div>
       </div>
       {showJumpPill && (
+        <HelpTip label="Scrolls down to the newest message">
           <button
             type="button"
             onClick={scrollToBottom}
@@ -261,6 +268,7 @@ export function A2ATranscript({
           >
             New messages ↓
           </button>
+        </HelpTip>
       )}
     </div>
   );

panel/src/components/agents/agent-activity-panel.tsx

@@ -16,6 +16,7 @@ import {
   CardDescription,
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { GitBranch, BookOpen } from "lucide-react";
 import { useUsageTimeSeries } from "@/hooks/use-usage";
 import { useWorkSessions } from "@/hooks/use-work-sessions";
@@ -98,7 +99,9 @@ export function AgentActivityPanel({
       {/* Token activity sparkline */}
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base">Token Activity</CardTitle>
+          <HelpTip label="Daily token usage for this agent's sessions, from the usage rollup">
+            <CardTitle className="text-base w-fit">Token Activity</CardTitle>
+          </HelpTip>
           <CardDescription>Last 7 days</CardDescription>
         </CardHeader>
         <CardContent>
@@ -153,7 +156,9 @@ export function AgentActivityPanel({
       {/* Activity timeline */}
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base">Recent Activity</CardTitle>
+          <HelpTip label="Latest 8 work sessions and journal entries for this agent, merged and sorted newest first">
+            <CardTitle className="text-base w-fit">Recent Activity</CardTitle>
+          </HelpTip>
           <CardDescription>Work sessions &amp; journal entries</CardDescription>
         </CardHeader>
         <CardContent>
@@ -172,11 +177,19 @@ export function AgentActivityPanel({
               {timeline.map((item, i) => (
                 <li key={`${item.kind}-${i}`} className="flex gap-3">
                   <div className="mt-0.5 shrink-0">
+                    <HelpTip
+                      label={
+                        item.kind === "session"
+                          ? "Work session — git branch/task activity"
+                          : "Journal entry — agent's own log"
+                      }
+                    >
                       {item.kind === "session" ? (
                         <GitBranch className="h-4 w-4 text-muted-foreground" />
                       ) : (
                         <BookOpen className="h-4 w-4 text-muted-foreground" />
                       )}
+                    </HelpTip>
                   </div>
                   <div className="min-w-0 flex-1">
                     <p className="text-sm font-medium truncate">{item.title}</p>
@@ -184,11 +197,13 @@ export function AgentActivityPanel({
                       {item.subtitle}
                     </p>
                   </div>
+                  <HelpTip label={new Date(item.timestamp).toLocaleString()}>
                     <span className="text-muted-foreground text-xs whitespace-nowrap">
                       {formatDistanceToNow(new Date(item.timestamp), {
                         addSuffix: true,
                       })}
                     </span>
+                  </HelpTip>
                 </li>
               ))}
             </ol>

panel/src/components/agents/agent-card.tsx

@@ -98,17 +98,22 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
               )}
               {isActive && (
                 <>
+                  <HelpTip label="Open this agent's status, activity, and live output stream" side="left">
                     <DropdownMenuItem asChild>
                       <Link href={"/agents/" + agent.id} prefetch={false}>
                         <Activity className="h-4 w-4 mr-2" />
                         View Details
                       </Link>
                     </DropdownMenuItem>
+                  </HelpTip>
                   <DropdownMenuSeparator />
+                  <HelpTip label="Lets the agent finish its current step before stopping" side="left">
                     <DropdownMenuItem onClick={() => handleStop(true)}>
                       <Square className="h-4 w-4 mr-2" />
                       Stop Gracefully
                     </DropdownMenuItem>
+                  </HelpTip>
+                  <HelpTip label="Kills the container immediately, even mid-task" side="left">
                     <DropdownMenuItem
                       onClick={() => handleStop(false)}
                       className="text-red-600"
@@ -116,6 +121,7 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
                       <Square className="h-4 w-4 mr-2" />
                       Force Stop
                     </DropdownMenuItem>
+                  </HelpTip>
                 </>
               )}
             </DropdownMenuContent>
@@ -139,17 +145,29 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
           </span>
         </HelpTip>
         {detail && (
-          <p className={cn("mt-1 truncate text-xs", detail.className)}>
+          <HelpTip
+            label={
+              agentStatus?.error_count
+                ? "Errors this agent hit in its current session"
+                : agentStatus?.waiting_for
+                  ? "What this agent is blocked on — needs human input to continue"
+                  : "The task this agent currently has claimed"
+            }
+          >
+            <p className={cn("mt-1 truncate text-xs w-fit", detail.className)}>
               {detail.text}
             </p>
+          </HelpTip>
         )}
         {usageRow && (
-          <p className="mt-1 truncate text-xs text-muted-foreground">
+          <HelpTip label="Token usage and cost for this agent over the last 24 hours">
+            <p className="mt-1 truncate text-xs text-muted-foreground w-fit">
               {usageRow.total_tokens >= 1_000
                 ? (usageRow.total_tokens / 1_000).toFixed(1) + "K"
                 : String(usageRow.total_tokens)}{" "}
               tok · ${usageRow.cost_usd.toFixed(4)}
             </p>
+          </HelpTip>
         )}
       </CardContent>
     </Card>

panel/src/components/agents/agent-grid.tsx

@@ -3,10 +3,14 @@ import { AgentDefinition } from "@/lib/agent-definitions";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardHeader } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { AgentCard } from "./agent-card";
 
 interface AgentGridProps {
   title: string;
+  /** Optional hover explanation of what this section groups — e.g. which
+   * roles fold into "Leadership". Falsy renders the bare heading. */
+  titleHint?: string;
   agents: AgentDefinition[];
   agentStatuses: Record<string, AgentStatusResponse>;
   agentUsage?: Record<string, AgentUsageRow>;
@@ -20,6 +24,7 @@ const GRID_COLS = "grid-cols-[repeat(auto-fill,minmax(17rem,1fr))]";
 
 export function AgentGrid({
   title,
+  titleHint,
   agents,
   agentStatuses,
   agentUsage,
@@ -28,12 +33,16 @@ export function AgentGrid({
   return (
     <div>
       <div className="mb-3 flex items-center gap-2">
-        <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+        <HelpTip label={titleHint}>
+          <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground w-fit">
             {title}
           </h2>
+        </HelpTip>
+        <HelpTip label={`${agents.length} agent${agents.length === 1 ? "" : "s"} in this section`}>
           <Badge variant="secondary" className="text-xs">
             {agents.length}
           </Badge>
+        </HelpTip>
       </div>
       <div className={"grid gap-3 " + GRID_COLS}>
         {isLoading

panel/src/components/agents/agent-selector.tsx

@@ -13,6 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import { HelpTip } from "@/components/ui/help-tip";
 import { User, Users } from "lucide-react";
 import { resolveToSlug } from "@/lib/agent-utils";
 
@@ -151,6 +152,7 @@ export function AgentSelector({
       onValueChange={handleValueChange}
       disabled={disabled || isLoading}
     >
+      <HelpTip label="Agents are grouped by team below — Board, Main PM, then each cell">
         <SelectTrigger className="w-full">
           <SelectValue placeholder={placeholder}>
             {selectedAgent ? (
@@ -168,13 +170,16 @@ export function AgentSelector({
             )}
           </SelectValue>
         </SelectTrigger>
+      </HelpTip>
       <SelectContent>
         {allowClear && value && (
           <SelectItem value="__clear__" className="text-muted-foreground">
+            <HelpTip label="Clears the current assignment">
               <span className="flex items-center gap-2">
                 <Users className="h-4 w-4" />
                 Unassigned
               </span>
+            </HelpTip>
           </SelectItem>
         )}
 

panel/src/components/agents/agent-status-cards.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { formatDistanceToNow } from "date-fns";
 import { AgentStatusResponse } from "@/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Activity, FileText, Clock, AlertCircle } from "lucide-react";
 import { AgentStateBadge } from "./agent-state-badge";
 
@@ -29,13 +30,15 @@ export function AgentStatusCards({ agent }: AgentStatusCardsProps) {
         </CardHeader>
         <CardContent>
           {agent.task_id ? (
+            <HelpTip label={`Full task id: ${agent.task_id}`}>
               <Link
                 prefetch={false}
                 href={"/tasks/" + agent.task_id}
-              className="text-blue-500 hover:underline"
+                className="text-blue-500 hover:underline w-fit inline-block"
               >
                 {agent.task_id.slice(0, 8)}...
               </Link>
+            </HelpTip>
           ) : (
             <span className="text-muted-foreground">No task assigned</span>
           )}
@@ -49,7 +52,11 @@ export function AgentStatusCards({ agent }: AgentStatusCardsProps) {
         </CardHeader>
         <CardContent>
           {agent.started_at ? (
-            <span>{formatDistanceToNow(new Date(agent.started_at))} ago</span>
+            <HelpTip label={new Date(agent.started_at).toLocaleString()}>
+              <span className="w-fit inline-block">
+                {formatDistanceToNow(new Date(agent.started_at))} ago
+              </span>
+            </HelpTip>
           ) : (
             <span className="text-muted-foreground">Not started</span>
           )}
@@ -62,17 +69,22 @@ export function AgentStatusCards({ agent }: AgentStatusCardsProps) {
           <AlertCircle className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
+          <HelpTip label="Errors this agent has hit since its current session started">
             <span
               className={
-              agent.error_count > 0 ? "text-red-600 font-semibold" : ""
+                "w-fit inline-block " +
+                (agent.error_count > 0 ? "text-red-600 font-semibold" : "")
               }
             >
               {agent.error_count}
             </span>
+          </HelpTip>
           {agent.waiting_for && (
-            <p className="text-xs text-yellow-600 mt-1 truncate">
+            <HelpTip label="This agent is blocked here and needs human input to continue">
+              <p className="text-xs text-yellow-600 mt-1 truncate w-fit">
                 Waiting: {agent.waiting_for}
               </p>
+            </HelpTip>
           )}
         </CardContent>
       </Card>

panel/src/components/agents/resolve-wait-dialog.tsx

@@ -13,6 +13,7 @@ import {
   DialogTrigger,
   DialogDescription,
 } from "@/components/ui/dialog";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Send } from "lucide-react";
 import { toast } from "sonner";
 
@@ -48,12 +49,14 @@ export function ResolveWaitDialog({ agentId }: ResolveWaitDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
+      <HelpTip label="Send the agent the information it needs to unblock and resume">
         <DialogTrigger asChild>
           <Button>
             <Send className="h-4 w-4 mr-2" />
             Resolve Wait
           </Button>
         </DialogTrigger>
+      </HelpTip>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Resolve Agent Wait</DialogTitle>
@@ -63,7 +66,9 @@ export function ResolveWaitDialog({ agentId }: ResolveWaitDialogProps) {
         </DialogHeader>
         <div className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="resolution">Resolution Message</Label>
+            <HelpTip label="Delivered to the agent verbatim as the answer to what it's waiting on">
+              <Label htmlFor="resolution" className="w-fit">Resolution Message</Label>
+            </HelpTip>
             <Textarea
               id="resolution"
               value={resolution}
@@ -73,12 +78,18 @@ export function ResolveWaitDialog({ agentId }: ResolveWaitDialogProps) {
             />
           </div>
           <div className="flex justify-end gap-2">
+            <HelpTip label="Closes without sending anything to the agent">
               <Button variant="outline" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
+            </HelpTip>
+            <HelpTip label="Delivers the message above to the agent so it can resume">
+              <span>
                 <Button onClick={handleResolve} disabled={resolveWait.isPending}>
                   {resolveWait.isPending ? "Sending..." : "Send Resolution"}
                 </Button>
+              </span>
+            </HelpTip>
           </div>
         </div>
       </DialogContent>

panel/src/components/agents/spawn-agent-dialog.tsx

@@ -15,6 +15,7 @@ import {
   DialogDescription,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Play } from "lucide-react";
 import { toast } from "sonner";
 
@@ -70,10 +71,12 @@ export function SpawnAgentDialog({
   };
 
   const defaultTrigger = (
+    <HelpTip label="Start this agent's container, optionally pre-claiming a task" side="left">
       <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
         <Play className="h-4 w-4 mr-2" />
         Spawn
       </DropdownMenuItem>
+    </HelpTip>
   );
 
   return (
@@ -88,7 +91,9 @@ export function SpawnAgentDialog({
         </DialogHeader>
         <div className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="taskId">Task ID (optional)</Label>
+            <HelpTip label="Pre-claims this task on spawn instead of pulling from the pool">
+              <Label htmlFor="taskId" className="w-fit">Task ID (optional)</Label>
+            </HelpTip>
             <Input
               id="taskId"
               value={taskId}
@@ -97,7 +102,9 @@ export function SpawnAgentDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="initialPrompt">Initial Prompt (optional)</Label>
+            <HelpTip label="Extra instructions passed to the agent's first turn">
+              <Label htmlFor="initialPrompt" className="w-fit">Initial Prompt (optional)</Label>
+            </HelpTip>
             <Input
               id="initialPrompt"
               value={initialPrompt}
@@ -106,12 +113,18 @@ export function SpawnAgentDialog({
             />
           </div>
           <div className="flex justify-end gap-2">
+            <HelpTip label="Closes without spawning">
               <Button variant="outline" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
+            </HelpTip>
+            <HelpTip label="Already-running agents are skipped — no duplicate container is started">
+              <span>
                 <Button onClick={handleSpawn} disabled={spawnAgent.isPending}>
                   {spawnAgent.isPending ? "Spawning..." : "Spawn Agent"}
                 </Button>
+              </span>
+            </HelpTip>
           </div>
         </div>
       </DialogContent>

panel/src/components/agents/stream-viewer.tsx

@@ -15,6 +15,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { HelpTip } from "@/components/ui/help-tip";
 import { useAgentStream, ConnectionState } from "@/hooks/use-websocket";
 import { Wifi, WifiOff, Loader2, Trash2 } from "lucide-react";
 
@@ -79,9 +80,11 @@ export function AgentStreamViewer({
             </CardDescription>
           </div>
           <div className="flex items-center gap-2">
+            <HelpTip label="Live WebSocket connection carrying this agent's output — auto-reconnects on drop">
               <Badge className={stateColors[state] + " text-white"}>
                 {stateLabels[state]}
               </Badge>
+            </HelpTip>
             {streamChunks.length > 0 && (
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -117,8 +120,12 @@ export function AgentStreamViewer({
           )}
         </pre>
         <div className="flex justify-between items-center mt-2 text-sm text-muted-foreground">
-          <span>{streamChunks.length} chunks received</span>
+          <HelpTip label="Number of stream messages received over this WebSocket connection">
-          <span>{streamOutput.length} characters</span>
+            <span className="w-fit">{streamChunks.length} chunks received</span>
+          </HelpTip>
+          <HelpTip label="Total length of the accumulated output text below">
+            <span className="w-fit">{streamOutput.length} characters</span>
+          </HelpTip>
         </div>
       </CardContent>
     </Card>

panel/src/components/agents/waiting-agents-alert.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { WaitingAgent } from "@/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { HelpTip } from "@/components/ui/help-tip";
 import { AlertTriangle } from "lucide-react";
 import { getAgentDisplayName } from "@/lib/agent-utils";
 
@@ -15,10 +16,12 @@ export function WaitingAgentsAlert({ waitingAgents }: WaitingAgentsAlertProps) {
   return (
     <Card className="border-orange-500/50">
       <CardHeader>
-        <CardTitle className="text-orange-500 flex items-center gap-2">
+        <HelpTip label="Agents blocked in a waiting_long state — refreshed every 10s" side="right">
+          <CardTitle className="text-orange-500 flex items-center gap-2 w-fit">
             <AlertTriangle className="h-5 w-5" />
             Agents Waiting for Input
           </CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
@@ -31,15 +34,19 @@ export function WaitingAgentsAlert({ waitingAgents }: WaitingAgentsAlertProps) {
                 <span className="font-medium">
                   {getAgentDisplayName(agent.agent_id)}
                 </span>
+                <HelpTip label="This agent is idle and will not progress until resolved">
                   <span className="text-muted-foreground ml-2">
                     waiting for: {agent.waiting_for}
                   </span>
+                </HelpTip>
               </div>
+              <HelpTip label="Opens this agent's detail page to send the resolution it needs">
                 <Button variant="outline" size="sm" asChild>
                   <Link href={"/agents/" + agent.agent_id} prefetch={false}>
                     Resolve
                   </Link>
                 </Button>
+              </HelpTip>
             </div>
           ))}
         </div>

panel/src/components/auditor/auditor-dashboard.tsx

@@ -12,6 +12,7 @@ import { FlaggedItemsPanel } from "./flagged-items-panel";
 import { ReportsPanel } from "./reports-panel";
 import { FindingsQueuePanel } from "./findings-queue-panel";
 import { Button } from "@/components/ui/button";
+import { HelpTip } from "@/components/ui/help-tip";
 import { FileText } from "lucide-react";
 import { toast } from "sonner";
 import { usePageRefresh } from "@/hooks";
@@ -56,14 +57,18 @@ export function AuditorDashboard() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
+          <HelpTip label="The Auditor is a silent observer — it doesn't act on tasks, only flags and reports to the CEO">
             <h1 className="text-3xl font-bold tracking-tight">
               Auditor Dashboard
             </h1>
+          </HelpTip>
           <p className="text-muted-foreground">
             Quality oversight, flagging, and reporting
           </p>
         </div>
         <div className="flex items-center gap-2">
+          <HelpTip label="Creates a draft audit-summary report you can edit and send from Reports below">
+            <span>
               <Button
                 onClick={handleGenerateReport}
                 disabled={createReport.isPending}
@@ -71,6 +76,8 @@ export function AuditorDashboard() {
                 <FileText className="h-4 w-4 mr-2" />
                 Generate Report
               </Button>
+            </span>
+          </HelpTip>
         </div>
       </div>
 

panel/src/components/auditor/create-flag-dialog.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { HelpTip } from "@/components/ui/help-tip";
 import {
   Dialog,
   DialogContent,
@@ -102,7 +103,9 @@ export function CreateFlagDialog({
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4 mt-4">
           <div className="space-y-2">
+            <HelpTip label="Required. Short summary shown atop the flag in the queue">
               <Label htmlFor="title">Title *</Label>
+            </HelpTip>
             <Input
               id="title"
               value={title}
@@ -113,7 +116,9 @@ export function CreateFlagDialog({
           </div>
 
           <div className="space-y-2">
+            <HelpTip label="Required. Full explanation, shown when the flag is expanded">
               <Label htmlFor="description">Description *</Label>
+            </HelpTip>
             <Textarea
               id="description"
               value={description}
@@ -126,7 +131,9 @@ export function CreateFlagDialog({
 
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
+              <HelpTip label="Info/Warning are tracked only; Urgent flags surface a direct Report-to-CEO action">
                 <Label>Severity</Label>
+              </HelpTip>
               <Select
                 value={severity}
                 onValueChange={(v) => setSeverity(v as FlagSeverity)}
@@ -144,7 +151,9 @@ export function CreateFlagDialog({
               </Select>
             </div>
             <div className="space-y-2">
+              <HelpTip label="Groups this flag for filtering and reporting purposes">
                 <Label>Category</Label>
+              </HelpTip>
               <Select value={category} onValueChange={setCategory}>
                 <SelectTrigger>
                   <SelectValue />
@@ -162,7 +171,9 @@ export function CreateFlagDialog({
 
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
+              <HelpTip label="Optional. Links this flag to a task — shown as a quick-link in the flags list">
                 <Label htmlFor="task">Related Task ID (optional)</Label>
+              </HelpTip>
               <Input
                 id="task"
                 value={relatedTaskId}
@@ -171,7 +182,9 @@ export function CreateFlagDialog({
               />
             </div>
             <div className="space-y-2">
+              <HelpTip label="Optional. Associates this flag with a specific agent for audit tracking">
                 <Label htmlFor="agent">Related Agent ID (optional)</Label>
+              </HelpTip>
               <Input
                 id="agent"
                 value={relatedAgentId}
@@ -182,6 +195,7 @@ export function CreateFlagDialog({
           </div>
 
           <div className="flex justify-end gap-2 pt-4">
+            <HelpTip label="Discards this draft and closes the dialog">
               <Button
                 type="button"
                 variant="outline"
@@ -192,9 +206,14 @@ export function CreateFlagDialog({
               >
                 Cancel
               </Button>
+            </HelpTip>
+            <HelpTip label="Saves the flag; it appears in Flagged Items right away">
+              <span>
                 <Button type="submit" disabled={createFlag.isPending}>
                   {createFlag.isPending ? "Creating..." : "Create Flag"}
                 </Button>
+              </span>
+            </HelpTip>
           </div>
         </form>
       </DialogContent>

panel/src/components/auditor/findings-queue-panel.tsx

@@ -46,12 +46,16 @@ export function FindingsQueuePanel({
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
+            <HelpTip label="Unresolved structured findings from QA, PR-gate, PM, and CEO review bounces">
               <CardTitle className="text-lg flex items-center gap-2">
                 <ListChecks className="h-5 w-5" />
                 Open Findings
               </CardTitle>
+            </HelpTip>
             {sorted.length > 0 && (
+              <HelpTip label="Number of currently open findings in this list">
                 <Badge variant="destructive">{sorted.length}</Badge>
+              </HelpTip>
             )}
           </div>
         </div>
@@ -64,10 +68,12 @@ export function FindingsQueuePanel({
             ))}
           </div>
         ) : sorted.length === 0 ? (
+          <HelpTip label="No blocker/major/minor/nit findings are currently open on any task">
             <div className="text-center py-8 text-muted-foreground text-sm">
               <ListChecks className="h-8 w-8 mx-auto mb-2 opacity-50" />
               No open review findings
             </div>
+          </HelpTip>
         ) : (
           <ScrollArea className="h-[400px] pr-4">
             <div className="space-y-3">
@@ -77,6 +83,7 @@ export function FindingsQueuePanel({
                   className="p-4 rounded-lg border bg-muted/50"
                 >
                   <div className="flex items-center gap-2 mb-1 flex-wrap">
+                    <HelpTip label="Severity: blocker > major > minor > nit, sorted most severe first">
                       <Badge
                         className={
                           (severityColors[finding.severity] ?? "") + " text-xs"
@@ -84,6 +91,7 @@ export function FindingsQueuePanel({
                       >
                         {finding.severity}
                       </Badge>
+                    </HelpTip>
                     <HelpTip label="Where this finding was raised — QA review, PR gate, PM review, or CEO approval">
                       <Badge variant="outline" className="text-xs">
                         {finding.origin}
@@ -95,15 +103,19 @@ export function FindingsQueuePanel({
                       </span>
                     </HelpTip>
                   </div>
+                  <HelpTip label="Shows actual → expected → criterion text, whichever is available first">
                     <p className="text-sm text-muted-foreground mb-2">
                       {finding.actual ?? finding.expected ?? finding.criterion ?? "—"}
                     </p>
+                  </HelpTip>
                   <div className="flex items-center gap-4 text-xs text-muted-foreground">
                     {finding.file && (
+                      <HelpTip label="Repo-relative file and line where this issue was found">
                         <span className="font-mono">
                           {finding.file}
                           {finding.line ? `:${finding.line}` : ""}
                         </span>
+                      </HelpTip>
                     )}
                     <Link
                       href={"/tasks/" + finding.task_id}

panel/src/components/auditor/flagged-item.tsx

@@ -52,30 +52,40 @@ export function FlaggedItem({
     >
       <div className="flex items-start justify-between gap-4">
         <div className="flex items-start gap-3 flex-1 min-w-0">
+          <HelpTip label="Green = info, yellow = warning, red = urgent severity">
             <span className="text-xl">{severityEmoji[flag.severity]}</span>
+          </HelpTip>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1 flex-wrap">
               <span className="font-medium text-sm">{flag.title}</span>
+              <HelpTip label="Determines this flag's priority — Urgent sorts first in the queue">
                 <Badge className={severityColors[flag.severity] + " text-xs"}>
                   {flag.severity}
                 </Badge>
+              </HelpTip>
+              <HelpTip label="Category assigned when this flag was created (quality, process, security, etc.)">
                 <Badge variant="outline" className="text-xs">
                   {flag.category}
                 </Badge>
+              </HelpTip>
               {isResolved && (
+                <HelpTip label="Hidden from the default Unresolved filter (still visible under Resolved or All)">
                   <Badge className="bg-green-100 text-green-700 text-xs">
                     Resolved
                   </Badge>
+                </HelpTip>
               )}
             </div>
             <p className="text-sm text-muted-foreground mb-2">
               {flag.description}
             </p>
             <div className="flex items-center gap-4 text-xs text-muted-foreground">
+              <HelpTip label={new Date(flag.created_at).toLocaleString()}>
                 <span className="flex items-center gap-1">
                   <Clock className="h-3 w-3" />
                   {formatTime(flag.created_at)}
                 </span>
+              </HelpTip>
               {flag.related_task_id && (
                 <Link href={"/tasks/" + flag.related_task_id} prefetch={false}>
                   <HelpTip label="Short task ID — first 8 characters of the full task identifier">
@@ -99,6 +109,7 @@ export function FlaggedItem({
                 </HelpTip>
               </Link>
             )}
+            <HelpTip label="Marks this flag resolved; it moves out of the default Unresolved filter">
               <Button
                 variant="outline"
                 size="sm"
@@ -107,7 +118,9 @@ export function FlaggedItem({
                 <CheckCircle className="h-4 w-4 mr-1" />
                 Resolve
               </Button>
+            </HelpTip>
             {flag.severity === FlagSeverity.URGENT && (
+              <HelpTip label="Only shown for Urgent-severity flags">
                 <Button
                   variant="default"
                   size="sm"
@@ -116,6 +129,7 @@ export function FlaggedItem({
                   <Send className="h-4 w-4 mr-1" />
                   Report CEO
                 </Button>
+              </HelpTip>
             )}
           </div>
         )}

panel/src/components/auditor/flagged-items-panel.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { HelpTip } from "@/components/ui/help-tip";
 import {
   Select,
   SelectContent,
@@ -70,12 +71,16 @@ export function FlaggedItemsPanel({
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
+            <HelpTip label="Issues manually flagged by the Auditor for quality tracking">
               <CardTitle className="text-lg flex items-center gap-2">
                 <Flag className="h-5 w-5" />
                 Flagged Items
               </CardTitle>
+            </HelpTip>
             {unresolvedCount > 0 && (
+              <HelpTip label="Count of currently unresolved flags">
                 <Badge variant="destructive">{unresolvedCount}</Badge>
+              </HelpTip>
             )}
           </div>
           <div className="flex items-center gap-2">
@@ -85,19 +90,23 @@ export function FlaggedItemsPanel({
                 setFilter(v as "all" | "unresolved" | "resolved")
               }
             >
+              <HelpTip label="Filter the list by resolution status">
                 <SelectTrigger className="w-auto min-w-24 h-8">
                   <SelectValue />
                 </SelectTrigger>
+              </HelpTip>
               <SelectContent>
                 <SelectItem value="unresolved">Unresolved</SelectItem>
                 <SelectItem value="resolved">Resolved</SelectItem>
                 <SelectItem value="all">All</SelectItem>
               </SelectContent>
             </Select>
+            <HelpTip label="Opens a form to manually create a new quality flag">
               <Button size="sm" onClick={() => setCreateDialogOpen(true)}>
                 <Plus className="h-4 w-4 mr-1" />
                 Flag
               </Button>
+            </HelpTip>
           </div>
         </div>
       </CardHeader>
@@ -109,10 +118,12 @@ export function FlaggedItemsPanel({
             ))}
           </div>
         ) : sortedFlags.length === 0 ? (
+          <HelpTip label="No flags match the selected status filter">
             <div className="text-center py-8 text-muted-foreground text-sm">
               <Flag className="h-8 w-8 mx-auto mb-2 opacity-50" />
               No {filter === "all" ? "" : filter} flags
             </div>
+          </HelpTip>
         ) : (
           <ScrollArea className="h-[400px] pr-4">
             <div className="space-y-3">

panel/src/components/auditor/quality-metrics-panel.tsx

@@ -81,10 +81,12 @@ export function QualityMetricsPanel({
   return (
     <Card>
       <CardHeader className="pb-3">
+        <HelpTip label="Rolling delivery metrics feeding the Auditor's oversight view, refreshed every 30s">
           <CardTitle className="text-lg flex items-center gap-2">
             <BarChart3 className="h-5 w-5" />
             Quality Metrics
           </CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (

panel/src/components/auditor/reports-panel.tsx

@@ -69,10 +69,14 @@ export function ReportsPanel({
     <Card>
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
+          <HelpTip label="Audit reports for the CEO; drafts stay editable until sent">
             <CardTitle className="text-lg flex items-center gap-2">
               <FileText className="h-5 w-5" />
               Reports
             </CardTitle>
+          </HelpTip>
+          <HelpTip label="Creates a new draft report you can edit and send below">
+            <span>
               <Button
                 size="sm"
                 onClick={handleNewReport}
@@ -81,6 +85,8 @@ export function ReportsPanel({
                 <Plus className="h-4 w-4 mr-1" />
                 New Report
               </Button>
+            </span>
+          </HelpTip>
         </div>
       </CardHeader>
       <CardContent>
@@ -91,10 +97,12 @@ export function ReportsPanel({
             ))}
           </div>
         ) : !reports || reports.length === 0 ? (
+          <HelpTip label="No audit reports have been generated yet — use New Report to create one">
             <div className="text-center py-8 text-muted-foreground text-sm">
               <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
               No reports yet
             </div>
+          </HelpTip>
         ) : (
           <ScrollArea className="h-[300px] pr-4">
             <div className="space-y-3">
@@ -107,19 +115,29 @@ export function ReportsPanel({
                   >
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2 mb-1">
+                        <HelpTip label="Draft reports aren't visible to the CEO until sent">
                           <Badge variant={isDraft ? "secondary" : "default"}>
                             {isDraft ? "Draft" : "Sent"}
                           </Badge>
+                        </HelpTip>
                         <span className="font-medium text-sm truncate">
                           {report.title}
                         </span>
                       </div>
                       <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                        <span className="capitalize">{report.report_type}</span>
+                        <HelpTip label="Report category set when this report was created">
+                          <span className="capitalize">
+                            {report.report_type}
+                          </span>
+                        </HelpTip>
+                        <HelpTip
+                          label={new Date(report.created_at).toLocaleString()}
+                        >
                           <span className="flex items-center gap-1">
                             <Clock className="h-3 w-3" />
                             {formatDate(report.created_at)}
                           </span>
+                        </HelpTip>
                       </div>
                     </div>
                     <div className="flex items-center gap-2 shrink-0">
@@ -129,6 +147,8 @@ export function ReportsPanel({
                         </Button>
                       </HelpTip>
                       {isDraft && (
+                        <HelpTip label="Sends this draft report to the CEO">
+                          <span>
                             <Button
                               variant="outline"
                               size="sm"
@@ -138,6 +158,8 @@ export function ReportsPanel({
                               <Send className="h-4 w-4 mr-1" />
                               Send
                             </Button>
+                          </span>
+                        </HelpTip>
                       )}
                     </div>
                   </div>

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

@@ -44,12 +44,16 @@ export function ActiveBlockersPanel({
     <Card>
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
+          <HelpTip label="Tasks in BLOCKED status, oldest first">
             <CardTitle className="text-lg flex items-center gap-2">
               <AlertTriangle className="h-5 w-5 text-red-500" />
               Active Blockers
             </CardTitle>
+          </HelpTip>
           {blockedTasks.length > 0 && (
+            <HelpTip label="Shown below — capped at 5, there may be more">
               <Badge variant="destructive">{blockedTasks.length}</Badge>
+            </HelpTip>
           )}
         </div>
       </CardHeader>
@@ -77,16 +81,20 @@ export function ActiveBlockersPanel({
                           Task #{task.id.slice(0, 8)}
                         </span>
                       </HelpTip>
+                      <HelpTip label="Team currently responsible for this task">
                         <Badge variant="outline" className="text-xs capitalize">
                           {task.team.replace(/_/g, " ")}
                         </Badge>
+                      </HelpTip>
                     </div>
                     <p className="text-sm truncate">{task.title}</p>
+                    <HelpTip label="Time since this task's last status update (or creation, if never updated)">
                       <div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground">
                         <Clock className="h-3 w-3" />
                         Blocked for{" "}
                         {formatDuration(task.updated_at ?? task.created_at)}
                       </div>
+                    </HelpTip>
                   </div>
                 </div>
               </Link>
@@ -95,10 +103,12 @@ export function ActiveBlockersPanel({
         )}
         <div className="mt-4 pt-3 border-t">
           <Link href="/tasks?status=blocked" prefetch={false}>
+            <HelpTip label="The complete blocked-task list — not capped to 5">
               <Button variant="ghost" size="sm" className="w-full">
                 View All Blocked
                 <ArrowRight className="h-4 w-4 ml-2" />
               </Button>
+            </HelpTip>
           </Link>
         </div>
       </CardContent>

panel/src/components/dashboard/activity-item.tsx

@@ -9,6 +9,7 @@ import {
   Clock,
 } from "lucide-react";
 import { getAgentDisplayName } from "@/lib/agent-utils";
+import { HelpTip } from "@/components/ui/help-tip";
 
 export interface Activity {
   id: string;
@@ -66,9 +67,11 @@ export function ActivityItem({ activity }: ActivityItemProps) {
       <div className="mt-0.5">{icon}</div>
       <div className="flex-1 min-w-0">
         <p className="text-sm">
+          <HelpTip label={`Agent slug: ${activity.agent_id}`}>
             <span className="font-medium">
               {getAgentDisplayName(activity.agent_id)}
-          </span>{" "}
+            </span>
+          </HelpTip>{" "}
           <span className="text-muted-foreground">{label}</span>
           {activity.task_title && (
             <>
@@ -77,9 +80,17 @@ export function ActivityItem({ activity }: ActivityItemProps) {
             </>
           )}
         </p>
+        <HelpTip
+          label={
+            activity.timestamp
+              ? `Exact time: ${new Date(activity.timestamp).toLocaleString()}`
+              : ""
+          }
+        >
           <span className="text-xs text-muted-foreground">
             {activity.timestamp ? formatTime(activity.timestamp) : "N/A"}
           </span>
+        </HelpTip>
       </div>
     </div>
   );

panel/src/components/dashboard/auditor-alerts-panel.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Shield, ArrowRight } from "lucide-react";
 import Link from "next/link";
+import { HelpTip } from "@/components/ui/help-tip";
 
 interface AuditorAlertsPanelProps {
   alerts: AuditorFlag[] | undefined;
@@ -49,12 +50,16 @@ export function AuditorAlertsPanel({
     <Card>
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
+          <HelpTip label="Unresolved flags raised by the silent Auditor role, most severe first">
             <CardTitle className="text-lg flex items-center gap-2">
               <Shield className="h-5 w-5" />
               Auditor Alerts
             </CardTitle>
+          </HelpTip>
           {unresolvedAlerts.length > 0 && (
+            <HelpTip label="Shown below — capped at 5, there may be more">
               <Badge variant="destructive">{unresolvedAlerts.length}</Badge>
+            </HelpTip>
           )}
         </div>
       </CardHeader>
@@ -77,17 +82,33 @@ export function AuditorAlertsPanel({
                 key={alert.id}
                 className="flex items-start gap-3 p-3 rounded-lg border bg-muted/30"
               >
-                <span className="text-lg">{severityEmoji[alert.severity]}</span>
+                <HelpTip
+                  label={`Severity: ${alert.severity}${alert.category ? ` — ${alert.category}` : ""}`}
+                >
+                  <span className="text-lg">
+                    {severityEmoji[alert.severity]}
+                  </span>
+                </HelpTip>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
                     <span className="font-medium text-sm truncate">
                       {alert.title}
                     </span>
+                    <HelpTip
+                      label={
+                        alert.severity === "urgent"
+                          ? "Urgent — needs attention now"
+                          : alert.severity === "warning"
+                            ? "Warning — worth a look soon"
+                            : "Info — no action required"
+                      }
+                    >
                       <Badge
                         className={severityColors[alert.severity] + " text-xs"}
                       >
                         {alert.severity}
                       </Badge>
+                    </HelpTip>
                   </div>
                   <p className="text-xs text-muted-foreground line-clamp-1">
                     {alert.description}
@@ -99,10 +120,12 @@ export function AuditorAlertsPanel({
         )}
         <div className="mt-4 pt-3 border-t">
           <Link href="/auditor" prefetch={false}>
+            <HelpTip label="Full Auditor report, including resolved flags">
               <Button variant="ghost" size="sm" className="w-full">
                 View All Flags
                 <ArrowRight className="h-4 w-4 ml-2" />
               </Button>
+            </HelpTip>
           </Link>
         </div>
       </CardContent>

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

@@ -225,7 +225,9 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2 mb-1">
           {getPriorityBadge(task.priority)}
+          <HelpTip label="Team this task belongs to">
             <Badge variant="outline">{task.team}</Badge>
+          </HelpTip>
         </div>
         <Link
           prefetch={false}
@@ -250,6 +252,7 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
             </Button>
           </HelpTip>
         </Link>
+        <HelpTip label="Sends this task back to needs_revision with your reason">
           <Button
             variant="outline"
             size="sm"
@@ -259,7 +262,9 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
             <XCircle className="h-4 w-4 mr-1" />
             Reject
           </Button>
+        </HelpTip>
         {kind === "start" ? (
+          <HelpTip label="Hands the task to the Main PM to delegate to the cells">
             <Button
               size="sm"
               className="bg-blue-600 hover:bg-blue-700"
@@ -268,7 +273,9 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
               <Rocket className="h-4 w-4 mr-1" />
               Approve &amp; Start
             </Button>
+          </HelpTip>
         ) : (
+          <HelpTip label="Merges the PR and marks the task completed">
             <Button
               size="sm"
               className="bg-green-600 hover:bg-green-700"
@@ -277,6 +284,7 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
               <CheckCircle2 className="h-4 w-4 mr-1" />
               Approve
             </Button>
+          </HelpTip>
         )}
       </div>
     </div>
@@ -290,9 +298,11 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
             <Clock className="h-5 w-5" />
             CEO Approval Queue
             {totalCount > 0 && (
+              <HelpTip label="Ready-to-start plus final-approval tasks combined">
                 <Badge variant="secondary" className="ml-2">
                   {totalCount}
                 </Badge>
+              </HelpTip>
             )}
           </CardTitle>
           <CardDescription>Tasks waiting on your decision</CardDescription>
@@ -307,17 +317,21 @@ export function CeoApprovalQueue({ className }: CeoApprovalQueueProps) {
             <div className="space-y-5">
               {readyToStart.length > 0 && (
                 <div className="space-y-3">
+                  <HelpTip label="Board finished reviewing; still pending until you approve & start">
                     <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                       Ready to start · board reviewed
                     </p>
+                  </HelpTip>
                   {readyToStart.map((task) => renderRow(task, "start"))}
                 </div>
               )}
               {pendingTasks.length > 0 && (
                 <div className="space-y-3">
+                  <HelpTip label="Delivery work is done; this is the last gate before merge">
                     <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                       Final approval · work complete
                     </p>
+                  </HelpTip>
                   {pendingTasks.map((task) => renderRow(task, "approve"))}
                 </div>
               )}

panel/src/components/dashboard/command-center.tsx

@@ -33,6 +33,7 @@ import {
 } from "@/components/ui/tooltip";
 import { Settings, AlertCircle } from "lucide-react";
 import Link from "next/link";
+import { HelpTip } from "@/components/ui/help-tip";
 
 const SETTINGS_LABEL = "Open settings";
 
@@ -137,7 +138,11 @@ export function CommandCenter() {
 
       {/* Section 1: Quick Actions + the four key cards */}
       <section>
-        <h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
+        <HelpTip label="One-click shortcuts to the pages you visit most often">
+          <h2 className="text-lg font-semibold mb-4 inline-block">
+            Quick Actions
+          </h2>
+        </HelpTip>
         <QuickActionsBar />
       </section>
 
@@ -153,7 +158,11 @@ export function CommandCenter() {
 
       {/* Section 2: Team Health (team cards + Task Intake + Secretary) */}
       <section>
-        <h2 className="text-lg font-semibold mb-4">Team Health</h2>
+        <HelpTip label="Per-team blocked ratio and throughput, plus the on-demand agents">
+          <h2 className="text-lg font-semibold mb-4 inline-block">
+            Team Health
+          </h2>
+        </HelpTip>
         <TeamHealthCards
           teams={overview?.health_status}
           isLoading={loadingOverview}

panel/src/components/dashboard/key-metrics-panel.tsx

@@ -61,7 +61,9 @@ export function KeyMetricsPanel({ metrics, isLoading }: KeyMetricsProps) {
   return (
     <Card>
       <CardHeader className="pb-3">
+        <HelpTip label="Org-wide 7-day delivery snapshot from DashboardService">
           <CardTitle className="text-lg">Key Metrics</CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (

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

@@ -25,6 +25,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { BookOpen, CheckCircle2, XCircle } from "lucide-react";
 import { toast } from "sonner";
+import { HelpTip } from "@/components/ui/help-tip";
 
 const _MIN_REASON = 4;
 
@@ -89,9 +90,15 @@ export function PlaybookReviewQueue({ className }: { className?: string }) {
       <Card className={className}>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
+            <HelpTip label="Procedures agents drafted from real task runs, awaiting your curation call">
+              <span className="inline-flex items-center gap-2">
                 <BookOpen className="h-5 w-5" />
                 Playbook Review
+              </span>
+            </HelpTip>
+            <HelpTip label="Drafts awaiting a decision">
               <Badge variant="secondary">{drafts.length}</Badge>
+            </HelpTip>
           </CardTitle>
           <CardDescription>
             Drafted playbooks awaiting your approval — approved ones are indexed
@@ -106,11 +113,17 @@ export function PlaybookReviewQueue({ className }: { className?: string }) {
             >
               <div className="mb-1 flex items-center gap-2">
                 <span className="font-medium">{pb.title}</span>
-                {pb.team && <Badge variant="outline">{pb.team}</Badge>}
+                {pb.team && (
+                  <HelpTip label="Team that authored this playbook">
+                    <Badge variant="outline">{pb.team}</Badge>
+                  </HelpTip>
+                )}
                 {pb.tags.map((t) => (
-                  <Badge key={t} variant="secondary" className="text-xs">
+                  <HelpTip key={t} label="Search/filter tag for this playbook">
+                    <Badge variant="secondary" className="text-xs">
                       {t}
                     </Badge>
+                  </HelpTip>
                 ))}
               </div>
               <p className="text-sm text-muted-foreground">
@@ -120,6 +133,7 @@ export function PlaybookReviewQueue({ className }: { className?: string }) {
                 {pb.procedure}
               </pre>
               <div className="mt-3 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+                <HelpTip label="Archives this draft — it is never indexed">
                   <Button
                     variant="outline"
                     size="sm"
@@ -129,6 +143,8 @@ export function PlaybookReviewQueue({ className }: { className?: string }) {
                     <XCircle className="mr-1 h-4 w-4" />
                     Reject
                   </Button>
+                </HelpTip>
+                <HelpTip label="Indexes this playbook so it's auto-suggested to agents">
                   <Button
                     size="sm"
                     className="bg-green-600 hover:bg-green-700"
@@ -141,6 +157,7 @@ export function PlaybookReviewQueue({ className }: { className?: string }) {
                     <CheckCircle2 className="mr-1 h-4 w-4" />
                     Approve
                   </Button>
+                </HelpTip>
               </div>
             </div>
           ))}

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

@@ -27,6 +27,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { HelpTip } from "@/components/ui/help-tip";
 import {
   GitPullRequest,
   ExternalLink,
@@ -139,9 +140,11 @@ export function PrReviewQueue({ className }: PrReviewQueueProps) {
           <CardTitle className="flex items-center gap-2">
             <GitPullRequest className="h-5 w-5" />
             PR Reviews
+            <HelpTip label="External PRs in review or awaiting your call">
               <Badge variant="secondary" className="ml-2">
                 {items.length}
               </Badge>
+            </HelpTip>
           </CardTitle>
           <CardDescription>
             External PRs the org is reviewing or has reviewed — the reviewer
@@ -175,14 +178,18 @@ export function PrReviewQueue({ className }: PrReviewQueueProps) {
                         {task.title}
                       </Link>
                       {awaiting ? (
+                        <HelpTip label="The reviewer finished — pick Supersede or Dismiss below">
                           <Badge variant="secondary" className="shrink-0">
                             Awaiting your call
                           </Badge>
+                        </HelpTip>
                       ) : (
+                        <HelpTip label="The PR reviewer task hasn't reached completed yet">
                           <Badge variant="outline" className="shrink-0 gap-1">
                             <Loader2 className="h-3 w-3 animate-spin" />
                             Reviewing
                           </Badge>
+                        </HelpTip>
                       )}
                     </div>
                     {task.description && (
@@ -224,6 +231,7 @@ export function PrReviewQueue({ className }: PrReviewQueueProps) {
                     </TooltipProvider>
                     {awaiting && (
                       <>
+                        <HelpTip label="Drops this from the queue — the review stays on the GitHub PR">
                           <Button
                             variant="outline"
                             size="sm"
@@ -233,6 +241,8 @@ export function PrReviewQueue({ className }: PrReviewQueueProps) {
                             <XCircle className="h-4 w-4 mr-1" />
                             Dismiss
                           </Button>
+                        </HelpTip>
+                        <HelpTip label="The org takes the contribution over and finishes it">
                           <Button
                             size="sm"
                             className="bg-blue-600 hover:bg-blue-700"
@@ -241,6 +251,7 @@ export function PrReviewQueue({ className }: PrReviewQueueProps) {
                             <Rocket className="h-4 w-4 mr-1" />
                             Supersede
                           </Button>
+                        </HelpTip>
                       </>
                     )}
                   </div>

panel/src/components/dashboard/quick-actions-bar.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { CreateTaskDialog } from "@/components/tasks/create-task-dialog";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Users, BookOpen, Shield, Sparkles, Bot } from "lucide-react";
 import Link from "next/link";
 
@@ -11,38 +12,48 @@ export function QuickActionsBar() {
       <CreateTaskDialog />
 
       <Link href="/agents" prefetch={false}>
+        <HelpTip label="Agents page — view the roster and spawn a new agent run">
           <Button variant="outline">
             <Users className="h-4 w-4 mr-2" />
             Spawn Agent
           </Button>
+        </HelpTip>
       </Link>
 
       <Link href="/prompter" prefetch={false}>
+        <HelpTip label="Chat-based interview to draft and submit a new task">
           <Button variant="outline">
             <Sparkles className="h-4 w-4 mr-2" />
             Task Intake
           </Button>
+        </HelpTip>
       </Link>
 
       <Link href="/business?tab=secretary" prefetch={false}>
+        <HelpTip label="Chat with the Secretary — company state and gated CEO directives">
           <Button variant="outline">
             <Bot className="h-4 w-4 mr-2" />
             Secretary
           </Button>
+        </HelpTip>
       </Link>
 
       <Link href="/journals" prefetch={false}>
+        <HelpTip label="Browse agent journal entries and learnings">
           <Button variant="outline">
             <BookOpen className="h-4 w-4 mr-2" />
             View Journals
           </Button>
+        </HelpTip>
       </Link>
 
       <Link href="/auditor" prefetch={false}>
+        <HelpTip label="The Auditor's flagged issues and reports">
           <Button variant="outline">
             <Shield className="h-4 w-4 mr-2" />
             Auditor Report
           </Button>
+        </HelpTip>
       </Link>
     </div>
   );

panel/src/components/dashboard/recent-activity-feed.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Activity as ActivityIcon, ArrowRight } from "lucide-react";
 import { ActivityItem, Activity } from "./activity-item";
 import Link from "next/link";
@@ -20,10 +21,12 @@ export function RecentActivityFeed({
   return (
     <Card>
       <CardHeader className="pb-3">
+        <HelpTip label="The 10 most recent agent actions from the last 24 hours">
           <CardTitle className="text-lg flex items-center gap-2">
             <ActivityIcon className="h-5 w-5" />
             Recent Activity
           </CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (
@@ -48,10 +51,12 @@ export function RecentActivityFeed({
         )}
         <div className="mt-4 pt-3 border-t">
           <Link href="/notifications" prefetch={false}>
+            <HelpTip label="Opens Notifications — the complete activity history">
               <Button variant="ghost" size="sm" className="w-full">
                 View Full Activity
                 <ArrowRight className="h-4 w-4 ml-2" />
               </Button>
+            </HelpTip>
           </Link>
         </div>
       </CardContent>

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

@@ -172,7 +172,9 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
           <CardTitle className="flex items-center gap-2">
             <Rocket className="h-5 w-5" />
             Release Proposal
+            <HelpTip label="Next version number, computed from the commit classification below">
               <Badge variant="outline">v{report.proposed_version}</Badge>
+            </HelpTip>
             <HelpTip label="Semver bump type — how the version number increases (major, minor, or patch)">
               <Badge variant="secondary">{report.bump_kind}</Badge>
             </HelpTip>
@@ -208,18 +210,22 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
           )}
 
           <div>
+            <HelpTip label="Written by the release manager from conventional-commit messages since the last tag">
               <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 Drafted CHANGELOG
               </p>
+            </HelpTip>
             <pre className="max-h-60 overflow-auto rounded-md bg-muted p-3 text-xs whitespace-pre-wrap">
               {report.drafted_changelog}
             </pre>
           </div>
 
           <div>
+            <HelpTip label="Files the executor will rewrite with the new version number on approve">
               <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 Version bump plan ({report.version_bump_plan.length} files)
               </p>
+            </HelpTip>
             <p className="text-sm text-muted-foreground">
               {report.version_bump_plan.join(", ")}
             </p>
@@ -227,9 +233,11 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
 
           {report.migration_notes.length > 0 && (
             <div>
+              <HelpTip label="Alembic migrations included in this release — check for a single head">
                 <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   Migrations
                 </p>
+              </HelpTip>
               <ul className="space-y-1 text-sm text-muted-foreground">
                 {report.migration_notes.map((note, i) => (
                   <li key={i}>{note}</li>
@@ -272,6 +280,14 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
           )}
 
           <div className="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:items-center sm:justify-end">
+            <HelpTip
+              label={
+                executeInFlight
+                  ? "Disabled while the execute is running"
+                  : "Cancels the proposal — a fresh assessment runs next cycle"
+              }
+            >
+              <span>
                 <Button
                   variant="outline"
                   size="sm"
@@ -282,6 +298,16 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
                   <XCircle className="mr-1 h-4 w-4" />
                   Reject with changes
                 </Button>
+              </span>
+            </HelpTip>
+            <HelpTip
+              label={
+                executeInFlight
+                  ? "Disabled while the execute is running"
+                  : "Runs the fail-closed executor: bump + CHANGELOG + gate + CI + publish"
+              }
+            >
+              <span>
                 <Button
                   size="sm"
                   className="bg-green-600 hover:bg-green-700"
@@ -289,8 +315,12 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
                   disabled={executeInFlight}
                 >
                   <CheckCircle2 className="mr-1 h-4 w-4" />
-              {executeFailed ? "Retry approve & publish" : "Approve & publish"}
+                  {executeFailed
+                    ? "Retry approve & publish"
+                    : "Approve & publish"}
                 </Button>
+              </span>
+            </HelpTip>
           </div>
         </CardContent>
       </Card>

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

@@ -37,13 +37,19 @@ interface RejectTarget {
 function itemStatusBadge(item: RoadmapItem) {
   if (item.status === "approved") {
     return (
+      <HelpTip label="Materialized as a BACKLOG task">
         <Badge variant="secondary" className="bg-green-600/10 text-green-700">
           Approved
         </Badge>
+      </HelpTip>
     );
   }
   if (item.status === "rejected") {
-    return <Badge variant="outline">Rejected</Badge>;
+    return (
+      <HelpTip label="Recorded, not added to the backlog">
+        <Badge variant="outline">Rejected</Badge>
+      </HelpTip>
+    );
   }
   return null;
 }
@@ -95,6 +101,7 @@ function RoadmapItemRow({
       )}
       {isProposed && (
         <div className="mt-3 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+          <HelpTip label="Records your reason and feeds the next cycle's prompt — not added to the backlog">
             <Button
               variant="outline"
               size="sm"
@@ -104,6 +111,8 @@ function RoadmapItemRow({
               <XCircle className="mr-1 h-4 w-4" />
               Reject
             </Button>
+          </HelpTip>
+          <HelpTip label="Materializes this item as a BACKLOG task — needs normal PM activation to start">
             <Button
               size="sm"
               className="bg-green-600 hover:bg-green-700"
@@ -113,6 +122,7 @@ function RoadmapItemRow({
               <CheckCircle2 className="mr-1 h-4 w-4" />
               Approve
             </Button>
+          </HelpTip>
         </div>
       )}
     </div>
@@ -138,7 +148,9 @@ function RoadmapCycleCard({
         <CardTitle className="flex items-center gap-2">
           <Map className="h-5 w-5" />
           Roadmap Cycle
+          <HelpTip label="Items still awaiting your approve/reject decision">
             <Badge variant="secondary">{pending} pending</Badge>
+          </HelpTip>
         </CardTitle>
         <CardDescription>{cycle.goal}</CardDescription>
       </CardHeader>

panel/src/components/dashboard/scorecard-overview-panel.tsx

@@ -54,17 +54,23 @@ export function ScorecardOverviewPanel() {
     <Card>
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
+          <HelpTip label="Org-wide performance rollup for the last 30 days">
             <CardTitle className="flex items-center gap-2 text-lg">
               <Trophy className="h-5 w-5" />
               Performance
             </CardTitle>
+          </HelpTip>
           <Link
             prefetch={false}
             href="/metrics?tab=scorecards"
             className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-xs"
           >
+            <HelpTip label="Per-agent and per-team scorecards, full detail">
+              <span className="flex items-center gap-1">
                 Scorecards
                 <ArrowRight className="h-3 w-3" />
+              </span>
+            </HelpTip>
           </Link>
         </div>
       </CardHeader>

panel/src/components/dashboard/social-summary-card.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Share2 } from "lucide-react";
 
 // Compact stand-in for the full X/video queues on the command center — the
@@ -41,7 +42,11 @@ export function SocialSummaryCard({ className }: { className?: string }) {
         <CardTitle className="flex items-center gap-2">
           <Share2 className="h-5 w-5" />
           Social
-          {total > 0 && <Badge variant="secondary">{total}</Badge>}
+          {total > 0 && (
+            <HelpTip label="X + video drafts combined">
+              <Badge variant="secondary">{total}</Badge>
+            </HelpTip>
+          )}
         </CardTitle>
         <CardDescription>
           Held X and video drafts awaiting your approval.
@@ -49,17 +54,23 @@ export function SocialSummaryCard({ className }: { className?: string }) {
       </CardHeader>
       <CardContent className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex gap-4 text-sm text-muted-foreground">
+          <HelpTip label="Drafted release posts, feature spotlights, and mention replies awaiting review">
             <span>
               {xCount} X draft{xCount === 1 ? "" : "s"}
             </span>
+          </HelpTip>
+          <HelpTip label="Rendered video clips awaiting review">
             <span>
               {videoCount} video draft{videoCount === 1 ? "" : "s"}
             </span>
+          </HelpTip>
         </div>
         <Link href="/social" prefetch={false}>
+          <HelpTip label="Opens the full X and video queues plus posting history">
             <Button variant="outline" size="sm">
               Open Social
             </Button>
+          </HelpTip>
         </Link>
       </CardContent>
     </Card>

panel/src/components/dashboard/strategy-signals-panel.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { TrendingUp } from "lucide-react";
 
 interface StrategySignalsPanelProps {
@@ -29,10 +30,12 @@ export function StrategySignalsPanel({ className }: StrategySignalsPanelProps) {
   return (
     <Card className={className}>
       <CardHeader>
+        <HelpTip label="Notable patterns the strategy engine detected across delivery data">
           <CardTitle className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
             Strategy Signals
           </CardTitle>
+        </HelpTip>
         <CardDescription>Live signals from the strategy engine</CardDescription>
       </CardHeader>
       <CardContent>
@@ -55,9 +58,11 @@ export function StrategySignalsPanel({ className }: StrategySignalsPanelProps) {
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
+                    <HelpTip label="Signal category from the strategy engine">
                       <Badge variant="outline" className="text-xs">
                         {signal.kind}
                       </Badge>
+                    </HelpTip>
                   </div>
                   <p className="font-medium text-sm">{signal.summary}</p>
                   {signal.detail && (

panel/src/components/dashboard/team-health-card.tsx

@@ -34,6 +34,7 @@ export function TeamHealthCard({ health }: TeamHealthCardProps) {
       </CardHeader>
       <CardContent className="space-y-3">
         {/* Active Tasks */}
+        <HelpTip label="Tasks this team currently has claimed or in progress">
           <div className="flex items-center justify-between text-sm">
             <div className="flex items-center gap-2 text-muted-foreground">
               <Users className="h-4 w-4" />
@@ -41,8 +42,10 @@ export function TeamHealthCard({ health }: TeamHealthCardProps) {
             </div>
             <span className="font-medium">{health.active_tasks}</span>
           </div>
+        </HelpTip>
 
         {/* Blocked Tasks */}
+        <HelpTip label="Tasks this team currently has in the blocked status">
           <div className="flex items-center justify-between text-sm">
             <div className="flex items-center gap-2 text-muted-foreground">
               <AlertTriangle className="h-4 w-4" />
@@ -54,8 +57,10 @@ export function TeamHealthCard({ health }: TeamHealthCardProps) {
               {health.blocked_tasks}
             </span>
           </div>
+        </HelpTip>
 
         {/* Completed This Week */}
+        <HelpTip label="Tasks this team completed in the last 7 days">
           <div className="flex items-center justify-between text-sm">
             <div className="flex items-center gap-2 text-muted-foreground">
               <TrendingUp className="h-4 w-4" />
@@ -63,6 +68,7 @@ export function TeamHealthCard({ health }: TeamHealthCardProps) {
             </div>
             <span className="font-medium">{health.completed_this_week}</span>
           </div>
+        </HelpTip>
 
         {/* Blocked Ratio */}
         {health.blocked_ratio > 0 && (

panel/src/components/dashboard/usage-overview-panel.tsx

@@ -113,10 +113,12 @@ export function UsageOverviewPanel() {
     <Card>
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
+          <HelpTip label="Live token/cost across all agent sessions, from /ws/system or a 24h HTTP poll fallback">
             <CardTitle className="text-lg flex items-center gap-2">
               <Coins className="h-5 w-5" />
               Token Usage &amp; Cost
             </CardTitle>
+          </HelpTip>
           <HelpTip label="Connection to the live /ws/system stream — Polling means it's down and figures refresh via periodic HTTP fetch instead">
             <Badge className={badge.className}>
               {badge.icon}

panel/src/components/dashboard/video-post-queue.tsx

@@ -366,6 +366,7 @@ function VideoPostRow({
       </div>
 
       <div className="mt-3 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+        <HelpTip label="Cancels this draft — it will not be posted">
           <Button
             variant="outline"
             size="sm"
@@ -375,6 +376,7 @@ function VideoPostRow({
             <XCircle className="mr-1 h-4 w-4" />
             Reject
           </Button>
+        </HelpTip>
         <HelpTip label={approveHint(approving, overLimit)}>
           <Button
             size="sm"

panel/src/components/dashboard/x-post-queue.tsx

@@ -146,6 +146,7 @@ function XPostRow({
       </HelpTip>
 
       <div className="mt-2 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+        <HelpTip label="Cancels this draft — it will not be posted">
           <Button
             variant="outline"
             size="sm"
@@ -155,6 +156,7 @@ function XPostRow({
             <XCircle className="mr-1 h-4 w-4" />
             Reject
           </Button>
+        </HelpTip>
         <HelpTip
           label={approveHint(approving, overLimit, body.trim().length === 0)}
         >

panel/src/components/journals/agent-item.tsx

@@ -78,9 +78,11 @@ export function AgentItem({
         >
           {name}
         </p>
+        <HelpTip label="Role gates which task types this agent can claim in the lifecycle">
           <p className="truncate text-xs capitalize text-muted-foreground">
             {agent.role.replace(/_/g, " ")}
           </p>
+        </HelpTip>
       </div>
     </button>
   );

panel/src/components/journals/agent-list.tsx

@@ -2,6 +2,7 @@
 
 import { Agent, Team, AgentRole } from "@/types";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { AgentItem } from "./agent-item";
 
 interface AgentListProps {
@@ -89,9 +90,11 @@ export function AgentList({
 
   if (!agents || agents.length === 0) {
     return (
+      <HelpTip label="No agents match the current search, or none are registered yet">
         <div className="p-4 text-center text-muted-foreground text-sm">
           No agents found
         </div>
+      </HelpTip>
     );
   }
 
@@ -104,9 +107,11 @@ export function AgentList({
           if (teamAgents.length === 0) return null;
           return (
             <div key={teamKey}>
+              <HelpTip label="Agents are grouped by team; only teams with at least one agent are shown">
                 <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-2 mb-2">
                   {TEAM_LABELS[teamKey]}
                 </h3>
+              </HelpTip>
               <div className="space-y-1">
                 {teamAgents.map((agent) => (
                   <AgentItem

panel/src/components/journals/entry-card.tsx

@@ -40,18 +40,24 @@ export function EntryCard({ entry }: EntryCardProps) {
           <div className="flex items-start justify-between gap-2 mb-2">
             <div className="flex items-center gap-2 flex-wrap">
               <EntryTypeBadge type={entry.type} />
+              <HelpTip label={new Date(entry.timestamp).toLocaleString()}>
                 <span className="text-xs text-muted-foreground flex items-center gap-1">
                   <Clock className="h-3 w-3" />
                   {formatTime(entry.timestamp)}
                 </span>
+              </HelpTip>
             </div>
             <div className="flex items-center gap-2">
               {entry.sentiment && (
+                <HelpTip label="Agent's self-reported sentiment when writing this entry">
                   <Badge variant="outline" className="text-xs">
                     {entry.sentiment}
                   </Badge>
+                </HelpTip>
               )}
+              <HelpTip label="Opens this entry's full detail page">
                 <ChevronRight className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+              </HelpTip>
             </div>
           </div>
 
@@ -76,9 +82,15 @@ export function EntryCard({ entry }: EntryCardProps) {
                 </Badge>
               ))}
               {entry.tags.length > 3 && (
+                <HelpTip
+                  label={`${entry.tags.length - 3} more tag${
+                    entry.tags.length - 3 === 1 ? "" : "s"
+                  } not shown`}
+                >
                   <span className="text-xs text-muted-foreground">
                     +{entry.tags.length - 3}
                   </span>
+                </HelpTip>
               )}
             </div>
           )}

panel/src/components/journals/entry-filter.tsx

@@ -9,6 +9,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
+import { HelpTip } from "@/components/ui/help-tip";
 import { Search, ListTodo } from "lucide-react";
 
 interface EntryFilterProps {
@@ -43,6 +44,7 @@ export function EntryFilter({
 }: EntryFilterProps) {
   return (
     <div className="flex flex-wrap items-center gap-3">
+      <HelpTip label="Searches entry titles, content, and tags for this agent">
         <div className="relative flex-1 min-w-48">
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <Input
@@ -52,13 +54,16 @@ export function EntryFilter({
             className="pl-9"
           />
         </div>
+      </HelpTip>
       <Select
         value={typeFilter}
         onValueChange={(v) => onTypeChange(v as JournalEntryType | "all")}
       >
+        <HelpTip label="Filter entries by type: reflection, decision, learning, struggle, or note">
           <SelectTrigger className="w-auto min-w-32 shrink-0">
             <SelectValue placeholder="Filter by type" />
           </SelectTrigger>
+        </HelpTip>
         <SelectContent>
           {TYPE_OPTIONS.map((opt) => (
             <SelectItem key={opt.value} value={opt.value}>
@@ -71,12 +76,14 @@ export function EntryFilter({
         value={taskFilter ?? "all"}
         onValueChange={(v) => onTaskChange(v === "all" ? null : v)}
       >
+        <HelpTip label="Filter entries to only those linked to a specific task">
           <SelectTrigger className="w-auto min-w-40 shrink-0">
             <div className="flex items-center gap-2">
               <ListTodo className="h-4 w-4" />
               <SelectValue placeholder="Filter by task" />
             </div>
           </SelectTrigger>
+        </HelpTip>
         <SelectContent>
           <SelectItem value="all">All Tasks</SelectItem>
           {tasksLoading ? (

panel/src/components/journals/entry-type-badge.tsx

@@ -2,35 +2,49 @@
 
 import { JournalEntryType } from "@/types";
 import { Badge } from "@/components/ui/badge";
+import { HelpTip } from "@/components/ui/help-tip";
 
 interface EntryTypeBadgeProps {
   type: JournalEntryType;
 }
 
-const typeConfig: Record<JournalEntryType, { label: string; color: string }> = {
+const typeConfig: Record<
+  JournalEntryType,
+  { label: string; color: string; description: string }
+> = {
   [JournalEntryType.TASK_REFLECTION]: {
     label: "Task Reflection",
     color: "bg-blue-100 text-blue-700",
+    description: "A wrap-up reflection the agent wrote after finishing a task",
   },
   [JournalEntryType.DECISION_LOG]: {
     label: "Decision Log",
     color: "bg-purple-100 text-purple-700",
+    description: "A record of a significant decision the agent made, and why",
   },
   [JournalEntryType.LEARNING]: {
     label: "Learning",
     color: "bg-green-100 text-green-700",
+    description:
+      "A lesson learned — broadcast to other agents as a knowledge-share notification",
   },
   [JournalEntryType.STRUGGLE]: {
     label: "Struggle",
     color: "bg-orange-100 text-orange-700",
+    description: "A difficulty the agent hit; a later entry may mark it resolved",
   },
   [JournalEntryType.GENERAL]: {
     label: "Note",
     color: "bg-gray-100 text-gray-700",
+    description: "A general note that doesn't fit the other entry types",
   },
 };
 
 export function EntryTypeBadge({ type }: EntryTypeBadgeProps) {
   const config = typeConfig[type] ?? typeConfig[JournalEntryType.GENERAL];
-  return <Badge className={config.color + " text-xs"}>{config.label}</Badge>;
+  return (
+    <HelpTip label={config.description}>
+      <Badge className={config.color + " text-xs"}>{config.label}</Badge>
+    </HelpTip>
+  );
 }

panel/src/components/journals/growth-summary.tsx

@@ -48,20 +48,25 @@ export function GrowthSummary({
   return (
     <Card>
       <CardHeader className="pb-3">
+        <HelpTip label="Aggregated counts and trends from this agent's journal entries">
           <CardTitle className="text-lg flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
             Growth Summary
           </CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent className="space-y-4">
         {/* Total Entries */}
+        <HelpTip label="Total journal entries this agent has written across all types">
           <div className="flex items-center justify-between text-sm">
             <span className="text-muted-foreground">Total Entries</span>
             <span className="font-medium">{journal.total_entries}</span>
           </div>
+        </HelpTip>
 
         {/* Entry Types Breakdown */}
         <div className="space-y-3">
+          <HelpTip label="Wrap-up reflections the agent wrote after finishing tasks">
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-2 text-muted-foreground">
                 <BookOpen className="h-4 w-4 text-blue-500" />
@@ -71,7 +76,9 @@ export function GrowthSummary({
                 {entries["task_reflection"] || growth?.total_reflections || 0}
               </span>
             </div>
+          </HelpTip>
 
+          <HelpTip label="Records of decisions the agent made, with the reasoning behind them">
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-2 text-muted-foreground">
                 <GitBranch className="h-4 w-4 text-purple-500" />
@@ -81,7 +88,9 @@ export function GrowthSummary({
                 {entries["decision_log"] || growth?.total_decisions || 0}
               </span>
             </div>
+          </HelpTip>
 
+          <HelpTip label="Lessons learned; broadcast to other agents as a knowledge-share notification">
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-2 text-muted-foreground">
                 <Lightbulb className="h-4 w-4 text-green-500" />
@@ -91,7 +100,9 @@ export function GrowthSummary({
                 {entries["learning"] || growth?.total_learnings || 0}
               </span>
             </div>
+          </HelpTip>
 
+          <HelpTip label="Difficulties the agent hit; some are later marked resolved">
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-2 text-muted-foreground">
                 <AlertTriangle className="h-4 w-4 text-orange-500" />
@@ -101,6 +112,7 @@ export function GrowthSummary({
                 {entries["struggle"] || growth?.total_struggles || 0}
               </span>
             </div>
+          </HelpTip>
         </div>
 
         {/* Struggle Resolution Rate */}

panel/src/components/journals/journal-view.tsx

@@ -13,6 +13,7 @@ import { EntryCard } from "./entry-card";
 import { EntryFilter } from "./entry-filter";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { HelpTip } from "@/components/ui/help-tip";
 import { BookOpen, User } from "lucide-react";
 import { getAgentDisplayName } from "@/lib/agent-utils";
 
@@ -99,10 +100,12 @@ export function JournalView({
           <h2 className="text-xl font-semibold">
             {getAgentDisplayName(agent.agent_id)}
           </h2>
+          <HelpTip label="Role gates claimable task types; team places this agent within the org hierarchy">
             <p className="text-sm text-muted-foreground capitalize">
               {agent.role.replace(/_/g, " ")} -{" "}
               {agent.team?.replace(/_/g, " ") || "N/A"}
             </p>
+          </HelpTip>
         </div>
       </div>
 
@@ -118,10 +121,12 @@ export function JournalView({
       {/* Entries Section — fills the remaining height; the entries scroll inside it */}
       <div className="flex flex-1 min-h-0 flex-col">
         <div className="flex items-center justify-between mb-4 shrink-0">
+          <HelpTip label="Entries below reflect the active type/task filters and search query">
             <h3 className="text-lg font-semibold flex items-center gap-2">
               <BookOpen className="h-5 w-5" />
               Journal Entries
             </h3>
+          </HelpTip>
         </div>
 
         {/* Filter */}

panel/src/components/layout/bottom-tab-bar.tsx

@@ -4,6 +4,14 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { LayoutDashboard, ListTodo, Kanban, Sparkles } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { HelpTip } from "@/components/ui/help-tip";
+import { navItems } from "./sidebar";
+
+// Reuses navItems' descriptions (defined once in sidebar.tsx) so the two
+// nav surfaces never drift out of sync.
+function tipFor(href: string): string {
+  return navItems.find((n) => n.href === href)?.tip ?? "";
+}
 
 const BOTTOM_NAV_ITEMS = [
   { title: "Overview", href: "/overview", icon: LayoutDashboard },
@@ -29,8 +37,8 @@ export function BottomTabBar() {
       {BOTTOM_NAV_ITEMS.map((item) => {
         const isActive = pathname.startsWith(item.href);
         return (
+          <HelpTip key={item.href} label={tipFor(item.href)}>
             <Link
-            key={item.href}
               href={item.href}
               prefetch={false}
               aria-current={isActive ? "page" : undefined}
@@ -42,6 +50,7 @@ export function BottomTabBar() {
               <item.icon className="h-5 w-5" />
               {item.title}
             </Link>
+          </HelpTip>
         );
       })}
     </nav>

panel/src/components/layout/header.tsx

@@ -111,14 +111,23 @@ export function Header() {
         <NotificationAlerts />
 
         {/* User */}
+        <Tooltip>
+          <TooltipTrigger asChild>
             <div className="flex items-center gap-2 ml-2 pl-4 border-l">
               <div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
                 <span className="text-primary-foreground font-medium text-sm">
                   CEO
                 </span>
               </div>
-          <span className="text-sm font-medium hidden sm:inline">Renzo</span>
+              <span className="text-sm font-medium hidden sm:inline">
+                Renzo
+              </span>
             </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            Signed in as the CEO — the panel's single human operator
+          </TooltipContent>
+        </Tooltip>
       </div>
     </header>
   );

panel/src/components/layout/sidebar.tsx

@@ -36,29 +36,116 @@ import { useUIStore } from "@/store";
 
 // Flat list, in the exact order product wants the sidebar to read top to
 // bottom. Notifications lives only in the header's NotificationBell now.
+// `tip` doubles as the collapsed icon-rail tooltip and the expanded-row
+// hover hint — one description, both surfaces.
 export const navItems = [
-  { title: "Overview", href: "/overview", icon: LayoutDashboard },
+  {
-  { title: "Task Assistant", href: "/prompter", icon: Sparkles },
+    title: "Overview",
-  { title: "Tasks", href: "/tasks", icon: ListTodo },
+    href: "/overview",
-  { title: "Kanban", href: "/kanban", icon: Kanban },
+    icon: LayoutDashboard,
-  { title: "Git", href: "/git", icon: GitBranch },
+    tip: "Company-wide dashboard: key metrics, blockers, and approval queues",
-  { title: "Projects", href: "/projects", icon: FolderGit2 },
+  },
-  { title: "Products", href: "/products", icon: Boxes },
+  {
-  { title: "Social", href: "/social", icon: Share2 },
+    title: "Task Assistant",
-  { title: "Knowledge Base", href: "/knowledge-base", icon: Database },
+    href: "/prompter",
-  { title: "A2A", href: "/a2a", icon: Radio },
+    icon: Sparkles,
-  { title: "Agents", href: "/agents", icon: Bot },
+    tip: "Chat with Intake to draft and confirm new tasks, including MegaTask batches",
-  { title: "Journals", href: "/journals", icon: BookOpen },
+  },
-  { title: "Auditor", href: "/auditor", icon: Shield },
+  {
-  { title: "Metrics", href: "/metrics", icon: Activity },
+    title: "Tasks",
+    href: "/tasks",
+    icon: ListTodo,
+    tip: "Full task list — filter, search, and open any task's detail",
+  },
+  {
+    title: "Kanban",
+    href: "/kanban",
+    icon: Kanban,
+    tip: "Task board grouped by lifecycle status",
+  },
+  {
+    title: "Git",
+    href: "/git",
+    icon: GitBranch,
+    tip: "Branches, commits, and diffs across every project workspace",
+  },
+  {
+    title: "Projects",
+    href: "/projects",
+    icon: FolderGit2,
+    tip: "Manage repos, git tokens, and per-project settings",
+  },
+  {
+    title: "Products",
+    href: "/products",
+    icon: Boxes,
+    tip: "Products the fleet ships against",
+  },
+  {
+    title: "Social",
+    href: "/social",
+    icon: Share2,
+    tip: "X and TikTok post queues, plus the video pipeline",
+  },
+  {
+    title: "Knowledge Base",
+    href: "/knowledge-base",
+    icon: Database,
+    tip: "Search the RAG corpus — playbooks, learnings, and vault notes",
+  },
+  {
+    title: "A2A",
+    href: "/a2a",
+    icon: Radio,
+    tip: "Live agent-to-agent message switchboard and history",
+  },
+  {
+    title: "Agents",
+    href: "/agents",
+    icon: Bot,
+    tip: "Every agent's live state, spawn controls, and activity stream",
+  },
+  {
+    title: "Journals",
+    href: "/journals",
+    icon: BookOpen,
+    tip: "Per-agent reflections and learnings",
+  },
+  {
+    title: "Auditor",
+    href: "/auditor",
+    icon: Shield,
+    tip: "Silent-observer quality flags and findings review queue",
+  },
+  {
+    title: "Metrics",
+    href: "/metrics",
+    icon: Activity,
+    tip: "Performance, token usage/cost, delivery, and scorecard analytics",
+  },
 ];
 
 // Business moved out of the main nav — it lives with the settings-adjacent
 // links, separated from navItems by a single Separator (see SidebarFooter).
 const footerItems = [
-  { title: "Business", href: "/business", icon: Building2 },
+  {
-  { title: "AI Providers", href: "/settings/ai-providers", icon: Cpu },
+    title: "Business",
-  { title: "Settings", href: "/settings", icon: Settings },
+    href: "/business",
+    icon: Building2,
+    tip: "Company goals, roadmap proposals, pitches, and secretary directives",
+  },
+  {
+    title: "AI Providers",
+    href: "/settings/ai-providers",
+    icon: Cpu,
+    tip: "Model routing and per-role provider assignments",
+  },
+  {
+    title: "Settings",
+    href: "/settings",
+    icon: Settings,
+    tip: "Feature flags, credentials, and panel preferences",
+  },
 ];
 
 /**
@@ -95,16 +182,17 @@ export function SidebarNav({
             {!collapsed && <span>{item.title}</span>}
           </Link>
         );
-        // Icon-only rail: the label moves into a tooltip.
+        // Collapsed rail: tooltip is the only place the destination is named.
-        return collapsed ? (
+        // Expanded row: the label is already visible, so the tooltip instead
+        // says what lives there — plain Link, safe to wrap (no stateful
+        // Radix trigger to clobber).
+        return (
           <Tooltip key={item.href}>
             <TooltipTrigger asChild>{link}</TooltipTrigger>
-            <TooltipContent side="right">{item.title}</TooltipContent>
+            <TooltipContent side="right">
+              {collapsed ? item.title : item.tip}
+            </TooltipContent>
           </Tooltip>
-        ) : (
-          <span key={item.href} className="block">
-            {link}
-          </span>
         );
       })}
     </nav>
@@ -144,15 +232,13 @@ export function SidebarFooter({
             {!collapsed && <span>{item.title}</span>}
           </Link>
         );
-        return collapsed ? (
+        return (
           <Tooltip key={item.href}>
             <TooltipTrigger asChild>{link}</TooltipTrigger>
-            <TooltipContent side="right">{item.title}</TooltipContent>
+            <TooltipContent side="right">
+              {collapsed ? item.title : item.tip}
+            </TooltipContent>
           </Tooltip>
-        ) : (
-          <span key={item.href} className="block">
-            {link}
-          </span>
         );
       })}
     </div>
@@ -175,6 +261,8 @@ export function Sidebar() {
       {/* Logo */}
       <div className="flex h-16 items-center justify-between border-b px-4">
         {!sidebarCollapsed && (
+          <Tooltip>
+            <TooltipTrigger asChild>
               <Link
                 href="/overview"
                 className="flex items-center gap-2"
@@ -191,6 +279,9 @@ export function Sidebar() {
                 />
                 <span className="font-semibold text-lg">RoboCo</span>
               </Link>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Back to Overview</TooltipContent>
+          </Tooltip>
         )}
         <TooltipProvider>
           <Tooltip>

panel/src/components/metrics/model-usage-donut.tsx

@@ -10,6 +10,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import type { ModelUsageSlice } from "@/types";
 
@@ -39,7 +40,9 @@ export function ModelUsageDonut({ data, isLoading }: ModelUsageDonutProps) {
   return (
     <Card>
       <CardHeader className="pb-2">
+        <HelpTip label="Share of total tokens consumed per model in the selected window — hover a slice for exact tokens and cost">
           <CardTitle className="text-base">By Model</CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (

panel/src/components/metrics/sessions-table.tsx

@@ -19,6 +19,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { ChevronUp, ChevronDown } from "lucide-react";
 import type { UsageSession } from "@/types";
 
@@ -41,17 +42,42 @@ type SortDir = "asc" | "desc";
 interface Column {
   key: SortKey;
   label: string;
+  tip: string;
 }
 
 const COLUMNS: Column[] = [
-  { key: "agent_slug", label: "Agent" },
+  { key: "agent_slug", label: "Agent", tip: "The agent slug that ran this session — click to sort" },
-  { key: "model", label: "Model" },
+  { key: "model", label: "Model", tip: "Claude/Grok model used for this session — click to sort" },
-  { key: "started_at", label: "Started" },
+  {
-  { key: "total_tokens", label: "Total" },
+    key: "started_at",
-  { key: "tokens_input", label: "Input" },
+    label: "Started",
-  { key: "tokens_output", label: "Output" },
+    tip: "Session start time, local timezone — click to sort oldest/newest",
-  { key: "tokens_cache", label: "Cache" },
+  },
-  { key: "cost", label: "Cost" },
+  {
+    key: "total_tokens",
+    label: "Total",
+    tip: "Input + output + cache tokens combined — click to sort",
+  },
+  {
+    key: "tokens_input",
+    label: "Input",
+    tip: "Prompt tokens sent to the model — click to sort",
+  },
+  {
+    key: "tokens_output",
+    label: "Output",
+    tip: "Completion tokens returned by the model — click to sort",
+  },
+  {
+    key: "tokens_cache",
+    label: "Cache",
+    tip: "Tokens served from Anthropic's prompt cache — click to sort",
+  },
+  {
+    key: "cost",
+    label: "Cost",
+    tip: "Provider-priced dollar cost (local/Ollama sessions are $0) — click to sort",
+  },
 ];
 
 function formatTime(ts: string): string {
@@ -116,7 +142,9 @@ export function SessionsTable({ data, isLoading }: SessionsTableProps) {
   return (
     <Card>
       <CardHeader className="pb-2">
+        <HelpTip label="The most recent agent spawn sessions with their token/cost breakdown — sortable, 10 per page">
           <CardTitle className="text-base">Recent Sessions</CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (
@@ -139,8 +167,12 @@ export function SessionsTable({ data, isLoading }: SessionsTableProps) {
                             className="cursor-pointer select-none text-xs whitespace-nowrap"
                             onClick={() => toggleSort(col.key)}
                           >
+                            <HelpTip label={col.tip}>
+                              <span>
                                 {col.label}
                                 <SortIcon col={col.key} />
+                              </span>
+                            </HelpTip>
                           </TableHead>
                         ))}
                       </TableRow>
@@ -239,6 +271,8 @@ export function SessionsTable({ data, isLoading }: SessionsTableProps) {
                   : `${page * PAGE_SIZE + 1}–${Math.min((page + 1) * PAGE_SIZE, sorted.length)} of ${sorted.length}`}
               </span>
               <div className="flex gap-2">
+                <HelpTip label={`Show the previous ${PAGE_SIZE} sessions`}>
+                  <span>
                     <Button
                       variant="outline"
                       size="sm"
@@ -247,6 +281,10 @@ export function SessionsTable({ data, isLoading }: SessionsTableProps) {
                     >
                       Prev
                     </Button>
+                  </span>
+                </HelpTip>
+                <HelpTip label={`Show the next ${PAGE_SIZE} sessions`}>
+                  <span>
                     <Button
                       variant="outline"
                       size="sm"
@@ -257,6 +295,8 @@ export function SessionsTable({ data, isLoading }: SessionsTableProps) {
                     >
                       Next
                     </Button>
+                  </span>
+                </HelpTip>
               </div>
             </div>
           </>

panel/src/components/metrics/task-status-chart.tsx

@@ -10,6 +10,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 
 interface TaskStatusSlice {
   name: string;
@@ -41,7 +42,9 @@ export function TaskStatusChart({ slices, isLoading }: TaskStatusChartProps) {
   return (
     <Card>
       <CardHeader className="pb-2">
+        <HelpTip label="Live snapshot of how many tasks currently sit in each lifecycle status">
           <CardTitle className="text-base">Task Status Distribution</CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (

panel/src/components/metrics/usage-time-series-chart.tsx

@@ -12,6 +12,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HelpTip } from "@/components/ui/help-tip";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import type { UsageTimePoint } from "@/types";
 
@@ -51,7 +52,9 @@ export function UsageTimeSeriesChart({
   return (
     <Card>
       <CardHeader className="pb-2">
+        <HelpTip label="Input (prompt) vs. output (completion) tokens per time bucket — hourly or daily, depending on the selected window">
           <CardTitle className="text-base">Token Usage Over Time</CardTitle>
+        </HelpTip>
       </CardHeader>
       <CardContent>
         {isLoading ? (