Initial commit

2026-07-01 17:56:31 +08:00
commit d78931979d
731 changed files with 311088 additions and 0 deletions
@@ -0,0 +1,73 @@
+import { useMemo } from 'react'
+import type { AgentInfo } from '../types/visual'
+import type { AgentAnimStatus, KanbanTask } from '../types/kanban'
+import { AGENT_STATUS_LABEL } from '../types/kanban'
+
+interface AgentStatusBarProps {
+  agents: AgentInfo[]
+  tasks: KanbanTask[]
+}
+
+interface AgentState {
+  agent: AgentInfo
+  status: AgentAnimStatus
+  currentTool?: string
+  taskDisplayId?: string
+}
+
+export function AgentStatusBar({ agents, tasks }: AgentStatusBarProps) {
+  const agentStates = useMemo<AgentState[]>(() => {
+    const tasksById = new Map(tasks.map((task) => [task.id, task]))
+    return agents.map(agent => {
+      // Find the first active (non-idle) task for this agent
+      const activeTask = tasks.find(
+        t => t.assigneeIds.includes(agent.agent_id)
+          && t.agentStatus && t.agentStatus !== 'idle'
+      )
+      const runtimeTask = agent.current_task_id ? tasksById.get(agent.current_task_id) : undefined
+      return {
+        agent,
+        status: (activeTask?.agentStatus ?? agent.runtime_status ?? 'idle') as AgentAnimStatus,
+        currentTool: activeTask?.currentTool ?? agent.current_tool,
+        taskDisplayId: activeTask?.displayId ?? runtimeTask?.displayId,
+      }
+    })
+  }, [agents, tasks])
+
+  if (agents.length === 0) return null
+
+  const activeCount = agentStates.filter(s => s.status !== 'idle').length
+
+  return (
+    <div className="agent-status-bar">
+      <span className="agent-status-summary">
+        {activeCount > 0
+          ? `${activeCount}/${agents.length} active`
+          : `${agents.length} agent${agents.length !== 1 ? 's' : ''}`}
+      </span>
+      <div className="agent-status-chips">
+        {agentStates.map(({ agent, status, currentTool, taskDisplayId }) => (
+          <div
+            key={agent.agent_id}
+            className={`agent-status-chip status-${status}`}
+            title={`${agent.name}: ${status === 'tool_active' && currentTool ? currentTool : AGENT_STATUS_LABEL[status]}${taskDisplayId ? ` (${taskDisplayId})` : ''}`}
+          >
+            <span className="agent-status-avatar">{agent.name.charAt(0).toUpperCase()}</span>
+            <span className="agent-status-name">{agent.name}</span>
+            {status !== 'idle' && (
+              <>
+                <span className="kanban-runtime-dot" />
+                <span className="agent-status-detail">
+                  {status === 'tool_active' && currentTool ? currentTool : AGENT_STATUS_LABEL[status]}
+                </span>
+              </>
+            )}
+            {taskDisplayId && (
+              <span className="agent-status-task">{taskDisplayId}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}