Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Hitonabi
2026-06-26 14:59:19 +02:00
parent 7a11fd2846
commit f1b0d61ada
6 changed files with 510 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/index-CpG8j7ha.js
Vendored
-380
View File
File diff suppressed because one or more lines are too long
frontend/dist/assets/index-DSczZxZr.js
Vendored
+380
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-CpG8j7ha.js"></script>
<script type="module" crossorigin src="/assets/index-DSczZxZr.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DiSNgbNY.css">
</head>
<body>
frontend/src/components/models/JobsBar.tsx
+68
View File
@@ -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>
)
}
frontend/src/components/models/ModelBadges.tsx
+29
View File
@@ -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" }
}
frontend/src/views/ModelsView.tsx
+32 -237
View File
@@ -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 {