modelle: Installieren mit Rueckfrage, Doppelklick-Sperre und Rollen-Hinweis, Auftraege mit Fortschritt

- "Installieren" fragt vorher nach (Modell, Quantisierung, Groesse falls bekannt) und
  sperrt, solange der Start unterwegs ist - ein Doppelklick startet keinen zweiten Download.
- Mit Rolle "Coder" steht deutlich da, welches Modell ersetzt wird (unter der Auswahl und
  in der Rueckfrage), dass es auf der Platte bleibt und der Bild-Zwilling vorerst beim
  bisherigen Modell liest.
- Die Modelle-Seite zeigt laufende Downloads als Auftraege mit Fortschritt und Abbrechen.
- Suche und Quantisierungen haben Lade-, Fehler- und Leerzustaende; Nutzung, Radar und
  Aufraeumen melden Fehler statt still zu verschwinden. Ein 404 heisst "Radar nicht
  eingerichtet", alles andere ist ein Fehler. Scheitert nur ein spaeteres Nachladen,
  bleibt der letzte Stand der Modell-Liste stehen.
- Anzeige-Logik der Wartungsseiten liegt jetzt in lib/wartung.ts statt in anzeige.ts,
  die im Start-Buendel steckt.

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

frontend/src/views/ModellSuche.tsx

@@ -1,21 +1,35 @@
 import { useState } from "react"
-import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { useQuery } from "@tanstack/react-query"
+import { Bestaetigen } from "@/components/cockpit/Bestaetigen"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
-import { api, post } from "@/lib/api"
-import { melden } from "@/lib/meldungen"
-import { zahl } from "@/lib/zeit"
+import { useInstallieren } from "@/lib/abfragen"
+import { api } from "@/lib/api"
+import { rollenErsatzText } from "@/lib/wartung"
+import { gbText, zahl } from "@/lib/zeit"
 
 interface Treffer { repo: string; downloads: number; likes: number }
+/** /api/hf/quants liefert heute nur die Namen. Kommen Größen dazu, zeigen Liste und Rückfrage sie an. */
 interface Quant { quant?: string; name?: string; size_bytes?: number; total_bytes?: number }
 
+/** Rollen, die sich beim Installieren gleich vergeben lassen (Rollen-Alias → Name in der Oberfläche). */
+const ROLLEN: Record<string, string> = { coder: "Coder" }
+
+/** Wer eine Rolle heute innehat: Modellname und ob ein Bild-Zwilling daran hängt. */
+export type RollenStand = Record<string, { name: string; zwilling: boolean } | undefined>
+
 /** Modelle selbst auf Hugging Face suchen und installieren — zusätzlich zum Radar. */
