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/views/ModelsView.tsx

@@ -1,129 +1,28 @@
-import { useEffect, useState, useRef, useCallback } from "react"
+import { useState, useRef, useCallback } from "react"
 import { Download, Search, Trash2, Edit3, Star, Layers, Activity, HardDrive, X, Check, Copy, Bot, Eye, Code, Brain, Compass, ChevronDown, ChevronUp } from "lucide-react"
-import { api, type DiscoverResp, type Fit, type Job, type ModelInfo, type RoutingResp, type UpdatesResp, type ConnectResp } from "@/lib/api"
+import { api } from "@/lib/api"
+import { useModels, useRouting, useConnect, useUpdates, useDiscover, useQueryClient, qk } from "@/lib/queries"
+import { useDialog } from "@/lib/useDialog"
 import { CapsChips } from "@/components/CapsChips"
 import { cn } from "@/lib/utils"
-import { fmtBytes, fmtEta, fmtSize, fmtCtx } from "@/lib/format"
-import { CustomDialog } from "@/components/CustomDialog"
-
-
-function JobsBar({ onError }: { onError?: (msg: string) => void }) {
-  const [jobs, setJobs] = useState<Job[]>([])
-  const [errorMsg, setErrorMsg] = useState<string | null>(null)
-
-  function load() {
-    api<{ jobs: Job[] }>("/api/jobs")
-      .then((d) => setJobs(d.jobs || []))
-      .catch(() => {})
-  }
-
-  useEffect(() => {
-    load()
-    const t = setInterval(load, 2000)
-    return () => clearInterval(t)
-  }, [])
-
-  async function cancelJob(jobId: string) {
-    try {
-      await api(`/api/jobs/${jobId}/cancel`, { method: "POST" })
-      load()
-    } catch (e: any) {
-      if (onError) onError(e.message)
-      else setErrorMsg(e.message)
-    }
-  }
-
-  const active = jobs.filter((j) => j.state === "running" || j.state === "queued")
-  const recent = jobs.filter((j) => j.state !== "running" && j.state !== "queued").slice(-3)
-  
-  if (active.length === 0 && recent.length === 0) return null
-
-  return (
-    <div className="space-y-3 rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-4 shadow-lg shadow-black/10">
-      <div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">Aktive Downloads</div>
-      
-      {active.map((j) => (
-        <div key={j.id} className="space-y-1.5 p-3 rounded-xl bg-background/20 border border-border/40">
-          <div className="flex justify-between items-center text-xs">
-            <span className="font-semibold truncate max-w-[250px]">{j.label}</span>
-            <div className="flex items-center gap-3">
-              <span className="text-muted-foreground font-mono">
-                {j.progress ?? 0}% • {fmtBytes(j.done_bytes)}/{fmtBytes(j.total_bytes)}
-                {j.eta_s ? ` • ETA ${fmtEta(j.eta_s)}` : ""}
-              </span>
-              <button 
-                onClick={() => cancelJob(j.id)}
-                className="text-[10px] text-red-400 hover:text-red-300 font-semibold border border-red-500/25 bg-red-500/5 px-2 py-0.5 rounded transition-all cursor-pointer"
-              >
-                Abbrechen
-              </button>
-            </div>
-          </div>
-          <div className="h-1.5 overflow-hidden rounded-full bg-muted">
-            <div className="h-full rounded-full bg-primary transition-all duration-500" style={{ width: `${j.progress ?? 0}%` }} />
-          </div>
-        </div>
-      ))}
-
-      {recent.map((j) => (
-        <div key={j.id} className="flex justify-between items-center text-xs text-muted-foreground px-1">
-          <span className="truncate">{j.label}</span>
-          <span className={cn(
-            "font-semibold text-[10px] px-1.5 py-0.5 rounded uppercase font-mono",
-            j.state === "done" ? "bg-emerald-500/10 text-emerald-400" : "bg-amber-500/10 text-amber-400"
-          )}>
-            {j.state}
-          </span>
-        </div>
-      ))}
-
-      {errorMsg && (
-        <CustomDialog
-          type="alert"
-          title="Fehler"
-          message={errorMsg}
-          onConfirm={() => setErrorMsg(null)}
-        />
-      )}
-    </div>
-  )
-}
-
-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>
-  )
-}
-
-const ROLES = ["fast", "heavy", "coder", "reasoning", "agent", "vision", "scout"]
-
-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" }
-}
+import { fmtBytes, fmtSize, fmtCtx } from "@/lib/format"
+import { JobsBar } from "@/components/models/JobsBar"
+import { FitBadge, getBrandInfo, ROLES } from "@/components/models/ModelBadges"
 
 function Cockpit() {
-  const [models, setModels] = useState<ModelInfo[]>([])
-  const [running, setRunning] = useState<string[]>([])
-  const [routing, setRouting] = useState<RoutingResp | null>(null)
-  const [connectData, setConnectData] = useState<ConnectResp | null>(null)
-  const [updates, setUpdates] = useState<UpdatesResp | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState("")
+  const qc = useQueryClient()
+  const { data: modelsResp, isLoading: loading, error: loadErr } = useModels(4_000)
+  const { data: routing } = useRouting(4_000)
+  const { data: connectData } = useConnect()
+  const { data: updates } = useUpdates(4_000)
+  const { showAlert, showConfirm, showPrompt, dialogElement } = useDialog()
+  const models = modelsResp?.models ?? []
+  const running = modelsResp?.running ?? []
+  const error = loadErr ? String(loadErr) : ""
+  const reload = () => {
+    qc.invalidateQueries({ queryKey: qk.models })
+    qc.invalidateQueries({ queryKey: qk.routing })
+  }
 
   // UI state
   const [activeClient, setActiveClient] = useState<"roocode" | "cursor" | "opencode" | "zed" | "continue" | null>(null)
@@ -133,62 +32,6 @@ function Cockpit() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
   const [filterMode, setFilterMode] = useState<"all" | "in_use">("all")
 
-  // Custom Dialog State
-  const [dialog, setDialog] = useState<{
-    type: "alert" | "confirm" | "prompt"
-    title: string
-    message: string
-    defaultValue?: string
-    onConfirm: (val?: string) => void
-    onCancel?: () => void
-  } | null>(null)
-
-  function showAlert(title: string, message: string, onConfirm?: () => void) {
-    setDialog({
-      type: "alert",
-      title,
-      message,
-      onConfirm: () => {
-        setDialog(null)
-        if (onConfirm) onConfirm()
-      }
-    })
-  }
-
-  function showConfirm(title: string, message: string, onConfirm: () => void, onCancel?: () => void) {
-    setDialog({
-      type: "confirm",
-      title,
-      message,
-      onConfirm: () => {
-        setDialog(null)
-        onConfirm()
-      },
-      onCancel: () => {
-        setDialog(null)
-        if (onCancel) onCancel()
-      }
-    })
-  }
-
-  function showPrompt(title: string, message: string, defaultValue: string, onConfirm: (val?: string) => void, onCancel?: () => void) {
-    setDialog({
-      type: "prompt",
-      title,
-      message,
-      defaultValue,
-      onConfirm: (val) => {
-        setDialog(null)
-        onConfirm(val)
-      },
-      onCancel: () => {
-        setDialog(null)
-        if (onCancel) onCancel()
-      }
-    })
-  }
-
-
   const filteredModels = models.filter((m) => {
     if (filterMode === "in_use") {
       return !!m.role || running.includes(m.name)
@@ -245,34 +88,10 @@ function Cockpit() {
     return `M ${startX} ${startY} C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${endX} ${endY}`
   }
 
-  function load() {
-    Promise.all([
-      api<{ models: ModelInfo[]; running?: string[] }>("/api/models"),
-      api<RoutingResp>("/api/routing"),
-      api<ConnectResp>("/api/connect"),
-      api<UpdatesResp>("/api/maintenance/updates")
-    ])
-      .then(([mResp, rResp, cResp, uResp]) => {
-        setModels(mResp.models || [])
-        setRunning(mResp.running || [])
-        setRouting(rResp)
-        setConnectData(cResp)
-        setUpdates(uResp)
-      })
-      .catch((e) => setError(String(e)))
-      .finally(() => setLoading(false))
-  }
-
-  useEffect(() => {
-    load()
-    const t = setInterval(load, 4000)
-    return () => clearInterval(t)
-  }, [])
-
   async function handleLoadModel(name: string) {
     try {
       await api(`/api/models/${encodeURIComponent(name)}/load`, { method: "POST" })
-      load()
+      reload()
     } catch (e: any) {
       showAlert("Fehler", `Fehler beim Laden des Modells: ${e.message}`)
     }
@@ -281,7 +100,7 @@ function Cockpit() {
   async function handleUnloadModel(name: string) {
     try {
       await api(`/api/models/${encodeURIComponent(name)}/unload`, { method: "POST" })
-      load()
+      reload()
     } catch (e: any) {
       showAlert("Fehler", `Fehler beim Entladen des Modells: ${e.message}`)
     }
@@ -290,7 +109,7 @@ function Cockpit() {
   async function handleUnloadAll() {
     try {
       await api("/api/models/unload", { method: "POST" })
-      load()
+      reload()
     } catch (e: any) {
       showAlert("Fehler", `Fehler beim Entladen aller Modelle: ${e.message}`)
     }
@@ -302,7 +121,7 @@ function Cockpit() {
         method: "POST",
         body: JSON.stringify({ role: role || null }),
       })
-      load()
+      reload()
     } catch (e: any) {
       showAlert("Fehler", `Fehler beim Zuweisen der Rolle: ${e.message || e}`)
     }
@@ -320,7 +139,7 @@ function Cockpit() {
             method: "POST", 
             body: JSON.stringify({ ctx: parseInt(v, 10) }),
           })
-          load()
+          reload()
         } catch (e: any) {
           showAlert("Fehler", `Fehler beim Setzen des Kontexts: ${e.message || e}`)
         }
@@ -335,7 +154,7 @@ function Cockpit() {
       async () => {
         try {
           await api(`/api/models/${encodeURIComponent(name)}`, { method: "DELETE" })
-          load()
+          reload()
         } catch (e: any) {
           showAlert("Fehler", `Fehler beim Löschen: ${e.message || e}`)
         }
@@ -1184,16 +1003,7 @@ function Cockpit() {
         </div>
       )}
 
-      {dialog && (
-        <CustomDialog
-          type={dialog.type}
-          title={dialog.title}
-          message={dialog.message}
-          defaultValue={dialog.defaultValue}
-          onConfirm={dialog.onConfirm}
-          onCancel={dialog.onCancel}
-        />
-      )}
+      {dialogElement}
     </div>
   )
 }
@@ -1355,30 +1165,15 @@ const ROLE_METADATA: Record<string, { title: string; desc: string; icon: any }>
 }
 
 function Discover() {
-  const [data, setData] = useState<DiscoverResp | null>(null)
-  const [models, setModels] = useState<ModelInfo[]>([])
-  const [updates, setUpdates] = useState<UpdatesResp | null>(null)
-  const [error, setError] = useState("")
-  const [loading, setLoading] = useState(true)
+  const { data, isLoading: loading, error: loadErr } = useDiscover()
+  const { data: modelsResp } = useModels()
+  const { data: updates } = useUpdates()
+  const models = modelsResp?.models ?? []
+  const error = loadErr ? String(loadErr) : ""
   const [installing, setInstalling] = useState<Record<string, string>>({})
   const [expandedAlternatives, setExpandedAlternatives] = useState<Record<string, boolean>>({})
   const [showExpert, setShowExpert] = useState(false)
 
-  useEffect(() => {
-    Promise.all([
-      api<DiscoverResp>("/api/discover"),
-      api<{ models: ModelInfo[] }>("/api/models"),
-      api<UpdatesResp>("/api/maintenance/updates").catch(() => null)
-    ])
-      .then(([discoverData, modelsData, updatesData]) => {
-        setData(discoverData)
-        setModels(modelsData.models || [])
-        if (updatesData) setUpdates(updatesData)
-      })
-      .catch((e) => setError(String(e)))
-      .finally(() => setLoading(false))
-  }, [])
-
   async function install(repo: string, role: string, quant: string, toolCapable: boolean) {
     setInstalling((s) => ({ ...s, [repo]: "Starte..." }))
     try {