v3 Phase B: alle Panels auf das Design-System + Beginner-UX

- cookbook.js: Fit-Ampel (gruen/gelb/rot) + Legende + Klartext-Urteile, sauberes Modal.
- server.js: heikle Aktionen mit confirmModal/promptModal (Klartext-Konsequenz),
  Konsole im neuen Stil, Begriffe uebersetzt.
- models.js: Tabelle re-skinnt (Capability-Tags statt Emoji, --blue raus),
  Entladen mit Bestaetigung, Konfig-Modal vereinheitlicht.
- jobs.js (Aktivitaet): Metrik-Kacheln + Klartext-Verlaeufe.
- guides.js: Kopf + Intro, Integrations-URL aus Browser-Host abgeleitet.
- index.html: Mountpunkte fuer Modelle-/Aktivitaets-Kopf.
- app.py: no-cache-Middleware fuer /static (UI-Aenderungen wirken sofort nach rsync,
  kein Stale-JS mehr).
- base.css: Sidebar bei schmalem Viewport icon-only (Label-Ueberlappung gefixt).

Verifiziert: alle 6 Panels mounten fehlerfrei (0 Konsolenfehler), Fit-Ampel rechnet live.

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

app.py

@@ -24,6 +24,18 @@ from routers import jobs, maintenance, models, system, cookbook
 
 app = FastAPI(title="Mission Control")
 
+
+@app.middleware("http")
+async def _no_cache_static(request, call_next):
+    """UI + statische Module immer revalidieren lassen (304 wenn unveraendert),
+    damit Aenderungen nach einem rsync sofort wirken und kein Stale-JS haengen bleibt."""
+    response = await call_next(request)
+    path = request.url.path
+    if path == "/" or path.startswith("/static"):
+        response.headers["Cache-Control"] = "no-cache"
+    return response
+
+
 app.include_router(models.router)
 app.include_router(jobs.router)
 app.include_router(maintenance.router)

static/css/base.css

@@ -122,7 +122,10 @@ a{color:var(--accent);text-decoration:none}
 .split{display:grid;gap:var(--sp-4);grid-template-columns:1.05fr 1fr}
 @media(max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:900px){.split{grid-template-columns:1fr}}
