85 lines
3.6 KiB
TypeScript
85 lines
3.6 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import type { ArchitectureDocument } from "@/lib/types";
|
|
|
|
export function ArchitectureView({ architecture }: { architecture: ArchitectureDocument }) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{architecture.title}</CardTitle>
|
|
<CardDescription>Generated from the deployed fleet model and tracked channel/runtime definitions.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
{architecture.overview.map((line) => (
|
|
<Badge key={line} variant="secondary">
|
|
{line}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<pre className="rounded-xl border border-white/10 bg-slate-950/60 p-4 font-mono text-xs text-cyan-100">
|
|
{architecture.topologyDiagram}
|
|
</pre>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-6">
|
|
{architecture.sections.map((section) => (
|
|
<Card key={section.id}>
|
|
<CardHeader>
|
|
<CardTitle>{section.title}</CardTitle>
|
|
<CardDescription>{section.summary}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
|
|
<div className="space-y-4">
|
|
<pre className="rounded-xl border border-white/10 bg-slate-950/60 p-4 font-mono text-xs text-cyan-100">
|
|
{section.diagram}
|
|
</pre>
|
|
<div className="flex flex-wrap gap-2">
|
|
{section.configuredAgents.map((agentName) => (
|
|
<Badge key={agentName}>{agentName}</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="mb-2 text-xs uppercase tracking-[0.2em] text-slate-500">Runtime</p>
|
|
<div className="space-y-2">
|
|
{section.runtime.map((entry) => (
|
|
<div className="rounded-lg border border-white/10 bg-white/5 p-3 text-sm" key={`${section.id}-${entry.label}`}>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">{entry.label}</p>
|
|
<p>{entry.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="mb-2 text-xs uppercase tracking-[0.2em] text-slate-500">Channels</p>
|
|
<div className="space-y-2">
|
|
{section.channels.map((entry) => (
|
|
<div className="rounded-lg border border-white/10 bg-white/5 p-3 text-sm" key={`${section.id}-${entry.label}`}>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">{entry.label}</p>
|
|
<p>{entry.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="mb-2 text-xs uppercase tracking-[0.2em] text-slate-500">Notes</p>
|
|
<ul className="space-y-2 text-sm text-slate-300">
|
|
{section.notes.map((note) => (
|
|
<li key={note}>- {note}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|