refactor: massive UX and beginner refactoring (Cookbook, Dashboard, Layout, Wording)

static/js/core/ui.js

@@ -54,6 +54,9 @@ export const ICON = {
   layers:   _svg('<path d="m12 2 9 5-9 5-9-5z"/><path d="m3 12 9 5 9-5M3 17l9 5 9-5"/>'),
   alert:    _svg('<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/>'),
   gauge:    _svg('<path d="M12 14 16 9"/><circle cx="12" cy="13" r="9"/><path d="M12 4v2M21 13h-2M5 13H3"/>'),
+  search:   _svg('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
+  code:     _svg('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>'),
+  eye:      _svg('<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>'),
 };
 
 export function icon(name) { return ICON[name] || ""; }

static/js/main.js

@@ -25,14 +25,19 @@ function applyStatus(s) {
     dot.className = "dot off";
     label.textContent = "Backend nicht erreichbar";
     $("#top-models").textContent = "–";
-    showAlert("Backend nicht erreichbar — läuft uvicorn?", false);
+    $("#top-active").textContent = "–";
+    showAlert("Backend nicht erreichbar – läuft uvicorn?", false);
   } else {
     const host = s.swap_url.replace(/^https?:\/\//, "");
     dot.className = "dot " + (s.swap_ok ? "on" : "off");
-    label.textContent = (s.swap_ok ? "llama-swap online · " : "llama-swap offline · ") + host;
+    label.textContent = (s.swap_ok ? "LLM-Engine: Online – " : "LLM-Engine: Offline – ") + host;
     $("#top-models").textContent = (s.models || []).length;
+    
+    const active = (s.models || []).find(m => m.state === "running");
+    $("#top-active").textContent = active ? active.name : "–";
+    
     if (s.swap_ok) hideAlert();
-    else showAlert(`llama-swap nicht erreichbar unter <b>${host}</b> — läuft der Dienst?`, true);
+    else showAlert(`LLM-Engine nicht erreichbar unter <b>${host}</b> – läuft der llama-swap Dienst?`, true);
   }
   for (const p of panels) p.onStatus?.(s);
 }

static/js/panels/cookbook.js

@@ -1,17 +1,15 @@
 import { api } from "../core/api.js";
-import { $ } from "../core/ui.js";
+import { $, esc, icon, toast } from "../core/ui.js";
+import { track } from "./jobs.js";
 
-const COOKBOOK_MODELS = [
+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 viel Speicher.",
-    params_b: 32,
-    quant: "Q4_K_M",
-    ctx: 32768,
-    alias: "coder"
+    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",
@@ -19,10 +17,7 @@ const COOKBOOK_MODELS = [
     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"
+    params_b: 7, quant: "Q4_K_M", ctx: 32768, alias: "coder-fast"
   },
   {
     id: "llama3-vision-11b",
@@ -30,10 +25,7 @@ const COOKBOOK_MODELS = [
     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"
+    params_b: 11, quant: "Q4_K_M", ctx: 8192, alias: "vision"
   },
   {
     id: "qwen-general-7b",
@@ -41,185 +33,245 @@ const COOKBOOK_MODELS = [
     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"
+    params_b: 7, quant: "Q4_K_M", ctx: 8192, alias: "scout"
   }
 ];
 
-// Odysseus Hardware Fit Logic
 function estimateMemoryGB(params_b, quant, ctx) {
-  // Q4_K_M is roughly 0.6 bytes per param
   const bpp = 0.6;
   const weights = params_b * bpp;
-  // Context roughly: 1GB per 8K for 7B
   const context = (ctx / 8192) * (params_b / 7) * 0.8;
   return weights + context;
 }
 
 function getFit(m, sys) {
   const req = estimateMemoryGB(m.params_b, m.quant, m.ctx);
-  // Falls keine sys-Daten da sind (Backend mock), nimm Standardwerte an
   const vram_bytes = sys?.gpu?.vram?.total || 0;
   const vram = vram_bytes / (1024 ** 3);
   const ram_bytes = sys?.ram?.total || 0;
   const ram_used = sys?.ram?.used || 0;
-  const ram = (ram_bytes) / (1024 ** 3);
+  const ram = ram_bytes / (1024 ** 3);
   const freeRam = (ram_bytes - ram_used) / (1024 ** 3);
 
-  // Wenn gar keine echten Metriken kommen (Windows Dummy Backend), immer "Fits" für Demo
-  if (vram === 0 && ram === 0) return { level: "perfect", class: "green", text: "Fits (Mock)", req };
-
-  if (vram > 0 && req <= vram) return { level: "perfect", class: "green", text: "Fits VRAM", req };
-  if (req <= (vram + freeRam)) return { level: "good", class: "yellow", text: "RAM Offload", req };
-  return { level: "too_tight", class: "red", text: "OOM (Zu groß)", req };
+  if (vram === 0 && ram === 0) return { level: "perfect", class: "b-run", text: "Fits (Mock)", req };
+  if (vram > 0 && req <= vram) return { level: "perfect", class: "b-run", text: "Fits VRAM", req };
+  if (req <= (vram + freeRam)) return { level: "good", class: "b-load", text: "RAM Offload", req };
+  return { level: "too_tight", class: "b-err", text: "OOM (Zu groß)", req };
 }
 
 let lastSys = null;
-let dlPoll = null;
+let currentResults = [];
 
 function mount() {
-  render();
-}
-
-function unmount() {
-  if (dlPoll) clearInterval(dlPoll);
-}
-
-function onSystem(sys) {
-  lastSys = sys;
-  renderGrid();
-}
-
-export default { mount, unmount, onSystem };
-
-function render() {
-  const c = document.querySelector(".view[data-view='cookbook']");
+  const c = $(".view[data-view='cookbook']");
   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">HuggingFace Suche</h2>
+        <p class="meta" style="margin-bottom:24px">Finde GGUF-Modelle direkt auf HuggingFace und lade sie in Mission Control herunter.</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>
+    </div>
+
+    <div class="card-h" style="margin-top:24px"><h3 id="cb-section-title">Kuratierte Empfehlungen</h3></div>
     <div class="grid grid-3" id="cb-grid"></div>
 
-    <div class="card" style="margin-top: 24px;">
-      <div class="card-h"><h3>Custom Download</h3></div>
-      <div style="display:flex; gap:12px; margin-bottom:12px;">
-        <input id="cb-repo" class="tokin" placeholder="HuggingFace Repo (z.B. unsloth/Qwen2.5-Coder-7B-Instruct-GGUF)" style="flex:2">
-        <input id="cb-file" class="tokin" placeholder="Dateipfad (z.B. Qwen2.5-Coder-7B-Instruct-Q4_K_M.gguf)" style="flex:1">
-        <button class="btn" id="cb-btn-dl">Herunterladen</button>
-      </div>
-      <div id="cb-dl-prog" style="display:none; color:var(--text-dim); font-size:12px; margin-bottom:12px;"></div>
-      <div id="cb-register-box" style="display:none; padding-top:12px; border-top:1px solid var(--border);">
-        <div style="margin-bottom:8px;">Modell heruntergeladen! Jetzt einpflegen:</div>
-        <div style="display:flex; gap:12px;">
-          <input id="cb-reg-alias" class="tokin" placeholder="Alias (z.B. coder)" style="flex:1">
-          <input id="cb-reg-path" class="tokin" placeholder="Modell-Pfad" style="flex:2" readonly>
-          <input id="cb-reg-ctx" class="tokin" placeholder="Ctx (z.B. 8192)" type="number" style="width:100px;">
-          <button class="btn" id="cb-btn-reg">Einpflegen</button>
+    <!-- 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>
+
+        <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>
+
+        <button class="primary" id="cb-m-download" style="width:100%; margin-top:24px; padding:12px">Herunterladen & Einpflegen</button>
       </div>
     </div>
   `;
 
-  document.getElementById("cb-btn-dl").onclick = () => {
-    startDownload(
-      document.getElementById("cb-repo").value,
-      document.getElementById("cb-file").value,
-      "", 8192
-    );
-  };
+  $("#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-m-download").addEventListener("click", doDownload);
 
-  document.getElementById("cb-btn-reg").onclick = async () => {
-    const alias = document.getElementById("cb-reg-alias").value;
-    const path = document.getElementById("cb-reg-path").value;
-    const ctx = document.getElementById("cb-reg-ctx").value;
-    if (!alias || !path) return;
-    try {
-      await api("/api/models/register", {
-        method: "POST",
-        body: JSON.stringify({ alias, model_path: path, ctx_len: parseInt(ctx)||4096 })
-      });
-      alert("Erfolgreich eingepflegt!");
-      document.getElementById("cb-register-box").style.display = "none";
-    } catch(e) {
-      alert("Fehler: " + e);
-    }
-  };
-
-  renderGrid();
+  renderCurated();
 }
 
-function renderGrid() {
-  const grid = document.getElementById("cb-grid");
-  if (!grid) return;
-  grid.innerHTML = COOKBOOK_MODELS.map(m => {
-    const fit = getFit(m, lastSys);
-    return `
-      <div class="card" style="display:flex; flex-direction:column;">
-        <div style="display:flex; justify-content:space-between; align-items:center;">
-          <h3 style="margin:0">${m.name}</h3>
-          <span style="font-size:11px; padding:2px 6px; border-radius:4px; background:${fit.class === 'green' ? 'rgba(0,255,0,0.1)' : fit.class === 'yellow' ? 'rgba(255,255,0,0.1)' : 'rgba(255,0,0,0.1)'}; color:${fit.class === 'green' ? '#4ade80' : fit.class === 'yellow' ? '#fde047' : '#f87171'};">
-            ${fit.text}
-          </span>
-        </div>
-        <div style="font-size:12px; color:var(--text-dim); margin-top:8px; flex:1;">
-          ${m.desc}<br><br>
-          <b>Größe:</b> ~${fit.req.toFixed(1)} GB (inkl. Context)<br>
-          <b>Quant:</b> ${m.quant}
-        </div>
-        <button class="btn cb-btn-preset" data-id="${m.id}" style="margin-top:16px; width:100%;">Herunterladen</button>
-      </div>
-    `;
-  }).join("");
+async function doSearch() {
+  const q = $("#cb-search").value.trim();
+  if (!q) return renderCurated();
 
-  document.querySelectorAll(".cb-btn-preset").forEach(b => {
-    b.onclick = () => {
-      const m = COOKBOOK_MODELS.find(x => x.id === b.dataset.id);
-      if(m) {
-        document.getElementById("cb-repo").value = m.repo;
-        document.getElementById("cb-file").value = m.file;
-        startDownload(m.repo, m.file, m.alias, m.ctx);
-      }
-    };
-  });
-}
+  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>`;
 
-async function startDownload(repo, file, autoAlias, autoCtx) {
-  if(!repo || !file) return;
-  document.getElementById("cb-dl-prog").style.display = "block";
-  document.getElementById("cb-dl-prog").innerText = "Starte Download...";
-  document.getElementById("cb-register-box").style.display = "none";
-  
   try {
-    const res = await api("/api/models/download", {
-      method: "POST",
-      body: JSON.stringify({ repo_id: repo, filename: file })
-    });
-    if (res.job_id) {
-      if(dlPoll) clearInterval(dlPoll);
-      dlPoll = setInterval(() => checkProg(res.job_id, autoAlias, autoCtx), 2000);
+    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);
+  } catch (e) {
+    $("#cb-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;
+  }
+
+  grid.innerHTML = results.map((m, i) => \`
+    <div class="card" style="display:flex; flex-direction:column; cursor:pointer" onclick="window.openModelModal(\${i})">
+      <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 style="flex:1; margin-top:16px;"></div>
+      <div style="display:flex; justify-content:space-between; align-items:center; margin-top:16px">
+        <span class="badge b-idle" style="font-size:11px">GGUF</span>
+        <span class="meta" style="font-size:12px">⬇ \${(m.downloads||0).toLocaleString()}</span>
+      </div>
+    </div>
+  \`).join("");
+}
+
+// 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";
+
+  try {
+    const url = \`https://huggingface.co/api/models/\${m.id}/tree/main\`;
+    const r = await fetch(url);
+    const tree = await r.json();
+    const files = tree.filter(f => f.path.endsWith('.gguf')).map(f => f.path);
+    
+    $("#cb-m-loading").style.display = "none";
+    $("#cb-m-files").style.display = "block";
+    
+    if (files.length === 0) {
+      $("#cb-m-files").innerHTML = "<option value=''>Keine GGUF-Dateien im Hauptverzeichnis gefunden.</option>";
+      $("#cb-m-download").disabled = true;
+    } else {
+      $("#cb-m-files").innerHTML = files.map(f => \`<option value="\${esc(f)}">\${esc(f)}</option>\`).join("");
+      $("#cb-m-download").disabled = false;
     }
   } catch(e) {
-    document.getElementById("cb-dl-prog").innerText = "Fehler: " + e;
+    $("#cb-m-loading").textContent = "Fehler beim Laden der Dateien.";
   }
+};
+
+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;
+  
+  if (!repo || !file || !alias) return toast("Bitte alle Felder ausfüllen.", true);
+
+  $("#cb-m-download").disabled = true;
+  $("#cb-m-download").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.");
+    $("#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";
 }
 
-async function checkProg(jobId, autoAlias, autoCtx) {
-  try {
-    const res = await api("/api/jobs");
-    const j = res.find(x => x.id === jobId);
-    if (!j) {
-      clearInterval(dlPoll);
-      document.getElementById("cb-dl-prog").innerText = "Job verschwunden.";
-      return;
-    }
-    document.getElementById("cb-dl-prog").innerText = j.status + (j.error ? (" - " + j.error) : "");
-    if (j.status === "done") {
-      clearInterval(dlPoll);
-      document.getElementById("cb-register-box").style.display = "block";
-      document.getElementById("cb-reg-path").value = j.result || "";
-      if(autoAlias) document.getElementById("cb-reg-alias").value = autoAlias;
-      if(autoCtx) document.getElementById("cb-reg-ctx").value = autoCtx;
-    } else if (j.status === "failed") {
-      clearInterval(dlPoll);
-    }
-  } catch(e) {}
+function renderCurated() {
+  $("#cb-section-title").textContent = "Kuratierte Empfehlungen";
+  const grid = $("#cb-grid");
+  if (!grid) return;
+  grid.innerHTML = CURATED_MODELS.map((m, i) => {
+    const fit = getFit(m, lastSys);
+    return \`
+      <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 \${fit.class}">\${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.toFixed(1)} GB RAM</span>
+          <span>\${m.quant}</span>
+        </div>
+      </div>
+    \`;
+  }).join("");
 }
+
+window.openCuratedModal = (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;
+};
+
+function onSystem(sys) {
+  lastSys = sys;
+  if (!$("#cb-search").value.trim()) renderCurated();
+}
+
+function unmount() {}
+
+export default { id: "cookbook", mount, unmount, onSystem };

static/js/panels/guides.js

@@ -9,36 +9,39 @@ function render() {
   c.innerHTML = `
     <div class="grid grid-2">
       <div class="card">
-        <div class="card-h"><h3>Cline / Cursor</h3></div>
-        <p>Nutze llama-swap als lokalen OpenAI-kompatiblen Provider in Cursor oder Cline.</p>
-        <label>API Provider</label>
-        <input class="tokin mono-sm" readonly value="OpenAI Compatible">
-        <label>Base URL</label>
+        <div class="card-h"><h3>Cline / Cursor (Juni 2026)</h3></div>
+        <p>Nutze deine lokalen Modelle kostenlos in Cursor 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="Dein_Mission_Control_Token_oder_leer">
+        <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>
       </div>
 
       <div class="card">
-        <div class="card-h"><h3>OpenWebUI</h3></div>
-        <p>Füge llama-swap in OpenWebUI als externe OpenAI-Verbindung hinzu.</p>
-        <label>Settings -> Connections -> OpenAI API</label>
+        <div class="card-h"><h3>OpenWebUI (Pipes & Connections)</h3></div>
+        <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(--text-dim);">
-          OpenWebUI zieht sich danach automatisch alle geladenen Modelle.
+        <p style="margin-top:12px; font-size:12px; color:var(--mut);">
+          OpenWebUI erkennt nun vollautomatisch, wenn ein Modell ausgetauscht wird.
         </p>
       </div>
 
       <div class="card" style="grid-column: span 2;">
         <div class="card-h"><h3>Python / LangChain (OpenAI SDK)</h3></div>
         <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(--border); overflow-x: auto; color: var(--text); font-family: monospace; font-size: 13px;"><code>from openai import OpenAI
+        <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
 
 client = OpenAI(
     base_url="${currentUrl}/v1",
-    api_key="Dein_Token" # Optional, falls in Mission Control konfiguriert
+    api_key="Dein_Token" # Optional
 )
 
 response = client.chat.completions.create(
@@ -50,19 +53,13 @@ print(response.choices[0].message.content)</code></pre>
       </div>
 
       <div class="card" style="grid-column: span 2;">
-        <div class="card-h"><h3>n8n / Zapier / HTTP Node</h3></div>
-        <p>Führe direkte HTTP POST Requests gegen den Endpunkt aus.</p>
-        <label>Methode & URL</label>
-        <input class="tokin mono-sm" readonly value="POST ${currentUrl}/v1/chat/completions">
-        <label>Headers</label>
-        <input class="tokin mono-sm" readonly value="Content-Type: application/json">
-        <label>Body (JSON)</label>
-        <pre style="background: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; color: var(--text); font-family: monospace; font-size: 13px;"><code>{
-  "model": "coder",
-  "messages": [
-    { "role": "user", "content": "Erkläre mir Quantisierung." }
-  ]
-}</code></pre>
+        <div class="card-h"><h3>n8n (AI Agent Nodes)</h3></div>
+        <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>
       </div>
     </div>
   `;

static/js/panels/jobs.js

@@ -1,20 +1,20 @@
-// jobs.js — Aktivitaets-Stream ("Incident Stream"): Hintergrund-Jobs mit Live-Log.
-// Exportiert track(id), damit andere Panels einen frisch gestarteten Job auto-aufklappen.
+// jobs.js (Aktivität) — System-Metriken & Hintergrund-Jobs
 
-import { $, esc } from "../core/ui.js";
+import { $, esc, icon } from "../core/ui.js";
 
 const tracked = new Set();
 let JOBS = [];
+let SYS = null;
 
 export function track(id) {
   tracked.add(id);
-  render();
+  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äuft…</span>';
+  return '<span class="badge b-load">lädt…</span>';
 }
 function dotClass(state) {
   if (state === "done")   return "on";
@@ -22,26 +22,95 @@ function dotClass(state) {
   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 60 Sekunden, je 3s Polling = 20 Punkte)
+const hist = { cpu: [], ram: [], gpu: [] };
+const MAX_HIST = 20;
+
+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' : '–'}`;
+
+  // 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();
+
+  // 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 = `
+    <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>
+    
+    <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>
+  `;
+}
+
 function mount() {
   $("#v-activity").innerHTML = `
-    <div class="card-h"><h3>Aktivität</h3><span class="meta" id="job-count"></span></div>
+    <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">Noch nichts losgemacht.</div>
+      <div class="e-t">Keine laufenden Jobs.</div>
       <div class="e-s">Downloads, Updates &amp; Co. erscheinen hier mit Live-Log.</div>
     </div>`;
 
-  // Klicks auf Job-Kopf -> auf/zuklappen (Event-Delegation)
-  $("#jobs").addEventListener("click", e => {
+  // Klicks auf Job-Kopf -> auf/zuklappen
+  $("#v-activity").addEventListener("click", e => {
     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);
-    render();
+    renderJobs();
   });
+  
+  if (SYS) renderSys();
 }
 
-function render() {
+function renderJobs() {
   const c = $("#jobs");
   if (!c) return;
   $("#jobs-empty").style.display = JOBS.length ? "none" : "flex";
@@ -50,7 +119,7 @@ function render() {
 
   c.innerHTML = JOBS.map(j => {
     const open = tracked.has(j.id);
-    const log = open ? `<div class="log">${esc((j.log || []).join("\n"))}</div>` : "";
+    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>
@@ -61,7 +130,13 @@ function render() {
 
 function onJobs(jobs) {
   JOBS = jobs || [];
-  render();
+  renderJobs();
 }
 
-export default { id: "jobs", mount, onJobs };
+function onSystem(sys) {
+  SYS = sys;
+  const c = $("#act-sys");
+  if (c) renderSys();
+}
+
+export default { id: "jobs", mount, onJobs, onSystem };

static/js/panels/models.js

@@ -1,7 +1,7 @@
 // models.js — "Modelle"-Ansicht: Download + Einpflegen, Schnelltest-Chat, Modell-Tabelle.
 
 import { api } from "../core/api.js";
-import { $, badge, esc, toast } from "../core/ui.js";
+import { $, badge, esc, toast, icon } from "../core/ui.js";
 
 function refreshSoon() { document.dispatchEvent(new Event("mc:refresh")); }
 
@@ -18,6 +18,9 @@ function mount() {
 
   $("#m-table").innerHTML = `
     <div class="card-h"><h3>Modelle &amp; Ports</h3><span class="meta" id="m-count"></span></div>
+    <div class="hint" style="margin-bottom: 16px;">
+      💡 <b>Modelle werden automatisch geladen</b>, sobald eine Chat-Anfrage (z.B. über OpenWebUI oder Cursor) an sie gestellt wird. Du musst sie hier nicht 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">Aktion</th></tr></thead>
       <tbody id="models"></tbody>
@@ -44,9 +47,9 @@ function onStatus(s) {
     let capsHtml = "–";
     if (m.meta && m.meta.caps) {
       capsHtml = m.meta.caps.map(c => {
-         if (c === "Text") return `<span class="meta" title="Text">T</span>`;
-         if (c === "Code") return `<strong style="color:var(--blue)" title="Code">{ }</strong>`;
-         if (c === "Bild") return `<strong style="color:var(--purple)" title="Vision">👁</strong>`;
+         if (c === "Text") return `<span class="meta" title="Text" style="display:inline-block;width:18px">${icon("search")}</span>`;
+         if (c === "Code") return `<strong style="color:var(--blue);display:inline-block;width:18px" title="Code">${icon("code")}</strong>`;
+         if (c === "Bild") return `<strong style="color:var(--purple);display:inline-block;width:18px" title="Vision">${icon("eye")}</strong>`;
          return "";
       }).join(" ");
     }
@@ -61,12 +64,14 @@ function onStatus(s) {
 
     const perfHtml = m.state === "running" ? `<br><small class="meta" style="font-size:0.75em">n/a t/s</small>` : "";
 
-    tr.innerHTML = `<td class="mid" style="font-weight:500">${esc(m.name)}</td>
+    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>
       <td class="port">${m.port ?? "auto"}</td>
-      <td style="text-align:right"><button class="ghost" data-unload="${esc(m.name)}">Entladen</button></td>`;
+      <td style="text-align:right"><button class="ghost" data-unload="${esc(m.name)}">Aus dem VRAM entfernen</button></td>`;
     tb.appendChild(tr);
     sel.insertAdjacentHTML("beforeend", `<option>${esc(m.name)}</option>`);
   }

static/js/panels/overview.js

@@ -1,11 +1,9 @@
-// overview.js — Dashboard-Kopf: Hero + Mini-Stats, KPI-Reihe, Stack-Gesundheit,
-// kompakte Modell-Liste ("Session Router"). Speist sich aus /api/status + /api/jobs.
+// overview.js — Dashboard-Kopf: Hero + kompakte Modell-Liste.
 
-import { $, icon, esc } from "../core/ui.js";
+import { $, esc } from "../core/ui.js";
 
 let S = null;   // letzter Status
 let J = [];     // letzte Job-Liste
-let SYS = null; // letzte System-Auslastung
 
 const RUNNING = new Set(["running", "ready", "loading", "starting"]);
 
@@ -16,7 +14,6 @@ function counts() {
     running: models.filter(m => RUNNING.has(m.state)).length,
     jobsRun: J.filter(j => j.state === "running" || j.state === "queued").length,
     jobsErr: J.filter(j => j.state === "failed").length,
-    swap:    !!S?.swap_ok,
   };
 }
 
@@ -43,58 +40,6 @@ function renderHero() {
   </div>`;
 }
 
-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 renderKpis() {
-  const c = counts();
-  const sysV = SYS ? `${SYS.cpu.percent.toFixed(0)}<small>% CPU</small>` : "n/a";
-  const sysS = SYS ? `${SYS.ram.percent.toFixed(0)}% RAM, ${SYS.gpu_temp ? SYS.gpu_temp.toFixed(0)+'°C' : SYS.cpu.temp ? SYS.cpu.temp.toFixed(0)+'°C' : '–'}` : "bald · Live-Auslastung";
-
-  $("#kpis").innerHTML =
-    kpi(c.swap ? "green" : "red", "llama-swap", "swap",
-        c.swap ? "Online" : "Offline", "Transport-Status") +
-    kpi("blue", "Modelle", "monitor",
-        `${c.running}<small>/${c.total}</small>`, "aktiv / gesamt") +
-    kpi("purple", "Jobs", "layers", c.jobsRun, "laufend") +
-    kpi(c.jobsErr ? "red" : "muted", "Fehler", "alert", c.jobsErr, "in der Aktivität") +
-    kpi(SYS ? "blue" : "muted", "System-Last", "gauge", sysV, sysS);
-}
-
-function kvRow(k, v, cls = "") {
-  return `<div class="kv-row"><span class="kv-k">${k}</span><span class="kv-v ${cls}">${v}</span></div>`;
-}
-
-function renderHealth() {
-  const c = counts();
-  
-  let sysRow = kvRow("Auslastung (RAM/GPU/Disk)", "folgt", "na");
-  if (SYS) {
-    const gb = b => (b / 1024 / 1024 / 1024).toFixed(1);
-    const ram = `${gb(SYS.ram.used)}GB / ${gb(SYS.ram.total)}GB`;
-    const gpu = (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 disk = `${SYS.disk.percent.toFixed(0)}%`;
-    sysRow = kvRow("Auslastung (RAM/GPU/Disk)", `${ram} | ${gpu} | ${disk}`);
-  }
-
-  $("#health").innerHTML = `
-    <div class="card-h"><h3>Stack-Gesundheit</h3>
-      <span class="meta ${c.swap ? "ok" : ""}">${c.swap ? "Connected" : "Offline"}</span></div>
-    <div class="kv">
-      ${kvRow("llama-swap", c.swap ? "Connected" : "Offline", c.swap ? "ok" : "bad")}
-      ${kvRow("Modelle (gesamt)", c.total)}
-      ${kvRow("Aktiv", c.running, c.running ? "ok" : "")}
-      ${kvRow("Jobs (laufend)", c.jobsRun)}
-      ${kvRow("Fehler", c.jobsErr, c.jobsErr ? "bad" : "")}
-      ${sysRow}
-    </div>`;
-}
-
 function modelRow(m) {
   const on = RUNNING.has(m.state);
   const dot = m.state === "loading" || m.state === "starting" ? "load" : on ? "on" : "";
@@ -125,18 +70,17 @@ function modelRow(m) {
 function renderModels() {
   const models = S?.models || [];
   $("#ov-models").innerHTML = `
-    <div class="card-h"><h3>Modelle</h3><span class="meta">${models.length || ""}</span></div>
+    <div class="card-h"><h3>Aktuelle Modelle im Stack</h3><span class="meta">${models.length || ""}</span></div>
     ${models.length
       ? `<div class="list">${models.map(modelRow).join("")}</div>`
       : `<div class="empty-c"><div class="e-t">Keine Modelle konfiguriert</div>
-           <div class="e-s">Hol dir unter „Modelle" eins von HuggingFace.</div></div>`}`;
+           <div class="e-s">Hol dir unter „Cookbook“ eins von HuggingFace.</div></div>`}`;
 }
 
-function renderAll() { renderHero(); renderKpis(); renderHealth(); renderModels(); }
+function renderAll() { renderHero(); renderModels(); }
 
 function mount() { renderAll(); }
 function onStatus(s) { S = s; renderAll(); }
-function onJobs(jobs) { J = jobs || []; renderHero(); renderKpis(); renderHealth(); }
-function onSystem(sys) { SYS = sys; renderKpis(); renderHealth(); }
+function onJobs(jobs) { J = jobs || []; renderHero(); }
 
-export default { id: "overview", mount, onStatus, onJobs, onSystem };
+export default { id: "overview", mount, onStatus, onJobs };

static/js/panels/server.js

@@ -12,8 +12,8 @@ function mount() {
       <button id="w-restart-mc">Mission Control neustarten</button>
     </div>
     <div class="btn-row">
-      <button id="w-update">Container aktualisieren</button>
-      <button id="w-unload" class="ghost">Modelle entladen</button>
+      <button id="w-update">Mission Control System-Update</button>
+      <button id="w-unload" class="ghost">Aus dem VRAM entfernen</button>
     </div>
     <div class="hint" style="margin-top:12px; margin-bottom:32px">
       Dienste starten via passwortlosem Sudo neu.