-@media(max-width:760px){.grid-3,.grid-2,.kpis{grid-template-columns:1fr}.sidebar{--side:64px}}
+@media(max-width:760px){.grid-3,.grid-2,.kpis{grid-template-columns:1fr}
+  .sidebar{width:60px;flex-basis:60px}
+  .ni-tx,.brand-tx{display:none}
+  .nav-item{justify-content:center}.brand{justify-content:center}}
 
 /* Alert-Banner */
 .alert{

static/index.html

@@ -52,7 +52,8 @@
       </section>
 
       <section class="view" data-view="activity" hidden>
-        <div class="grid kpis" id="act-kpis"></div>
+        <div id="act-head"></div>
+        <div class="tiles" id="act-kpis"></div>
         <div class="card" id="act-sys"></div>
         <div class="card" id="v-activity"></div>
       </section>
@@ -62,9 +63,8 @@
       </section>
 
       <section class="view" data-view="models" hidden>
-        <div class="grid grid-2" id="m-top-grid">
-          <div class="card" id="m-chat" style="grid-column: span 2;"></div>
-        </div>
+        <div id="m-head"></div>
+        <div class="card" id="m-chat"></div>
         <div class="card" id="m-table"></div>
       </section>
 

static/js/panels/cookbook.js

@@ -1,453 +1,270 @@
+// cookbook.js — "App-Store" für Modelle (v3): Hardware-Fit als Ampel, Klartext-Urteile.
+// Backend: /api/cookbook/{analyze,evaluate} (hw_math), /api/download, /api/register.
+
 import { api } from "../core/api.js";
 import { $, esc, icon, toast } from "../core/ui.js";
-import { track } from "./jobs.js";
 
-const CURATED_MODELS = [
-  {
-    id: "qwen-coder-32b",
-    name: "Qwen 2.5 Coder 32B",
-    repo: "unsloth/Qwen2.5-Coder-32B-Instruct-GGUF",
-    file: "Qwen2.5-Coder-32B-Instruct-Q4_K_M.gguf",
-    desc: "Top-Tier lokales Coder-Modell. Braucht ca. 24GB VRAM.",
-    params_b: 32, quant: "Q4_K_M", ctx: 32768, alias: "coder"
-  },
-  {
-    id: "qwen-coder-7b",
-    name: "Qwen 2.5 Coder 7B",
-    repo: "unsloth/Qwen2.5-Coder-7B-Instruct-GGUF",
-    file: "Qwen2.5-Coder-7B-Instruct-Q4_K_M.gguf",
-    desc: "Schneller Coder. Perfekte Balance aus Speed und Qualität.",
-    params_b: 7, quant: "Q4_K_M", ctx: 32768, alias: "coder-fast"
-  },
-  {
-    id: "llama3-vision-11b",
-    name: "Llama 3.2 Vision 11B",
-    repo: "unsloth/Llama-3.2-11B-Vision-Instruct-GGUF",
-    file: "Llama-3.2-11B-Vision-Instruct-Q4_K_M.gguf",
-    desc: "Modell für Bilderkennung und multimodale Tasks.",
-    params_b: 11, quant: "Q4_K_M", ctx: 8192, alias: "vision"
-  },
-  {
-    id: "qwen-general-7b",
-    name: "Qwen 2.5 7B",
-    repo: "unsloth/Qwen2.5-7B-Instruct-GGUF",
-    file: "Qwen2.5-7B-Instruct-Q4_K_M.gguf",
-    desc: "Hervorragendes Generalist/Scout Modell.",
-    params_b: 7, quant: "Q4_K_M", ctx: 8192, alias: "scout"
-  }
+const CURATED = [
+  { name: "Qwen 2.5 Coder 7B", repo: "unsloth/Qwen2.5-Coder-7B-Instruct-GGUF", file: "Qwen2.5-Coder-7B-Instruct-Q4_K_M.gguf",
+    desc: "Schnell und locker auf deiner Kiste — ideal zum Programmieren.", params_b: 7, quant: "Q4_K_M", ctx: 32768, alias: "coder-fast" },
+  { name: "Qwen 2.5 Coder 32B", repo: "unsloth/Qwen2.5-Coder-32B-Instruct-GGUF", file: "Qwen2.5-Coder-32B-Instruct-Q4_K_M.gguf",
+    desc: "Mehr Können, etwas langsamer — der starke Allround-Coder.", params_b: 32, quant: "Q4_K_M", ctx: 32768, alias: "coder" },
+  { name: "Llama 3.2 Vision 11B", repo: "unsloth/Llama-3.2-11B-Vision-Instruct-GGUF", file: "Llama-3.2-11B-Vision-Instruct-Q4_K_M.gguf",
+    desc: "Versteht Bilder und Text — gut für multimodale Aufgaben.", params_b: 11, quant: "Q4_K_M", ctx: 8192, alias: "vision" },
+  { name: "Qwen 2.5 7B", repo: "unsloth/Qwen2.5-7B-Instruct-GGUF", file: "Qwen2.5-7B-Instruct-Q4_K_M.gguf",
+    desc: "Hervorragender Allrounder — schnell und vielseitig.", params_b: 7, quant: "Q4_K_M", ctx: 8192, alias: "scout" },
 ];
 
-// Lokale Mathe entfernt. Wir nutzen jetzt das Backend.
+const FILTERS = [
+  { id: "", label: "Alle" }, { id: "coder", label: "Coder" }, { id: "scout", label: "Scout" },
+  { id: "vision", label: "Vision" }, { id: "manager", label: "Manager" }, { id: "reviewer", label: "Reviewer" },
+];
 
 let lastSys = null;
 let currentResults = [];
 let currentAnalysis = null;
 let activeFilter = "";
 
-const FILTERS = [
-  { id: "", label: "Alle" },
-  { id: "vision", label: "Vision" },
-  { id: "scout", label: "Scout" },
-  { id: "coder", label: "Coder" },
-  { id: "manager", label: "Manager" },
-  { id: "reviewer", label: "Reviewer" }
-];
+const fitCls = lvl => lvl === "perfect" ? "ok" : lvl === "marginal" ? "warn" : "bad";
 
 function mount() {
   const c = $(".view[data-view='cookbook']");
-  
-  const filtersHtml = FILTERS.map(f => 
-    `<button class="ghost filter-btn ${activeFilter === f.id ? 'active' : ''}" style="margin-right:8px; border-radius:16px; padding:6px 16px; ${activeFilter === f.id ? 'background:var(--hi); color:var(--bg)' : 'background:var(--bg); border:1px solid var(--line)'}" onclick="window.setFilter('${f.id}')">${f.label}</button>`
-  ).join("");
-
   c.innerHTML = `
-    <div class="card" style="padding-bottom:32px">
-      <div style="max-width:600px; margin:0 auto; text-align:center;">
-        <h2 style="margin-top:20px; margin-bottom:8px">App Store für Modelle</h2>
-        <p class="meta" style="margin-bottom:24px">Entdecke Modelle live auf HuggingFace, Hardware-Fit inklusive.</p>
-        
-        <div style="display:flex; gap:12px; position:relative">
-          <input id="cb-search" class="tokin" style="flex:1; padding:12px 18px; font-size:16px; border-radius:12px;" placeholder="Nach Modellen suchen (z.B. Llama 3)...">
-          <button class="primary" id="cb-btn-search" style="border-radius:12px; padding:0 24px;">Suchen</button>
-        </div>
-        
-        <div id="cb-filters" style="margin-top:20px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px">
-          ${filtersHtml}
-        </div>
-      </div>
-    </div>
+    <div class="pagehead"><div>
+      <h1>Modell-Cookbook</h1>
+      <div class="sub">Finde ein KI-Modell, das auf deinen Mini-PC passt — den Hardware-Check rechnen wir für dich aus.</div>
+    </div></div>
 
-    <div class="card-h" style="margin-top:24px"><h3 id="cb-section-title">Kuratierte Empfehlungen</h3></div>
+    <div class="flex gap-3" style="margin:4px 0 6px">
+      <input id="cb-search" placeholder="Modell suchen, z.B. „Llama 3"…" style="margin:0;flex:1">
+      <button class="primary" id="cb-btn-search" style="white-space:nowrap">Suchen</button>
+    </div>
+    <div id="cb-filters" class="flex gap-2" style="flex-wrap:wrap"></div>
+
+    <div class="card-h" style="margin-top:18px;align-items:center">
+      <h3 id="cb-section-title">Empfohlen für deine Hardware</h3>
+      <span class="chip" id="cb-hw">deine Hardware</span>
+    </div>
+    <div class="legend mb-4">
+      <span><i style="background:var(--on)"></i>passt locker</span>
+      <span><i style="background:var(--warn)"></i>läuft, aber knapp</span>
+      <span><i style="background:var(--err)"></i>zu groß für deinen Speicher</span>
+    </div>
     <div class="grid grid-3" id="cb-grid"></div>
 
-    <!-- Modal für HuggingFace Modell Details -->
-    <div id="cb-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:100; align-items:center; justify-content:center;">
-      <div class="card" style="width:100%; max-width:600px; max-height:80vh; overflow-y:auto; position:relative">
-        <button id="cb-modal-close" class="ghost" style="position:absolute; top:12px; right:12px;">Schließen</button>
-        <h2 id="cb-m-title" style="margin-top:0">Modell</h2>
-        <p class="meta" id="cb-m-repo">repo/name</p>
-        
-        <div style="margin-top:24px">
-          <label>Wähle eine Quantisierung (GGUF-Datei)</label>
-          <select id="cb-m-files" class="tokin" style="width:100%; margin-top:8px; padding:12px"></select>
-          <div id="cb-m-loading" class="meta" style="margin-top:8px; display:none">Lade Dateien...</div>
+    <div id="cb-modal" class="modal-overlay" style="display:none">
+      <div class="modal-card" style="max-width:560px">
+        <button id="cb-modal-close" class="ghost" style="position:absolute;top:14px;right:14px">Schließen</button>
+        <h3 id="cb-m-title">Modell</h3>
+        <p class="mono-sm" id="cb-m-repo" style="margin:-4px 0 16px">repo/name</p>
+
+        <label>Quantisierung (GGUF-Datei) wählen</label>
+        <select id="cb-m-files"></select>
+        <div class="hint" id="cb-m-loading" style="display:none">Lade Dateien von HuggingFace…</div>
+
+        <div class="row" style="margin-top:4px">
+          <div><label>Alias (Rolle)</label><input id="cb-m-alias" placeholder="z.B. coder"></div>
+          <div><label>Kontext-Größe</label><input id="cb-m-ctx" type="number" value="8192"></div>
         </div>
 
-        <div style="margin-top:24px; display:flex; gap:12px">
-           <div style="flex:1">
-             <label>Alias (Rolle)</label>
-             <input id="cb-m-alias" class="tokin" style="width:100%; margin-top:8px" placeholder="z.B. coder">
-           </div>
-           <div style="flex:1">
-             <label>Context-Size</label>
-             <input id="cb-m-ctx" class="tokin" style="width:100%; margin-top:8px" value="8192" type="number">
-           </div>
+        <div id="cb-m-fit" class="tile" style="display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px">
+          <div><div style="font-size:13px">Ressourcen-Check</div>
+            <div class="hint" id="cb-m-fit-text" style="margin:4px 0 0">Berechne…</div></div>
+          <span id="cb-m-fit-badge"></span>
         </div>
 
-        <div id="cb-m-fit-container" style="margin-top:24px; padding:16px; background:var(--bg); border:1px solid var(--line); border-radius:8px; display:flex; justify-content:space-between; align-items:center;">
-           <div>
-             <div style="font-weight:600; font-size:14px; margin-bottom:4px;">Ressourcen-Check</div>
-             <div class="meta" id="cb-m-fit-text">Berechne...</div>
-           </div>
-           <div id="cb-m-fit-badge"></div>
-        </div>
-
-        <button class="primary" id="cb-m-download" style="width:100%; margin-top:24px; padding:12px">Herunterladen & Einpflegen</button>
+        <button class="primary" id="cb-m-download" style="width:100%">Herunterladen &amp; Einpflegen</button>
       </div>
-    </div>
-  `;
+    </div>`;
 
+  renderFilters();
   $("#cb-btn-search").addEventListener("click", doSearch);
   $("#cb-search").addEventListener("keydown", e => { if (e.key === "Enter") doSearch(); });
   $("#cb-modal-close").addEventListener("click", () => $("#cb-modal").style.display = "none");
+  $("#cb-modal").addEventListener("click", e => { if (e.target.id === "cb-modal") $("#cb-modal").style.display = "none"; });
   $("#cb-m-download").addEventListener("click", doDownload);
-  
   $("#cb-m-files").addEventListener("change", updateLiveFit);
   $("#cb-m-ctx").addEventListener("change", reanalyzeCtx);
 
+  renderHwChip();
   renderCurated();
 }
 
-// Aktuelle Analyse-Daten vom Backend
+function renderFilters() {
+  $("#cb-filters").innerHTML = FILTERS.map(f =>
+    `<button class="${activeFilter === f.id ? "primary" : "ghost"}" data-f="${f.id}" style="border-radius:999px">${f.label}</button>`
+  ).join("");
+  $("#cb-filters").querySelectorAll("[data-f]").forEach(b =>
+    b.addEventListener("click", () => { activeFilter = b.getAttribute("data-f"); renderFilters(); doSearch(); }));
+}
 
-function updateLiveFit() {
-  const file = $("#cb-m-files").value;
-  if (!currentAnalysis || !file) {
-    $("#cb-m-fit-container").style.display = "none";
-    return;
-  }
-  
-  const fData = currentAnalysis.files.find(f => f.filename === file);
-  if (!fData) return;
-  
-  const fit = fData.fit;
-  const cls = fit.level === "perfect" ? "b-run" : (fit.level === "marginal" ? "b-load" : "b-err");
-  
-  $("#cb-m-fit-container").style.display = "flex";
-  $("#cb-m-fit-text").innerHTML = `Geschätzter Bedarf: <b>~${fit.req_gb.toFixed(1)} GB RAM/VRAM</b> <br><small class="meta">${currentAnalysis.params_b}B Params · ${fData.quant} · ~${Math.round(fit.tps)} t/s</small>`;
-  $("#cb-m-fit-badge").innerHTML = `<span class="badge ${cls}">${fit.text}</span>`;
-  
-  // Wenn "too_tight", machen wir den Download-Button gelb zur Warnung, erlauben ihn aber
-  const btn = $("#cb-m-download");
-  if (fit.level === "too_tight") {
-    btn.className = "primary warn";
-    btn.innerHTML = "Trotzdem herunterladen (OOM Risiko!)";
-  } else {
-    btn.className = "primary";
-    btn.innerHTML = "Herunterladen & Einpflegen";
+function renderHwChip() {
+  const el = $("#cb-hw"); if (!el) return;
+  if (lastSys?.ram?.total) {
+    el.innerHTML = `${icon("cpu")}${Math.round(lastSys.ram.total / 1024 ** 3)} GB Speicher`;
   }
 }
 
-async function reanalyzeCtx() {
-  if (!currentAnalysis) return;
-  const ctx = parseInt($("#cb-m-ctx").value) || 8192;
-  const repo = currentAnalysis.repo;
-  const file = $("#cb-m-files").value;
-  
-  $("#cb-m-fit-text").innerHTML = "Berechne neues Context-Limit...";
+// ---- Karten ----
+function metricLine(fit) { return `~${fit.req_gb.toFixed(1)} GB · ~${Math.round(fit.tps)} Tok/s`; }
+
+function curatedCard(m, i, fit) {
+  return `<div class="card" style="display:flex;flex-direction:column;cursor:pointer" data-cur="${i}">
+    <div class="flex justify-between items-center"><h3 style="margin:0;font-size:15px;font-weight:500">${esc(m.name)}</h3>
+      <span class="fit-badge ${fitCls(fit.level)}">${esc(fit.text)}</span></div>
+    <div class="text-sm text-mut" style="margin:12px 0;flex:1;line-height:1.5">${esc(m.desc)}</div>
+    <div class="flex justify-between items-center text-xs text-mut" style="border-top:1px solid var(--line);padding-top:11px">
+      <span class="mono-sm">${metricLine(fit)}</span><span class="mono-sm">${esc(m.quant)}</span></div>
+  </div>`;
+}
+
+async function renderCurated() {
+  $("#cb-section-title").textContent = "Empfohlen für deine Hardware";
+  const grid = $("#cb-grid"); if (!grid) return;
+  grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Berechne Hardware-Fit…</div>`;
   try {
-    const res = await api("/api/cookbook/analyze", {
-      method: "POST", body: JSON.stringify({ repo_id: repo, ctx })
-    });
-    currentAnalysis = res;
-    // Auswahl beibehalten
-    $("#cb-m-files").value = file;
-    updateLiveFit();
-  } catch(e) {}
-}
-
-window.setFilter = (filterId) => {
-  activeFilter = filterId;
-  const buttons = document.querySelectorAll('.filter-btn');
-  buttons.forEach(b => {
-    b.style.background = 'var(--bg)';
-    b.style.color = '';
-    b.style.border = '1px solid var(--line)';
-  });
-  
-  const idx = FILTERS.findIndex(f => f.id === filterId);
-  if (idx !== -1 && buttons[idx]) {
-    buttons[idx].style.background = 'var(--hi)';
-    buttons[idx].style.color = 'var(--bg)';
-    buttons[idx].style.border = 'none';
+    let html = "";
+    for (let i = 0; i < CURATED.length; i++) {
+      const m = CURATED[i];
+      const fit = await api("/api/cookbook/evaluate", { method: "POST", body: JSON.stringify({ params_b: m.params_b, quant: m.quant, ctx: m.ctx }) });
+      html += curatedCard(m, i, fit);
+    }
+    grid.innerHTML = html;
+    grid.querySelectorAll("[data-cur]").forEach(el => el.addEventListener("click", () => openCurated(+el.getAttribute("data-cur"))));
+  } catch (e) {
+    grid.innerHTML = `<div class="alert err" style="grid-column:1/-1">Konnte Empfehlungen nicht laden: ${esc(e.message)}</div>`;
   }
-  
-  doSearch();
-};
+}
 
 async function doSearch() {
   let q = $("#cb-search").value.trim();
-  
-  if (activeFilter) {
-     q = q ? (q + " " + activeFilter) : activeFilter;
-  }
-  
+  if (activeFilter) q = q ? q + " " + activeFilter : activeFilter;
   if (!q) return renderCurated();
 
-  const btn = $("#cb-btn-search");
-  btn.disabled = true; btn.textContent = "Lade...";
-  $("#cb-section-title").textContent = "Suchergebnisse für: " + esc(q);
-  $("#cb-grid").innerHTML = `<div class="meta" style="grid-column:1/-1; text-align:center; padding:40px">Suche auf HuggingFace...</div>`;
-
+  const btn = $("#cb-btn-search"); btn.disabled = true; btn.textContent = "Lade…";
+  $("#cb-section-title").textContent = "Suchergebnisse: " + q;
+  const grid = $("#cb-grid");
+  grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Suche auf HuggingFace…</div>`;
   try {
     const url = `https://huggingface.co/api/models?search=${encodeURIComponent(q)}&filter=gguf&sort=downloads&direction=-1&limit=12`;
     const r = await fetch(url);
-    const data = await r.json();
-    currentResults = data;
-    renderResults(data);
+    currentResults = await r.json();
+    renderResults(currentResults);
   } catch (e) {
-    $("#cb-grid").innerHTML = `<div class="alert err" style="grid-column:1/-1">${esc(e.message)}</div>`;
+    grid.innerHTML = `<div class="alert err" style="grid-column:1/-1">${esc(e.message)}</div>`;
   }
   btn.disabled = false; btn.textContent = "Suchen";
 }
 
 function renderResults(results) {
   const grid = $("#cb-grid");
-  if (!results || results.length === 0) {
-    grid.innerHTML = `<div class="meta" style="grid-column:1/-1; text-align:center; padding:40px">Keine GGUF-Modelle gefunden.</div>`;
-    return;
-  }
-
+  if (!results?.length) { grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Keine GGUF-Modelle gefunden.</div>`; return; }
   grid.innerHTML = results.map((m, i) => `
-    <div class="card" style="display:flex; flex-direction:column; cursor:pointer" onclick="window.openModelModal(${i})">
-      <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:8px;">
-        <div>
-          <h3 style="margin:0; font-size:16px; word-break:break-all">${esc(m.id.split('/').pop())}</h3>
-          <div class="meta" style="font-size:12px; margin-top:4px">${esc(m.author)}</div>
-        </div>
-        <span id="cb-s-badge-${i}" class="badge b-load" style="white-space:nowrap;">Analysiere...</span>
+    <div class="card" style="display:flex;flex-direction:column;cursor:pointer" data-res="${i}">
+      <div class="flex justify-between" style="align-items:flex-start;gap:8px">
+        <div style="min-width:0"><h3 style="margin:0;font-size:14.5px;font-weight:500;word-break:break-word">${esc(m.id.split("/").pop())}</h3>
+          <div class="text-xs text-mut" style="margin-top:3px">${esc(m.author || "")}</div></div>
+        <span class="fit-badge warn" id="cb-b-${i}">prüfe…</span>
       </div>
-      <div style="flex:1; margin-top:16px;"></div>
-      <div style="display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:12px" class="meta">
-        <span id="cb-s-metrics-${i}">Berechne Hardware-Fit...</span>
-        <span style="display:flex; gap:8px; align-items:center">
-           <span>⬇ ${(m.downloads||0).toLocaleString()}</span>
-           <span id="cb-s-quant-${i}" class="badge b-idle" style="font-size:11px">GGUF</span>
-        </span>
-      </div>
-    </div>
-  `).join("");
-
-  // Lade Metriken im Hintergrund
-  results.forEach((m, i) => fetchAnalysisForCard(i, m.id));
+      <div style="flex:1;margin-top:12px"></div>
+      <div class="flex justify-between items-center text-xs text-mut" style="border-top:1px solid var(--line);padding-top:11px">
+        <span class="mono-sm" id="cb-m-${i}">Hardware-Fit…</span>
+        <span class="mono-sm">⬇ ${(m.downloads || 0).toLocaleString()}</span></div>
+    </div>`).join("");
+  grid.querySelectorAll("[data-res]").forEach(el => el.addEventListener("click", () => openResult(+el.getAttribute("data-res"))));
+  results.forEach((m, i) => fetchFitForCard(i, m.id));
 }
 
