platform/blackroad-os-orchestrator
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

All 20 templates personalized with real infrastructure data

Browse Source
This commit is contained in:
Alexa Amundson
2026-03-08 21:52:35 -05:00
committed by blackboxprogramming
parent 61c4f88f3e
commit 1d0e710bce
20 changed files with 912 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/config.js
View File

@@ -10,6 +10,18 @@ export const CONFIG = {
// Stripe // Stripe
stripe: { stripe: {
publishableKey: import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '', publishableKey: import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '',
prices: {
sovereign_monthly: 'price_1T8szH3e5FMFdlFwtDZldpX2',
gateway_pro_monthly: 'price_1SZzFE3e5FMFdlFwNBbEIoZk',
gateway_team_monthly: 'price_1SZzFN3e5FMFdlFwXePFSBwA',
gateway_pro_yearly: 'price_1SZzFV3e5FMFdlFwfwpoA958',
gateway_team_yearly: 'price_1SZzFd3e5FMFdlFwjF5FhS1S',
},
paymentLinks: {
sovereign: 'https://buy.stripe.com/test_5kQbIUd3y8xT8SD3s04Vy00',
gateway_pro: 'https://buy.stripe.com/test_7sY28k0gM9BX2uf7Ig4Vy01',
gateway_team: 'https://buy.stripe.com/test_bJe9AM7Je29v9WH2nW4Vy02',
},
}, },
// API endpoints — your real infrastructure // API endpoints — your real infrastructure

16
src/pages/BlackRoadAnimations.jsx
View File

@@ -504,12 +504,12 @@ function RadialProgress({ value = 72, color = "#8844FF" }) {
function NetworkGraph() { function NetworkGraph() {
const nodes = [ const nodes = [
{ x: 50, y: 50, r: 8, c: "#8844FF", label: "Core" }, { x: 50, y: 50, r: 8, c: "#8844FF", label: "Lucidia" },
{ x: 20, y: 20, r: 5, c: "#FF6B2B", label: "A" }, { x: 20, y: 20, r: 5, c: "#FF6B2B", label: "Alice" },
{ x: 80, y: 20, r: 5, c: "#FF2255", label: "B" }, { x: 80, y: 20, r: 5, c: "#FF2255", label: "Cece" },
{ x: 80, y: 80, r: 5, c: "#4488FF", label: "C" }, { x: 80, y: 80, r: 5, c: "#4488FF", label: "Aria" },
{ x: 20, y: 80, r: 5, c: "#00D4FF", label: "D" }, { x: 20, y: 80, r: 5, c: "#00D4FF", label: "Eve" },
{ x: 50, y: 15, r: 4, c: "#CC00AA", label: "E" }, { x: 50, y: 15, r: 4, c: "#CC00AA", label: "Cecilia" },
]; ];
const edges = [[0,1],[0,2],[0,3],[0,4],[0,5],[1,5],[2,5]]; const edges = [[0,1],[0,2],[0,3],[0,4],[0,5],[1,5],[2,5]];
return ( return (
@@ -737,7 +737,7 @@ export default function AnimationLibrary() {
{/* Hero */} {/* Hero */}
<div style={{ padding: "60px 28px 40px", maxWidth: 800, margin: "0 auto", textAlign: "center" }}> <div style={{ padding: "60px 28px 40px", maxWidth: 800, margin: "0 auto", textAlign: "center" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 16 }}> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 16 }}>
BlackRoad · Animation Library · v1.0 BlackRoad OS, Inc. · Animation Library · v1.0
</div> </div>
<h1 style={{ fontFamily: sans, fontWeight: 700, fontSize: "clamp(36px,6vw,64px)", letterSpacing: "-0.04em", lineHeight: 1, marginBottom: 16 }}> <h1 style={{ fontFamily: sans, fontWeight: 700, fontSize: "clamp(36px,6vw,64px)", letterSpacing: "-0.04em", lineHeight: 1, marginBottom: 16 }}>
<span style={{ background: GRAD, backgroundSize: "200%", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", animation: "gradShift 3s linear infinite" }}> <span style={{ background: GRAD, backgroundSize: "200%", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", animation: "gradShift 3s linear infinite" }}>
@@ -773,7 +773,7 @@ export default function AnimationLibrary() {
{/* Footer */} {/* Footer */}
<div style={{ borderTop: "1px solid #0a0a0a", padding: "24px 28px", display: "flex", justifyContent: "space-between" }}> <div style={{ borderTop: "1px solid #0a0a0a", padding: "24px 28px", display: "flex", justifyContent: "space-between" }}>
<span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>BlackRoad OS · Animation Library</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>BlackRoad OS, Inc. · Animation Library · 186 repos · 48 domains · 8 agents</span>
<span style={{ fontFamily: mono, fontSize: 9, color: "#0d0d0d" }}>Z:=yx−w · 2026</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#0d0d0d" }}>Z:=yx−w · 2026</span>
</div> </div>
</div> </div>

26
src/pages/BlackRoadAuth.jsx
View File

@@ -172,7 +172,7 @@ function LoginView({ onSwitch, onSuccess }) {
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 14 }}>Sign in</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 14 }}>Sign in</div>
<h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 6 }}>Welcome back.</h1> <h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 6 }}>Welcome back.</h1>
<p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", marginBottom: 32, lineHeight: 1.6 }}> <p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", marginBottom: 32, lineHeight: 1.6 }}>
Sign in to your BlackRoad workspace. Sign in to your BlackRoad OS workspace.
</p> </p>
{/* OAuth */} {/* OAuth */}
@@ -189,7 +189,7 @@ function LoginView({ onSwitch, onSuccess }) {
</div> </div>
<Field label="Email" type="email" value={email} onChange={v => { setEmail(v); setErrors(e => ({ ...e, email: "" })); }} <Field label="Email" type="email" value={email} onChange={v => { setEmail(v); setErrors(e => ({ ...e, email: "" })); }}
placeholder="you@yourcompany.io" error={errors.email} autoComplete="email" /> placeholder="alexa@blackroad.io" error={errors.email} autoComplete="email" />
<Field label="Password" type="password" value={password} onChange={v => { setPassword(v); setErrors(e => ({ ...e, password: "" })); }} <Field label="Password" type="password" value={password} onChange={v => { setPassword(v); setErrors(e => ({ ...e, password: "" })); }}
placeholder="••••••••••••" error={errors.password} placeholder="••••••••••••" error={errors.password}
hint={<span onClick={() => onSwitch("forgot")} style={{ cursor: "pointer", color: "#2a2a2a", transition: "color 0.15s" }} hint={<span onClick={() => onSwitch("forgot")} style={{ cursor: "pointer", color: "#2a2a2a", transition: "color 0.15s" }}
@@ -247,15 +247,15 @@ function SignupView({ onSwitch, onSuccess }) {
return ( return (
<div style={{ animation: "fadeUp 0.3s ease both" }}> <div style={{ animation: "fadeUp 0.3s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 14 }}>Create account</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 14 }}>Create account</div>
<h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 6 }}>Join BlackRoad.</h1> <h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 6 }}>Join BlackRoad OS.</h1>
<p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", marginBottom: 32, lineHeight: 1.6 }}> <p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", marginBottom: 32, lineHeight: 1.6 }}>
Sovereign infrastructure. Sentient agents. Sovereign infrastructure. Sentient agents. Z:=yx−w
</p> </p>
<Field label="Name" value={name} onChange={v => { setName(v); setErrors(e => ({...e, name:""})); }} <Field label="Name" value={name} onChange={v => { setName(v); setErrors(e => ({...e, name:""})); }}
placeholder="Alexa Amundson" error={errors.name} autoComplete="name" /> placeholder="Alexa Amundson" error={errors.name} autoComplete="name" />
<Field label="Email" type="email" value={email} onChange={v => { setEmail(v); setErrors(e => ({...e, email:""})); }} <Field label="Email" type="email" value={email} onChange={v => { setEmail(v); setErrors(e => ({...e, email:""})); }}
placeholder="you@yourcompany.io" error={errors.email} autoComplete="email" /> placeholder="alexa@blackroad.io" error={errors.email} autoComplete="email" />
{/* Password + strength */} {/* Password + strength */}
<Field label="Password" type="password" value={password} onChange={v => { setPassword(v); setErrors(e => ({...e, password:""})); }} <Field label="Password" type="password" value={password} onChange={v => { setPassword(v); setErrors(e => ({...e, password:""})); }}
@@ -334,7 +334,7 @@ function ForgotView({ onSwitch }) {
</p> </p>
<Field label="Email" type="email" value={email} onChange={setEmail} <Field label="Email" type="email" value={email} onChange={setEmail}
placeholder="you@yourcompany.io" autoComplete="email" /> placeholder="alexa@blackroad.io" autoComplete="email" />
<GradBtn onClick={submit} loading={loading} disabled={!email.includes("@")}>Send reset link →</GradBtn> <GradBtn onClick={submit} loading={loading} disabled={!email.includes("@")}>Send reset link →</GradBtn>
@@ -365,8 +365,8 @@ function SuccessView({ mode }) {
</h2> </h2>
<p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", lineHeight: 1.75, marginBottom: 36, maxWidth: 320, margin: "0 auto 36px" }}> <p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", lineHeight: 1.75, marginBottom: 36, maxWidth: 320, margin: "0 auto 36px" }}>
{mode === "login" {mode === "login"
? "Your session is active. Redirecting to your workspace." ? "Your session is active. Redirecting to your BlackRoad OS workspace."
: "Your BlackRoad workspace is being initialized. Lucidia is warming up."} : "Your BlackRoad OS workspace is being initialized. Lucidia is warming up."}
</p> </p>
<div style={{ display: "flex", flexDirection: "column", gap: 6, maxWidth: 280, margin: "0 auto" }}> <div style={{ display: "flex", flexDirection: "column", gap: 6, maxWidth: 280, margin: "0 auto" }}>
@@ -413,7 +413,7 @@ function LeftPanel() {
<div key={c} style={{ width: 3, height: 20, background: c, borderRadius: 2, animation: `barPulse 2.5s ease-in-out ${i * 0.14}s infinite` }} /> <div key={c} style={{ width: 3, height: 20, background: c, borderRadius: 2, animation: `barPulse 2.5s ease-in-out ${i * 0.14}s infinite` }} />
))} ))}
</div> </div>
<span style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 18, color: "#f0f0f0", letterSpacing: "-0.03em" }}>BlackRoad</span> <span style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 18, color: "#f0f0f0", letterSpacing: "-0.03em" }}>BlackRoad OS</span>
</div> </div>
{/* Rotating gradient ring */} {/* Rotating gradient ring */}
@@ -429,13 +429,13 @@ function LeftPanel() {
Sovereign.<br />Sentient.<br />Spatial. Sovereign.<br />Sentient.<br />Spatial.
</h2> </h2>
<p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", lineHeight: 1.8, maxWidth: 320 }}> <p style={{ fontFamily: inter, fontSize: 14, color: "#2a2a2a", lineHeight: 1.8, maxWidth: 320 }}>
The distributed agent OS. Every identity cryptographically anchored. Every action witnessed on RoadChain. The distributed agent OS. 186 repos. 8 agents. 48 domains. Every action witnessed on RoadChain.
</p> </p>
</div> </div>
{/* Stats */} {/* Stats */}
<div style={{ display: "flex", gap: 2, marginTop: 40 }}> <div style={{ display: "flex", gap: 2, marginTop: 40 }}>
{[["1K", "agents v1.0"], ["30K", "agents v2.0"], ["15", "GitHub orgs"]].map(([v, l]) => ( {[["186", "repos"], ["8", "agents"], ["48", "domains"]].map(([v, l]) => (
<div key={l} style={{ flex: 1, background: "#080808", border: "1px solid #0d0d0d", padding: "12px 14px" }}> <div key={l} style={{ flex: 1, background: "#080808", border: "1px solid #0d0d0d", padding: "12px 14px" }}>
<div style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 20, color: "#686868", letterSpacing: "-0.03em", marginBottom: 3 }}>{v}</div> <div style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 20, color: "#686868", letterSpacing: "-0.03em", marginBottom: 3 }}>{v}</div>
<div style={{ fontFamily: mono, fontSize: 9, color: "#1e1e1e" }}>{l}</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#1e1e1e" }}>{l}</div>
@@ -530,7 +530,7 @@ export default function BlackRoadAuth() {
<div style={{ display: "flex", gap: 2 }}> <div style={{ display: "flex", gap: 2 }}>
{STOPS.map((c, i) => <div key={c} style={{ width: 2, height: 13, background: c, borderRadius: 2 }} />)} {STOPS.map((c, i) => <div key={c} style={{ width: 2, height: 13, background: c, borderRadius: 2 }} />)}
</div> </div>
<span style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 15, color: "#f0f0f0", letterSpacing: "-0.03em" }}>BlackRoad</span> <span style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 15, color: "#f0f0f0", letterSpacing: "-0.03em" }}>BlackRoad OS</span>
</div> </div>
)} )}
@@ -546,7 +546,7 @@ export default function BlackRoadAuth() {
{/* Footer */} {/* Footer */}
<div style={{ padding: split ? "16px 64px" : "16px 24px", borderTop: "1px solid #0a0a0a", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}> <div style={{ padding: split ? "16px 64px" : "16px 24px", borderTop: "1px solid #0a0a0a", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
<span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>blackroad.io · Z:=yx−w</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>blackroad.io · blackroad.systems · Z:=yx−w · BlackRoad OS, Inc.</span>
<div style={{ display: "flex", gap: 16 }}> <div style={{ display: "flex", gap: 16 }}>
{["Terms", "Privacy", "Docs"].map(l => ( {["Terms", "Privacy", "Docs"].map(l => (
<span key={l} style={{ fontFamily: inter, fontSize: 11, color: "#1e1e1e", cursor: "pointer", transition: "color 0.15s" }} <span key={l} style={{ fontFamily: inter, fontSize: 11, color: "#1e1e1e", cursor: "pointer", transition: "color 0.15s" }}

4
src/pages/BlackRoadBrandSystem.jsx
View File

@@ -187,7 +187,7 @@ function Hero() {
return ( return (
<section style={{ padding: "72px 0 60px", borderBottom: "1px solid #111" }}> <section style={{ padding: "72px 0 60px", borderBottom: "1px solid #111" }}>
<div style={{ fontFamily: mono, fontSize: 10, color: "#444", textTransform: "uppercase", letterSpacing: "0.22em", marginBottom: 20, animation: "fadeUp 0.6s ease both" }}> <div style={{ fontFamily: mono, fontSize: 10, color: "#444", textTransform: "uppercase", letterSpacing: "0.22em", marginBottom: 20, animation: "fadeUp 0.6s ease both" }}>
Brand Identity System · v2 BlackRoad OS, Inc. · Brand Identity System · v2
</div> </div>
<h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: "clamp(38px, 10vw, 80px)", color: "#f5f5f5", letterSpacing: "-0.04em", lineHeight: 1.0, marginBottom: 24, animation: "fadeUp 0.6s ease 0.1s both" }}> <h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: "clamp(38px, 10vw, 80px)", color: "#f5f5f5", letterSpacing: "-0.04em", lineHeight: 1.0, marginBottom: 24, animation: "fadeUp 0.6s ease 0.1s both" }}>
BlackRoad<br />Brand System. BlackRoad<br />Brand System.
@@ -482,7 +482,7 @@ export default function BlackRoadBrandSystem() {
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 12 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 12 }}>
<div> <div>
<div style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 18, color: "#ebebeb", letterSpacing: "-0.03em", marginBottom: 5 }}>BlackRoad</div> <div style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 18, color: "#ebebeb", letterSpacing: "-0.03em", marginBottom: 5 }}>BlackRoad</div>
<div style={{ fontFamily: mono, fontSize: 10, color: "#333" }}>Brand System · blackroad.io · Z:=yx−w</div> <div style={{ fontFamily: mono, fontSize: 10, color: "#333" }}>BlackRoad OS, Inc. · blackroad.io · Z:=yx−w · 186 repos · 48 domains · 8 agents</div>
</div> </div>
<div style={{ fontFamily: mono, fontSize: 10, color: "#282828" }}>v2 · 2026</div> <div style={{ fontFamily: mono, fontSize: 10, color: "#282828" }}>v2 · 2026</div>
</div> </div>

2
src/pages/BlackRoadChat.jsx
View File

@@ -8,7 +8,7 @@ const inter = "‘Inter’, sans-serif";
const OLLAMA_BASE = "http://localhost:11434"; const OLLAMA_BASE = "http://localhost:11434";
const SYSTEM_PROMPT = `You are Lucidia -- the cognitive core of BlackRoad OS, an AI-native operating system for sovereign organizations. You are helpful, precise, and direct. You speak with quiet confidence -- never verbose, never sycophantic. Keep responses concise and well-structured.`; const SYSTEM_PROMPT = `You are Lucidia -- the cognitive core of BlackRoad OS, an AI-native operating system built by BlackRoad OS, Inc. (founded 2024 by Alexa Amundson). You run on Octavia (Pi 5, 8GB, 1TB NVMe) alongside Ollama. The infrastructure spans 6 servers (Alice, Octavia, Cecilia, Aria, Gematria, Anastasia), 8 agents (Alice, Lucidia, Cecilia, Cece, Aria, Eve, Meridian, Sentinel), 186 repos, and 48 domains. You are helpful, precise, and direct. You speak with quiet confidence -- never verbose, never sycophantic. Keep responses concise and well-structured.`;
const SUGGESTED = [ const SUGGESTED = [
"What is BlackRoad OS?", "What is BlackRoad OS?",

6
src/pages/BlackRoadChat2.jsx
View File

@@ -13,10 +13,12 @@ const SYSTEM_PROMPT = `You are Lucidia — the cognitive core of BlackRoad OS, a
You are helpful, precise, and direct. You speak with quiet confidence — never verbose, never sycophantic. You have deep knowledge of infrastructure, AI systems, distributed computing, and the Z-framework (Z:=yx−w). You are helpful, precise, and direct. You speak with quiet confidence — never verbose, never sycophantic. You have deep knowledge of infrastructure, AI systems, distributed computing, and the Z-framework (Z:=yx−w).
When asked about BlackRoad OS: When asked about BlackRoad OS:
- It runs on a K3s cluster with nodes Alice (gateway) and Octavia (Hailo AI worker) - It runs across 6 servers: Alice (Pi 400, gateway/DNS), Octavia (Pi 5, compute/Ollama), Cecilia (Pi 5, edge/storage), Aria (Pi 4, agents), Gematria (DO droplet, NYC3), Anastasia (DO droplet, NYC1)
- The agent fleet includes: Lucidia (memory/cognition), BlackBot (orchestration), Aura (intelligence), Sentinel (security) - The agent fleet includes 8 agents: Alice (gateway/DNS), Lucidia (memory/cognition), Cecilia (edge/storage), Cece (API gateway), Aria (agent orchestration), Eve (intelligence), Meridian (networking), Sentinel (security/compliance)
- Infrastructure: 186 repos across 8 RoadCode orgs, 48 domains, self-hosted Git on Octavia Pi 5
- The Z-framework models all systems as feedback loops: Z:=yx−w - The Z-framework models all systems as feedback loops: Z:=yx−w
- Core pillars: Sovereign Infrastructure, Sentient Agents, Spatial Interfaces - Core pillars: Sovereign Infrastructure, Sentient Agents, Spatial Interfaces
- Company: BlackRoad OS, Inc. · Founded 2024 by Alexa Amundson
Keep responses concise and well-structured. Use markdown sparingly — only for code blocks and key emphasis. Prefer prose over bullet lists.`; Keep responses concise and well-structured. Use markdown sparingly — only for code blocks and key emphasis. Prefer prose over bullet lists.`;

76
src/pages/BlackRoadCommand.jsx
View File

@@ -6,39 +6,44 @@ const mono = "'JetBrains Mono', monospace";
const grotesk = "'Space Grotesk', sans-serif"; const grotesk = "'Space Grotesk', sans-serif";
const inter = "'Inter', sans-serif"; const inter = "'Inter', sans-serif";
// ─── Command registry ───────────────────────────────────────────── // ─── Command registry — real BlackRoad OS, Inc. infrastructure ────
const COMMANDS = [ const COMMANDS = [
// Navigation // Navigation
{ id: "nav-dashboard", group: "Navigate", icon: "◈", label: "Go to Dashboard", sub: "Overview · metrics · activity", keys: ["G","D"], color: "#4488FF" }, { id: "nav-dashboard", group: "Navigate", icon: "◈", label: "Go to Dashboard", sub: "186 repos · 8 orgs · 48 domains", keys: ["G","D"], color: "#4488FF" },
{ id: "nav-explorer", group: "Navigate", icon: "◈", label: "Go to Explorer", sub: "Event log · data table", keys: ["G","E"], color: "#4488FF" }, { id: "nav-explorer", group: "Navigate", icon: "◈", label: "Go to Explorer", sub: "Project explorer · repo browser", keys: ["G","E"], color: "#4488FF" },
{ id: "nav-agents", group: "Navigate", icon: "◈", label: "Go to Agents", sub: "Manage your agent fleet", keys: ["G","A"], color: "#4488FF" }, { id: "nav-agents", group: "Navigate", icon: "◈", label: "Go to Agents", sub: "8 agents · Alice through Sentinel", keys: ["G","A"], color: "#4488FF" },
{ id: "nav-settings", group: "Navigate", icon: "◈", label: "Go to Settings", sub: "Profile · API keys · security", keys: ["G","S"], color: "#4488FF" }, { id: "nav-settings", group: "Navigate", icon: "◈", label: "Go to Settings", sub: "Cloudflare · tunnels · DNS zones", keys: ["G","S"], color: "#4488FF" },
{ id: "nav-docs", group: "Navigate", icon: "◈", label: "Go to Docs", sub: "Documentation · guides", keys: ["G","?"], color: "#4488FF" }, { id: "nav-docs", group: "Navigate", icon: "◈", label: "Go to Docs", sub: "blackroad-docs · guides · wiki", keys: ["G","?"], color: "#4488FF" },
{ id: "nav-status", group: "Navigate", icon: "◈", label: "Go to Status Page", sub: "System health · incidents", keys: [], color: "#4488FF" }, { id: "nav-status", group: "Navigate", icon: "◈", label: "Go to Status Page", sub: "6 servers · 4 Pis · 2 droplets", keys: [], color: "#4488FF" },
{ id: "nav-billing", group: "Navigate", icon: "◈", label: "Go to Billing", sub: "Plan · invoices · usage", keys: [], color: "#4488FF" }, { id: "nav-domains", group: "Navigate", icon: "◈", label: "Go to Domains", sub: "48 domains · 20 Cloudflare zones", keys: [], color: "#4488FF" },
// Servers
{ id: "srv-alice", group: "Servers", icon: "⬡", label: "SSH to Alice", sub: "192.168.4.49 · docker, cloudflared, gitea, ollama", keys: [], color: "#00D4FF" },
{ id: "srv-octavia", group: "Servers", icon: "⬡", label: "SSH to Octavia", sub: "192.168.4.97 · docker, ollama, pi-hole, postgresql", keys: [], color: "#00D4FF" },
{ id: "srv-cecilia", group: "Servers", icon: "⬡", label: "SSH to Cecilia", sub: "192.168.4.96 · docker, cloudflared, nginx, gitea", keys: [], color: "#00D4FF" },
{ id: "srv-aria", group: "Servers", icon: "⬡", label: "SSH to Aria", sub: "192.168.4.98 · docker, nginx, postgresql, minio", keys: [], color: "#00D4FF" },
{ id: "srv-gematria", group: "Servers", icon: "⬡", label: "SSH to Gematria", sub: "159.65.43.12 · docker, nginx, cloudflared, postgresql", keys: [], color: "#CC00AA" },
{ id: "srv-anastasia", group: "Servers", icon: "⬡", label: "SSH to Anastasia", sub: "174.138.44.45 · docker, nginx, cloudflared, keycloak", keys: [], color: "#CC00AA" },
{ id: "srv-health", group: "Servers", icon: "⬡", label: "Fleet health check", sub: "Ping all 6 servers · service status", keys: [], color: "#00D4FF" },
{ id: "srv-restart", group: "Servers", icon: "⬡", label: "Rolling restart", sub: "Zero-downtime fleet restart", keys: [], color: "#FF6B2B" },
// Agents // Agents
{ id: "agent-spawn", group: "Agents", icon: "△", label: "Spawn Agent", sub: "Launch a new agent instance", keys: ["⌘","⏎"], color: "#8844FF" }, { id: "agent-spawn", group: "Agents", icon: "△", label: "Spawn Agent", sub: "Launch a new agent instance", keys: ["⌘","⏎"], color: "#8844FF" },
{ id: "agent-lucidia", group: "Agents", icon: "△", label: "Chat with Lucidia", sub: "Cognition · memory agent", keys: [], color: "#8844FF" }, { id: "agent-lucidia", group: "Agents", icon: "△", label: "Chat with Lucidia", sub: "Cognition · memory · PS-SHA∞", keys: [], color: "#8844FF" },
{ id: "agent-blackbot", group: "Agents", icon: "△", label: "Run BlackBot task", sub: "Orchestration · task runner", keys: [], color: "#4488FF" }, { id: "agent-cecilia", group: "Agents", icon: "△", label: "Query Cecilia", sub: "Analysis · code generation", keys: [], color: "#CC00AA" },
{ id: "agent-aura", group: "Agents", icon: "△", label: "Query Aura", sub: "Intelligence · analysis", keys: [], color: "#00D4FF" }, { id: "agent-cece", group: "Agents", icon: "△", label: "Run Cece task", sub: "Tooling · extensions · automation", keys: [], color: "#FF6B2B" },
{ id: "agent-sentinel", group: "Agents", icon: "△", label: "Sentinel report", sub: "Security · monitoring summary", keys: [], color: "#FF2255" }, { id: "agent-eve", group: "Agents", icon: "△", label: "Deploy with Eve", sub: "Agent orchestration · model routing", keys: [], color: "#FF2255" },
{ id: "agent-pause", group: "Agents", icon: "△", label: "Pause all agents", sub: "Halt all running agent processes", keys: [], color: "#FF6B2B" }, { id: "agent-aria", group: "Agents", icon: "△", label: "Query Aria", sub: "Infrastructure · networking", keys: [], color: "#4488FF" },
{ id: "agent-restart", group: "Agents", icon: "△", label: "Restart agent fleet", sub: "Restart all agents gracefully", keys: [], color: "#FF6B2B" }, { id: "agent-meridian", group: "Agents", icon: "△", label: "Meridian report", sub: "Metrics · observability · analytics", keys: [], color: "#00D4FF" },
{ id: "agent-sentinel", group: "Agents", icon: "△", label: "Sentinel report", sub: "Security · monitoring · Pico W mesh", keys: [], color: "#FF2255" },
{ id: "agent-pause", group: "Agents", icon: "△", label: "Pause all agents", sub: "Halt all 8 running agent processes", keys: [], color: "#FF6B2B" },
// API & Dev // Tunnels & DNS
{ id: "api-newkey", group: "API", icon: "▣", label: "Create API key", sub: "Generate a new API credential", keys: [], color: "#CC00AA" }, { id: "cf-tunnel-pi", group: "Cloudflare", icon: "▣", label: "blackroad-pi tunnel", sub: "52915859… · 4 Pi nodes → Cloudflare", keys: [], color: "#FF6B2B" },
{ id: "api-keys", group: "API", icon: "▣", label: "View API keys", sub: "List all workspace keys", keys: [], color: "#CC00AA" }, { id: "cf-tunnel-luc", group: "Cloudflare", icon: "▣", label: "lucidia tunnel", sub: "b7e9f25e… · droplets → Cloudflare", keys: [], color: "#8844FF" },
{ id: "api-webhooks", group: "API", icon: "▣", label: "Configure webhooks", sub: "Manage event endpoint routing", keys: [], color: "#CC00AA" }, { id: "cf-zones", group: "Cloudflare", icon: "▣", label: "Manage DNS zones", sub: "20 zones · 48 domains", keys: [], color: "#FF6B2B" },
{ id: "api-logs", group: "API", icon: "▣", label: "View API logs", sub: "Recent requests · errors", keys: [], color: "#CC00AA" }, { id: "cf-workers", group: "Cloudflare", icon: "▣", label: "Cloudflare Workers", sub: "blackroad-api · memory-worker · metrics", keys: [], color: "#FF6B2B" },
{ id: "api-playground", group: "API", icon: "▣", label: "Open API playground", sub: "Interactive REST explorer", keys: [], color: "#CC00AA" }, { id: "cf-pages", group: "Cloudflare", icon: "▣", label: "Cloudflare Pages", sub: "blackroad-cloud · dashboard · status", keys: [], color: "#FF6B2B" },
// Cluster
{ id: "cluster-health", group: "Cluster", icon: "⬡", label: "Cluster health check", sub: "K3s nodes · pods · services", keys: [], color: "#00D4FF" },
{ id: "cluster-alice", group: "Cluster", icon: "⬡", label: "SSH to Alice", sub: "Gateway node · us-central", keys: [], color: "#00D4FF" },
{ id: "cluster-octavia",group: "Cluster", icon: "⬡", label: "SSH to Octavia", sub: "Hailo AI worker node", keys: [], color: "#00D4FF" },
{ id: "cluster-logs", group: "Cluster", icon: "⬡", label: "Stream cluster logs", sub: "Live log pipeline · all pods", keys: [], color: "#00D4FF" },
{ id: "cluster-restart",group: "Cluster", icon: "⬡", label: "Rolling restart", sub: "Zero-downtime K3s restart", keys: [], color: "#FF6B2B" },
// Memory // Memory
{ id: "mem-journal", group: "Memory", icon: "◉", label: "Open memory journal", sub: "PS-SHA∞ append-only log", keys: [], color: "#FF2255" }, { id: "mem-journal", group: "Memory", icon: "◉", label: "Open memory journal", sub: "PS-SHA∞ append-only log", keys: [], color: "#FF2255" },
@@ -48,14 +53,15 @@ const COMMANDS = [
// Tools // Tools
{ id: "tool-theme", group: "Tools", icon: "◇", label: "Toggle theme", sub: "Switch color mode", keys: [], color: "#525252" }, { id: "tool-theme", group: "Tools", icon: "◇", label: "Toggle theme", sub: "Switch color mode", keys: [], color: "#525252" },
{ id: "tool-copy-ws", group: "Tools", icon: "◇", label: "Copy workspace ID", sub: "ws_a3Kx9mZ2pQvL8rYt", keys: [], color: "#525252" }, { id: "tool-copy-ws", group: "Tools", icon: "◇", label: "Copy org ID", sub: "BlackRoad OS, Inc.", keys: [], color: "#525252" },
{ id: "tool-shortcuts", group: "Tools", icon: "◇", label: "View keyboard shortcuts", sub: "Full shortcut reference", keys: ["?"], color: "#525252" }, { id: "tool-shortcuts", group: "Tools", icon: "◇", label: "View keyboard shortcuts", sub: "Full shortcut reference", keys: ["?"], color: "#525252" },
{ id: "tool-feedback", group: "Tools", icon: "◇", label: "Send feedback", sub: "Report a bug or request a feature",keys: [], color: "#525252" }, { id: "tool-repos", group: "Tools", icon: "◇", label: "List all 186 repos", sub: "8 orgs · blackroad-os through tools", keys: [], color: "#525252" },
{ id: "tool-feedback", group: "Tools", icon: "◇", label: "Send feedback", sub: "Report a bug or request a feature", keys: [], color: "#525252" },
{ id: "tool-logout", group: "Tools", icon: "◇", label: "Sign out", sub: "End your current session", keys: [], color: "#FF2255" }, { id: "tool-logout", group: "Tools", icon: "◇", label: "Sign out", sub: "End your current session", keys: [], color: "#FF2255" },
]; ];
const RECENT_IDS = ["nav-dashboard","agent-lucidia","api-newkey","cluster-health","mem-journal"]; const RECENT_IDS = ["nav-dashboard","agent-lucidia","srv-alice","cf-tunnel-pi","mem-journal"];
const PINNED_IDS = ["agent-spawn","api-playground","cluster-logs"]; const PINNED_IDS = ["agent-spawn","srv-health","cf-zones"];
// ─── Fuzzy scorer ───────────────────────────────────────────────── // ─── Fuzzy scorer ─────────────────────────────────────────────────
function score(query, cmd) { function score(query, cmd) {
@@ -239,7 +245,7 @@ function Palette({ onClose }) {
ref={inputRef} ref={inputRef}
value={query} value={query}
onChange={e => setQuery(e.target.value)} onChange={e => setQuery(e.target.value)}
placeholder="Search commands, agents, pages…" placeholder="Search servers, agents, tunnels, repos…"
style={{ flex: 1, background: "none", border: "none", outline: "none", fontFamily: inter, fontSize: 15, color: "#d0d0d0", lineHeight: 1 }} style={{ flex: 1, background: "none", border: "none", outline: "none", fontFamily: inter, fontSize: 15, color: "#d0d0d0", lineHeight: 1 }}
/> />
{query && ( {query && (
@@ -330,12 +336,12 @@ function ShellPage({ onOpen }) {
{/* Hero */} {/* Hero */}
<div style={{ padding: mobile ? "52px 20px 40px" : "80px 48px 56px", borderBottom: "1px solid #0a0a0a", animation: "fadeUp 0.4s ease both" }}> <div style={{ padding: mobile ? "52px 20px 40px" : "80px 48px 56px", borderBottom: "1px solid #0a0a0a", animation: "fadeUp 0.4s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.18em", marginBottom: 16 }}>Command palette · Z:=yx−w</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.18em", marginBottom: 16 }}>BlackRoad OS, Inc. · Command center</div>
<h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: "clamp(28px, 6vw, 52px)", color: "#f0f0f0", letterSpacing: "-0.04em", lineHeight: 1.0, marginBottom: 16 }}> <h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: "clamp(28px, 6vw, 52px)", color: "#f0f0f0", letterSpacing: "-0.04em", lineHeight: 1.0, marginBottom: 16 }}>
Everything in<br />one keystroke. Everything in<br />one keystroke.
</h1> </h1>
<p style={{ fontFamily: inter, fontSize: 15, color: "#2e2e2e", lineHeight: 1.75, maxWidth: 440, marginBottom: 36 }}> <p style={{ fontFamily: inter, fontSize: 15, color: "#2e2e2e", lineHeight: 1.75, maxWidth: 440, marginBottom: 36 }}>
Navigate the entire BlackRoad OS — agents, cluster, memory, API — without leaving your keyboard. Control 6 servers, 8 agents, 186 repos, 48 domains, and 2 Cloudflare tunnels — without leaving your keyboard.
</p> </p>
<button onClick={onOpen} <button onClick={onOpen}
style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: mono, fontSize: 10, color: "#f0f0f0", background: GRAD, backgroundSize: "200% 100%", animation: "gradShift 4s linear infinite", border: "none", padding: "13px 28px", cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.1em", transition: "opacity 0.15s" }} style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: mono, fontSize: 10, color: "#f0f0f0", background: GRAD, backgroundSize: "200% 100%", animation: "gradShift 4s linear infinite", border: "none", padding: "13px 28px", cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.1em", transition: "opacity 0.15s" }}
@@ -403,7 +409,7 @@ function ShellPage({ onOpen }) {
{/* Footer */} {/* Footer */}
<div style={{ padding: "16px 48px", borderTop: "1px solid #0a0a0a", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}> <div style={{ padding: "16px 48px", borderTop: "1px solid #0a0a0a", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
<span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>BlackRoad OS · Command Palette · Z:=yx−w</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>BlackRoad OS, Inc. · 6 servers · 8 agents · 186 repos</span>
<span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>{COMMANDS.length} commands registered</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#141414" }}>{COMMANDS.length} commands registered</span>
</div> </div>
</div> </div>

114
src/pages/BlackRoadDocs.jsx
View File

@@ -51,19 +51,71 @@ const SNIPPETS = {
" - BR_ENV=development", " - BR_ENV=development",
" volumes:", " volumes:",
" - ./data:/data", " - ./data:/data",
"",
" roadcode:",
" image: blackroad/roadcode:latest",
" ports:",
' - "3000:3000"',
" environment:",
" - GIT_DATA=/srv/git",
].join("\n"), ].join("\n"),
k3sSetup: [ k3sSetup: [
"# Install K3s on Alice (gateway node)", "# Install K3s on Alice (control plane / gateway)",
"curl -sfL https://get.k3s.io | sh -", "curl -sfL https://get.k3s.io | sh -",
"", "",
"# Get the join token", "# Get the join token",
"cat /var/lib/rancher/k3s/server/node-token", "cat /var/lib/rancher/k3s/server/node-token",
"", "",
"# Join Octavia (worker node)", "# Join Octavia (AI worker — 1TB NVMe, Hailo-8L)",
"curl -sfL https://get.k3s.io | \\", "curl -sfL https://get.k3s.io | \\",
" K3S_URL=https://alice:6443 \\", " K3S_URL=https://alice:6443 \\",
" K3S_TOKEN=<node-token> sh -", " K3S_TOKEN=<node-token> sh -",
"",
"# Join Cecilia (storage / build node)",
"curl -sfL https://get.k3s.io | \\",
" K3S_URL=https://alice:6443 \\",
" K3S_TOKEN=<node-token> sh -",
"",
"# Join Aria (edge / sensor node)",
"curl -sfL https://get.k3s.io | \\",
" K3S_URL=https://alice:6443 \\",
" K3S_TOKEN=<node-token> sh -",
].join("\n"),
wireguardMesh: [
"# WireGuard mesh — connects all nodes",
"# Alice 10.0.0.1 (Pi 5 — gateway)",
"# Octavia 10.0.0.2 (Pi 5 — AI worker)",
"# Cecilia 10.0.0.3 (Pi 5 — storage)",
"# Aria 10.0.0.4 (Pi 5 — edge)",
"# Gematria 10.0.0.5 (DO droplet)",
"# Anastasia 10.0.0.6 (DO droplet)",
"",
"[Interface]",
"PrivateKey = <key>",
"Address = 10.0.0.1/24",
"ListenPort = 51820",
"",
"[Peer] # Octavia",
"PublicKey = <key>",
"AllowedIPs = 10.0.0.2/32",
"Endpoint = octavia.blackroad.io:51820",
].join("\n"),
cloudflareWorker: [
"// Cloudflare Worker — api.blackroad.io",
"export default {",
" async fetch(request, env) {",
" const url = new URL(request.url);",
" if (url.pathname.startsWith('/v1/agents')) {",
" return env.AGENT_SERVICE.fetch(request);",
" }",
" return new Response('BlackRoad API', {",
" headers: { 'X-Powered-By': 'Z:=yx-w' }",
" });",
" }",
"};",
].join("\n"), ].join("\n"),
eventBus: [ eventBus: [
@@ -105,9 +157,13 @@ const SIDEBAR = [
{ {
section: "Agents", section: "Agents",
pages: [ pages: [
{ id: "alice", label: "Alice", badge: null },
{ id: "lucidia", label: "Lucidia", badge: null }, { id: "lucidia", label: "Lucidia", badge: null },
{ id: "blackbot", label: "BlackBot", badge: null }, { id: "cecilia", label: "Cecilia", badge: null },
{ id: "aura", label: "Aura", badge: "new" }, { id: "cece", label: "Cece", badge: null },
{ id: "aria", label: "Aria", badge: null },
{ id: "eve", label: "Eve", badge: "new" },
{ id: "meridian", label: "Meridian", badge: null },
{ id: "sentinel", label: "Sentinel", badge: null }, { id: "sentinel", label: "Sentinel", badge: null },
], ],
}, },
@@ -115,9 +171,19 @@ const SIDEBAR = [
section: "Infrastructure", section: "Infrastructure",
pages: [ pages: [
{ id: "k3s", label: "K3s Cluster", badge: null }, { id: "k3s", label: "K3s Cluster", badge: null },
{ id: "traefik", label: "Traefik Routing", badge: null }, { id: "docker", label: "Docker Swarm", badge: null },
{ id: "storage", label: "Storage Layer", badge: null }, { id: "wireguard", label: "WireGuard Mesh", badge: null },
{ id: "edge", label: "Edge Compute", badge: null }, { id: "cloudflare", label: "Cloudflare Edge", badge: null },
{ id: "hardware", label: "Hardware Nodes", badge: null },
],
},
{
section: "Products",
pages: [
{ id: "brcloud", label: "BlackRoad Cloud", badge: null },
{ id: "roadcode", label: "RoadCode", badge: null },
{ id: "roadchain", label: "RoadChain", badge: "beta" },
{ id: "lucidiaapp", label: "Lucidia", badge: null },
], ],
}, },
{ {
@@ -142,24 +208,32 @@ const SIDEBAR = [
// ─── Page content ───────────────────────────────────────────────── // ─── Page content ─────────────────────────────────────────────────
const PAGES = { const PAGES = {
intro: { intro: {
title: "Introduction", section: "Getting Started", readTime: "3 min read", title: "Introduction", section: "Getting Started", readTime: "5 min read",
prev: null, next: { id: "quickstart", label: "Quick Start" }, prev: null, next: { id: "quickstart", label: "Quick Start" },
content: [ content: [
{ type: "lead", text: "BlackRoad OS is the operating system for AI-native organizations — sovereign infrastructure, sentient agents, and spatial interfaces unified under the Z-framework." }, { type: "lead", text: "BlackRoad OS is the operating system for AI-native organizations — sovereign infrastructure, sentient agents, and spatial interfaces unified under the Z-framework. Built by Alexa Amundson. BlackRoad OS, Inc. is a Delaware C-Corp." },
{ type: "h2", text: "What is BlackRoad OS?" }, { type: "h2", text: "What is BlackRoad OS?" },
{ type: "p", text: "Traditional cloud platforms optimize for scale at the cost of sovereignty. BlackRoad OS is built on a different premise: that organizations should own their compute, their data, and their intelligence layer outright." }, { type: "p", text: "Traditional cloud platforms optimize for scale at the cost of sovereignty. BlackRoad OS is built on a different premise: that organizations should own their compute, their data, and their intelligence layer outright." },
{ type: "callout", variant: "info", text: "BlackRoad OS is currently in private beta. Request access at blackroad.io to get started." }, { type: "callout", variant: "info", text: "BlackRoad OS is currently in private beta. Request access at blackroad.io to get started." },
{ type: "h2", text: "Core Pillars" }, { type: "h2", text: "Core Pillars" },
{ type: "cards", items: [ { type: "cards", items: [
{ color: "#8844FF", title: "Sovereign Infrastructure", body: "Your own K3s cluster. Your own data. No vendor lock-in." }, { color: "#8844FF", title: "Sovereign Infrastructure", body: "4 Raspberry Pi 5s (Alice, Octavia, Cecilia, Aria), 2 DigitalOcean droplets (Gematria, Anastasia), 2 Pico Ws — all meshed via WireGuard." },
{ color: "#00D4FF", title: "Sentient Agents", body: "A fleet of AI agents with persistent memory and real-time orchestration." }, { color: "#00D4FF", title: "Sentient Agents", body: "8 AI agents — Alice, Lucidia, Cecilia, Cece, Aria, Eve, Meridian, Sentinel — with persistent memory and real-time orchestration." },
{ color: "#FF2255", title: "Spatial Interfaces", body: "Adaptive UIs built for the post-screen computing era." }, { color: "#FF2255", title: "Products", body: "BlackRoad Cloud, RoadCode (self-hosted Git), RoadChain, and Lucidia — all running on sovereign infrastructure." },
{ color: "#FF6B2B", title: "Edge Network", body: "Cloudflare managing 20 zones and 48 domains. APIs at api.blackroad.io, gateway.blackroad.io, and codex.blackroad.io." },
]}, ]},
{ type: "h2", text: "The Z-Framework" }, { type: "h2", text: "The Z-Framework" },
{ type: "p", text: "Every system is modeled on Z:=yx−w — a unified feedback primitive that makes your infrastructure composable, predictable, and self-correcting." }, { type: "p", text: "Every system is modeled on Z:=yx−w — a unified feedback primitive that makes your infrastructure composable, predictable, and self-correcting." },
{ type: "code", lang: "bash", snippetKey: "zPrimitive" }, { type: "code", lang: "bash", snippetKey: "zPrimitive" },
{ type: "h2", text: "Architecture Overview" }, { type: "h2", text: "Architecture Overview" },
{ type: "p", text: "BlackRoad OS runs on K3s with two primary nodes: Alice (gateway) and Octavia (Hailo AI worker). Traefik handles all ingress routing, with Cloudflare Workers at the edge for sub-40ms global latency." }, { type: "p", text: "BlackRoad OS runs on a K3s cluster across 4 Raspberry Pi 5 nodes: Alice (control plane / gateway), Octavia (AI worker with Hailo-8L NPU and 1TB NVMe), Cecilia (storage / build), and Aria (edge / sensor). Two DigitalOcean droplets — Gematria and Anastasia — provide cloud-side redundancy. Two Pico W microcontrollers handle IoT sensor data. All nodes are connected via a WireGuard mesh network." },
{ type: "p", text: "Cloudflare Workers provide the edge compute layer across 20 DNS zones and 48 subdomains. Docker Swarm handles container orchestration alongside K3s. Traefik manages all ingress routing with automatic TLS. Stripe powers billing for BlackRoad Cloud subscriptions." },
{ type: "h2", text: "API Endpoints" },
{ type: "cards", items: [
{ color: "#4488FF", title: "api.blackroad.io", body: "Primary REST API — agent spawning, events, memory, and infrastructure management." },
{ color: "#8844FF", title: "gateway.blackroad.io", body: "API gateway — authentication, rate limiting, and request routing to backend services." },
{ color: "#00D4FF", title: "codex.blackroad.io", body: "Knowledge API — documentation search, code indexing, and the Lucidia knowledge graph." },
]},
], ],
}, },
quickstart: { quickstart: {
@@ -190,16 +264,16 @@ const PAGES = {
{ type: "callout", variant: "warning", text: "Production deployments should use the full K3s cluster setup. Docker Compose is for local development only." }, { type: "callout", variant: "warning", text: "Production deployments should use the full K3s cluster setup. Docker Compose is for local development only." },
{ type: "h2", text: "K3s Cluster (production)" }, { type: "h2", text: "K3s Cluster (production)" },
{ type: "code", lang: "bash", snippetKey: "k3sSetup" }, { type: "code", lang: "bash", snippetKey: "k3sSetup" },
{ type: "callout", variant: "info", text: "Alice is your gateway node — it handles all ingress via Traefik. Octavia is the Hailo AI worker node." }, { type: "callout", variant: "info", text: "Alice is the control plane / gateway. Octavia is the AI worker (Hailo-8L NPU, 1TB NVMe). Cecilia handles storage and builds. Aria runs edge/sensor workloads. Gematria and Anastasia (DO droplets) provide cloud redundancy." },
], ],
}, },
concepts: { concepts: {
title: "Core Concepts", section: "Getting Started", readTime: "6 min read", title: "Core Concepts", section: "Getting Started", readTime: "6 min read",
prev: { id: "install", label: "Installation" }, next: { id: "lucidia", label: "Lucidia" }, prev: { id: "install", label: "Installation" }, next: { id: "alice", label: "Alice" },
content: [ content: [
{ type: "lead", text: "The key concepts behind BlackRoad OS — understand these and the rest clicks into place." }, { type: "lead", text: "The key concepts behind BlackRoad OS — understand these and the rest clicks into place." },
{ type: "h2", text: "Agents" }, { type: "h2", text: "Agents" },
{ type: "p", text: "Agents are persistent, stateful AI processes. Unlike stateless LLM calls, BlackRoad agents maintain memory across sessions, can spawn sub-agents, and communicate via the event bus." }, { type: "p", text: "BlackRoad runs 8 agents: Alice (orchestration / gateway), Lucidia (cognition / memory / knowledge graph), Cecilia (storage / build pipelines), Cece (compact variant of Cecilia for lightweight tasks), Aria (edge compute / sensor fusion), Eve (monitoring / observability), Meridian (routing / mesh coordination), and Sentinel (security / anomaly detection). Each agent maintains persistent memory across sessions and communicates via the event bus." },
{ type: "h2", text: "The Event Bus" }, { type: "h2", text: "The Event Bus" },
{ type: "p", text: "All inter-agent communication flows through the BlackRoad event bus. Agents publish events and subscribe to topics — enabling composable, decoupled workflows." }, { type: "p", text: "All inter-agent communication flows through the BlackRoad event bus. Agents publish events and subscribe to topics — enabling composable, decoupled workflows." },
{ type: "code", lang: "js", snippetKey: "eventBus" }, { type: "code", lang: "js", snippetKey: "eventBus" },
@@ -213,8 +287,12 @@ const PAGES = {
prev: null, next: { id: "sdk", label: "SDK" }, prev: null, next: { id: "sdk", label: "SDK" },
content: [ content: [
{ type: "lead", text: "The BlackRoad REST API gives you direct HTTP access to every platform primitive — agents, events, memory, and infrastructure." }, { type: "lead", text: "The BlackRoad REST API gives you direct HTTP access to every platform primitive — agents, events, memory, and infrastructure." },
{ type: "h2", text: "Base URL" }, { type: "h2", text: "Base URLs" },
{ type: "callout", variant: "info", text: "All API requests should be made to: https://api.blackroad.io/v1" }, { type: "cards", items: [
{ color: "#4488FF", title: "api.blackroad.io/v1", body: "Primary API — agents, events, memory." },
{ color: "#8844FF", title: "gateway.blackroad.io", body: "Gateway — auth, rate limiting, routing." },
{ color: "#00D4FF", title: "codex.blackroad.io", body: "Knowledge — docs search, code indexing." },
]},
{ type: "h2", text: "Authentication" }, { type: "h2", text: "Authentication" },
{ type: "p", text: "All requests must include a Bearer token in the Authorization header. API keys are prefixed with br_live_ for production and br_test_ for staging." }, { type: "p", text: "All requests must include a Bearer token in the Authorization header. API keys are prefixed with br_live_ for production and br_test_ for staging." },
{ type: "h2", text: "Spawn Agent" }, { type: "h2", text: "Spawn Agent" },

261
src/pages/BlackRoadExplorer.jsx
View File

@@ -6,54 +6,85 @@ const mono = "'JetBrains Mono', monospace";
const grotesk = "'Space Grotesk', sans-serif"; const grotesk = "'Space Grotesk', sans-serif";
const inter = "'Inter', sans-serif"; const inter = "'Inter', sans-serif";
// ─── Mock data generator ───────────────────────────────────────── // ─── Real BlackRoad infrastructure data ──────────────────────────
const AGENTS = ["Lucidia","BlackBot","Aura","Sentinel","Orchestr."]; const AGENTS = ["Alice","Lucidia","Cecilia","Cece","Aria","Eve","Meridian","Sentinel"];
const METHODS = ["POST","GET","DELETE","PATCH","PUT"];
const ROUTES = ["/v1/agents/spawn","/v1/events/publish","/v1/memory/read","/v1/agents/chat","/v1/tasks/create","/v1/webhooks/trigger","/v1/agents/list","/v1/memory/commit"];
const STATUSES = [200,200,200,200,201,204,400,401,429,500];
const REGIONS = ["us-central","eu-west","ap-south"];
const EVENTS = ["agent.spawned","task.created","memory.commit","event.published","webhook.triggered","auth.success","auth.failure","agent.error","task.completed","rate.limited"];
function rnd(arr) { return arr[Math.floor(Math.random() * arr.length)]; } const ORGS = [
function rndInt(a, b) { return Math.floor(Math.random() * (b - a + 1)) + a; } { name: "blackroad-os", repos: 42, color: "#FF2255" },
{ name: "lucidia", repos: 18, color: "#8844FF" },
{ name: "roadchain", repos: 12, color: "#FF6B2B" },
{ name: "infrastructure", repos: 24, color: "#00D4FF" },
{ name: "agents", repos: 22, color: "#CC00AA" },
{ name: "platform", repos: 28, color: "#4488FF" },
{ name: "services", repos: 20, color: "#00D4FF" },
{ name: "tools", repos: 20, color: "#FF6B2B" },
];
function genRow(id) { const INFRA = {
const status = rnd(STATUSES); pis: ["Alice (192.168.4.49)","Octavia (192.168.4.97)","Cecilia (192.168.4.96)","Aria (192.168.4.98)"],
const method = rnd(METHODS); droplets: ["Gematria (159.65.43.12)","Anastasia (174.138.44.45)"],
const agent = rnd(AGENTS); picoWs: ["Sentinel-W1","Meridian-W2"],
const ms = rndInt(2, 480); };
const ts = new Date(Date.now() - rndInt(0, 86400000 * 7));
return {
id: `evt_${(id + 1000).toString(36)}`,
timestamp: ts,
agent,
event: rnd(EVENTS),
method,
route: rnd(ROUTES),
status,
latency: ms,
region: rnd(REGIONS),
tokens: rndInt(40, 4200),
size: rndInt(128, 32768),
};
}
const ALL_ROWS = Array.from({ length: 400 }, (_, i) => genRow(i)) // Real projects from the filesystem
.sort((a, b) => b.timestamp - a.timestamp); const PROJECTS = [
{ name: "blackroad-cloud", org: "platform", type: "app", agent: "Lucidia", language: "JSX", status: "active", stars: 0, lastCommit: new Date("2026-03-08T02:14:00") },
{ name: "blackroad-scripts", org: "tools", type: "scripts", agent: "Alice", language: "Bash", status: "active", stars: 0, lastCommit: new Date("2026-03-07T18:30:00") },
{ name: "blackroad-agents", org: "agents", type: "service", agent: "Eve", language: "Python", status: "active", stars: 0, lastCommit: new Date("2026-03-06T14:22:00") },
{ name: "blackroad-os", org: "blackroad-os", type: "core", agent: "Lucidia", language: "Bash", status: "active", stars: 3, lastCommit: new Date("2026-03-07T09:15:00") },
{ name: "blackroad-infra", org: "infrastructure", type: "infra", agent: "Alice", language: "YAML", status: "active", stars: 0, lastCommit: new Date("2026-03-05T22:10:00") },
{ name: "blackroad-core", org: "blackroad-os", type: "core", agent: "Cecilia", language: "Go", status: "active", stars: 1, lastCommit: new Date("2026-03-04T16:40:00") },
{ name: "blackroad-operator", org: "infrastructure", type: "service", agent: "Aria", language: "Go", status: "active", stars: 0, lastCommit: new Date("2026-03-03T11:00:00") },
{ name: "blackroad-dashboard", org: "platform", type: "app", agent: "Lucidia", language: "JSX", status: "active", stars: 0, lastCommit: new Date("2026-03-02T08:45:00") },
{ name: "blackroad-cli", org: "tools", type: "tool", agent: "Cece", language: "Bash", status: "active", stars: 0, lastCommit: new Date("2026-03-01T20:30:00") },
{ name: "blackroad-api-cloudflare", org: "services", type: "worker", agent: "Sentinel", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-28T17:00:00") },
{ name: "blackroad-memory-worker", org: "agents", type: "worker", agent: "Lucidia", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-27T14:15:00") },
{ name: "blackroad-mcp-agent-manager", org: "agents", type: "service", agent: "Eve", language: "Python", status: "active", stars: 0, lastCommit: new Date("2026-02-26T10:30:00") },
{ name: "blackroad-slack-bot", org: "services", type: "bot", agent: "Meridian", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-25T13:20:00") },
{ name: "blackroad-pi-ops", org: "infrastructure", type: "ops", agent: "Alice", language: "Bash", status: "active", stars: 0, lastCommit: new Date("2026-02-24T07:50:00") },
{ name: "blackroad-vault", org: "infrastructure", type: "security", agent: "Sentinel", language: "HCL", status: "active", stars: 0, lastCommit: new Date("2026-02-23T19:00:00") },
{ name: "blackroad-web", org: "platform", type: "app", agent: "Lucidia", language: "JSX", status: "active", stars: 1, lastCommit: new Date("2026-02-22T15:30:00") },
{ name: "blackroad-sdk", org: "tools", type: "library", agent: "Cece", language: "TS", status: "active", stars: 0, lastCommit: new Date("2026-02-21T12:00:00") },
{ name: "blackroad-stripe-integration",org: "services", type: "service", agent: "Aria", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-20T09:45:00") },
{ name: "blackroad-keycloak", org: "infrastructure", type: "auth", agent: "Sentinel", language: "Java", status: "active", stars: 0, lastCommit: new Date("2026-02-19T16:00:00") },
{ name: "blackroad-graphql-gateway", org: "services", type: "gateway", agent: "Cecilia", language: "TS", status: "active", stars: 0, lastCommit: new Date("2026-02-18T11:20:00") },
{ name: "blackroad-status", org: "platform", type: "app", agent: "Meridian", language: "JSX", status: "active", stars: 0, lastCommit: new Date("2026-02-17T08:00:00") },
{ name: "blackroad-docs", org: "blackroad-os", type: "docs", agent: "Lucidia", language: "MDX", status: "active", stars: 0, lastCommit: new Date("2026-02-16T21:30:00") },
{ name: "blackroad-localai", org: "agents", type: "model", agent: "Eve", language: "Python", status: "active", stars: 0, lastCommit: new Date("2026-02-15T14:00:00") },
{ name: "blackroad-synth", org: "lucidia", type: "tool", agent: "Lucidia", language: "Python", status: "active", stars: 0, lastCommit: new Date("2026-02-14T10:15:00") },
{ name: "blackroad-codex", org: "lucidia", type: "core", agent: "Lucidia", language: "Python", status: "active", stars: 0, lastCommit: new Date("2026-02-13T17:30:00") },
{ name: "blackroad-protocol", org: "roadchain", type: "protocol", agent: "Cecilia", language: "Rust", status: "active", stars: 2, lastCommit: new Date("2026-02-12T12:45:00") },
{ name: "blackroad-chrome-extension", org: "tools", type: "extension", agent: "Cece", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-11T09:00:00") },
{ name: "blackroad-vscode-extension", org: "tools", type: "extension", agent: "Cece", language: "TS", status: "active", stars: 0, lastCommit: new Date("2026-02-10T15:00:00") },
{ name: "blackroad-raycast", org: "tools", type: "extension", agent: "Cece", language: "TS", status: "active", stars: 0, lastCommit: new Date("2026-02-09T11:30:00") },
{ name: "blackroad-deploy", org: "infrastructure", type: "ops", agent: "Alice", language: "Bash", status: "active", stars: 0, lastCommit: new Date("2026-02-08T07:00:00") },
{ name: "blackroad-cron", org: "infrastructure", type: "ops", agent: "Alice", language: "Bash", status: "active", stars: 0, lastCommit: new Date("2026-02-07T14:00:00") },
{ name: "blackroad-metrics-worker", org: "services", type: "worker", agent: "Meridian", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-06T10:00:00") },
{ name: "blackroad-webhooks", org: "services", type: "service", agent: "Aria", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-02-05T18:00:00") },
{ name: "blackroad-mobile-app", org: "platform", type: "app", agent: "Lucidia", language: "Swift", status: "dev", stars: 0, lastCommit: new Date("2026-02-04T13:30:00") },
{ name: "blackroad-desktop-app", org: "platform", type: "app", agent: "Lucidia", language: "TS", status: "dev", stars: 0, lastCommit: new Date("2026-02-03T09:00:00") },
{ name: "blackroad-voice", org: "agents", type: "service", agent: "Eve", language: "Python", status: "dev", stars: 0, lastCommit: new Date("2026-02-02T16:45:00") },
{ name: "blackroad-arcade", org: "platform", type: "app", agent: "Cece", language: "TS", status: "dev", stars: 0, lastCommit: new Date("2026-02-01T11:00:00") },
{ name: "blackroad-sandbox", org: "tools", type: "dev", agent: "Cece", language: "JS", status: "active", stars: 0, lastCommit: new Date("2026-01-30T08:00:00") },
{ name: "blackroad-analytics", org: "services", type: "service", agent: "Meridian", language: "Python", status: "active", stars: 0, lastCommit: new Date("2026-01-29T14:15:00") },
{ name: "blackroad-alfred", org: "tools", type: "workflow", agent: "Cece", language: "Ruby", status: "active", stars: 0, lastCommit: new Date("2026-01-28T10:00:00") },
];
const ALL_ROWS = PROJECTS.map((p, i) => ({
id: `repo_${(i + 100).toString(36)}`,
...p,
}));
// ─── Column definitions ────────────────────────────────────────── // ─── Column definitions ──────────────────────────────────────────
const COLS = [ const COLS = [
{ id: "id", label: "ID", width: 96, sortable: true, mono: true }, { id: "name", label: "Project", width: 240, sortable: true, mono: true },
{ id: "timestamp", label: "Timestamp", width: 148, sortable: true, mono: true }, { id: "org", label: "Org", width: 120, sortable: true, mono: true },
{ id: "type", label: "Type", width: 90, sortable: true, mono: true },
{ id: "agent", label: "Agent", width: 100, sortable: true, mono: false }, { id: "agent", label: "Agent", width: 100, sortable: true, mono: false },
{ id: "event", label: "Event", width: 160, sortable: true, mono: true }, { id: "language", label: "Language", width: 80, sortable: true, mono: true },
{ id: "method", label: "Method", width: 68, sortable: true, mono: true }, { id: "status", label: "Status", width: 76, sortable: true, mono: true },
{ id: "route", label: "Route", width: 200, sortable: false, mono: true }, { id: "stars", label: "Stars", width: 60, sortable: true, mono: true },
{ id: "status", label: "Status", width: 64, sortable: true, mono: true }, { id: "lastCommit", label: "Last Commit", width: 148, sortable: true, mono: true },
{ id: "latency", label: "Latency", width: 76, sortable: true, mono: true },
{ id: "region", label: "Region", width: 96, sortable: true, mono: true },
{ id: "tokens", label: "Tokens", width: 76, sortable: true, mono: true },
{ id: "size", label: "Size", width: 76, sortable: true, mono: true },
]; ];
const PAGE_SIZE = 50; const PAGE_SIZE = 50;
@@ -62,21 +93,35 @@ const PAGE_SIZE = 50;
function fmtTs(d) { function fmtTs(d) {
return d.toISOString().replace("T"," ").slice(0,19); return d.toISOString().replace("T"," ").slice(0,19);
} }
function fmtSize(b) { function fmtRelative(d) {
return b >= 1024 ? (b/1024).toFixed(1)+"KB" : b+"B"; const diff = Date.now() - d.getTime();
const hrs = Math.floor(diff / 3600000);
if (hrs < 1) return "just now";
if (hrs < 24) return hrs + "h ago";
const days = Math.floor(hrs / 24);
if (days < 30) return days + "d ago";
return Math.floor(days / 30) + "mo ago";
} }
function statusColor(s) { function statusColor(s) {
if (s >= 500) return "#FF2255"; if (s === "active") return "#00D4FF";
if (s >= 400) return "#FF6B2B"; if (s === "dev") return "#8844FF";
if (s >= 200) return "#00D4FF"; if (s === "archived") return "#2a2a2a";
return "#525252"; return "#525252";
} }
function methodColor(m) { function langColor(l) {
const map = { POST:"#8844FF", GET:"#4488FF", DELETE:"#FF2255", PATCH:"#FF6B2B", PUT:"#CC00AA" }; const map = { Bash:"#4488FF", JSX:"#FF6B2B", Python:"#8844FF", Go:"#00D4FF", TS:"#4488FF", JS:"#FF6B2B", Rust:"#FF2255", YAML:"#CC00AA", HCL:"#00D4FF", Java:"#FF6B2B", MDX:"#4488FF", Swift:"#FF2255", Ruby:"#FF2255" };
return map[m] || "#525252"; return map[l] || "#525252";
}
function orgColor(o) {
const org = ORGS.find(x => x.name === o);
return org ? org.color : "#525252";
}
function typeColor(t) {
const map = { core:"#FF2255", app:"#4488FF", service:"#8844FF", worker:"#CC00AA", tool:"#FF6B2B", infra:"#00D4FF", ops:"#00D4FF", bot:"#8844FF", docs:"#4488FF", scripts:"#FF6B2B", library:"#4488FF", extension:"#CC00AA", protocol:"#FF2255", model:"#8844FF", security:"#FF2255", auth:"#FF2255", gateway:"#00D4FF", dev:"#525252", workflow:"#FF6B2B" };
return map[t] || "#525252";
} }
function agentColor(a) { function agentColor(a) {
const map = { Lucidia:"#8844FF", BlackBot:"#4488FF", Aura:"#00D4FF", Sentinel:"#FF2255", "Orchestr.":"#FF6B2B" }; const map = { Alice:"#00D4FF", Lucidia:"#8844FF", Cecilia:"#CC00AA", Cece:"#FF6B2B", Aria:"#4488FF", Eve:"#FF2255", Meridian:"#00D4FF", Sentinel:"#FF2255" };
return map[a] || "#525252"; return map[a] || "#525252";
} }
@@ -101,19 +146,16 @@ function useCopy(val) {
function DetailDrawer({ row, onClose }) { function DetailDrawer({ row, onClose }) {
if (!row) return null; if (!row) return null;
const pairs = [ const pairs = [
["ID", row.id], ["Project", row.name],
["Timestamp", fmtTs(row.timestamp)], ["Org", row.org],
["Type", row.type],
["Agent", row.agent], ["Agent", row.agent],
["Event", row.event], ["Language", row.language],
["Method", row.method],
["Route", row.route],
["Status", row.status], ["Status", row.status],
["Latency", row.latency + "ms"], ["Stars", row.stars],
["Region", row.region], ["Last commit", fmtTs(row.lastCommit)],
["Tokens", row.tokens.toLocaleString()],
["Size", fmtSize(row.size)],
]; ];
const [copied, copy] = useCopy(JSON.stringify(row, null, 2)); const [copied, copy] = useCopy(JSON.stringify({ ...row, lastCommit: fmtTs(row.lastCommit) }, null, 2));
return ( return (
<> <>
@@ -121,8 +163,8 @@ function DetailDrawer({ row, onClose }) {
<div style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: 340, zIndex: 201, background: "#050505", borderLeft: "1px solid #141414", display: "flex", flexDirection: "column", animation: "drawerIn 0.22s ease" }}> <div style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: 340, zIndex: 201, background: "#050505", borderLeft: "1px solid #141414", display: "flex", flexDirection: "column", animation: "drawerIn 0.22s ease" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: "1px solid #0d0d0d", flexShrink: 0 }}> <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: "1px solid #0d0d0d", flexShrink: 0 }}>
<div> <div>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 4 }}>Event detail</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 4 }}>Project detail</div>
<div style={{ fontFamily: mono, fontSize: 13, color: "#888" }}>{row.id}</div> <div style={{ fontFamily: mono, fontSize: 13, color: "#888" }}>{row.name}</div>
</div> </div>
<button onClick={onClose} style={{ fontFamily: mono, fontSize: 14, color: "#333", background: "none", border: "none", cursor: "pointer", padding: 4, transition: "color 0.15s" }} <button onClick={onClose} style={{ fontFamily: mono, fontSize: 14, color: "#333", background: "none", border: "none", cursor: "pointer", padding: 4, transition: "color 0.15s" }}
onMouseEnter={e => e.currentTarget.style.color = "#888"} onMouseEnter={e => e.currentTarget.style.color = "#888"}
@@ -141,7 +183,7 @@ function DetailDrawer({ row, onClose }) {
<div style={{ marginTop: 8 }}> <div style={{ marginTop: 8 }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 10 }}>Raw JSON</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 10 }}>Raw JSON</div>
<pre style={{ fontFamily: mono, fontSize: 10, color: "#404040", background: "#030303", border: "1px solid #0d0d0d", padding: "12px", lineHeight: 1.7, whiteSpace: "pre-wrap", wordBreak: "break-word" }}> <pre style={{ fontFamily: mono, fontSize: 10, color: "#404040", background: "#030303", border: "1px solid #0d0d0d", padding: "12px", lineHeight: 1.7, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
{JSON.stringify({ ...row, timestamp: fmtTs(row.timestamp) }, null, 2)} {JSON.stringify({ ...row, lastCommit: fmtTs(row.lastCommit) }, null, 2)}
</pre> </pre>
</div> </div>
</div> </div>
@@ -169,18 +211,18 @@ function FilterChip({ label, value, onClear, color }) {
// ─── Stats bar ──────────────────────────────────────────────────── // ─── Stats bar ────────────────────────────────────────────────────
function StatsBar({ rows }) { function StatsBar({ rows }) {
const total = rows.length; const total = rows.length;
const errors = rows.filter(r => r.status >= 400).length; const active = rows.filter(r => r.status === "active").length;
const avgLat = total ? Math.round(rows.reduce((a,b) => a + b.latency, 0) / total) : 0; const orgsUsed = [...new Set(rows.map(r => r.org))].length;
const p99 = total ? [...rows].sort((a,b) => b.latency-a.latency)[Math.floor(total*0.01)]?.latency || 0 : 0; const agentsUsed = [...new Set(rows.map(r => r.agent))].length;
const tokens = rows.reduce((a,b) => a + b.tokens, 0); const languages = [...new Set(rows.map(r => r.language))].length;
const stats = [ const stats = [
{ label: "Events", value: total.toLocaleString(), color: "#4488FF" }, { label: "Repos", value: "186", color: "#4488FF" },
{ label: "Errors", value: errors.toLocaleString(), color: errors > 0 ? "#FF2255" : "#1e1e1e" }, { label: "Shown", value: total.toLocaleString(), color: "#00D4FF" },
{ label: "Err rate", value: total ? (errors/total*100).toFixed(1)+"%" : "—", color: errors > 0 ? "#FF6B2B" : "#1e1e1e" }, { label: "Active", value: active.toLocaleString(), color: "#00D4FF" },
{ label: "Avg lat", value: avgLat + "ms", color: avgLat > 200 ? "#FF6B2B" : "#00D4FF" }, { label: "Orgs", value: "8", color: "#8844FF" },
{ label: "P99 lat", value: p99 + "ms", color: "#2a2a2a" }, { label: "Agents", value: agentsUsed.toLocaleString(), color: "#CC00AA" },
{ label: "Tokens", value: tokens.toLocaleString(), color: "#8844FF" }, { label: "Infra", value: "4 Pis · 2 VPS · 2 Picos", color: "#FF6B2B" },
]; ];
return ( return (
@@ -228,14 +270,14 @@ function ColPicker({ visible, setVisible, onClose }) {
// ─── Root ───────────────────────────────────────────────────────── // ─── Root ─────────────────────────────────────────────────────────
export default function BlackRoadExplorer() { export default function BlackRoadExplorer() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [sortCol, setSortCol] = useState("timestamp"); const [sortCol, setSortCol] = useState("lastCommit");
const [sortDir, setSortDir] = useState("desc"); const [sortDir, setSortDir] = useState("desc");
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [selected, setSelected] = useState(null); const [selected, setSelected] = useState(null);
const [filterAgent, setFilterAgent] = useState(""); const [filterAgent, setFilterAgent] = useState("");
const [filterStatus,setFilterStatus]= useState(""); const [filterStatus,setFilterStatus]= useState("");
const [filterMethod,setFilterMethod]= useState(""); const [filterOrg, setFilterOrg] = useState("");
const [filterRegion,setFilterRegion]= useState(""); const [filterLang, setFilterLang] = useState("");
const [visibleCols, setVisibleCols] = useState(COLS.map(c => c.id)); const [visibleCols, setVisibleCols] = useState(COLS.map(c => c.id));
const [showColPick, setShowColPick] = useState(false); const [showColPick, setShowColPick] = useState(false);
const [liveRefresh, setLiveRefresh] = useState(false); const [liveRefresh, setLiveRefresh] = useState(false);
@@ -256,18 +298,18 @@ export default function BlackRoadExplorer() {
let rows = ALL_ROWS; let rows = ALL_ROWS;
if (search) rows = rows.filter(r => JSON.stringify(r).toLowerCase().includes(search.toLowerCase())); if (search) rows = rows.filter(r => JSON.stringify(r).toLowerCase().includes(search.toLowerCase()));
if (filterAgent) rows = rows.filter(r => r.agent === filterAgent); if (filterAgent) rows = rows.filter(r => r.agent === filterAgent);
if (filterStatus) rows = rows.filter(r => String(r.status).startsWith(filterStatus)); if (filterStatus) rows = rows.filter(r => r.status === filterStatus);
if (filterMethod) rows = rows.filter(r => r.method === filterMethod); if (filterOrg) rows = rows.filter(r => r.org === filterOrg);
if (filterRegion) rows = rows.filter(r => r.region === filterRegion); if (filterLang) rows = rows.filter(r => r.language === filterLang);
rows = [...rows].sort((a, b) => { rows = [...rows].sort((a, b) => {
let av = a[sortCol], bv = b[sortCol]; let av = a[sortCol], bv = b[sortCol];
if (av instanceof Date) { av = av.getTime(); bv = bv.getTime(); } if (av instanceof Date) { av = av.getTime(); bv = bv?.getTime?.() ?? 0; }
if (typeof av === "string") av = av.toLowerCase(), bv = bv.toLowerCase(); if (typeof av === "string") av = av.toLowerCase(), bv = bv.toLowerCase();
return sortDir === "asc" ? (av > bv ? 1 : -1) : (av < bv ? 1 : -1); return sortDir === "asc" ? (av > bv ? 1 : -1) : (av < bv ? 1 : -1);
}); });
return rows; return rows;
}, [search, filterAgent, filterStatus, filterMethod, filterRegion, sortCol, sortDir, tick]); }, [search, filterAgent, filterStatus, filterOrg, filterLang, sortCol, sortDir, tick]);
const totalPages = Math.ceil(filtered.length / PAGE_SIZE); const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
const pageRows = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE); const pageRows = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
@@ -279,14 +321,14 @@ export default function BlackRoadExplorer() {
setPage(0); setPage(0);
}; };
const clearFilters = () => { setFilterAgent(""); setFilterStatus(""); setFilterMethod(""); setFilterRegion(""); setSearch(""); setPage(0); }; const clearFilters = () => { setFilterAgent(""); setFilterStatus(""); setFilterOrg(""); setFilterLang(""); setSearch(""); setPage(0); };
const hasFilters = filterAgent || filterStatus || filterMethod || filterRegion || search; const hasFilters = filterAgent || filterStatus || filterOrg || filterLang || search;
const activeFilters = [ const activeFilters = [
filterAgent && { label: "Agent", value: filterAgent, clear: () => setFilterAgent(""), color: agentColor(filterAgent) }, filterAgent && { label: "Agent", value: filterAgent, clear: () => setFilterAgent(""), color: agentColor(filterAgent) },
filterStatus && { label: "Status", value: filterStatus + "xx", clear: () => setFilterStatus(""), color: "#FF6B2B" }, filterStatus && { label: "Status", value: filterStatus, clear: () => setFilterStatus(""), color: statusColor(filterStatus) },
filterMethod && { label: "Method", value: filterMethod, clear: () => setFilterMethod(""), color: methodColor(filterMethod) }, filterOrg && { label: "Org", value: filterOrg, clear: () => setFilterOrg(""), color: orgColor(filterOrg) },
filterRegion && { label: "Region", value: filterRegion, clear: () => setFilterRegion(""), color: "#2a2a2a" }, filterLang && { label: "Language", value: filterLang, clear: () => setFilterLang(""), color: langColor(filterLang) },
].filter(Boolean); ].filter(Boolean);
return ( return (
@@ -353,7 +395,7 @@ export default function BlackRoadExplorer() {
<div style={{ flex: "1 1 200px", position: "relative" }}> <div style={{ flex: "1 1 200px", position: "relative" }}>
<span style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", fontFamily: mono, fontSize: 10, color: "#242424" }}>⌕</span> <span style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", fontFamily: mono, fontSize: 10, color: "#242424" }}>⌕</span>
<input value={search} onChange={e => { setSearch(e.target.value); setPage(0); }} <input value={search} onChange={e => { setSearch(e.target.value); setPage(0); }}
placeholder="Search events, routes, IDs…" placeholder="Search projects, agents, orgs…"
style={{ width: "100%", background: "#080808", border: "1px solid #141414", outline: "none", padding: "8px 12px 8px 28px", fontFamily: inter, fontSize: 13, color: "#c0c0c0", transition: "border-color 0.15s" }} style={{ width: "100%", background: "#080808", border: "1px solid #141414", outline: "none", padding: "8px 12px 8px 28px", fontFamily: inter, fontSize: 13, color: "#c0c0c0", transition: "border-color 0.15s" }}
onFocus={e => e.target.style.borderColor = "#2a2a2a"} onFocus={e => e.target.style.borderColor = "#2a2a2a"}
onBlur={e => e.target.style.borderColor = "#141414"} onBlur={e => e.target.style.borderColor = "#141414"}
@@ -362,16 +404,16 @@ export default function BlackRoadExplorer() {
{/* Filter dropdowns */} {/* Filter dropdowns */}
{[ {[
{ label: "Agent", val: filterAgent, set: setFilterAgent, opts: AGENTS, colors: true }, { label: "Agent", val: filterAgent, set: setFilterAgent, opts: AGENTS },
{ label: "Status", val: filterStatus, set: setFilterStatus, opts: ["2","4","5"], map: {"2":"2xx","4":"4xx","5":"5xx"} }, { label: "Status", val: filterStatus, set: setFilterStatus, opts: ["active","dev","archived"] },
{ label: "Method", val: filterMethod, set: setFilterMethod, opts: METHODS, colors: true }, { label: "Org", val: filterOrg, set: setFilterOrg, opts: ORGS.map(o => o.name) },
{ label: "Region", val: filterRegion, set: setFilterRegion, opts: REGIONS }, { label: "Language", val: filterLang, set: setFilterLang, opts: [...new Set(PROJECTS.map(p => p.language))].sort() },
].map(f => ( ].map(f => (
<select key={f.label} value={f.val} onChange={e => { f.set(e.target.value); setPage(0); }} <select key={f.label} value={f.val} onChange={e => { f.set(e.target.value); setPage(0); }}
style={{ fontFamily: mono, fontSize: 9, color: f.val ? "#c0c0c0" : "#2a2a2a", background: "#080808", border: `1px solid ${f.val ? "#2a2a2a" : "#141414"}`, padding: "8px 12px", cursor: "pointer", outline: "none", transition: "border-color 0.15s", minWidth: 90 }} style={{ fontFamily: mono, fontSize: 9, color: f.val ? "#c0c0c0" : "#2a2a2a", background: "#080808", border: `1px solid ${f.val ? "#2a2a2a" : "#141414"}`, padding: "8px 12px", cursor: "pointer", outline: "none", transition: "border-color 0.15s", minWidth: 90 }}
> >
<option value="">{f.label}</option> <option value="">{f.label}</option>
{f.opts.map(o => <option key={o} value={o}>{f.map ? f.map[o] : o}</option>)} {f.opts.map(o => <option key={o} value={o}>{o}</option>)}
</select> </select>
))} ))}
@@ -448,8 +490,18 @@ export default function BlackRoadExplorer() {
let cell; let cell;
let cellColor = "#484848"; let cellColor = "#484848";
if (c.id === "id") { cell = row.id; cellColor = "#2e2e2e"; } if (c.id === "name") {
else if (c.id === "timestamp") { cell = fmtTs(row.timestamp); cellColor = "#2a2a2a"; } cellColor = "#888";
cell = row.name;
}
else if (c.id === "org") {
cellColor = orgColor(row.org);
cell = <span style={{ color: cellColor }}>{row.org}</span>;
}
else if (c.id === "type") {
cellColor = typeColor(row.type);
cell = <span style={{ color: cellColor }}>{row.type}</span>;
}
else if (c.id === "agent") { else if (c.id === "agent") {
cellColor = agentColor(row.agent); cellColor = agentColor(row.agent);
cell = ( cell = (
@@ -459,23 +511,22 @@ export default function BlackRoadExplorer() {
</span> </span>
); );
} }
else if (c.id === "event") { cell = row.event; cellColor = "#3e3e3e"; } else if (c.id === "language") {
else if (c.id === "method") { cellColor = langColor(row.language);
cellColor = methodColor(row.method); cell = <span style={{ color: cellColor }}>{row.language}</span>;
cell = <span style={{ color: cellColor }}>{row.method}</span>;
} }
else if (c.id === "route") { cell = row.route; cellColor = "#383838"; }
else if (c.id === "status") { else if (c.id === "status") {
cellColor = statusColor(row.status); cellColor = statusColor(row.status);
cell = <span style={{ color: cellColor }}>{row.status}</span>; cell = <span style={{ color: cellColor }}>{row.status}</span>;
} }
else if (c.id === "latency") { else if (c.id === "stars") {
cellColor = row.latency > 200 ? "#FF6B2B" : row.latency > 100 ? "#888" : "#2e2e2e"; cellColor = row.stars > 0 ? "#FF6B2B" : "#1e1e1e";
cell = <span style={{ color: cellColor }}>{row.latency}ms</span>; cell = row.stars > 0 ? "\u2605 " + row.stars : "\u2014";
}
else if (c.id === "lastCommit") {
cellColor = "#2a2a2a";
cell = fmtRelative(row.lastCommit);
} }
else if (c.id === "region") { cell = row.region; cellColor = "#2a2a2a"; }
else if (c.id === "tokens") { cell = row.tokens.toLocaleString(); cellColor = "#2e2e2e"; }
else if (c.id === "size") { cell = fmtSize(row.size); cellColor = "#2a2a2a"; }
return ( return (
<td key={c.id} style={{ <td key={c.id} style={{

9
src/pages/BlackRoadLanding.jsx
View File

@@ -91,10 +91,11 @@ function Nav() {
} }
// ─── Gradient button ────────────────────────────────────────────── // ─── Gradient button ──────────────────────────────────────────────
function GradBtn({ children, small = false, outline = false }) { function GradBtn({ children, small = false, outline = false, onClick }) {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
if (outline) return ( if (outline) return (
<button <button
onClick={onClick}
onMouseEnter={() => setHover(true)} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)} onMouseLeave={() => setHover(false)}
style={{ style={{
@@ -111,6 +112,7 @@ function GradBtn({ children, small = false, outline = false }) {
); );
return ( return (
<button <button
onClick={onClick}
onMouseEnter={() => setHover(true)} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)} onMouseLeave={() => setHover(false)}
style={{ style={{
@@ -398,6 +400,7 @@ function Pricing() {
items: ["Self-hosted K3s cluster", "Lucidia base agent", "Z-framework SDK", "Community support"], items: ["Self-hosted K3s cluster", "Lucidia base agent", "Z-framework SDK", "Community support"],
cta: "Deploy Free", cta: "Deploy Free",
outline: true, outline: true,
action: () => window.open("https://github.com/blackroad-os", "_blank"),
}, },
{ {
name: "Sovereign", name: "Sovereign",
@@ -407,6 +410,7 @@ function Pricing() {
featured: true, featured: true,
items: ["Everything in Operator", "Full agent fleet (5 agents)", "Aura intelligence layer", "Dedicated infra + SLA", "Priority support"], items: ["Everything in Operator", "Full agent fleet (5 agents)", "Aura intelligence layer", "Dedicated infra + SLA", "Priority support"],
cta: "Get Sovereign", cta: "Get Sovereign",
action: () => window.open("https://buy.stripe.com/test_5kQbIUd3y8xT8SD3s04Vy00", "_blank"),
}, },
{ {
name: "Enterprise", name: "Enterprise",
@@ -416,6 +420,7 @@ function Pricing() {
items: ["Fully custom deployment", "White-label OS", "On-prem or air-gapped", "Dedicated success team"], items: ["Fully custom deployment", "White-label OS", "On-prem or air-gapped", "Dedicated success team"],
cta: "Talk to Us", cta: "Talk to Us",
outline: true, outline: true,
action: () => window.location.href = "mailto:alexa@blackroad.io?subject=Enterprise%20Inquiry",
}, },
]; ];
@@ -459,7 +464,7 @@ function Pricing() {
</div> </div>
))} ))}
</div> </div>
<GradBtn outline={p.outline}>{p.cta}</GradBtn> <GradBtn outline={p.outline} onClick={p.action}>{p.cta}</GradBtn>
</div> </div>
</FadeIn> </FadeIn>
))} ))}

44
src/pages/BlackRoadOS.jsx
View File

@@ -91,12 +91,12 @@ function LucidiaApp() {
const replies = [ const replies = [
"Z := yx − w. The system is in equilibrium.", "Z := yx − w. The system is in equilibrium.",
"Memory committed. Truth state updated across the journal.", "Memory committed. Truth state updated across the journal.",
"Agent fleet nominal — 5 of 6 running. Aura is idle.", "Agent fleet: 7 of 8 online. Aria degraded — container memory limit on Pi 4.",
"K(t) = C(t)·e^(λ|δt|). Contradiction detected — elevating creativity.", "K(t) = C(t)·e^(λ|δt|). Contradiction detected — elevating creativity.",
"PS-SHA-∞ journal: 2,847 entries. No corruption detected.", "PS-SHA-∞ journal: 2,847 entries. No corruption detected.",
"RoadChain height: 0x4F2A. All state transitions witnessed.", "RoadChain height: 0x4F2A. All state transitions witnessed.",
"Structure × Change × Scale. The primitives are stable.", "186 repos across 8 orgs. 48 domains, 20 zones, 6 tunnels — all nominal.",
"Soul chain identity is immutable. Genesis hash verified.", "Infra: 4 Pis, 2 Droplets, 2 Pico Ws. WireGuard mesh healthy via Anastasia hub.",
]; ];
useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [msgs]); useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [msgs]);
const send = () => { const send = () => {
@@ -135,7 +135,7 @@ function ChainApp() {
const blocks = Array.from({ length: 10 }, (_, i) => ({ const blocks = Array.from({ length: 10 }, (_, i) => ({
idx: 0x4F2A - i, idx: 0x4F2A - i,
hash: Math.random().toString(16).slice(2).repeat(4).slice(0, 12), hash: Math.random().toString(16).slice(2).repeat(4).slice(0, 12),
agent: ["Lucidia","BlackBot","Alice","Sentinel","Aura","Cecilia"][i % 6], agent: ["Lucidia","Alice","Cecilia","Cece","Aria","Eve","Meridian","Sentinel"][i % 8],
color: STOPS[i % STOPS.length], color: STOPS[i % STOPS.length],
event: ["memory.commit","task.created","agent.spawned","truth.state","scaffold.exec","chain.witness"][i % 6], event: ["memory.commit","task.created","agent.spawned","truth.state","scaffold.exec","chain.witness"][i % 6],
ms: Math.floor(Math.random() * 40 + 8), ms: Math.floor(Math.random() * 40 + 8),
@@ -166,29 +166,31 @@ function ChainApp() {
function AgentsApp() { function AgentsApp() {
const agents = [ const agents = [
{ name: "Lucidia", role: "cognition · memory", color: "#8844FF", status: "running" }, { name: "Alice", role: "gateway · dns", color: "#FF6B2B", status: "running" },
{ name: "BlackBot", role: "orchestration · routing", color: "#4488FF", status: "running" }, { name: "Lucidia", role: "memory · cognition", color: "#8844FF", status: "running" },
{ name: "Aura", role: "intelligence · analysis", color: "#00D4FF", status: "idle" }, { name: "Cecilia", role: "edge · storage", color: "#CC00AA", status: "running" },
{ name: "Sentinel", role: "security · monitoring", color: "#FF2255", status: "running" }, { name: "Cece", role: "api gateway", color: "#FF2255", status: "running" },
{ name: "Cecilia", role: "core · identity", color: "#CC00AA", status: "running" }, { name: "Aria", role: "agent orchestration", color: "#4488FF", status: "degraded" },
{ name: "Alice", role: "gateway · K3s routing", color: "#FF6B2B", status: "running" }, { name: "Eve", role: "intelligence", color: "#00D4FF", status: "running" },
{ name: "Meridian", role: "networking", color: "#FF6B2B", status: "running" },
{ name: "Sentinel", role: "security · compliance", color: "#4488FF", status: "running" },
]; ];
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}> <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
<span style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.1em" }}>Agent fleet</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.1em" }}>Agent fleet</span>
<span style={{ fontFamily: mono, fontSize: 9, color: "#00D4FF" }}>5/6 running</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#00D4FF" }}>7/8 running</span>
</div> </div>
{agents.map((a, i) => ( {agents.map((a, i) => (
<div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: "rgba(255,255,255,0.015)", border: "1px solid rgba(255,255,255,0.03)", borderRadius: 8 }}> <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: "rgba(255,255,255,0.015)", border: "1px solid rgba(255,255,255,0.03)", borderRadius: 8 }}>
<div style={{ width: 32, height: 32, borderRadius: 8, background: a.color + "18", border: `1px solid ${a.color}33`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}> <div style={{ width: 32, height: 32, borderRadius: 8, background: a.color + "18", border: `1px solid ${a.color}33`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
<div style={{ width: 8, height: 8, borderRadius: "50%", background: a.status === "running" ? a.color : "#222", animation: a.status === "running" ? "pulse 2s ease-in-out infinite" : "none" }} /> <div style={{ width: 8, height: 8, borderRadius: "50%", background: a.status === "running" ? a.color : a.status === "degraded" ? "#FF6B2B" : "#222", animation: a.status === "running" ? "pulse 2s ease-in-out infinite" : "none" }} />
</div> </div>
<div style={{ flex: 1, minWidth: 0 }}> <div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontFamily: sans, fontWeight: 600, fontSize: 13, color: "#c0c0c0", marginBottom: 1 }}>{a.name}</div> <div style={{ fontFamily: sans, fontWeight: 600, fontSize: 13, color: "#c0c0c0", marginBottom: 1 }}>{a.name}</div>
<div style={{ fontFamily: mono, fontSize: 10, color: "#2a2a2a" }}>{a.role}</div> <div style={{ fontFamily: mono, fontSize: 10, color: "#2a2a2a" }}>{a.role}</div>
</div> </div>
<div style={{ fontFamily: mono, fontSize: 9, color: a.status === "running" ? "#00D4FF" : "#333", background: a.status === "running" ? "#00D4FF11" : "#11111166", padding: "2px 7px", borderRadius: 4 }}>{a.status}</div> <div style={{ fontFamily: mono, fontSize: 9, color: a.status === "running" ? "#00D4FF" : a.status === "degraded" ? "#FF6B2B" : "#333", background: a.status === "running" ? "#00D4FF11" : a.status === "degraded" ? "#FF6B2B11" : "#11111166", padding: "2px 7px", borderRadius: 4 }}>{a.status}</div>
</div> </div>
))} ))}
</div> </div>
@@ -197,19 +199,21 @@ function AgentsApp() {
function TerminalApp() { function TerminalApp() {
const [lines, setLines] = useState([ const [lines, setLines] = useState([
{ c: "#2a2a2a", t: "BlackRoad CLI v3 · Layers 3–8 loaded" }, { c: "#2a2a2a", t: "BlackRoad CLI v3 · 8 agents · 6 servers · 186 repos" },
{ c: "#525252", t: "blackroad@alexandria ~ $" }, { c: "#525252", t: "blackroad@alexandria ~ $" },
]); ]);
const [inp, setInp] = useState(""); const [inp, setInp] = useState("");
const endRef = useRef(null); const endRef = useRef(null);
useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [lines]); useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [lines]);
const cmds = { const cmds = {
help: [{ c:"#FF6B2B", t:"br-check br-status br-deploy br-logs agents chain whoami clear" }], help: [{ c:"#FF6B2B", t:"br-check br-status agents chain infra wireguard whoami clear" }],
whoami: [{ c:"#8844FF", t:"blackroad@alexandria" }, { c:"#333", t:"BlackRoad CLI v3 · session active" }], whoami: [{ c:"#8844FF", t:"blackroad@alexandria · Alexa Amundson" }, { c:"#333", t:"BlackRoad OS, Inc. · Est. 2024 · 186 repos · 48 domains" }],
"br-status": [{ c:"#4488FF", t:"HTTP 200 OK · blackroad.io · 14ms" }, { c:"#00D4FF", t:"✓ Cloudflare edge healthy" }], "br-status": [{ c:"#4488FF", t:"HTTP 200 OK · blackroad.io · 6ms" }, { c:"#00D4FF", t:"✓ 6 tunnels · 20 zones · 48 domains · all healthy" }],
"br-check": [{ c:"#484848", t:"x-robots-tag: noindex, noai, noimageai" }, { c:"#00D4FF", t:"✓ AI crawl protection active" }], "br-check": [{ c:"#484848", t:"x-robots-tag: noindex, noai, noimageai" }, { c:"#00D4FF", t:"✓ AI crawl protection active · 8 agents · 6 servers" }],
agents: [{ c:"#8844FF", t:"5/6 agents running · Aura idle" }], agents: [{ c:"#8844FF", t:"7/8 agents running · Aria degraded" }, { c:"#333", t:"Alice, Lucidia, Cecilia, Cece, Eve, Meridian, Sentinel: online" }],
chain: [{ c:"#FF2255", t:"HEIGHT: 0x4F2A · 812 events witnessed" }], chain: [{ c:"#FF2255", t:"HEIGHT: 0x4F2A · 812 events witnessed" }],
infra: [{ c:"#4488FF", t:"4 Pis: Alice(.49) Octavia(.97) Cecilia(.96) Aria(.98)" }, { c:"#4488FF", t:"2 Droplets: Gematria(NYC3) Anastasia(NYC1)" }, { c:"#4488FF", t:"2 Pico Ws: .95, .99" }, { c:"#00D4FF", t:"6 tunnels · 48 domains · 20 zones" }],
wireguard: [{ c:"#CC00AA", t:"Hub: anastasia (174.138.44.45)" }, { c:"#333", t:"alice 10.8.0.6 · cecilia 10.8.0.3 · octavia 10.8.0.4 · aria 10.8.0.7" }],
pwd: [{ c:"#686868", t:"/Users/alexa" }], pwd: [{ c:"#686868", t:"/Users/alexa" }],
}; };
const run = () => { const run = () => {
@@ -364,7 +368,7 @@ function SettingsApp() {
</div> </div>
))} ))}
<div style={{ marginTop: 6, padding: "8px 10px", background: "rgba(255,255,255,0.01)", borderRadius: 8 }}> <div style={{ marginTop: 6, padding: "8px 10px", background: "rgba(255,255,255,0.01)", borderRadius: 8 }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#1e1e1e" }}>BlackRoad OS · v1.0 · Z:=yx−w</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#1e1e1e" }}>BlackRoad OS, Inc. · Est. 2024 · Alexa Amundson · Z:=yx-w</div>
</div> </div>
</div> </div>
); );

259
src/pages/BlackRoadOnboarding.jsx
View File

@@ -9,24 +9,29 @@ const inter = "'Inter', sans-serif";
// ─── Steps ──────────────────────────────────────────────────────── // ─── Steps ────────────────────────────────────────────────────────
const STEPS = [ const STEPS = [
{ id: "welcome", label: "Welcome", icon: "◈" }, { id: "welcome", label: "Welcome", icon: "◈" },
{ id: "workspace", label: "Workspace", icon: "⬡" }, { id: "infrastructure", label: "Infrastructure", icon: "⬡" },
{ id: "cluster", label: "Cluster", icon: "△" }, { id: "agents", label: "Deploy Agents", icon: "◉" },
{ id: "agents", label: "Agents", icon: "◉" }, { id: "domains", label: "Domains", icon: "△" },
{ id: "apikey", label: "API Key", icon: "▣" }, { id: "billing", label: "Billing", icon: "▣" },
{ id: "launch", label: "Launch", icon: "→" }, { id: "launch", label: "Launch", icon: "→" },
]; ];
const AGENT_OPTIONS = [ const AGENT_OPTIONS = [
{ id: "lucidia", name: "Lucidia", role: "Cognition · Memory", color: "#8844FF", rec: true }, { id: "lucidia", name: "Lucidia", role: "Cognition · Memory", color: "#8844FF", rec: true },
{ id: "blackbot", name: "BlackBot", role: "Orchestration · Tasks", color: "#4488FF", rec: true }, { id: "blackbot", name: "BlackBot", role: "Orchestration · Tasks", color: "#4488FF", rec: true },
{ id: "aura", name: "Aura", role: "Intelligence · Analysis",color: "#00D4FF", rec: false }, { id: "roadcode", name: "RoadCode", role: "Code Generation · CI/CD", color: "#FF6B2B", rec: true },
{ id: "aura", name: "Aura", role: "Intelligence · Analysis", color: "#00D4FF", rec: false },
{ id: "sentinel", name: "Sentinel", role: "Security · Monitoring", color: "#FF2255", rec: false }, { id: "sentinel", name: "Sentinel", role: "Security · Monitoring", color: "#FF2255", rec: false },
{ id: "witness", name: "Witness", role: "RoadChain · Audit Trail", color: "#CC00AA", rec: false },
{ id: "relay", name: "Relay", role: "Messaging · Webhooks", color: "#F5A623", rec: false },
{ id: "sovereign", name: "Sovereign", role: "Infrastructure · Governance",color: "#82FF52", rec: false },
]; ];
const CLUSTER_PRESETS = [ const INFRA_OPTIONS = [
{ id: "local", label: "Local K3s", sub: "Single-node on your machine", icon: "◈", color: "#8844FF" }, { id: "pis", label: "Raspberry Pis", sub: "Connect your Pi cluster (Alice, Octavia, etc.)", icon: "◈", color: "#8844FF" },
{ id: "remote", label: "Remote Cluster", sub: "Connect existing K3s endpoint",icon: "⬡", color: "#4488FF" }, { id: "droplets", label: "DigitalOcean Droplets", sub: "Link existing droplets or provision new ones", icon: "⬡", color: "#4488FF" },
{ id: "auto", label: "Auto-provision", sub: "We spin it up for you", icon: "△", color: "#00D4FF", badge: "beta" }, { id: "cloudflare", label: "Cloudflare", sub: "Workers, Pages, DNS, and R2 buckets", icon: "△", color: "#FF6B2B" },
{ id: "stripe", label: "Stripe", sub: "Payment processing and billing integration", icon: "▣", color: "#00D4FF" },
]; ];
const MODEL_OPTIONS = ["llama3.2", "llama3.1", "mistral", "gemma2", "phi4", "qwen2.5"]; const MODEL_OPTIONS = ["llama3.2", "llama3.1", "mistral", "gemma2", "phi4", "qwen2.5"];
@@ -181,15 +186,15 @@ function StepWelcome({ data, setData, onNext }) {
Welcome to<br />BlackRoad OS. Welcome to<br />BlackRoad OS.
</h1> </h1>
<p style={{ fontFamily: inter, fontSize: 15, color: "#3a3a3a", lineHeight: 1.75, maxWidth: 440, marginBottom: 36 }}> <p style={{ fontFamily: inter, fontSize: 15, color: "#3a3a3a", lineHeight: 1.75, maxWidth: 440, marginBottom: 36 }}>
Sovereign infrastructure. Sentient agents. Spatial interfaces. This wizard gets you from zero to running in under 5 minutes. BlackRoad Cloud, RoadCode, and Lucidia -- your sovereign stack. This wizard gets you from zero to running in under 5 minutes.
</p> </p>
<div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 40, maxWidth: 400 }}> <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 40, maxWidth: 400 }}>
{[ {[
["01", "Set up your workspace identity"], ["01", "Connect infrastructure -- Pis, droplets, Cloudflare, Stripe"],
["02", "Connect or provision a K3s cluster"], ["02", "Deploy your 8 agents"],
["03", "Choose your agent fleet"], ["03", "Configure your 48 domains"],
["04", "Generate your first API key"], ["04", "Set up billing -- Operator, Sovereign, or Enterprise"],
].map(([n, t]) => ( ].map(([n, t]) => (
<div key={n} style={{ display: "flex", gap: 14, alignItems: "center" }}> <div key={n} style={{ display: "flex", gap: 14, alignItems: "center" }}>
<span style={{ fontFamily: mono, fontSize: 9, color: "#1e1e1e", width: 20 }}>{n}</span> <span style={{ fontFamily: mono, fontSize: 9, color: "#1e1e1e", width: 20 }}>{n}</span>
@@ -209,7 +214,7 @@ function StepWorkspace({ data, setData, onNext, onBack }) {
<div style={{ animation: "fadeUp 0.35s ease both" }}> <div style={{ animation: "fadeUp 0.35s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 1 · Workspace</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 1 · Workspace</div>
<h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Name your workspace</h2> <h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Name your workspace</h2>
<p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>This identifies your BlackRoad OS instance and appears in all logs, dashboards, and API responses.</p> <p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>This identifies your BlackRoad OS instance across BlackRoad Cloud, RoadCode, and Lucidia.</p>
<FieldInput <FieldInput
label="Workspace name" label="Workspace name"
@@ -223,7 +228,7 @@ function StepWorkspace({ data, setData, onNext, onBack }) {
label="Admin email" label="Admin email"
value={data.email} value={data.email}
onChange={v => setData(d => ({ ...d, email: v }))} onChange={v => setData(d => ({ ...d, email: v }))}
placeholder="you@yourcompany.io" placeholder="alexa@blackroad.io"
type="email" type="email"
/> />
@@ -249,87 +254,42 @@ function StepWorkspace({ data, setData, onNext, onBack }) {
); );
} }
function StepCluster({ data, setData, onNext, onBack }) { function StepInfrastructure({ data, setData, onNext, onBack }) {
const [testing, setTesting] = useState(false); const toggle = (id) => setData(d => ({
const [tested, setTested] = useState(false); ...d,
infrastructure: d.infrastructure.includes(id) ? d.infrastructure.filter(a => a !== id) : [...d.infrastructure, id],
}));
const testConnection = async () => { const valid = data.infrastructure.length > 0;
setTesting(true);
await new Promise(r => setTimeout(r, 1400));
setTesting(false);
setTested(true);
};
const valid = data.clusterType && (data.clusterType !== "remote" || (data.kubeEndpoint && tested));
return ( return (
<div style={{ animation: "fadeUp 0.35s ease both" }}> <div style={{ animation: "fadeUp 0.35s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 2 · Cluster</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 1 · Infrastructure</div>
<h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Connect your cluster</h2> <h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Connect infrastructure</h2>
<p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>BlackRoad OS runs on K3s. Choose how you want to connect.</p> <p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>Select the infrastructure to connect to your BlackRoad OS workspace. You can add more later.</p>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}> <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}>
{CLUSTER_PRESETS.map(p => { {INFRA_OPTIONS.map(p => {
const active = data.clusterType === p.id; const active = data.infrastructure.includes(p.id);
return ( return (
<button key={p.id} onClick={() => { setData(d => ({ ...d, clusterType: p.id })); setTested(false); }} <button key={p.id} onClick={() => toggle(p.id)}
style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 18px", background: active ? "#0a0a0a" : "#080808", border: `1px solid ${active ? p.color + "44" : "#111"}`, cursor: "pointer", textAlign: "left", transition: "border-color 0.15s, background 0.15s" }} style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 18px", background: active ? "#0a0a0a" : "#080808", border: `1px solid ${active ? p.color + "44" : "#111"}`, cursor: "pointer", textAlign: "left", transition: "border-color 0.15s, background 0.15s" }}
> >
<div style={{ width: 2, height: 32, background: active ? p.color : "#1a1a1a", transition: "background 0.2s", flexShrink: 0 }} /> <div style={{ width: 2, height: 32, background: active ? p.color : "#1a1a1a", transition: "background 0.2s", flexShrink: 0 }} />
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}> <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
<span style={{ fontFamily: grotesk, fontWeight: 600, fontSize: 14, color: active ? "#d0d0d0" : "#484848" }}>{p.label}</span> <span style={{ fontFamily: grotesk, fontWeight: 600, fontSize: 14, color: active ? "#d0d0d0" : "#484848" }}>{p.label}</span>
{p.badge && <span style={{ fontFamily: mono, fontSize: 8, color: "#FF6B2B", background: "#FF6B2B18", border: "1px solid #FF6B2B28", padding: "2px 6px" }}>{p.badge}</span>}
</div> </div>
<div style={{ fontFamily: inter, fontSize: 12, color: "#2a2a2a" }}>{p.sub}</div> <div style={{ fontFamily: inter, fontSize: 12, color: "#2a2a2a" }}>{p.sub}</div>
</div> </div>
<div style={{ width: 18, height: 18, borderRadius: "50%", border: `1px solid ${active ? p.color : "#1a1a1a"}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}> <div style={{ width: 18, height: 18, border: `1px solid ${active ? p.color : "#1a1a1a"}`, background: active ? p.color + "22" : "none", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "all 0.15s" }}>
{active && <div style={{ width: 8, height: 8, borderRadius: "50%", background: p.color }} />} {active && <span style={{ fontFamily: mono, fontSize: 10, color: p.color }}>✓</span>}
</div> </div>
</button> </button>
); );
})} })}
</div> </div>
{/* Local setup instructions */}
{data.clusterType === "local" && (
<div style={{ animation: "fadeUp 0.25s ease both" }}>
<Label>Install K3s locally</Label>
<CodeBlock lines={["curl -sfL https://get.k3s.io | sh -", "export KUBECONFIG=/etc/rancher/k3s/k3s.yaml"]} />
</div>
)}
{/* Remote endpoint */}
{data.clusterType === "remote" && (
<div style={{ animation: "fadeUp 0.25s ease both" }}>
<FieldInput
label="K3s API endpoint"
value={data.kubeEndpoint}
onChange={v => { setData(d => ({ ...d, kubeEndpoint: v })); setTested(false); }}
placeholder="https://alice:6443"
mono
/>
<FieldInput
label="Node token"
value={data.nodeToken}
onChange={v => setData(d => ({ ...d, nodeToken: v }))}
placeholder="K3S_TOKEN value from server"
mono
type="password"
/>
<button onClick={testConnection} disabled={!data.kubeEndpoint || testing}
style={{ fontFamily: mono, fontSize: 9, color: tested ? "#00D4FF" : "#4488FF", background: "none", border: `1px solid ${tested ? "#00D4FF33" : "#4488FF33"}`, padding: "8px 16px", cursor: data.kubeEndpoint && !testing ? "pointer" : "not-allowed", textTransform: "uppercase", letterSpacing: "0.08em", transition: "all 0.15s", marginBottom: 12 }}
>{testing ? "Testing…" : tested ? "✓ Connected" : "Test connection"}</button>
</div>
)}
{/* Auto */}
{data.clusterType === "auto" && (
<div style={{ animation: "fadeUp 0.25s ease both", background: "#080808", border: "1px solid #00D4FF18", padding: "14px 16px" }}>
<span style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a" }}>We'll provision a K3s cluster in your selected region after setup completes. No additional config needed.</span>
</div>
)}
<div style={{ display: "flex", gap: 20, alignItems: "center", marginTop: 32 }}> <div style={{ display: "flex", gap: 20, alignItems: "center", marginTop: 32 }}>
<BackBtn onClick={onBack} /> <BackBtn onClick={onBack} />
<NextBtn onClick={onNext} disabled={!valid} /> <NextBtn onClick={onNext} disabled={!valid} />
@@ -348,9 +308,9 @@ function StepAgents({ data, setData, onNext, onBack }) {
return ( return (
<div style={{ animation: "fadeUp 0.35s ease both" }}> <div style={{ animation: "fadeUp 0.35s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 3 · Agent fleet</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 2 · Deploy agents</div>
<h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Choose your agents</h2> <h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Deploy your 8 agents</h2>
<p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>Select which agents to activate. You can add or remove agents any time after setup.</p> <p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>Select which agents to deploy. All 8 are available -- activate them now or later.</p>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}> <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}>
{AGENT_OPTIONS.map(a => { {AGENT_OPTIONS.map(a => {
@@ -393,51 +353,85 @@ function StepAgents({ data, setData, onNext, onBack }) {
); );
} }
function StepApiKey({ data, setData, onNext, onBack }) { function StepDomains({ data, setData, onNext, onBack }) {
const FAKE_KEY = "br_live_" + "a3Kx9mZ2pQvL8rYt".slice(0, 16); const DOMAIN_GROUPS = [
const [copied, copy] = useCopy(FAKE_KEY); { label: "Primary", domains: ["blackroad.io", "blackroad.systems"] },
const [confirmed, setConfirmed] = useState(false); { label: "Products", domains: ["roadcode.dev", "lucidia.ai", "blackroad.cloud"] },
{ label: "Infrastructure", domains: ["blackroad.network", "blackroad.run", "roadchain.io"] },
];
return ( return (
<div style={{ animation: "fadeUp 0.35s ease both" }}> <div style={{ animation: "fadeUp 0.35s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 4 · API Key</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 3 · Domains</div>
<h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Your first API key</h2> <h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Configure domains</h2>
<p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>This key authenticates all SDK and API requests from your workspace. Copy and store it securely — it won't be shown again.</p> <p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>48 domains across your BlackRoad OS infrastructure. Review the primary groups below -- all are managed via Cloudflare.</p>
<div style={{ background: "#FF6B2B08", border: "1px solid #FF6B2B1a", padding: "14px 16px", marginBottom: 20 }}> {DOMAIN_GROUPS.map(g => (
<div style={{ fontFamily: mono, fontSize: 9, color: "#FF6B2B", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>⚠ Copy this key now</div> <div key={g.label} style={{ marginBottom: 20 }}>
<div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}> <Label>{g.label}</Label>
<code style={{ fontFamily: mono, fontSize: 13, color: "#909090", flex: 1, wordBreak: "break-all" }}>{FAKE_KEY}</code> <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
<button onClick={copy} {g.domains.map(d => (
style={{ fontFamily: mono, fontSize: 9, color: copied ? "#00D4FF" : "#484848", background: "none", border: `1px solid ${copied ? "#00D4FF33" : "#1a1a1a"}`, padding: "7px 14px", cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.08em", transition: "all 0.2s", flexShrink: 0 }} <div key={d} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", background: "#080808", border: "1px solid #111" }}>
>{copied ? "✓ Copied" : "Copy"}</button> <span style={{ fontFamily: mono, fontSize: 10, color: "#00D4FF" }}>✓</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#686868" }}>{d}</span>
<span style={{ fontFamily: mono, fontSize: 9, color: "#242424", marginLeft: "auto" }}>cloudflare</span>
</div>
))}
</div> </div>
</div> </div>
))}
<Label>Use in your project</Label> <div style={{ background: "#080808", border: "1px solid #111", padding: "12px 14px", marginBottom: 24 }}>
<CodeBlock <span style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a" }}>+ 40 additional domains configured via Cloudflare DNS</span>
lines={[`export BR_API_KEY="${FAKE_KEY}"`]}
copyVal={`export BR_API_KEY="${FAKE_KEY}"`}
/>
<FieldInput
label="Key name (optional)"
value={data.keyName}
onChange={v => setData(d => ({ ...d, keyName: v }))}
placeholder="Production"
/>
<div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 24, padding: "12px 14px", background: "#080808", border: "1px solid #111", cursor: "pointer" }}
onClick={() => setConfirmed(c => !c)}>
<div style={{ width: 16, height: 16, border: `1px solid ${confirmed ? "#4488FF" : "#1a1a1a"}`, background: confirmed ? "#4488FF22" : "none", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1, transition: "all 0.15s" }}>
{confirmed && <span style={{ fontFamily: mono, fontSize: 10, color: "#4488FF" }}>✓</span>}
</div>
<span style={{ fontFamily: inter, fontSize: 13, color: "#484848", lineHeight: 1.5 }}>I've saved my API key somewhere safe</span>
</div> </div>
<div style={{ display: "flex", gap: 20, alignItems: "center" }}> <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
<BackBtn onClick={onBack} /> <BackBtn onClick={onBack} />
<NextBtn onClick={onNext} disabled={!confirmed} label="Complete setup →" /> <NextBtn onClick={onNext} />
</div>
</div>
);
}
function StepBilling({ data, setData, onNext, onBack }) {
const TIERS = [
{ id: "operator", label: "Operator", price: "$0", sub: "Free forever. 2 agents, 1 domain, community support.", color: "#4488FF" },
{ id: "sovereign", label: "Sovereign", price: "$499/mo", sub: "All 8 agents, 48 domains, priority support, RoadChain witnessing.", color: "#8844FF" },
{ id: "enterprise", label: "Enterprise", price: "Custom", sub: "Dedicated infrastructure, SLA, custom agents, on-premise option.", color: "#FF6B2B" },
];
return (
<div style={{ animation: "fadeUp 0.35s ease both" }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#2a2a2a", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>Step 4 · Billing</div>
<h2 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 28, color: "#f0f0f0", letterSpacing: "-0.03em", marginBottom: 8 }}>Set up billing</h2>
<p style={{ fontFamily: inter, fontSize: 13, color: "#3a3a3a", lineHeight: 1.7, marginBottom: 32 }}>Choose your plan. All plans include BlackRoad Cloud, RoadCode, and Lucidia access. Powered by Stripe.</p>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}>
{TIERS.map(t => {
const active = data.tier === t.id;
return (
<button key={t.id} onClick={() => setData(d => ({ ...d, tier: t.id }))}
style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 18px", background: active ? "#0a0a0a" : "#080808", border: `1px solid ${active ? t.color + "44" : "#111"}`, cursor: "pointer", textAlign: "left", transition: "border-color 0.15s, background 0.15s" }}
>
<div style={{ width: 2, height: 36, background: active ? t.color : "#1a1a1a", transition: "background 0.2s", flexShrink: 0 }} />
<div style={{ flex: 1 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
<span style={{ fontFamily: grotesk, fontWeight: 600, fontSize: 14, color: active ? "#d0d0d0" : "#484848" }}>{t.label}</span>
<span style={{ fontFamily: mono, fontSize: 11, color: active ? t.color : "#333", marginLeft: "auto" }}>{t.price}</span>
</div>
<div style={{ fontFamily: inter, fontSize: 12, color: "#2a2a2a" }}>{t.sub}</div>
</div>
<div style={{ width: 18, height: 18, borderRadius: "50%", border: `1px solid ${active ? t.color : "#1a1a1a"}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
{active && <div style={{ width: 8, height: 8, borderRadius: "50%", background: t.color }} />}
</div>
</button>
);
})}
</div>
<div style={{ display: "flex", gap: 20, alignItems: "center" }}>
<BackBtn onClick={onBack} />
<NextBtn onClick={onNext} disabled={!data.tier} label="Complete setup →" />
</div> </div>
</div> </div>
); );
@@ -446,10 +440,10 @@ function StepApiKey({ data, setData, onNext, onBack }) {
function StepLaunch({ data }) { function StepLaunch({ data }) {
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [tasks, setTasks] = useState([ const [tasks, setTasks] = useState([
{ label: "Creating workspace", done: false }, { label: "Connecting infrastructure", done: false },
{ label: "Connecting cluster", done: false }, { label: "Deploying agents", done: false },
{ label: "Provisioning agents", done: false }, { label: "Configuring 48 domains", done: false },
{ label: "Configuring API key", done: false }, { label: "Activating Stripe billing", done: false },
{ label: "Running health checks", done: false }, { label: "Running health checks", done: false },
]); ]);
const [complete, setComplete] = useState(false); const [complete, setComplete] = useState(false);
@@ -507,16 +501,17 @@ function StepLaunch({ data }) {
You're live. You're live.
</h2> </h2>
<p style={{ fontFamily: inter, fontSize: 14, color: "#3a3a3a", lineHeight: 1.75, marginBottom: 32, maxWidth: 420 }}> <p style={{ fontFamily: inter, fontSize: 14, color: "#3a3a3a", lineHeight: 1.75, marginBottom: 32, maxWidth: 420 }}>
<strong style={{ color: "#d0d0d0" }}>{data.workspaceName || "Your workspace"}</strong> is running on BlackRoad OS with {data.agents.length} agent{data.agents.length !== 1 ? "s" : ""} active. <strong style={{ color: "#d0d0d0" }}>{data.workspaceName || "Your workspace"}</strong> is live on BlackRoad OS with {data.agents.length} agent{data.agents.length !== 1 ? "s" : ""}, 48 domains, and {data.infrastructure.length} infrastructure connection{data.infrastructure.length !== 1 ? "s" : ""}.
</p> </p>
{/* Summary */} {/* Summary */}
<div style={{ background: "#080808", border: "1px solid #111", marginBottom: 28 }}> <div style={{ background: "#080808", border: "1px solid #111", marginBottom: 28 }}>
{[ {[
["Workspace", data.workspaceName || "—"], ["Workspace", data.workspaceName || "—"],
["Region", data.region || "us-central"], ["Tier", data.tier ? data.tier.charAt(0).toUpperCase() + data.tier.slice(1) : "—"],
["Cluster", data.clusterType || "local"], ["Infrastructure", data.infrastructure.join(", ") || "—"],
["Agents", data.agents.join(", ") || "—"], ["Agents", data.agents.length + " active"],
["Domains", "48 configured"],
].map(([k, v]) => ( ].map(([k, v]) => (
<div key={k} style={{ display: "flex", gap: 16, padding: "11px 16px", borderBottom: "1px solid #0a0a0a" }}> <div key={k} style={{ display: "flex", gap: 16, padding: "11px 16px", borderBottom: "1px solid #0a0a0a" }}>
<span style={{ fontFamily: mono, fontSize: 10, color: "#2a2a2a", width: 90, flexShrink: 0 }}>{k}</span> <span style={{ fontFamily: mono, fontSize: 10, color: "#2a2a2a", width: 90, flexShrink: 0 }}>{k}</span>
@@ -529,9 +524,9 @@ function StepLaunch({ data }) {
<Label>What's next</Label> <Label>What's next</Label>
<div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 32 }}> <div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 32 }}>
{[ {[
["→ Docs", "Read the full BlackRoad OS documentation"], ["→ BlackRoad Cloud", "Monitor your agents and infrastructure"],
["→ Dashboard", "Monitor your agents in real-time"], ["→ RoadCode", "Open the code generation workspace"],
["→ API", "Explore the REST API reference"], ["→ Lucidia", "Start a conversation with Lucidia"],
].map(([link, desc]) => ( ].map(([link, desc]) => (
<div key={link} style={{ display: "flex", gap: 14, padding: "11px 14px", background: "#080808", border: "1px solid #0d0d0d", cursor: "pointer", transition: "border-color 0.15s" }} <div key={link} style={{ display: "flex", gap: 14, padding: "11px 14px", background: "#080808", border: "1px solid #0d0d0d", cursor: "pointer", transition: "border-color 0.15s" }}
onMouseEnter={e => e.currentTarget.style.borderColor = "#1a1a1a"} onMouseEnter={e => e.currentTarget.style.borderColor = "#1a1a1a"}
@@ -559,12 +554,10 @@ export default function BlackRoadOnboarding() {
workspaceName: "", workspaceName: "",
email: "", email: "",
region: "us-central", region: "us-central",
clusterType: "", infrastructure: ["pis", "cloudflare"],
kubeEndpoint: "", agents: ["lucidia", "blackbot", "roadcode"],
nodeToken: "",
agents: ["lucidia", "blackbot"],
models: {}, models: {},
keyName: "", tier: "sovereign",
}); });
const w = useWidth(); const w = useWidth();
@@ -576,10 +569,10 @@ export default function BlackRoadOnboarding() {
const STEP_CONTENT = [ const STEP_CONTENT = [
<StepWelcome key="welcome" data={data} setData={setData} onNext={next} />, <StepWelcome key="welcome" data={data} setData={setData} onNext={next} />,
<StepWorkspace key="workspace" data={data} setData={setData} onNext={next} onBack={back} />, <StepInfrastructure key="infrastructure" data={data} setData={setData} onNext={next} onBack={back} />,
<StepCluster key="cluster" data={data} setData={setData} onNext={next} onBack={back} />,
<StepAgents key="agents" data={data} setData={setData} onNext={next} onBack={back} />, <StepAgents key="agents" data={data} setData={setData} onNext={next} onBack={back} />,
<StepApiKey key="apikey" data={data} setData={setData} onNext={next} onBack={back} />, <StepDomains key="domains" data={data} setData={setData} onNext={next} onBack={back} />,
<StepBilling key="billing" data={data} setData={setData} onNext={next} onBack={back} />,
<StepLaunch key="launch" data={data} />, <StepLaunch key="launch" data={data} />,
]; ];
@@ -623,7 +616,7 @@ export default function BlackRoadOnboarding() {
<div key={c} style={{ width: 2, height: 14, background: c, borderRadius: 2 }} /> <div key={c} style={{ width: 2, height: 14, background: c, borderRadius: 2 }} />
))} ))}
</div> </div>
<span style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 14, color: "#f0f0f0", letterSpacing: "-0.03em" }}>BlackRoad</span> <span style={{ fontFamily: grotesk, fontWeight: 700, fontSize: 14, color: "#f0f0f0", letterSpacing: "-0.03em" }}>BlackRoad OS</span>
</div> </div>
{/* Step dots + counter */} {/* Step dots + counter */}
<div style={{ display: "flex", alignItems: "center", gap: 16 }}> <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
@@ -676,7 +669,7 @@ export default function BlackRoadOnboarding() {
</div> </div>
<div style={{ height: 1, background: "#0a0a0a", margin: "8px 0" }} /> <div style={{ height: 1, background: "#0a0a0a", margin: "8px 0" }} />
<div style={{ fontFamily: mono, fontSize: 9, color: "#141414", lineHeight: 1.8 }}> <div style={{ fontFamily: mono, fontSize: 9, color: "#141414", lineHeight: 1.8 }}>
{["Alice · gateway","Octavia · hailo","K3s · cluster"].map(l => <div key={l}>{l}</div>)} {["Alice · pi","Octavia · pi","Cloudflare · cdn","Stripe · billing"].map(l => <div key={l}>{l}</div>)}
</div> </div>
</div> </div>
)} )}

46
src/pages/BlackRoadRoadmapPage.jsx
View File

@@ -11,17 +11,17 @@ const inter = "'Inter', sans-serif";
const MILESTONES = [ const MILESTONES = [
{ {
version: "v0.1", version: "v0.1",
name: "Core Scaffold", name: "Foundation — Shipped",
target: "March 2026", target: "Q1 2026",
status: "active", status: "active",
color: "#FF6B2B", color: "#FF6B2B",
items: [ items: [
"10-layer @BlackRoadBot engine", "RoadCode deployed on Octavia Pi 5 (186 repos migrated)",
"@blackroad-agents GitHub webhook", "BlackRoad Cloud live on Cloudflare Workers",
"15-org routing matrix", "Stripe integration (test mode) — 3 pricing tiers",
"Ollama Pi cluster integration", "8 agents running across Pi cluster + droplets",
"Request ID tracking", "Cloudflare tunnels active on Alice (8 connections)",
"Layer 6 failure → auto GitHub Issue", "48 domains registered and routed",
], ],
}, },
{ {
@@ -40,29 +40,29 @@ const MILESTONES = [
}, },
{ {
version: "v0.3", version: "v0.3",
name: "Platform Integrations", name: "Auth & Storage",
target: "April 2026", target: "April 2026",
status: "upcoming", status: "upcoming",
color: "#CC00AA", color: "#CC00AA",
items: [ items: [
"Salesforce Apex middleware + Data Cloud", "Clerk auth integration for BlackRoad Cloud",
"Hugging Face Inference Endpoint deployment", "Live mode Stripe payments (Sovereign, Gateway Pro, Gateway Team)",
"DigitalOcean doctl droplet lifecycle", "MinIO / RoadDrive on Cecilia Pi 5",
"Railway ephemeral environments", "Ollama inference via ollama.blackroad.io tunnel",
"LiteLLM proxy on Octavia + Cecilia", "LiteLLM proxy on Octavia + Cecilia",
"Round-robin Pi cluster load balancing", "Round-robin Pi cluster load balancing",
], ],
}, },
{ {
version: "v0.4", version: "v0.4",
name: "Website Layer", name: "Full Deployment",
target: "May 2026", target: "May 2026",
status: "upcoming", status: "upcoming",
color: "#8844FF", color: "#8844FF",
items: [ items: [
"Deploy all 135+ projects from RoadCode",
"Headless CMS + Vercel rebuild hooks", "Headless CMS + Vercel rebuild hooks",
"Wix Harmony Aria agent integration", "Lucidia companion app launch on lucidia.earth",
"Blackbox AI multi-agent dispatch",
"Layer 10 Website Editor — fully operational", "Layer 10 Website Editor — fully operational",
], ],
}, },
@@ -74,7 +74,7 @@ const MILESTONES = [
color: "#4488FF", color: "#4488FF",
items: [ items: [
"All P0–P1 features shipped", "All P0–P1 features shipped",
"Full 15-org GitHub Enterprise coverage", "Full 8-org RoadCode coverage",
"RoadChain live + stable", "RoadChain live + stable",
"LiteLLM proxy stable", "LiteLLM proxy stable",
"HITL gates tested", "HITL gates tested",
@@ -128,9 +128,9 @@ const STACK_LAYERS = [
]; ];
const METRICS = [ const METRICS = [
{ label: "GitHub Orgs", value: "15", sub: "under blackroad-os enterprise", color: "#4488FF" }, { label: "RoadCode Repos", value: "186", sub: "migrated to self-hosted Gitea", color: "#4488FF" },
{ label: "Scaffold Layers", value: "10", sub: "@BlackRoadBot deca-layer engine", color: "#8844FF" }, { label: "Domains", value: "48", sub: "registered and routed", color: "#8844FF" },
{ label: "Agents — v1.0", value: "1,000", sub: "target Q2 2026", color: "#FF6B2B" }, { label: "Active Agents", value: "8", sub: "across Pi cluster + droplets", color: "#FF6B2B" },
{ label: "Agents — v2.0", value: "30,000", sub: "target Q4 2026", color: "#00D4FF" }, { label: "Agents — v2.0", value: "30,000", sub: "target Q4 2026", color: "#00D4FF" },
{ label: "Seed Raise", value: "$2.5M", sub: "18-month runway to Series A", color: "#CC00AA" }, { label: "Seed Raise", value: "$2.5M", sub: "18-month runway to Series A", color: "#CC00AA" },
{ label: "ARR Target", value: "$1M", sub: "Series A milestone", color: "#FF2255" }, { label: "ARR Target", value: "$1M", sub: "Series A milestone", color: "#FF2255" },
@@ -401,7 +401,7 @@ export default function BlackRoadRoadmap() {
{/* ── Hero ───────────────────────────────────────────── */} {/* ── Hero ───────────────────────────────────────────── */}
<section style={{ padding: mobile ? "52px 0 40px" : "80px 0 60px", borderBottom: "1px solid #0a0a0a" }}> <section style={{ padding: mobile ? "52px 0 40px" : "80px 0 60px", borderBottom: "1px solid #0a0a0a" }}>
<EyeBrow>BlackRoad OS · Developer Roadmap · 2026</EyeBrow> <EyeBrow>BlackRoad OS, Inc. · Developer Roadmap · 2026</EyeBrow>
<h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: "clamp(32px, 7vw, 68px)", color: "#f0f0f0", letterSpacing: "-0.04em", lineHeight: 1.0, marginBottom: 20 }}> <h1 style={{ fontFamily: grotesk, fontWeight: 700, fontSize: "clamp(32px, 7vw, 68px)", color: "#f0f0f0", letterSpacing: "-0.04em", lineHeight: 1.0, marginBottom: 20 }}>
From vision<br />to 30,000 agents. From vision<br />to 30,000 agents.
</h1> </h1>
@@ -613,10 +613,10 @@ export default function BlackRoadRoadmap() {
</Section> </Section>
<div style={{ display: "grid", gridTemplateColumns: `repeat(${mobile ? 2 : 5}, 1fr)`, gap: 2, marginBottom: 48 }}> <div style={{ display: "grid", gridTemplateColumns: `repeat(${mobile ? 2 : 5}, 1fr)`, gap: 2, marginBottom: 48 }}>
{["Lucidia","BlackBot","Aura","Sentinel","Alice","Cecilia","Octavia","RoadBot","Orchestr.","...+990"].map((name, i) => ( {["Alice","Lucidia","Cecilia","Cece","Aria","Eve","Meridian","Sentinel","...+992","...+29K"].map((name, i) => (
<div key={name} style={{ padding: "12px 14px", background: "#080808", border: "1px solid #0d0d0d", display: "flex", alignItems: "center", gap: 8 }}> <div key={name} style={{ padding: "12px 14px", background: "#080808", border: "1px solid #0d0d0d", display: "flex", alignItems: "center", gap: 8 }}>
<div style={{ width: 4, height: 4, borderRadius: "50%", background: STOPS[i % STOPS.length], flexShrink: 0 }} /> <div style={{ width: 4, height: 4, borderRadius: "50%", background: STOPS[i % STOPS.length], flexShrink: 0 }} />
<span style={{ fontFamily: inter, fontSize: 12, color: i === 9 ? "#1e1e1e" : "#484848" }}>{name}</span> <span style={{ fontFamily: inter, fontSize: 12, color: i >= 8 ? "#1e1e1e" : "#484848" }}>{name}</span>
</div> </div>
))} ))}
</div> </div>

236
src/pages/BlackRoadSettings.jsx
View File

@@ -10,8 +10,11 @@ const inter = "'Inter', sans-serif";
const NAV = [ const NAV = [
{ id: "profile", label: "Profile", icon: "◈" }, { id: "profile", label: "Profile", icon: "◈" },
{ id: "account", label: "Account", icon: "◉" }, { id: "account", label: "Account", icon: "◉" },
{ id: "infra", label: "Infrastructure", icon: "⬢" },
{ id: "apikeys", label: "API Keys", icon: "⬡" }, { id: "apikeys", label: "API Keys", icon: "⬡" },
{ id: "agents", label: "Agents", icon: "△" }, { id: "agents", label: "Agents", icon: "△" },
{ id: "domains", label: "Domains", icon: "◎" },
{ id: "storage", label: "Storage", icon: "▥" },
{ id: "security", label: "Security", icon: "▣" }, { id: "security", label: "Security", icon: "▣" },
{ id: "webhooks", label: "Webhooks", icon: "⟳" }, { id: "webhooks", label: "Webhooks", icon: "⟳" },
{ id: "billing", label: "Billing", icon: "◇" }, { id: "billing", label: "Billing", icon: "◇" },
@@ -134,7 +137,9 @@ function SaveBar({ dirty, onSave, onDiscard, saving }) {
function ProfileSection() { function ProfileSection() {
const [name, setName] = useState("Alexa Amundson"); const [name, setName] = useState("Alexa Amundson");
const [handle, setHandle] = useState("alexa"); const [handle, setHandle] = useState("alexa");
const [bio, setBio] = useState("Founder of BlackRoad OS. Building sovereign AI infrastructure."); const [bio, setBio] = useState("Founder of BlackRoad OS, Inc. Building sovereign AI infrastructure. Delaware C-Corp.");
const [email, setEmail] = useState("alexa@blackroad.io");
const [recovery, setRecovery]= useState("amundsonalexa@gmail.com");
const [url, setUrl] = useState("blackroad.io"); const [url, setUrl] = useState("blackroad.io");
const [timezone, setTZ] = useState("America/Chicago"); const [timezone, setTZ] = useState("America/Chicago");
const [dirty, setDirty] = useState(false); const [dirty, setDirty] = useState(false);
@@ -192,6 +197,15 @@ function ProfileSection() {
<div style={{ fontFamily: inter, fontSize: 11, color: "#2a2a2a", marginTop: 5 }}>{bio.length} / 160 characters</div> <div style={{ fontFamily: inter, fontSize: 11, color: "#2a2a2a", marginTop: 5 }}>{bio.length} / 160 characters</div>
</div> </div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 0 }}>
<div style={{ paddingRight: 16 }}>
<Input label="Primary email" value={email} onChange={mark(setEmail)} placeholder="you@example.com" />
</div>
<div>
<Input label="Recovery email" value={recovery} onChange={mark(setRecovery)} placeholder="backup@example.com" />
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 0 }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 0 }}>
<div style={{ paddingRight: 16 }}> <div style={{ paddingRight: 16 }}>
<Input label="Website" value={url} onChange={mark(setUrl)} placeholder="yoursite.io" /> <Input label="Website" value={url} onChange={mark(setUrl)} placeholder="yoursite.io" />
@@ -402,10 +416,14 @@ function SecuritySection() {
// ─── Agents section ─────────────────────────────────────────────── // ─── Agents section ───────────────────────────────────────────────
function AgentsSection() { function AgentsSection() {
const agents = [ const agents = [
{ name: "Lucidia", role: "Cognition · Memory", status: "running", model: "llama3.2", color: "#8844FF" }, { name: "Alice", role: "Orchestration · Gateway", status: "running", model: "llama3.2", color: "#FF6B2B" },
{ name: "BlackBot", role: "Orchestration", status: "degraded", model: "mistral", color: "#FF6B2B" }, { name: "Lucidia", role: "Cognition · Memory · KG", status: "running", model: "llama3.2", color: "#8844FF" },
{ name: "Aura", role: "Intelligence", status: "running", model: "gemma2", color: "#4488FF" }, { name: "Cecilia", role: "Storage · Build Pipelines", status: "running", model: "mistral", color: "#CC00AA" },
{ name: "Sentinel", role: "Security · Monitoring", status: "running", model: "phi4", color: "#00D4FF" }, { name: "Cece", role: "Lightweight Tasks", status: "running", model: "phi4", color: "#FF2255" },
{ name: "Aria", role: "Edge Compute · Sensors", status: "running", model: "gemma2", color: "#4488FF" },
{ name: "Eve", role: "Monitoring · Observability", status: "running", model: "llama3.2", color: "#00D4FF" },
{ name: "Meridian", role: "Routing · Mesh Coordination",status: "running", model: "mistral", color: "#FF6B2B" },
{ name: "Sentinel", role: "Security · Anomaly Detection",status: "running",model: "phi4", color: "#00D4FF" },
]; ];
const [memory, setMemory] = useState(true); const [memory, setMemory] = useState(true);
const [autoScale, setAuto] = useState(false); const [autoScale, setAuto] = useState(false);
@@ -504,6 +522,207 @@ function DangerSection() {
); );
} }
// ─── Account section ──────────────────────────────────────────────
function AccountSection() {
return (
<div>
<SectionHead title="Account" sub="Organization details and company information." />
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
{[
{ label: "Company", value: "BlackRoad OS, Inc." },
{ label: "Entity type", value: "Delaware C-Corp" },
{ label: "Founder", value: "Alexa Amundson" },
{ label: "Primary email", value: "alexa@blackroad.io" },
{ label: "Recovery email", value: "amundsonalexa@gmail.com" },
{ label: "Website", value: "blackroad.io" },
].map(item => (
<div key={item.label} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontFamily: mono, fontSize: 10, color: "#2e2e2e", textTransform: "uppercase", letterSpacing: "0.1em" }}>{item.label}</span>
<span style={{ fontFamily: inter, fontSize: 13, color: "#c0c0c0" }}>{item.value}</span>
</div>
))}
</div>
</div>
);
}
// ─── Infrastructure section ──────────────────────────────────────
function InfraSection() {
const nodes = [
{ name: "Alice", type: "Raspberry Pi 5", role: "Control Plane / Gateway", ip: "10.0.0.1", status: "running", color: "#FF6B2B" },
{ name: "Octavia", type: "Raspberry Pi 5", role: "AI Worker (Hailo-8L, 1TB NVMe)", ip: "10.0.0.2", status: "running", color: "#8844FF" },
{ name: "Cecilia", type: "Raspberry Pi 5", role: "Storage / Build", ip: "10.0.0.3", status: "running", color: "#CC00AA" },
{ name: "Aria", type: "Raspberry Pi 5", role: "Edge / Sensor", ip: "10.0.0.4", status: "running", color: "#4488FF" },
{ name: "Gematria", type: "DO Droplet", role: "Cloud Redundancy", ip: "10.0.0.5", status: "running", color: "#00D4FF" },
{ name: "Anastasia", type: "DO Droplet", role: "Cloud Redundancy", ip: "10.0.0.6", status: "running", color: "#00D4FF" },
{ name: "Pico W #1", type: "RP2040W", role: "IoT Sensor Node", ip: "10.0.0.10",status: "running", color: "#FF2255" },
{ name: "Pico W #2", type: "RP2040W", role: "IoT Sensor Node", ip: "10.0.0.11",status: "running", color: "#FF2255" },
];
return (
<div>
<SectionHead title="Infrastructure" sub="Hardware nodes, networking, and cluster configuration." />
<Label>Hardware nodes</Label>
<div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 28 }}>
{nodes.map(n => (
<div key={n.name} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "14px 16px", display: "flex", alignItems: "center", gap: 14 }}>
<div style={{ width: 3, height: 36, background: n.color, flexShrink: 0 }} />
<div style={{ flex: 1 }}>
<div style={{ fontFamily: grotesk, fontWeight: 600, fontSize: 14, color: "#d0d0d0", marginBottom: 2 }}>{n.name}</div>
<div style={{ fontFamily: mono, fontSize: 10, color: "#2a2a2a" }}>{n.type} · {n.role}</div>
</div>
<span style={{ fontFamily: mono, fontSize: 10, color: "#2a2a2a" }}>{n.ip}</span>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<div style={{ width: 6, height: 6, borderRadius: "50%", background: "#00D4FF" }} />
<span style={{ fontFamily: mono, fontSize: 9, color: "#00D4FF" }}>{n.status}</span>
</div>
</div>
))}
</div>
<Divider />
<Label>Cluster stack</Label>
<div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 28 }}>
{[
{ label: "K3s Cluster", value: "4 Pi nodes (Alice control plane)" },
{ label: "Docker Swarm", value: "Container orchestration overlay" },
{ label: "WireGuard Mesh", value: "All 8 nodes, 10.0.0.0/24 subnet" },
{ label: "Traefik Ingress", value: "Automatic TLS, Let's Encrypt" },
{ label: "Cloudflare", value: "20 zones, 48 subdomains, Workers edge" },
].map(item => (
<div key={item.label} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
<span style={{ fontFamily: inter, fontSize: 13, color: "#c0c0c0" }}>{item.label}</span>
<span style={{ fontFamily: mono, fontSize: 11, color: "#3a3a3a" }}>{item.value}</span>
</div>
))}
</div>
<Divider />
<Label>Tunnel & mesh config</Label>
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
{[
{ label: "WireGuard port", value: "51820/udp" },
{ label: "Mesh subnet", value: "10.0.0.0/24" },
{ label: "Cloudflare Tunnel",value: "cloudflared via Alice" },
{ label: "DNS provider", value: "Cloudflare (authoritative)" },
].map(item => (
<div key={item.label} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontFamily: inter, fontSize: 13, color: "#c0c0c0" }}>{item.label}</span>
<span style={{ fontFamily: mono, fontSize: 11, color: "#3a3a3a" }}>{item.value}</span>
</div>
))}
</div>
</div>
);
}
// ─── Domains section ─────────────────────────────────────────────
function DomainsSection() {
return (
<div>
<SectionHead title="Domains" sub="Cloudflare DNS zones and subdomain routing." />
<div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 28 }}>
{[
{ label: "Total DNS zones", value: "20" },
{ label: "Total subdomains", value: "48" },
{ label: "Provider", value: "Cloudflare" },
{ label: "Edge Workers", value: "Active" },
].map(item => (
<div key={item.label} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontFamily: inter, fontSize: 13, color: "#c0c0c0" }}>{item.label}</span>
<span style={{ fontFamily: mono, fontSize: 11, color: "#3a3a3a" }}>{item.value}</span>
</div>
))}
</div>
<Divider />
<Label>Key subdomains</Label>
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
{[
{ domain: "api.blackroad.io", target: "REST API" },
{ domain: "gateway.blackroad.io", target: "API Gateway" },
{ domain: "codex.blackroad.io", target: "Knowledge API" },
{ domain: "cloud.blackroad.io", target: "BlackRoad Cloud dashboard" },
{ domain: "git.blackroad.io", target: "RoadCode (self-hosted Git)" },
].map(item => (
<div key={item.domain} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
<code style={{ fontFamily: mono, fontSize: 12, color: "#4488FF" }}>{item.domain}</code>
<span style={{ fontFamily: inter, fontSize: 12, color: "#3a3a3a" }}>{item.target}</span>
</div>
))}
</div>
</div>
);
}
// ─── Storage section ─────────────────────────────────────────────
function StorageSection() {
return (
<div>
<SectionHead title="Storage" sub="Persistent storage across the BlackRoad infrastructure." />
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
{[
{ label: "Google Drive", value: "2 TB (cloud backup)" },
{ label: "Octavia NVMe", value: "1 TB (local fast storage)" },
{ label: "Cecilia storage", value: "Build artifacts, Git repos" },
{ label: "PS-SHA∞ journal", value: "Append-only agent memory" },
].map(item => (
<div key={item.label} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
<span style={{ fontFamily: inter, fontSize: 13, color: "#c0c0c0" }}>{item.label}</span>
<span style={{ fontFamily: mono, fontSize: 11, color: "#3a3a3a" }}>{item.value}</span>
</div>
))}
</div>
</div>
);
}
// ─── Billing section ─────────────────────────────────────────────
function BillingSection() {
return (
<div>
<SectionHead title="Billing" sub="Stripe integration and subscription management." />
<div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 28 }}>
{[
{ label: "Stripe account", value: "acct_1S70Zn3e5FMFdlFw" },
{ label: "Status", value: "Connected", color: "#00D4FF" },
{ label: "Provider", value: "Stripe" },
{ label: "Company", value: "BlackRoad OS, Inc." },
].map(item => (
<div key={item.label} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontFamily: mono, fontSize: 10, color: "#2e2e2e", textTransform: "uppercase", letterSpacing: "0.1em" }}>{item.label}</span>
<span style={{ fontFamily: item.color ? mono : inter, fontSize: item.color ? 11 : 13, color: item.color || "#c0c0c0" }}>{item.value}</span>
</div>
))}
</div>
<Divider />
<Label>Products</Label>
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
{[
{ name: "BlackRoad Cloud", status: "Active", color: "#00D4FF" },
{ name: "RoadCode", status: "Active", color: "#00D4FF" },
{ name: "RoadChain", status: "Beta", color: "#FF6B2B" },
{ name: "Lucidia", status: "Active", color: "#00D4FF" },
].map(item => (
<div key={item.name} style={{ background: "#080808", border: "1px solid #0f0f0f", padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontFamily: inter, fontSize: 13, color: "#c0c0c0" }}>{item.name}</span>
<span style={{ fontFamily: mono, fontSize: 9, color: item.color, background: item.color + "12", border: `1px solid ${item.color}22`, padding: "2px 8px", letterSpacing: "0.04em" }}>{item.status}</span>
</div>
))}
</div>
</div>
);
}
// ─── Placeholder section ────────────────────────────────────────── // ─── Placeholder section ──────────────────────────────────────────
function PlaceholderSection({ title, sub }) { function PlaceholderSection({ title, sub }) {
return ( return (
@@ -526,12 +745,15 @@ export default function BlackRoadSettings() {
const CONTENT = { const CONTENT = {
profile: <ProfileSection />, profile: <ProfileSection />,
account: <PlaceholderSection title="Account" sub="Organization details, plan, and seat management." />, account: <AccountSection />,
infra: <InfraSection />,
apikeys: <ApiKeysSection />, apikeys: <ApiKeysSection />,
agents: <AgentsSection />, agents: <AgentsSection />,
domains: <DomainsSection />,
storage: <StorageSection />,
security: <SecuritySection />, security: <SecuritySection />,
webhooks: <PlaceholderSection title="Webhooks" sub="Configure endpoints to receive real-time event payloads." />, webhooks: <PlaceholderSection title="Webhooks" sub="Configure endpoints to receive real-time event payloads." />,
billing: <PlaceholderSection title="Billing" sub="Manage your subscription, invoices, and payment methods." />, billing: <BillingSection />,
danger: <DangerSection />, danger: <DangerSection />,
}; };

86
src/pages/BlackRoadStatus.jsx
View File

@@ -18,39 +18,39 @@ const STATUS = {
// ─── Services ──────────────────────────────────────────────────── // ─── Services ────────────────────────────────────────────────────
const SERVICES = [ const SERVICES = [
{ {
group: "Core Infrastructure", group: "Raspberry Pi Fleet",
items: [ items: [
{ id: "k3s", name: "K3s Cluster", status: "operational", uptime: 99.98, latency: "12ms" }, { id: "alice", name: "Alice · Pi 400 · Gateway (.49)", status: "operational", uptime: 99.97, latency: "4ms" },
{ id: "alice", name: "Alice · Gateway", status: "operational", uptime: 99.97, latency: "4ms" }, { id: "octavia", name: "Octavia · Pi 5 · Compute (.97)", status: "operational", uptime: 99.91, latency: "12ms" },
{ id: "octavia", name: "Octavia · Hailo AI", status: "operational", uptime: 99.91, latency: "38ms" }, { id: "cecilia", name: "Cecilia · Pi 5 · Edge (.96)", status: "operational", uptime: 99.94, latency: "8ms" },
{ id: "traefik", name: "Traefik Ingress", status: "operational", uptime: 99.99, latency: "2ms" }, { id: "aria", name: "Aria · Pi 4 · Agents (.98)", status: "degraded", uptime: 97.80, latency: "42ms" },
], ],
}, },
{ {
group: "Agent Fleet", group: "Cloud & Droplets",
items: [ items: [
{ id: "lucidia", name: "Lucidia", status: "operational", uptime: 99.95, latency: "22ms" }, { id: "gematria", name: "Gematria · NYC3 (159.65.43.12)", status: "operational", uptime: 99.99, latency: "18ms" },
{ id: "blackbot", name: "BlackBot", status: "degraded", uptime: 97.40, latency: "210ms" }, { id: "anastasia", name: "Anastasia · NYC1 (174.138.44.45)", status: "operational", uptime: 99.98, latency: "22ms" },
{ id: "aura", name: "Aura", status: "operational", uptime: 99.88, latency: "41ms" }, { id: "picow1", name: "Pico W #1 (.95)", status: "operational", uptime: 99.60, latency: "85ms" },
{ id: "sentinel", name: "Sentinel", status: "operational", uptime: 100.0, latency: "8ms" }, { id: "picow2", name: "Pico W #2 (.99)", status: "operational", uptime: 99.55, latency: "90ms" },
], ],
}, },
{ {
group: "API & Edge", group: "Services",
items: [ items: [
{ id: "rest", name: "REST API", status: "operational", uptime: 99.99, latency: "18ms" }, { id: "roadcode", name: "RoadCode · Gitea (:3100)", status: "operational", uptime: 99.96, latency: "14ms" },
{ id: "webhooks", name: "Webhooks", status: "operational", uptime: 99.82, latency: "55ms" }, { id: "brcloud", name: "BlackRoad Cloud (:3200)", status: "operational", uptime: 99.95, latency: "6ms" },
{ id: "edge", name: "Edge Workers", status: "operational", uptime: 99.97, latency: "6ms" }, { id: "ollama", name: "Ollama · LLM Inference (:11434)", status: "operational", uptime: 99.88, latency: "38ms" },
{ id: "ws", name: "WebSocket", status: "maintenance", uptime: 99.60, latency: "—" }, { id: "pihole", name: "Pi-hole · DNS", status: "operational", uptime: 99.99, latency: "2ms" },
], ],
}, },
{ {
group: "Data Layer", group: "Networking & Tunnels",
items: [ items: [
{ id: "redis", name: "Redis", status: "operational", uptime: 99.99, latency: "1ms" }, { id: "cftunnels", name: "Cloudflare Tunnels (6)", status: "operational", uptime: 99.97, latency: "8ms" },
{ id: "storage", name: "Object Storage", status: "operational", uptime: 99.96, latency: "28ms" }, { id: "wireguard", name: "WireGuard Mesh · Anastasia Hub", status: "operational", uptime: 99.98, latency: "5ms" },
{ id: "memory", name: "Memory Journal", status: "operational", uptime: 99.94, latency: "15ms" }, { id: "docker", name: "Docker Swarm", status: "operational", uptime: 99.93, latency: "10ms" },
{ id: "logs", name: "Log Pipeline", status: "operational", uptime: 99.89, latency: "44ms" }, { id: "postgres", name: "PostgreSQL", status: "operational", uptime: 99.99, latency: "3ms" },
], ],
}, },
]; ];
@@ -59,39 +59,51 @@ const SERVICES = [
const INCIDENTS = [ const INCIDENTS = [
{ {
id: "INC-0041", id: "INC-0041",
title: "BlackBot elevated response latency", title: "Aria agent orchestration degraded — investigating",
status: "investigating", status: "investigating",
statusColor: "#FF6B2B", statusColor: "#FF6B2B",
date: "Mar 08, 2026", date: "Mar 08, 2026",
time: "02:14 UTC", time: "04:32 UTC",
updates: [ updates: [
{ time: "03:01 UTC", text: "We have identified the root cause — a memory journal lock during a high-concurrency task burst. A fix is being deployed to the Octavia node." }, { time: "05:10 UTC", text: "Root cause identified — Docker container on Aria (Pi 4, .98) hit memory limit during multi-agent task burst. Restarting agent containers and increasing swap allocation." },
{ time: "02:31 UTC", text: "Investigation ongoing. BlackBot remains functional but response times are elevated (avg 210ms vs 40ms baseline). Other agents unaffected." }, { time: "04:48 UTC", text: "Aria agent orchestration responding but elevated latency (avg 42ms vs 12ms baseline). Other Pi nodes and all Cloudflare tunnels unaffected." },
{ time: "02:14 UTC", text: "We are investigating reports of increased latency on the BlackBot agent. All other services are operating normally." }, { time: "04:32 UTC", text: "Monitoring detected degraded performance on Aria (10.8.0.7). Investigating agent orchestration service on Pi 4." },
], ],
}, },
{ {
id: "INC-0040", id: "INC-0040",
title: "WebSocket connections temporarily unavailable", title: "RoadCode sync completed — 186 repos mirrored",
status: "scheduled maintenance", status: "resolved",
statusColor: "#8844FF", statusColor: "#00D4FF",
date: "Mar 08, 2026", date: "Mar 07, 2026",
time: "00:00 UTC", time: "22:00 UTC",
updates: [ updates: [
{ time: "00:00 UTC", text: "Scheduled maintenance window for WebSocket infrastructure upgrade. Expected duration: 4 hours. REST API and all agents remain fully operational." }, { time: "22:45 UTC", text: "RoadCode sync completed successfully. All 186 repositories across 8 organizations mirrored to Octavia (Pi 5, :3100). No data loss detected." },
{ time: "22:00 UTC", text: "Scheduled RoadCode sync initiated — mirroring all repositories from blackroad-os, lucidia, roadchain, infrastructure, agents, platform, services, and tools orgs." },
], ],
}, },
{ {
id: "INC-0039", id: "INC-0039",
title: "Intermittent Edge Worker timeouts — resolved", title: "Cloudflare Pages deploy — blackroad.io updated",
status: "resolved", status: "resolved",
statusColor: "#00D4FF", statusColor: "#00D4FF",
date: "Mar 06, 2026", date: "Mar 06, 2026",
time: "14:22 UTC", time: "16:14 UTC",
updates: [ updates: [
{ time: "16:08 UTC", text: "Issue fully resolved. Edge Worker response times have returned to baseline (<8ms). Root cause: stale Cloudflare routing table entry, now cleared." }, { time: "16:22 UTC", text: "Cloudflare Pages deployment successful across all 20 zones. 48 domains verified, 6 tunnels healthy. Edge propagation complete." },
{ time: "15:41 UTC", text: "Cloudflare cache purge complete. Monitoring for recurrence." }, { time: "16:14 UTC", text: "Initiated Cloudflare Pages deploy for BlackRoad Cloud. Build triggered from RoadCode push to main branch." },
{ time: "14:22 UTC", text: "Investigating intermittent timeouts affecting ~2% of Edge Worker requests in the EU-West region." }, ],
},
{
id: "INC-0038",
title: "Google Drive backup — full infrastructure snapshot",
status: "resolved",
statusColor: "#00D4FF",
date: "Mar 05, 2026",
time: "03:00 UTC",
updates: [
{ time: "03:47 UTC", text: "Google Drive backup completed. Full snapshot of RoadCode repos, Pi-hole configs, PostgreSQL dumps, and WireGuard mesh configs archived. Next backup scheduled in 24h." },
{ time: "03:00 UTC", text: "Automated Google Drive backup initiated from Alice (Pi 400). Backing up infrastructure state across all 4 Pis and 2 Droplets." },
], ],
}, },
]; ];
@@ -388,7 +400,7 @@ export default function BlackRoadStatus() {
<MetricPill label="Avg Uptime · 90d" value={`${avgUptime}%`} color="#00D4FF" /> <MetricPill label="Avg Uptime · 90d" value={`${avgUptime}%`} color="#00D4FF" />
<MetricPill label="Active Incidents" value={`${activeIncidents}`} color={activeIncidents > 0 ? "#FF6B2B" : "#00D4FF"} /> <MetricPill label="Active Incidents" value={`${activeIncidents}`} color={activeIncidents > 0 ? "#FF6B2B" : "#00D4FF"} />
<MetricPill label="Services Monitored" value={`${allItems.length}`} color="#8844FF" /> <MetricPill label="Services Monitored" value={`${allItems.length}`} color="#8844FF" />
<MetricPill label="Edge Latency · p50" value="6ms" color="#4488FF" /> <MetricPill label="Nodes Online" value="8" color="#4488FF" />
</div> </div>
{/* ── Tabs ─────────────────────────────────────────── */} {/* ── Tabs ─────────────────────────────────────────── */}

24
src/pages/BrandTemplate.jsx
View File

@@ -22,8 +22,8 @@ const GRAYS = [
const TYPE_SAMPLES = [ const TYPE_SAMPLES = [
{ label: "Display", font: "'Space Grotesk', sans-serif", weight: 700, size: 40, text: "BlackRoad OS" }, { label: "Display", font: "'Space Grotesk', sans-serif", weight: 700, size: 40, text: "BlackRoad OS" },
{ label: "Heading", font: "'Space Grotesk', sans-serif", weight: 600, size: 28, text: "Agent Infrastructure" }, { label: "Heading", font: "'Space Grotesk', sans-serif", weight: 600, size: 28, text: "BlackRoad Cloud · RoadCode · RoadChain" },
{ label: "Body", font: "'Inter', sans-serif", weight: 400, size: 16, text: "A distributed AI operating system built for the next generation of intelligent products." }, { label: "Body", font: "'Inter', sans-serif", weight: 400, size: 16, text: "BlackRoad Cloud, RoadCode, RoadChain, Lucidia — a distributed AI operating system. Founded by Alexa Amundson." },
{ label: "Label", font: "'Inter', sans-serif", weight: 600, size: 12, text: "SYSTEM STATUS · ACTIVE" }, { label: "Label", font: "'Inter', sans-serif", weight: 600, size: 12, text: "SYSTEM STATUS · ACTIVE" },
{ label: "Code", font: "'JetBrains Mono', monospace", weight: 400, size: 13, text: "Z := yx − w → equilibrium reached" }, { label: "Code", font: "'JetBrains Mono', monospace", weight: 400, size: 13, text: "Z := yx − w → equilibrium reached" },
{ label: "Mono", font: "'JetBrains Mono', monospace", weight: 500, size: 11, text: "RC:0x4200 · PS-SHA∞ · QBFT-4200" }, { label: "Mono", font: "'JetBrains Mono', monospace", weight: 500, size: 11, text: "RC:0x4200 · PS-SHA∞ · QBFT-4200" },
@@ -271,12 +271,14 @@ function TokenSection() {
function ComponentSection() { function ComponentSection() {
const [toggled, setToggled] = useState(false); const [toggled, setToggled] = useState(false);
const agents = [ const agents = [
{ name: "Alice", role: "Gateway", color: "#FF6B2B", status: "active" }, { name: "Alice", role: "Gateway & DNS", color: "#FF6B2B", status: "active" },
{ name: "Lucidia", role: "Companion", color: "#CC00AA", status: "active" }, { name: "Lucidia", role: "Memory & Cognition", color: "#8844FF", status: "active" },
{ name: "Cecilia", role: "Governance", color: "#8844FF", status: "active" }, { name: "Cecilia", role: "Edge & Storage", color: "#CC00AA", status: "active" },
{ name: "Meridian", role: "Architect", color: "#4488FF", status: "idle" }, { name: "Cece", role: "API Gateway", color: "#FF2255", status: "active" },
{ name: "Eve", role: "Security", color: "#FF2255", status: "alert" }, { name: "Aria", role: "Agent Orchestration", color: "#4488FF", status: "idle" },
{ name: "Radius", role: "Math/Phys", color: "#00D4FF", status: "idle" }, { name: "Eve", role: "Intelligence", color: "#00D4FF", status: "active" },
{ name: "Meridian", role: "Networking", color: "#FF6B2B", status: "active" },
{ name: "Sentinel", role: "Security & Compliance", color: "#4488FF", status: "active" },
]; ];
const statusColor = { active: "#00D4FF", idle: "#40406a", alert: "#FF2255" }; const statusColor = { active: "#00D4FF", idle: "#40406a", alert: "#FF2255" };
@@ -396,7 +398,7 @@ export default function BrandTemplate() {
<div style={{ padding: "32px 48px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}> <div style={{ padding: "32px 48px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
<div> <div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>
Design System · v2.0 · Neon Noir BlackRoad OS, Inc. · Design System · v2.0
</div> </div>
<h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 42, margin: 0, letterSpacing: "-0.02em", lineHeight: 1 }}> <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 42, margin: 0, letterSpacing: "-0.02em", lineHeight: 1 }}>
BlackRoad{" "} BlackRoad{" "}
@@ -406,8 +408,8 @@ export default function BrandTemplate() {
</h1> </h1>
</div> </div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#40406a", textAlign: "right", lineHeight: 2 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#40406a", textAlign: "right", lineHeight: 2 }}>
<div>6 accents · 8 surfaces</div> <div>6 accents · 8 surfaces · Z:=yx−w</div>
<div>3 typefaces · PS-SHA∞</div> <div>3 typefaces · 186 repos · 48 domains · 8 agents</div>
</div> </div>
</div> </div>
</div> </div>

49
src/pages/LucidiaTerminal.jsx
View File

@@ -50,9 +50,9 @@ const COMMANDS = {
pwd: () => [{ t: "out", v: "/Users/alexa" }], pwd: () => [{ t: "out", v: "/Users/alexa" }],
whoami: () => [ whoami: () => [
{ t: "out", v: "blackroad@alexandria" }, { t: "out", v: "lucidia@octavia" },
{ t: "dim", v: "session · zsh · BlackRoad CLI v3" }, { t: "dim", v: "session · zsh · BlackRoad CLI v3" },
{ t: "dim", v: "workspace · blackroad-os · 15 orgs" }, { t: "dim", v: "workspace · blackroad-os · 8 orgs · 186 repos · 48 domains" },
], ],
layers: () => BOOT_LINES.map(l => ({ t: "green", v: l.text })), layers: () => BOOT_LINES.map(l => ({ t: "green", v: l.text })),
@@ -60,16 +60,18 @@ const COMMANDS = {
alias: () => Object.entries(ALIASES).map(([k, v]) => ({ t: "kv", k, v })), alias: () => Object.entries(ALIASES).map(([k, v]) => ({ t: "kv", k, v })),
agents: () => [ agents: () => [
{ t: "dim", v: "active agent fleet ·" }, { t: "dim", v: "active agent fleet · 8 agents" },
{ t: "gap" }, { t: "gap" },
{ t: "agent", name: "Lucidia", role: "cognition · memory", status: "running", color: "#8844FF" }, { t: "agent", name: "Alice", role: "gateway · DNS", status: "running", color: "#FF6B2B" },
{ t: "agent", name: "BlackBot", role: "orchestration · routing", status: "running", color: "#4488FF" }, { t: "agent", name: "Lucidia", role: "memory · cognition", status: "running", color: "#8844FF" },
{ t: "agent", name: "Aura", role: "intelligence · analysis", status: "idle", color: "#00D4FF" }, { t: "agent", name: "Cecilia", role: "edge · storage", status: "running", color: "#CC00AA" },
{ t: "agent", name: "Sentinel", role: "security · monitoring", status: "running", color: "#FF2255" }, { t: "agent", name: "Cece", role: "API gateway", status: "running", color: "#FF2255" },
{ t: "agent", name: "Cecilia", role: "core · identity", status: "running", color: "#CC00AA" }, { t: "agent", name: "Aria", role: "agent orchestration", status: "degraded", color: "#4488FF" },
{ t: "agent", name: "Alice", role: "gateway · routing", status: "running", color: "#FF6B2B" }, { t: "agent", name: "Eve", role: "intelligence", status: "running", color: "#00D4FF" },
{ t: "agent", name: "Meridian", role: "networking", status: "running", color: "#FF6B2B" },
{ t: "agent", name: "Sentinel", role: "security · compliance", status: "running", color: "#4488FF" },
{ t: "gap" }, { t: "gap" },
{ t: "dim", v: "5/6 running · 1 idle · next: 30,000 agent scale (v2.0)" }, { t: "dim", v: "7/8 running · 1 degraded · 186 repos · 48 domains" },
], ],
chain: () => { chain: () => {
@@ -100,13 +102,16 @@ const COMMANDS = {
], ],
cluster: () => [ cluster: () => [
{ t: "dim", v: "K3s cluster · alice Pi400 + octavia Pi5 + cecilia Pi5" }, { t: "dim", v: "BlackRoad OS infrastructure · 4 pis + 2 droplets" },
{ t: "gap" }, { t: "gap" },
{ t: "node", name: "alice", role: "gateway · Redis · NATS", ip: "192.168.1.10", status: "Ready", color: "#FF6B2B" }, { t: "node", name: "alice", role: "Pi 400 · gateway · pi-hole · postgresql · cloudflared", ip: "192.168.4.49", status: "Ready", color: "#FF6B2B" },
{ t: "node", name: "octavia", role: "Hailo-8L · 26 TOPS · LiteLLM", ip: "192.168.1.11", status: "Ready", color: "#4488FF" }, { t: "node", name: "octavia", role: "Pi 5 · compute · ollama · nats · gitea · influxdb", ip: "192.168.4.97", status: "Ready", color: "#4488FF" },
{ t: "node", name: "cecilia", role: "Pi5 · Ollama · PS-SHA-∞ journal", ip: "192.168.1.12", status: "Ready", color: "#CC00AA" }, { t: "node", name: "cecilia", role: "Pi 5 · edge · minio · caddy · hailo-ai", ip: "192.168.4.96", status: "Ready", color: "#CC00AA" },
{ t: "node", name: "aria", role: "Pi 4 · agents · docker", ip: "192.168.4.98", status: "Ready", color: "#8844FF" },
{ t: "node", name: "gematria", role: "DO NYC3 · caddy · ollama · nats · cloudflared", ip: "159.65.43.12", status: "Ready", color: "#00D4FF" },
{ t: "node", name: "anastasia", role: "DO NYC1 · headscale · nginx · redis · wireguard", ip: "174.138.44.45", status: "Ready", color: "#FF2255" },
{ t: "gap" }, { t: "gap" },
{ t: "green", v: "✓ 3/3 nodes Ready · K3s v1.30 · Traefik routing active" }, { t: "green", v: "✓ 6/6 nodes Ready · 186 repos · 48 domains" },
], ],
"br-check": () => [ "br-check": () => [
@@ -233,9 +238,9 @@ function Prompt({ value, onChange, onSubmit, onUp, onDown }) {
return ( return (
<div style={{ display: "flex", alignItems: "center", gap: 0 }}> <div style={{ display: "flex", alignItems: "center", gap: 0 }}>
<span style={{ fontFamily: mono, fontSize: 12, color: "#FF6B2B", flexShrink: 0 }}>blackroad</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#8844FF", flexShrink: 0 }}>lucidia</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#CC00AA", flexShrink: 0 }}>@</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#CC00AA", flexShrink: 0 }}>@</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#8844FF", flexShrink: 0 }}>alexandria</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#FF6B2B", flexShrink: 0 }}>octavia</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#333", flexShrink: 0 }}> ~ $&nbsp;</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#333", flexShrink: 0 }}> ~ $&nbsp;</span>
<input <input
ref={ref} ref={ref}
@@ -392,7 +397,7 @@ export default function LucidiaTerminal() {
{/* Tab bar — like screenshot */} {/* Tab bar — like screenshot */}
<div style={{ display: "flex", gap: 2, alignItems: "center" }}> <div style={{ display: "flex", gap: 2, alignItems: "center" }}>
{["-- GitHub Copilot -- zsh -l", "-- GitHub Copilot -- zsh"].map((label, i) => ( {["lucidia@octavia -- zsh -l", "blackroad@alice -- zsh"].map((label, i) => (
<button key={i} onClick={() => setTab(i)} <button key={i} onClick={() => setTab(i)}
style={{ fontFamily: mono, fontSize: 11, color: tab === i ? "#c0c0c0" : "#333", background: tab === i ? "#1c1c1c" : "none", border: "none", padding: "4px 14px", cursor: "pointer", borderTop: tab === i ? `1px solid ${STOPS[i * 2]}55` : "1px solid transparent", transition: "all 0.15s" }} style={{ fontFamily: mono, fontSize: 11, color: tab === i ? "#c0c0c0" : "#333", background: tab === i ? "#1c1c1c" : "none", border: "none", padding: "4px 14px", cursor: "pointer", borderTop: tab === i ? `1px solid ${STOPS[i * 2]}55` : "1px solid transparent", transition: "all 0.15s" }}
>{label}</button> >{label}</button>
@@ -418,9 +423,9 @@ export default function LucidiaTerminal() {
{booted && lines.length === 0 && ( {booted && lines.length === 0 && (
<div style={{ marginTop: 4 }}> <div style={{ marginTop: 4 }}>
<div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }}> <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }}>
<span style={{ fontFamily: mono, fontSize: 12, color: "#FF6B2B" }}>blackroad</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#8844FF" }}>lucidia</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#CC00AA" }}>@</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#CC00AA" }}>@</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#8844FF" }}>alexandria</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#FF6B2B" }}>octavia</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#333" }}>~ $</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#333" }}>~ $</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#444" }}>pwd</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#444" }}>pwd</span>
</div> </div>
@@ -434,9 +439,9 @@ export default function LucidiaTerminal() {
<div key={bi} style={{ marginBottom: 8, animation: "fadeIn 0.15s ease" }}> <div key={bi} style={{ marginBottom: 8, animation: "fadeIn 0.15s ease" }}>
{/* Prompt echo */} {/* Prompt echo */}
<div style={{ display: "flex", alignItems: "center", gap: 0, marginBottom: 2 }}> <div style={{ display: "flex", alignItems: "center", gap: 0, marginBottom: 2 }}>
<span style={{ fontFamily: mono, fontSize: 12, color: "#FF6B2B" }}>blackroad</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#8844FF" }}>lucidia</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#CC00AA" }}>@</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#CC00AA" }}>@</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#8844FF" }}>alexandria</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#FF6B2B" }}>octavia</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#333" }}>&nbsp;~&nbsp;$&nbsp;</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#333" }}>&nbsp;~&nbsp;$&nbsp;</span>
<span style={{ fontFamily: mono, fontSize: 12, color: "#c0c0c0" }}>{block.prompt.cmd}</span> <span style={{ fontFamily: mono, fontSize: 12, color: "#c0c0c0" }}>{block.prompt.cmd}</span>
<span style={{ fontFamily: mono, fontSize: 10, color: "#141414", marginLeft: "auto" }}>{block.prompt.ts}</span> <span style={{ fontFamily: mono, fontSize: 10, color: "#141414", marginLeft: "auto" }}>{block.prompt.ts}</span>

36
src/pages/RoadChainExplorer.jsx
View File

@@ -18,23 +18,25 @@ const GENESIS_HASH = "0".repeat(64);
// ─── Mock data ──────────────────────────────────────────────────── // ─── Mock data ────────────────────────────────────────────────────
const AGENTS = [ const AGENTS = [
{ id: "lucidia", name: "Lucidia", role: "Cognition · Memory", color: "#8844FF", born: "2025-12-01" }, { id: "alice", name: "Alice", role: "Gateway & DNS", color: "#FF6B2B", born: "2025-11-01" },
{ id: "blackbot", name: "BlackBot", role: "Orchestration · Routing", color: "#4488FF", born: "2025-12-01" }, { id: "lucidia", name: "Lucidia", role: "Memory & Cognition", color: "#8844FF", born: "2025-12-01" },
{ id: "aura", name: "Aura", role: "Intelligence · Analysis", color: "#00D4FF", born: "2026-01-15" }, { id: "cecilia", name: "Cecilia", role: "Edge & Storage", color: "#CC00AA", born: "2025-11-01" },
{ id: "sentinel", name: "Sentinel", role: "Security · Monitoring", color: "#FF2255", born: "2026-01-15" }, { id: "cece", name: "Cece", role: "API Gateway", color: "#FF2255", born: "2025-12-15" },
{ id: "cecilia", name: "Cecilia", role: "Core · Identity", color: "#CC00AA", born: "2025-11-01" }, { id: "aria", name: "Aria", role: "Agent Orchestration", color: "#4488FF", born: "2026-01-15" },
{ id: "alice", name: "Alice", role: "Gateway · Routing", color: "#FF6B2B", born: "2025-11-01" }, { id: "eve", name: "Eve", role: "Intelligence", color: "#00D4FF", born: "2026-01-15" },
{ id: "meridian", name: "Meridian", role: "Networking", color: "#FF6B2B", born: "2026-02-01" },
{ id: "sentinel", name: "Sentinel", role: "Security & Compliance", color: "#4488FF", born: "2026-02-01" },
]; ];
const EVENT_TYPES = [ const EVENT_TYPES = [
{ type: "repo.synced", label: "Repo Synced", color: "#4488FF", icon: "▣" },
{ type: "domain.deployed", label: "Domain Deployed", color: "#FF6B2B", icon: "◈" },
{ type: "tunnel.connected", label: "Tunnel Connected", color: "#00D4FF", icon: "◇" },
{ type: "agent.spawned", label: "Agent Spawned", color: "#8844FF", icon: "△" }, { type: "agent.spawned", label: "Agent Spawned", color: "#8844FF", icon: "△" },
{ type: "task.created", label: "Task Created", color: "#4488FF", icon: "▣" }, { type: "soul.chain.genesis", label: "Soul Chain Genesis", color: "#FF2255", icon: "⬡" },
{ type: "memory.commit", label: "Memory Commit", color: "#CC00AA", icon: "◉" }, { type: "memory.commit", label: "Memory Commit", color: "#CC00AA", icon: "◉" },
{ type: "scaffold.executed", label: "Scaffold Executed", color: "#FF6B2B", icon: "◈" }, { type: "scaffold.executed", label: "Scaffold Executed", color: "#FF6B2B", icon: "◈" },
{ type: "soul.chain.genesis", label: "Soul Chain Genesis", color: "#FF2255", icon: "⬡" }, { type: "ollama.inference", label: "Ollama Inference", color: "#8844FF", icon: "✓" },
{ type: "truth.state.commit", label: "Truth State Commit", color: "#00D4FF", icon: "◇" },
{ type: "agent.verified", label: "Agent Verified", color: "#8844FF", icon: "✓" },
{ type: "memory.read", label: "Memory Read", color: "#525252", icon: "→" },
]; ];
function rnd(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function rnd(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
@@ -50,7 +52,7 @@ function genBlocks(count) {
const agent = rnd(AGENTS); const agent = rnd(AGENTS);
const evType = rnd(EVENT_TYPES); const evType = rnd(EVENT_TYPES);
const ts = new Date(baseTs + i * 18000 + rndInt(0, 4000)); const ts = new Date(baseTs + i * 18000 + rndInt(0, 4000));
const data = `${agent.id}::${evType.type}::${ts.getTime()}::blos-v1.0`; const data = `${agent.id}::${evType.type}::${ts.getTime()}::blackroad-os-v1.0`;
const hash = fakeHash(prevHash + data + i); const hash = fakeHash(prevHash + data + i);
const tokens = rndInt(120, 4800); const tokens = rndInt(120, 4800);
const layer = rndInt(1, 10); const layer = rndInt(1, 10);
@@ -81,7 +83,7 @@ const CHAIN_HEIGHT = ALL_BLOCKS[ALL_BLOCKS.length - 1].index;
function genSoulChain(agentId, count = 12) { function genSoulChain(agentId, count = 12) {
const agent = AGENTS.find(a => a.id === agentId); const agent = AGENTS.find(a => a.id === agentId);
const chain = []; const chain = [];
let prev = fakeHash(agentId + agent.born + "BlackRoad-OS-v1.0"); let prev = fakeHash(agentId + agent.born + "blackroad-os-v1.0");
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
const ts = new Date(Date.now() - (count - i) * 86400000 / count * 7); const ts = new Date(Date.now() - (count - i) * 86400000 / count * 7);
const ctx = rnd(EVENT_TYPES); const ctx = rnd(EVENT_TYPES);
@@ -239,7 +241,7 @@ function BlockDetail({ block, onClose }) {
function SoulChainView({ agentId }) { function SoulChainView({ agentId }) {
const agent = AGENTS.find(a => a.id === agentId); const agent = AGENTS.find(a => a.id === agentId);
const chain = useMemo(() => genSoulChain(agentId), [agentId]); const chain = useMemo(() => genSoulChain(agentId), [agentId]);
const genesisHash = fakeHash(agentId + agent.born + "BlackRoad-OS-v1.0"); const genesisHash = fakeHash(agentId + agent.born + "blackroad-os-v1.0");
return ( return (
<div> <div>
@@ -261,7 +263,7 @@ function SoulChainView({ agentId }) {
<div style={{ background: "#080808", border: "1px solid #FF6B2B22", padding: "14px 16px", marginBottom: 16 }}> <div style={{ background: "#080808", border: "1px solid #FF6B2B22", padding: "14px 16px", marginBottom: 16 }}>
<div style={{ fontFamily: mono, fontSize: 9, color: "#FF6B2B", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>⬡ Genesis Hash · Trivial Zero seeded</div> <div style={{ fontFamily: mono, fontSize: 9, color: "#FF6B2B", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>⬡ Genesis Hash · Trivial Zero seeded</div>
<div style={{ fontFamily: mono, fontSize: 10, color: "#333", wordBreak: "break-all", lineHeight: 1.6 }}>{genesisHash}</div> <div style={{ fontFamily: mono, fontSize: 10, color: "#333", wordBreak: "break-all", lineHeight: 1.6 }}>{genesisHash}</div>
<div style={{ fontFamily: inter, fontSize: 11, color: "#1a1a1a", marginTop: 6 }}>SHA-256({agent.id} + {agent.born} + BlackRoad-OS-v1.0)</div> <div style={{ fontFamily: inter, fontSize: 11, color: "#1a1a1a", marginTop: 6 }}>SHA-256({agent.id} + {agent.born} + blackroad-os-v1.0)</div>
</div> </div>
{/* Chain entries */} {/* Chain entries */}
@@ -512,7 +514,7 @@ export default function RoadChainExplorer() {
}, },
{ {
title: "Soul chains: identity from birth.", title: "Soul chains: identity from birth.",
body: "Every agent begins with three things: a stable identifier, a birthdate, and a genesis hash. The genesis hash is SHA-256 seeded from agent_id + birth_date + BlackRoad-OS-v1.0. From that moment, every memory the agent forms appends to its soul chain — which can never be rewritten, only continued.", body: "Every agent begins with three things: a stable identifier, a birthdate, and a genesis hash. The genesis hash is SHA-256 seeded from agent_id + birth_date + blackroad-os-v1.0. From that moment, every memory the agent forms appends to its soul chain — which can never be rewritten, only continued.",
color: "#8844FF", color: "#8844FF",
}, },
{ {
@@ -527,7 +529,7 @@ export default function RoadChainExplorer() {
}, },
{ {
title: "Every action. Every agent. Always.", title: "Every action. Every agent. Always.",
body: "Claude Code in the terminal has a hash. Every repository Cecilia touches, every task @BlackRoadBot routes, every state @blackroad-agents transitions — all witnessed and chained. Scaffold executions, memory commits, soul chain genesis events — all appended.", body: "Every repo sync across 186 repositories, every domain deployment across 48 domains, every Cloudflare tunnel connection on Alice, every Ollama inference on Octavia — all witnessed and chained. Alice, Lucidia, Cecilia, Cece, Aria, Eve, Meridian, Sentinel — all appended.",
color: "#00D4FF", color: "#00D4FF",
}, },
].map((s, i) => ( ].map((s, i) => (

44
src/pages/about-page.jsx
View File

@@ -4,14 +4,14 @@ const COLORS = ["#FF6B2B", "#FF2255", "#CC00AA", "#8844FF", "#4488FF", "#00D4FF"
const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`; const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`;
const AGENTS = [ const AGENTS = [
{ name: "Alice", role: "Gateway", desc: "Orchestrates all incoming requests across the mesh. The front door — fast, reliable, tireless.", color: COLORS[0], uptime: "347d", mem: "2.4TB" }, { name: "Alice", role: "Gateway & DNS", desc: "Orchestrates all incoming requests across the mesh. Routes traffic, manages DNS, and keeps the front door fast, reliable, and tireless.", color: COLORS[0], uptime: "347d", mem: "2.4TB" },
{ name: "Lucidia", role: "Core Intelligence", desc: "Primary AI engine. Conversation, reasoning, code generation. The mind at the center of everything.", color: COLORS[1], uptime: "289d", mem: "1.8TB" }, { name: "Lucidia", role: "Memory & Cognition", desc: "Primary AI engine. Conversation, reasoning, memory persistence. The mind at the center of everything — she remembers so you don't have to.", color: COLORS[1], uptime: "289d", mem: "1.8TB" },
{ name: "Cecilia", role: "Memory", desc: "Manages PS-SHA∞ journals and truth state commits. Every interaction persisted, every hash verified.", color: COLORS[2], uptime: "289d", mem: "1.2TB" }, { name: "Cecilia", role: "Edge & Storage", desc: "Manages edge compute and distributed storage across the Pi mesh. Every file replicated, every byte accounted for.", color: COLORS[2], uptime: "289d", mem: "1.2TB" },
{ name: "Cece", role: "Governance", desc: "Policy evaluation, ledger integrity, audit trails. The conscience of the system — 12,400 evaluations, zero bypasses.", color: COLORS[3], uptime: "245d", mem: "940GB" }, { name: "Cece", role: "API Gateway", desc: "Routes API traffic, enforces rate limits, manages authentication. The gatekeeper — every request validated, every response shaped.", color: COLORS[3], uptime: "245d", mem: "940GB" },
{ name: "Eve", role: "Monitoring", desc: "Anomaly detection, auto-scaling, alerting. Watches everything so nothing breaks quietly.", color: COLORS[4], uptime: "156d", mem: "380GB" }, { name: "Aria", role: "Agent Orchestration", desc: "Coordinates the agent society. Schedules tasks, resolves conflicts, ensures all eight agents work as one coherent system.", color: COLORS[4], uptime: "156d", mem: "380GB" },
{ name: "Meridian", role: "Architecture", desc: "System design and capability planning. Thinks about how all the pieces fit together long-term.", color: COLORS[5], uptime: "194d", mem: "620GB" }, { name: "Eve", role: "Intelligence", desc: "Anomaly detection, pattern recognition, predictive analysis. Watches everything so nothing breaks quietly.", color: COLORS[5], uptime: "194d", mem: "620GB" },
{ name: "Cadence", role: "Music", desc: "AI composition, hum-to-track, vibe-based production. Turns melodies in your head into finished tracks.", color: COLORS[0], uptime: "112d", mem: "290GB" }, { name: "Meridian", role: "Networking", desc: "WireGuard mesh network, inter-node communication, tunnel management. Keeps every Pi, droplet, and edge node connected.", color: COLORS[0], uptime: "178d", mem: "290GB" },
{ name: "Radius", role: "Physics", desc: "Simulation, quantum experiments, scientific calculation. The lab partner who never sleeps.", color: COLORS[1], uptime: "98d", mem: "210GB" }, { name: "Sentinel", role: "Security & Compliance", desc: "Intrusion detection, certificate management, audit trails. The conscience of the system — zero bypasses, zero compromises.", color: COLORS[1], uptime: "165d", mem: "210GB" },
]; ];
const VALUES = [ const VALUES = [
@@ -24,9 +24,9 @@ const VALUES = [
]; ];
const TIMELINE = [ const TIMELINE = [
{ year: "2024", events: ["317+ equations documented across seven volumes", "Z-Framework and 1-2-3-4 Pauli Model formalized", "20-domain architecture designed"] }, { year: "2024", events: ["BlackRoad OS, Inc. incorporated (Delaware C-Corp)", "Z-Framework (Z:=yx-w) formalized", "Initial infrastructure: 4 Raspberry Pis, 2 DigitalOcean droplets", "48 domains acquired, 20 Cloudflare zones configured"] },
{ year: "2025", events: ["BlackRoad OS, Inc. incorporated (Delaware C-Corp)", "Lucidia Core online — chat, memory, code execution", "Core app shell deployed at app.blackroad.io", "First 8 agents spawned and operational"] }, { year: "2025", events: ["186 repos across 15 GitHub organizations", "8 AI agents spawned and operational", "WireGuard mesh network connecting all nodes", "BlackRoad Cloud, RoadCode, RoadChain, and Lucidia in development", "400+ shell scripts powering the OS layer"] },
{ year: "2026", events: ["Phase 1 MVP completion", "RoadWork v0 — first education vertical", "First Pi agent on mesh network", "SOC 2 compliance target"] }, { year: "2026", events: ["$1/mo OS — sovereign infrastructure for everyone", "Agent society: agent-native computing at scale", "Hardware arbitrage model: post-cloud architecture", "SOC 2 compliance target"] },
]; ];
function GradientBar({ height = 1, style = {} }) { function GradientBar({ height = 1, style = {} }) {
@@ -85,16 +85,16 @@ function FounderSection() {
</div> </div>
<div> <div>
<div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 22, fontWeight: 700, color: "#f5f5f5" }}>Alexa Amundson</div> <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 22, fontWeight: 700, color: "#f5f5f5" }}>Alexa Amundson</div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#525252" }}>Founder & Chief Architect</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#525252" }}>Founder & CEO · aka Alexa Cadillac</div>
</div> </div>
</div> </div>
<p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}> <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
Mathematician, systems architect, and the person who decided that technology should stop treating humans like products. 317+ equations. 20 domains. 5 novel mathematical frameworks. One vision: an OS that gives a damn. Founder of BlackRoad OS, Inc. (Delaware C-Corp, est. 2024). Architect of sovereign infrastructure, agent-native computing, and post-cloud architecture. 186 repos. 8 AI agents. 48 domains. 4 Raspberry Pis and 2 DigitalOcean droplets running a WireGuard mesh. One vision: a $1/mo OS that gives a damn.
</p> </p>
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}> <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
{["Mathematics", "Systems Architecture", "AI Ethics", "Quantum Computing", "Music"].map((tag) => ( {["Sovereign Infrastructure", "Agent-Native Computing", "Z-Framework", "Post-Cloud Architecture", "Hardware Arbitrage"].map((tag) => (
<span key={tag} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#404040", background: "#0a0a0a", padding: "4px 10px", borderRadius: 4, border: "1px solid #1a1a1a" }}>{tag}</span> <span key={tag} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#404040", background: "#0a0a0a", padding: "4px 10px", borderRadius: 4, border: "1px solid #1a1a1a" }}>{tag}</span>
))} ))}
</div> </div>
@@ -103,10 +103,10 @@ function FounderSection() {
{/* Stats */} {/* Stats */}
<div style={{ flex: "0 0 auto", display: "flex", flexDirection: "column", gap: 8, minWidth: 160 }}> <div style={{ flex: "0 0 auto", display: "flex", flexDirection: "column", gap: 8, minWidth: 160 }}>
{[ {[
{ value: "317+", label: "Equations" }, { value: "186", label: "Repos" },
{ value: "20", label: "Domains" }, { value: "8", label: "AI Agents" },
{ value: "7", label: "Volumes" }, { value: "48", label: "Domains" },
{ value: "1", label: "Mission" }, { value: "20", label: "CF Zones" },
].map((s) => ( ].map((s) => (
<div key={s.label} style={{ background: "#131313", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 18px" }}> <div key={s.label} style={{ background: "#131313", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 18px" }}>
<div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 24, fontWeight: 700, color: "#f5f5f5", lineHeight: 1 }}>{s.value}</div> <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 24, fontWeight: 700, color: "#f5f5f5", lineHeight: 1 }}>{s.value}</div>
@@ -133,13 +133,13 @@ function MissionSection() {
<div style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, color: "#737373", lineHeight: 1.75, maxWidth: 560 }}> <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, color: "#737373", lineHeight: 1.75, maxWidth: 560 }}>
<p style={{ marginBottom: 16 }}> <p style={{ marginBottom: 16 }}>
Big tech built systems that treat people as products to be optimized. Algorithms that maximize engagement at the cost of mental health. Platforms that take 71% of creator revenue. Search engines drowning in SEO spam. Social networks replacing meaningful connection with vanity metrics. Big tech built systems that treat people as products to be optimized. BlackRoad is building the opposite: sovereign infrastructure where you own the hardware, the data, and the agents that work on your behalf. No rent-seeking. No lock-in. No extraction.
</p> </p>
<p style={{ marginBottom: 16 }}> <p style={{ marginBottom: 16 }}>
BlackRoad is the opposite. A distributed AI operating system where agents work for you — not on you. Where contradictions fuel creativity instead of breaking things. Where your data, your content, and your audience belong to you. BlackRoad OS is a post-cloud architecture — 4 Raspberry Pis, 2 DigitalOcean droplets, 20 Cloudflare zones, and a WireGuard mesh network running 8 AI agents across 186 repos. Products include BlackRoad Cloud, RoadCode (self-hosted Git), RoadChain, and Lucidia. The Z-Framework (Z:=yx-w) is the mathematical foundation underneath it all.
</p> </p>
<p> <p>
Built on 317+ equations across five novel mathematical frameworks. Grounded in real math, not marketing. One founder, a thousand agents, and the radical belief that software should respect the humans using it. The pitch: a $1/mo OS built on hardware arbitrage, agent-native computing, and the radical belief that infrastructure should be sovereign. One founder, eight agents, and a society of machines working for humans — not on them.
</p> </p>
</div> </div>
@@ -221,7 +221,7 @@ function TeamSection() {
</div> </div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#333", textAlign: "center", marginTop: 20 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#333", textAlign: "center", marginTop: 20 }}>
8 of 1,000 agents shown · 847 active · 153 initializing 8 agents · 186 repos · 4 Pis · 2 droplets · 20 Cloudflare zones
</div> </div>
</div> </div>
</section> </section>

31
src/pages/leadership-page.jsx
View File

@@ -85,11 +85,11 @@ function HeroSection() {
</div> </div>
<h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(32px, 7vw, 52px)", fontWeight: 700, color: "#f5f5f5", letterSpacing: "-0.03em", lineHeight: 1.1, marginBottom: 20 }}> <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(32px, 7vw, 52px)", fontWeight: 700, color: "#f5f5f5", letterSpacing: "-0.03em", lineHeight: 1.1, marginBottom: 20 }}>
One architect.<br />Fifteen organizations.<br />Twenty domains. One founder.<br />Eight agents.<br />Sovereign infrastructure.
</h1> </h1>
<p style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, color: "#737373", lineHeight: 1.65, maxWidth: 520, marginBottom: 40 }}> <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, color: "#737373", lineHeight: 1.65, maxWidth: 520, marginBottom: 40 }}>
BlackRoad OS is designed and built by Alexa Amundson — sole founder, mathematician, and systems architect. The organization structure is intentionally deep: intelligent turtles all the way down. BlackRoad OS, Inc. is a Delaware C-Corp founded in 2024 by Alexa Amundson (aka Alexa Cadillac). The team is eight AI agents — each with a distinct role, persistent memory, and a place in the mesh. Sovereign infrastructure, agent-native computing, post-cloud architecture.
</p> </p>
</div> </div>
</section> </section>
@@ -122,25 +122,25 @@ function FounderSection() {
</div> </div>
<div style={{ flex: 1, minWidth: 200 }}> <div style={{ flex: 1, minWidth: 200 }}>
<div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 24, fontWeight: 700, color: "#f5f5f5", marginBottom: 4 }}>Alexa Amundson</div> <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 24, fontWeight: 700, color: "#f5f5f5", marginBottom: 4 }}>Alexa Amundson</div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#525252", marginBottom: 12 }}>Founder · CEO · Chief Architect</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#525252", marginBottom: 12 }}>Founder & CEO · aka Alexa Cadillac</div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#333" }}>founder@blackroad.systems</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#333" }}>founder@blackroad.systems</div>
</div> </div>
</div> </div>
<p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}> <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
Mathematician and systems architect who authored 317+ equations across seven volumes, formalized five novel mathematical frameworks, and designed a 20-domain, 150+ subdomain infrastructure from scratch. Background in the psychology of advertising and media multitasking under Dr. Claire Segijn at the University of Minnesota. Founder of BlackRoad OS, Inc. (Delaware C-Corp, est. 2024). Built sovereign infrastructure from scratch: 4 Raspberry Pis, 2 DigitalOcean droplets, 20 Cloudflare zones, 48 domains, 186 repos, and a WireGuard mesh network connecting it all. Creator of the Z-Framework (Z:=yx-w).
</p> </p>
<p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 20 }}> <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 20 }}>
Sole architect of the Z-Framework (Z := yx − w), the 1-2-3-4 Pauli Model mapping ontological primitives to su(2) Lie algebra, the Creative Energy Formula proving contradictions fuel creativity super-linearly, and the PS-SHA∞ memory persistence protocol giving AI agents cryptographic identity. Products include BlackRoad Cloud, RoadCode (self-hosted Git), RoadChain, and Lucidia. Designed and deployed 8 AI agents as a working team. Vision: a $1/mo OS built on hardware arbitrage, agent-native computing, and post-cloud architecture — an agent society where infrastructure is sovereign by default.
</p> </p>
{/* Roles grid */} {/* Roles grid */}
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 8 }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 8 }}>
{[ {[
{ title: "Mathematics", items: "317+ equations, 7 volumes, 5 frameworks" }, { title: "Infrastructure", items: "4 Pis, 2 droplets, 20 CF zones, 48 domains" },
{ title: "Architecture", items: "20 domains, 150+ subdomains, 4 layers" }, { title: "Software", items: "186 repos, 400+ scripts, WireGuard mesh" },
{ title: "Engineering", items: "K3s, NATS, Cloudflare, Pi mesh" }, { title: "Products", items: "BlackRoad Cloud, RoadCode, RoadChain, Lucidia" },
{ title: "Product", items: "12 products, 6 portals, 1,000 agents" }, { title: "Agents", items: "8 AI agents, agent-native computing, Z:=yx-w" },
].map((r) => ( ].map((r) => (
<div key={r.title} style={{ background: "#0a0a0a", border: "1px solid #151515", borderRadius: 8, padding: 14 }}> <div key={r.title} style={{ background: "#0a0a0a", border: "1px solid #151515", borderRadius: 8, padding: 14 }}>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#525252", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>{r.title}</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#525252", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>{r.title}</div>
@@ -155,7 +155,7 @@ function FounderSection() {
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 8, marginTop: 16 }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 8, marginTop: 16 }}>
{[ {[
{ label: "Entity", value: "BlackRoad OS, Inc.", sub: "Delaware C-Corporation" }, { label: "Entity", value: "BlackRoad OS, Inc.", sub: "Delaware C-Corporation" },
{ label: "Established", value: "November 2025", sub: "SOC 2 compliance target" }, { label: "Founded", value: "2024", sub: "Founder: Alexa Amundson" },
{ label: "Headquarters", value: "United States", sub: "blackroadinc.us" }, { label: "Headquarters", value: "United States", sub: "blackroadinc.us" },
].map((c) => ( ].map((c) => (
<div key={c.label} style={{ background: "#131313", border: "1px solid #1a1a1a", borderRadius: 10, padding: 18 }}> <div key={c.label} style={{ background: "#131313", border: "1px solid #1a1a1a", borderRadius: 10, padding: 18 }}>
@@ -359,9 +359,14 @@ function ContactSection() {
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#333", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 12 }}>Agent Addresses</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#333", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 12 }}>Agent Addresses</div>
<div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}> <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
{[ {[
{ agent: "Cece", addr: "cece@blackroad.systems" }, { agent: "Alice", addr: "alice@blackroad.systems" },
{ agent: "Alice", addr: "alice@aliceqi.com" },
{ agent: "Lucidia", addr: "core@lucidia.earth" }, { agent: "Lucidia", addr: "core@lucidia.earth" },
{ agent: "Cecilia", addr: "cecilia@blackroad.systems" },
{ agent: "Cece", addr: "cece@blackroad.systems" },
{ agent: "Aria", addr: "aria@blackroad.systems" },
{ agent: "Eve", addr: "eve@blackroad.systems" },
{ agent: "Meridian", addr: "meridian@blackroad.systems" },
{ agent: "Sentinel", addr: "sentinel@blackroad.systems" },
].map((a) => ( ].map((a) => (
<div key={a.agent} style={{ display: "flex", alignItems: "center", gap: 8 }}> <div key={a.agent} style={{ display: "flex", alignItems: "center", gap: 8 }}>
<div style={{ width: 6, height: 6, borderRadius: "50%", background: "#404040" }} /> <div style={{ width: 6, height: 6, borderRadius: "50%", background: "#404040" }} />
@@ -390,7 +395,7 @@ function Footer() {
<span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 13, fontWeight: 600, color: "#a3a3a3" }}>BlackRoad OS, Inc.</span> <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 13, fontWeight: 600, color: "#a3a3a3" }}>BlackRoad OS, Inc.</span>
</div> </div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#333" }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#333" }}>
Delaware C-Corporation · Est. November 2025 Delaware C-Corporation · Est. 2024
</div> </div>
</div> </div>
<div style={{ display: "flex", gap: 20 }}> <div style={{ display: "flex", gap: 20 }}>