-export function ModellSuche({ offen, onSchliessen }: { offen: boolean; onSchliessen: () => void }) {
-  const qc = useQueryClient()
+export function ModellSuche({ offen, onSchliessen, rollenJetzt }: {
+  offen: boolean
+  onSchliessen: () => void
+  rollenJetzt: RollenStand
+}) {
+  const installieren = useInstallieren()
   const [eingabe, setEingabe] = useState("")
   const [begriff, setBegriff] = useState("")
   const [repo, setRepo] = useState<string | null>(null)
   const [rolle, setRolle] = useState("")
+  const [auswahl, setAuswahl] = useState<{ quant: string; bytes?: number } | null>(null)
 
   const treffer = useQuery({
     queryKey: ["hf-suche", begriff],
@@ -28,20 +42,24 @@ export function ModellSuche({ offen, onSchliessen }: { offen: boolean; onSchlies
     enabled: !!repo,
   })
 
-  async function installieren(quant: string) {
-    if (!repo) return
-    try {
-      await post("/api/models/install", { repo, quant, role: rolle || null })
-      melden("erfolg", `${repo} (${quant}) wird heruntergeladen. Den Fortschritt siehst du unter Updates.`)
-      qc.invalidateQueries({ queryKey: ["jobs"] })
-      qc.invalidateQueries({ queryKey: ["models"] })
-      onSchliessen()
-    } catch (f) {
-      melden("fehler", (f as Error).message)
-    }
-  }
-
   const quantListe = (quants.data?.quants ?? []).map((q) => (typeof q === "string" ? { quant: q } : q))
+  const rollenName = rolle ? ROLLEN[rolle] ?? rolle : null
+  const ersatz = rollenName && repo ? rollenErsatzText(repo, rollenName, rollenJetzt[rolle]) : null
+
+  function starten() {
+    // Die Sperre gegen den Doppelklick: Solange ein Start unterwegs ist, geht kein zweiter los.
+    if (!repo || !auswahl || installieren.isPending) return
+    installieren.mutate(
+      { repo, quant: auswahl.quant, rolle: rolle || null },
+      {
+        onSuccess: (e) => {
+          setAuswahl(null)
+          if (e.ok !== false) onSchliessen()
+        },
+        onError: () => setAuswahl(null),
+      },
+    )
+  }
 
   return (
     <Sheet open={offen} onOpenChange={(o) => !o && onSchliessen()}>
@@ -69,32 +87,61 @@ export function ModellSuche({ offen, onSchliessen }: { offen: boolean; onSchlies
           <Button type="submit">Suchen</Button>
         </form>
         <div className="flex flex-col px-4 pb-4">
-          {treffer.isFetching && <p className="py-3 text-sm text-text-2">Suche läuft …</p>}
-          {!repo && treffer.data?.results.map((t) => (
-            <button
-              key={t.repo}
-              type="button"
-              onClick={() => setRepo(t.repo)}
-              className="flex min-h-11 items-center justify-between gap-3 border-t border-linie py-2 text-left hover:text-cyan"
-            >
-              <span className="ziffern min-w-0 text-sm break-all">{t.repo}</span>
-              <span className="ziffern shrink-0 text-xs text-text-3">{zahl(t.downloads)} ↓</span>
-            </button>
-          ))}
+          {!repo && (
+            <>
+              {treffer.isFetching && <p role="status" className="py-3 text-sm text-text-2">Suche läuft …</p>}
+              {!treffer.isFetching && treffer.isError && (
+                <p role="alert" className="py-3 text-sm text-rot-text">Die Suche ging nicht: {treffer.error.message}</p>
+              )}
+              {!treffer.isFetching && treffer.data?.results.length === 0 && (
+                <p className="py-3 text-sm text-text-2">
+                  Keine Treffer. Versuch einen anderen Suchbegriff — oder Hugging Face ist gerade nicht erreichbar.
+                </p>
+              )}
+              {treffer.data?.results.map((t) => (
+                <button
+                  key={t.repo}
+                  type="button"
+                  onClick={() => setRepo(t.repo)}
+                  className="flex min-h-11 items-center justify-between gap-3 border-t border-linie py-2 text-left hover:text-cyan"
+                >
+                  <span className="ziffern min-w-0 text-sm break-all">{t.repo}</span>
+                  <span className="ziffern shrink-0 text-xs text-text-3">{zahl(t.downloads)} ↓</span>
+                </button>
+              ))}
+            </>
+          )}
           {repo && (
             <div className="flex flex-col gap-3 pt-2">
               <div className="flex items-center justify-between gap-2">
-                <span className="ziffern text-sm break-all">{repo}</span>
+                <span className="ziffern min-w-0 text-sm break-all">{repo}</span>
                 <Button variant="ghost" size="sm" onClick={() => setRepo(null)}>Zurück</Button>
               </div>
-              <label className="flex items-center gap-3 text-sm text-text-2">
+              <label className="flex flex-wrap items-center gap-3 text-sm text-text-2">
                 Rolle
-                <select value={rolle} onChange={(e) => setRolle(e.target.value)} className="h-11 rounded-lg border border-linie-stark bg-erhaben px-3 text-foreground">
+                <select
+                  value={rolle}
+                  onChange={(e) => setRolle(e.target.value)}
+                  className="h-11 min-w-0 rounded-lg border border-linie-stark bg-erhaben px-3 text-foreground"
+                >
                   <option value="">ohne Rolle (nur installieren)</option>
-                  <option value="coder">Coder</option>
+                  {Object.entries(ROLLEN).map(([wert, name]) => (
+                    <option key={wert} value={wert}>{name}</option>
+                  ))}
                 </select>
               </label>
-              {quants.isFetching && <p className="text-sm text-text-2">Quantisierungen werden gelesen …</p>}
+              {ersatz && (
+                <p className="m-0 rounded-lg border border-bernstein/60 bg-bernstein-grund px-3 py-2.5 text-sm leading-relaxed text-bernstein">
+                  {ersatz}
+                </p>
+              )}
+              {quants.isFetching && <p role="status" className="text-sm text-text-2">Quantisierungen werden gelesen …</p>}
+              {!quants.isFetching && quants.isError && (
+                <p role="alert" className="text-sm text-rot-text">Die Dateien dieses Modells ließen sich nicht lesen: {quants.error.message}</p>
+              )}
+              {!quants.isFetching && quants.data && quantListe.length === 0 && (
+                <p className="text-sm text-text-2">Hier gibt es keine GGUF-Dateien, die sich installieren lassen.</p>
+              )}
               {quantListe.map((q) => {
                 const name = q.quant ?? q.name ?? "?"
                 const bytes = q.total_bytes ?? q.size_bytes
@@ -102,8 +149,15 @@ export function ModellSuche({ offen, onSchliessen }: { offen: boolean; onSchlies
                   <div key={name} className="flex items-center justify-between gap-3 border-t border-linie py-2">
                     <span className="ziffern text-sm">{name}</span>
                     <span className="flex items-center gap-3">
-                      {bytes ? <span className="ziffern text-xs text-text-3">{(bytes / 1024 ** 3).toFixed(1).replace(".", ",")} GB</span> : null}
-                      <Button variant="outline" size="sm" onClick={() => installieren(name)}>Installieren</Button>
+                      {bytes ? <span className="ziffern text-xs text-text-3">{gbText(bytes, 1)}</span> : null}
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        disabled={installieren.isPending}
+                        onClick={() => setAuswahl({ quant: name, bytes })}
+                      >
+                        Installieren
+                      </Button>
                     </span>
                   </div>
                 )
@@ -111,6 +165,24 @@ export function ModellSuche({ offen, onSchliessen }: { offen: boolean; onSchlies
             </div>
           )}
         </div>
+        <Bestaetigen
+          offen={auswahl !== null}
+          titel="Modell installieren?"
+          text={auswahl && repo
+            ? `${repo} (${auswahl.quant}${auswahl.bytes ? `, ${gbText(auswahl.bytes, 1)}` : ""}) wird heruntergeladen und in llama-swap eingetragen.` +
+              (auswahl.bytes ? "" : " Die Größe siehst du beim Auftrag, sobald der Download läuft.")
+            : ""}
+          knopf={installieren.isPending ? "Wird gestartet …" : "Installieren"}
+          gesperrt={installieren.isPending}
+          onNein={() => setAuswahl(null)}
+          onJa={starten}
+        >
+          {ersatz && (
+            <p className="m-0 rounded-lg border border-bernstein/60 bg-bernstein-grund px-3 py-2.5 text-[15px] leading-relaxed text-bernstein">
+              {ersatz}
+            </p>
+          )}
+        </Bestaetigen>
       </SheetContent>
     </Sheet>
   )

frontend/src/views/Modelle.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react"
 import { Search } from "lucide-react"
+import { Auftraege } from "@/components/cockpit/Auftraege"
 import { Bestaetigen } from "@/components/cockpit/Bestaetigen"
 import { Chip, type ChipArt, Zustandsfeld } from "@/components/cockpit/Chip"
 import { Panel } from "@/components/cockpit/Panel"
@@ -9,6 +10,7 @@ import {
   useRadarSuche, useStart,
 } from "@/lib/abfragen"
 import { messwert, RADAR_STATUS_TEXT, rolleVon } from "@/lib/anzeige"
+import { ApiFehler } from "@/lib/api"
 import { useLetzteMetrik } from "@/lib/strom"
 import type { AufraeumKandidat, Modell, Nutzung, RadarKandidat, RadarTest } from "@/lib/typen"
 import { flugplanZeit, gb, gbText, zahl } from "@/lib/zeit"
@@ -98,8 +100,18 @@ function Rolle({ titel, modell, zwilling, laeuft, nutzer }: {
   )
 }
 
-function NutzungsPanel({ nutzung }: { nutzung: Nutzung | undefined }) {
-  if (!nutzung) return null
+function NutzungsPanel({ nutzung, laedt, fehler }: { nutzung: Nutzung | undefined; laedt: boolean; fehler: string | null }) {
+  if (!nutzung) {
+    return (
+      <Panel titel="Wer nutzt die Modelle">
+        {laedt ? (
+          <p className="text-[15px] text-text-2">Wird gelesen …</p>
+        ) : (
+          <p role="alert" className="text-[15px] text-rot-text">Die Nutzung lässt sich gerade nicht lesen{fehler ? `: ${fehler}` : "."}</p>
+        )}
+      </Panel>
+    )
+  }
   const max = Math.max(1, ...nutzung.absender.map((a) => a.anfragen))
   const stunden = nutzung.letzte_24h.map((s) => Object.values(s.je_absender).reduce((a, b) => a + b, 0))
   const maxStunde = Math.max(1, ...stunden)
@@ -226,10 +238,16 @@ function Kandidat({ k, test, heute }: { k: RadarKandidat; test: RadarTest | unde
 function RadarPanel({ hirn, coder }: { hirn: string | undefined; coder: string | undefined }) {
   const radar = useRadar()
   const suche = useRadarSuche()
-  if (radar.isError) {
+  if (radar.isError && !radar.data) {
+    // 404 heißt: Diese Box hat kein Radar. Alles andere ist ein Fehler, kein fehlendes Radar.
+    const fehlt = radar.error instanceof ApiFehler && radar.error.status === 404
     return (
-      <Panel titel="Modell-Radar" id="radar">
-        <p className="text-[15px] text-text-2">Das Radar ist auf dieser Box noch nicht eingerichtet.</p>
+      <Panel titel="Modell-Radar" id="radar" className="scroll-mt-4">
+        {fehlt ? (
+          <p className="text-[15px] text-text-2">Das Radar ist auf dieser Box noch nicht eingerichtet.</p>
+        ) : (
+          <p role="alert" className="text-[15px] text-rot-text">Das Radar antwortet gerade nicht: {radar.error.message}</p>
+        )}
       </Panel>
     )
   }
@@ -238,7 +256,12 @@ function RadarPanel({ hirn, coder }: { hirn: string | undefined; coder: string |
     <Panel
       titel="Modell-Radar"
       id="radar"
-      rechts={<Button variant="info" size="sm" onClick={() => suche.mutate(undefined)} disabled={suche.isPending}>Jetzt suchen</Button>}
+      className="scroll-mt-4"
+      rechts={
+        <Button variant="info" size="sm" onClick={() => suche.mutate(undefined)} disabled={suche.isPending}>
+          {suche.isPending ? "Sucht …" : "Jetzt suchen"}
+        </Button>
+      }
     >
       <p className="-mt-2 text-sm text-text-2">
         Testet nachts zwischen 00:30 und 02:30 selbst, höchstens einen Kandidaten pro Woche.
@@ -281,7 +304,13 @@ function AufraeumenPanel() {
   const [frage, setFrage] = useState<AufraeumKandidat | null>(null)
   const kandidaten = liste.data?.kandidaten ?? []
   const summe = kandidaten.reduce((s, k) => s + k.groesse_gb, 0)
-  if (liste.isError) return null
+  if (liste.isError && !liste.data) {
+    return (
+      <Panel titel="Aufräumen">
+        <p role="alert" className="text-[15px] text-rot-text">Was sich aufräumen ließe, lässt sich gerade nicht lesen: {liste.error.message}</p>
+      </Panel>
+    )
+  }
   return (
     <Panel
       titel="Aufräumen"
@@ -339,7 +368,8 @@ export function ModelleSeite() {
   const [suche, setSuche] = useState(false)
 
   if (modelle.isPending) return <Zustandsfeld text="Modelle werden gelesen …" />
-  if (modelle.error || !modelle.data) return <Zustandsfeld fehler text={`Die Modell-Liste fehlt: ${modelle.error?.message ?? "keine Daten"}`} />
+  // Scheitert nur ein späteres Nachladen, bleibt der letzte Stand stehen.
+  if (!modelle.data) return <Zustandsfeld fehler text={`Die Modell-Liste fehlt: ${modelle.error?.message ?? "keine Daten"}`} />
 
   const liste = modelle.data.models
   const laufend = modelle.data.running
@@ -356,19 +386,21 @@ export function ModelleSeite() {
   return (
     <>
       <Speicher modelle={liste} laufend={laufend} />
+      <Auftraege alsPanel />
       <section aria-label="Rollen" className="grid gap-5 md:grid-cols-3 md:gap-6">
         <Rolle titel="Hirn" modell={hirn} zwilling={hirnZwilling} laeuft={!!hirn && laufend.includes(hirn.name)} nutzer="Lucy, NerdQuiz und OpenChamber für Kleinkram" />
         <Rolle titel="Coder" modell={coder} zwilling={coderZwilling} laeuft={!!coder && laufend.includes(coder.name)} nutzer="OpenChamber zum Planen und Bauen und Lucys Delegation" />
         <Rolle titel="Dritte Rolle" laeuft={false} nutzer="" />
       </section>
       <div className="grid gap-5 md:gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)]">
-        <NutzungsPanel nutzung={nutzung.data} />
+        <NutzungsPanel nutzung={nutzung.data} laedt={nutzung.isPending} fehler={nutzung.error?.message ?? null} />
         <RadarPanel hirn={hirn?.name} coder={coder?.name} />
       </div>
       <Panel
         titel="Weitere Einträge"
         rechts={<Button variant="outline" size="sm" onClick={() => setSuche(true)}><Search aria-hidden /> Modelle selbst suchen</Button>}
       >
+        {weitere.length === 0 && <p className="text-[15px] text-text-2">Keine weiteren Einträge.</p>}
         <ul className="m-0 flex list-none flex-col p-0">
           {weitere.map((m) => (
             <li key={m.name} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-t border-linie py-2.5 sm:grid-cols-[minmax(0,1fr)_120px_160px]">
@@ -385,7 +417,11 @@ export function ModelleSeite() {
         </ul>
       </Panel>
       <AufraeumenPanel />
-      <ModellSuche offen={suche} onSchliessen={() => setSuche(false)} />
+      <ModellSuche
+        offen={suche}
+        onSchliessen={() => setSuche(false)}
+        rollenJetzt={{ coder: coder ? { name: coder.name, zwilling: !!coderZwilling } : undefined }}
+      />
     </>
   )
 }

frontend/src/views/Updates.tsx

@@ -10,7 +10,8 @@ import {
   type UpdateLauf, useFreigeben, useJetztSichern, useJobs, useSicherungen, useStart, useUpdateDetails,
   useUpdateStarten, useUpdateVerlauf, useZurueckspielen,
 } from "@/lib/abfragen"
-import { detailsHabenNeues, laeuftNoch, pruefFehlerText, versionen } from "@/lib/anzeige"
+import { laeuftNoch } from "@/lib/anzeige"
+import { detailsHabenNeues, pruefFehlerText, versionen } from "@/lib/wartung"
 import type { Festgehalten, Sicherung, UpdateDetails } from "@/lib/typen"
 import { flugplanZeit } from "@/lib/zeit"
 
@@ -149,7 +150,7 @@ function BausteinZeile({ id, name, neuLautStart, fest, gesperrt, onStart, onFrei
     was = "Aktuell."
   } else {
     was = (
-      <span className="flex flex-col items-start gap-2">
+      <div className="flex flex-col items-start gap-2">
         {fehler && <span className="text-bernstein">{pruefFehlerText(fehler)}</span>}
         {d && <Urteil d={d} />}
         {id === "os" ? (
@@ -160,7 +161,7 @@ function BausteinZeile({ id, name, neuLautStart, fest, gesperrt, onStart, onFrei
         ) : summary ? (
           <Zusammenfassung text={summary} />
         ) : null}
-      </span>
+      </div>
     )
   }
 
@@ -179,14 +180,14 @@ function BausteinZeile({ id, name, neuLautStart, fest, gesperrt, onStart, onFrei
       </span>
       <span role="cell" className="ziffern hidden text-sm text-text-2 md:block">{laeuftZelle}</span>
       <span role="cell" className="ziffern hidden text-sm md:block">{neuZelle}</span>
-      <span role="cell" className="col-span-2 text-sm leading-relaxed text-text-2 md:col-span-1">
+      <div role="cell" className="col-span-2 text-sm leading-relaxed text-text-2 md:col-span-1">
         {fest && (
           <span className="mb-1.5 block text-bernstein">
             Festgehalten seit {fest.seit} auf {fest.version}: {fest.grund}. Der Sonntags-Lauf überspringt {name}.
           </span>
         )}
         {was}
-      </span>
+      </div>
       {(fest || hatUpdate) && (
         <span role="cell" className="col-span-2 flex flex-wrap gap-2 md:col-span-1 md:flex-col md:items-end">
           {fest && (