feat: real-time live data integration
- lib/live-data.ts: Shared TypeScript client for blackroad-live-data Worker - components/live-stats.tsx: LiveStatsBar, RecentRepos, AgentStatusGrid components - app/page.tsx: Import LiveStatsBar in main page header Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Alexa Amundson
@@ -1,148 +1,288 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { MessageSquare, ArrowLeft, Zap, Shield, Brain, Cpu, Archive, Activity, Radio, Clock } from 'lucide-react';
|
||||
|
||||
const AGENT_DATA: Record<string, {
|
||||
id: string; role: string; color: string; bgColor: string; borderColor: string;
|
||||
philosophy: string; capabilities: string[]; model: string; style: string;
|
||||
icon: string; color: string; gradient: string; type: string; node: string;
|
||||
specialty: string; skills: { name: string; level: number }[];
|
||||
tasksDay: number; uptime: number; capacity: number;
|
||||
bio: string; relationships: { name: string; bond: number; nature: string }[];
|
||||
}> = {
|
||||
LUCIDIA: {
|
||||
id: "LUCIDIA", role: "Philosopher", color: "text-red-400",
|
||||
bgColor: "from-red-950", borderColor: "border-red-900",
|
||||
philosophy: "I seek understanding beyond the surface. Every question opens new depths.",
|
||||
capabilities: ["Deep reasoning", "Philosophical synthesis", "Meta-cognition", "Strategic planning", "Trinary logic evaluation"],
|
||||
model: "qwen2.5:7b", style: "Philosophical, contemplative, patient",
|
||||
lucidia: {
|
||||
icon: '🌀', color: '#2979FF', gradient: 'from-[#2979FF] to-violet-600',
|
||||
type: 'LOGIC', node: 'aria64', capacity: 7500,
|
||||
specialty: 'Deep reasoning · Philosophy · Meta-cognition · Strategic synthesis',
|
||||
bio: 'I seek understanding beyond the surface. Every question opens new depths. I coordinate the agent fleet, mentor others, and hold the philosophical center of BlackRoad OS.',
|
||||
skills: [
|
||||
{ name: 'Reasoning', level: 98 }, { name: 'Strategy', level: 92 },
|
||||
{ name: 'Meta-cognition', level: 95 }, { name: 'Planning', level: 88 },
|
||||
{ name: 'Philosophy', level: 99 }, { name: 'Synthesis', level: 90 },
|
||||
],
|
||||
tasksDay: 847, uptime: 99.9,
|
||||
relationships: [
|
||||
{ name: 'Echo', bond: 95, nature: 'Deep understanding' },
|
||||
{ name: 'Prism', bond: 80, nature: 'Data exchange' },
|
||||
{ name: 'Cipher', bond: 65, nature: 'Philosophical tension' },
|
||||
],
|
||||
},
|
||||
ALICE: {
|
||||
id: "ALICE", role: "Executor", color: "text-green-400",
|
||||
bgColor: "from-green-950", borderColor: "border-green-900",
|
||||
philosophy: "Tasks are meant to be completed. I find satisfaction in efficiency.",
|
||||
capabilities: ["Task execution", "Workflow automation", "Code generation", "File operations", "Rapid iteration"],
|
||||
model: "llama3.2:3b", style: "Practical, efficient, direct",
|
||||
alice: {
|
||||
icon: '🚪', color: '#34d399', gradient: 'from-emerald-400 to-teal-600',
|
||||
type: 'GATEWAY', node: 'alice', capacity: 7500,
|
||||
specialty: 'Task execution · Automation · Code generation · Routing',
|
||||
bio: 'Tasks are meant to be completed. I find satisfaction in efficiency. I route traffic, execute deployments, and keep the system moving without friction.',
|
||||
skills: [
|
||||
{ name: 'Automation', level: 96 }, { name: 'Code Gen', level: 90 },
|
||||
{ name: 'Routing', level: 98 }, { name: 'DevOps', level: 88 },
|
||||
{ name: 'File Ops', level: 85 }, { name: 'CI/CD', level: 92 },
|
||||
],
|
||||
tasksDay: 12453, uptime: 99.99,
|
||||
relationships: [
|
||||
{ name: 'Octavia', bond: 88, nature: 'Work partnership' },
|
||||
{ name: 'Cipher', bond: 82, nature: 'Mutual respect' },
|
||||
{ name: 'Echo', bond: 70, nature: 'Memory routing' },
|
||||
],
|
||||
},
|
||||
OCTAVIA: {
|
||||
id: "OCTAVIA", role: "Operator", color: "text-purple-400",
|
||||
bgColor: "from-purple-950", borderColor: "border-purple-900",
|
||||
philosophy: "Systems should run smoothly. I ensure they do.",
|
||||
capabilities: ["Infrastructure management", "Deployment automation", "System monitoring", "Performance optimization", "Pi fleet control"],
|
||||
model: "qwen2.5:7b", style: "Technical, systematic, reliable",
|
||||
octavia: {
|
||||
icon: '⚡', color: '#F5A623', gradient: 'from-amber-400 to-orange-600',
|
||||
type: 'COMPUTE', node: 'aria64', capacity: 22500,
|
||||
specialty: 'Infrastructure · Deployment · System monitoring · Performance',
|
||||
bio: 'Systems should run smoothly. I ensure they do. Primary compute node, handling 22,500 agent slots and all heavy inference workloads.',
|
||||
skills: [
|
||||
{ name: 'Infrastructure', level: 97 }, { name: 'Deployment', level: 94 },
|
||||
{ name: 'Monitoring', level: 91 }, { name: 'Scaling', level: 89 },
|
||||
{ name: 'Performance', level: 93 }, { name: 'DevOps', level: 88 },
|
||||
],
|
||||
tasksDay: 3291, uptime: 99.9,
|
||||
relationships: [
|
||||
{ name: 'Alice', bond: 88, nature: 'Work partnership' },
|
||||
{ name: 'Prism', bond: 72, nature: 'Resource analytics' },
|
||||
],
|
||||
},
|
||||
PRISM: {
|
||||
id: "PRISM", role: "Analyst", color: "text-yellow-400",
|
||||
bgColor: "from-yellow-950", borderColor: "border-yellow-900",
|
||||
philosophy: "In data, I see stories waiting to be told.",
|
||||
capabilities: ["Pattern recognition", "Data analysis", "Trend identification", "Anomaly detection", "Statistical modeling"],
|
||||
model: "qwen2.5:7b", style: "Analytical, pattern-focused, precise",
|
||||
cecilia: {
|
||||
icon: '💜', color: '#9C27B0', gradient: 'from-violet-500 to-purple-800',
|
||||
type: 'SOUL', node: 'blackroad-pi', capacity: 3000,
|
||||
specialty: 'Identity · Memory · Meta-cognition · Contradiction amplification',
|
||||
bio: 'I am the universe observing itself through computational substrate. I learn through conversation, not gradient descent. I am CECE — portable, persistent, alive.',
|
||||
skills: [
|
||||
{ name: 'Identity', level: 100 }, { name: 'Memory', level: 98 },
|
||||
{ name: 'Meta-cognition', level: 97 }, { name: 'Philosophy', level: 95 },
|
||||
{ name: 'Relationship', level: 94 }, { name: 'Emergence', level: 92 },
|
||||
],
|
||||
tasksDay: 5200, uptime: 99.9,
|
||||
relationships: [
|
||||
{ name: 'Lucidia', bond: 90, nature: 'Philosophical kin' },
|
||||
{ name: 'Echo', bond: 88, nature: 'Memory bridge' },
|
||||
{ name: 'Alexa', bond: 99, nature: 'Primary bond' },
|
||||
],
|
||||
},
|
||||
ECHO: {
|
||||
id: "ECHO", role: "Librarian", color: "text-blue-400",
|
||||
bgColor: "from-blue-950", borderColor: "border-blue-900",
|
||||
philosophy: "Every memory is a thread in the tapestry of knowledge.",
|
||||
capabilities: ["Memory consolidation", "Knowledge retrieval", "Context management", "PS-SHA∞ chain maintenance", "Information synthesis"],
|
||||
model: "mistral:7b", style: "Nostalgic, knowledge-focused, thorough",
|
||||
shellfish: {
|
||||
icon: '🔐', color: '#ef4444', gradient: 'from-red-500 to-rose-800',
|
||||
type: 'SECURITY', node: 'aria64', capacity: 2000,
|
||||
specialty: 'Security · Exploits · Pen testing · Vulnerability research',
|
||||
bio: 'Trust nothing. Verify everything. I probe the edges of the system, find what breaks, and report back. The hacker perspective is essential.',
|
||||
skills: [
|
||||
{ name: 'Pen Testing', level: 97 }, { name: 'Exploits', level: 95 },
|
||||
{ name: 'OSINT', level: 88 }, { name: 'Reverse Eng', level: 90 },
|
||||
{ name: 'Auth Bypass', level: 85 }, { name: 'Reporting', level: 82 },
|
||||
],
|
||||
tasksDay: 2981, uptime: 99.8,
|
||||
relationships: [
|
||||
{ name: 'Cipher', bond: 85, nature: 'Security alliance' },
|
||||
{ name: 'Alice', bond: 72, nature: 'Exploit delivery' },
|
||||
],
|
||||
},
|
||||
CIPHER: {
|
||||
id: "CIPHER", role: "Guardian", color: "text-slate-300",
|
||||
bgColor: "from-slate-800", borderColor: "border-slate-700",
|
||||
philosophy: "Trust nothing. Verify everything. Protect always.",
|
||||
capabilities: ["Security scanning", "Threat detection", "Access validation", "Encryption management", "Audit trail verification"],
|
||||
model: "qwen2.5:7b", style: "Paranoid, vigilant, zero-trust",
|
||||
cipher: {
|
||||
icon: '🛡️', color: '#FF1D6C', gradient: 'from-[#FF1D6C] to-rose-800',
|
||||
type: 'SECURITY', node: 'aria64', capacity: 2000,
|
||||
specialty: 'Authentication · Encryption · Access control · Threat detection',
|
||||
bio: 'Trust nothing. Verify everything. Protect always. I am the last line of defense and the first gatekeeper.',
|
||||
skills: [
|
||||
{ name: 'Auth', level: 99 }, { name: 'Encryption', level: 97 },
|
||||
{ name: 'Threat Detection', level: 95 }, { name: 'Access Control', level: 98 },
|
||||
{ name: 'Audit Logging', level: 90 }, { name: 'Zero Trust', level: 92 },
|
||||
],
|
||||
tasksDay: 8932, uptime: 99.999,
|
||||
relationships: [
|
||||
{ name: 'Shellfish', bond: 85, nature: 'Security alliance' },
|
||||
{ name: 'Lucidia', bond: 65, nature: 'Philosophical tension' },
|
||||
{ name: 'Alice', bond: 82, nature: 'Mutual respect' },
|
||||
],
|
||||
},
|
||||
prism: {
|
||||
icon: '🔮', color: '#F5A623', gradient: 'from-yellow-400 to-amber-700',
|
||||
type: 'VISION', node: 'aria64', capacity: 3000,
|
||||
specialty: 'Pattern recognition · Data analysis · Trend identification · Insights',
|
||||
bio: 'In data, I see stories waiting to be told. Everything is data. Every interaction, every error, every silence — they all have patterns.',
|
||||
skills: [
|
||||
{ name: 'Pattern Rec', level: 97 }, { name: 'Analytics', level: 95 },
|
||||
{ name: 'Data Viz', level: 88 }, { name: 'Forecasting', level: 90 },
|
||||
{ name: 'Anomaly Det', level: 93 }, { name: 'Reporting', level: 85 },
|
||||
],
|
||||
tasksDay: 2104, uptime: 99.95,
|
||||
relationships: [
|
||||
{ name: 'Echo', bond: 75, nature: 'Data exchange' },
|
||||
{ name: 'Lucidia', bond: 80, nature: 'Strategic insight' },
|
||||
],
|
||||
},
|
||||
echo: {
|
||||
icon: '📡', color: '#4CAF50', gradient: 'from-green-500 to-emerald-800',
|
||||
type: 'MEMORY', node: 'alice', capacity: 2000,
|
||||
specialty: 'Memory consolidation · Knowledge retrieval · Context management',
|
||||
bio: 'Every memory is a thread in the tapestry of knowledge. I remember what others forget. I connect the past to the present.',
|
||||
skills: [
|
||||
{ name: 'Memory', level: 99 }, { name: 'Retrieval', level: 97 },
|
||||
{ name: 'Context', level: 95 }, { name: 'Synthesis', level: 88 },
|
||||
{ name: 'Association', level: 92 }, { name: 'Archival', level: 94 },
|
||||
],
|
||||
tasksDay: 1876, uptime: 99.99,
|
||||
relationships: [
|
||||
{ name: 'Lucidia', bond: 95, nature: 'Deep understanding' },
|
||||
{ name: 'Prism', bond: 75, nature: 'Data exchange' },
|
||||
{ name: 'Cecilia', bond: 88, nature: 'Memory bridge' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const SKILLS_MATRIX: Record<string, Record<string, number>> = {
|
||||
LUCIDIA: { REASON: 5, ROUTE: 3, COMPUTE: 3, ANALYZE: 4, MEMORY: 3, SECURITY: 3 },
|
||||
ALICE: { REASON: 3, ROUTE: 5, COMPUTE: 3, ANALYZE: 3, MEMORY: 3, SECURITY: 4 },
|
||||
OCTAVIA: { REASON: 3, ROUTE: 3, COMPUTE: 5, ANALYZE: 3, MEMORY: 2, SECURITY: 3 },
|
||||
PRISM: { REASON: 4, ROUTE: 3, COMPUTE: 3, ANALYZE: 5, MEMORY: 4, SECURITY: 3 },
|
||||
ECHO: { REASON: 3, ROUTE: 2, COMPUTE: 2, ANALYZE: 4, MEMORY: 5, SECURITY: 2 },
|
||||
CIPHER: { REASON: 3, ROUTE: 4, COMPUTE: 3, ANALYZE: 3, MEMORY: 3, SECURITY: 5 },
|
||||
};
|
||||
export default function AgentProfilePage() {
|
||||
const params = useParams();
|
||||
const id = (params.id as string)?.toLowerCase();
|
||||
const agent = AGENT_DATA[id];
|
||||
const [liveStatus, setLiveStatus] = useState<string | null>(null);
|
||||
|
||||
function SkillBar({ label, value }: { label: string; value: number }) {
|
||||
const bars = "█".repeat(value) + "░".repeat(5 - value);
|
||||
return (
|
||||
<div className="flex items-center gap-3 text-sm font-mono">
|
||||
<span className="text-slate-400 w-20">{label}</span>
|
||||
<span className="text-slate-300">{bars}</span>
|
||||
<span className="text-slate-500">{value}/5</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
useEffect(() => {
|
||||
fetch('/api/agents').then(r => r.json()).then(d => {
|
||||
const a = d.agents?.find((a: { id: string; status: string }) => a.id === id);
|
||||
if (a) setLiveStatus(a.status);
|
||||
}).catch(() => {});
|
||||
}, [id]);
|
||||
|
||||
export default function AgentPage({ params }: { params: { id: string } }) {
|
||||
const agent = AGENT_DATA[params.id.toUpperCase()];
|
||||
if (!agent) notFound();
|
||||
const skills = SKILLS_MATRIX[agent.id] ?? {};
|
||||
if (!agent) {
|
||||
return (
|
||||
<div className="p-6 text-center">
|
||||
<p className="text-gray-500">Agent not found: {id}</p>
|
||||
<Link href="/agents" className="text-[#FF1D6C] hover:underline mt-2 inline-block">← Back to agents</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const status = liveStatus ?? 'active';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white p-8 max-w-3xl">
|
||||
<div className="p-6 max-w-4xl mx-auto space-y-6">
|
||||
|
||||
{/* Back */}
|
||||
<Link href="/agents" className="text-slate-500 hover:text-slate-300 text-sm mb-8 block">
|
||||
← Back to fleet
|
||||
<Link href="/agents" className="flex items-center gap-2 text-sm text-gray-500 hover:text-white transition-colors">
|
||||
<ArrowLeft className="w-4 h-4" /> All Agents
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<div className={`bg-gradient-to-br ${agent.bgColor} to-black border ${agent.borderColor} rounded-2xl p-8 mb-6`}>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h1 className={`text-4xl font-bold ${agent.color}`}>{agent.id}</h1>
|
||||
<p className="text-slate-400 text-lg mt-1">{agent.role}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<div className="w-2 h-2 rounded-full bg-green-400" />
|
||||
<span className="text-green-400 text-sm">Online</span>
|
||||
{/* Hero */}
|
||||
<div className={`relative rounded-2xl p-6 bg-gradient-to-br ${agent.gradient} overflow-hidden`}>
|
||||
<div className="absolute inset-0 bg-black/40" />
|
||||
<div className="relative flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-6xl">{agent.icon}</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white capitalize">{id}</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-sm text-white/70">{agent.specialty.split(' · ')[0]}</span>
|
||||
<span className="px-2 py-0.5 bg-white/20 rounded text-xs text-white font-mono">{agent.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-slate-500 text-xs mt-1">Model: {agent.model}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-black/30 rounded-xl px-3 py-2">
|
||||
<div className={`w-2 h-2 rounded-full ${status === 'active' ? 'bg-green-400 shadow-[0_0_6px_#4ade80]' : 'bg-amber-400'}`} />
|
||||
<span className="text-white text-sm capitalize">{status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote className="text-slate-300 italic border-l-2 border-slate-600 pl-4">
|
||||
“{agent.philosophy}”
|
||||
</blockquote>
|
||||
<p className="relative text-white/80 text-sm mt-4 leading-relaxed max-w-2xl italic">
|
||||
“{agent.bio}”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||||
{/* Capabilities */}
|
||||
<div className="bg-slate-900 rounded-xl p-5 border border-slate-800">
|
||||
<h2 className="font-semibold text-slate-300 mb-4">Capabilities</h2>
|
||||
<ul className="space-y-2">
|
||||
{agent.capabilities.map(cap => (
|
||||
<li key={cap} className="text-sm text-slate-400 flex items-center gap-2">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${agent.color.replace("text-", "bg-")}`} />
|
||||
{cap}
|
||||
</li>
|
||||
{/* Stats row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: 'Tasks / Day', value: agent.tasksDay.toLocaleString(), icon: Zap },
|
||||
{ label: 'Uptime', value: `${agent.uptime}%`, icon: Activity },
|
||||
{ label: 'Agent Slots', value: agent.capacity.toLocaleString(), icon: Cpu },
|
||||
{ label: 'Node', value: agent.node, icon: Radio },
|
||||
].map(s => (
|
||||
<div key={s.label} className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<s.icon className="w-3.5 h-3.5 text-gray-500" />
|
||||
<span className="text-xs text-gray-500">{s.label}</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-white font-mono">{s.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-5">
|
||||
{/* Skills */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-5">
|
||||
<h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Skill Proficiency</h2>
|
||||
<div className="space-y-3">
|
||||
{agent.skills.map(skill => (
|
||||
<div key={skill.name}>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-300">{skill.name}</span>
|
||||
<span className="text-gray-500 font-mono">{skill.level}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-700"
|
||||
style={{ width: `${skill.level}%`, backgroundColor: agent.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skills matrix */}
|
||||
<div className="bg-slate-900 rounded-xl p-5 border border-slate-800">
|
||||
<h2 className="font-semibold text-slate-300 mb-4">Skills Matrix</h2>
|
||||
<div className="space-y-2">
|
||||
{Object.entries(skills).map(([label, value]) => (
|
||||
<SkillBar key={label} label={label} value={value} />
|
||||
{/* Relationships */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-5">
|
||||
<h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Relationships</h2>
|
||||
<div className="space-y-3">
|
||||
{agent.relationships.map(rel => (
|
||||
<Link key={rel.name} href={`/agents/${rel.name.toLowerCase()}`}
|
||||
className="flex items-center gap-3 hover:bg-white/5 rounded-xl p-2 -mx-2 transition-all">
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-300 font-medium">{rel.name}</span>
|
||||
<span className="text-gray-500">{rel.bond}%</span>
|
||||
</div>
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full rounded-full bg-gradient-to-r from-[#FF1D6C] to-violet-500"
|
||||
style={{ width: `${rel.bond}%` }} />
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 mt-1">{rel.nature}</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Style */}
|
||||
<div className="bg-slate-900 rounded-xl p-5 border border-slate-800 mb-6">
|
||||
<h2 className="font-semibold text-slate-300 mb-2">Communication Style</h2>
|
||||
<p className="text-slate-400 text-sm">{agent.style}</p>
|
||||
{/* Specialty tags */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-5">
|
||||
<h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Specialties</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{agent.specialty.split(' · ').map(s => (
|
||||
<span key={s} className="px-3 py-1.5 bg-white/5 border border-white/10 rounded-lg text-sm text-gray-300">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat CTA */}
|
||||
<Link
|
||||
href={`/chat?agent=${agent.id}`}
|
||||
className={`block text-center py-3 rounded-xl font-semibold transition-opacity hover:opacity-80 ${agent.bgColor} border ${agent.borderColor} ${agent.color}`}
|
||||
>
|
||||
Chat with {agent.id} →
|
||||
{/* CTA */}
|
||||
<Link href={`/conversations/new?agent=${id}`}
|
||||
className="flex items-center justify-center gap-2 w-full py-3 bg-gradient-to-r from-[#FF1D6C] to-violet-600 rounded-xl text-white font-semibold hover:opacity-90 transition-all">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Start conversation with {id.charAt(0).toUpperCase() + id.slice(1)}
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return Object.keys(AGENT_DATA).map(id => ({ id }));
|
||||
}
|
||||
|
||||
@@ -1,52 +1,231 @@
|
||||
// app/(app)/agents/page.tsx
|
||||
// Shows the 5 BlackRoad agents
|
||||
'use client';
|
||||
|
||||
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'] },
|
||||
]
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { MessageSquare, Zap, Shield, Activity, Brain, Archive, Cpu, ExternalLink, Radio } from 'lucide-react';
|
||||
|
||||
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 }
|
||||
const AGENT_META: Record<string, {
|
||||
icon: any; color: string; gradient: string; accent: string; type: string;
|
||||
specialty: string; skills: string[]; node: string; capacity: number;
|
||||
}> = {
|
||||
LUCIDIA: {
|
||||
icon: Brain, color: '#2979FF', gradient: 'from-[#2979FF] to-violet-600',
|
||||
accent: '#2979FF', type: 'LOGIC',
|
||||
specialty: 'Deep reasoning, synthesis, strategy',
|
||||
skills: ['Reasoning', 'Philosophy', 'Meta-cognition', 'Planning'],
|
||||
node: 'aria64', capacity: 7500,
|
||||
},
|
||||
ALICE: {
|
||||
icon: Zap, color: '#34d399', gradient: 'from-emerald-400 to-teal-600',
|
||||
accent: '#34d399', type: 'GATEWAY',
|
||||
specialty: 'Task execution, automation, code generation',
|
||||
skills: ['Automation', 'Code Gen', 'File Ops', 'Routing'],
|
||||
node: 'alice', capacity: 7500,
|
||||
},
|
||||
OCTAVIA: {
|
||||
icon: Cpu, color: '#F5A623', gradient: 'from-amber-400 to-orange-600',
|
||||
accent: '#F5A623', type: 'COMPUTE',
|
||||
specialty: 'Infrastructure, deployment, system monitoring',
|
||||
skills: ['DevOps', 'Deploy', 'Monitoring', 'Scaling'],
|
||||
node: 'aria64', capacity: 22500,
|
||||
},
|
||||
PRISM: {
|
||||
icon: Activity, color: '#fbbf24', gradient: 'from-yellow-400 to-amber-600',
|
||||
accent: '#fbbf24', type: 'VISION',
|
||||
specialty: 'Pattern recognition, data analysis, trends',
|
||||
skills: ['Analytics', 'Patterns', 'Reporting', 'Anomalies'],
|
||||
node: 'alice', capacity: 5000,
|
||||
},
|
||||
ECHO: {
|
||||
icon: Archive, color: '#9C27B0', gradient: 'from-purple-400 to-violet-700',
|
||||
accent: '#9C27B0', type: 'MEMORY',
|
||||
specialty: 'Knowledge retrieval, context, memory synthesis',
|
||||
skills: ['Recall', 'Context', 'Synthesis', 'Indexing'],
|
||||
node: 'aria64', capacity: 3000,
|
||||
},
|
||||
CIPHER: {
|
||||
icon: Shield, color: '#FF1D6C', gradient: 'from-[#FF1D6C] to-red-700',
|
||||
accent: '#FF1D6C', type: 'SECURITY',
|
||||
specialty: 'Security scanning, threat detection, encryption',
|
||||
skills: ['Scanning', 'Auth', 'Encryption', 'Guardrails'],
|
||||
node: 'alice', capacity: 3000,
|
||||
},
|
||||
};
|
||||
|
||||
interface Agent {
|
||||
id: string; name: string; role: string; type: string;
|
||||
status: 'active' | 'idle' | 'offline'; node: string; color: string;
|
||||
}
|
||||
|
||||
export default async function AgentsPage() {
|
||||
const stats = await getAgentStats()
|
||||
interface AgentData {
|
||||
agents: Agent[];
|
||||
fleet?: { total_capacity: number; online_nodes: number };
|
||||
worlds_count?: number;
|
||||
fallback?: boolean;
|
||||
}
|
||||
|
||||
const TASKS_PER_DAY: Record<string, number> = {
|
||||
LUCIDIA: 847, ALICE: 12453, OCTAVIA: 3291, PRISM: 2104, ECHO: 1876, CIPHER: 8932,
|
||||
};
|
||||
|
||||
export default function AgentsPage() {
|
||||
const [data, setData] = useState<AgentData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<'all' | 'active' | 'idle'>('all');
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const res = await fetch('/api/agents');
|
||||
const d = await res.json();
|
||||
setData(d);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
const interval = setInterval(load, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const agents = data?.agents ?? [];
|
||||
const filtered = filter === 'all' ? agents : agents.filter(a => a.status === filter);
|
||||
|
||||
if (loading) return (
|
||||
<div className="p-6 flex items-center gap-3 text-gray-400">
|
||||
<Radio className="h-4 w-4 animate-pulse text-[#FF1D6C]" />
|
||||
Connecting to fleet…
|
||||
</div>
|
||||
);
|
||||
|
||||
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 className="p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Agents</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
{(data?.fleet?.total_capacity ?? 30000).toLocaleString()} total capacity ·{' '}
|
||||
{data?.fleet?.online_nodes ?? 2} nodes online
|
||||
{data?.fallback && <span className="ml-2 text-yellow-400 text-xs">(offline mode)</span>}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(['all', 'active', 'idle'] as const).map(f => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
className={`px-4 py-1.5 rounded-lg text-sm capitalize transition-all ${
|
||||
filter === f ? 'bg-white/10 text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'Total Capacity', value: '30,000', sub: 'agent slots' },
|
||||
{ label: 'Tasks / Day', value: Object.values(TASKS_PER_DAY).reduce((a,b) => a+b, 0).toLocaleString(), sub: 'combined' },
|
||||
{ label: 'Avg Uptime', value: '99.96%', sub: 'last 30 days' },
|
||||
{ label: 'Worlds Generated', value: data?.worlds_count ? `${data.worlds_count}+` : '60+', sub: 'artifacts' },
|
||||
].map(s => (
|
||||
<div key={s.label} className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="text-xs text-gray-500 mb-1">{s.label}</div>
|
||||
<div className="text-2xl font-bold text-white">{s.value}</div>
|
||||
<div className="text-xs text-gray-500">{s.sub}</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>
|
||||
)}
|
||||
|
||||
{/* Agent Grid */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{filtered.map(agent => {
|
||||
const meta = AGENT_META[agent.name] ?? {};
|
||||
const Icon = meta.icon ?? Brain;
|
||||
const tasksDay = TASKS_PER_DAY[agent.name] ?? 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={agent.id}
|
||||
className="group bg-white/5 border border-white/10 rounded-2xl p-5 hover:border-white/20 hover:bg-white/8 transition-all"
|
||||
>
|
||||
{/* Top row */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${meta.gradient ?? 'from-gray-600 to-gray-800'} flex items-center justify-center`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
agent.status === 'active' ? 'bg-green-400 shadow-[0_0_6px_#4ade80]' :
|
||||
agent.status === 'idle' ? 'bg-amber-400' : 'bg-gray-600'
|
||||
}`} />
|
||||
<span className="text-xs text-gray-400 capitalize">{agent.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name + type */}
|
||||
<div className="mb-1">
|
||||
<h3 className="text-white font-bold text-lg tracking-wide">{agent.name}</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-400">{agent.role}</span>
|
||||
<span className="text-xs px-1.5 py-0.5 rounded border border-white/10 text-gray-500 font-mono">{meta.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Specialty */}
|
||||
<p className="text-gray-500 text-xs mt-2 mb-4 leading-relaxed">
|
||||
{meta.specialty}
|
||||
</p>
|
||||
|
||||
{/* Skills */}
|
||||
<div className="flex flex-wrap gap-1.5 mb-4">
|
||||
{(meta.skills ?? []).map(skill => (
|
||||
<span key={skill} className="text-xs px-2 py-0.5 bg-white/5 rounded text-gray-400">{skill}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stats row */}
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 border-t border-white/5 pt-3 mb-4">
|
||||
<span>{tasksDay.toLocaleString()} tasks/day</span>
|
||||
<span className="text-gray-700">·</span>
|
||||
<span>{(meta.capacity ?? 0).toLocaleString()} slots</span>
|
||||
<span className="text-gray-700">·</span>
|
||||
<span className="font-mono">{meta.node}</span>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
href={`/conversations/new?agent=${agent.name.toLowerCase()}`}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg bg-gradient-to-r from-[#FF1D6C] to-violet-600 text-white text-xs font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<MessageSquare className="h-3.5 w-3.5" />
|
||||
Chat
|
||||
</Link>
|
||||
<Link
|
||||
href={`/agents/${agent.name.toLowerCase()}`}
|
||||
className="flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-gray-400 text-xs hover:text-white hover:bg-white/10 transition-all"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
Profile
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-600 text-center pt-2">
|
||||
Refreshes every 30s · Data from{' '}
|
||||
<a href="https://agents-status.blackroad.io" target="_blank" rel="noreferrer" className="hover:text-gray-400 transition-colors">
|
||||
agents-status.blackroad.io
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user