CUB-122: Scaffold Control Center React frontend

frontend/src/pages/HubPage.tsx

@@ -0,0 +1,91 @@
+import { useQuery } from '@tanstack/react-query'
+import { listAgents } from '../services/api'
+import { Activity, AlertTriangle } from 'lucide-react'
+
+export default function HubPage() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['agents'],
+    queryFn: listAgents,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="w-8 h-8 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64 text-danger">
+        <AlertTriangle size={24} className="mr-2" />
+        Failed to load agents
+      </div>
+    )
+  }
+
+  const agents = data?.data ?? []
+
+  return (
+    <div className="space-y-6">
+      <header>
+        <h1 className="text-2xl font-bold">Command Hub</h1>
+        <p className="text-on-surface-variant">Agent fleet overview</p>
+      </header>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {agents.map((agent) => (
+          <div
+            key={agent.id}
+            className="p-4 rounded-xl border border-surface-light bg-surface-dark"
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div>
+                <h3 className="font-semibold">{agent.displayName}</h3>
+                <p className="text-xs text-on-surface-variant">{agent.role}</p>
+              </div>
+              <StatusDot status={agent.status} />
+            </div>
+
+            {agent.currentTask && (
+              <div className="text-sm text-on-surface-variant mb-2">
+                {agent.currentTask}
+              </div>
+            )}
+
+            {agent.taskProgress !== undefined && (
+              <div className="w-full h-2 bg-surface-light rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary rounded-full transition-all"
+                  style={{ width: `${agent.taskProgress}%` }}
+                />
+              </div>
+            )}
+
+            <div className="mt-3 flex items-center gap-2 text-xs text-on-surface-muted">
+              <Activity size={12} />
+              {agent.channel} · {agent.lastActivity}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function StatusDot({ status }: { status: string }) {
+  const colorMap: Record<string, string> = {
+    active: 'bg-status-active',
+    idle: 'bg-status-idle',
+    thinking: 'bg-status-thinking',
+    error: 'bg-status-error',
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <div className={`w-2.5 h-2.5 rounded-full ${colorMap[status] ?? 'bg-status-offline'}`} />
+      <span className="text-xs capitalize text-on-surface-variant">{status}</span>
+    </div>
+  )
+}