Initial commit — Director app (API + UI)

ui/src/components/AgentStatus.tsx

@@ -0,0 +1,41 @@
+import type { Agent } from '../lib/api'
+
+const statusColors: Record<string, string> = {
+  idle: 'bg-gray-400',
+  working: 'bg-green-500',
+  blocked: 'bg-yellow-500',
+  error: 'bg-red-500',
+  offline: 'bg-gray-700',
+}
+
+const providerBadge: Record<string, string> = {
+  ollama: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+  anthropic: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
+}
+
+export function AgentStatus({ agents }: { agents: Agent[] }) {
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+      <div className="flex items-center gap-2 mb-3">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Agents</h2>
+      </div>
+      <div className="space-y-2">
+        {agents.map((agent) => (
+          <div key={agent.id} className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-gray-750">
+            <div className="flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${statusColors[agent.status] ?? 'bg-gray-400'}`} />
+              <span className="font-medium text-sm text-gray-900 dark:text-gray-100">{agent.name}</span>
+              <span className="text-xs text-gray-500">{agent.role}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className={`text-xs px-1.5 py-0.5 rounded ${providerBadge[agent.model_provider] ?? 'bg-gray-100'}`}>
+                {agent.model_provider}
+              </span>
+              <span className="text-xs text-gray-400">{agent.status}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}