feat(kanban): add tooltips to kanban cards and improve layout

- Add @radix-ui/react-tooltip dependency
- Implement tooltip component for better UX
- Add tooltips to branch badges with full branch names
- Convert revert button to icon-only with tooltip
- Improve button layout and spacing in waiting_approval cards
- Update feature statuses and add new profile feature

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>

app/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

app/src/components/views/kanban-card.tsx

@@ -62,6 +62,12 @@ import {
   DEFAULT_MODEL,
 } from "@/lib/agent-context-parser";
 import { Markdown } from "@/components/ui/markdown";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface KanbanCardProps {
   feature: Feature;
@@ -259,23 +265,31 @@ export function KanbanCard({
       )}
       {/* Branch badge - show when feature has a worktree */}
       {hasWorktree && !isCurrentAutoTask && (
-        <div
-          className={cn(
-            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            "bg-purple-500/20 border border-purple-500/50 text-purple-400",
-            // Position below error badge if present, otherwise use normal position
-            feature.error || feature.skipTests
-              ? "top-8 left-2"
-              : shortcutKey
-                ? "top-2 left-10"
-                : "top-2 left-2"
-          )}
-          data-testid={`branch-badge-${feature.id}`}
-          title={`Branch: ${feature.branchName}`}
-        >
-          <GitBranch className="w-3 h-3" />
-          <span className="truncate max-w-[100px]">{feature.branchName?.replace("feature/", "")}</span>
-        </div>
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10 cursor-default",
+                  "bg-purple-500/20 border border-purple-500/50 text-purple-400",
+                  // Position below error badge if present, otherwise use normal position
+                  feature.error || feature.skipTests
+                    ? "top-8 left-2"
+                    : shortcutKey
+                      ? "top-2 left-10"
+                      : "top-2 left-2"
+                )}
+                data-testid={`branch-badge-${feature.id}`}
+              >
+                <GitBranch className="w-3 h-3 shrink-0" />
+                <span className="truncate max-w-[80px]">{feature.branchName?.replace("feature/", "")}</span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-[300px]">
+              <p className="font-mono text-xs break-all">{feature.branchName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
       <CardHeader
         className={cn(
@@ -648,37 +662,44 @@ export function KanbanCard({
           )}
           {!isCurrentAutoTask && feature.status === "waiting_approval" && (
             <>
-              {/* Revert button - only show when worktree exists */}
+              {/* Revert button - only show when worktree exists (icon only to save space) */}
               {hasWorktree && onRevert && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 text-xs text-red-400 hover:text-red-300 hover:bg-red-500/20"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setIsRevertDialogOpen(true);
-                  }}
-                  data-testid={`revert-${feature.id}`}
-                  title="Discard all changes and move back to backlog"
-                >
-                  <Undo2 className="w-3 h-3 mr-1" />
-                  Revert
-                </Button>
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 w-7 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/20 shrink-0"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setIsRevertDialogOpen(true);
+                        }}
+                        data-testid={`revert-${feature.id}`}
+                      >
+                        <Undo2 className="w-3.5 h-3.5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      <p>Revert changes</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               )}
               {/* Follow-up prompt button */}
               {onFollowUp && (
                 <Button
                   variant="secondary"
                   size="sm"
-                  className="flex-1 h-7 text-xs"
+                  className="flex-1 h-7 text-xs min-w-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     onFollowUp();
                   }}
                   data-testid={`follow-up-${feature.id}`}
                 >
-                  <MessageSquare className="w-3 h-3 mr-1" />
-                  Follow-up
+                  <MessageSquare className="w-3 h-3 mr-1 shrink-0" />
+                  <span className="truncate">Follow-up</span>
                 </Button>
               )}
               {/* Merge button - only show when worktree exists */}
@@ -686,7 +707,7 @@ export function KanbanCard({
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs bg-purple-600 hover:bg-purple-700"
+                  className="flex-1 h-7 text-xs bg-purple-600 hover:bg-purple-700 min-w-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     onMerge();
@@ -694,8 +715,8 @@ export function KanbanCard({
                   data-testid={`merge-${feature.id}`}
                   title="Merge changes into main branch"
                 >
-                  <GitMerge className="w-3 h-3 mr-1" />
-                  Merge
+                  <GitMerge className="w-3 h-3 mr-1 shrink-0" />
+                  <span className="truncate">Merge</span>
                 </Button>
               )}
               {/* Commit and verify button - show when no worktree */}