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

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

import { $, esc } 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)`;

  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>
          ${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>
    </div>`;
}

function mount() { render(); }

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