🔨 TASK-002: Create NodeCard Component with Variants

[ajacobm]

Task: Create NodeCard Component with Variants

Description: Create the reusable NodeCard component with hero, grid, and list variants for displaying node information.

Technical Details:

• Create frontend/src/components/workbench/NodeCard.tsx
• Implement three variants: hero (root), grid (children), list (compact)
• Display: name, type icon, complexity, lines, file path
• Show category badges (entry point, hub, leaf)
• Handle click and double-click events
• Add data-test attributes

Files to Create/Modify:

frontend/src/components/workbench/NodeCard.tsx  (create)

Props Interface:

interface NodeCardProps {
  node: GraphNode
  variant: 'hero' | 'grid' | 'list'
  isSelected: boolean
  categoryBadge?: 'entry-point' | 'hub' | 'leaf'
  onClick: () => void
  onDoubleClick: () => void
  showConnections: boolean
}

Visual Design:

Hero Card (root node):

┌───────────────────────────────────────────────────────────────┐
│  📦 GraphAPIServer                              [Type: class] │
│  ─────────────────────────────────────────────────────────────│
│  📍 src/codenav/server/graph_api.py:45                        │
│  📊 Complexity: 45  |  📏 Lines: 234  |  🐍 Python            │
│                                                               │
│  8 methods  |  3 callers  |  12 callees                       │
└───────────────────────────────────────────────────────────────┘

Grid Card (children):

┌─────────────────────┐
│ ⚙️ startup          │
│ Complexity: 8       │
│ Lines: 45           │
│ [Double-click ▶]   │
└─────────────────────┘

Acceptance Criteria:

• Hero variant shows full node details
• Grid variant shows compact card layout
• List variant shows row layout
• Single-click selects, double-click drills down
• Category badges display correctly
• Responsive sizing

Effort: M (Medium - 4-8 hours)

Parent Story: #28
Parent Epic: #27

Branch: task/foundation/node-card