feat: add orchestrator observability to Mission Control

Add real-time visibility into the parallel orchestrator's decisions and state in the Mission Control UI. The orchestrator now has its own avatar ("Maestro") and displays capacity/queue information. Backend changes (server/websocket.py): - Add OrchestratorTracker class that parses orchestrator stdout - Define regex patterns for key orchestrator events (spawn, complete, capacity) - Track coding/testing agent counts, ready queue, blocked features - Emit orchestrator_update WebSocket messages - Reset tracker state when agent stops or crashes Frontend changes: - Add OrchestratorState, OrchestratorStatus, OrchestratorEvent types - Add WSOrchestratorUpdateMessage to WSMessage union - Handle orchestrator_update in useWebSocket hook - Create OrchestratorAvatar component (Maestro - robot conductor) - Create OrchestratorStatusCard with capacity badges and event ticker - Update AgentMissionControl to show orchestrator above agent cards - Add conducting/baton-tap CSS animations for Maestro The orchestrator status card shows: - Maestro avatar with state-based animations - Current orchestrator state and message - Coding agents, testing agents, ready queue badges - Blocked features count (when > 0) - Collapsible recent events list Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 06:12:06 +00:00 · 2026-01-23 13:02:36 +02:00
parent b21d2e3adc
commit a03d945fcd
8 changed files with 751 additions and 31 deletions
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -348,14 +348,13 @@ function App() {
              isConnected={wsState.isConnected}
            />

-            {/* Agent Mission Control - shows active agents in parallel mode */}
-            {wsState.activeAgents.length > 0 && (
-              <AgentMissionControl
-                agents={wsState.activeAgents}
-                recentActivity={wsState.recentActivity}
-                getAgentLogs={wsState.getAgentLogs}
-              />
-            )}
+            {/* Agent Mission Control - shows orchestrator status and active agents in parallel mode */}
+            <AgentMissionControl
+              agents={wsState.activeAgents}
+              orchestratorStatus={wsState.orchestratorStatus}
+              recentActivity={wsState.recentActivity}
+              getAgentLogs={wsState.getAgentLogs}
+            />

            {/* Agent Thought - shows latest agent narrative (single agent mode) */}
            {wsState.activeAgents.length === 0 && (
--- a/ui/src/components/AgentMissionControl.tsx
+++ b/ui/src/components/AgentMissionControl.tsx
@@ -2,12 +2,14 @@ import { Rocket, ChevronDown, ChevronUp, Activity } from 'lucide-react'
 import { useState } from 'react'
 import { AgentCard, AgentLogModal } from './AgentCard'
 import { ActivityFeed } from './ActivityFeed'
-import type { ActiveAgent, AgentLogEntry } from '../lib/types'
+import { OrchestratorStatusCard } from './OrchestratorStatusCard'
+import type { ActiveAgent, AgentLogEntry, OrchestratorStatus } from '../lib/types'

 const ACTIVITY_COLLAPSED_KEY = 'autocoder-activity-collapsed'

 interface AgentMissionControlProps {
  agents: ActiveAgent[]
+  orchestratorStatus: OrchestratorStatus | null
  recentActivity: Array<{
    agentName: string
    thought: string
@@ -20,6 +22,7 @@ interface AgentMissionControlProps {

 export function AgentMissionControl({
  agents,
+  orchestratorStatus,
  recentActivity,
  isExpanded: defaultExpanded = true,
  getAgentLogs,
@@ -45,8 +48,8 @@ export function AgentMissionControl({
    }
  }

-  // Don't render if no agents
-  if (agents.length === 0) {
+  // Don't render if no orchestrator status and no agents
+  if (!orchestratorStatus && agents.length === 0) {
    return null
  }

@@ -63,7 +66,14 @@ export function AgentMissionControl({
            Mission Control
          </span>
          <span className="neo-badge neo-badge-sm bg-white text-neo-text ml-2">
-            {agents.length} {agents.length === 1 ? 'agent' : 'agents'} active
+            {agents.length > 0
+              ? `${agents.length} ${agents.length === 1 ? 'agent' : 'agents'} active`
+              : orchestratorStatus?.state === 'initializing'
+                ? 'Initializing'
+                : orchestratorStatus?.state === 'complete'
+                  ? 'Complete'
+                  : 'Orchestrating'
+            }
          </span>
        </div>
        {isExpanded ? (
@@ -77,25 +87,32 @@ export function AgentMissionControl({
      <div
        className={`
          transition-all duration-300 ease-out overflow-hidden
-          ${isExpanded ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}
+          ${isExpanded ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'}
        `}
      >
        <div className="p-4">
+          {/* Orchestrator Status Card */}
+          {orchestratorStatus && (
+            <OrchestratorStatusCard status={orchestratorStatus} />
+          )}
+
          {/* Agent Cards Row */}
-          <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-thin">
-            {agents.map((agent) => (
-              <AgentCard
-                key={`agent-${agent.agentIndex}`}
-                agent={agent}
-                onShowLogs={(agentIndex) => {
-                  const agentToShow = agents.find(a => a.agentIndex === agentIndex)
-                  if (agentToShow) {
-                    setSelectedAgentForLogs(agentToShow)
-                  }
-                }}
-              />
-            ))}
-          </div>
+          {agents.length > 0 && (
+            <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-thin">
+              {agents.map((agent) => (
+                <AgentCard
+                  key={`agent-${agent.agentIndex}`}
+                  agent={agent}
+                  onShowLogs={(agentIndex) => {
+                    const agentToShow = agents.find(a => a.agentIndex === agentIndex)
+                    if (agentToShow) {
+                      setSelectedAgentForLogs(agentToShow)
+                    }
+                  }}
+                />
+              ))}
+            </div>
+          )}

          {/* Collapsible Activity Feed */}
          {recentActivity.length > 0 && (
--- a/ui/src/components/OrchestratorAvatar.tsx
+++ b/ui/src/components/OrchestratorAvatar.tsx
@@ -0,0 +1,178 @@
+import type { OrchestratorState } from '../lib/types'
+
+interface OrchestratorAvatarProps {
+  state: OrchestratorState
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const SIZES = {
+  sm: { svg: 32, font: 'text-xs' },
+  md: { svg: 48, font: 'text-sm' },
+  lg: { svg: 64, font: 'text-base' },
+}
+
+// Maestro color scheme - Deep violet
+const MAESTRO_COLORS = {
+  primary: '#7C3AED',    // Violet-600
+  secondary: '#A78BFA',  // Violet-400
+  accent: '#EDE9FE',     // Violet-100
+  baton: '#FBBF24',      // Amber-400 for the baton
+  gold: '#F59E0B',       // Amber-500 for accents
+}
+
+// Maestro SVG - Robot conductor with baton
+function MaestroSVG({ size, state }: { size: number; state: OrchestratorState }) {
+  // Animation transform based on state
+  const batonAnimation = state === 'spawning' ? 'animate-conducting' :
+                         state === 'scheduling' ? 'animate-baton-tap' : ''
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+      {/* Conductor's podium hint */}
+      <rect x="22" y="54" width="20" height="6" rx="2" fill={MAESTRO_COLORS.primary} opacity="0.3" />
+
+      {/* Robot body - formal conductor style */}
+      <rect x="18" y="28" width="28" height="26" rx="4" fill={MAESTRO_COLORS.primary} />
+
+      {/* Tuxedo front / formal vest */}
+      <rect x="26" y="32" width="12" height="18" fill={MAESTRO_COLORS.accent} />
+      <rect x="30" y="32" width="4" height="18" fill={MAESTRO_COLORS.secondary} />
+
+      {/* Bow tie */}
+      <path d="M27,30 L32,33 L37,30 L32,32 Z" fill={MAESTRO_COLORS.gold} />
+
+      {/* Robot head */}
+      <rect x="16" y="6" width="32" height="24" rx="4" fill={MAESTRO_COLORS.secondary} />
+
+      {/* Conductor's cap */}
+      <rect x="14" y="2" width="36" height="8" rx="2" fill={MAESTRO_COLORS.primary} />
+      <rect x="20" y="0" width="24" height="4" rx="2" fill={MAESTRO_COLORS.primary} />
+      <circle cx="32" cy="2" r="3" fill={MAESTRO_COLORS.gold} />
+
+      {/* Eyes */}
+      <circle cx="24" cy="16" r="4" fill="white" />
+      <circle cx="40" cy="16" r="4" fill="white" />
+      <circle cx="25" cy="16" r="2" fill={MAESTRO_COLORS.primary} />
+      <circle cx="41" cy="16" r="2" fill={MAESTRO_COLORS.primary} />
+
+      {/* Smile */}
+      <path d="M26,24 Q32,28 38,24" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
+
+      {/* Arms */}
+      <rect x="8" y="32" width="10" height="4" rx="2" fill={MAESTRO_COLORS.primary} />
+      <rect x="46" y="28" width="10" height="4" rx="2" fill={MAESTRO_COLORS.primary}
+            className={batonAnimation}
+            style={{ transformOrigin: '46px 30px' }} />
+
+      {/* Hand holding baton */}
+      <circle cx="56" cy="30" r="4" fill={MAESTRO_COLORS.secondary}
+              className={batonAnimation}
+              style={{ transformOrigin: '46px 30px' }} />
+
+      {/* Baton */}
+      <g className={batonAnimation} style={{ transformOrigin: '56px 30px' }}>
+        <line x1="56" y1="26" x2="62" y2="10" stroke={MAESTRO_COLORS.baton} strokeWidth="2" strokeLinecap="round" />
+        <circle cx="62" cy="10" r="2" fill={MAESTRO_COLORS.gold} />
+      </g>
+
+      {/* Subtle music notes when active */}
+      {(state === 'spawning' || state === 'monitoring') && (
+        <>
+          <text x="4" y="20" fontSize="8" fill={MAESTRO_COLORS.secondary} className="animate-pulse">
+            &#9834;
+          </text>
+          <text x="58" y="48" fontSize="8" fill={MAESTRO_COLORS.secondary} className="animate-pulse" style={{ animationDelay: '0.3s' }}>
+            &#9835;
+          </text>
+        </>
+      )}
+    </svg>
+  )
+}
+
+// Animation classes based on orchestrator state
+function getStateAnimation(state: OrchestratorState): string {
+  switch (state) {
+    case 'idle':
+      return 'animate-bounce-gentle'
+    case 'initializing':
+      return 'animate-thinking'
+    case 'scheduling':
+      return 'animate-thinking'
+    case 'spawning':
+      return 'animate-working'
+    case 'monitoring':
+      return 'animate-bounce-gentle'
+    case 'complete':
+      return 'animate-celebrate'
+    default:
+      return ''
+  }
+}
+
+// Glow effect based on state
+function getStateGlow(state: OrchestratorState): string {
+  switch (state) {
+    case 'initializing':
+      return 'shadow-[0_0_12px_rgba(124,58,237,0.4)]'
+    case 'scheduling':
+      return 'shadow-[0_0_10px_rgba(167,139,250,0.5)]'
+    case 'spawning':
+      return 'shadow-[0_0_16px_rgba(124,58,237,0.6)]'
+    case 'monitoring':
+      return 'shadow-[0_0_8px_rgba(167,139,250,0.4)]'
+    case 'complete':
+      return 'shadow-[0_0_20px_rgba(112,224,0,0.6)]'
+    default:
+      return ''
+  }
+}
+
+// Get human-readable state description for accessibility
+function getStateDescription(state: OrchestratorState): string {
+  switch (state) {
+    case 'idle':
+      return 'waiting'
+    case 'initializing':
+      return 'initializing features'
+    case 'scheduling':
+      return 'selecting next features'
+    case 'spawning':
+      return 'spawning agents'
+    case 'monitoring':
+      return 'monitoring progress'
+    case 'complete':
+      return 'all features complete'
+    default:
+      return state
+  }
+}
+
+export function OrchestratorAvatar({ state, size = 'md' }: OrchestratorAvatarProps) {
+  const { svg: svgSize } = SIZES[size]
+  const stateDesc = getStateDescription(state)
+  const ariaLabel = `Orchestrator Maestro is ${stateDesc}`
+
+  return (
+    <div
+      className="flex flex-col items-center gap-1"
+      role="status"
+      aria-label={ariaLabel}
+      aria-live="polite"
+    >
+      <div
+        className={`
+          rounded-full p-1 transition-all duration-300
+          ${getStateAnimation(state)}
+          ${getStateGlow(state)}
+        `}
+        style={{ backgroundColor: MAESTRO_COLORS.accent }}
+        title={ariaLabel}
+        role="img"
+        aria-hidden="true"
+      >
+        <MaestroSVG size={svgSize} state={state} />
+      </div>
+    </div>
+  )
+}
--- a/ui/src/components/OrchestratorStatusCard.tsx
+++ b/ui/src/components/OrchestratorStatusCard.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronUp, Code, FlaskConical, Clock, Lock, Sparkles } from 'lucide-react'
+import { OrchestratorAvatar } from './OrchestratorAvatar'
+import type { OrchestratorStatus, OrchestratorState } from '../lib/types'
+
+interface OrchestratorStatusCardProps {
+  status: OrchestratorStatus
+}
+
+// Get a friendly state description
+function getStateText(state: OrchestratorState): string {
+  switch (state) {
+    case 'idle':
+      return 'Standing by...'
+    case 'initializing':
+      return 'Setting up features...'
+    case 'scheduling':
+      return 'Planning next moves...'
+    case 'spawning':
+      return 'Deploying agents...'
+    case 'monitoring':
+      return 'Watching progress...'
+    case 'complete':
+      return 'Mission accomplished!'
+    default:
+      return 'Orchestrating...'
+  }
+}
+
+// Get state color
+function getStateColor(state: OrchestratorState): string {
+  switch (state) {
+    case 'complete':
+      return 'text-neo-done'
+    case 'spawning':
+      return 'text-[#7C3AED]'  // Violet
+    case 'scheduling':
+    case 'monitoring':
+      return 'text-neo-progress'
+    case 'initializing':
+      return 'text-neo-pending'
+    default:
+      return 'text-neo-text-secondary'
+  }
+}
+
+// Format timestamp to relative time
+function formatRelativeTime(timestamp: string): string {
+  const now = new Date()
+  const then = new Date(timestamp)
+  const diffMs = now.getTime() - then.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+
+  if (diffSecs < 5) return 'just now'
+  if (diffSecs < 60) return `${diffSecs}s ago`
+  const diffMins = Math.floor(diffSecs / 60)
+  if (diffMins < 60) return `${diffMins}m ago`
+  return `${Math.floor(diffMins / 60)}h ago`
+}
+
+export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps) {
+  const [showEvents, setShowEvents] = useState(false)
+
+  return (
+    <div className="neo-card p-4 bg-gradient-to-r from-[#EDE9FE] to-[#F3E8FF] border-[#7C3AED]/30 mb-4">
+      <div className="flex items-start gap-4">
+        {/* Avatar */}
+        <OrchestratorAvatar state={status.state} size="md" />
+
+        {/* Main content */}
+        <div className="flex-1 min-w-0">
+          {/* Header row */}
+          <div className="flex items-center gap-2 mb-1">
+            <span className="font-display font-bold text-lg text-[#7C3AED]">
+              Maestro
+            </span>
+            <span className={`text-sm font-medium ${getStateColor(status.state)}`}>
+              {getStateText(status.state)}
+            </span>
+          </div>
+
+          {/* Current message */}
+          <p className="text-sm text-neo-text mb-3 line-clamp-2">
+            {status.message}
+          </p>
+
+          {/* Status badges row */}
+          <div className="flex flex-wrap items-center gap-2">
+            {/* Coding agents badge */}
+            <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-blue-100 text-blue-700 rounded border border-blue-300 text-xs font-bold">
+              <Code size={12} />
+              <span>Coding: {status.codingAgents}</span>
+            </div>
+
+            {/* Testing agents badge */}
+            <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-purple-100 text-purple-700 rounded border border-purple-300 text-xs font-bold">
+              <FlaskConical size={12} />
+              <span>Testing: {status.testingAgents}</span>
+            </div>
+
+            {/* Ready queue badge */}
+            <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-green-100 text-green-700 rounded border border-green-300 text-xs font-bold">
+              <Clock size={12} />
+              <span>Ready: {status.readyCount}</span>
+            </div>
+
+            {/* Blocked badge (only show if > 0) */}
+            {status.blockedCount > 0 && (
+              <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-amber-100 text-amber-700 rounded border border-amber-300 text-xs font-bold">
+                <Lock size={12} />
+                <span>Blocked: {status.blockedCount}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Recent events toggle */}
+        {status.recentEvents.length > 0 && (
+          <button
+            onClick={() => setShowEvents(!showEvents)}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-[#7C3AED] hover:bg-[#7C3AED]/10 rounded transition-colors"
+          >
+            <Sparkles size={12} />
+            <span>Activity</span>
+            {showEvents ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+          </button>
+        )}
+      </div>
+
+      {/* Collapsible recent events */}
+      {showEvents && status.recentEvents.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-[#7C3AED]/20">
+          <div className="space-y-1.5">
+            {status.recentEvents.map((event, idx) => (
+              <div
+                key={`${event.timestamp}-${idx}`}
+                className="flex items-start gap-2 text-xs"
+              >
+                <span className="text-[#A78BFA] shrink-0 font-mono">
+                  {formatRelativeTime(event.timestamp)}
+                </span>
+                <span className="text-neo-text">
+                  {event.message}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/ui/src/hooks/useWebSocket.ts
+++ b/ui/src/hooks/useWebSocket.ts
@@ -10,6 +10,8 @@ import type {
  ActiveAgent,
  AgentMascot,
  AgentLogEntry,
+  OrchestratorStatus,
+  OrchestratorEvent,
 } from '../lib/types'

 // Activity item for the feed
@@ -48,6 +50,8 @@ interface WebSocketState {
  // Celebration queue to handle rapid successes without race conditions
  celebrationQueue: CelebrationTrigger[]
  celebration: CelebrationTrigger | null
+  // Orchestrator state for Mission Control
+  orchestratorStatus: OrchestratorStatus | null
 }

 const MAX_LOGS = 100 // Keep last 100 log lines
@@ -68,6 +72,7 @@ export function useProjectWebSocket(projectName: string | null) {
    agentLogs: new Map(),
    celebrationQueue: [],
    celebration: null,
+    orchestratorStatus: null,
  })

  const wsRef = useRef<WebSocket | null>(null)
@@ -112,8 +117,12 @@ export function useProjectWebSocket(projectName: string | null) {
              setState(prev => ({
                ...prev,
                agentStatus: message.status,
-                // Clear active agents when process stops OR crashes to prevent stale UI
-                ...((message.status === 'stopped' || message.status === 'crashed') && { activeAgents: [], recentActivity: [] }),
+                // Clear active agents and orchestrator status when process stops OR crashes to prevent stale UI
+                ...((message.status === 'stopped' || message.status === 'crashed') && {
+                  activeAgents: [],
+                  recentActivity: [],
+                  orchestratorStatus: null,
+                }),
              }))
              break

@@ -261,6 +270,33 @@ export function useProjectWebSocket(projectName: string | null) {
              })
              break

+            case 'orchestrator_update':
+              setState(prev => {
+                const newEvent: OrchestratorEvent = {
+                  eventType: message.eventType,
+                  message: message.message,
+                  timestamp: message.timestamp,
+                  featureId: message.featureId,
+                  featureName: message.featureName,
+                }
+
+                return {
+                  ...prev,
+                  orchestratorStatus: {
+                    state: message.state,
+                    message: message.message,
+                    codingAgents: message.codingAgents ?? prev.orchestratorStatus?.codingAgents ?? 0,
+                    testingAgents: message.testingAgents ?? prev.orchestratorStatus?.testingAgents ?? 0,
+                    maxConcurrency: message.maxConcurrency ?? prev.orchestratorStatus?.maxConcurrency ?? 3,
+                    readyCount: message.readyCount ?? prev.orchestratorStatus?.readyCount ?? 0,
+                    blockedCount: message.blockedCount ?? prev.orchestratorStatus?.blockedCount ?? 0,
+                    timestamp: message.timestamp,
+                    recentEvents: [newEvent, ...(prev.orchestratorStatus?.recentEvents ?? []).slice(0, 4)],
+                  },
+                }
+              })
+              break
+
            case 'dev_log':
              setState(prev => ({
                ...prev,
@@ -346,6 +382,7 @@ export function useProjectWebSocket(projectName: string | null) {
      agentLogs: new Map(),
      celebrationQueue: [],
      celebration: null,
+      orchestratorStatus: null,
    })

    if (!projectName) {
--- a/ui/src/lib/types.ts
+++ b/ui/src/lib/types.ts
@@ -206,8 +206,39 @@ export interface ActiveAgent {
  logs?: AgentLogEntry[]  // Per-agent log history
 }

+// Orchestrator state for Mission Control
+export type OrchestratorState =
+  | 'idle'
+  | 'initializing'
+  | 'scheduling'
+  | 'spawning'
+  | 'monitoring'
+  | 'complete'
+
+// Orchestrator event for recent activity
+export interface OrchestratorEvent {
+  eventType: string
+  message: string
+  timestamp: string
+  featureId?: number
+  featureName?: string
+}
+
+// Orchestrator status for Mission Control
+export interface OrchestratorStatus {
+  state: OrchestratorState
+  message: string
+  codingAgents: number
+  testingAgents: number
+  maxConcurrency: number
+  readyCount: number
+  blockedCount: number
+  timestamp: string
+  recentEvents: OrchestratorEvent[]
+}
+
 // WebSocket message types
-export type WSMessageType = 'progress' | 'feature_update' | 'log' | 'agent_status' | 'pong' | 'dev_log' | 'dev_server_status' | 'agent_update'
+export type WSMessageType = 'progress' | 'feature_update' | 'log' | 'agent_status' | 'pong' | 'dev_log' | 'dev_server_status' | 'agent_update' | 'orchestrator_update'

 export interface WSProgressMessage {
  type: 'progress'
@@ -265,6 +296,21 @@ export interface WSDevServerStatusMessage {
  url: string | null
 }

+export interface WSOrchestratorUpdateMessage {
+  type: 'orchestrator_update'
+  eventType: string
+  state: OrchestratorState
+  message: string
+  timestamp: string
+  codingAgents?: number
+  testingAgents?: number
+  maxConcurrency?: number
+  readyCount?: number
+  blockedCount?: number
+  featureId?: number
+  featureName?: string
+}
+
 export type WSMessage =
  | WSProgressMessage
  | WSFeatureUpdateMessage
@@ -274,6 +320,7 @@ export type WSMessage =
  | WSPongMessage
  | WSDevLogMessage
  | WSDevServerStatusMessage
+  | WSOrchestratorUpdateMessage

 // ============================================================================
 // Spec Chat Types
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -960,6 +960,67 @@
  }
 }

+/* ============================================================================
+   Orchestrator (Maestro) Animations
+   ============================================================================ */
+
+@keyframes conducting {
+  0%, 100% {
+    transform: rotate(-10deg);
+  }
+  25% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes baton-tap {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-3px) rotate(-2deg);
+  }
+  50% {
+    transform: translateY(0) rotate(0deg);
+  }
+  75% {
+    transform: translateY(-3px) rotate(2deg);
+  }
+}
+
+@keyframes maestro-idle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes maestro-complete {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+  25% {
+    transform: scale(1.05) rotate(-3deg);
+  }
+  50% {
+    transform: scale(1.1) rotate(0deg);
+  }
+  75% {
+    transform: scale(1.05) rotate(3deg);
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}
+
 /* ============================================================================
   Utilities Layer
   ============================================================================ */
@@ -1089,6 +1150,23 @@
  .animate-confetti {
    animation: confetti 2s ease-out forwards;
  }
+
+  /* Orchestrator (Maestro) animation utilities */
+  .animate-conducting {
+    animation: conducting 1s ease-in-out infinite;
+  }
+
+  .animate-baton-tap {
+    animation: baton-tap 0.6s ease-in-out infinite;
+  }
+
+  .animate-maestro-idle {
+    animation: maestro-idle 2s ease-in-out infinite;
+  }
+
+  .animate-maestro-complete {
+    animation: maestro-complete 0.8s ease-in-out;
+  }
 }

 /* ============================================================================