Refactor: ModelsView auf Hooks + Leaf-Komponenten ausgelagert (Phase 4b)

- JobsBar -> components/models/JobsBar.tsx (useJobs + Invalidierung, useDialog).
- FitBadge/getBrandInfo/ROLES -> components/models/ModelBadges.tsx.
- Cockpit + Discover: manuelles Promise.all+setInterval durch useModels/
  useRouting/useConnect/useUpdates/useDiscover ersetzt; lokaler Dialog-State +
  showAlert/showConfirm/showPrompt durch useDialog; Mutationen invalidieren die
  Query-Keys statt load(). AddModel-Aktionen bleiben imperativ (api()).
- ModelsView 1660 -> 1455 Zeilen; tote Format-/Typ-Importe entfernt.

Verifiziert: tsc grün, Build grün, Cockpit- und Discover-Tab rendern ohne
Konsolenfehler (VRAM-HUD, Registry).

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

frontend/src/components/models/ModelBadges.tsx

@@ -0,0 +1,29 @@
+import { type Fit } from "@/lib/api"
+import { cn } from "@/lib/utils"
+
+export const ROLES = ["fast", "heavy", "coder", "reasoning", "agent", "vision", "scout"]
+
+export function FitBadge({ fit }: { fit: Fit }) {
+  const tone = {
+    perfect: "bg-emerald-500/15 text-emerald-400 border border-emerald-500/20",
+    marginal: "bg-amber-500/15 text-amber-400 border border-amber-500/20",
+    too_tight: "bg-red-500/15 text-red-400 border border-red-500/20",
+  }[fit.level]
+  return (
+    <span className={cn("rounded px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider font-mono", tone)}>
+      {fit.text} • {fit.req_gb} GB RAM
+    </span>
+  )
+}
+
+export function getBrandInfo(name: string) {
+  const low = name.toLowerCase()
+  if (low.includes("qwen")) return { name: "Qwen", color: "bg-purple-500/20 text-purple-300 border-purple-500/30", initial: "Q" }
+  if (low.includes("gemma")) return { name: "Gemma", color: "bg-blue-500/20 text-blue-300 border-blue-500/30", initial: "G" }
+  if (low.includes("llama")) return { name: "Llama", color: "bg-red-500/20 text-red-300 border-red-500/30", initial: "🦙" }
+  if (low.includes("mistral") || low.includes("mixtral")) return { name: "Mistral", color: "bg-orange-500/20 text-orange-300 border-orange-500/30", initial: "M" }
+  if (low.includes("deepseek")) return { name: "DeepSeek", color: "bg-cyan-500/20 text-cyan-300 border-cyan-500/30", initial: "D" }
+  if (low.includes("hermes") || low.includes("nous")) return { name: "Hermes", color: "bg-amber-500/20 text-amber-300 border-amber-500/30", initial: "H" }
+  if (low.includes("phi")) return { name: "Phi", color: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30", initial: "Φ" }
+  return { name: "Other", color: "bg-slate-500/20 text-slate-300 border-slate-500/30", initial: "AI" }
+}