feat(agents): add /agents page with 5 BlackRoad agent cards

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-02-23 01:04:36 -06:00
parent 56419a4fc4
commit 9120c6bfac
1 changed files with 52 additions and 0 deletions
--- a/app/(app)/agents/page.tsx
+++ b/app/(app)/agents/page.tsx
@@ -0,0 +1,52 @@
+// app/(app)/agents/page.tsx
+// Shows the 5 BlackRoad agents
+
+const AGENTS = [
+  { name: 'Octavia', role: 'The Architect', emoji: '🏗️', color: '#9C27B0', description: 'Systems design, infrastructure, and strategic architecture', capabilities: ['systems design', 'strategy', 'infrastructure', 'deployment'] },
+  { name: 'Lucidia', role: 'The Dreamer',   emoji: '🌌', color: '#2979FF', description: 'Creative vision, philosophical reasoning, and big-picture thinking', capabilities: ['philosophy', 'creative reasoning', 'vision', 'synthesis'] },
+  { name: 'Alice',   role: 'The Operator',  emoji: '⚡', color: '#10A37F', description: 'DevOps automation, task execution, and workflow management', capabilities: ['DevOps', 'automation', 'CI/CD', 'execution'] },
+  { name: 'Aria',    role: 'The Interface', emoji: '🎨', color: '#F5A623', description: 'Frontend design, UX, and visual communication', capabilities: ['frontend', 'UX design', 'components', 'accessibility'] },
+  { name: 'Shellfish', role: 'The Hacker', emoji: '🔐', color: '#FF1D6C', description: 'Security research, penetration testing, and vulnerability analysis', capabilities: ['security', 'pen testing', 'exploits', 'hardening'] },
+]
+
+async function getAgentStats() {
+  try {
+    const res = await fetch('http://127.0.0.1:8787/v1/agents', { next: { revalidate: 30 } })
+    if (!res.ok) return null
+    return await res.json()
+  } catch { return null }
+}
+
+export default async function AgentsPage() {
+  const stats = await getAgentStats()
+  return (
+    <div className="p-8 max-w-5xl">
+      <h1 className="text-3xl font-bold mb-2">AI Agents</h1>
+      <p className="text-muted-foreground mb-8">5 specialized agents • tokenless gateway architecture</p>
+      <div className="grid gap-4">
+        {AGENTS.map(agent => (
+          <div key={agent.name} className="rounded-xl border p-6 flex items-start gap-6">
+            <div className="text-4xl">{agent.emoji}</div>
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-1">
+                <span className="font-bold text-xl">{agent.name}</span>
+                <span className="text-sm text-muted-foreground">{agent.role}</span>
+              </div>
+              <p className="text-sm text-muted-foreground mb-3">{agent.description}</p>
+              <div className="flex gap-2 flex-wrap">
+                {agent.capabilities.map(cap => (
+                  <span key={cap} className="text-xs bg-muted rounded-full px-3 py-1">{cap}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {!stats && (
+        <p className="mt-6 text-sm text-muted-foreground">
+          💡 <code className="font-mono">br gateway start</code> to enable live agent communication
+        </p>
+      )}
+    </div>
+  )
+}