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>

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 };