-async function fetchAnalysisForCard(index, repo_id) {
+async function fetchFitForCard(i, repo_id) {
   try {
-    const res = await api("/api/cookbook/analyze", {
-      method: "POST", body: JSON.stringify({ repo_id, ctx: 8192 })
-    });
-    
-    const badgeEl = document.getElementById(`cb-s-badge-${index}`);
-    const metricsEl = document.getElementById(`cb-s-metrics-${index}`);
-    const quantEl = document.getElementById(`cb-s-quant-${index}`);
-    
-    if (!badgeEl || !metricsEl || !quantEl) return; // card might be gone
-
-    if (!res.files || res.files.length === 0) {
-       badgeEl.className = "badge b-err";
-       badgeEl.textContent = "Keine GGUFs";
-       metricsEl.textContent = "Keine Dateien gefunden";
-       return;
-    }
-    
-    let best = res.files.find(f => f.quant && f.quant.includes("Q4_K_M"));
-    if (!best) best = res.files[0];
-    
-    const fit = best.fit;
-    const cls = fit.level === "perfect" ? "b-run" : (fit.level === "marginal" ? "b-load" : "b-err");
-    
-    badgeEl.className = `badge ${cls}`;
-    badgeEl.textContent = fit.text;
-    metricsEl.innerHTML = `~${fit.req_gb.toFixed(1)} GB RAM/VRAM &middot; ~${Math.round(fit.tps)} t/s`;
-    quantEl.textContent = best.quant || "GGUF";
-
-  } catch(e) {
-    const badgeEl = document.getElementById(`cb-s-badge-${index}`);
-    const metricsEl = document.getElementById(`cb-s-metrics-${index}`);
-    if (badgeEl) {
-      badgeEl.className = "badge b-err";
-      badgeEl.textContent = "Fehler";
-    }
-    if (metricsEl) {
-      metricsEl.textContent = "Metriken konnten nicht geladen werden";
-    }
+    const res = await api("/api/cookbook/analyze", { method: "POST", body: JSON.stringify({ repo_id, ctx: 8192 }) });
+    const b = $("#cb-b-" + i), mt = $("#cb-m-" + i);
+    if (!b || !mt) return;
+    if (!res.files?.length) { b.className = "fit-badge bad"; b.textContent = "keine GGUFs"; mt.textContent = "—"; return; }
+    let best = res.files.find(f => f.quant?.includes("Q4_K_M")) || res.files[0];
+    b.className = "fit-badge " + fitCls(best.fit.level); b.textContent = best.fit.text;
+    mt.textContent = metricLine(best.fit) + " · " + (best.quant || "GGUF");
+  } catch {
+    const b = $("#cb-b-" + i); if (b) { b.className = "fit-badge bad"; b.textContent = "Fehler"; }
   }
 }
 
-// Global hook for inline onclick
-window.openModelModal = async (index) => {
-  const m = currentResults[index];
-  if (!m) return;
-  $("#cb-modal").style.display = "flex";
-  $("#cb-m-title").textContent = m.id.split('/').pop();
-  $("#cb-m-repo").textContent = m.id;
-  $("#cb-m-files").innerHTML = "";
-  $("#cb-m-alias").value = m.id.split('/').pop().toLowerCase().replace(/[^a-z0-9]/g, "-");
-  
-  $("#cb-m-files").style.display = "none";
-  $("#cb-m-loading").style.display = "block";
-  $("#cb-m-download").disabled = true;
+// ---- Modal ----
+function showFit() {
+  const file = $("#cb-m-files").value;
+  const f = currentAnalysis?.files.find(x => x.filename === file);
+  if (!f) { $("#cb-m-fit").style.display = "none"; return; }
+  $("#cb-m-fit").style.display = "flex";
+  $("#cb-m-fit-text").innerHTML = `Bedarf: <b>~${f.fit.req_gb.toFixed(1)} GB</b> · ${currentAnalysis.params_b}B · ${esc(f.quant)} · ~${Math.round(f.fit.tps)} Tok/s`;
+  $("#cb-m-fit-badge").innerHTML = `<span class="fit-badge ${fitCls(f.fit.level)}">${esc(f.fit.text)}</span>`;
+  const btn = $("#cb-m-download");
+  if (f.fit.level === "too_tight") { btn.className = "primary warn"; btn.textContent = "Trotzdem holen (zu groß)"; }
+  else { btn.className = "primary"; btn.textContent = "Herunterladen & Einpflegen"; }
+}
+function updateLiveFit() { showFit(); }
 
+async function reanalyzeCtx() {
+  if (!currentAnalysis) return;
+  const ctx = parseInt($("#cb-m-ctx").value) || 8192;
+  const file = $("#cb-m-files").value;
+  try {
+    currentAnalysis = await api("/api/cookbook/analyze", { method: "POST", body: JSON.stringify({ repo_id: currentAnalysis.repo, ctx }) });
+    $("#cb-m-files").value = file; showFit();
+  } catch {}
+}
+
+function openModalBase(title, repo) {
+  $("#cb-modal").style.display = "flex";
+  $("#cb-m-title").textContent = title;
+  $("#cb-m-repo").textContent = repo;
+}
+
+async function openResult(i) {
+  const m = currentResults[i]; if (!m) return;
+  openModalBase(m.id.split("/").pop(), m.id);
+  $("#cb-m-alias").value = m.id.split("/").pop().toLowerCase().replace(/[^a-z0-9]/g, "-");
+  $("#cb-m-files").style.display = "none"; $("#cb-m-loading").style.display = "block"; $("#cb-m-download").disabled = true;
   try {
     const ctx = parseInt($("#cb-m-ctx").value) || 8192;
-    const res = await api("/api/cookbook/analyze", {
-      method: "POST", body: JSON.stringify({ repo_id: m.id, ctx })
-    });
-    
-    currentAnalysis = res;
-    
-    $("#cb-m-loading").style.display = "none";
-    $("#cb-m-files").style.display = "block";
-    
-    if (!res.files || res.files.length === 0) {
-      $("#cb-m-files").innerHTML = "<option value=''>Keine GGUF-Dateien gefunden.</option>";
-      $("#cb-m-fit-container").style.display = "none";
-    } else {
-      // Optische Indikatoren im Dropdown
-      $("#cb-m-files").innerHTML = res.files.map(f => {
-        let mark = "";
-        if (f.fit.level === "perfect") mark = "🟢";
-        else if (f.fit.level === "marginal") mark = "🟡";
-        else mark = "🔴";
-        return `<option value="${esc(f.filename)}">${mark} ${esc(f.filename)}</option>`;
-      }).join("");
-      
-      $("#cb-m-download").disabled = false;
-      updateLiveFit();
-    }
-  } catch(e) {
-    $("#cb-m-loading").textContent = "Fehler: " + e.message;
-  }
-};
+    currentAnalysis = await api("/api/cookbook/analyze", { method: "POST", body: JSON.stringify({ repo_id: m.id, ctx }) });
+    $("#cb-m-loading").style.display = "none"; $("#cb-m-files").style.display = "block";
+    if (!currentAnalysis.files?.length) { $("#cb-m-files").innerHTML = "<option>Keine GGUF-Dateien gefunden</option>"; $("#cb-m-fit").style.display = "none"; return; }
+    $("#cb-m-files").innerHTML = currentAnalysis.files.map(f => {
+      const mark = f.fit.level === "perfect" ? "●" : f.fit.level === "marginal" ? "◐" : "○";
+      return `<option value="${esc(f.filename)}">${mark} ${esc(f.filename)}</option>`;
+    }).join("");
+    $("#cb-m-download").disabled = false; showFit();
+  } catch (e) { $("#cb-m-loading").textContent = "Fehler: " + e.message; }
+}
+
+async function openCurated(i) {
+  const m = CURATED[i]; if (!m) return;
+  openModalBase(m.name, m.repo);
+  $("#cb-m-files").style.display = "block"; $("#cb-m-loading").style.display = "none";
+  $("#cb-m-files").innerHTML = `<option value="${esc(m.file)}">${esc(m.file)}</option>`;
+  $("#cb-m-alias").value = m.alias; $("#cb-m-ctx").value = m.ctx; $("#cb-m-download").disabled = false;
+  try {
+    const fit = await api("/api/cookbook/evaluate", { method: "POST", body: JSON.stringify({ params_b: m.params_b, quant: m.quant, ctx: m.ctx }) });
+    currentAnalysis = { repo: m.repo, params_b: m.params_b, files: [{ filename: m.file, quant: m.quant, fit }] };
+    showFit();
+  } catch {}
+}
 
 async function doDownload() {
-  const repo = $("#cb-m-repo").textContent;
-  const file = $("#cb-m-files").value;
-  const alias = $("#cb-m-alias").value.trim();
-  const ctx = parseInt($("#cb-m-ctx").value) || 8192;
-  
+  const repo = $("#cb-m-repo").textContent, file = $("#cb-m-files").value;
+  const alias = $("#cb-m-alias").value.trim(), ctx = parseInt($("#cb-m-ctx").value) || 8192;
   if (!repo || !file || !alias) return toast("Bitte alle Felder ausfüllen.", true);
-
-  $("#cb-m-download").disabled = true;
-  $("#cb-m-download").textContent = "Starte...";
-
+  const btn = $("#cb-m-download"); btn.disabled = true; btn.textContent = "Starte…";
   try {
-    const res = await api("/api/download", {
-      method: "POST",
-      body: JSON.stringify({ repo, file })
-    });
-    
-    // Register directly, jobengine will download it, MC will pick it up when done
-    await api("/api/register", {
-      method: "POST",
-      body: JSON.stringify({ alias, model_path: res.expected_path, ctx })
-    });
-
-    toast("Download gestartet! Siehe Aktivitäten.");
+    const res = await api("/api/download", { method: "POST", body: JSON.stringify({ repo, file }) });
+    await api("/api/register", { method: "POST", body: JSON.stringify({ alias, model_path: res.expected_path, ctx }) });
+    toast("Download gestartet — siehe Aktivität.");
     $("#cb-modal").style.display = "none";
-    track(res.job_id); // open in jobs
-    // Switch to activity tab
-    document.querySelector(".nav-item[data-view='activity']").click();
-    
-  } catch (e) {
-    toast("Fehler: " + e.message, true);
-  }
-  
-  $("#cb-m-download").disabled = false;
-  $("#cb-m-download").textContent = "Herunterladen & Einpflegen";
+    document.querySelector(".nav-item[data-view='activity']")?.click();
+  } catch (e) { toast("Fehler: " + e.message, true); }
+  btn.disabled = false; btn.textContent = "Herunterladen & Einpflegen";
 }
 
