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/cookbook.js

@@ -2,7 +2,9 @@
 // Backend: /api/cookbook/{recipes,install-recipe,analyze,evaluate} (hw_math).
 
 import { api } from "../core/api.js";
-import { $, esc, icon, toast } from "../core/ui.js";
+import { $, esc, icon, toast, infoDot } from "../core/ui.js";
+
+const CTX_HELP = "Kontext = das Kurzzeitgedächtnis des Modells. Größer = merkt sich mehr, braucht aber mehr Speicher und wird etwas langsamer.";
 
 const FILTERS = [
   { id: "", label: "Alle" }, { id: "coder", label: "Coder" }, { id: "scout", label: "Scout" },
@@ -63,7 +65,8 @@ function mount() {
         <h3 id="cb-r-title">Setup</h3>
         <p class="text-mut text-sm" id="cb-r-desc" style="margin:-4px 0 16px"></p>
         <div id="cb-r-models"></div>
-        <button class="primary" id="cb-r-install" style="width:100%;margin-top:16px">Komplettes Setup installieren</button>
+        <div class="hint" id="cb-r-note" style="margin-top:12px"></div>
+        <button class="primary" id="cb-r-install" style="width:100%;margin-top:8px">Komplettes Setup installieren</button>
         <div class="hint" style="margin-top:8px">Lädt alle Modelle herunter und pflegt sie mit optimalem Kontext ein. Fortschritt in der Aktivität.</div>
       </div>
     </div>
@@ -78,7 +81,7 @@ function mount() {
         <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><label>Kontext-Größe ${infoDot(CTX_HELP)}</label><input id="cb-m-ctx" type="number" value="8192"></div>
         </div>
         <div class="hint" id="cb-m-ctx-rec" style="margin:-6px 0 14px"></div>
         <div id="cb-m-fit" class="tile" style="display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px">
@@ -147,6 +150,9 @@ function openRecipe(id) {
       </div>
       <span class="fit-badge ${fitCls(m.fit.level)}">${esc(m.fit.text)}</span>
     </div>`).join("")}</div>`;
+  const maxRam = Math.max(...r.models.map(m => m.fit.req_gb));
+  $("#cb-r-note").innerHTML = `Größter Spitzenbedarf: <b>~${maxRam.toFixed(1)} GB</b>. ` +
+    `Es läuft immer nur <b>ein</b> Modell gleichzeitig — das größte bestimmt, ob das Setup passt (kein Summieren).`;
   const btn = $("#cb-r-install");
   btn.className = r.fit_level === "too_tight" ? "primary warn" : "primary";
   btn.textContent = r.fit_level === "too_tight" ? "Trotzdem installieren (zu groß)" : "Komplettes Setup installieren";