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, useMemo, useState, type ReactNode } from "react"; | |
| import { BrainCircuit, Code2, Globe2, SearchCheck, ShieldCheck, UsersRound } 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 AureonCodingAgentSkillBaseConsole() { | |
| const [profile, setProfile] = useState<JsonMap>({}); | |
| useEffect(() => { | |
| let cancelled = false; | |
| fetchJson("/aureon_coding_agent_skill_base.json").then((payload) => { | |
| if (!cancelled) setProfile(payload); | |
| }); | |
| return () => { | |
| cancelled = true; | |
| }; | |
| }, []); | |
| const summary = profile.summary || {}; | |
| const agents = Array.isArray(profile.coder_agents) ? profile.coder_agents : []; | |
| const orders = Array.isArray(profile.coding_work_orders) ? profile.coding_work_orders : []; | |
| const tools = profile.tool_registry || {}; | |
| const repoCode = profile.repo_code || {}; | |
| const domains = repoCode.by_domain || {}; | |
| const languages = repoCode.by_language || {}; | |
| const logicMap = profile.coding_logic_map || {}; | |
| const logicRules = Array.isArray(logicMap.rules) ? logicMap.rules : []; | |
| const sources = Array.isArray(profile.official_learning_sources) ? profile.official_learning_sources : []; | |
| const visibleOrders = useMemo(() => orders.slice(0, 30), [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 Coding Agent Skill Base | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="space-y-4"> | |
| <div className="flex flex-wrap gap-2"> | |
| <Badge variant="outline" className="border-success/40 bg-success/10 text-success">{profile.status || "pending"}</Badge> | |
| <Badge variant="outline" className="border-border bg-muted/20 text-muted-foreground">updated {profile.generated_at ? new Date(profile.generated_at).toLocaleTimeString() : "pending"}</Badge> | |
| <Badge variant="outline" className="border-primary/40 bg-primary/10 text-primary">web tools {summary.web_tools_ready ? "ready" : "attention"}</Badge> | |
| <Badge variant="outline" className="border-primary/40 bg-primary/10 text-primary">{logicMap.status || "logic pending"}</Badge> | |
| </div> | |
| <div className="grid gap-2 md:grid-cols-6"> | |
| <Stat icon={UsersRound} label="coder agents" value={summary.coder_agent_count} /> | |
| <Stat icon={Code2} label="repo files" value={repoCode.file_count} /> | |
| <Stat icon={BrainCircuit} label="skills" value={summary.skill_count} /> | |
| <Stat icon={Globe2} label="learning sources" value={sources.length} /> | |
| <Stat icon={ShieldCheck} label="logic rules" value={logicRules.length} /> | |
| <Stat icon={SearchCheck} label="work orders" value={orders.length} /> | |
| </div> | |
| <div className="grid gap-3 lg:grid-cols-3"> | |
| <Panel title="Agents"> | |
| {agents.slice(0, 6).map((agent: JsonMap) => ( | |
| <div key={agent.name} className="rounded-md border border-border/40 bg-muted/10 p-3"> | |
| <div className="text-sm font-medium">{agent.name}</div> | |
| <div className="mt-1 text-xs text-muted-foreground">{agent.purpose}</div> | |
| </div> | |
| ))} | |
| </Panel> | |
| <Panel title="Skill And Tool State"> | |
| <Mini label="In-house tools" value={tools.inhouse_tool_count} /> | |
| <Mini label="Missing coder tools" value={(tools.missing_required_coder_tools || []).length} /> | |
| <Mini label="Languages" value={Object.keys(languages).length} /> | |
| <Mini label="Domains" value={Object.keys(domains).length} /> | |
| </Panel> | |
| <Panel title="Learning Sources"> | |
| {sources.slice(0, 7).map((source: JsonMap) => ( | |
| <div key={source.id} className="rounded-md border border-border/40 bg-muted/10 p-2"> | |
| <div className="text-xs font-medium">{source.title}</div> | |
| <div className="truncate font-mono text-[10px] text-muted-foreground">{source.url}</div> | |
| </div> | |
| ))} | |
| </Panel> | |
| </div> | |
| <Panel title="Who What Where When How"> | |
| <div className="text-xs text-muted-foreground">{logicMap.principle || "Coding route pending."}</div> | |
| <div className="grid gap-2 lg:grid-cols-2"> | |
| {logicRules.slice(0, 6).map((rule: JsonMap) => ( | |
| <div key={rule.id} className="rounded-md border border-border/40 bg-muted/10 p-3"> | |
| <div className="flex flex-wrap items-center justify-between gap-2"> | |
| <div className="text-sm font-medium">{rule.id}</div> | |
| <Badge variant="outline" className="border-border bg-muted/20 text-muted-foreground">{(rule.who || []).slice(0, 2).join(" + ")}</Badge> | |
| </div> | |
| <div className="mt-2 text-xs text-muted-foreground">{rule.what}</div> | |
| <div className="mt-2 truncate font-mono text-[10px] text-success">{(rule.where || []).slice(0, 3).join(" | ")}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </Panel> | |
| <ScrollArea className="h-[320px] pr-3"> | |
| <div className="space-y-2"> | |
| {visibleOrders.map((order: JsonMap) => ( | |
| <div key={order.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">{order.title}</div> | |
| <div className="mt-1 text-xs text-muted-foreground">{order.reason}</div> | |
| </div> | |
| <Badge variant="outline" className="border-border bg-muted/20 text-muted-foreground">{order.owner_agent}</Badge> | |
| </div> | |
| <div className="mt-2 text-xs text-success">{order.proposed_action}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </ScrollArea> | |
| </CardContent> | |
| </Card> | |
| ); | |
| } | |
| function Stat({ 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> | |
| ); | |
| } | |
| function Panel({ title, children }: { title: string; children: ReactNode }) { | |
| return ( | |
| <div className="space-y-2 rounded-md border border-border/40 bg-muted/10 p-3"> | |
| <div className="flex items-center gap-2 text-sm font-medium"><ShieldCheck className="h-4 w-4 text-primary" />{title}</div> | |
| <div className="space-y-2">{children}</div> | |
| </div> | |
| ); | |
| } | |
| function Mini({ label, value }: { label: string; value: unknown }) { | |
| return ( | |
| <div className="flex items-center justify-between rounded-md border border-border/30 bg-background/20 px-3 py-2 text-xs"> | |
| <span className="text-muted-foreground">{label}</span> | |
| <span className="font-semibold">{fmt(value)}</span> | |
| </div> | |
| ); | |
| } | |