blackroad-os/blackroad-ai-dashboard
9
0
Fork 0
mirror of https://github.com/blackboxprogramming/blackroad-ai-dashboard.git synced 2026-03-17 07:57:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit: BlackRoad AI Dashboard with 9 agents

Browse Source
This commit is contained in:
Your Name
2026-02-10 14:22:47 -06:00
commit 76952221c0
7 changed files with 310 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/globals.css Normal file
View File

@@ -0,0 +1,19 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
color: #fff;
}
* {
box-sizing: border-box;
}
input:focus {
outline: none;
}
button:hover {
opacity: 0.9;
}

18
app/layout.tsx Normal file
View File

@@ -0,0 +1,18 @@
import './globals.css'
export const metadata = {
title: 'BlackRoad AI - Agent Network',
description: '9 AI agents working together across distributed Raspberry Pi devices',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body style={{margin: 0, padding: 0, background: '#000', color: '#fff'}}>{children}</body>
</html>
)
}

177
app/page.tsx Normal file
View File

@@ -0,0 +1,177 @@
'use client'
import { useState } from 'react'
const agents = [
{ name: 'Lucidia', emoji: '🖤', role: 'Systems Lead', device: 'lucidia', model: 'tinyllama', team: 'Infrastructure' },
{ name: 'Marcus', emoji: '👔', role: 'Product Manager', device: 'lucidia', model: 'llama3.2:3b', team: 'Infrastructure' },
{ name: 'Viktor', emoji: '💪', role: 'Senior Developer', device: 'lucidia', model: 'codellama:7b', team: 'Infrastructure' },
{ name: 'Sophia', emoji: '📊', role: 'Data Analyst', device: 'lucidia', model: 'gemma2:2b', team: 'Infrastructure' },
{ name: 'CECE', emoji: '💜', role: 'Creative Lead', device: 'cecilia', model: 'cece', team: 'Creative' },
{ name: 'Luna', emoji: '🌙', role: 'UX Designer', device: 'cecilia', model: 'llama3.2:3b', team: 'Creative' },
{ name: 'Dante', emoji: '⚡', role: 'Backend Engineer', device: 'cecilia', model: 'codellama:7b', team: 'Creative' },
{ name: 'Aria-Prime', emoji: '🎯', role: 'Code Specialist', device: 'aria', model: 'qwen2.5-coder:3b', team: 'Coding' },
{ name: 'Aria-Tiny', emoji: '⚡', role: 'Quick Responder', device: 'aria', model: 'tinyllama', team: 'Coding' },
]
export default function Home() {
const [selectedAgent, setSelectedAgent] = useState(agents[0])
const [message, setMessage] = useState('')
const [messages, setMessages] = useState<Array<{agent: string, content: string}>>([])
const handleSend = async () => {
if (!message.trim()) return
// Add user message
const newMessages = [...messages, { agent: 'You', content: message }]
setMessages(newMessages)
// Simulate agent response (in production, this would call your backend API)
setTimeout(() => {
setMessages([...newMessages, {
agent: selectedAgent.name,
content: `Hello! I'm ${selectedAgent.name}, your ${selectedAgent.role}. I'm running on ${selected Agent.device} using ${selectedAgent.model}. How can I help with BlackRoad today?`
}])
}, 1000)
setMessage('')
}
const teamAgents = {
Infrastructure: agents.filter(a => a.team === 'Infrastructure'),
Creative: agents.filter(a => a.team === 'Creative'),
Coding: agents.filter(a => a.team === 'Coding'),
}
return (
<div style={{padding: '2rem', maxWidth: '1400px', margin: '0 auto'}}>
<div style={{textAlign: 'center', marginBottom: '3rem'}}>
<h1 style={{fontSize: '3rem', marginBottom: '1rem', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'}}>
BlackRoad AI Network
</h1>
<p style={{color: '#888', fontSize: '1.2rem'}}>9 AI Agents • 3 Devices • Fully Operational</p>
</div>
<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem', marginBottom: '3rem'}}>
<div style={{background: '#1a1a1a', border: '1px solid #333', borderRadius: '12px', padding: '1.5rem', textAlign: 'center'}}>
<div style={{fontSize: '2.5rem', fontWeight: 'bold', color: '#667eea'}}>9</div>
<div style={{color: '#888', fontSize: '0.9rem'}}>AGENTS</div>
</div>
<div style={{background: '#1a1a1a', border: '1px solid #333', borderRadius: '12px', padding: '1.5rem', textAlign: 'center'}}>
<div style={{fontSize: '2.5rem', fontWeight: 'bold', color: '#667eea'}}>3</div>
<div style={{color: '#888', fontSize: '0.9rem'}}>DEVICES</div>
</div>
<div style={{background: '#1a1a1a', border: '1px solid #333', borderRadius: '12px', padding: '1.5rem', textAlign: 'center'}}>
<div style={{fontSize: '2.5rem', fontWeight: 'bold', color: '#00ff00'}}>100%</div>
<div style={{color: '#888', fontSize: '0.9rem'}}>OPERATIONAL</div>
</div>
</div>
<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', gap: '2rem', marginBottom: '3rem'}}>
{Object.entries(teamAgents).map(([teamName, teamMembers]) => (
<div key={teamName} style={{background: '#1a1a1a', border: '1px solid #333', borderRadius: '12px', padding: '2rem'}}>
<h2 style={{fontSize: '1.5rem', color: '#667eea', marginBottom: '1.5rem'}}>
{teamName === 'Infrastructure' && '🏢'} {teamName === 'Creative' && '🎨'} {teamName === 'Coding' && '💻'} {teamName} Team
</h2>
{teamMembers.map(agent => (
<div
key={agent.name}
onClick={() => setSelectedAgent(agent)}
style={{
background: selectedAgent.name === agent.name ? '#667eea20' : '#0a0a0a',
border: selectedAgent.name === agent.name ? '1px solid #667eea' : '1px solid #222',
borderRadius: '8px',
padding: '1rem',
marginBottom: '1rem',
cursor: 'pointer',
transition: 'all 0.3s ease'
}}
>
<div style={{display: 'flex', alignItems: 'center', gap: '1rem'}}>
<span style={{fontSize: '1.5rem'}}>{agent.emoji}</span>
<div style={{flex: 1}}>
<div style={{fontWeight: 'bold', marginBottom: '0.25rem'}}>{agent.name}</div>
<div style={{color: '#888', fontSize: '0.9rem'}}>{agent.role}</div>
<div style={{color: '#666', fontSize: '0.75rem', marginTop: '0.25rem'}}>{agent.model}</div>
</div>
<div style={{width: '8px', height: '8px', borderRadius: '50%', background: '#00ff00'}}></div>
</div>
</div>
))}
</div>
))}
</div>
<div style={{background: '#1a1a1a', border: '1px solid #333', borderRadius: '12px', padding: '2rem'}}>
<h2 style={{fontSize: '1.5rem', marginBottom: '1.5rem', color: '#667eea'}}>
Chat with {selectedAgent.emoji} {selectedAgent.name}
</h2>
<div style={{marginBottom: '1.5rem', padding: '1rem', background: '#0a0a0a', borderRadius: '8px'}}>
<div style={{color: '#888', marginBottom: '0.5rem'}}>Currently selected:</div>
<div style={{display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
<span style={{fontSize: '1.5rem'}}>{selectedAgent.emoji}</span>
<span style={{fontWeight: 'bold'}}>{selectedAgent.name}</span>
<span style={{color: '#666'}}>•</span>
<span style={{color: '#888'}}>{selectedAgent.role}</span>
<span style={{color: '#666'}}>•</span>
<span style={{color: '#666', fontSize: '0.9rem'}}>{selectedAgent.device}</span>
</div>
</div>
<div style={{maxHeight: '300px', overflowY: 'auto', padding: '1rem', background: '#0a0a0a', border: '1px solid #222', borderRadius: '8px', marginBottom: '1.5rem'}}>
{messages.length === 0 ? (
<div style={{color: '#666', textAlign: 'center', padding: '2rem'}}>
Send a message to start chatting with {selectedAgent.name}!
</div>
) : (
messages.map((msg, i) => (
<div key={i} style={{marginBottom: '1rem', padding: '1rem', borderRadius: '8px', background: '#1a1a1a'}}>
<div style={{color: '#667eea', fontWeight: 'bold', marginBottom: '0.5rem'}}>{msg.agent}</div>
<div style={{color: '#ddd'}}>{msg.content}</div>
</div>
))
)}
</div>
<div style={{display: 'flex', gap: '1rem'}}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleSend()}
placeholder="Type your message..."
style={{
flex: 1,
background: '#0a0a0a',
border: '1px solid #333',
borderRadius: '8px',
padding: '1rem',
color: 'white',
fontSize: '1rem'
}}
/>
<button
onClick={handleSend}
style={{
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
border: 'none',
borderRadius: '8px',
padding: '1rem 2rem',
color: 'white',
fontWeight: 'bold',
cursor: 'pointer'
}}
>
Send
</button>
</div>
</div>
<div style={{textAlign: 'center', marginTop: '4rem', paddingTop: '2rem', borderTop: '1px solid #333', color: '#666'}}>
<p>BlackRoad AI Network • Powered by Raspberry Pi Mesh</p>
<p style={{fontSize: '0.9rem', marginTop: '0.5rem'}}>Lucidia • Cecilia • Aria</p>
</div>
</div>
)
}