[taskboard] migrate fleet console to nextjs

components/architecture-view.tsx

@@ -0,0 +1,84 @@
+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>
+  );
+}