feat(2.0): Phase 1 — Engine + Routing (Herzstueck)

Backend-Services: fit/caps/sources (portiert), discover (live HF + Fit +
Caps + ranked recommendation), llama-swap write/register + groups (Ko-
Residenz swap:false), LiteLLM-Gateway-Config + gateway-Service (model:auto +
Fallbacks). Router: discover/fit/register/groups/routing; health zeigt
gateway_reachable. Frontend: Modelle&Routing mit Caps-Chips, Fit-Badges,
Discover-Tab (live), Routing-View.

Lokal verifiziert: Backend-Smoke (alle Endpunkte) + Frontend-Build +
Browser (Shell, Discover, Caps/Fit). Box-Verifikation offen.

Docs: README + docs/STATUS.md (Phasen-Tracker + Resume-Guide).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/ModelsView.tsx

@@ -1,18 +1,31 @@
 import { useEffect, useState } from "react"
-import { api, type ModelInfo } from "@/lib/api"
+import { api, type DiscoverResp, type Fit, type ModelInfo } from "@/lib/api"
+import { CapsChips } from "@/components/CapsChips"
+import { cn } from "@/lib/utils"
 
 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`
+  return c ? `${Math.round(c / 1024)}k` : "—"
 }
 
-export function ModelsView() {
+function FitBadge({ fit }: { fit: Fit }) {
+  const tone = {
+    perfect: "bg-emerald-500/15 text-emerald-500",
+    marginal: "bg-amber-500/15 text-amber-500",
+    too_tight: "bg-red-500/15 text-red-500",
+  }[fit.level]
+  return (
+    <span className={cn("rounded px-1.5 py-0.5 text-[11px] font-medium", tone)}>
+      {fit.text} · ~{fit.req_gb} GB
+    </span>
+  )
+}
+
+function Installed() {
   const [models, setModels] = useState<ModelInfo[]>([])
   const [error, setError] = useState("")
   const [loading, setLoading] = useState(true)
@@ -24,71 +37,133 @@ export function ModelsView() {
       .finally(() => setLoading(false))
   }, [])
 
+  if (loading) return <div className="text-sm text-muted-foreground">Lade…</div>
+  if (error)
+    return (
+      <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>
+    )
+
+  return (
+    <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">Fähigkeiten</th>
+            <th className="px-4 py-2 font-medium">Kontext</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}</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">
+                <CapsChips caps={m.capabilities} />
+              </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">{fmtSize(m.size_bytes)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function Discover() {
+  const [data, setData] = useState<DiscoverResp | null>(null)
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api<DiscoverResp>("/api/discover")
+      .then(setData)
+      .catch((e) => setError(String(e)))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) return <div className="text-sm text-muted-foreground">Suche aktuelle Modelle…</div>
+  if (error || !data)
+    return (
+      <div className="rounded-md border border-border bg-card p-3 text-sm text-muted-foreground">
+        Modell-Quellen gerade nicht erreichbar ({error}).
+      </div>
+    )
+
+  return (
+    <div className="space-y-6">
+      <div className="text-xs text-muted-foreground">
+        Live von HuggingFace · Hardware-Fit für ~{data.sys_ram_gb} GB · ⭐ = beste Wahl je Kategorie
+      </div>
+      {data.categories.map((cat) => (
+        <div key={cat.role} className="space-y-2">
+          <h3 className="text-sm font-semibold">{cat.title}</h3>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {cat.models.map((m) => (
+              <div key={m.repo} className="rounded-lg border border-border bg-card p-3">
+                <div className="flex items-center gap-2">
+                  {cat.recommended === m.repo && <span title="beste Wahl">⭐</span>}
+                  <span className="truncate text-sm font-medium">{m.name}</span>
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">{m.author}</div>
+                <div className="mt-2 flex flex-wrap items-center gap-1">
+                  <CapsChips caps={m.caps} />
+                  <FitBadge fit={m.fit} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function ModelsView() {
+  const [tab, setTab] = useState<"installed" | "discover">("installed")
   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.
+          Installierte Modelle (mit Fähigkeiten) und aktuell beste Modelle für deine Hardware.
         </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>
-      )}
+      <div className="inline-flex rounded-lg border border-border bg-card p-0.5 text-sm">
+        {(["installed", "discover"] as const).map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={cn(
+              "rounded-md px-3 py-1.5 transition-colors",
+              tab === t ? "bg-primary/15 text-primary" : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {t === "installed" ? "Installiert" : "Modelle finden"}
+          </button>
+        ))}
+      </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>
-      )}
+      {tab === "installed" ? <Installed /> : <Discover />}
     </div>
   )
 }