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>
2026-06-26 14:59:19 +02:00
parent 7a11fd2846
commit f1b0d61ada
6 changed files with 510 additions and 618 deletions
@@ -0,0 +1,68 @@
+import { api } from "@/lib/api"
+import { useJobs, useQueryClient, qk } from "@/lib/queries"
+import { useDialog } from "@/lib/useDialog"
+import { cn } from "@/lib/utils"
+import { fmtBytes, fmtEta } from "@/lib/format"
+
+export function JobsBar() {
+  const qc = useQueryClient()
+  const { data: jobs = [] } = useJobs(2_000)
+  const { showAlert, dialogElement } = useDialog()
+
+  async function cancelJob(jobId: string) {
+    try {
+      await api(`/api/jobs/${jobId}/cancel`, { method: "POST" })
+      qc.invalidateQueries({ queryKey: qk.jobs })
+    } catch (e: any) {
+      showAlert("Fehler", 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>
+      ))}
+
+      {dialogElement}
+    </div>
+  )
+}
@@ -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" }
+}