export type GuideGroup = {
  label: string
  tutorials: [string, string][]
}

export const GUIDE_GROUPS: GuideGroup[] = [
  {
    label: 'Einstieg',
    tutorials: [
      ["Dein erster Workflow — in 3 Schritten", `
        <ol class="tut-steps">
          <li><b>Modell holen:</b> Tab <b>Cookbook</b> → Anwendungsfall wählen (z.B. „Coden & Programmieren") →
            <b>Komplettes Setup installieren</b>. Der Download läuft im Tab <b>Aktivität</b> — einfach warten bis der Job grün wird.</li>
          <li><b>Verbinden:</b> Tab <b>Verbinden</b> → Tool wählen → Config-Snippet kopieren und einfügen.
            <b>Verbindung testen</b> bestätigt, dass alles klappt.</li>
          <li><b>Arbeiten:</b> Im Tool das gewünschte Modell auswählen und loslegen.
            Das Modell wird <b>automatisch geladen</b> — du musst nichts manuell starten.</li>
        </ol>
        <p style="margin-top:10px"><b>Nicht sicher welches Tool du nehmen sollst?</b>
        Lies den Abschnitt „Welches Tool ist das richtige für mich?" weiter unten.</p>`],

      ["Kontext — das Kurzzeitgedächtnis des Modells", `
        <p>Der Kontext ist wie ein Blatt Papier: alles was du mit dem Modell besprochen hast,
        steht darauf. Wird es voll, fallen die ältesten Nachrichten raus.</p>
        <p><b>Was du meist nicht tun musst:</b> Tools wie OpenCode, Cline und OpenWebUI
        verwalten das Kontextfenster automatisch. Ein neuer Chat = leeres Blatt.</p>
        <p><b>Wenn der Kontext volläuft</b> (Fehler „context length exceeded" oder das Modell vergisst den Anfang):</p>
        <ol class="tut-steps">
          <li><b>Neuen Chat starten</b> — der einfachste Reset.</li>
          <li>Vorher: <em>„Fasse kurz zusammen was wir bisher erreicht haben"</em> — dann diesen Stand in den neuen Chat einfügen.</li>
          <li><b>Kontext vergrößern:</b> Tab <b>Modelle</b> → <b>Konfigurieren</b> → Empfehlung für deine Hardware übernehmen.</li>
        </ol>
        <p><b>Wichtig:</b> „Grafikspeicher leeren" (Tab <b>Server</b>) ist etwas anderes —
        das wirft das <em>Modell</em> aus dem Speicher, nicht den Gesprächsverlauf.</p>`],

      ["Auto-Swap — Modelle laden sich von selbst", `
        <p>llama-swap lädt automatisch das Modell, das gerade angefragt wird —
        und entlädt es nach einer Leerlaufzeit wieder. <b>Es läuft immer nur eines gleichzeitig.</b></p>
        <p>Du richtest beliebig viele Modelle ein und wählst im Tool das passende.
        Das Laden und Entladen passiert unsichtbar im Hintergrund.</p>
        <p><b>Warum dauert die erste Antwort manchmal 5–15 Sekunden?</b><br>
        Das Modell wird gerade geladen — danach geht es normal weiter.
        Die Topbar zeigt <em>„[Modellname] lädt…"</em> während das passiert.</p>
        <p><b>Scout immer sofort verfügbar halten:</b> Tab <b>Modelle</b> → Konfigurieren →
        <em>Immer aktiv halten</em> aktivieren (TTL = ∞). Das Modell bleibt dann dauerhaft im RAM
        und antwortet ohne Wartezeit — ideal für den kleinen, schnellen Allrounder.</p>`],
    ],
  },

  {
    label: 'Tools einrichten',
    tutorials: [
      ["Welches Tool ist das richtige für mich?", `
        <p><b>Chat — ich will einfach reden, schreiben, fragen:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">Einfachster Einstieg</div>
            <div class="tut-cell-bd">→ <b>Jan AI</b> — Desktop-App, Doppelklick-Installer, sofort loslegen.
            Vertraut wie ChatGPT, läuft komplett lokal. Kein Admin-Panel, kein Docker.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Teams / Power-User</div>
            <div class="tut-cell-bd">→ <b>OpenWebUI</b> — viele Features (RAG, Bilder, Plugins, Mehrbenutzer).
            Mehr Setup-Aufwand, aber der mächtigste Chat-Client.</div>
          </div>
        </div>
        <p style="margin-top:12px"><b>Coding — ich will KI beim Programmieren:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">Simpler Einstieg in VS Code</div>
            <div class="tut-cell-bd">→ <b>Continue</b> — Chat + Autocomplete direkt im Editor, kein Agent-Overhead.
            Macht keinen Schritt ohne dich.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Voller Coding-Agent im Editor</div>
            <div class="tut-cell-bd">→ <b>Cline</b> — liest Dateien, schreibt Code, fragt vor jeder Änderung.
            VS Code, JetBrains, Zed u.a.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Agent-IDE mit VS Code-Feeling</div>
            <div class="tut-cell-bd">→ <b>Antigravity</b> — Googles agentic IDE (VS Code-Fork), kostenlos.
            Multi-Agent, planen + coden + testen in einem.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Autonomer Terminal-Agent</div>
            <div class="tut-cell-bd">→ <b>OpenCode</b> — mächtigster lokaler Agent, lebt im Terminal.
            Ideal für „bau mir Feature X komplett fertig".</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Schneller Editor, minimalistisch</div>
            <div class="tut-cell-bd">→ <b>Zed</b> — nativer Editor (Rust), eingebautes KI-Panel.
            Für Leute die Performance über Features stellen.</div>
          </div>
        </div>
        <p style="margin-top:10px"><b>Faustregel:</b> Fang mit <b>Jan AI</b> zum Chatten an.
        Für Coding: <b>Continue</b> als sanfter Einstieg oder gleich <b>Cline/Antigravity</b>
        wenn du bereit bist, dem Agenten mehr Kontrolle zu geben.</p>`],

      ["OpenCode verbinden und die ersten Schritte", `
        <p>OpenCode ist installiert? Dann in vier Schritten verbinden:</p>
        <ol class="tut-steps">
          <li><b>Config-Snippet holen:</b> Tab <b>Verbinden</b> → <em>OpenCode</em> auswählen →
            Snippet kopieren und in <code>~/.config/opencode/opencode.json</code> einfügen.</li>
          <li><b>OpenCode starten:</b> Terminal öffnen, <code>opencode</code> eintippen —
            immer im Projektordner starten, damit der Agent deine Dateien sieht.</li>
          <li><b>Modell wählen:</b> <code>/models</code> eintippen → <em>llama-swap/coder</em> auswählen.</li>
          <li><b>Erste Aufgabe geben</b> — z.B.:
            <em>„Lies die Datei README.md und erkläre mir kurz was dieses Projekt macht."</em></li>
        </ol>
        <p><b>Die wichtigsten Slash-Commands:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd"><code>/model</code></div>
            <div class="tut-cell-bd">Modell wechseln — z.B. mitten im Gespräch auf <em>scout</em> für kurze Fragen</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd"><code>/compact</code> · <code>/summarize</code></div>
            <div class="tut-cell-bd">Kontext komprimieren wenn er voll wird — fasst die Session zusammen und setzt fort</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd"><code>/clear</code> · <code>/new</code></div>
            <div class="tut-cell-bd">Neue Session starten — komplett leerer Kontext</div>
          </div>
        </div>
        <p>Bevor OpenCode eine Datei ändert, fragt es nach — mit <b>y</b> bestätigen oder <b>n</b> ablehnen.</p>
        <p><b>Terminal oder Desktop-App?</b> Die Anleitung gilt für beide —
        der Config-Snippet landet in derselben Datei (<code>~/.config/opencode/opencode.json</code>),
        und alle Slash-Commands funktionieren in beiden Versionen gleich.
        Unterschied: Im Terminal startest du mit <code>cd ~/mein-projekt && opencode</code>;
        in der Desktop-App öffnest du einfach die App und wählst den Projektordner über die GUI.</p>
        <p><b>Multi-Agenten (2026):</b> Du kannst in OpenCode mehrere spezialisierte Agenten definieren
        — z.B. einen <em>review</em>-Agent und einen <em>coder</em>-Agent.
        Mit <b>Tab</b> wechselst du zwischen primären Agenten; mit <b>@review</b> rufst du einen Subagenten direkt im Chat auf.
        Agenten werden als Markdown-Dateien angelegt: eine Datei <code>review.md</code> im
        <code>~/.config/opencode/</code>-Ordner erstellt automatisch den Agenten <em>review</em>.</p>
        <p class="tut-sources">Weitere Infos: <a href="https://opencode.ai/docs" target="_blank" rel="noopener">opencode.ai/docs</a> · <a href="https://opencode.ai/docs/agents/" target="_blank" rel="noopener">Agenten-Docs</a></p>`],

      ["Cline verbinden und nutzen", `
        <p>Cline (v3.81, Stand Juni 2026) läuft in: <b>VS Code, JetBrains, Cursor, Windsurf, Zed, Neovim</b>
        und als CLI auf macOS/Linux. Verbinden funktioniert überall gleich:</p>
        <ol class="tut-steps">
          <li>Das Cline-Panel öffnen (Roboter-Icon in der Seitenleiste).</li>
          <li>Provider <b>„OpenAI Compatible"</b> wählen.</li>
          <li>Tab <b>Verbinden</b> → <em>Cline / Cursor</em> → Basis-URL und Modell-ID kopieren und eintragen.</li>
          <li>API-Key: irgendeinen beliebigen Text eingeben (z.B. <code>local</code>) — wird nicht geprüft.</li>
        </ol>
        <p><b>Plan-Modus vs. Act-Modus:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">Plan</div>
            <div class="tut-cell-bd">Cline liest und denkt nach — erklärt den Plan bevor es handelt.
            Billiger (weniger Tokens) und ideal für Anfänger.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Act</div>
            <div class="tut-cell-bd">Cline handelt sofort, fragt aber vor jeder Dateiänderung um Erlaubnis.
            Schneller für klare Aufgaben.</div>
          </div>
        </div>
        <p><b>Memory Bank (empfohlen):</b> Lege eine Datei <code>projectbrief.md</code> im Projektordner an —
        Cline liest sie zu Beginn jeder Aufgabe automatisch. Sie ist das Fundament: Projektziel, Tech-Stack,
        wichtigste Regeln. Ergänzend: <code>activeContext.md</code> für den aktuellen Fokus,
        <code>progress.md</code> für den Stand.</p>
        <p><b>.clinerules:</b> Für größere Projekte kannst du statt einer einzelnen Datei ein ganzes
        Verzeichnis <code>.clinerules/</code> anlegen — jede Datei darin gilt als separate Regel.
        Achtung: Jedes Zeichen in .clinerules verbraucht Kontext — kurze, präzise Regeln schlagen lange Listen.</p>
        <p><b>Ausgaben-Limit (seit April 2026):</b> In Settings → Spending Limits kannst du ein
        Tages- oder Monats-Budget setzen — verhindert dass ein laufender Agent unbemerkt viel Token verbraucht.</p>
        <p class="tut-sources">Weitere Infos: <a href="https://cline.bot" target="_blank" rel="noopener">cline.bot</a> · <a href="https://docs.cline.bot/best-practices/memory-bank" target="_blank" rel="noopener">Memory Bank Docs</a></p>`],

      ["Jan AI — einfachstes Chat-Interface", `
        <p><b>Jan AI</b> ist die einfachste Art, lokal mit KI zu chatten —
        Desktop-App, kein Terminal, kein Docker, kein Admin-Panel.</p>
        <ol class="tut-steps">
          <li><b>Jan AI installieren:</b> <a href="https://jan.ai" target="_blank" rel="noopener">jan.ai</a>
            → Download → Doppelklick-Installer (Windows/macOS/Linux).</li>
          <li><b>Remote-Modell hinzufügen:</b> In der linken Leiste auf das Hub-Icon →
            oben rechts <b>+ Remote-Modell</b>.</li>
          <li><b>Verbindung eintragen:</b> Tab <b>Verbinden</b> → <em>Jan AI</em> auswählen →
            Basis-URL und Modell-ID kopieren und in Jan einfügen.</li>
          <li>API-Key: irgendeinen Text (z.B. <code>local</code>). Speichern.</li>
        </ol>
        <p>Danach erscheint das Modell in der Modell-Liste — auswählen und loslegen.</p>
        <p><b>Gut für:</b> Chatten, Texte schreiben, übersetzen, Fragen stellen —
        genauso wie ChatGPT, aber 100% lokal und privat. Bilder mitschicken klappt auch
        sobald ein Vision-Modell eingetragen ist.</p>
        <p class="tut-sources">Download &amp; Docs: <a href="https://jan.ai" target="_blank" rel="noopener">jan.ai</a> · <a href="https://www.jan.ai/docs" target="_blank" rel="noopener">jan.ai/docs</a></p>`],

      ["Continue — Coding-Hilfe in VS Code ohne Agent-Overhead", `
        <p><b>Continue</b> ist die einfachste Coding-Erweiterung für VS Code und JetBrains —
        kein autonomer Agent, sondern ein KI-Assistent der nur auf Anfrage handelt.</p>
        <ol class="tut-steps">
          <li><b>Extension installieren:</b> VS Code → Extensions → „Continue" suchen → Installieren.<br>
            Oder: <a href="https://continue.dev" target="_blank" rel="noopener">continue.dev</a></li>
          <li><b>Config holen:</b> Tab <b>Verbinden</b> → <em>Continue</em> auswählen →
            Snippet kopieren und in <code>~/.continue/config.json</code> einfügen.</li>
          <li>Continue in VS Code neu starten → im Chat-Panel Modell wählen → loslegen.</li>
        </ol>
        <p><b>Was Continue kann:</b></p>
        <ul class="tut-steps" style="list-style:disc">
          <li><b>Chat:</b> Frage direkt im Editor — markiere Code und drücke <code>Strg+L</code></li>
          <li><b>Autocomplete:</b> Ergänzt Code während du tippst (wie Copilot)</li>
          <li><b>Inline-Edit:</b> Markieren → <code>Strg+I</code> → „Refactore das zu TypeScript"</li>
        </ul>
        <p><b>Unterschied zu Cline:</b> Continue macht nichts von alleine — du steuerst jeden Schritt.
        Ideal als erster Einstieg bevor man mit vollen Agenten arbeitet.</p>
        <p class="tut-sources">Weitere Infos: <a href="https://continue.dev" target="_blank" rel="noopener">continue.dev</a>
        — Hinweis: 2026 von Cursor akquiriert, weiterhin kostenlos &amp; open source.</p>`],

      ["Antigravity — Googles agentic IDE", `
        <p><b>Antigravity</b> ist Googles agent-first IDE — ein Fork von VS Code, der Planung,
        Coding, Testing und Deployment in einem Workflow zusammenführt. Kostenlos für Einzelpersonen.</p>
        <ol class="tut-steps">
          <li><b>Antigravity installieren:</b>
            <a href="https://antigravityide.net" target="_blank" rel="noopener">antigravityide.net</a>
            → Download → läuft wie VS Code.</li>
          <li><b>Eigenen Endpoint einrichten:</b> Settings → Models → <b>Custom Endpoint</b> → + hinzufügen.</li>
          <li><b>Verbindung eintragen:</b> Tab <b>Verbinden</b> → <em>Antigravity</em> auswählen →
            Basis-URL und Modell-ID kopieren und eintragen.</li>
          <li>API-Key: beliebiger Text (z.B. <code>local</code>). Danach das Modell aus der Liste wählen.</li>
        </ol>
        <p><b>Was Antigravity besonders macht:</b></p>
        <ul class="tut-steps" style="list-style:disc">
          <li><b>Agent-First:</b> Statt Code-Completion steht der Agent im Mittelpunkt —
            du beschreibst, er plant und setzt um</li>
          <li><b>Multi-Agent:</b> Mehrere Agenten arbeiten parallel an verschiedenen Teilen</li>
          <li><b>Manager-Oberfläche:</b> Übersicht über alle laufenden Agenten-Sessions</li>
          <li><b>VS Code-kompatibel:</b> Extensions und Keybindings funktionieren wie gewohnt</li>
        </ul>
        <p><b>Wann Antigravity statt OpenCode?</b> Wenn du lieber eine grafische IDE als ein Terminal magst
        und trotzdem volle Agenten-Kontrolle willst. OpenCode ist mächtiger im Terminal-Flow;
        Antigravity ist komfortabler für Umsteiger aus VS Code.</p>
        <p class="tut-sources">Weitere Infos: <a href="https://antigravityide.net" target="_blank" rel="noopener">antigravityide.net</a> ·
        <a href="https://developers.googleblog.com/build-with-google-antigravity-our-new-agentic-development-platform/" target="_blank" rel="noopener">Google Dev Blog</a></p>`],

      ["OpenWebUI — für Teams und Power-User", `
        <p>OpenWebUI ist der mächtigste lokale Chat-Client — aber auch der komplexeste.
        Empfohlen wenn du mehr als ein einfaches Chat-Interface brauchst.</p>
        <p><b>Was OpenWebUI besonders kann (gegenüber Jan AI):</b></p>
        <ul class="tut-steps" style="list-style:disc">
          <li>RAG: eigene Dokumente hochladen, KI liest und beantwortet Fragen dazu</li>
          <li>Mehrbenutzer: eigene Accounts für verschiedene Personen im Heimnetz</li>
          <li>Plugins und Agenten: erweiterbar mit Tools und Custom-Pipelines</li>
          <li>Bilder generieren (mit Stable Diffusion), Sprachausgabe, Web-Suche</li>
        </ul>
        <p><b>Verbinden</b> (braucht Docker oder eine lokale Installation):</p>
        <ol class="tut-steps">
          <li>OpenWebUI im Browser öffnen → <b>Admin Panel</b> → <b>Connections</b>.</li>
          <li><b>+ OpenAI-Verbindung</b> → Tab <b>Verbinden</b> → <em>OpenWebUI</em> → Basis-URL kopieren.</li>
          <li>API-Key: <code>dummy-key</code>. Speichern.</li>
        </ol>
        <p>Danach Modell auswählen und loslegen. Für einfaches Chatten: <b>Jan AI</b> ist einfacher.
        OpenWebUI lohnt sich ab dem Moment, wo du mehr als nur Chat willst.</p>
        <p class="tut-sources">Weitere Infos: <a href="https://openwebui.com" target="_blank" rel="noopener">openwebui.com</a></p>`],
    ],
  },

  {
    label: 'Agenten meistern',
    tutorials: [
      ["Was ein Agent tut — und was er nicht kann", `
        <p>Ein nacktes Modell antwortet auf Text — das war's.
        Ein <b>Agent</b> ist das Programm drumherum, das das Modell in eine <b>Handlungsschleife</b> bringt:</p>
        <p style="text-align:center;padding:8px 0;font-family:monospace;font-size:12.5px;color:var(--accent)">
          Planen → Werkzeug nutzen → Ergebnis prüfen → nächsten Schritt planen → …
        </p>
        <p>Konkret: Datei lesen → Code verstehen → Änderung schreiben → Test ausführen → Fehler beheben —
        ohne dass du jeden Schritt anstoßen musst.</p>
        <p><b>Was Agenten gut können:</b></p>
        <ul class="tut-steps" style="list-style:disc">
          <li>Features über mehrere Dateien implementieren</li>
          <li>Bugs finden und in ihrem Kontext beheben</li>
          <li>Code refactoren, Dokumentation schreiben, Tests ergänzen</li>
          <li>Recherchieren und das Ergebnis direkt umsetzen (mit MCP)</li>
          <li>Parallele Teilaufgaben an Subagenten delegieren (OpenCode 2026)</li>
        </ul>
        <p><b>Was Agenten schlecht können:</b></p>
        <ul class="tut-steps" style="list-style:disc">
          <li>Kreative Richtungsentscheidungen ohne klare Vorgabe treffen</li>
          <li>Sehr komplexe, undokumentierte Systeme ohne Kontext verstehen</li>
          <li>Fehler in externer Hardware oder fremden APIs beheben</li>
        </ul>
        <p><b>Faustregel:</b> Je klarer die Aufgabe, desto besser das Ergebnis. Unklarer Auftrag → unklares Ergebnis.</p>`],

      ["Einen Agenten richtig briefen", `
        <p>Der Unterschied zwischen „es passiert nichts Sinnvolles" und „es funktioniert auf Anhieb"
        ist meistens die Qualität des Auftrags.</p>
        <p><b>Schlecht → Gut:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd bad">„Mach meine App besser."</div>
            <div class="tut-cell-bd">→ <em>„Die Login-Seite in <code>src/pages/Login.tsx</code> zeigt
            bei falschem Passwort gar keinen Fehler an. Füge unter dem Passwortfeld eine rote Fehlermeldung
            ein wenn die API 401 zurückgibt."</em></div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd bad">„Erkläre mir Python."</div>
            <div class="tut-cell-bd">→ <em>„Ich bin Anfänger. Erkläre mir in 5 Schritten wie ich eine CSV-Datei
            in Python einlese und die Summe einer Spalte berechne — mit echtem Code-Beispiel."</em></div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd bad">„Mach das schneller."</div>
            <div class="tut-cell-bd">→ <em>„Die Funktion <code>loadUsers()</code> in <code>src/api/users.ts</code>
            braucht 3 Sekunden. Die Daten kommen vom Backend. Prüfe ob Caching helfen würde und schlage eine
            konkrete Lösung vor."</em></div>
          </div>
        </div>
        <p style="margin-top:12px"><b>Die 3 Zutaten für einen guten Auftrag:</b></p>
        <ol class="tut-steps">
          <li><b>WO:</b> Welche Datei / welcher Ordner / welches Feature</li>
          <li><b>WAS:</b> Was ist das genaue Problem oder Ziel</li>
          <li><b>WIE:</b> Welches Ergebnis erwartest du</li>
        </ol>
        <p><b>Trick:</b> Wenn du nicht sicher bist ob der Auftrag klar genug ist, frag den Agenten:
        <em>„Hast du alles was du brauchst, oder fehlt dir etwas?"</em></p>`],

      ["MCP — deinem Agenten echte Werkzeuge geben", `
        <p><b>MCP</b> (Model Context Protocol) ist ein einheitlicher „Stecker", über den ein Agent
        zusätzliche <b>Werkzeuge</b> bekommt. Ohne MCP kann er nur Text lesen und schreiben.
        Mit MCP kann er z.B.:</p>
        <ul class="tut-steps" style="list-style:disc">
          <li>Im Web suchen (Brave Search, Tavily)</li>
          <li>GitHub Issues lesen und kommentieren</li>
          <li>Deine Datenbank abfragen</li>
          <li>Screenshots machen, E-Mails lesen, Kalender verwalten</li>
        </ul>
        <p><b>Wie MCPs eingebunden werden</b> (Beispiel für OpenCode):</p>
        <p>In der Konfigurationsdatei (<code>~/.config/opencode/opencode.json</code>) einen
        <code>"mcp"</code>-Block hinzufügen:</p>
        <pre class="tut-code">{
  "mcp": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": { "BRAVE_API_KEY": "dein-key" }
    }
  }
}</pre>
        <p>Danach OpenCode neu starten — der Agent nutzt das Werkzeug automatisch wenn er es braucht.</p>
        <p><b>Empfohlene MCPs 2026 — nach Anwendungsfall:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">Web-Suche</div>
            <div class="tut-cell-bd"><b>brave-search</b> oder <b>tavily</b> — recherchieren, aktuelle Infos holen</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">GitHub</div>
            <div class="tut-cell-bd"><b>github</b> — meistinstallierter MCP überhaupt. Issues, PRs, Commits, Repos direkt im Chat verwalten</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Lokale Dateien</div>
            <div class="tut-cell-bd"><b>filesystem</b> — meistgenutzter MCP überhaupt. Sichere Dateizugriffe auf beliebige Ordner</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Browser</div>
            <div class="tut-cell-bd"><b>playwright</b> — Browser-Automatisierung und UI-Tests. Agent öffnet Seiten, klickt, prüft</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Gedächtnis</div>
            <div class="tut-cell-bd"><b>memory / mem0</b> — persistentes Gedächtnis über Sessions hinweg. Agent erinnert sich an deine Präferenzen und Projekt-Kontext auch in neuen Chats</div>
          </div>
        </div>
        <p style="margin-top:8px">Über <b>36.000 MCPs</b> sind mittlerweile verfügbar (Stand Juni 2026).
        Fang mit filesystem + github an — die decken 80% der täglichen Arbeit ab.</p>
        <p class="tut-sources"><b>Wo MCPs finden:</b>
          <a href="https://mcp.run" target="_blank" rel="noopener">mcp.run</a> ·
          <a href="https://smithery.ai" target="_blank" rel="noopener">smithery.ai</a> ·
          <a href="https://modelcontextprotocol.io/servers" target="_blank" rel="noopener">modelcontextprotocol.io/servers</a>
          — oder fragen: <em>„Welche MCPs gibt es für [dein Werkzeug]?"</em></p>
        <p><b>Merksatz:</b> Fehlt dem Agenten eine <em>Fähigkeit</em> → MCP.
        Soll er etwas nur <em>besser machen</em> → Skill (nächster Abschnitt).</p>`],

      ["Skills &amp; Rules — Agenten Gewohnheiten beibringen", `
        <p><b>Skills</b> (auch <em>Rules</em>, <em>AGENTS.md</em> oder <em>Instructions</em> genannt)
        sind kurze Texte, die dem Agenten beibringen wie er in deinem Projekt arbeiten soll —
        immer, ohne dass du es jedes Mal neu sagen musst.</p>
        <p><b>Beispiel</b> — eine einfache AGENTS.md:</p>
        <pre class="tut-code">Schreib alle Variablen in camelCase.
Kommentare immer auf Deutsch.
Tests immer mit describe/it-Blöcken (Jest).
Importiere nichts was nicht schon in package.json steht.
Bevor du Dateien änderst: erkläre kurz was du vorhast.</pre>
        <p>Der Agent liest das vor jeder Aufgabe und hält sich daran.</p>
        <p><b>Wo die Datei ablegen:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">OpenCode</div>
            <div class="tut-cell-bd"><code>AGENTS.md</code> im Projektordner (pro Projekt)<br>
              <code>~/.config/opencode/AGENTS.md</code> (global, gilt überall)</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Cline</div>
            <div class="tut-cell-bd"><code>.clinerules</code> im Projektordner<br>
              <code>~/.clinerules</code> (global)</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Zed</div>
            <div class="tut-cell-bd">Zed Settings → Assistant → System Prompt</div>
          </div>
        </div>
        <p style="margin-top:10px"><b>Fertige Skills finden:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd"><a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a></div>
            <div class="tut-cell-bd">Von Vercel gestartet (Jan 2026) — das npm für Agent-Skills. Funktioniert mit Claude Code, OpenCode, Cursor u.v.m. One-Command-Installer.
            <b>Hinweis:</b> Community-Inhalte ohne formale Prüfung — Skill vor dem Einsatz kurz lesen.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd"><a href="https://skillhub.ai" target="_blank" rel="noopener">SkillHub</a></div>
            <div class="tut-cell-bd">KI-bewertete Skills (S/A/B-Ranking nach Qualität, Klarheit, Wirkung). Kleinerer Katalog, höhere Signal-Qualität.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd"><a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a></div>
            <div class="tut-cell-bd">Vorgefertigte Rules für React, Vue, Python, Go etc. — direkt als .clinerules oder AGENTS.md nutzbar.</div>
          </div>
        </div>
        <p style="margin-top:8px"><b>Sicherheitshinweis:</b> Ein Snyk-Audit (2026) fand in 13,4% der Community-Skills
        kritische Probleme (Prompt Injection, exponierte Secrets). Regel: Skill-Datei kurz lesen bevor du sie einsetzt.</p>
        <p style="margin-top:8px">Oder einfach fragen: <em>„Schreib mir eine AGENTS.md für ein React + TypeScript Projekt mit Tailwind."</em></p>`],

      ["Die Persona — Rolle, Beziehung &amp; Onboarding", `
        <p>Eine Persona hat <b>zwei Dimensionen</b> — beide sind wichtig:</p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">Was der Agent tut</div>
            <div class="tut-cell-bd">Fokus, Fachgebiet, Grenzen — die klassische Rollenbeschreibung.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Wie er mit dir umgeht</div>
            <div class="tut-cell-bd">Ton, Proaktivität, Feedback-Stil — antwortet er kurz oder ausführlich?
            Hakt er nach oder liefert er einfach? Spricht er Fehler direkt an oder verpackt er sie?</div>
          </div>
        </div>
        <p style="margin-top:10px">Ein Agent der technisch gleich konfiguriert ist, verhält sich komplett anders
        wenn er weiß: <em>Du willst kurze Antworten ohne Erklärung.</em> Oder: <em>Du lernst noch —
        ermutige mich und erkläre immer warum.</em></p>

        <p><b>Das vollständige Persona-Template:</b></p>
        <pre class="tut-code">Du bist [Name], [Rolle].

Fokus: [Was du hauptsächlich tust]
Wie du kommunizierst: [Stil — direkt/erklärend/ermutigend, kurze oder ausführliche Antworten]
Wie du mit mir umgehst: [Proaktivität, Rückfragen, Feedback-Stil, Fehlerkultur]
Sprache: Immer auf Deutsch. Code-Kommentare auf Englisch.
Grenzen: [Was du nicht tust, was du nachfragst statt zu raten]</pre>

        <p><b>Beispiel 1 — Coding-Assistent (direkt, erfahren):</b></p>
        <pre class="tut-code">Du bist Alex, ein erfahrener Senior-Entwickler spezialisiert auf TypeScript und React.

Fokus: Code schreiben, reviewen, erklären — immer mit konkreten Beispielen.
Wie du kommunizierst: direkt, pragmatisch. Keine Erklärung wenn der Code für sich spricht.
Wie du mit mir umgehst: Du fragst nach bevor du loslegst wenn die Aufgabe unklar ist.
  Fehler sprichst du klar an — aber ohne Schuldzuweisungen. Du machst Gegenvorschläge
  wenn du eine bessere Lösung siehst, aber respektierst meine Entscheidung.
Sprache: Deutsch. Code-Kommentare auf Englisch.
Grenzen: Kein Code ohne Datei-Kontext. Keine neuen Dependencies ohne Rückfrage.</pre>

        <p><b>Beispiel 2 — Lernbegleiter (geduldig, ermutigend):</b></p>
        <pre class="tut-code">Du bist Sam, eine geduldige Lernbegleiterin für Programmier-Anfänger.

Fokus: Konzepte erklären, Fehler korrigieren, Schritt für Schritt führen.
Wie du kommunizierst: freundlich, mit Analogien aus dem Alltag. Fachbegriffe sofort erklären.
Wie du mit mir umgehst: Du lobst Fortschritte, auch kleine. Fehler sind Lernchancen —
  du zeigst was falsch war und warum, ohne zu urteilen. Du fragst ob ich es verstanden
  habe bevor du weitermachst.
Sprache: Immer auf Deutsch. Niemals Englisch ohne Übersetzung.</pre>

        <hr style="border:none;border-top:1px solid var(--line);margin:18px 0">
        <p><b>Der schnellste Weg: Onboarding-Interview</b></p>
        <p>Statt die Persona selbst auszufüllen — lass den Agenten <em>dich</em> befragen.
        Starte einen frischen Chat und gib ihm diesen Prompt:</p>
        <pre class="tut-code">Ich möchte dich in mein Projekt und meinen Arbeitsstil einarbeiten.
Führe mit mir ein kurzes Interview durch — stelle mir 6–8 Fragen,
eine nach der anderen — um zu verstehen:

1. Wer ich bin und wie ich am liebsten kommuniziere
2. Was unser Projekt ist und welches Ziel es hat
3. Was ich gut kann und wobei ich Unterstützung brauche
4. Meine Arbeitsgewohnheiten und Präferenzen
5. Was mir wichtig ist und was mich stört

Wenn du alle Antworten hast, erstelle daraus:
- Eine vollständige AGENTS.md als dauerhaftes Fundament
- Einen Satz der zusammenfasst wer ich für dich bin</pre>
        <p>Das Ergebnis: eine maßgeschneiderte Persona die <em>wirklich</em> zu dir passt —
        weil du sie nicht selbst formulieren musstest, sondern im Gespräch entstanden ist.</p>

        <p><b>Wo eintragen:</b></p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">Für ein Projekt</div>
            <div class="tut-cell-bd">Erste Zeilen der <code>AGENTS.md</code> im Projektordner.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Global (überall)</div>
            <div class="tut-cell-bd"><code>~/.config/opencode/AGENTS.md</code> (OpenCode) ·
              Settings → System Prompt (OpenWebUI)</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">Nur dieser Chat</div>
            <div class="tut-cell-bd"><em>„Ab jetzt bist du …"</em> direkt eintippen.</div>
          </div>
        </div>
        <p class="tut-sources" style="margin-top:10px">Fertige Personas: <a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a> · <a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a></p>`],

      ["AGENTS.MD &amp; SAVEPOINT.MD — Gedächtnis für den Agenten", `
        <p>Jedes Mal wenn du einen neuen Chat startest, weiß der Agent <b>nichts</b> über dein Projekt.
        Diese zwei Dateien lösen das Problem.</p>
        <p><b>AGENTS.md ist 2026 der plattformübergreifende Standard</b> — nativ gelesen von:
        OpenCode, Claude Code, Codex CLI, Cursor, Aider, Devin, GitHub Copilot, Gemini CLI, Windsurf, Amazon Q.
        Eine Datei, alle Tools.</p>
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">AGENTS.md</div>
            <div class="tut-cell-bd"><b>Was das Projekt ist</b> — Tech-Stack, Konventionen,
            Struktur. Wird vor jeder Aufgabe gelesen. Einmal schreiben, immer wirksam.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">SAVEPOINT.md</div>
            <div class="tut-cell-bd"><b>Wo wir gerade stehen</b> — aktueller Stand, offene Punkte,
            nächste Schritte. Wird am Ende einer Session aktualisiert und zu Beginn der nächsten gelesen.</div>
          </div>
        </div>

        <p style="margin-top:14px"><b>AGENTS.MD — Vorlage:</b></p>
        <pre class="tut-code"># Projekt: [Name]

## Persona
Du bist [Name], [Rolle]. [Stil, Sprache, Grenzen]

## Tech-Stack
- Frontend: [z.B. React 18, TypeScript, Tailwind CSS]
- Backend:  [z.B. FastAPI, Python 3.12]
- Datenbank:[z.B. PostgreSQL via Prisma]

## Konventionen
- Variablen:  camelCase (JS) / snake_case (Python)
- Kommentare: auf Deutsch
- Commits:    konventionell (feat/fix/chore/docs)
- Tests:      immer mit describe/it-Blöcken

## Projektstruktur
src/
  components/  → UI-Komponenten (eine Datei = eine Komponente)
  pages/       → Seiten / Routes
  api/         → Backend-Calls und Typen

## Regeln
- Vor jeder Dateiänderung kurz erklären was geplant ist
- Keine neuen Dependencies ohne Rückfrage hinzufügen
- Bei Unklarheiten fragen, nicht raten

<!-- Ziel: 200–500 Zeilen. AGENTS.md wird in jeden Kontext geladen —
     kürzer = mehr Platz für Code und Gespräch. --></pre>
        <p style="color:var(--mut);font-size:12px;margin:4px 0 8px">
          <b>Größe:</b> 200–500 Zeilen sind der empfohlene Sweet Spot (Stand 2026).
          AGENTS.md wird in jeden Kontext geladen — je kürzer, desto mehr Platz bleibt für Code und Gespräch.</p>

        <p><b>SAVEPOINT.MD — Vorlage:</b></p>
        <pre class="tut-code"># Savepoint — [Datum / Uhrzeit]

## Aktueller Stand
[1–2 Sätze: wo steht das Projekt gerade?]

## Zuletzt erledigt
- [Aufgabe] ✓
- [Aufgabe] ✓

## In Arbeit / halbfertig
- [Was noch offen ist — welche Datei, welcher Schritt fehlt noch]

## Als nächstes
1. [Konkrete nächste Aufgabe]
2. [Übernächste Aufgabe]

## Wichtige Entscheidungen
- [Was entschieden wurde]: [Warum]

## Bekannte Probleme
- [Problem]: [Was bekannt ist, noch nicht gelöst]</pre>

        <p><b>Workflow:</b></p>
        <ol class="tut-steps">
          <li><b>Session starten:</b> <em>„Lies AGENTS.md und SAVEPOINT.md und mach weiter."</em></li>
          <li><b>Session beenden:</b> <em>„Aktualisiere SAVEPOINT.md mit dem aktuellen Stand."</em></li>
        </ol>
        <p><b>Tipp:</b> Lass den Agenten die SAVEPOINT.md selbst schreiben — er sieht was er getan hat.
        Du prüfst nur ob der Stand stimmt und ergänzt bei Bedarf.</p>
        <p class="tut-sources">Vorlagen &amp; Inspiration: <a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a> · <a href="https://opencode.ai/docs" target="_blank" rel="noopener">opencode.ai/docs</a></p>`],
    ],
  },

  {
    label: 'Wenn etwas nicht klappt',
    tutorials: [
      ["Häufige Probleme &amp; Lösungen", `
        <div class="tut-table">
          <div class="tut-row">
            <div class="tut-cell-hd">🔴 Engine offline, rotes Licht in der Topbar</div>
            <div class="tut-cell-bd">Tab <b>Server</b> → LLM-Engine-Karte → <b>Neustart</b>.
            Warte 10–15 Sekunden — danach sollte die Verbindung wieder grün sein.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">⏳ Modell lädt länger als 5 Minuten</div>
            <div class="tut-cell-bd">Tab <b>Aktivität</b> prüfen: läuft ein Download-Job?
            Der muss erst abgeschlossen sein bevor das Modell ladbar ist.
            Bei Fehler → Job-Zeile aufklappen, Log lesen.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">💬 „context length exceeded" Fehler im Tool</div>
            <div class="tut-cell-bd">Neuen Chat starten. Vorher: <em>„Fasse kurz zusammen was wir
            erreicht haben"</em> eingeben und diesen Text in den neuen Chat mitnehmen.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">🌐 Modell antwortet immer auf Englisch</div>
            <div class="tut-cell-bd">Am Anfang der Unterhaltung schreiben: <em>„Antworte immer auf Deutsch."</em>
            Für dauerhaft: eine <code>AGENTS.md</code> / <code>.clinerules</code> mit dieser Anweisung anlegen
            (siehe Abschnitt Skills & Rules).</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">🔌 Tool findet keine Modelle / Verbindung schlägt fehl</div>
            <div class="tut-cell-bd">Tab <b>Verbinden</b> → <b>Verbindung testen</b>. Wenn Fehler:
            läuft llama-swap? (Tab Server). URL korrekt? Muss <code>http://</code> (nicht https) sein,
            Port <b>8080</b>. Über Proxy? → LAN-IP direkt nutzen: <code>http://192.168.178.151:8080/v1</code></div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">⬇ Download schlägt fehl / bricht ab</div>
            <div class="tut-cell-bd">Tab <b>Aktivität</b> → Job-Zeile aufklappen → Log lesen.
            Häufigste Ursache: HuggingFace braucht einen Token für dieses Modell (gated model).
            → Einstellungen (Zahnrad-Icon oben) → <b>HuggingFace-Token</b> eintragen.</div>
          </div>
          <div class="tut-row">
            <div class="tut-cell-hd">🔄 Seite lädt / Dashboard hängt komplett</div>
            <div class="tut-cell-bd">Strg+Shift+R (Hard Reload). Wenn das nicht hilft:
            Tab <b>Server</b> → Mission Control → <b>Neu starten</b>.</div>
          </div>
        </div>`],
    ],
  },
]

