mission-control/static/js/panels/guides.js

// guides.js — Integrations-Anleitungen (v3): Copy-Paste-Configs für externe Tools.

import { $ } from "../core/ui.js";

// 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 = $(".view[data-view='guides']");
  if (!c) return;
  const url = apiBase();
  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>

    <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>
          <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</summary>
        <div class="acc-body">
          <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>
        <div class="acc-body">
          <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="${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)</code></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>
          <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>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>
    </div>`;
}

function mount() { render(); }

export default { id: "guides", mount };