-async function renderCurated() {
-  $("#cb-section-title").textContent = "Kuratierte Empfehlungen";
-  const grid = $("#cb-grid");
-  if (!grid) return;
-  
-  grid.innerHTML = "<div class='meta' style='grid-column:1/-1;text-align:center;padding:40px'>Berechne Hardware-Fit für Empfehlungen...</div>";
-  
-  try {
-    let html = "";
-    for (let i = 0; i < CURATED_MODELS.length; i++) {
-      const m = CURATED_MODELS[i];
-      const fit = await api("/api/cookbook/evaluate", {
-        method: "POST", body: JSON.stringify({ params_b: m.params_b, quant: m.quant, ctx: m.ctx })
-      });
-      
-      const cls = fit.level === "perfect" ? "b-run" : (fit.level === "marginal" ? "b-load" : "b-err");
-      
-      html += `
-        <div class="card" style="display:flex; flex-direction:column; cursor:pointer" onclick="window.openCuratedModal(${i})">
-          <div style="display:flex; justify-content:space-between; align-items:center;">
-            <h3 style="margin:0; font-size:16px">${esc(m.name)}</h3>
-            <span class="badge ${cls}">${fit.text}</span>
-          </div>
-          <div style="font-size:13px; color:var(--mut); margin-top:12px; flex:1; line-height:1.5;">
-            ${m.desc}
-          </div>
-          <div style="display:flex; justify-content:space-between; margin-top:16px; font-size:12px" class="meta">
-            <span>~${fit.req_gb.toFixed(1)} GB RAM/VRAM · ~${Math.round(fit.tps)} t/s</span>
-            <span>${m.quant}</span>
-          </div>
-        </div>
-      `;
-    }
-    grid.innerHTML = html;
-  } catch (e) {
-    grid.innerHTML = `<div class="alert err" style="grid-column:1/-1">Fehler beim Laden der Empfehlungen: ${e.message}</div>`;
-  }
-}
+function onSystem(sys) { lastSys = sys; renderHwChip(); }
 
-window.openCuratedModal = async (index) => {
-  const m = CURATED_MODELS[index];
-  if (!m) return;
-  $("#cb-modal").style.display = "flex";
-  $("#cb-m-title").textContent = m.name;
-  $("#cb-m-repo").textContent = m.repo;
-  $("#cb-m-files").innerHTML = `<option value="${esc(m.file)}">${esc(m.file)}</option>`;
-  $("#cb-m-files").style.display = "block";
-  $("#cb-m-loading").style.display = "none";
-  $("#cb-m-alias").value = m.alias;
-  $("#cb-m-ctx").value = m.ctx;
-  $("#cb-m-download").disabled = false;
-  
-  // Wir nutzen die neue API Struktur auch für das simulierte Modal
-  try {
-      const fit = await api("/api/cookbook/evaluate", {
-        method: "POST", body: JSON.stringify({ params_b: m.params_b, quant: m.quant, ctx: m.ctx })
-      });
-      currentAnalysis = {
-          repo: m.repo,
-          params_b: m.params_b,
-          files: [{ filename: m.file, quant: m.quant, fit: fit }]
-      };
-      updateLiveFit();
-  } catch(e) {}
-};
-
-function onSystem(sys) {
-  lastSys = sys;
-}
-
-function unmount() {}
-
-export default { id: "cookbook", mount, unmount, onSystem };
+export default { id: "cookbook", mount, onSystem };

static/js/panels/guides.js

@@ -1,102 +1,89 @@
+// guides.js — Integrations-Anleitungen (v3): Copy-Paste-Configs für externe Tools.
+
 import { $ } from "../core/ui.js";
 