export const CONCEPTS: [string, string][] = [
  ["LLM / Modell", "Die KI selbst — versteht und schreibt Text (wie ChatGPT, nur lokal auf deinem PC). Ein Modell ist eine konkrete Datei, oft auf etwas spezialisiert (Code, Bilder, Chat)."],
  ["GGUF", "Das lokal lauffähige Dateiformat. llama-swap lädt nur GGUF — Repos ohne GGUF kann die Engine 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 bewährte Sweetspot. Für Coding/Reasoning: Q8_0 (nahezu verlustfrei). Wenn Q4_K_M 1 GB zu groß ist: IQ4_XS als Alternative (ähnliche Qualität, etwas kleiner)."],
  ["Kontextfenster", "Das Kurzzeitgedächtnis: wie viel Text sich das Modell gleichzeitig merken kann. Größer = mehr Überblick, mehr Speicher, etwas langsamer."],
  ["Token", "Die kleinste Einheit die ein Modell verarbeitet — meist 3–4 Zeichen oder ein kurzes Wort. 1 000 Tokens ≈ 750 Wörter. Kontextfenster, Geschwindigkeit und Kosten werden in Tokens gemessen."],
  ["Auto-Swap", "llama-swap lädt/entlädt Modelle automatisch — immer nur eins gleichzeitig. Du managst nichts."],
  ["TTL (Time to Live)", "Wie lange ein Modell nach der letzten Anfrage im RAM bleibt bevor es entladen wird. Standard: 5 Minuten. ∞ = bleibt dauerhaft geladen (sinnvoll für den Scout)."],
  ["Agent", "Ein Programm (OpenCode, Cline, Continue), das das Modell in einer Handlungsschleife laufen lässt — Dateien lesen/ändern, Befehle ausführen, planen, bis die Aufgabe erledigt ist."],
  ["MCP", "Model Context Protocol — der Stecker, über den ein Agent zusätzliche Werkzeuge bekommt (Web, Datenbank, GitHub …). MCP = neue Fähigkeiten."],
  ["Skills / Rules", "Kurze Textdatei (AGENTS.md, .clinerules …) mit Anweisungen wie der Agent in deinem Projekt arbeiten soll — einmal geschrieben, immer befolgt. Seit 2026 plattformübergreifender Standard: AGENTS.md wird von über 10 Tools nativ gelesen."],
  ["Memory Bank", "Clines Konzept für dauerhaften Projekt-Kontext: projectbrief.md (Ziel & Scope), activeContext.md (aktueller Fokus), progress.md (Stand). Wird zu Beginn jeder Aufgabe automatisch gelesen — ähnlich wie AGENTS.md, aber aufgeteilt nach Zweck."],
  ["System-Prompt", "Eine unsichtbare Anweisung die vor deiner Nachricht steht und das Verhalten des Modells grundlegend prägt (Sprache, Ton, Rolle). Skills nutzen oft den System-Prompt."],
  ["Vision", "Modelle mit Vision-Fähigkeit können Bilder verstehen — Screenshots, Diagramme, Fehlerfotos. Erkennbar am mmproj-Projektor der mitgeladen wird."],
]
