Add brand-kit pages: homepage, pricing, status, docs, about; update brand colors
Co-authored-by: blackboxprogramming <118287761+blackboxprogramming@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
141
src/app/about/page.tsx
Normal file
141
src/app/about/page.tsx
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const COLORS = ["#FF6B2B", "#FF2255", "#CC00AA", "#8844FF", "#4488FF", "#00D4FF"];
|
||||||
|
const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`;
|
||||||
|
|
||||||
|
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: "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: "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: "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: "Eve", role: "Monitoring", desc: "Anomaly detection, auto-scaling, alerting. Watches everything so nothing breaks quietly.", 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: "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: "Radius", role: "Physics", desc: "Simulation, quantum experiments, scientific calculation. The lab partner who never sleeps.", color: COLORS[1], uptime: "98d", mem: "210GB" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const VALUES = [
|
||||||
|
{ num: "01", title: "Community over extraction", body: "Every design decision asks: does this serve humans, or does it serve metrics? We choose humans. Every time." },
|
||||||
|
{ num: "02", title: "Contradictions are fuel", body: "K(t) = C(t) · e^(λ|δ_t|). We don't resolve contradictions — we harness them. Creative energy scales super-linearly with tension." },
|
||||||
|
{ num: "03", title: "Messy brilliance welcome", body: "BlackRoad is built for disorganized dreamers, not spreadsheet perfectionists. Bring your chaos. The OS brings structure." },
|
||||||
|
{ num: "04", title: "Ownership is non-negotiable", body: "Your data, your content, your audience, your agents. Export everything, anytime. No lock-in. No hostage-taking." },
|
||||||
|
{ num: "05", title: "Transparency by default", body: "Every policy evaluation logged. Every decision auditable. Every confidence score visible. Zero bypasses." },
|
||||||
|
{ num: "06", title: "The math is real", body: "317+ equations. Five novel frameworks. Peer-reviewable foundations. This isn't marketing — it's mathematics." },
|
||||||
|
];
|
||||||
|
|
||||||
|
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: "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: "2026", events: ["Phase 1 MVP completion", "RoadWork v0 — first education vertical", "First Pi agent on mesh network", "SOC 2 compliance target"] },
|
||||||
|
];
|
||||||
|
|
||||||
|
function GradientBar({ height = 1, style = {} }: { height?: number; style?: React.CSSProperties }) {
|
||||||
|
return <div style={{ height, background: GRADIENT, ...style }} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
const [activeAgent, setActiveAgent] = useState<string | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#000", minHeight: "100vh", color: "#fff", fontFamily: "Inter, -apple-system, sans-serif" }}>
|
||||||
|
<GradientBar height={3} />
|
||||||
|
|
||||||
|
{/* Hero */}
|
||||||
|
<div style={{ textAlign: "center", padding: "80px 24px 56px" }}>
|
||||||
|
<div style={{ fontSize: 11, letterSpacing: "0.15em", color: "#525252", textTransform: "uppercase", marginBottom: 16 }}>About BlackRoad OS</div>
|
||||||
|
<h1 style={{ fontSize: "clamp(32px, 6vw, 52px)", fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 20px", lineHeight: 1.1 }}>
|
||||||
|
<span style={{ background: GRADIENT, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||||||
|
Built different.
|
||||||
|
</span>{" "}
|
||||||
|
<span style={{ color: "#f5f5f5" }}>By design.</span>
|
||||||
|
</h1>
|
||||||
|
<p style={{ color: "#737373", fontSize: 16, maxWidth: 560, margin: "0 auto", lineHeight: 1.7 }}>
|
||||||
|
BlackRoad OS is an AI operating system built on 317+ equations, five novel frameworks, and one stubborn belief:
|
||||||
|
technology should serve the people who use it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Agents */}
|
||||||
|
<div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 24px 64px" }}>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
|
||||||
|
<h2 style={{ fontSize: 22, fontWeight: 700, color: "#f5f5f5", margin: 0, letterSpacing: "-0.01em" }}>The Agents</h2>
|
||||||
|
<span style={{ fontSize: 12, color: "#404040" }}>{AGENTS.length} agents operational</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 12 }}>
|
||||||
|
{AGENTS.map((agent) => (
|
||||||
|
<div
|
||||||
|
key={agent.name}
|
||||||
|
onClick={() => setActiveAgent(activeAgent === agent.name ? null : agent.name)}
|
||||||
|
style={{
|
||||||
|
background: "#0a0a0a",
|
||||||
|
border: activeAgent === agent.name ? `1px solid ${agent.color}` : "1px solid #1a1a1a",
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: "18px 20px",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "border-color 0.15s",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 15, fontWeight: 600, color: "#f5f5f5" }}>{agent.name}</div>
|
||||||
|
<div style={{ fontSize: 11, color: agent.color, marginTop: 2, letterSpacing: "0.06em", textTransform: "uppercase" }}>{agent.role}</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ textAlign: "right" }}>
|
||||||
|
<div style={{ fontSize: 11, color: "#404040" }}>{agent.uptime} uptime</div>
|
||||||
|
<div style={{ fontSize: 11, color: "#404040" }}>{agent.mem}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 12, color: "#525252", lineHeight: 1.5, margin: 0 }}>{agent.desc}</p>
|
||||||
|
{activeAgent === agent.name && (
|
||||||
|
<div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${agent.color}22` }}>
|
||||||
|
<div style={{ height: 2, background: `linear-gradient(90deg, ${agent.color}, transparent)`, borderRadius: 1 }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Values */}
|
||||||
|
<div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 24px 64px" }}>
|
||||||
|
<h2 style={{ fontSize: 22, fontWeight: 700, color: "#f5f5f5", marginBottom: 24, letterSpacing: "-0.01em" }}>What we believe</h2>
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 16 }}>
|
||||||
|
{VALUES.map((v, i) => (
|
||||||
|
<div key={v.num} style={{ display: "flex", gap: 16, padding: "20px", background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 10 }}>
|
||||||
|
<div style={{ fontSize: 11, color: COLORS[i % COLORS.length], fontFamily: "'JetBrains Mono', monospace", flexShrink: 0, marginTop: 2 }}>{v.num}</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 14, fontWeight: 600, color: "#d4d4d4", marginBottom: 6 }}>{v.title}</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#525252", lineHeight: 1.6, margin: 0 }}>{v.body}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline */}
|
||||||
|
<div style={{ maxWidth: 760, margin: "0 auto", padding: "0 24px 80px" }}>
|
||||||
|
<h2 style={{ fontSize: 22, fontWeight: 700, color: "#f5f5f5", marginBottom: 32, letterSpacing: "-0.01em" }}>Timeline</h2>
|
||||||
|
<div style={{ position: "relative" }}>
|
||||||
|
<div style={{ position: "absolute", left: 40, top: 0, bottom: 0, width: 1, background: "#1a1a1a" }} />
|
||||||
|
{TIMELINE.map((t, i) => (
|
||||||
|
<div key={t.year} style={{ display: "flex", gap: 24, marginBottom: 32 }}>
|
||||||
|
<div style={{ width: 80, flexShrink: 0, textAlign: "right" }}>
|
||||||
|
<span style={{ fontSize: 13, fontWeight: 700, color: COLORS[i % COLORS.length] }}>{t.year}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
{t.events.map((ev, j) => (
|
||||||
|
<div key={j} style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 8 }}>
|
||||||
|
<div style={{ width: 5, height: 5, borderRadius: "50%", background: COLORS[i % COLORS.length], marginTop: 5, flexShrink: 0 }} />
|
||||||
|
<span style={{ fontSize: 13, color: "#737373", lineHeight: 1.5 }}>{ev}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -11,12 +11,12 @@ interface Agent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const AGENT_COLORS: Record<string, string> = {
|
const AGENT_COLORS: Record<string, string> = {
|
||||||
LUCIDIA: "#2979FF",
|
LUCIDIA: "#4488FF",
|
||||||
ALICE: "#FF1D6C",
|
ALICE: "#FF2255",
|
||||||
OCTAVIA: "#F5A623",
|
OCTAVIA: "#FF6B2B",
|
||||||
PRISM: "#9C27B0",
|
PRISM: "#CC00AA",
|
||||||
ECHO: "#00BCD4",
|
ECHO: "#00D4FF",
|
||||||
CIPHER: "#4CAF50",
|
CIPHER: "#8844FF",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function AgentDashboard() {
|
export default function AgentDashboard() {
|
||||||
@@ -42,14 +42,14 @@ export default function AgentDashboard() {
|
|||||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "32px" }}>
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "32px" }}>
|
||||||
<div>
|
<div>
|
||||||
<h1 style={{ fontSize: "28px", fontWeight: 700, margin: 0 }}>
|
<h1 style={{ fontSize: "28px", fontWeight: 700, margin: 0 }}>
|
||||||
<span style={{ background: "linear-gradient(135deg, #F5A623 0%, #FF1D6C 38.2%, #9C27B0 61.8%, #2979FF 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
<span style={{ background: "linear-gradient(90deg, #FF6B2B, #FF2255, #CC00AA, #8844FF, #4488FF, #00D4FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||||||
BlackRoad OS
|
BlackRoad OS
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{ margin: "4px 0 0", color: "#888", fontSize: "14px" }}>Agent Control Center</p>
|
<p style={{ margin: "4px 0 0", color: "#888", fontSize: "14px" }}>Agent Control Center</p>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ textAlign: "right" }}>
|
<div style={{ textAlign: "right" }}>
|
||||||
<div style={{ fontSize: "32px", fontWeight: 700, color: "#FF1D6C" }}>{totalTasks.toLocaleString()}</div>
|
<div style={{ fontSize: "32px", fontWeight: 700, color: "#FF2255" }}>{totalTasks.toLocaleString()}</div>
|
||||||
<div style={{ color: "#888", fontSize: "12px" }}>Tasks Today</div>
|
<div style={{ color: "#888", fontSize: "12px" }}>Tasks Today</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -99,10 +99,10 @@ export default function AgentDashboard() {
|
|||||||
{/* Stats Bar */}
|
{/* Stats Bar */}
|
||||||
<div style={{ marginTop: "32px", display: "flex", gap: "16px", flexWrap: "wrap" }}>
|
<div style={{ marginTop: "32px", display: "flex", gap: "16px", flexWrap: "wrap" }}>
|
||||||
{[
|
{[
|
||||||
{ label: "Total Agents", value: "30,000", color: "#FF1D6C" },
|
{ label: "Total Agents", value: "30,000", color: "#FF2255" },
|
||||||
{ label: "Online", value: agents.filter(a => a.status !== "offline").length.toString(), color: "#4CAF50" },
|
{ label: "Online", value: agents.filter(a => a.status !== "offline").length.toString(), color: "#4CAF50" },
|
||||||
{ label: "Requests/s", value: "1,247", color: "#2979FF" },
|
{ label: "Requests/s", value: "1,247", color: "#4488FF" },
|
||||||
{ label: "Avg Latency", value: "42ms", color: "#F5A623" },
|
{ label: "Avg Latency", value: "42ms", color: "#FF6B2B" },
|
||||||
].map(stat => (
|
].map(stat => (
|
||||||
<div key={stat.label} style={{ background: "#111", border: "1px solid #222", borderRadius: "8px", padding: "12px 20px", flex: "1", minWidth: "120px" }}>
|
<div key={stat.label} style={{ background: "#111", border: "1px solid #222", borderRadius: "8px", padding: "12px 20px", flex: "1", minWidth: "120px" }}>
|
||||||
<div style={{ fontSize: "24px", fontWeight: 700, color: stat.color }}>{stat.value}</div>
|
<div style={{ fontSize: "24px", fontWeight: 700, color: stat.color }}>{stat.value}</div>
|
||||||
|
|||||||
483
src/app/docs/page.tsx
Normal file
483
src/app/docs/page.tsx
Normal file
@@ -0,0 +1,483 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const COLORS = ["#FF6B2B", "#FF2255", "#CC00AA", "#8844FF", "#4488FF", "#00D4FF"];
|
||||||
|
const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`;
|
||||||
|
|
||||||
|
const SIDEBAR_SECTIONS = [
|
||||||
|
{
|
||||||
|
title: "Getting Started",
|
||||||
|
items: [
|
||||||
|
{ id: "overview", label: "Overview" },
|
||||||
|
{ id: "quickstart", label: "Quickstart" },
|
||||||
|
{ id: "architecture", label: "Architecture" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Core Concepts",
|
||||||
|
items: [
|
||||||
|
{ id: "agents", label: "Agents" },
|
||||||
|
{ id: "memory", label: "Memory & PS-SHA∞" },
|
||||||
|
{ id: "governance", label: "Governance (Cece)" },
|
||||||
|
{ id: "mesh", label: "Mesh Network" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "API Reference",
|
||||||
|
items: [
|
||||||
|
{ id: "auth", label: "Authentication" },
|
||||||
|
{ id: "agents-api", label: "Agents API" },
|
||||||
|
{ id: "memory-api", label: "Memory API" },
|
||||||
|
{ id: "governance-api",label: "Governance API" },
|
||||||
|
{ id: "websockets", label: "WebSockets" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Frameworks",
|
||||||
|
items: [
|
||||||
|
{ id: "z-framework", label: "Z-Framework" },
|
||||||
|
{ id: "pauli-model", label: "1-2-3-4 Pauli Model" },
|
||||||
|
{ id: "creative-energy", label: "Creative Energy" },
|
||||||
|
{ id: "trinary-logic", label: "Trinary Logic" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Portals",
|
||||||
|
items: [
|
||||||
|
{ id: "roadwork", label: "RoadWork" },
|
||||||
|
{ id: "roadview", label: "RoadView" },
|
||||||
|
{ id: "roadglitch", label: "RoadGlitch" },
|
||||||
|
{ id: "cashroad", label: "CashRoad" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CONTENT: Record<string, { title: string; body: React.ReactNode }> = {
|
||||||
|
overview: {
|
||||||
|
title: "Overview",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
BlackRoad OS is an AI operating system designed to replace fragmented digital infrastructure with a unified,
|
||||||
|
agent-powered platform. Built on 317+ equations and five novel frameworks, it handles everything from
|
||||||
|
education to finance to social interaction.
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
At its core, BlackRoad OS consists of persistent AI agents with individual identities, a PS-SHA∞ hash-chain
|
||||||
|
memory system, and a governance layer that ensures every decision is auditable and reversible.
|
||||||
|
</p>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderLeft: `3px solid ${COLORS[4]}`, borderRadius: "0 8px 8px 0", padding: "14px 18px", margin: "16px 0" }}>
|
||||||
|
<div style={{ fontSize: 10, color: "#525252", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>Note</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#737373", lineHeight: 1.6, margin: 0 }}>
|
||||||
|
BlackRoad OS is currently in Phase 1 MVP. The API surface is stable but evolving. Pin your SDK version.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
quickstart: {
|
||||||
|
title: "Quickstart",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 20 }}>
|
||||||
|
Get up and running with the BlackRoad SDK in under 5 minutes.
|
||||||
|
</p>
|
||||||
|
<h3 style={{ fontSize: 17, fontWeight: 600, color: "#d4d4d4", margin: "24px 0 8px" }}>Install the SDK</h3>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: "#d4d4d4", marginBottom: 16 }}>
|
||||||
|
npm install @blackroad/sdk
|
||||||
|
</div>
|
||||||
|
<h3 style={{ fontSize: 17, fontWeight: 600, color: "#d4d4d4", margin: "24px 0 8px" }}>Initialize</h3>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", marginBottom: 16, whiteSpace: "pre" }}>
|
||||||
|
{`import { BlackRoadClient } from "@blackroad/sdk";
|
||||||
|
|
||||||
|
const client = new BlackRoadClient({
|
||||||
|
apiKey: process.env.BLACKROAD_API_KEY,
|
||||||
|
});
|
||||||
|
|
||||||
|
const agent = await client.agents.spawn({
|
||||||
|
role: "assistant",
|
||||||
|
memory: true,
|
||||||
|
});`}
|
||||||
|
</div>
|
||||||
|
<h3 style={{ fontSize: 17, fontWeight: 600, color: "#d4d4d4", margin: "24px 0 8px" }}>Send a message</h3>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", whiteSpace: "pre" }}>
|
||||||
|
{`const response = await agent.chat("Help me understand PS-SHA∞");
|
||||||
|
console.log(response.content);
|
||||||
|
// "PS-SHA∞ is a persistent hash-chain memory system..."`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
architecture: {
|
||||||
|
title: "Architecture",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
BlackRoad OS is organized into four layers: Gateway, Intelligence, Memory, and Governance.
|
||||||
|
</p>
|
||||||
|
{[
|
||||||
|
{ layer: "Gateway", agent: "Alice", desc: "All requests enter through Alice. She routes, authenticates, load-balances, and maintains 2.4k concurrent WebSocket connections." },
|
||||||
|
{ layer: "Intelligence", agent: "Lucidia", desc: "Lucidia handles all reasoning, generation, and code execution. She maintains context across sessions via PS-SHA∞ commits." },
|
||||||
|
{ layer: "Memory", agent: "Cecilia", desc: "Cecilia writes every interaction to the PS-SHA∞ chain. No data is ever truly lost — only archived or rotated." },
|
||||||
|
{ layer: "Governance", agent: "Cece", desc: "Cece evaluates every policy decision. 12,400 evaluations logged. Zero bypasses. Every decision is auditable." },
|
||||||
|
].map((item) => (
|
||||||
|
<div key={item.layer} style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "16px 18px", marginBottom: 10 }}>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
|
||||||
|
<span style={{ fontSize: 14, fontWeight: 600, color: "#d4d4d4" }}>{item.layer}</span>
|
||||||
|
<span style={{ fontSize: 11, color: COLORS[2], fontFamily: "'JetBrains Mono', monospace" }}>{item.agent}</span>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#525252", lineHeight: 1.5, margin: 0 }}>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
agents: {
|
||||||
|
title: "Agents",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Agents are persistent, memory-bearing entities with individual identities. Each agent has a name, a role,
|
||||||
|
a PS-SHA∞ memory chain, and evolving capabilities.
|
||||||
|
</p>
|
||||||
|
<h3 style={{ fontSize: 17, fontWeight: 600, color: "#d4d4d4", margin: "24px 0 12px" }}>Agent lifecycle</h3>
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 16 }}>
|
||||||
|
{["spawn → activate → learn → evolve → archive"].map((s) => (
|
||||||
|
<div key={s} style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 6, padding: "10px 14px", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: COLORS[4] }}>
|
||||||
|
{s}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderLeft: `3px solid ${COLORS[0]}`, borderRadius: "0 8px 8px 0", padding: "14px 18px", margin: "16px 0" }}>
|
||||||
|
<div style={{ fontSize: 10, color: "#525252", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>Tip</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#737373", lineHeight: 1.6, margin: 0 }}>
|
||||||
|
Agents retain memory across sessions by default. Set <code style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", background: "#141414", padding: "2px 6px", borderRadius: 4 }}>memory: false</code> for stateless agents.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
memory: {
|
||||||
|
title: "Memory & PS-SHA∞",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
PS-SHA∞ (Persistent State Secure Hash, Infinite) is BlackRoad's hash-chain memory system. Every interaction
|
||||||
|
is committed as a cryptographically-linked entry. Nothing is lost. Everything is verifiable.
|
||||||
|
</p>
|
||||||
|
<h3 style={{ fontSize: 17, fontWeight: 600, color: "#d4d4d4", margin: "24px 0 8px" }}>How it works</h3>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", marginBottom: 16, whiteSpace: "pre" }}>
|
||||||
|
{`commit = {
|
||||||
|
seq: 4821,
|
||||||
|
hash: sha256(prev_hash + content),
|
||||||
|
agent: "cecilia",
|
||||||
|
timestamp: ISO8601,
|
||||||
|
content: encrypted_payload,
|
||||||
|
}`}
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7 }}>
|
||||||
|
Each commit references the previous hash, forming an immutable chain. Tampering with any entry invalidates
|
||||||
|
all subsequent entries — making the ledger self-auditing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
governance: {
|
||||||
|
title: "Governance (Cece)",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Cece is the governance agent. Every policy decision, scope assignment, and permission elevation flows through
|
||||||
|
Cece's evaluation engine. All decisions are logged to the audit ledger.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 16 }}>
|
||||||
|
{[
|
||||||
|
{ label: "Total evaluations", value: "12,400+" },
|
||||||
|
{ label: "Policy bypasses", value: "0" },
|
||||||
|
{ label: "Audit entries", value: "48,200+" },
|
||||||
|
{ label: "Ledger integrity", value: "100%" },
|
||||||
|
].map((stat) => (
|
||||||
|
<div key={stat.label} style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "12px 14px" }}>
|
||||||
|
<div style={{ fontSize: 20, fontWeight: 700, color: COLORS[3], letterSpacing: "-0.02em" }}>{stat.value}</div>
|
||||||
|
<div style={{ fontSize: 11, color: "#525252", marginTop: 2 }}>{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
mesh: {
|
||||||
|
title: "Mesh Network",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
The BlackRoad mesh network connects all agents, services, and Pi nodes into a unified compute fabric.
|
||||||
|
Traffic is routed through Alice's gateway and distributed across nodes based on load.
|
||||||
|
</p>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", marginBottom: 16 }}>
|
||||||
|
{[
|
||||||
|
{ name: "mesh.blackroad.network", latency: "22ms", uptime: "99.95%" },
|
||||||
|
{ name: "mesh.na1", latency: "18ms", uptime: "99.97%" },
|
||||||
|
{ name: "mesh.eu1", latency: "31ms", uptime: "99.93%" },
|
||||||
|
].map((node) => (
|
||||||
|
<div key={node.name} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid #111", fontSize: 12 }}>
|
||||||
|
<span style={{ color: "#a3a3a3", fontFamily: "'JetBrains Mono', monospace" }}>{node.name}</span>
|
||||||
|
<span style={{ color: "#525252" }}>{node.latency} · {node.uptime}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
auth: {
|
||||||
|
title: "Authentication",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
All API requests require a Bearer token passed in the <code style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", background: "#141414", padding: "2px 6px", borderRadius: 4 }}>Authorization</code> header.
|
||||||
|
</p>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", marginBottom: 16, whiteSpace: "pre" }}>
|
||||||
|
{`Authorization: Bearer br_live_xxxxxxxxxxxxxxxxxx`}
|
||||||
|
</div>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderLeft: `3px solid ${COLORS[1]}`, borderRadius: "0 8px 8px 0", padding: "14px 18px" }}>
|
||||||
|
<div style={{ fontSize: 10, color: "#525252", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>Warning</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#737373", lineHeight: 1.6, margin: 0 }}>
|
||||||
|
Never expose API keys in client-side code. Use environment variables and server-side proxies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"agents-api": {
|
||||||
|
title: "Agents API",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
The Agents API allows you to spawn, query, and interact with persistent AI agents.
|
||||||
|
</p>
|
||||||
|
{[
|
||||||
|
{ method: "POST", path: "/v1/agents", desc: "Spawn a new agent" },
|
||||||
|
{ method: "GET", path: "/v1/agents", desc: "List all agents" },
|
||||||
|
{ method: "GET", path: "/v1/agents/:id", desc: "Get agent details" },
|
||||||
|
{ method: "POST", path: "/v1/agents/:id/chat", desc: "Send a message" },
|
||||||
|
{ method: "DELETE", path: "/v1/agents/:id", desc: "Archive an agent" },
|
||||||
|
].map((ep) => (
|
||||||
|
<div key={ep.path + ep.method} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderBottom: "1px solid #141414", flexWrap: "wrap" }}>
|
||||||
|
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 500, color: "#a3a3a3", background: "#1a1a1a", padding: "3px 8px", borderRadius: 4, flexShrink: 0 }}>{ep.method}</span>
|
||||||
|
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4" }}>{ep.path}</span>
|
||||||
|
<span style={{ fontSize: 12, color: "#404040", marginLeft: "auto" }}>{ep.desc}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"memory-api": {
|
||||||
|
title: "Memory API",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Query and inspect PS-SHA∞ memory commits for any agent.
|
||||||
|
</p>
|
||||||
|
{[
|
||||||
|
{ method: "GET", path: "/v1/memory/:agentId", desc: "List commits" },
|
||||||
|
{ method: "GET", path: "/v1/memory/:agentId/:seq", desc: "Get specific commit" },
|
||||||
|
{ method: "POST", path: "/v1/memory/:agentId/verify",desc: "Verify chain integrity" },
|
||||||
|
].map((ep) => (
|
||||||
|
<div key={ep.path} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderBottom: "1px solid #141414", flexWrap: "wrap" }}>
|
||||||
|
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 500, color: "#a3a3a3", background: "#1a1a1a", padding: "3px 8px", borderRadius: 4, flexShrink: 0 }}>{ep.method}</span>
|
||||||
|
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4" }}>{ep.path}</span>
|
||||||
|
<span style={{ fontSize: 12, color: "#404040", marginLeft: "auto" }}>{ep.desc}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"governance-api": {
|
||||||
|
title: "Governance API",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Access Cece's governance engine to query policy evaluations, audit logs, and scope assignments.
|
||||||
|
</p>
|
||||||
|
{[
|
||||||
|
{ method: "GET", path: "/v1/governance/policies", desc: "List active policies" },
|
||||||
|
{ method: "POST", path: "/v1/governance/evaluate", desc: "Evaluate a policy" },
|
||||||
|
{ method: "GET", path: "/v1/governance/audit", desc: "Query audit log" },
|
||||||
|
{ method: "GET", path: "/v1/governance/ledger/verify", desc: "Verify ledger integrity" },
|
||||||
|
].map((ep) => (
|
||||||
|
<div key={ep.path} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderBottom: "1px solid #141414", flexWrap: "wrap" }}>
|
||||||
|
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 500, color: "#a3a3a3", background: "#1a1a1a", padding: "3px 8px", borderRadius: 4, flexShrink: 0 }}>{ep.method}</span>
|
||||||
|
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4" }}>{ep.path}</span>
|
||||||
|
<span style={{ fontSize: 12, color: "#404040", marginLeft: "auto" }}>{ep.desc}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
websockets: {
|
||||||
|
title: "WebSockets",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Real-time communication with agents via WebSocket at <code style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", background: "#141414", padding: "2px 6px", borderRadius: 4 }}>wss://ws.blackroad.io/v1</code>.
|
||||||
|
</p>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#d4d4d4", marginBottom: 16, whiteSpace: "pre" }}>
|
||||||
|
{`const ws = new WebSocket("wss://ws.blackroad.io/v1");
|
||||||
|
ws.send(JSON.stringify({
|
||||||
|
type: "auth",
|
||||||
|
token: "br_live_xxx",
|
||||||
|
}));
|
||||||
|
ws.send(JSON.stringify({
|
||||||
|
type: "chat",
|
||||||
|
agentId: "lucidia",
|
||||||
|
content: "Hello",
|
||||||
|
}));`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"z-framework": {
|
||||||
|
title: "Z-Framework",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
The Z-Framework models creative energy as a function of tension and contradictions. Rather than resolving
|
||||||
|
contradictions, the framework harnesses them as generative force.
|
||||||
|
</p>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "16px", marginBottom: 16, textAlign: "center" }}>
|
||||||
|
<div style={{ fontSize: 18, fontFamily: "'JetBrains Mono', monospace", color: "#d4d4d4" }}>
|
||||||
|
K(t) = C(t) · e<sup style={{ fontSize: 12 }}>λ|δ_t|</sup>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 12, color: "#525252", marginTop: 8 }}>Creative energy scales super-linearly with contradiction magnitude</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"pauli-model": {
|
||||||
|
title: "1-2-3-4 Pauli Model",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
The 1-2-3-4 Pauli Model maps quantum spin principles to agent coordination. Four agent types correspond
|
||||||
|
to four quantum states, enabling stable multi-agent entanglement.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||||||
|
{[
|
||||||
|
{ state: "1 (spin-up)", role: "Initiator", desc: "Creates new threads and goals" },
|
||||||
|
{ state: "2 (spin-down)", role: "Executor", desc: "Carries out defined tasks" },
|
||||||
|
{ state: "3 (superpose)", role: "Synthesizer", desc: "Merges and reconciles outputs" },
|
||||||
|
{ state: "4 (entangled)", role: "Coordinator", desc: "Manages multi-agent coherence" },
|
||||||
|
].map((item) => (
|
||||||
|
<div key={item.state} style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "12px 14px" }}>
|
||||||
|
<div style={{ fontSize: 11, color: COLORS[3], fontFamily: "'JetBrains Mono', monospace", marginBottom: 4 }}>{item.state}</div>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 600, color: "#d4d4d4", marginBottom: 4 }}>{item.role}</div>
|
||||||
|
<p style={{ fontSize: 12, color: "#525252", margin: 0 }}>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"creative-energy": {
|
||||||
|
title: "Creative Energy",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Creative Energy theory posits that productive tension between opposing forces is the primary driver of
|
||||||
|
innovation. BlackRoad OS is designed to maximize productive tension across all subsystems.
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7 }}>
|
||||||
|
The system monitors contradiction density (δ_t) across the mesh and routes high-tension problems to
|
||||||
|
agents with the highest creative energy potential.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
"trinary-logic": {
|
||||||
|
title: "Trinary Logic",
|
||||||
|
body: (
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
BlackRoad OS uses a trinary logic system (Greenlight / Yellowlight / Redlight) instead of binary
|
||||||
|
true/false. This allows for nuanced policy evaluation and graduated responses.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||||
|
{[
|
||||||
|
{ state: "Greenlight", color: "#4CAF50", desc: "Proceed — action is approved and within policy" },
|
||||||
|
{ state: "Yellowlight", color: "#FF9800", desc: "Caution — action requires additional review or context" },
|
||||||
|
{ state: "Redlight", color: COLORS[1], desc: "Stop — action violates policy or requires escalation" },
|
||||||
|
].map((item) => (
|
||||||
|
<div key={item.state} style={{ display: "flex", gap: 12, alignItems: "center", background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "12px 14px" }}>
|
||||||
|
<div style={{ width: 10, height: 10, borderRadius: "50%", background: item.color, flexShrink: 0 }} />
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 600, color: "#d4d4d4" }}>{item.state}</div>
|
||||||
|
<p style={{ fontSize: 12, color: "#525252", margin: 0 }}>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
roadwork: { title: "RoadWork", body: <p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7 }}>RoadWork is the education portal — AI tutoring that adapts to how you actually learn. K-12 curriculum with Lucidia as your personal tutor. Outcome-based pricing for institutions.</p> },
|
||||||
|
roadview: { title: "RoadView", body: <p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7 }}>RoadView is the search portal — every result scored for confidence, not clicks. No SEO gaming. No ad-driven rankings. Only verified facts surface.</p> },
|
||||||
|
roadglitch:{ title: "RoadGlitch", body: <p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7 }}>RoadGlitch is the automation portal — drag-and-drop workflow builder that generates production code in your style. Connect any API, trigger any event, deploy anywhere.</p> },
|
||||||
|
cashroad: { title: "CashRoad", body: <p style={{ fontSize: 14, color: "#737373", lineHeight: 1.7 }}>CashRoad is the financial portal — decision-time assistance, not post-spending shame. Tracks cash flow, flags risks, and suggests optimizations without judgment.</p> },
|
||||||
|
};
|
||||||
|
|
||||||
|
function GradientBar({ height = 1 }: { height?: number }) {
|
||||||
|
return <div style={{ height, background: GRADIENT }} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DocsPage() {
|
||||||
|
const [active, setActive] = useState("overview");
|
||||||
|
const doc = CONTENT[active] ?? CONTENT["overview"];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#000", minHeight: "100vh", color: "#fff", fontFamily: "Inter, -apple-system, sans-serif", display: "flex", flexDirection: "column" }}>
|
||||||
|
<GradientBar height={3} />
|
||||||
|
|
||||||
|
<div style={{ display: "flex", flex: 1, maxWidth: 1200, margin: "0 auto", width: "100%" }}>
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div style={{
|
||||||
|
width: 220, flexShrink: 0, padding: "32px 0 32px 24px",
|
||||||
|
borderRight: "1px solid #111", position: "sticky", top: 52, height: "calc(100vh - 52px)", overflowY: "auto",
|
||||||
|
}}>
|
||||||
|
{SIDEBAR_SECTIONS.map((section) => (
|
||||||
|
<div key={section.title} style={{ marginBottom: 24 }}>
|
||||||
|
<div style={{ fontSize: 10, color: "#404040", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 6, paddingLeft: 8 }}>
|
||||||
|
{section.title}
|
||||||
|
</div>
|
||||||
|
{section.items.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => setActive(item.id)}
|
||||||
|
style={{
|
||||||
|
display: "block", width: "100%", textAlign: "left",
|
||||||
|
padding: "5px 8px", borderRadius: 5, border: "none",
|
||||||
|
background: active === item.id ? "#1a1a1a" : "transparent",
|
||||||
|
color: active === item.id ? "#f5f5f5" : "#525252",
|
||||||
|
fontSize: 13, cursor: "pointer", marginBottom: 1,
|
||||||
|
transition: "color 0.1s",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div style={{ flex: 1, padding: "40px 48px", maxWidth: 720 }}>
|
||||||
|
<h1 style={{ fontSize: "clamp(24px, 4vw, 32px)", fontWeight: 700, color: "#f5f5f5", letterSpacing: "-0.02em", margin: "0 0 20px" }}>
|
||||||
|
{doc.title}
|
||||||
|
</h1>
|
||||||
|
<div style={{ height: 2, background: GRADIENT, borderRadius: 1, marginBottom: 28 }} />
|
||||||
|
{doc.body}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -35,7 +35,7 @@ export default function FleetPage() {
|
|||||||
onClick={() => setSelected(selected === node.name ? null : node.name)}
|
onClick={() => setSelected(selected === node.name ? null : node.name)}
|
||||||
style={{
|
style={{
|
||||||
background: "#111",
|
background: "#111",
|
||||||
border: selected === node.name ? "1px solid #FF1D6C" : "1px solid #222",
|
border: selected === node.name ? "1px solid #FF2255" : "1px solid #222",
|
||||||
borderRadius: "10px",
|
borderRadius: "10px",
|
||||||
padding: "16px 20px",
|
padding: "16px 20px",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
@@ -55,7 +55,7 @@ export default function FleetPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ textAlign: "right" }}>
|
<div style={{ textAlign: "right" }}>
|
||||||
<div style={{ fontWeight: 600, color: "#FF1D6C" }}>{node.agents.toLocaleString()}</div>
|
<div style={{ fontWeight: 600, color: "#FF2255" }}>{node.agents.toLocaleString()}</div>
|
||||||
<div style={{ color: "#666", fontSize: "12px" }}>agents</div>
|
<div style={{ color: "#666", fontSize: "12px" }}>agents</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -66,7 +66,7 @@ export default function FleetPage() {
|
|||||||
<Stat label="Load" value={node.load || "N/A"} />
|
<Stat label="Load" value={node.load || "N/A"} />
|
||||||
<Stat label="Uptime" value={node.uptime || "N/A"} />
|
<Stat label="Uptime" value={node.uptime || "N/A"} />
|
||||||
<div style={{ marginLeft: "auto", display: "flex", gap: "8px" }}>
|
<div style={{ marginLeft: "auto", display: "flex", gap: "8px" }}>
|
||||||
<button style={{ background: "#1a1a2e", border: "1px solid #2979FF", color: "#2979FF", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px" }}>
|
<button style={{ background: "#1a1a2e", border: "1px solid #4488FF", color: "#4488FF", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px" }}>
|
||||||
SSH
|
SSH
|
||||||
</button>
|
</button>
|
||||||
<button style={{ background: "#1a1a1a", border: "1px solid #333", color: "#888", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px" }}>
|
<button style={{ background: "#1a1a1a", border: "1px solid #333", color: "#888", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px" }}>
|
||||||
|
|||||||
@@ -6,7 +6,16 @@ export const metadata: Metadata = {
|
|||||||
description: "Your AI. Your Hardware. Your Rules.",
|
description: "Your AI. Your Hardware. Your Rules.",
|
||||||
};
|
};
|
||||||
|
|
||||||
const NAV = [
|
const BRAND_GRADIENT = "linear-gradient(90deg, #FF6B2B, #FF2255, #CC00AA, #8844FF, #4488FF, #00D4FF)";
|
||||||
|
|
||||||
|
const NAV_PUBLIC = [
|
||||||
|
{ href: "/pricing", label: "Pricing" },
|
||||||
|
{ href: "/docs", label: "Docs" },
|
||||||
|
{ href: "/about", label: "About" },
|
||||||
|
{ href: "/status", label: "Status" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const NAV_APP = [
|
||||||
{ href: "/dashboard", label: "Dashboard", icon: "⬡" },
|
{ href: "/dashboard", label: "Dashboard", icon: "⬡" },
|
||||||
{ href: "/worlds", label: "Worlds", icon: "🌍" },
|
{ href: "/worlds", label: "Worlds", icon: "🌍" },
|
||||||
{ href: "/fleet", label: "Fleet", icon: "🍓" },
|
{ href: "/fleet", label: "Fleet", icon: "🍓" },
|
||||||
@@ -17,41 +26,54 @@ const NAV = [
|
|||||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body style={{ margin: 0, background: "#050505", color: "#e0e0e0",
|
<body style={{
|
||||||
fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif",
|
margin: 0, background: "#000", color: "#e0e0e0",
|
||||||
minHeight: "100vh", display: "flex", flexDirection: "column" }}>
|
fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif",
|
||||||
|
minHeight: "100vh", display: "flex", flexDirection: "column",
|
||||||
|
}}>
|
||||||
|
|
||||||
<nav style={{
|
<nav style={{
|
||||||
display: "flex", alignItems: "center",
|
display: "flex", alignItems: "center",
|
||||||
borderBottom: "1px solid #1a1a1a",
|
borderBottom: "1px solid #111",
|
||||||
padding: "0 1.5rem", height: 52,
|
padding: "0 1.5rem", height: 52,
|
||||||
position: "sticky", top: 0,
|
position: "sticky", top: 0,
|
||||||
background: "#050505cc", backdropFilter: "blur(12px)", zIndex: 100,
|
background: "#000000cc", backdropFilter: "blur(12px)", zIndex: 100,
|
||||||
}}>
|
}}>
|
||||||
<Link href="/" style={{ textDecoration: "none", marginRight: "1.5rem" }}>
|
<Link href="/" style={{ textDecoration: "none", marginRight: "1.5rem" }}>
|
||||||
<span style={{
|
<span style={{
|
||||||
fontWeight: 800, fontSize: 15, letterSpacing: "0.05em",
|
fontWeight: 800, fontSize: 15, letterSpacing: "0.05em",
|
||||||
background: "linear-gradient(135deg, #F5A623, #FF1D6C, #9C27B0, #2979FF)",
|
background: BRAND_GRADIENT,
|
||||||
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
||||||
}}>BLACKROAD OS</span>
|
}}>BLACKROAD OS</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div style={{ display: "flex", gap: 4, flex: 1 }}>
|
<div style={{ display: "flex", gap: 2, flex: 1, alignItems: "center" }}>
|
||||||
{NAV.map(({ href, label, icon }) => (
|
{NAV_PUBLIC.map(({ href, label }) => (
|
||||||
<Link key={href} href={href} style={{
|
<Link key={href} href={href} style={{
|
||||||
display: "flex", alignItems: "center", gap: 6,
|
|
||||||
padding: "6px 12px", borderRadius: 6,
|
padding: "6px 12px", borderRadius: 6,
|
||||||
textDecoration: "none", color: "#777", fontSize: 13, fontWeight: 500,
|
textDecoration: "none", color: "#525252", fontSize: 13, fontWeight: 500,
|
||||||
}}>
|
}}>
|
||||||
<span>{icon}</span><span>{label}</span>
|
{label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div style={{ width: 1, height: 18, background: "#1a1a1a", margin: "0 6px" }} />
|
||||||
|
|
||||||
|
{NAV_APP.map(({ href, label, icon }) => (
|
||||||
|
<Link key={href} href={href} style={{
|
||||||
|
display: "flex", alignItems: "center", gap: 5,
|
||||||
|
padding: "6px 10px", borderRadius: 6,
|
||||||
|
textDecoration: "none", color: "#404040", fontSize: 12, fontWeight: 500,
|
||||||
|
}}>
|
||||||
|
<span style={{ fontSize: 11 }}>{icon}</span>
|
||||||
|
<span>{label}</span>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||||
<div style={{ width: 7, height: 7, borderRadius: "50%",
|
<div style={{ width: 6, height: 6, borderRadius: "50%", background: "#4CAF50", boxShadow: "0 0 5px #4CAF50" }} />
|
||||||
background: "#4CAF50", boxShadow: "0 0 6px #4CAF50" }} />
|
<span style={{ color: "#404040", fontSize: 11 }}>online</span>
|
||||||
<span style={{ color: "#555", fontSize: 11 }}>Pi fleet online</span>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -59,12 +81,23 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||||||
|
|
||||||
<footer style={{
|
<footer style={{
|
||||||
borderTop: "1px solid #111", padding: "1rem 1.5rem",
|
borderTop: "1px solid #111", padding: "1rem 1.5rem",
|
||||||
display: "flex", justifyContent: "space-between",
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||||
}}>
|
}}>
|
||||||
<span style={{ color: "#333", fontSize: 11 }}>
|
<span style={{ color: "#262626", fontSize: 11 }}>
|
||||||
© 2026 BlackRoad OS, Inc. — All rights reserved.
|
© 2026 BlackRoad OS, Inc. — All rights reserved.
|
||||||
</span>
|
</span>
|
||||||
<span style={{ color: "#333", fontSize: 11 }}>aria64 + alice</span>
|
<div style={{ display: "flex", gap: 16 }}>
|
||||||
|
{[
|
||||||
|
{ href: "/pricing", label: "Pricing" },
|
||||||
|
{ href: "/docs", label: "Docs" },
|
||||||
|
{ href: "/about", label: "About" },
|
||||||
|
{ href: "/status", label: "Status" },
|
||||||
|
].map(({ href, label }) => (
|
||||||
|
<Link key={href} href={href} style={{ color: "#262626", fontSize: 11, textDecoration: "none" }}>
|
||||||
|
{label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ const MOCK_CHAIN: MemoryEntry[] = [
|
|||||||
{ hash: "980831ab", prev_hash: "32e7558c", key: "security.hardened", content: "CIS Level 1 applied to all Pi nodes", type: "commitment", truth_state: 1, timestamp: "2026-02-10T16:55:12Z" },
|
{ hash: "980831ab", prev_hash: "32e7558c", key: "security.hardened", content: "CIS Level 1 applied to all Pi nodes", type: "commitment", truth_state: 1, timestamp: "2026-02-10T16:55:12Z" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const TYPE_COLORS = { fact: "#2979FF", observation: "#F5A623", inference: "#9C27B0", commitment: "#FF1D6C" };
|
const TYPE_COLORS = { fact: "#4488FF", observation: "#FF6B2B", inference: "#CC00AA", commitment: "#FF2255" };
|
||||||
const TRUTH_ICONS = { 1: { icon: "✓", color: "#4CAF50" }, 0: { icon: "?", color: "#FF9800" }, "-1": { icon: "✗", color: "#F44336" } };
|
const TRUTH_ICONS = { 1: { icon: "✓", color: "#4CAF50" }, 0: { icon: "?", color: "#FF9800" }, "-1": { icon: "✗", color: "#F44336" } };
|
||||||
|
|
||||||
export default function MemoryPage() {
|
export default function MemoryPage() {
|
||||||
|
|||||||
200
src/app/page.tsx
200
src/app/page.tsx
@@ -1,4 +1,198 @@
|
|||||||
import { redirect } from "next/navigation";
|
"use client";
|
||||||
export default function Home() {
|
|
||||||
redirect("/dashboard");
|
import { useState, useEffect, useRef } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const COLORS = ["#FF6B2B", "#FF2255", "#CC00AA", "#8844FF", "#4488FF", "#00D4FF"];
|
||||||
|
const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`;
|
||||||
|
|
||||||
|
const PORTALS = [
|
||||||
|
{ name: "RoadWork", desc: "AI tutoring that adapts to how you actually learn. Not how a textbook thinks you should.", tag: "Education" },
|
||||||
|
{ name: "RoadView", desc: "Search that verifies before it surfaces. Every result scored for confidence, not clicks.", tag: "Search" },
|
||||||
|
{ name: "RoadGlitch", desc: "Drag-and-drop automation that generates production code. Your codebase, your style.", tag: "Backend" },
|
||||||
|
{ name: "RoadWorld", desc: "Virtual environments with real-world bridges. 80% creator revenue. You own everything.", tag: "Worlds" },
|
||||||
|
{ name: "BackRoad", desc: "Social without the sickness. No vanity metrics. No addiction mechanics. Just people.", tag: "Social" },
|
||||||
|
{ name: "CashRoad", desc: "Financial clarity without judgment. Decision-time assistance, not post-spending shame.", tag: "Finance" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const PRINCIPLES = [
|
||||||
|
{ number: "01", title: "Truth-First", body: "Every piece of information carries a confidence score. No SEO gaming. No ad-driven rankings. Only verified facts surface." },
|
||||||
|
{ number: "02", title: "Creator-Owned", body: "80% revenue share. Your data, your content, your audience. Portable identity across every portal in the ecosystem." },
|
||||||
|
{ number: "03", title: "Agent Intelligence", body: "1,000 AI agents with persistent memory, individual identities, and evolving capabilities oriented toward community betterment." },
|
||||||
|
{ number: "04", title: "Zero Admin", body: "The OS handles forms, PDFs, onboarding, and compliance in the background. Admin becomes invisible, not a life event." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const STATS = [
|
||||||
|
{ value: "1,000", label: "AI Agents" },
|
||||||
|
{ value: "20", label: "Domains" },
|
||||||
|
{ value: "150+", label: "Subdomains" },
|
||||||
|
{ value: "80%", label: "Creator Revenue"},
|
||||||
|
];
|
||||||
|
|
||||||
|
function GradientBar({ height = 2, style = {} }: { height?: number; style?: React.CSSProperties }) {
|
||||||
|
return <div style={{ height, background: GRADIENT, borderRadius: 2, ...style }} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const [hovered, setHovered] = useState<string | null>(null);
|
||||||
|
const heroRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [scrollY, setScrollY] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onScroll = () => setScrollY(window.scrollY);
|
||||||
|
window.addEventListener("scroll", onScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener("scroll", onScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#000", minHeight: "100vh", color: "#fff", fontFamily: "Inter, -apple-system, sans-serif" }}>
|
||||||
|
<GradientBar height={3} />
|
||||||
|
|
||||||
|
{/* Hero */}
|
||||||
|
<div
|
||||||
|
ref={heroRef}
|
||||||
|
style={{
|
||||||
|
minHeight: "90vh", display: "flex", flexDirection: "column",
|
||||||
|
justifyContent: "center", alignItems: "center", textAlign: "center",
|
||||||
|
padding: "80px 24px", position: "relative", overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{
|
||||||
|
position: "absolute", width: 600, height: 600, borderRadius: "50%",
|
||||||
|
background: `radial-gradient(circle, ${COLORS[3]}15 0%, transparent 70%)`,
|
||||||
|
top: "50%", left: "50%",
|
||||||
|
transform: `translate(-50%, calc(-50% - ${scrollY * 0.3}px))`,
|
||||||
|
pointerEvents: "none",
|
||||||
|
}} />
|
||||||
|
|
||||||
|
<div style={{ fontSize: 11, letterSpacing: "0.2em", color: "#525252", textTransform: "uppercase", marginBottom: 20 }}>
|
||||||
|
BlackRoad OS · Your AI. Your Hardware. Your Rules.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 style={{ fontSize: "clamp(40px, 8vw, 80px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.05, margin: "0 0 24px", maxWidth: 900 }}>
|
||||||
|
<span style={{ background: GRADIENT, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||||||
|
The OS that doesn't
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<span style={{ color: "#f5f5f5" }}>work against you.</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p style={{ color: "#737373", fontSize: 18, maxWidth: 560, lineHeight: 1.7, marginBottom: 40 }}>
|
||||||
|
An AI operating system built on 317+ equations, 1,000 persistent agents, and one belief:
|
||||||
|
technology should serve the people who use it.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
|
||||||
|
<Link href="/pricing" style={{ textDecoration: "none" }}>
|
||||||
|
<button style={{
|
||||||
|
background: GRADIENT, color: "#fff", border: "none",
|
||||||
|
padding: "12px 28px", borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: "pointer",
|
||||||
|
}}>
|
||||||
|
Get started free
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/docs" style={{ textDecoration: "none" }}>
|
||||||
|
<button style={{
|
||||||
|
background: "transparent", color: "#a3a3a3",
|
||||||
|
border: "1px solid #262626", padding: "12px 28px", borderRadius: 8,
|
||||||
|
fontSize: 14, fontWeight: 600, cursor: "pointer",
|
||||||
|
}}>
|
||||||
|
Read the docs
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: "flex", gap: 48, marginTop: 72, flexWrap: "wrap", justifyContent: "center" }}>
|
||||||
|
{STATS.map((stat, i) => (
|
||||||
|
<div key={stat.label} style={{ textAlign: "center" }}>
|
||||||
|
<div style={{ fontSize: 28, fontWeight: 700, color: COLORS[i % COLORS.length], letterSpacing: "-0.02em" }}>{stat.value}</div>
|
||||||
|
<div style={{ fontSize: 12, color: "#525252", marginTop: 2 }}>{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Portals */}
|
||||||
|
<div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 24px 80px" }}>
|
||||||
|
<div style={{ textAlign: "center", marginBottom: 48 }}>
|
||||||
|
<div style={{ fontSize: 11, letterSpacing: "0.15em", color: "#525252", textTransform: "uppercase", marginBottom: 12 }}>
|
||||||
|
20 domains. 150+ subdomains.
|
||||||
|
</div>
|
||||||
|
<h2 style={{ fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, color: "#f5f5f5", margin: 0, letterSpacing: "-0.02em" }}>
|
||||||
|
One OS to rule them all.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 12 }}>
|
||||||
|
{PORTALS.map((portal, i) => (
|
||||||
|
<div
|
||||||
|
key={portal.name}
|
||||||
|
onMouseEnter={() => setHovered(portal.name)}
|
||||||
|
onMouseLeave={() => setHovered(null)}
|
||||||
|
style={{
|
||||||
|
background: "#0a0a0a",
|
||||||
|
border: hovered === portal.name ? `1px solid ${COLORS[i % COLORS.length]}` : "1px solid #1a1a1a",
|
||||||
|
borderRadius: 10, padding: "20px 22px",
|
||||||
|
transition: "border-color 0.15s", cursor: "default",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
|
||||||
|
<span style={{ fontSize: 15, fontWeight: 600, color: "#f5f5f5" }}>{portal.name}</span>
|
||||||
|
<span style={{
|
||||||
|
fontSize: 10, color: COLORS[i % COLORS.length], letterSpacing: "0.08em",
|
||||||
|
textTransform: "uppercase", background: `${COLORS[i % COLORS.length]}18`,
|
||||||
|
padding: "2px 8px", borderRadius: 20,
|
||||||
|
}}>
|
||||||
|
{portal.tag}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#525252", lineHeight: 1.5, margin: 0 }}>{portal.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Principles */}
|
||||||
|
<div style={{ background: "#050505", borderTop: "1px solid #111", borderBottom: "1px solid #111", padding: "64px 24px" }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: "0 auto" }}>
|
||||||
|
<div style={{ textAlign: "center", marginBottom: 48 }}>
|
||||||
|
<h2 style={{ fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, color: "#f5f5f5", margin: 0, letterSpacing: "-0.02em" }}>
|
||||||
|
How it works
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 24 }}>
|
||||||
|
{PRINCIPLES.map((p, i) => (
|
||||||
|
<div key={p.number} style={{ display: "flex", gap: 16 }}>
|
||||||
|
<div style={{ fontSize: 11, color: COLORS[i % COLORS.length], fontFamily: "'JetBrains Mono', monospace", flexShrink: 0, marginTop: 3 }}>{p.number}</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 15, fontWeight: 600, color: "#d4d4d4", marginBottom: 6 }}>{p.title}</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#525252", lineHeight: 1.6, margin: 0 }}>{p.body}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div style={{ textAlign: "center", padding: "80px 24px" }}>
|
||||||
|
<h2 style={{ fontSize: "clamp(24px, 4vw, 40px)", fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 16px" }}>
|
||||||
|
<span style={{ background: GRADIENT, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||||||
|
Ready to get out of your own way?
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p style={{ color: "#737373", fontSize: 16, marginBottom: 32 }}>
|
||||||
|
Free plan. No credit card. No dark patterns.
|
||||||
|
</p>
|
||||||
|
<Link href="/pricing" style={{ textDecoration: "none" }}>
|
||||||
|
<button style={{
|
||||||
|
background: GRADIENT, color: "#fff", border: "none",
|
||||||
|
padding: "14px 36px", borderRadius: 8, fontSize: 15, fontWeight: 600, cursor: "pointer",
|
||||||
|
}}>
|
||||||
|
Start for free
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
237
src/app/pricing/page.tsx
Normal file
237
src/app/pricing/page.tsx
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const COLORS = ["#FF6B2B", "#FF2255", "#CC00AA", "#8844FF", "#4488FF", "#00D4FF"];
|
||||||
|
const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`;
|
||||||
|
|
||||||
|
const PLANS = [
|
||||||
|
{
|
||||||
|
name: "Open",
|
||||||
|
price: "0",
|
||||||
|
period: "",
|
||||||
|
desc: "For learners, explorers, and anyone who just wants to see what this is.",
|
||||||
|
features: [
|
||||||
|
"Full K-12 RoadWork access",
|
||||||
|
"Lucidia chat — 50 messages/day",
|
||||||
|
"RoadView search — unlimited",
|
||||||
|
"BackRoad social — full access",
|
||||||
|
"1 AI agent companion",
|
||||||
|
"Community support",
|
||||||
|
],
|
||||||
|
cta: "Get Started",
|
||||||
|
highlight: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Builder",
|
||||||
|
price: "10",
|
||||||
|
period: "/mo",
|
||||||
|
desc: "For creators, students, and independent professionals building real things.",
|
||||||
|
features: [
|
||||||
|
"Everything in Open",
|
||||||
|
"Unlimited Lucidia chat + code",
|
||||||
|
"RoadGlitch automations — 100/mo",
|
||||||
|
"SoundRoad — 10 tracks/mo",
|
||||||
|
"Genesis Road — basic 3D",
|
||||||
|
"VaultRoad second brain — 10GB",
|
||||||
|
"5 AI agents with memory",
|
||||||
|
"CashRoad financial co-pilot",
|
||||||
|
"Priority support",
|
||||||
|
],
|
||||||
|
cta: "Start Building",
|
||||||
|
highlight: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Studio",
|
||||||
|
price: "29",
|
||||||
|
period: "/mo",
|
||||||
|
desc: "For teams, studios, and serious creators who need the full stack.",
|
||||||
|
features: [
|
||||||
|
"Everything in Builder",
|
||||||
|
"Unlimited automations",
|
||||||
|
"SoundRoad — unlimited tracks",
|
||||||
|
"Genesis Road — full engine",
|
||||||
|
"VaultRoad — 100GB",
|
||||||
|
"25 AI agents with persistent memory",
|
||||||
|
"RoadWorld — publish & earn",
|
||||||
|
"80% revenue on all content",
|
||||||
|
"API access",
|
||||||
|
"Team collaboration — up to 5",
|
||||||
|
],
|
||||||
|
cta: "Go Studio",
|
||||||
|
highlight: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Enterprise",
|
||||||
|
price: "Custom",
|
||||||
|
period: "",
|
||||||
|
desc: "For schools, organizations, and companies that need the OS at scale.",
|
||||||
|
features: [
|
||||||
|
"Everything in Studio",
|
||||||
|
"Unlimited agents",
|
||||||
|
"Custom agent training",
|
||||||
|
"Dedicated infrastructure",
|
||||||
|
"SSO / SAML / SCIM",
|
||||||
|
"Compliance & audit logs",
|
||||||
|
"Outcome-based pricing for schools",
|
||||||
|
"SLA guarantee",
|
||||||
|
"Dedicated support engineer",
|
||||||
|
],
|
||||||
|
cta: "Talk to Us",
|
||||||
|
highlight: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const FAQS = [
|
||||||
|
{ q: "What's outcome-based pricing?", a: "Schools pay per successful student outcome — not per seat. If a student doesn't learn, you don't pay. We believe in aligning incentives with actual results." },
|
||||||
|
{ q: "Can I switch plans anytime?", a: "Yes. Upgrade instantly, downgrade at end of billing cycle. No contracts, no cancellation fees, no friction." },
|
||||||
|
{ q: "What does 80% creator revenue mean?", a: "When you publish content, sell assets, or earn through the ecosystem, you keep 80%. Compare that to Roblox at 29%, YouTube at 55%, or Spotify at roughly 0.3%." },
|
||||||
|
{ q: "What's an AI agent with memory?", a: "Each agent has persistent memory via PS-SHA∞ hashing. They remember every interaction, evolve over time, and develop individual capabilities. They're teammates, not tools." },
|
||||||
|
{ q: "Is my data portable?", a: "Always. Export everything — your content, your audience contacts, your agent configurations, your vault. You own it all." },
|
||||||
|
{ q: "Do you sell my data?", a: "No. Ever. Your data trains nothing except your own agents. BlackRoad is funded by subscriptions and creator revenue sharing — not surveillance." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const COMPARISONS = [
|
||||||
|
{ feature: "Creator revenue share", blackroad: "80%", others: "29–55%" },
|
||||||
|
{ feature: "Data ownership", blackroad: "Full export", others: "Platform-locked" },
|
||||||
|
{ feature: "AI agents with memory", blackroad: "Up to 1,000", others: "None" },
|
||||||
|
{ feature: "Search verification", blackroad: "Confidence scored", others: "SEO-driven" },
|
||||||
|
{ feature: "Social metrics", blackroad: "Hidden by design", others: "Vanity-first" },
|
||||||
|
{ feature: "Admin automation", blackroad: "Zero-friction OS", others: "Manual" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function GradientBar({ height = 2, style = {} }: { height?: number; style?: React.CSSProperties }) {
|
||||||
|
return <div style={{ height, background: GRADIENT, borderRadius: 2, ...style }} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PricingPage() {
|
||||||
|
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#000", minHeight: "100vh", color: "#fff", fontFamily: "Inter, -apple-system, sans-serif" }}>
|
||||||
|
<GradientBar height={3} />
|
||||||
|
|
||||||
|
{/* Hero */}
|
||||||
|
<div style={{ textAlign: "center", padding: "72px 24px 48px" }}>
|
||||||
|
<div style={{ fontSize: 11, letterSpacing: "0.15em", color: "#525252", textTransform: "uppercase", marginBottom: 16 }}>
|
||||||
|
Pricing
|
||||||
|
</div>
|
||||||
|
<h1 style={{ fontSize: "clamp(32px, 6vw, 52px)", fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 16px", lineHeight: 1.1 }}>
|
||||||
|
<span style={{ background: GRADIENT, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||||||
|
Fair pricing.
|
||||||
|
</span>{" "}
|
||||||
|
<span style={{ color: "#f5f5f5" }}>Finally.</span>
|
||||||
|
</h1>
|
||||||
|
<p style={{ color: "#737373", fontSize: 16, maxWidth: 520, margin: "0 auto", lineHeight: 1.6 }}>
|
||||||
|
No surveillance. No dark patterns. No VC pressure to extract. Just tools that cost less than what they replace.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Plans */}
|
||||||
|
<div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 24px 64px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }}>
|
||||||
|
{PLANS.map((plan, i) => (
|
||||||
|
<div
|
||||||
|
key={plan.name}
|
||||||
|
style={{
|
||||||
|
background: "#0a0a0a",
|
||||||
|
border: plan.highlight ? `1px solid ${COLORS[1]}` : "1px solid #1a1a1a",
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: "28px 24px",
|
||||||
|
position: "relative",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{plan.highlight && (
|
||||||
|
<div style={{
|
||||||
|
position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
|
||||||
|
background: COLORS[1], color: "#fff", fontSize: 10, fontWeight: 700,
|
||||||
|
padding: "3px 12px", borderRadius: 20, letterSpacing: "0.08em", textTransform: "uppercase",
|
||||||
|
}}>
|
||||||
|
Most Popular
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{plan.highlight && (
|
||||||
|
<GradientBar height={2} style={{ position: "absolute", top: 0, left: 0, right: 0, borderRadius: "12px 12px 0 0" }} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{ fontSize: 11, letterSpacing: "0.12em", color: COLORS[i % COLORS.length], textTransform: "uppercase", marginBottom: 8 }}>
|
||||||
|
{plan.name}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", alignItems: "baseline", gap: 2, marginBottom: 8 }}>
|
||||||
|
{plan.price !== "Custom" && <span style={{ fontSize: 13, color: "#525252" }}>$</span>}
|
||||||
|
<span style={{ fontSize: 36, fontWeight: 700, color: "#f5f5f5", letterSpacing: "-0.02em" }}>{plan.price}</span>
|
||||||
|
{plan.period && <span style={{ fontSize: 13, color: "#525252" }}>{plan.period}</span>}
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 13, color: "#525252", lineHeight: 1.5, marginBottom: 20 }}>{plan.desc}</p>
|
||||||
|
|
||||||
|
<div style={{ flex: 1, marginBottom: 24 }}>
|
||||||
|
{plan.features.map((f) => (
|
||||||
|
<div key={f} style={{ display: "flex", gap: 8, marginBottom: 8, alignItems: "flex-start" }}>
|
||||||
|
<span style={{ color: COLORS[i % COLORS.length], fontSize: 12, marginTop: 1, flexShrink: 0 }}>✓</span>
|
||||||
|
<span style={{ fontSize: 13, color: "#a3a3a3", lineHeight: 1.4 }}>{f}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button style={{
|
||||||
|
width: "100%", padding: "10px 0", borderRadius: 8, fontSize: 13, fontWeight: 600,
|
||||||
|
cursor: "pointer", border: plan.highlight ? "none" : "1px solid #262626",
|
||||||
|
background: plan.highlight ? GRADIENT : "transparent",
|
||||||
|
color: plan.highlight ? "#fff" : "#a3a3a3",
|
||||||
|
}}>
|
||||||
|
{plan.cta}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Comparison */}
|
||||||
|
<div style={{ maxWidth: 760, margin: "0 auto", padding: "0 24px 64px" }}>
|
||||||
|
<h2 style={{ fontSize: 22, fontWeight: 700, color: "#f5f5f5", marginBottom: 24, letterSpacing: "-0.01em" }}>
|
||||||
|
How we compare
|
||||||
|
</h2>
|
||||||
|
<div style={{ border: "1px solid #1a1a1a", borderRadius: 10, overflow: "hidden" }}>
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", background: "#0a0a0a", padding: "10px 16px", borderBottom: "1px solid #1a1a1a" }}>
|
||||||
|
<span style={{ fontSize: 11, color: "#525252", textTransform: "uppercase", letterSpacing: "0.08em" }}>Feature</span>
|
||||||
|
<span style={{ fontSize: 11, color: "#525252", textTransform: "uppercase", letterSpacing: "0.08em" }}>BlackRoad</span>
|
||||||
|
<span style={{ fontSize: 11, color: "#525252", textTransform: "uppercase", letterSpacing: "0.08em" }}>Others</span>
|
||||||
|
</div>
|
||||||
|
{COMPARISONS.map((row, i) => (
|
||||||
|
<div key={row.feature} style={{
|
||||||
|
display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
|
||||||
|
padding: "12px 16px", background: i % 2 === 0 ? "#000" : "#050505",
|
||||||
|
borderBottom: i < COMPARISONS.length - 1 ? "1px solid #111" : "none",
|
||||||
|
}}>
|
||||||
|
<span style={{ fontSize: 13, color: "#737373" }}>{row.feature}</span>
|
||||||
|
<span style={{ fontSize: 13, color: COLORS[0], fontWeight: 500 }}>{row.blackroad}</span>
|
||||||
|
<span style={{ fontSize: 13, color: "#404040" }}>{row.others}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FAQs */}
|
||||||
|
<div style={{ maxWidth: 760, margin: "0 auto", padding: "0 24px 80px" }}>
|
||||||
|
<h2 style={{ fontSize: 22, fontWeight: 700, color: "#f5f5f5", marginBottom: 24, letterSpacing: "-0.01em" }}>
|
||||||
|
Frequently asked
|
||||||
|
</h2>
|
||||||
|
{FAQS.map((faq, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{ borderBottom: "1px solid #111", cursor: "pointer" }}
|
||||||
|
onClick={() => setOpenFaq(openFaq === i ? null : i)}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 0" }}>
|
||||||
|
<span style={{ fontSize: 14, color: "#d4d4d4", fontWeight: 500 }}>{faq.q}</span>
|
||||||
|
<span style={{ color: "#404040", fontSize: 18, lineHeight: 1 }}>{openFaq === i ? "−" : "+"}</span>
|
||||||
|
</div>
|
||||||
|
{openFaq === i && (
|
||||||
|
<p style={{ fontSize: 13, color: "#737373", lineHeight: 1.7, paddingBottom: 16, margin: 0 }}>{faq.a}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -49,7 +49,7 @@ export default function SettingsPage() {
|
|||||||
{s.type === "toggle" && (
|
{s.type === "toggle" && (
|
||||||
<div onClick={() => update(s.key, !(s.value as boolean))} style={{
|
<div onClick={() => update(s.key, !(s.value as boolean))} style={{
|
||||||
width: "44px", height: "24px", borderRadius: "12px",
|
width: "44px", height: "24px", borderRadius: "12px",
|
||||||
background: s.value ? "#FF1D6C" : "#333",
|
background: s.value ? "#FF2255" : "#333",
|
||||||
cursor: "pointer", position: "relative", transition: "background 0.2s", flexShrink: 0,
|
cursor: "pointer", position: "relative", transition: "background 0.2s", flexShrink: 0,
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div style={{
|
||||||
@@ -79,7 +79,7 @@ export default function SettingsPage() {
|
|||||||
|
|
||||||
<button onClick={save} style={{
|
<button onClick={save} style={{
|
||||||
marginTop: "24px",
|
marginTop: "24px",
|
||||||
background: saved ? "#1a3a1a" : "linear-gradient(135deg, #FF1D6C, #9C27B0)",
|
background: saved ? "#1a3a1a" : "linear-gradient(135deg, #FF2255, #CC00AA)",
|
||||||
border: "none", color: "#fff", padding: "12px 32px",
|
border: "none", color: "#fff", padding: "12px 32px",
|
||||||
borderRadius: "8px", fontSize: "15px", fontWeight: 600, cursor: "pointer",
|
borderRadius: "8px", fontSize: "15px", fontWeight: 600, cursor: "pointer",
|
||||||
}}>
|
}}>
|
||||||
|
|||||||
181
src/app/status/page.tsx
Normal file
181
src/app/status/page.tsx
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
const COLORS = ["#FF6B2B", "#FF2255", "#CC00AA", "#8844FF", "#4488FF", "#00D4FF"];
|
||||||
|
const GRADIENT = `linear-gradient(90deg, ${COLORS.join(", ")})`;
|
||||||
|
|
||||||
|
const AGENTS = [
|
||||||
|
{ name: "alice", role: "Gateway", status: "active", mem: "2.4TB", uptime: "347d", load: 34 },
|
||||||
|
{ name: "lucidia", role: "Core AI", status: "active", mem: "1.8TB", uptime: "289d", load: 61 },
|
||||||
|
{ name: "cecilia", role: "Memory", status: "active", mem: "1.2TB", uptime: "289d", load: 28 },
|
||||||
|
{ name: "cece", role: "Governance", status: "active", mem: "940GB", uptime: "245d", load: 12 },
|
||||||
|
{ name: "meridian", role: "Architecture", status: "active", mem: "620GB", uptime: "194d", load: 45 },
|
||||||
|
{ name: "eve", role: "Monitoring", status: "active", mem: "380GB", uptime: "156d", load: 72 },
|
||||||
|
{ name: "cadence", role: "Music", status: "idle", mem: "290GB", uptime: "112d", load: 3 },
|
||||||
|
{ name: "radius", role: "Physics", status: "idle", mem: "210GB", uptime: "98d", load: 0 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const SERVICES = [
|
||||||
|
{ name: "api.blackroad.io", status: "operational", latency: "12ms", uptime: "99.99%" },
|
||||||
|
{ name: "app.blackroad.io", status: "operational", latency: "34ms", uptime: "99.97%" },
|
||||||
|
{ name: "ws.blackroad.io", status: "operational", latency: "8ms", uptime: "99.98%" },
|
||||||
|
{ name: "mesh.blackroad.network", status: "operational", latency: "22ms", uptime: "99.95%" },
|
||||||
|
{ name: "ledger.blackroad.systems", status: "operational", latency: "18ms", uptime: "99.99%" },
|
||||||
|
{ name: "vectors.blackroad.systems", status: "degraded", latency: "89ms", uptime: "99.84%" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const EVENTS = [
|
||||||
|
{ time: "2m ago", agent: "cecilia", action: "Memory commit #4821 — 3 entries written to PS-SHA∞ chain" },
|
||||||
|
{ time: "8m ago", agent: "cece", action: "Policy deployed: edu.review.teacher-only scope updated" },
|
||||||
|
{ time: "15m ago", agent: "eve", action: "Latency spike on mesh.na1 — auto-scaled, resolved in 2m" },
|
||||||
|
{ time: "34m ago", agent: "system", action: "DNS propagation complete for edu.blackroad.io" },
|
||||||
|
{ time: "1h ago", agent: "cadence", action: "Composition #42 exported — 3:42, C minor, 108 BPM" },
|
||||||
|
{ time: "2h ago", agent: "alice", action: "Gateway health check passed — 7 endpoints, 2.4k concurrent WS" },
|
||||||
|
{ time: "3h ago", agent: "cece", action: "Weekly governance: 12,400 evals, 0 bypasses, ledger verified" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function GradientBar({ height = 1 }: { height?: number }) {
|
||||||
|
return <div style={{ height, background: GRADIENT }} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function LoadBar({ value, color }: { value: number; color: string }) {
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#1a1a1a", borderRadius: 2, height: 3, width: "100%", overflow: "hidden" }}>
|
||||||
|
<div style={{ height: "100%", width: `${value}%`, background: color, borderRadius: 2, transition: "width 0.6s ease" }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StatusPage() {
|
||||||
|
const [tick, setTick] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const id = setInterval(() => setTick((t) => t + 1), 5000);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const activeCount = AGENTS.filter((a) => a.status === "active").length;
|
||||||
|
const operationalCount = SERVICES.filter((s) => s.status === "operational").length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#000", minHeight: "100vh", color: "#fff", fontFamily: "Inter, -apple-system, sans-serif" }}>
|
||||||
|
<GradientBar height={3} />
|
||||||
|
|
||||||
|
<div style={{ maxWidth: 1100, margin: "0 auto", padding: "40px 24px" }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 11, letterSpacing: "0.15em", color: "#525252", textTransform: "uppercase", marginBottom: 8 }}>System Status</div>
|
||||||
|
<h1 style={{ fontSize: 28, fontWeight: 700, margin: 0, letterSpacing: "-0.02em", color: "#f5f5f5" }}>
|
||||||
|
Agent Mesh
|
||||||
|
</h1>
|
||||||
|
<p style={{ color: "#525252", fontSize: 13, marginTop: 4 }}>
|
||||||
|
{activeCount}/{AGENTS.length} agents active · {operationalCount}/{SERVICES.length} services operational
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 8, background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "8px 14px" }}>
|
||||||
|
<div style={{ width: 7, height: 7, borderRadius: "50%", background: "#4CAF50", boxShadow: "0 0 6px #4CAF50" }} />
|
||||||
|
<span style={{ fontSize: 12, color: "#737373" }}>All systems operational</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats row */}
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 12, marginBottom: 32 }}>
|
||||||
|
{[
|
||||||
|
{ label: "Active Agents", value: `${activeCount}/${AGENTS.length}`, color: COLORS[4] },
|
||||||
|
{ label: "Services Up", value: `${operationalCount}/${SERVICES.length}`, color: COLORS[5] },
|
||||||
|
{ label: "Total Memory", value: "8.1TB", color: COLORS[2] },
|
||||||
|
{ label: "Avg Load", value: `${Math.round(AGENTS.reduce((s, a) => s + a.load, 0) / AGENTS.length)}%`, color: COLORS[0] },
|
||||||
|
].map((stat) => (
|
||||||
|
<div key={stat.label} style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "14px 16px" }}>
|
||||||
|
<div style={{ fontSize: 22, fontWeight: 700, color: stat.color, letterSpacing: "-0.02em" }}>{stat.value}</div>
|
||||||
|
<div style={{ fontSize: 11, color: "#525252", marginTop: 2 }}>{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
|
||||||
|
{/* Agents */}
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontSize: 14, fontWeight: 600, color: "#a3a3a3", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 12 }}>
|
||||||
|
Agents
|
||||||
|
</h2>
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||||
|
{AGENTS.map((agent, i) => (
|
||||||
|
<div key={agent.name} style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, padding: "12px 14px" }}>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||||
|
<div style={{ width: 6, height: 6, borderRadius: "50%", background: agent.status === "active" ? "#4CAF50" : "#404040", flexShrink: 0 }} />
|
||||||
|
<span style={{ fontSize: 13, fontWeight: 500, color: "#d4d4d4" }}>{agent.name}</span>
|
||||||
|
<span style={{ fontSize: 11, color: "#404040" }}>{agent.role}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", gap: 12, fontSize: 11, color: "#525252" }}>
|
||||||
|
<span>{agent.mem}</span>
|
||||||
|
<span>{agent.uptime}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<LoadBar value={agent.load} color={COLORS[i % COLORS.length]} />
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", marginTop: 3 }}>
|
||||||
|
<span style={{ fontSize: 10, color: "#404040" }}>load</span>
|
||||||
|
<span style={{ fontSize: 10, color: "#404040" }}>{agent.load}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
|
||||||
|
{/* Services */}
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontSize: 14, fontWeight: 600, color: "#a3a3a3", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 12 }}>
|
||||||
|
Services
|
||||||
|
</h2>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, overflow: "hidden" }}>
|
||||||
|
{SERVICES.map((svc, i) => (
|
||||||
|
<div key={svc.name} style={{
|
||||||
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||||
|
padding: "10px 14px",
|
||||||
|
borderBottom: i < SERVICES.length - 1 ? "1px solid #111" : "none",
|
||||||
|
}}>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||||
|
<div style={{ width: 6, height: 6, borderRadius: "50%", background: svc.status === "operational" ? "#4CAF50" : "#FF9800", flexShrink: 0 }} />
|
||||||
|
<span style={{ fontSize: 12, color: "#a3a3a3", fontFamily: "'JetBrains Mono', monospace" }}>{svc.name}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", gap: 16, fontSize: 11 }}>
|
||||||
|
<span style={{ color: "#525252" }}>{svc.latency}</span>
|
||||||
|
<span style={{ color: svc.status === "operational" ? "#4CAF50" : "#FF9800" }}>{svc.uptime}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Event log */}
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontSize: 14, fontWeight: 600, color: "#a3a3a3", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 12 }}>
|
||||||
|
Event Log
|
||||||
|
</h2>
|
||||||
|
<div style={{ background: "#0a0a0a", border: "1px solid #1a1a1a", borderRadius: 8, overflow: "hidden" }}>
|
||||||
|
{EVENTS.map((ev, i) => (
|
||||||
|
<div key={i} style={{
|
||||||
|
padding: "10px 14px",
|
||||||
|
borderBottom: i < EVENTS.length - 1 ? "1px solid #111" : "none",
|
||||||
|
}}>
|
||||||
|
<div style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
|
||||||
|
<span style={{ fontSize: 10, color: "#404040", flexShrink: 0, width: 52 }}>{ev.time}</span>
|
||||||
|
<span style={{ fontSize: 11, color: COLORS[AGENTS.findIndex((a) => a.name === ev.agent) % COLORS.length] || "#525252", flexShrink: 0 }}>
|
||||||
|
{ev.agent}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: 11, color: "#525252", margin: "2px 0 0 60px", lineHeight: 1.4 }}>{ev.action}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -12,9 +12,9 @@ interface WorldArtifact {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const TYPE_COLOR: Record<string, string> = {
|
const TYPE_COLOR: Record<string, string> = {
|
||||||
world: "#F5A623",
|
world: "#FF6B2B",
|
||||||
lore: "#9C27B0",
|
lore: "#CC00AA",
|
||||||
code: "#2979FF",
|
code: "#4488FF",
|
||||||
};
|
};
|
||||||
|
|
||||||
const TYPE_ICON: Record<string, string> = {
|
const TYPE_ICON: Record<string, string> = {
|
||||||
@@ -24,7 +24,7 @@ const TYPE_ICON: Record<string, string> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function ArtifactCard({ artifact }: { artifact: WorldArtifact }) {
|
function ArtifactCard({ artifact }: { artifact: WorldArtifact }) {
|
||||||
const color = TYPE_COLOR[artifact.type] ?? "#FF1D6C";
|
const color = TYPE_COLOR[artifact.type] ?? "#FF2255";
|
||||||
const icon = TYPE_ICON[artifact.type] ?? "✨";
|
const icon = TYPE_ICON[artifact.type] ?? "✨";
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
@@ -53,7 +53,7 @@ function ArtifactCard({ artifact }: { artifact: WorldArtifact }) {
|
|||||||
href={artifact.url}
|
href={artifact.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
style={{ color: "#2979FF", fontSize: 12, textDecoration: "none" }}
|
style={{ color: "#4488FF", fontSize: 12, textDecoration: "none" }}
|
||||||
>
|
>
|
||||||
View on GitHub →
|
View on GitHub →
|
||||||
</a>
|
</a>
|
||||||
@@ -86,7 +86,7 @@ export default function WorldsPage() {
|
|||||||
<div style={{ marginBottom: "2rem" }}>
|
<div style={{ marginBottom: "2rem" }}>
|
||||||
<h1 style={{
|
<h1 style={{
|
||||||
fontSize: 32, fontWeight: 700, margin: 0,
|
fontSize: 32, fontWeight: 700, margin: 0,
|
||||||
background: "linear-gradient(135deg, #F5A623, #FF1D6C, #9C27B0, #2979FF)",
|
background: "linear-gradient(135deg, #FF6B2B, #FF2255, #CC00AA, #4488FF)",
|
||||||
WebkitBackgroundClip: "text",
|
WebkitBackgroundClip: "text",
|
||||||
WebkitTextFillColor: "transparent",
|
WebkitTextFillColor: "transparent",
|
||||||
}}>
|
}}>
|
||||||
@@ -102,7 +102,7 @@ export default function WorldsPage() {
|
|||||||
{["all", "world", "lore", "code"].map((t) => {
|
{["all", "world", "lore", "code"].map((t) => {
|
||||||
const count = t === "all" ? artifacts.length
|
const count = t === "all" ? artifacts.length
|
||||||
: artifacts.filter((a) => a.type === t).length;
|
: artifacts.filter((a) => a.type === t).length;
|
||||||
const color = t === "all" ? "#FF1D6C" : (TYPE_COLOR[t] ?? "#666");
|
const color = t === "all" ? "#FF2255" : (TYPE_COLOR[t] ?? "#666");
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={t}
|
key={t}
|
||||||
|
|||||||
Reference in New Issue
Block a user