feat(2.0): Phase 0 — Greenfield-Skeleton (FastAPI + React/shadcn)

Backend: FastAPI mit /api/health + /api/models (read-only aus llama-swap config, Logik aus v1 portiert). Frontend: Vite + React + Tailwind v4 + shadcn-Style App-Shell mit Cmd+K, Dark-default, PWA-Manifest; Modelle-View live aus /api/models. Deploy-Geruest (systemd-Unit :9001, build/deploy- Skripte, NOPASSWD-sudoers, kein Klartext-Passwort). Verifiziert: Backend-Endpunkte + Frontend-Build + gerenderte Shell. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-24 22:17:45 +02:00
commit b805c294eb
30 changed files with 3972 additions and 0 deletions
@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react"
+import { api, type ModelInfo } from "@/lib/api"
+
+function fmtSize(b: number | null) {
+  if (!b) return "—"
+  const gb = b / 1024 ** 3
+  return gb >= 1 ? `${gb.toFixed(1)} GB` : `${(b / 1024 ** 2).toFixed(0)} MB`
+}
+
+function fmtCtx(c: number | null) {
+  if (!c) return "—"
+  return `${Math.round(c / 1024)}k`
+}
+
+export function ModelsView() {
+  const [models, setModels] = useState<ModelInfo[]>([])
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api<{ models: ModelInfo[] }>("/api/models")
+      .then((d) => setModels(d.models))
+      .catch((e) => setError(String(e)))
+      .finally(() => setLoading(false))
+  }, [])
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h1 className="text-xl font-semibold">Modelle &amp; Routing</h1>
+        <p className="text-sm text-muted-foreground">
+          In llama-swap konfigurierte Modelle (Phase 0: read-only). Installieren, Gruppen &amp;
+          Auto-Routing folgen in Phase 1.
+        </p>
+      </div>
+
+      {loading && <div className="text-sm text-muted-foreground">Lade…</div>}
+      {error && (
+        <div className="rounded-md border border-border bg-card p-3 text-sm text-muted-foreground">
+          Engine nicht erreichbar oder keine Config gefunden ({error}).
+        </div>
+      )}
+
+      {!loading && !error && (
+        <div className="overflow-hidden rounded-xl border border-border bg-card">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border text-left text-xs text-muted-foreground">
+                <th className="px-4 py-2 font-medium">Modell</th>
+                <th className="px-4 py-2 font-medium">Rolle</th>
+                <th className="px-4 py-2 font-medium">Kontext</th>
+                <th className="px-4 py-2 font-medium">Quant</th>
+                <th className="px-4 py-2 font-medium">Größe</th>
+              </tr>
+            </thead>
+            <tbody>
+              {models.length === 0 && (
+                <tr>
+                  <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
+                    Keine Modelle konfiguriert.
+                  </td>
+                </tr>
+              )}
+              {models.map((m) => (
+                <tr key={m.name} className="border-b border-border/50 last:border-0">
+                  <td className="px-4 py-2.5 font-medium">
+                    {m.name}
+                    {m.incomplete && (
+                      <span className="ml-2 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+                        unvollständig
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-2.5">
+                    {m.role ? (
+                      <span className="rounded-md bg-primary/15 px-2 py-0.5 text-xs text-primary">
+                        {m.role}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-2.5 text-muted-foreground">{fmtCtx(m.ctx)}</td>
+                  <td className="px-4 py-2.5 text-muted-foreground">{m.quant || "—"}</td>
+                  <td className="px-4 py-2.5 text-muted-foreground">{fmtSize(m.size_bytes)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}