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

// guides.js — Anfänger-Guide (v6): praktische Tutorials/Workflows + kompakte Konzepte.

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

const TUTORIALS = [
  ["Dein erster Workflow — in 3 Schritten", `
    <ol class="tut-steps">
      <li><b>Modell holen:</b> Tab <b>Cookbook</b> → wähle deinen Anwendungsfall (z.B. „Coden") →
        <b>Komplettes Setup installieren</b>. Der Download läuft im Tab <b>Aktivität</b>.</li>
      <li><b>Verbinden:</b> Tab <b>Verbinden</b> → Basis-URL kopieren → in deinem Tool (z.B. OpenCode)
        als „OpenAI-kompatibel" einfügen. <b>Verbindung testen</b> bestätigt, dass es läuft.</li>
      <li><b>Arbeiten:</b> Im Tool das Modell (z.B. <code>coder</code>) wählen und loslegen. Das passende
        Modell wird <b>automatisch geladen</b> — du musst nichts starten.</li>
    </ol>`],
  ["Wie leere ich den Kontext? Machen die Tools das selbst?", `
    <p><b>Kurz: meistens ja, automatisch.</b> Der Kontext (das „Gedächtnis") gilt pro Unterhaltung.
    Startest du im Tool einen <b>neuen Chat / eine neue Session</b>, ist der Kontext wieder leer —
    das Tool verwaltet das Fenster für dich.</p>
    <p>Du musst nur selten eingreifen: wird ein Gespräch sehr lang, fang einen neuen an. <b>Wichtig:</b>
    „Grafikspeicher leeren" (Tab Server) ist etwas anderes — das wirft das <i>Modell</i> aus dem Speicher,
    nicht den Gesprächsverlauf.</p>`],
  ["Brauche ich überhaupt einen Agenten?", `
    <p>Kommt drauf an, was du willst:</p>
    <ul class="tut-steps" style="list-style:disc">
      <li><b>Nur chatten / Fragen stellen:</b> Nein — eine Chat-Oberfläche wie <b>OpenWebUI</b> reicht.</li>
      <li><b>Coden, wo die KI selbst Dateien liest/ändert und Befehle ausführt:</b> Ja — dafür gibt es
        <b>Agenten</b> wie OpenCode oder Cline.</li>
    </ul>
    <p>Das Gute: Diese Agenten <b>laufen lokal auf deinem PC</b> und reden mit deinem lokalen Modell.
    Du brauchst <b>keinen</b> Cloud-Agenten — die „empfohlenen Tools" SIND die Agenten.</p>`],
  ["Auto-Swap — wie das Laden funktioniert", `
    <p>llama-swap lädt automatisch das Modell, das gerade angefragt wird, und entlädt es nach einer
    Leerlaufzeit wieder (oder wenn du ein anderes anfragst). <b>Es läuft immer nur eines gleichzeitig.</b></p>
    <p>Heißt für dich: Du richtest beliebig viele Modelle ein und wählst im Tool einfach das passende —
    das Laden/Entladen passiert im Hintergrund, ohne dass du etwas tun musst.</p>`],
  ["Die empfohlenen Tools optimal nutzen", `
    <ul class="tut-steps" style="list-style:disc">
      <li><b>OpenCode:</b> Autonomes Coden im Terminal/Editor — ideal für „bau mir Feature X".</li>
      <li><b>Cline:</b> Dasselbe als VS-Code-Erweiterung, mit Bestätigung vor jeder Aktion.</li>
      <li><b>OpenWebUI:</b> Klassische Chat-Oberfläche für Fragen/Texte.</li>
    </ul>
    <p><b>Tipp:</b> starkes Modell (<code>coder</code>) für schwere Aufgaben, schnelles
    (<code>coder-fast</code>) für simple — du wählst es einfach im Tool aus.</p>`],
];

const CONCEPTS = [
  ["LLM / Modell", "Die KI selbst — versteht und schreibt Text (wie ChatGPT, nur lokal auf deinem PC). Ein Modell ist eine konkrete Datei davon, oft auf etwas spezialisiert (Code, Bilder, Chat)."],
  ["GGUF", "Das lokal lauffähige Dateiformat. Unsere Engine lädt nur GGUF — Repos ohne GGUF kann sie nicht nutzen."],
  ["Quantisierung (Q4_K_M)", "Verkleinert ein Modell (16-Bit → 4-Bit), damit es in den Speicher passt — bei kaum Qualitätsverlust. Q4_K_M ist der beliebte Sweetspot."],
  ["Kontextfenster", "Das Kurzzeitgedächtnis: wie viel Text sich das Modell gleichzeitig merkt. Größer = mehr Überblick, mehr Speicher, etwas langsamer."],
  ["Auto-Swap", "llama-swap lädt/entlädt Modelle automatisch — immer nur eins gleichzeitig. Du managst nichts."],
  ["Agent", "Ein Programm (OpenCode, Cline), das die KI selbstständig Aufgaben erledigen lässt: Dateien lesen/schreiben, Befehle ausführen, planen."],
  ["MCP", "Model Context Protocol — gibt einem Agenten zusätzliche Werkzeuge (Web durchsuchen, Dateien, Tools). Macht aus dem Textmodell einen echten Helfer."],
  ["Skills", "Vorgefertigte Fähigkeiten/Anleitungen, die ein Agent für wiederkehrende Aufgaben nutzt."],
];

function mount() {
  const c = $(".view[data-view='guides']"); if (!c) return;
  c.innerHTML = `
    <div class="pagehead"><div>
      <h1>Guide für Einsteiger</h1>
      <div class="sub">Praktische Workflows + die Local-LLM-Welt in Klartext — ohne Vorwissen.</div></div></div>

    <div class="card-h"><h3>Tutorials &amp; Workflows</h3></div>
    <div class="card" style="padding:0;overflow:hidden">
      ${TUTORIALS.map(([t, b], i) => `
        <details class="guide-acc"${i === 0 ? " open" : ""}><summary>${t}</summary>
          <div class="acc-body">${b}</div></details>`).join("")}
    </div>

    <div class="card-h" style="margin-top:8px"><h3>Konzepte kurz erklärt</h3></div>
    <div class="concept-grid">
      ${CONCEPTS.map(([term, text]) => `<div class="concept"><h4>${term}</h4><p>${text}</p></div>`).join("")}
    </div>`;
}

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