Spaces:
Running
Running
Deploy Aureon OS (deploy/selfhost stack: nginx edge + fusion API x2 + console + HNC organ + redis + postgres; paper mode) (part 18)
f568a4f verified | import { useEffect, useState } from "react"; | |
| import { BrainCircuit, GitBranch, Hammer, ShieldCheck } from "lucide-react"; | |
| import { Badge } from "@/components/ui/badge"; | |
| import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; | |
| import { ScrollArea } from "@/components/ui/scroll-area"; | |
| type JsonMap = Record<string, any>; | |
| async function fetchJson(url: string): Promise<JsonMap> { | |
| try { | |
| const response = await fetch(url, { cache: "no-store" }); | |
| if (!response.ok) return {}; | |
| return await response.json(); | |
| } catch { | |
| return {}; | |
| } | |
| } | |
| function fmt(value: unknown): string { | |
| const number = Number(value || 0); | |
| return Number.isFinite(number) ? number.toLocaleString() : String(value || "0"); | |
| } | |
| export function AureonDirectorCapabilityBridgeConsole() { | |
| const [report, setReport] = useState<JsonMap>({}); | |
| useEffect(() => { | |
| const refresh = async () => setReport(await fetchJson("/aureon_director_capability_bridge.json")); | |
| refresh(); | |
| const timer = window.setInterval(refresh, 20000); | |
| return () => window.clearInterval(timer); | |
| }, []); | |
| const summary = report.summary || {}; | |
| const rows = Array.isArray(report.codex_class_capabilities) ? report.codex_class_capabilities : []; | |
| const orders = Array.isArray(report.aureon_bridge_work_orders) ? report.aureon_bridge_work_orders : []; | |
| return ( | |
| <Card className="mb-5 bg-card/80"> | |
| <CardHeader className="pb-3"> | |
| <CardTitle className="flex items-center gap-2 text-base"> | |
| <BrainCircuit className="h-4 w-4 text-primary" /> | |
| Aureon Director Capability Bridge | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="space-y-4"> | |
| <div className="flex flex-wrap gap-2"> | |
| <Badge variant={summary.gap_count ? "warning" : "success"}>{report.status || "waiting"}</Badge> | |
| <Badge variant="outline">coverage {fmt(summary.coverage_percent)}%</Badge> | |
| <Badge variant="outline">work orders {fmt(summary.bridge_work_order_count)}</Badge> | |
| <Badge variant="outline">updated {report.generated_at ? new Date(report.generated_at).toLocaleTimeString() : "pending"}</Badge> | |
| </div> | |
| <div className="grid gap-2 md:grid-cols-4"> | |
| <Metric icon={ShieldCheck} label="ready" value={summary.ready_count || 0} /> | |
| <Metric icon={Hammer} label="partial" value={summary.partial_count || 0} /> | |
| <Metric icon={GitBranch} label="gaps" value={summary.gap_count || 0} /> | |
| <Metric icon={BrainCircuit} label="capabilities" value={summary.capability_count || 0} /> | |
| </div> | |
| <div className="grid gap-3 lg:grid-cols-[1fr_1fr]"> | |
| <ScrollArea className="h-[340px] pr-3"> | |
| <div className="space-y-2"> | |
| {rows.map((row: JsonMap) => ( | |
| <div key={row.id} className="rounded-md border border-border/40 bg-muted/10 p-3"> | |
| <div className="flex flex-wrap items-start justify-between gap-2"> | |
| <div> | |
| <div className="text-sm font-medium">{row.title}</div> | |
| <div className="mt-1 text-xs text-muted-foreground">{row.codex_can}</div> | |
| </div> | |
| <Badge variant={row.status === "ready" ? "success" : row.status === "gap" ? "warning" : "outline"}> | |
| {row.status} | |
| </Badge> | |
| </div> | |
| <div className="mt-2 truncate font-mono text-[10px] text-muted-foreground"> | |
| {(row.blockers || []).join(" | ") || "all required surfaces present"} | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </ScrollArea> | |
| <ScrollArea className="h-[340px] pr-3"> | |
| <div className="space-y-2"> | |
| {orders.map((order: JsonMap) => ( | |
| <div key={order.id} className="rounded-md border border-warning/30 bg-warning/10 p-3"> | |
| <div className="flex flex-wrap items-start justify-between gap-2"> | |
| <div className="text-sm font-medium">{order.title}</div> | |
| <Badge variant="outline">P{order.priority}</Badge> | |
| </div> | |
| <div className="mt-2 text-xs text-warning">{order.exact_aureon_prompt}</div> | |
| <div className="mt-2 truncate font-mono text-[10px] text-muted-foreground">{order.route}</div> | |
| </div> | |
| ))} | |
| {!orders.length ? ( | |
| <div className="rounded-md border border-success/30 bg-success/10 p-4 text-sm text-success"> | |
| No bridge gaps detected. | |
| </div> | |
| ) : null} | |
| </div> | |
| </ScrollArea> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| ); | |
| } | |
| function Metric({ icon: Icon, label, value }: { icon: any; label: string; value: unknown }) { | |
| return ( | |
| <div className="rounded-md border border-border/40 bg-muted/10 p-3"> | |
| <div className="flex items-center gap-2 text-[11px] uppercase text-muted-foreground"> | |
| <Icon className="h-3.5 w-3.5" /> | |
| {label} | |
| </div> | |
| <div className="mt-1 text-lg font-semibold">{fmt(value)}</div> | |
| </div> | |
| ); | |
| } | |