v5 Phase 1: Erklaeren (Swapping/RAM, Kontext, Guides-Neubau)

- Swapping-Klartext + Spitzenbedarf (peak_ram) pro Modell: Modelle-Konfig + Cookbook-Setup-Modal
  zeigen 'nur ein Modell gleichzeitig, groesstes zaehlt'. models.py: peak_ram_gb/_optimal in Meta.
- Kontextfenster: infoDot(ⓘ)-Helfer in ui.js + Tooltips an ctx-Feldern.
- Guides-Tab komplett neu = echter Anfaenger-Guide (LLM/GGUF/Quant/Kontext/Swapping/MCP/Skills/Agenten).

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

static/js/panels/guides.js

@@ -1,106 +1,64 @@
-// guides.js — Integrations-Anleitungen (v3): Copy-Paste-Configs für externe Tools.
+// guides.js — Anfänger-Guide (v5): erklärt die Local-LLM-Welt idiotensicher.
+// Reine Erklär-Seite. Tool-Einrichtung/Configs liegen im Tab „Verbinden".
 
-import { $, esc } from "../core/ui.js";
+import { $ } from "../core/ui.js";
 
-// In die Zwischenablage kopieren (kopiert das vorhergehende Eingabefeld / Codeblock).
-window.mcCopy = (btn, sel) => {
-  const src = sel ? btn.parentElement.querySelector(sel) : btn.previousElementSibling;
-  const text = src.value !== undefined ? src.value : src.textContent;
-  navigator.clipboard?.writeText(text);
-  const old = btn.textContent; btn.textContent = "Kopiert!";
-  setTimeout(() => (btn.textContent = old), 1200);
-};
-
-// 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`;
-}
-
-// Beschriftetes Feld mit Kopier-Button.
-function field(label, value) {
-  return `<label>${label}</label>
-    <div class="flex gap-2" style="align-items:stretch;margin-bottom:12px">
-      <input class="mono-sm" readonly value="${esc(value)}" style="flex:1;margin:0">
-      <button class="ghost" onclick="window.mcCopy(this)">Kopieren</button>
-    </div>`;
-}
-
-function render() {
-  const c = $(".view[data-view='guides']");
-  if (!c) return;
-  const url = apiBase();
-  const py = `from openai import OpenAI
-
-client = OpenAI(
-    base_url="${url}",
-    api_key="dein_token"  # optional
-)
-
-resp = client.chat.completions.create(
-    model="coder",  # Alias aus dem Cookbook
-    messages=[{"role": "user", "content": "Hallo Modell!"}]
-)
-print(resp.choices[0].message.content)`;
+const SECTIONS = [
+  ["Erste Schritte — in 3 Schritten loslegen", `
+    <ol style="padding-left:18px;line-height:1.9">
+      <li><b>Modell holen:</b> Im <b>Cookbook</b> auf „Wofür möchtest du es nutzen?" deinen Fall wählen
+        (z.B. „Coden") → „Komplettes Setup installieren". Der Download läuft im Tab <b>Aktivität</b>.</li>
+      <li><b>Verbinden:</b> Im Tab <b>Verbinden</b> die Basis-URL kopieren und in deinem Tool (z.B. OpenCode)
+        als „OpenAI-kompatibel" eintragen. Mit „Verbindung testen" prüfen.</li>
+      <li><b>Loslegen:</b> Im Tool das Modell (z.B. <code>coder</code>) auswählen und arbeiten. Die Engine
+        lädt das passende Modell automatisch.</li>
+    </ol>`],
+  ["Was ist ein LLM bzw. ein Modell?", `
+    <p>Ein <b>LLM</b> (Large Language Model) ist ein KI-Sprachmodell — die „Intelligenz", die Text versteht
+    und schreibt (wie ChatGPT, nur <b>lokal auf deinem Mini-PC</b>, ohne Cloud). Ein <b>Modell</b> ist eine
+    konkrete Datei davon. Verschiedene Modelle sind unterschiedlich gut/schnell und auf Dinge spezialisiert
+    (Coden, Bilder, Chat).</p>`],
+  ["Was ist GGUF?", `
+    <p><b>GGUF</b> ist das Datei<b>format</b>, in dem lokale Modelle gespeichert werden — gemacht, damit sie
+    effizient auf normaler Hardware laufen. Unsere Engine (llama-swap/llama.cpp) lädt <b>nur GGUF</b>.
+    Steht im Cookbook „keine GGUF", hat dieses HuggingFace-Repo schlicht keine passende Datei — dann ein
+    anderes Repo nehmen (oft gibt's „…-GGUF"-Varianten).</p>`],
+  ["Quantisierung (z.B. Q4_K_M)?", `
+    <p>Modelle sind riesig. <b>Quantisierung</b> verkleinert sie, indem die Zahlen gröber gespeichert werden
+    (16-Bit → 4-Bit) — sie passen dann in den Speicher und laufen schneller, bei kaum spürbarem
+    Qualitätsverlust. <b>Q4_K_M</b> ist der beliebte Sweetspot aus Größe und Qualität. Höhere Zahl (Q6, Q8)
+    = etwas besser, aber größer/langsamer.</p>`],
+  ["Kontextfenster — das Gedächtnis", `
+    <p>Das <b>Kontextfenster</b> ist das Kurzzeitgedächtnis: wie viel Text (Tokens) sich das Modell
+    <i>gleichzeitig</i> merken kann. <b>Größer</b> = es überblickt längere Dateien/Gespräche, braucht aber
+    <b>mehr Speicher</b> und wird etwas langsamer. Fürs Coden (viele Dateien) hilft groß; für kurzen Chat
+    reicht klein. Mission Control rechnet dir das <b>Optimum für deine Hardware</b> aus.</p>`],
+  ["Swapping — warum nur ein Modell läuft", `
+    <p>llama-swap lädt <b>immer nur ein Modell gleichzeitig</b> und tauscht es bei Bedarf automatisch aus.
+    Vorteil: Du kannst viele Modelle einrichten, ohne dass sie sich den Speicher teilen müssen.
+    Heißt auch: Der Speicherbedarf deines Setups = das <b>größte</b> Einzelmodell, <b>nicht</b> die Summe.</p>`],
+  ["MCP, Skills & Agenten", `
+    <p><b>Agent:</b> Ein Programm, das das Modell <i>selbstständig</i> Aufgaben erledigen lässt — Dateien
+    lesen/schreiben, Befehle ausführen, mehrere Schritte planen (z.B. OpenCode, Cline).</p>
+    <p><b>MCP (Model Context Protocol):</b> Ein Standard, über den ein Agent dem Modell <b>zusätzliche
+    Werkzeuge</b> gibt — z.B. „durchsuche das Web", „lies meine Datenbank", „steuere Tool X". So wird aus
+    einem reinen Textmodell ein nützlicher Helfer mit Zugriff auf echte Tools.</p>
+    <p><b>Skills:</b> Vorgefertigte Fähigkeiten/Anleitungen, die ein Agent für wiederkehrende Aufgaben nutzt.</p>`],
+];
 
+function mount() {
+  const c = $(".view[data-view='guides']"); if (!c) return;
   c.innerHTML = `
     <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>
-
+      <h1>Guide für Einsteiger</h1>
+      <div class="sub">Die Local-LLM-Welt in Klartext — ohne Vorwissen verständlich.</div></div></div>
     <div class="card" style="padding:0;overflow:hidden">
-      <details class="guide-acc">
-        <summary>Cline / Cursor</summary>
-        <div class="acc-body">
-          <p>Nutze deine lokalen Modelle kostenlos in Cursor oder Cline (Provider: „OpenAI Compatible").</p>
-          ${field("Modell-ID", "coder")}
-          ${field("Basis-URL (OpenAI-kompatibel)", url)}
-          ${field("API-Key", "(dein Token oder leer lassen)")}
-        </div>
-      </details>
-
-      <details class="guide-acc">
-        <summary>OpenWebUI</summary>
-        <div class="acc-body">
-          <p>Settings → Admin → Connections → neue OpenAI-Verbindung:</p>
-          ${field("Basis-URL", url)}
-          ${field("API-Key", "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>
-        <div class="acc-body">
-          <p>Mit dem offiziellen <code>openai</code>-Paket:</p>
-          <div style="position:relative">
-            <button class="ghost" style="position:absolute;top:8px;right:8px;z-index:1" onclick="window.mcCopy(this,'code')">Kopieren</button>
-            <div class="log" style="max-height:none"><code>${esc(py)}</code></div>
-          </div>
-        </div>
-      </details>
-
-      <details class="guide-acc">
-        <summary>n8n (AI-Agent-Nodes)</summary>
-        <div class="acc-body">
-          <p>„OpenAI Chat Model"-Node → Credentials → Custom URL:</p>
-          ${field("Basis-URL", url)}
-          <p class="hint" style="margin-top:10px">Modell-ID „coder" eintragen und loslegen.</p>
-        </div>
-      </details>
-
-      <details class="guide-acc">
-        <summary>Begriffe einfach erklärt (Glossar)</summary>
-        <div class="acc-body">
-          <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>
+      ${SECTIONS.map(([title, body], i) => `
+        <details class="guide-acc"${i === 0 ? " open" : ""}>
+          <summary>${title}</summary>
+          <div class="acc-body">${body}</div>
+        </details>`).join("")}
     </div>`;
 }
 
-function mount() { render(); }
-
 export default { id: "guides", mount };