feat: add concurrent agents with dependency system and delightful UI

Major feature implementation for parallel agent execution with dependency-aware
scheduling and an engaging multi-agent UI experience.

Backend Changes:
- Add parallel_orchestrator.py for concurrent feature processing
- Add api/dependency_resolver.py with cycle detection (Kahn's algorithm + DFS)
- Add atomic feature_claim_next() with retry limit and exponential backoff
- Fix circular dependency check arguments in 4 locations
- Add AgentTracker class for parsing agent output and emitting updates
- Add browser isolation with --isolated flag for Playwright MCP
- Extend WebSocket protocol with agent_update messages and log attribution
- Add WSAgentUpdateMessage schema with agent states and mascot names
- Fix WSProgressMessage to include in_progress field

New UI Components:
- AgentMissionControl: Dashboard showing active agents with collapsible activity
- AgentCard: Individual agent status with avatar and thought bubble
- AgentAvatar: SVG mascots (Spark, Fizz, Octo, Hoot, Buzz) with animations
- ActivityFeed: Recent activity stream with stable keys (no flickering)
- CelebrationOverlay: Confetti animation with click/Escape dismiss
- DependencyGraph: Interactive node graph visualization with dagre layout
- DependencyBadge: Visual indicator for feature dependencies
- ViewToggle: Switch between Kanban and Graph views
- KeyboardShortcutsHelp: Help overlay accessible via ? key

UI/UX Improvements:
- Celebration queue system to handle rapid success messages
- Accessibility attributes on AgentAvatar (role, aria-label, aria-live)
- Collapsible Recent Activity section with persisted preference
- Agent count display in header
- Keyboard shortcut G to toggle Kanban/Graph view
- Real-time thought bubbles and state animations

Bug Fixes:
- Fix circular dependency validation (swapped source/target arguments)
- Add MAX_CLAIM_RETRIES=10 to prevent stack overflow under contention
- Fix THOUGHT_PATTERNS to match actual [Tool: name] format
- Fix ActivityFeed key prop to prevent re-renders on new items
- Add featureId/agentIndex to log messages for proper attribution

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ui/src/components/FeatureCard.tsx

@@ -1,10 +1,14 @@
-import { CheckCircle2, Circle, Loader2 } from 'lucide-react'
-import type { Feature } from '../lib/types'
+import { CheckCircle2, Circle, Loader2, MessageCircle } from 'lucide-react'
+import type { Feature, ActiveAgent } from '../lib/types'
+import { DependencyBadge } from './DependencyBadge'
+import { AgentAvatar } from './AgentAvatar'
 
 interface FeatureCardProps {
   feature: Feature
   onClick: () => void
   isInProgress?: boolean
+  allFeatures?: Feature[]
+  activeAgent?: ActiveAgent // Agent working on this feature
 }
 
 // Generate consistent color for category using CSS variable references
@@ -28,26 +32,33 @@ function getCategoryColor(category: string): string {
   return colors[Math.abs(hash) % colors.length]
 }
 
-export function FeatureCard({ feature, onClick, isInProgress }: FeatureCardProps) {
+export function FeatureCard({ feature, onClick, isInProgress, allFeatures = [], activeAgent }: FeatureCardProps) {
   const categoryColor = getCategoryColor(feature.category)
+  const isBlocked = feature.blocked || (feature.blocking_dependencies && feature.blocking_dependencies.length > 0)
+  const hasActiveAgent = !!activeAgent
 
   return (
     <button
       onClick={onClick}
       className={`
-        w-full text-left neo-card p-4 cursor-pointer
+        w-full text-left neo-card p-4 cursor-pointer relative
         ${isInProgress ? 'animate-pulse-neo' : ''}
         ${feature.passes ? 'border-neo-done' : ''}
+        ${isBlocked && !feature.passes ? 'border-neo-danger opacity-80' : ''}
+        ${hasActiveAgent ? 'ring-2 ring-neo-progress ring-offset-2' : ''}
       `}
     >
       {/* Header */}
       <div className="flex items-start justify-between gap-2 mb-2">
-        <span
-          className="neo-badge"
-          style={{ backgroundColor: categoryColor, color: 'var(--color-neo-text-on-bright)' }}
-        >
-          {feature.category}
-        </span>
+        <div className="flex items-center gap-2">
+          <span
+            className="neo-badge"
+            style={{ backgroundColor: categoryColor, color: 'var(--color-neo-text-on-bright)' }}
+          >
+            {feature.category}
+          </span>
+          <DependencyBadge feature={feature} allFeatures={allFeatures} compact />
+        </div>
         <span className="font-mono text-sm text-neo-text-secondary">
           #{feature.priority}
         </span>
@@ -63,6 +74,26 @@ export function FeatureCard({ feature, onClick, isInProgress }: FeatureCardProps
         {feature.description}
       </p>
 
+      {/* Agent working on this feature */}
+      {activeAgent && (
+        <div className="flex items-center gap-2 mb-3 py-2 px-2 rounded bg-[var(--color-neo-progress)]/10 border border-[var(--color-neo-progress)]/30">
+          <AgentAvatar name={activeAgent.agentName} state={activeAgent.state} size="sm" />
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-bold text-neo-progress">
+              {activeAgent.agentName} is working on this!
+            </div>
+            {activeAgent.thought && (
+              <div className="flex items-center gap-1 mt-0.5">
+                <MessageCircle size={10} className="text-neo-text-secondary shrink-0" />
+                <p className="text-[10px] text-neo-text-secondary truncate italic">
+                  {activeAgent.thought}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Status */}
       <div className="flex items-center gap-2 text-sm">
         {isInProgress ? (
@@ -75,6 +106,11 @@ export function FeatureCard({ feature, onClick, isInProgress }: FeatureCardProps
             <CheckCircle2 size={16} className="text-neo-done" />
             <span className="text-neo-done font-bold">Complete</span>
           </>
+        ) : isBlocked ? (
+          <>
+            <Circle size={16} className="text-neo-danger" />
+            <span className="text-neo-danger">Blocked</span>
+          </>
         ) : (
           <>
             <Circle size={16} className="text-neo-text-secondary" />