+ {/* Orchestrator Status Card */}
+ {orchestratorStatus && (
+
+ )}
+
{/* Agent Cards Row */}
-
- {agents.map((agent) => (
-
{
- const agentToShow = agents.find(a => a.agentIndex === agentIndex)
- if (agentToShow) {
- setSelectedAgentForLogs(agentToShow)
- }
- }}
- />
- ))}
-
+ {agents.length > 0 && (
+
+ {agents.map((agent) => (
+
{
+ const agentToShow = agents.find(a => a.agentIndex === agentIndex)
+ if (agentToShow) {
+ setSelectedAgentForLogs(agentToShow)
+ }
+ }}
+ />
+ ))}
+
+ )}
{/* Collapsible Activity Feed */}
{recentActivity.length > 0 && (
diff --git a/ui/src/components/OrchestratorAvatar.tsx b/ui/src/components/OrchestratorAvatar.tsx
new file mode 100644
index 0000000..bbf3dab
--- /dev/null
+++ 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 (
+
+ )
+}
+
+// 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 (
+
+ )
+}
diff --git a/ui/src/components/OrchestratorStatusCard.tsx b/ui/src/components/OrchestratorStatusCard.tsx
new file mode 100644
index 0000000..90db078
--- /dev/null
+++ 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 (
+
+
+ {/* Avatar */}
+
+
+ {/* Main content */}
+
+ {/* Header row */}
+
+
+ Maestro
+
+
+ {getStateText(status.state)}
+
+
+
+ {/* Current message */}
+
+ {status.message}
+
+
+ {/* Status badges row */}
+
+ {/* Coding agents badge */}
+
+
+
+ {/* Testing agents badge */}
+
+
+ Testing: {status.testingAgents}
+
+
+ {/* Ready queue badge */}
+
+
+ Ready: {status.readyCount}
+
+
+ {/* Blocked badge (only show if > 0) */}
+ {status.blockedCount > 0 && (
+
+
+ Blocked: {status.blockedCount}
+
+ )}
+
+
+
+ {/* Recent events toggle */}
+ {status.recentEvents.length > 0 && (
+
+ )}
+
+
+ {/* Collapsible recent events */}
+ {showEvents && status.recentEvents.length > 0 && (
+
+
+ {status.recentEvents.map((event, idx) => (
+
+
+ {formatRelativeTime(event.timestamp)}
+
+
+ {event.message}
+
+
+ ))}
+
+
+ )}
+
+ )
+}
diff --git a/ui/src/hooks/useWebSocket.ts b/ui/src/hooks/useWebSocket.ts
index 533c2ab..648e365 100644
--- 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
(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) {
diff --git a/ui/src/lib/types.ts b/ui/src/lib/types.ts
index 26e9c8b..5f8b9c2 100644
--- 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
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index 5c8199a..e5a2e49 100644
--- 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;
+ }
}
/* ============================================================================