✨ feat: add dependency graph view for task visualization

Add a new interactive graph view alongside the kanban board for visualizing
task dependencies. The graph view uses React Flow with dagre auto-layout to
display tasks as nodes connected by dependency edges.

Key features:
- Toggle between kanban and graph view via new control buttons
- Custom TaskNode component matching existing card styling/themes
- Animated edges that flow when tasks are in progress
- Status-aware node colors (backlog, in-progress, waiting, verified)
- Blocked tasks show lock icon with dependency count tooltip
- MiniMap for navigation in large graphs
- Zoom, pan, fit-view, and lock controls
- Horizontal/vertical layout options via dagre
- Click node to view details, double-click to edit
- Respects all 32 themes via CSS variables
- Reduced motion support for animations

New dependencies: @xyflow/react, dagre

apps/ui/src/components/views/board-view/board-controls.tsx

@@ -1,7 +1,8 @@
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { ImageIcon, Archive, Minimize2, Square, Maximize2 } from 'lucide-react';
+import { ImageIcon, Archive, Minimize2, Square, Maximize2, Columns3, Network } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { BoardViewMode } from '@/store/app-store';
 
 interface BoardControlsProps {
   isMounted: boolean;
@@ -10,6 +11,8 @@ interface BoardControlsProps {
   completedCount: number;
   kanbanCardDetailLevel: 'minimal' | 'standard' | 'detailed';
   onDetailLevelChange: (level: 'minimal' | 'standard' | 'detailed') => void;
+  boardViewMode: BoardViewMode;
+  onBoardViewModeChange: (mode: BoardViewMode) => void;
 }
 
 export function BoardControls({
@@ -19,12 +22,59 @@ export function BoardControls({
   completedCount,
   kanbanCardDetailLevel,
   onDetailLevelChange,
+  boardViewMode,
+  onBoardViewModeChange,
 }: BoardControlsProps) {
   if (!isMounted) return null;
 
   return (
     <TooltipProvider>
       <div className="flex items-center gap-2 ml-4">
+        {/* View Mode Toggle - Kanban / Graph */}
+        <div
+          className="flex items-center rounded-lg bg-secondary border border-border"
+          data-testid="view-mode-toggle"
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => onBoardViewModeChange('kanban')}
+                className={cn(
+                  'p-2 rounded-l-lg transition-colors',
+                  boardViewMode === 'kanban'
+                    ? 'bg-brand-500/20 text-brand-500'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                )}
+                data-testid="view-mode-kanban"
+              >
+                <Columns3 className="w-4 h-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Kanban Board View</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => onBoardViewModeChange('graph')}
+                className={cn(
+                  'p-2 rounded-r-lg transition-colors',
+                  boardViewMode === 'graph'
+                    ? 'bg-brand-500/20 text-brand-500'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                )}
+                data-testid="view-mode-graph"
+              >
+                <Network className="w-4 h-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Dependency Graph View</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
         {/* Board Background Button */}
         <Tooltip>
           <TooltipTrigger asChild>