-let currentUrl = "http://localhost:8000";
+// Basis-URL aus dem Browser ableiten (zeigt die echte Bosgame-Adresse statt localhost).
+function apiBase() {
+  const host = location.hostname || "localhost";
+  return `${location.protocol}//${host}:8080/v1`;
+}
 
 function render() {
-  const c = document.querySelector(".view[data-view='guides']");
+  const c = $(".view[data-view='guides']");
   if (!c) return;
-  
+  const url = apiBase();
   c.innerHTML = `
-    <div class="card-h"><h3>Guides & Integrationen</h3></div>
-    <div class="card" style="padding:0; overflow:hidden;">
-      
+    <div class="pagehead"><div>
+      <h1>Guides &amp; Integrationen</h1>
+      <div class="sub">Binde deine lokalen Modelle in andere Tools ein — fertige Configs zum Kopieren.</div></div></div>
+
+    <div class="card" style="padding:0;overflow:hidden">
       <details class="guide-acc">
-        <summary>Cline / Cursor (Juni 2026)</summary>
+        <summary>Cline / Cursor</summary>
         <div class="acc-body">
-          <p>Nutze deine lokalen Modelle kostenlos in der Cursor IDE und Cline.</p>
-          <label>Cursor: Settings -> Models -> Add Custom Model</label>
-          <input class="tokin mono-sm" readonly value="coder">
-          <label>Base URL (OpenAI API)</label>
-          <input class="tokin mono-sm" readonly value="${currentUrl}/v1">
-          <label>API Key</label>
-          <input class="tokin mono-sm" readonly value="MissionControl-Token-oder-leer">
-          <p style="margin-top:12px; font-size:12px; color:var(--mut);">
-            In Cline: Wähle "OpenAI Compatible" als Provider.
-          </p>
+          <p>Nutze deine lokalen Modelle kostenlos in Cursor oder Cline (Provider: „OpenAI Compatible").</p>
+          <label>Modell-ID</label>
+          <input class="mono-sm" readonly value="coder">
+          <label>Basis-URL (OpenAI-kompatibel)</label>
+          <input class="mono-sm" readonly value="${url}">
+          <label>API-Key</label>
+          <input class="mono-sm" readonly value="(dein Token oder leer lassen)">
         </div>
       </details>
 
       <details class="guide-acc">
-        <summary>OpenWebUI (Pipes & Connections)</summary>
+        <summary>OpenWebUI</summary>
         <div class="acc-body">
-          <p>Verbinde llama-swap nativ in OpenWebUI.</p>
-          <label>Settings -> Admin Settings -> Connections</label>
-          <input class="tokin mono-sm" readonly value="${currentUrl}/v1">
-          <label>API Key</label>
-          <input class="tokin mono-sm" readonly value="dummy-key">
-          <p style="margin-top:12px; font-size:12px; color:var(--mut);">
-            OpenWebUI erkennt nun vollautomatisch, wenn ein Modell ausgetauscht wird.
-          </p>
+          <p>Settings → Admin → Connections → neue OpenAI-Verbindung:</p>
+          <label>Basis-URL</label>
+          <input class="mono-sm" readonly value="${url}">
+          <label>API-Key</label>
+          <input class="mono-sm" readonly value="dummy-key">
+          <p class="hint" style="margin-top:10px">OpenWebUI erkennt automatisch, wenn ein Modell getauscht wird.</p>
         </div>
       </details>
 
       <details class="guide-acc">
-        <summary>Python / LangChain (OpenAI SDK)</summary>
+        <summary>Python / LangChain (openai-SDK)</summary>
         <div class="acc-body">
-          <p>Nutze das offizielle <code>openai</code> Package, um mit llama-swap zu sprechen.</p>
-          <pre style="background: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--line); overflow-x: auto; color: var(--tx); font-family: monospace; font-size: 13px;"><code>from openai import OpenAI
+          <p>Mit dem offiziellen <code>openai</code>-Paket:</p>
+          <div class="log" style="max-height:none"><code>from openai import OpenAI
 
 client = OpenAI(
-    base_url="${currentUrl}/v1",
-    api_key="Dein_Token" # Optional
+    base_url="${url}",
+    api_key="dein_token"  # optional
 )
 
-response = client.chat.completions.create(
-    model="coder", # Alias aus deinem Cookbook
+resp = client.chat.completions.create(
+    model="coder",  # Alias aus dem Cookbook
     messages=[{"role": "user", "content": "Hallo Modell!"}]
 )
-
-print(response.choices[0].message.content)</code></pre>
+print(resp.choices[0].message.content)</code></div>
         </div>
       </details>
 
       <details class="guide-acc">
-        <summary>n8n (AI Agent Nodes)</summary>
+        <summary>n8n (AI-Agent-Nodes)</summary>
         <div class="acc-body">
-          <p>Nutze den "OpenAI Chat Model" Node in n8n Advanced AI.</p>
-          <label>Credentials -> OpenAI API -> Custom URL</label>
-          <input class="tokin mono-sm" readonly value="${currentUrl}/v1">
-          <p style="margin-top:12px; font-size:12px; color:var(--mut);">
-            Einfach den Node verbinden, "coder" als Modell-ID (Expression) eintippen und loslegen.
-          </p>
+          <p>„OpenAI Chat Model"-Node → Credentials → Custom URL:</p>
+          <label>Basis-URL</label>
+          <input class="mono-sm" readonly value="${url}">
+          <p class="hint" style="margin-top:10px">Modell-ID „coder" eintragen und loslegen.</p>
         </div>
       </details>
-      
+
       <details class="guide-acc">
-        <summary>Begrifflichkeiten (Glossar)</summary>
+        <summary>Begriffe einfach erklärt (Glossar)</summary>
         <div class="acc-body">
-          <p><b>LLM-Engine (llama-swap):</b> Der Server im Hintergrund, der die Sprachmodelle (LLMs) lädt und OpenAI-kompatible Schnittstellen bereitstellt.</p>
-          <p><b>VRAM:</b> Der Grafikkarten-Speicher. KI-Modelle sind extrem groß und benötigen viel VRAM, um schnell zu laufen.</p>
-          <p><b>Quantisierung (z.B. Q4_K_M):</b> Ein Verfahren, das die Genauigkeit der Modellgewichte leicht reduziert (von 16-Bit auf 4-Bit), damit sie in den VRAM passen, ohne signifikant dümmer zu werden.</p>
-          <p><b>Context-Window:</b> Wie viel Text ("Tokens") sich das Modell gleichzeitig "merken" kann. Ein Buchstabe ist ~0.3 Tokens. Mehr Kontext braucht drastisch mehr VRAM.</p>
+          <p><b>LLM-Engine (llama-swap):</b> Der Dienst im Hintergrund, der die Sprachmodelle lädt und eine OpenAI-kompatible Schnittstelle bereitstellt.</p>
+          <p><b>VRAM / Grafikspeicher:</b> Der schnelle Speicher, in dem ein Modell laufen muss. Große Modelle brauchen viel davon.</p>
+          <p><b>Quantisierung (z.B. Q4_K_M):</b> Verkleinert ein Modell (16-Bit → 4-Bit), damit es in den Speicher passt — bei kaum Qualitätsverlust.</p>
+          <p><b>Kontext-Größe:</b> Wie viel Text sich das Modell gleichzeitig „merken" kann. Mehr Kontext = deutlich mehr Speicherbedarf.</p>
         </div>
       </details>
-
-    </div>
-  `;
+    </div>`;
 }
 
-function mount() {
-  render();
-}
+function mount() { render(); }
 
-function onStatus(s) {
-  if (s && s.swap_url) {
-    if (currentUrl !== s.swap_url) {
-      currentUrl = s.swap_url;
-      render(); // Neu rendern, wenn sich die URL ändert
-    }
-  }
-}
-
-export default { id: "guides", mount, onStatus };
+export default { id: "guides", mount };

static/js/panels/jobs.js

@@ -1,142 +1,102 @@
-// jobs.js (Aktivität) — System-Metriken & Hintergrund-Jobs
+// jobs.js — Aktivität (v3): Live-System-Metriken + Hintergrund-Jobs mit Log.
+// Exportiert track(id), damit andere Panels einen Job auto-aufklappen.
 
-import { $, esc, icon } from "../core/ui.js";
+import { $, esc, fmtBytes } from "../core/ui.js";
 
 const tracked = new Set();
 let JOBS = [];
 let SYS = null;
 
-export function track(id) {
-  tracked.add(id);
-  renderJobs();
-}
+export function track(id) { tracked.add(id); renderJobs(); }
 
-function statusBadge(state) {
-  if (state === "done")   return '<span class="badge b-run">fertig</span>';
-  if (state === "failed") return '<span class="badge b-err">fehler</span>';
-  return '<span class="badge b-load">lädt…</span>';
-}
-function dotClass(state) {
-  if (state === "done")   return "on";
-  if (state === "failed") return "";
-  return "load";
-}
-
-function kpi(cls, title, ic, value, sub) {
-  return `<div class="kpi ${cls}">
-    <div class="k-h"><span class="k-t">${title}</span><span class="k-ic">${icon(ic)}</span></div>
-    <div class="k-v">${value}</div>
-    <div class="k-s">${sub}</div>
-  </div>`;
-}
-
-function kvRow(k, v, cls = "") {
-  return `<div class="kv-row"><span class="kv-k">${k}</span><span class="kv-v ${cls}">${v}</span></div>`;
-}
-
-// Chart-Daten (letzte 30 Sekunden, je 0.5s Stream = 60 Punkte)
 const hist = { cpu: [], ram: [], gpu: [] };
 const MAX_HIST = 60;
 
+function statusBadge(s) { return s === "done" ? '<span class="badge b-run">fertig</span>' : s === "failed" ? '<span class="badge b-err">fehler</span>' : '<span class="badge b-load">läuft…</span>'; }
+function dotClass(s) { return s === "done" ? "on" : s === "failed" ? "" : "load"; }
+
+function tile(label, value, sub) {
+  return `<div class="tile"><div class="t-l">${label}</div><div class="t-v">${value}</div><div class="t-s">${sub}</div></div>`;
+}
+function meter(label, pct) {
+  const p = Math.max(0, Math.min(100, pct || 0));
+  const cls = p >= 90 ? "bad" : p >= 75 ? "warn" : "";
+  return `<div class="meter"><div class="meter-h"><span class="mk">${label}</span><span class="mv">${Math.round(p)} %</span></div><div class="bar ${cls}"><i style="width:${Math.max(2, p)}%"></i></div></div>`;
+}
+function spark(arr, varName) {
+  return '<div style="display:flex;align-items:flex-end;gap:2px;height:38px;margin-top:10px">' +
+    arr.map(v => `<div style="width:4px;background:var(${varName});opacity:.55;height:${Math.max(2, v)}%;border-radius:2px"></div>`).join("") + "</div>";
+}
+
+function gpuPct() {
+  const g = SYS?.gpu;
+  if (g && (g.vram.total + g.gtt.total) > 0) return ((g.vram.used + g.gtt.used) / (g.vram.total + g.gtt.total)) * 100;
+  return 0;
+}
+
 function renderSys() {
   if (!SYS) return;
-  const sysV = `${SYS.cpu.percent.toFixed(0)}<small>% CPU</small>`;
-  const sysS = `${SYS.ram.percent.toFixed(0)}% RAM, ${SYS.gpu_temp ? SYS.gpu_temp.toFixed(0)+'°C' : SYS.cpu.temp ? SYS.cpu.temp.toFixed(0)+'°C' : '–'}`;
+  hist.cpu.push(SYS.cpu.percent); hist.ram.push(SYS.ram.percent); hist.gpu.push(gpuPct());
+  for (const k of ["cpu", "ram", "gpu"]) if (hist[k].length > MAX_HIST) hist[k].shift();
 
-  // History aktualisieren
-  hist.cpu.push(SYS.cpu.percent);
-  hist.ram.push(SYS.ram.percent);
-  let gpuP = 0;
-  if (SYS.gpu && SYS.gpu.vram.total) {
-    gpuP = ((SYS.gpu.vram.used + SYS.gpu.gtt.used) / (SYS.gpu.vram.total + SYS.gpu.gtt.total)) * 100;
-  }
-  hist.gpu.push(gpuP);
-  if (hist.cpu.length > MAX_HIST) hist.cpu.shift();
-  if (hist.ram.length > MAX_HIST) hist.ram.shift();
-  if (hist.gpu.length > MAX_HIST) hist.gpu.shift();
+  const k = $("#act-kpis");
+  if (k) k.innerHTML =
+    tile("Prozessor (CPU)", `${Math.round(SYS.cpu.percent)}<small> %</small>`, SYS.cpu.temp != null ? `${Math.round(SYS.cpu.temp)}° CPU-Temp` : "Auslastung") +
+    tile("Arbeitsspeicher", `${Math.round(SYS.ram.percent)}<small> %</small>`, `${fmtBytes(SYS.ram.used)} / ${fmtBytes(SYS.ram.total)}`) +
+    tile("Grafikspeicher", `${Math.round(gpuPct())}<small> %</small>`, SYS.gpu_temp != null ? `${Math.round(SYS.gpu_temp)}° GPU-Temp` : "VRAM + GTT");
 
-  // Mini-Sparklines generieren
-  const makeBars = (arr, color) => {
-    return '<div style="display:flex; align-items:flex-end; gap:2px; height:40px; margin-top:12px;">' +
-      arr.map(v => `<div style="width:4px; background:var(--${color}); opacity:0.6; height:${Math.max(2, v)}%; border-radius:2px;"></div>`).join("") +
-    '</div>';
-  };
-
-  $("#act-kpis").innerHTML =
-    kpi("blue", "CPU Last", "gauge", sysV, sysS) +
-    kpi("purple", "RAM", "monitor", `${SYS.ram.percent.toFixed(0)}<small>%</small>`, "Arbeitsspeicher") +
-    kpi("green", "GPU VRAM", "layers", `${gpuP.toFixed(0)}<small>%</small>`, "Grafikspeicher");
-
-  const gb = b => (b / 1024 / 1024 / 1024).toFixed(1);
-  const ramStr = `${gb(SYS.ram.used)} GB / ${gb(SYS.ram.total)} GB`;
-  const gpuStr = (SYS.gpu && SYS.gpu.vram.total) ? `${gb(SYS.gpu.vram.used + SYS.gpu.gtt.used)} GB / ${gb(SYS.gpu.vram.total + SYS.gpu.gtt.total)} GB` : "–";
-  const diskStr = `${SYS.disk.percent.toFixed(0)}% belegt`;
-
-  $("#act-sys").innerHTML = `
+  const g = SYS.gpu;
+  const gpuStr = g && (g.vram.total + g.gtt.total) > 0 ? `${fmtBytes(g.vram.used + g.gtt.used)} / ${fmtBytes(g.vram.total + g.gtt.total)}` : "–";
+  const s = $("#act-sys");
+  if (s) s.innerHTML = `
     <div class="card-h"><h3>System-Metriken (Bosgame)</h3></div>
-    <div class="kv" style="margin-bottom: 24px;">
-      ${kvRow("Arbeitsspeicher (RAM)", ramStr)}
-      ${kvRow("Grafikspeicher (VRAM+GTT)", gpuStr)}
-      ${kvRow("Speicherplatz (Disk)", diskStr)}
-      ${kvRow("Temperatur (GPU / CPU)", `${SYS.gpu_temp?.toFixed(1) || '–'}°C / ${SYS.cpu.temp?.toFixed(1) || '–'}°C`)}
+    <div class="card-sub">Live-Auslastung deines Mini-PCs, alle 0,5 Sekunden.</div>
+    <div class="kv" style="margin-bottom:6px">
+      <div class="kv-row"><span class="kv-k">Arbeitsspeicher (RAM)</span><span class="kv-v">${fmtBytes(SYS.ram.used)} / ${fmtBytes(SYS.ram.total)}</span></div>
+      <div class="kv-row"><span class="kv-k">Grafikspeicher (VRAM + GTT)</span><span class="kv-v">${gpuStr}</span></div>
+      <div class="kv-row"><span class="kv-k">Speicherplatz (Disk)</span><span class="kv-v">${Math.round(SYS.disk.percent)} % belegt</span></div>
+      <div class="kv-row"><span class="kv-k">Temperatur (GPU / CPU)</span><span class="kv-v">${SYS.gpu_temp != null ? Math.round(SYS.gpu_temp) + "°" : "–"} / ${SYS.cpu.temp != null ? Math.round(SYS.cpu.temp) + "°" : "–"}</span></div>
     </div>
-    
-    <div class="grid grid-3">
-      <div><div class="meta">CPU Historie</div>${makeBars(hist.cpu, "act")}</div>
-      <div><div class="meta">RAM Historie</div>${makeBars(hist.ram, "purple")}</div>
-      <div><div class="meta">VRAM Historie</div>${makeBars(hist.gpu, "on")}</div>
-    </div>
-  `;
+    <div class="grid grid-3" style="margin-top:14px">
+      <div><div class="meta text-xs">CPU-Verlauf</div>${spark(hist.cpu, "--accent")}</div>
+      <div><div class="meta text-xs">RAM-Verlauf</div>${spark(hist.ram, "--purple")}</div>
+      <div><div class="meta text-xs">VRAM-Verlauf</div>${spark(hist.gpu, "--on")}</div>
+    </div>`;
 }
 
 function mount() {
-  $("#v-activity").innerHTML = `
-    <div class="card-h"><h3>Hintergrund-Aktivitäten</h3><span class="meta" id="job-count"></span></div>
-    <div id="jobs"></div>
-    <div id="jobs-empty" class="empty-c">
-      <div class="e-t">Keine laufenden Jobs.</div>
-      <div class="e-s">Downloads, Updates &amp; Co. erscheinen hier mit Live-Log.</div>
-    </div>`;
+  $("#act-head").innerHTML = `<div class="pagehead"><div>
+    <h1>Aktivität</h1>
+    <div class="sub">Live-Auslastung und laufende Aufgaben (Downloads, Updates) mit Protokoll.</div></div></div>`;
+
+  $("#v-activity").innerHTML = `
+    <div class="card-h"><h3>Hintergrund-Aufgaben</h3><span class="meta" id="job-count"></span></div>
+    <div class="card-sub">Downloads &amp; Updates erscheinen hier mit Live-Protokoll — zum Aufklappen klicken.</div>
+    <div id="jobs"></div>
+    <div id="jobs-empty" class="empty-c"><div class="e-t">Gerade nichts los.</div><div class="e-s">Alles ruhig — keine laufenden Aufgaben.</div></div>`;
 
-  // Klicks auf Job-Kopf -> auf/zuklappen
   $("#v-activity").addEventListener("click", e => {
-    const h = e.target.closest(".job-h");
-    if (!h) return;
+    const h = e.target.closest(".job-h"); if (!h) return;
     const id = h.getAttribute("data-id");
     tracked.has(id) ? tracked.delete(id) : tracked.add(id);
     renderJobs();
   });
-  
   if (SYS) renderSys();
 }
 
 function renderJobs() {
-  const c = $("#jobs");
-  if (!c) return;
+  const c = $("#jobs"); if (!c) return;
   $("#jobs-empty").style.display = JOBS.length ? "none" : "flex";
   const failed = JOBS.filter(j => j.state === "failed").length;
   $("#job-count").textContent = JOBS.length ? (failed ? failed + " Fehler" : JOBS.length + " gesamt") : "";
-
   c.innerHTML = JOBS.map(j => {
-    const open = tracked.has(j.id);
-    const log = open ? `<div class="log">${esc((j.log || []).join("\\n"))}</div>` : "";
-    return `<div class="job">
-      <div class="job-h" data-id="${esc(j.id)}">
-        <span class="li-dot ${dotClass(j.state)}"></span>
-        <span class="mid">${esc(j.label)}</span>${statusBadge(j.state)}
-      </div>${log}</div>`;
+    const log = tracked.has(j.id) ? `<div class="log">${esc((j.log || []).join("\n"))}</div>` : "";
+    return `<div class="job"><div class="job-h" data-id="${esc(j.id)}">
+      <span class="li-dot ${dotClass(j.state)}"></span><span class="mid">${esc(j.label)}</span>${statusBadge(j.state)}</div>${log}</div>`;
   }).join("");
 }
 
-function onJobs(jobs) {
-  JOBS = jobs || [];
-  renderJobs();
-}
-
-function onSystem(sys) {
-  SYS = sys;
-  const c = $("#act-sys");
-  if (c) renderSys();
-}
+function onJobs(jobs) { JOBS = jobs || []; renderJobs(); }
+function onSystem(sys) { SYS = sys; if ($("#act-sys")) renderSys(); }
 
 export default { id: "jobs", mount, onJobs, onSystem };

static/js/panels/models.js

@@ -1,145 +1,116 @@
-// models.js — "Modelle"-Ansicht: Schnelltest-Chat, Modell-Tabelle & Konfiguration.
+// models.js — "Modelle"-Ansicht (v3): Schnelltest-Chat, Modell-Tabelle, Kontext-Konfiguration.
 
 import { api } from "../core/api.js";
-import { $, badge, esc, toast, icon } from "../core/ui.js";
-
-let ALL_MODELS = [];
+import { $, badge, esc, toast, confirmModal } from "../core/ui.js";
 
+let ALL = [];
 function refreshSoon() { document.dispatchEvent(new Event("mc:refresh")); }
 
+function capTags(caps) {
+  if (!caps?.length) return "–";
+  return caps.map(c =>
+    c === "Code" ? `<span class="tag code">Code</span>`
+      : c === "Bild" ? `<span class="tag img">Bild</span>`
+        : `<span class="tag text">Text</span>`).join(" ");
+}
+function details(meta) {
+  if (!meta) return "–";
+  const q = meta.quant || "?";
+  const c = meta.ctx ? Math.round(meta.ctx / 1024) + "K" : "?";
+  const s = meta.size_bytes ? (meta.size_bytes / 1024 ** 3).toFixed(1) + " GB" : "?";
+  return `<span class="mono-sm">${esc(q)} · ${c} · ${s}</span>`;
+}
+
 function mount() {
+  $("#m-head").innerHTML = `<div class="pagehead"><div>
+    <h1>Modelle</h1>
+    <div class="sub">Deine konfigurierten Modelle — testen, Kontext anpassen oder aus dem Speicher werfen.</div></div></div>`;
 
   $("#m-chat").innerHTML = `
     <div class="card-h"><h3>Schnelltest</h3></div>
+    <div class="card-sub">Schreib eine Nachricht — das gewählte Modell wird automatisch geweckt.</div>
     <label>Modell</label>
     <select id="chat-model"></select>
     <label>Nachricht</label>
-    <textarea id="chat-msg" placeholder="Schreib was, um ein Modell zu wecken…"></textarea>
-    <button class="primary" id="chat-btn" title="Sendet eine Chat-Anfrage an das Modell (weckt es auf, falls es schläft)">Senden</button>
+    <textarea id="chat-msg" placeholder="z.B. „Erklär mir kurz, was du kannst."></textarea>
+    <button class="primary" id="chat-btn">Senden</button>
     <div id="chat-reply" class="reply" style="display:none"></div>`;
 
   $("#m-table").innerHTML = `
     <div class="card-h"><h3>Modelle &amp; Ports</h3><span class="meta" id="m-count"></span></div>
-    <div class="hint mb-4">
-      💡 <b>Modelle werden automatisch geladen</b>, sobald eine Chat-Anfrage an sie gestellt wird. Du musst sie nicht manuell starten.
-    </div>
+    <div class="card-sub">Modelle laden automatisch, sobald eine Anfrage kommt — du musst nichts manuell starten.</div>
     <table>
-      <thead><tr><th>Modell</th><th>Fähigkeiten</th><th>Details</th><th>Status</th><th>Port</th><th style="text-align:right">Aktionen</th></tr></thead>
+      <thead><tr><th>Modell</th><th>Kann</th><th>Details</th><th>Status</th><th>Port</th><th style="text-align:right">Aktionen</th></tr></thead>
       <tbody id="models"></tbody>
     </table>
-    <div id="models-empty" class="empty" style="display:none">Noch keine Modelle konfiguriert — zieh dir oben eins rein. 👇</div>
-    
-    <!-- Config Modal -->
-    <div id="cfg-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:100; align-items:center; justify-content:center;">
-      <div class="card" style="width:100%; max-width:400px; position:relative">
-        <button id="cfg-close" class="ghost" style="position:absolute; top:12px; right:12px;">Schließen</button>
-        <h2 style="margin-top:0">Modell konfigurieren</h2>
-        <p class="meta" id="cfg-model-name"></p>
-        
-        <div class="mt-6">
-          <label>Context-Size (Tokens)</label>
-          <input id="cfg-ctx" type="number" class="tokin" value="8192">
-          <div class="meta text-xs mt-2">Höhere Werte erlauben längere Dokumente, brauchen aber mehr VRAM.</div>
-        </div>
-
-        <button class="primary mt-6" id="cfg-save" style="width:100%; padding:var(--sp-3)">Speichern</button>
-      </div>
+    <div id="models-empty" class="empty-c" style="display:none">
+      <div class="e-t">Noch keine Modelle konfiguriert</div>
+      <div class="e-s">Hol dir unter „Cookbook" ein passendes Modell.</div>
     </div>
-  `;
+
+    <div id="cfg-modal" class="modal-overlay" style="display:none">
+      <div class="modal-card">
+        <button id="cfg-close" class="ghost" style="position:absolute;top:14px;right:14px">Schließen</button>
+        <h3>Modell konfigurieren</h3>
+        <p class="mono-sm" id="cfg-model-name" style="margin:-4px 0 16px"></p>
+        <label>Kontext-Größe (Tokens)</label>
+        <input id="cfg-ctx" type="number" value="8192">
+        <div class="hint">Höhere Werte erlauben längere Texte, brauchen aber mehr Grafikspeicher.</div>
+        <button class="primary" id="cfg-save" style="width:100%;margin-top:6px">Speichern</button>
+      </div>
+    </div>`;
 
   $("#chat-btn").addEventListener("click", sendChat);
   $("#cfg-close").addEventListener("click", () => $("#cfg-modal").style.display = "none");
+  $("#cfg-modal").addEventListener("click", e => { if (e.target.id === "cfg-modal") $("#cfg-modal").style.display = "none"; });
   $("#cfg-save").addEventListener("click", saveConfig);
 }
 
 function onStatus(s) {
-  ALL_MODELS = s?.models || [];
-  const tb = $("#models");
-  if (!tb) return;
-  tb.innerHTML = "";
-  $("#models-empty").style.display = ALL_MODELS.length ? "none" : "block";
-  $("#m-count").textContent = ALL_MODELS.length ? ALL_MODELS.length + " konfiguriert" : "";
+  ALL = s?.models || [];
+  const tb = $("#models"); if (!tb) return;
+  $("#models-empty").style.display = ALL.length ? "none" : "flex";
+  $("#m-count").textContent = ALL.length ? ALL.length + " konfiguriert" : "";
 
-  const sel = $("#chat-model");
-  const cur = sel.value;
-  sel.innerHTML = "";
-  for (const m of ALL_MODELS) {
-    const tr = document.createElement("tr");
-    
-    let capsHtml = "–";
-    if (m.meta && m.meta.caps) {
-      capsHtml = m.meta.caps.map(c => {
-         if (c === "Text") return `<span class="meta" title="Text" style="display:inline-block;width:18px">${icon("compass")}</span>`;
-         if (c === "Code") return `<strong style="color:var(--blue);display:inline-block;width:18px" title="Code">{ }</strong>`;
-         if (c === "Bild") return `<strong style="color:var(--purple);display:inline-block;width:18px" title="Vision">👁</strong>`;
-         return "";
-      }).join(" ");
-    }
-    
-    let detailsHtml = "–";
-    if (m.meta) {
-      const q = m.meta.quant || "?";
-      const c = m.meta.ctx ? (m.meta.ctx / 1024).toFixed(0) + "K" : "?";
-      const s = m.meta.size_bytes ? (m.meta.size_bytes / 1024 / 1024 / 1024).toFixed(1) + " GB" : "?";
-      detailsHtml = `<span class="meta" style="font-size:0.9em">${q} · ${c} · ${s}</span>`;
-    }
-
-    const perfHtml = m.state === "running" ? `<br><small class="meta" style="font-size:0.75em">n/a t/s</small>` : "";
-
-    const filenameHtml = m.meta?.filename ? `<br><small class="meta" style="font-size:0.8em">${esc(m.meta.filename)}</small>` : "";
-
-    tr.innerHTML = `<td class="mid" style="font-weight:500">${esc(m.name)}${filenameHtml}</td>
-      <td>${capsHtml}</td>
-      <td>${detailsHtml}</td>
-      <td>${badge(m.state)}${perfHtml}</td>
+  const sel = $("#chat-model"), cur = sel.value; sel.innerHTML = "";
+  tb.innerHTML = ALL.map(m => {
+    const fn = m.meta?.filename ? `<div class="li-sub mono-sm">${esc(m.meta.filename)}</div>` : "";
+    return `<tr>
+      <td class="mid" style="font-weight:500">${esc(m.name)}${fn}</td>
+      <td>${capTags(m.meta?.caps)}</td>
+      <td>${details(m.meta)}</td>
+      <td>${badge(m.state)}</td>
       <td class="port">${m.port ?? "auto"}</td>
-      <td style="text-align:right">
-        <button class="ghost" data-cfg="${esc(m.name)}" title="Context-Size anpassen">Konfigurieren</button>
-        <button class="ghost" data-unload="${esc(m.name)}" title="Beendet das Modell sofort und gibt den VRAM wieder frei">Aus VRAM entfernen</button>
-      </td>`;
-    tb.appendChild(tr);
-    sel.insertAdjacentHTML("beforeend", `<option>${esc(m.name)}</option>`);
-  }
+      <td style="text-align:right;white-space:nowrap">
+        <button class="ghost" data-cfg="${esc(m.name)}">Konfigurieren</button>
+        <button class="ghost" data-unload="${esc(m.name)}">Entladen</button>
+      </td></tr>`;
+  }).join("");
+  for (const m of ALL) sel.insertAdjacentHTML("beforeend", `<option>${esc(m.name)}</option>`);
   if (cur) sel.value = cur;
