feat: guides (Feature 7)

2026-06-20 21:44:38 +02:00
parent b84e8f3ac2
commit ef7f02e19f
4 changed files with 102 additions and 13 deletions
@@ -15,19 +15,15 @@ Modell-Listen, Aktivitäts-Stream) angelehnt an `docs/mission-control-overview.p
 **✅ Schritt 2 erledigt & live** — *Feature 3: Live-Auslastung*. `system.py` Router mit `psutil` und sysfs für CPU/RAM/Disk/GPU/Temp.

 **Reihenfolge (abgestimmt):** Design/Architektur zuerst (✅), dann Quick Wins, Security-Brocken zuletzt:
-`1 (✅) Fundament → 2 (✅) Feature 3 Live-Auslastung → 3 (✅) Feature 6 Mehr LLM-Metriken → 4 (✅) Feature 1 Server-Management → 5 (✅) Feature 4 Cookbook → [6] Feature 7 Integrations-Anleitungen ← NÄCHSTES → Feature 2`.
+`1 (✅) Fundament → 2 (✅) Feature 3 Live-Auslastung → 3 (✅) Feature 6 Mehr LLM-Metriken → 4 (✅) Feature 1 Server-Management → 5 (✅) Feature 4 Cookbook → 6 (✅) Feature 7 Integrations-Anleitungen → [7] Feature 2 Live-Terminal ← NÄCHSTES`.

 **Arbeitsweise je Schritt:** neuer `routers/<x>.py` + `js/panels/<x>.js` + Nav-Eintrag, sauber degradierend.
 Bauen + Smoke-Test auf Windows, dann push→pull→rsync→restart auf den Bosgame (CLAUDE.md „Entwickeln & Deployen").
 Ein Commit je Schritt. **Ich (KI) habe key-basierten SSH-Zugang zum Bosgame und kann selbst deployen+restarten.**

-**→ Nächster Schritt konkret = Feature 7 (Integrations-Anleitungen).**
- Unter "Guides" (neuer Tab links) gibt es Copy-Paste Templates.
- Templates für die Integration von llama-swap/mission-control in:
-  - Cline / Cursor
-  - N8N / Zapier
-  - OpenWebUI
-  - LangChain / Python Code
+**→ Nächster Schritt konkret = Feature 2 (Live-Terminal / Log via SSH).**
+- Unter "Server" -> "Console" soll man das Journal oder den direkten Output verfolgen können.
+- Wahrscheinlich reicht auch schon ein simpler "Log" Endpunkt, der `journalctl -u llama-swap -n 100 -f` über Websockets liefert.

 ---

@@ -68,9 +64,13 @@ Aktuell gibt es nur "Container aktualisieren" + "Alles aus dem Speicher". Ziel:
 - [x] Tokens/Sek, Kontextgröße, Quant, Dateigröße auf Platte
 - [x] Status pro Modell: geladen / idle / Ladezeit

-### 7. Integrations-Anleitungen
- [ ] Eingebaute Guides: wie man die LLMs in andere Tools bekommt (OpenCode für Windows, Cline, …)
- [ ] Copy-Paste-fertige Configs (Base-URL, Modell-IDs)
+### 7. Integrations-Anleitungen (Copy-Paste) (✅ Erledigt)
+- [x] Unter "Guides" (neuer Tab links) gibt es Copy-Paste Templates.
+- [x] Templates für die Integration von llama-swap/mission-control in:
+  - Cline / Cursor
+  - N8N / Zapier
+  - OpenWebUI
+  - LangChain / Python Code

 ---

@@ -19,7 +19,7 @@
      <span class="nav-item disabled" title="Aktivität — siehe Übersicht" data-ic="pulse"></span>
      <span class="nav-item disabled" title="Server (bald)"   data-ic="server"></span>
      <a class="nav-item" data-view="cookbook" title="Cookbook" data-ic="book"></a>
-      <span class="nav-item disabled" title="Guides (bald)"   data-ic="help"></span>
+      <a class="nav-item" data-view="guides" title="Guides" data-ic="help"></a>
    </nav>
    <div class="side-foot">
      <span class="nav-item disabled" title="Einstellungen (bald)" data-ic="settings"></span>
@@ -65,6 +65,10 @@
        <!-- Wird von cookbook.js gerendert -->
      </section>

+      <section class="view" data-view="guides" hidden>
+        <!-- Wird von guides.js gerendert -->
+      </section>
+
    </main>
  </div>
 </div>
@@ -10,8 +10,9 @@ import models from "./panels/models.js";
 import maintenance from "./panels/maintenance.js";
 import jobs from "./panels/jobs.js";
 import cookbook from "./panels/cookbook.js";
+import guides from "./panels/guides.js";

-const panels = [overview, models, maintenance, jobs, cookbook];
+const panels = [overview, models, maintenance, jobs, cookbook, guides];

 let lastJobs = [];
 let lastSystem = null;
@@ -0,0 +1,84 @@
+import { $ } from "../core/ui.js";
+
+let currentUrl = "http://localhost:8000";
+
+function render() {
+  const c = document.querySelector(".view[data-view='guides']");
+  if (!c) return;
+  
+  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>
+        <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">
+      </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>
+        <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>
+      </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
+
+client = OpenAI(
+    base_url="${currentUrl}/v1",
+    api_key="Dein_Token" # Optional, falls in Mission Control konfiguriert
+)
+
+response = client.chat.completions.create(
+    model="coder", # Alias aus deinem Cookbook
+    messages=[{"role": "user", "content": "Hallo Modell!"}]
+)
+
+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>
+    </div>
+  `;
+}
+
+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 };