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-03-19 11:53:09 +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/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>
+  )
+}