-  
-  tb.querySelectorAll("[data-unload]").forEach(b =>
-    b.addEventListener("click", () => unloadOne(b.getAttribute("data-unload")))
-  );
-  tb.querySelectorAll("[data-cfg]").forEach(b =>
-    b.addEventListener("click", () => openConfig(b.getAttribute("data-cfg")))
-  );
+
+  tb.querySelectorAll("[data-unload]").forEach(b => b.addEventListener("click", () => unloadOne(b.getAttribute("data-unload"))));
+  tb.querySelectorAll("[data-cfg]").forEach(b => b.addEventListener("click", () => openConfig(b.getAttribute("data-cfg"))));
 }
 
 function openConfig(alias) {
-  const m = ALL_MODELS.find(x => x.name === alias);
-  if (!m) return;
+  const m = ALL.find(x => x.name === alias); if (!m) return;
   $("#cfg-model-name").textContent = m.name;
   $("#cfg-ctx").value = m.meta?.ctx || 8192;
   $("#cfg-modal").style.display = "flex";
 }
-
 async function saveConfig() {
-  const alias = $("#cfg-model-name").textContent;
-  const ctx = parseInt($("#cfg-ctx").value) || 8192;
-  
+  const alias = $("#cfg-model-name").textContent, ctx = parseInt($("#cfg-ctx").value) || 8192;
   $("#cfg-save").disabled = true;
-  try {
-    await api("/api/update_model", { method: "POST", body: JSON.stringify({ alias, ctx }) });
-    toast("Gespeichert! Änderungen werden beim nächsten Modell-Start aktiv.");
-    $("#cfg-modal").style.display = "none";
-    refreshSoon();
-  } catch (e) {
-    toast(e.message, true);
-  }
+  try { await api("/api/update_model", { method: "POST", body: JSON.stringify({ alias, ctx }) }); toast("Gespeichert — aktiv beim nächsten Modell-Start."); $("#cfg-modal").style.display = "none"; refreshSoon(); }
+  catch (e) { toast(e.message, true); }
   $("#cfg-save").disabled = false;
 }
 
 async function unloadOne(m) {
-  try {
-    await api("/api/unload?model=" + encodeURIComponent(m), { method: "POST" });
-    toast("Entladen: " + m);
-    setTimeout(refreshSoon, 600);
-  } catch (e) { toast(e.message, true); }
+  if (!await confirmModal({ title: `„${m}" entladen?`, body: "Das Modell wird aus dem Grafikspeicher geworfen und lädt beim nächsten Aufruf automatisch neu.", confirmLabel: "Entladen" })) return;
+  try { await api("/api/unload?model=" + encodeURIComponent(m), { method: "POST" }); toast("Entladen: " + m); setTimeout(refreshSoon, 600); }
+  catch (e) { toast(e.message, true); }
 }
 
 async function sendChat() {
@@ -147,14 +118,10 @@ async function sendChat() {
   if (!model) return toast("Kein Modell vorhanden.", true);
   if (!message) return;
   const btn = $("#chat-btn"); btn.disabled = true; btn.textContent = "…";
-  const box = $("#chat-reply"); box.style.display = "block";
-  box.textContent = "(wecke Modell, kann beim Swap kurz dauern…)";
-  try {
-    const r = await api("/api/chat", { method: "POST", body: JSON.stringify({ model, message }) });
-    box.textContent = r.reply;
-  } catch (e) { box.textContent = "Fehler: " + e.message; }
-  btn.disabled = false; btn.textContent = "Senden";
-  refreshSoon();
+  const box = $("#chat-reply"); box.style.display = "block"; box.textContent = "(wecke Modell, kann beim Laden kurz dauern…)";
+  try { const r = await api("/api/chat", { method: "POST", body: JSON.stringify({ model, message }) }); box.textContent = r.reply; }
+  catch (e) { box.textContent = "Fehler: " + e.message; }
+  btn.disabled = false; btn.textContent = "Senden"; refreshSoon();
 }
 
 export default { id: "models", mount, onStatus };

static/js/panels/server.js

@@ -1,120 +1,105 @@
+// server.js — Server & Wartung (v3): Dienste, OS-Updates, Reboot, Live-Konsole.
+// Heikle Aktionen mit Klartext-Bestätigung (confirmModal/promptModal).
+
 import { api, getToken } from "../core/api.js";
-import { $, toast } from "../core/ui.js";
+import { $, toast, icon, confirmModal, promptModal } from "../core/ui.js";
 import { track } from "./jobs.js";
 
 function refreshSoon() { document.dispatchEvent(new Event("mc:refresh")); }
 
 function mount() {
-  $("#wartung").innerHTML = `
-    <div class="card-h"><h3>Dienste & Applikation</h3></div>
-    <div class="btn-row">
-      <button id="w-restart-swap" title="Startet die LLM-Engine neu. Dauer ca. 5 Sekunden.">llama-swap neustarten</button>
-      <button id="w-restart-mc" title="Startet Mission Control (das Dashboard) neu.">Mission Control neustarten</button>
-      <button id="w-update" title="Zieht den neuesten Code via Git und aktualisiert das Dashboard.">Mission Control System-Update</button>
-      <button id="w-unload" class="ghost" title="Wirft alle derzeit in VRAM geladenen Modelle sofort raus.">Aus dem VRAM entfernen</button>
-    </div>
-    <div class="hint" style="margin-top:12px; margin-bottom:32px">
-      Dienste starten via passwortlosem Sudo neu.
+  $("#wartung").outerHTML = `<div id="wartung" style="display:flex;flex-direction:column;gap:var(--sp-4)">
+    <div class="pagehead"><div>
+      <h1>Server &amp; Wartung</h1>
+      <div class="sub">Dienste steuern, Updates einspielen und live mitlesen — ohne SSH/Terminal.</div>
+    </div></div>
+
+    <div class="card">
+      <div class="card-h"><h3>Dienste &amp; Applikation</h3></div>
+      <div class="card-sub">Neustarts sind harmlos und passwortlos — nichts geht dabei verloren.</div>
+      <div class="btn-row">
+        <button id="w-restart-swap">LLM-Engine neustarten</button>
+        <button id="w-restart-mc">Dashboard neustarten</button>
+        <button id="w-update">Nach Updates suchen</button>
+        <button id="w-unload" class="ghost">Grafikspeicher leeren</button>
+      </div>
     </div>
 
-    <div class="card-h"><h3>Betriebssystem (Bosgame)</h3></div>
-    <div class="btn-row">
-      <button id="w-os-update" title="Führt apt update & upgrade aus, um das Betriebssystem (Bosgame) zu aktualisieren.">OS-Updates installieren (apt update)</button>
-      <button id="w-reboot" class="danger" title="Startet den gesamten Server physikalisch neu. Alles ist kurz offline.">Server Reboot</button>
+    <div class="card">
+      <div class="card-h"><h3>Betriebssystem (Bosgame)</h3></div>
+      <div class="card-sub">Tiefe Eingriffe — das Dashboard fragt einmalig nach deinem sudo-Passwort.</div>
+      <div class="btn-row">
+        <button id="w-os-update">OS-Updates installieren</button>
+        <button id="w-reboot" class="danger">Server neustarten (Reboot)</button>
+      </div>
     </div>
-    <div class="hint" style="margin-top:12px; margin-bottom:32px">
-      Für tiefe Eingriffe fragt das Dashboard einmalig das sudo-Passwort ab.
-    </div>
-    
-    <div class="card-h">
-      <h3>Live-Konsole</h3>
-      <select id="w-console-sel" style="margin-left:auto; width:200px">
-        <option value="llama-swap">llama-swap</option>
-        <option value="mission-control">mission-control</option>
-      </select>
-    </div>
-    <div id="w-console" style="background:#111; color:#0f0; font-family:monospace; font-size:12px; padding:12px; border-radius:8px; height:400px; overflow-y:auto; white-space:pre-wrap;">
-      Verbinde...
-    </div>`;
 
-  $("#w-restart-swap").addEventListener("click", () => restartService("llama-swap"));
-  $("#w-restart-mc").addEventListener("click", () => restartService("mission-control"));
+    <div class="card">
+      <div class="card-h"><h3>Live-Konsole</h3>
+        <select id="w-console-sel" style="margin:0 0 0 auto;width:220px">
+          <option value="llama-swap">LLM-Engine (llama-swap)</option>
+          <option value="mission-control">Dashboard (mission-control)</option>
+        </select>
+      </div>
+      <div class="card-sub">Was der Dienst gerade tut — live mitlesen.</div>
+      <div id="w-console" class="console">Verbinde…</div>
+    </div>
+  </div>`;
+
+  $("#w-restart-swap").addEventListener("click", () => restartService("llama-swap",
+    "LLM-Engine neustarten?", "Die Engine startet neu. Geladene Modelle werden kurz entladen (~5 Sekunden), laden danach automatisch wieder."));
+  $("#w-restart-mc").addEventListener("click", () => restartService("mission-control",
+    "Dashboard neustarten?", "Diese Oberfläche trennt sich kurz und verbindet automatisch wieder. Laufende Downloads laufen weiter."));
   $("#w-update").addEventListener("click", update);
   $("#w-unload").addEventListener("click", unloadAll);
-  
   $("#w-os-update").addEventListener("click", osUpdate);
   $("#w-reboot").addEventListener("click", rebootServer);
-  
-  $("#w-console-sel").addEventListener("change", () => connectConsole());
+  $("#w-console-sel").addEventListener("change", connectConsole);
   connectConsole();
 }
 
 let ws = null;
-
 function connectConsole() {
-  if (ws) {
-    ws.close();
-    ws = null;
-  }
-  const svc = $("#w-console-sel").value;
-  const out = $("#w-console");
-  out.innerHTML = "Verbinde mit " + svc + "...\n";
-  
+  if (ws) { ws.close(); ws = null; }
+  const svc = $("#w-console-sel").value, out = $("#w-console");
+  out.textContent = "Verbinde mit " + svc + "…\n";
   const proto = location.protocol === "https:" ? "wss:" : "ws:";
-  const url = `${proto}//${location.host}/api/logs/${svc}?token=${getToken()}`;
-  ws = new WebSocket(url);
-  
-  ws.onmessage = (e) => {
-    out.innerHTML += e.data;
-    out.scrollTop = out.scrollHeight;
-  };
-  ws.onclose = () => {
-    out.innerHTML += "\n--- Verbindung getrennt ---";
-  };
+  ws = new WebSocket(`${proto}//${location.host}/api/logs/${svc}?token=${encodeURIComponent(getToken())}`);
+  ws.onmessage = e => { out.textContent += e.data; out.scrollTop = out.scrollHeight; };
+  ws.onclose = () => { out.textContent += "\n— Verbindung getrennt —"; };
 }
 
-async function restartService(name) {
-  try {
-    await api("/api/service/" + name + "/restart", { method: "POST" });
-    toast("Neustart ausgelöst: " + name);
-    setTimeout(refreshSoon, 2000);
-  } catch (e) { toast(e.message, true); }
-}
-
-async function osUpdate() {
-  const pwd = window.prompt("Bitte sudo Passwort eingeben (für apt-get update & upgrade):");
-  if (!pwd) return;
-  try {
-    const r = await api("/api/os-update", { method: "POST", body: JSON.stringify({ password: pwd }) });
-    toast("OS-Update gestartet.");
-    track(r.job_id);
-  } catch (e) { toast(e.message, true); }
-}
-
-async function rebootServer() {
-  if (!window.confirm("ACHTUNG: Server wird komplett neu gestartet. Fortfahren?")) return;
-  const pwd = window.prompt("Bitte sudo Passwort eingeben (für reboot):");
-  if (!pwd) return;
-  try {
-    await api("/api/reboot", { method: "POST", body: JSON.stringify({ password: pwd }) });
-    toast("Reboot ausgelöst. UI ist gleich offline.");
-  } catch (e) { toast(e.message, true); }
-}
-
-async function update() {
-  try {
-    const r = await api("/api/update", { method: "POST" });
-    toast("Update läuft.");
-    track(r.job_id);
-  } catch (e) { toast(e.message, true); }
+async function restartService(name, title, body) {
+  if (!await confirmModal({ title, body, confirmLabel: "Neustarten" })) return;
+  try { await api(`/api/service/${name}/restart`, { method: "POST" }); toast("Neustart ausgelöst: " + name); setTimeout(refreshSoon, 2000); }
+  catch (e) { toast(e.message, true); }
 }
 
 async function unloadAll() {
-  try {
-    await api("/api/unload", { method: "POST" });
-    toast("Alle Modelle entladen.");
-    setTimeout(refreshSoon, 600);
-  } catch (e) { toast(e.message, true); }
+  if (!await confirmModal({ title: "Grafikspeicher leeren?", body: "Alle geladenen Modelle werden entladen. Sie laden beim nächsten Aufruf automatisch neu — es geht nichts verloren.", confirmLabel: "Leeren" })) return;
+  try { await api("/api/unload", { method: "POST" }); toast("Grafikspeicher geleert."); setTimeout(refreshSoon, 600); }
+  catch (e) { toast(e.message, true); }
+}
+
+async function update() {
+  try { const r = await api("/api/update", { method: "POST" }); toast("Update läuft — siehe Aktivität."); track(r.job_id); }
+  catch (e) { toast(e.message, true); }
+}
+
+async function osUpdate() {
+  if (!await confirmModal({ title: "OS-Updates installieren?", body: "Führt <code>apt update &amp; upgrade</code> aus. Das kann ein paar Minuten dauern; der Fortschritt erscheint in der Aktivität." })) return;
+  const pwd = await promptModal({ title: "sudo-Passwort", body: "Für die System-Updates wird einmalig dein sudo-Passwort gebraucht.", placeholder: "sudo-Passwort", password: true, confirmLabel: "Installieren" });
+  if (!pwd) return;
+  try { const r = await api("/api/os-update", { method: "POST", body: JSON.stringify({ password: pwd }) }); toast("OS-Update gestartet."); track(r.job_id); }
+  catch (e) { toast(e.message, true); }
+}
+
+async function rebootServer() {
+  if (!await confirmModal({ title: "Server wirklich neu starten?", body: "Der ganze Bosgame startet physisch neu. Alles ist für ~1 Minute offline — auch dieses Dashboard.", confirmLabel: "Reboot", danger: true })) return;
+  const pwd = await promptModal({ title: "sudo-Passwort", body: "Für den Reboot wird einmalig dein sudo-Passwort gebraucht.", placeholder: "sudo-Passwort", password: true, confirmLabel: "Jetzt neustarten", danger: true });
+  if (!pwd) return;
+  try { await api("/api/reboot", { method: "POST", body: JSON.stringify({ password: pwd }) }); toast("Reboot ausgelöst — bis gleich."); }
+  catch (e) { toast(e.message, true); }
 }
 
 export default { id: "server", mount };