feat(guides): Guide-Tab komplett neu — 4 Gruppen, 12 Tutorials

Vollständige Überarbeitung des Guide-Tabs:

Struktur: Statt 8 gleichwertiger Accordions jetzt 4 klar getrennte
Gruppen (EINSTIEG / TOOLS EINRICHTEN / AGENTEN MEISTERN / WENN ETWAS
NICHT KLAPPT) — jede als eigene Card mit farbigem Teal-Label.
Anfänger sehen sofort die logische Reihenfolge.

Neue Tutorials (war 8, jetzt 12):
- "Welches Tool für mich?" — Entscheidungsbaum (OpenWebUI/Cline/OpenCode/Zed)
- "OpenCode verbinden & erste Schritte" — Config + Befehle
- "Cline in VS Code verbinden" — Plan- vs. Act-Modus erklärt
- "OpenWebUI verbinden" — für Nutzer ohne Programmierkenntnisse
- "Einen Agenten richtig briefen" — Schlecht→Gut-Beispiele
- "MCP" — überarbeitet mit konkretem Config-Beispiel und Empfehlungen
- "Skills & Rules" — AGENTS.md / .clinerules mit echten Pfaden und Quellen
- "Häufige Probleme & Lösungen" — Troubleshooting-Tabelle (7 Fälle)

Zusammengeführt: Kontext-Tutorials 2+3 (waren doppelt) → ein Tutorial.

Neue CSS-Komponenten: .tut-table/.tut-row für Vergleichstabellen,
.tut-code für Code-Blöcke, .bad für durchgestrichene Negativbeispiele.
Neues main.css von Vite extrahiert und in index.html eingebunden.

Konzepte erweitert: Token, TTL, System-Prompt, Vision ergänzt (war 9, jetzt 12).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/panels/GuidesPanel.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
-  import { TUTORIALS, CONCEPTS } from './guides-data.js'
+  import { GUIDE_GROUPS, CONCEPTS } from './guides-data.js'
 </script>
 
 <div class="pagehead">
   <div>
-    <h1>Guide für Einsteiger</h1>
+    <h1>Guide</h1>
-    <div class="sub">Praktische Workflows + die Local-LLM-Welt in Klartext — ohne Vorwissen.</div>
+    <div class="sub">Schritt für Schritt erklärt — von der ersten Einrichtung bis zu echten Agenten-Workflows.</div>
   </div>
 </div>
 
-<div class="card-h"><h3>Tutorials &amp; Workflows</h3></div>
+{#each GUIDE_GROUPS as group, gi}
-<div class="card" style="padding:0;overflow:hidden">
+  <div class="card guide-card">
-  {#each TUTORIALS as [title, body], i}
+    <div class="guide-group-hd">{group.label}</div>
-    <details class="guide-acc" open={i === 0}>
+    {#each group.tutorials as [title, body], i}
+      <details class="guide-acc" open={gi === 0 && i === 0}>
         <summary>{title}</summary>
         <div class="acc-body">{@html body}</div>
       </details>
     {/each}
   </div>
+{/each}
 
-<div class="card-h" style="margin-top:8px"><h3>Konzepte kurz erklärt</h3></div>
+<div class="card-h" style="margin-top:8px"><h3>Begriffe kurz erklärt</h3></div>
 <div class="concept-grid">
   {#each CONCEPTS as [term, text]}
     <div class="concept">
@@ -28,3 +30,72 @@
     </div>
   {/each}
 </div>
+
+<style>
+  .guide-card {
+    padding: 0;
+    overflow: hidden;
+    margin-bottom: 8px;
+  }
+
+  .guide-group-hd {
+    padding: 9px 18px 7px;
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    color: var(--accent);
+    background: rgba(45, 212, 191, 0.06);
+    border-bottom: 1px solid var(--line);
+  }
+
+  /* Comparison / info tables inside acc-body */
+  :global(.tut-table) {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    overflow: hidden;
+    margin-top: 8px;
+    font-size: 12.5px;
+  }
+  :global(.tut-row) {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    border-bottom: 1px solid var(--line);
+  }
+  :global(.tut-row:last-child) { border-bottom: none; }
+  :global(.tut-cell-hd) {
+    padding: 10px 14px;
+    font-weight: 500;
+    border-right: 1px solid var(--line);
+    background: rgba(255,255,255,.025);
+    line-height: 1.5;
+  }
+  :global(.tut-cell-hd.bad) {
+    color: var(--mut);
+    text-decoration: line-through;
+    font-style: italic;
+  }
+  :global(.tut-cell-bd) {
+    padding: 10px 14px;
+    line-height: 1.6;
+    color: var(--fg);
+  }
+
+  /* Code blocks inside tutorials */
+  :global(.tut-code) {
+    display: block;
+    background: var(--bg, #0d0d0d);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 12px 14px;
+    font-family: monospace;
+    font-size: 11.5px;
+    line-height: 1.65;
+    white-space: pre;
+    overflow-x: auto;
+    margin: 10px 0;
+    color: var(--fg);
+  }
+</style>

frontend/src/panels/guides-data.ts

@@ -1,86 +1,324 @@
-export const TUTORIALS: [string, string][] = [
+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> → wähle deinen Anwendungsfall (z.B. „Coden") →
+          <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>.</li>
+            <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> → Basis-URL kopieren → in deinem Tool (z.B. OpenCode)
+          <li><b>Verbinden:</b> Tab <b>Verbinden</b> → Tool wählen → Config-Snippet kopieren und einfügen.
-        als „OpenAI-kompatibel" einfügen. <b>Verbindung testen</b> bestätigt, dass es läuft.</li>
+            <b>Verbindung testen</b> bestätigt, dass alles klappt.</li>
-      <li><b>Arbeiten:</b> Im Tool das Modell (z.B. <code>coder</code>) wählen und loslegen. Das passende
+          <li><b>Arbeiten:</b> Im Tool das gewünschte Modell auswählen und loslegen.
-        Modell wird <b>automatisch geladen</b> — du musst nichts starten.</li>
+            Das Modell wird <b>automatisch geladen</b> — du musst nichts manuell starten.</li>
-    </ol>`],
+        </ol>
-  ["Wie leere ich den Kontext? Machen die Tools das selbst?", `
+        <p style="margin-top:10px"><b>Nicht sicher welches Tool du nehmen sollst?</b>
-    <p><b>Kurz: meistens ja, automatisch.</b> Der Kontext (das „Gedächtnis") gilt pro Unterhaltung.
+        Lies den Abschnitt „Welches Tool ist das richtige für mich?" weiter unten.</p>`],
-    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>
+      ["Kontext — das Kurzzeitgedächtnis des Modells", `
-    <p>Du musst nur selten eingreifen: wird ein Gespräch sehr lang, fang einen neuen an. <b>Wichtig:</b>
+        <p>Der Kontext ist wie ein Blatt Papier: alles was du mit dem Modell besprochen hast,
-    „Grafikspeicher leeren" (Tab Server) ist etwas anderes — das wirft das <i>Modell</i> aus dem Speicher,
+        steht darauf. Wird es voll, fallen die ältesten Nachrichten raus.</p>
-    nicht den Gesprächsverlauf.</p>`],
+        <p><b>Was du meist nicht tun musst:</b> Tools wie OpenCode, Cline und OpenWebUI
-  ["Was passiert, wenn der Kontext volläuft?", `
+        verwalten das Kontextfenster automatisch. Ein neuer Chat = leeres Blatt.</p>
-    <p>Ist das Kontextfenster voll, passiert je nach Tool eins von dreien: das Modell <b>vergisst den
+        <p><b>Wenn der Kontext volläuft</b> (Fehler „context length exceeded" oder das Modell vergisst den Anfang):</p>
-    Anfang</b> (älteste Nachrichten fallen raus), das Tool <b>kürzt automatisch</b>, oder du bekommst
-    einen Fehler wie „context length exceeded".</p>
-    <p><b>So gehst du vor:</b></p>
         <ol class="tut-steps">
-      <li><b>Neuen Chat starten</b> — der einfachste Reset, Kontext ist wieder leer.</li>
+          <li><b>Neuen Chat starten</b> — der einfachste Reset.</li>
-      <li><b>Zusammenfassen lassen:</b> „Fasse unseren Stand kurz zusammen", dann im neuen Chat einfügen.</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> → wir zeigen das Optimum
+          <li><b>Kontext vergrößern:</b> Tab <b>Modelle</b> → <b>Konfigurieren</b> → Empfehlung für deine Hardware übernehmen.</li>
-        für deine Hardware (mehr Kontext = mehr Speicherbedarf).</li>
+        </ol>
-    </ol>`],
+        <p><b>Wichtig:</b> „Grafikspeicher leeren" (Tab <b>Server</b>) ist etwas anderes —
-  ["Was ist ein Agent — und wann brauche ich einen?", `
+        das wirft das <em>Modell</em> aus dem Speicher, nicht den Gesprächsverlauf.</p>`],
-    <p>Ein nacktes Modell <b>schreibt nur Text zurück</b>. Ein <b>Agent</b> ist ein Programm drumherum,
+
-    das das Modell <b>handeln</b> lässt: Dateien lesen und ändern, Befehle ausführen, im Web suchen —
+      ["Auto-Swap — Modelle laden sich von selbst", `
-    Schritt für Schritt in einer Schleife, bis die Aufgabe erledigt ist.</p>
+        <p>llama-swap lädt automatisch das Modell, das gerade angefragt wird —
-    <p><b>Wann lohnt sich was?</b></p>
+        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>Die Antwort hängt davon ab, was du hauptsächlich tun willst:</p>
+        <div class="tut-table">
+          <div class="tut-row">
+            <div class="tut-cell-hd">Ich will einfach chatten, Texte schreiben, Fragen stellen</div>
+            <div class="tut-cell-bd">→ <b>OpenWebUI</b> — klassische Chat-Oberfläche im Browser.
+            Kein Programmieren, kein Setup. Ideal als Einstieg.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Ich programmiere und will KI in VS Code</div>
+            <div class="tut-cell-bd">→ <b>Cline</b> — KI-Assistent direkt im Editor.
+            Zeigt dir jeden Schritt und fragt vor Änderungen.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Ich will, dass die KI eigenständig ganze Features baut</div>
+            <div class="tut-cell-bd">→ <b>OpenCode</b> — autonomer Coding-Agent im Terminal oder als Desktop-App.
+            Liest Dateien, schreibt Code, führt Befehle aus.</div>
+          </div>
+          <div class="tut-row">
+            <div class="tut-cell-hd">Ich will einen schnellen Editor mit eingebautem KI-Panel</div>
+            <div class="tut-cell-bd">→ <b>Zed</b> — nativer Editor mit direktem Modell-Zugriff.
+            Schnell, minimalistisch, für Leute die Gewicht auf Performance legen.</div>
+          </div>
+        </div>
+        <p style="margin-top:10px"><b>Faustregel:</b> Fang mit <b>OpenWebUI</b> an. Wenn du merkst dass
+        du dieselben Aufgaben immer wieder beschreibst und dann manuell umsetzt — wechsle zu
+        <b>OpenCode</b> oder <b>Cline</b>.</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>Nützliche Befehle während der Arbeit:</b></p>
         <ul class="tut-steps" style="list-style:disc">
-      <li><b>Fragen, Texte, Erklärungen, Brainstorming</b> → kein Agent nötig, eine Chat-Oberfläche
+          <li><code>/model</code> — Modell mitten im Gespräch wechseln (z.B. auf <em>scout</em> für kurze Fragen)</li>
-        wie <b>OpenWebUI</b> reicht völlig.</li>
+          <li><code>/compact</code> — Kontext komprimieren wenn er voll wird</li>
-      <li><b>Coden über mehrere Dateien, Befehle ausführen, recherchieren + umsetzen</b>
+          <li><code>/clear</code> — frischer Start, leerer Kontext</li>
-        → <b>Agent</b> (OpenCode, Cline, Continue).</li>
         </ul>
-    <p><b>Gut zu wissen:</b> Diese Agenten <b>laufen lokal auf deinem PC</b> — du brauchst
+        <p>Bevor OpenCode eine Datei ändert, fragt es nach — mit <b>y</b> bestätigen oder <b>n</b> ablehnen.</p>`],
-    <b>keinen</b> Cloud-Dienst.</p>`],
+
-  ["Was sind Skills — und wie installiere ich sie?", `
+      ["Cline in VS Code verbinden und nutzen", `
-    <p>Ein <b>Skill</b> ist <b>verpacktes Können</b>: eine kurze Anleitung, die dem Agenten beibringt,
+        <p>Cline ist installiert (VS Code Extension)? So richtest du es ein:</p>
-    eine wiederkehrende Aufgabe jedes Mal so zu erledigen, wie <i>du</i> es willst.</p>
-    <p><b>Skill vs. MCP:</b> <b>MCP</b> gibt dem Agenten neue <b>Werkzeuge</b>. <b>Skills</b> geben
-    ihm <b>Know-how</b>. Kurz: <b>Werkzeuge = MCP, Anleitungen = Skills.</b></p>
-    <p><b>Installieren:</b> meist nur eine Datei ablegen — kein Build, kein Neustart:</p>
         <ol class="tut-steps">
-      <li><b>Pro Projekt:</b> in den Projektordner (z.B. <code>AGENTS.md</code>, <code>.clinerules/</code>).</li>
+          <li>Das Cline-Panel in VS Code öffnen (Roboter-Icon in der linken Leiste).</li>
-      <li><b>Global:</b> in den Konfig-Ordner des Tools — gilt überall.</li>
+          <li>Provider <b>„OpenAI Compatible"</b> wählen.</li>
-    </ol>`],
+          <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>
+        <ul class="tut-steps" style="list-style:disc">
+          <li><b>Plan:</b> Cline erklärt erst seinen Plan — du kannst ihn korrigieren bevor er handelt. Ideal für Anfänger.</li>
+          <li><b>Act:</b> Cline handelt sofort, fragt aber vor jeder Dateiänderung um Erlaubnis. Schneller.</li>
+        </ul>
+        <p><b>Unterschied zu OpenCode:</b> Cline arbeitet direkt in VS Code — du siehst Änderungen sofort im Editor.
+        OpenCode ist besser für große, autonome Aufgaben; Cline für Aufgaben die du Schritt für Schritt begleiten willst.</p>`],
+
+      ["OpenWebUI — chatten ohne Vorkenntnisse", `
+        <p>OpenWebUI ist installiert? Verbinden in 3 Schritten:</p>
+        <ol class="tut-steps">
+          <li>OpenWebUI im Browser öffnen → <b>Admin Panel</b> → <b>Connections</b>.</li>
+          <li><b>+ OpenAI-Verbindung</b> hinzufügen → Basis-URL aus Tab <b>Verbinden</b> (Abschnitt OpenWebUI) kopieren.</li>
+          <li>API-Key: <code>dummy-key</code> (egal was hier steht). Speichern.</li>
+        </ol>
+        <p>Danach oben das Modell wählen (<em>coder</em>, <em>scout</em> oder <em>vision</em>) und loslegen
+        — genau wie bei ChatGPT, nur lokal und privat.</p>
+        <p><b>Bilder analysieren:</b> Mit einem Vision-Modell (z.B. <em>qwen3-vl</em>) einfach ein Bild
+        per Drag & Drop ins Chat-Fenster ziehen — das Modell beschreibt und analysiert es.</p>
+        <p><b>Gut für:</b> Texte schreiben, übersetzen, zusammenfassen, erklären lassen, Brainstorming —
+        alles ohne Programmierkenntnisse.</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>
+        </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
+        <p><b>MCP</b> (Model Context Protocol) ist ein einheitlicher „Stecker", über den ein Agent
-    <b>Werkzeuge</b> bekommt: das Web durchsuchen, Dateien lesen, eine Datenbank abfragen.</p>
+        zusätzliche <b>Werkzeuge</b> bekommt. Ohne MCP kann er nur Text lesen und schreiben.
-    <p>Du fügst in deinem Agenten einen „MCP-Server" hinzu (eine Zeile in der Konfiguration je Werkzeug).
+        Mit MCP kann er z.B.:</p>
-    Danach entscheidet der Agent selbst, wann er das Werkzeug einsetzt.</p>
         <ul class="tut-steps" style="list-style:disc">
-      <li><b>Faustregel:</b> Fehlt dem Agenten eine <b>Fähigkeit</b> → MCP. Soll er etwas nur
+          <li>Im Web suchen (Brave Search, Tavily)</li>
-        <b>besser machen</b> → Skill.</li>
+          <li>GitHub Issues lesen und kommentieren</li>
-    </ul>`],
+          <li>Deine Datenbank abfragen</li>
-  ["Auto-Swap — wie das Laden funktioniert", `
+          <li>Screenshots machen, E-Mails lesen, Kalender verwalten</li>
-    <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/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
+        <p><b>Wie MCPs eingebunden werden</b> (Beispiel für OpenCode):</p>
-    (<code>scout</code>) für einfache — du wählst es einfach im Tool aus.</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 für den Einstieg:</b></p>
+        <ul class="tut-steps" style="list-style:disc">
+          <li><b>brave-search / tavily</b> — im Web suchen und recherchieren</li>
+          <li><b>github</b> — Repos, Issues und Pull Requests lesen</li>
+          <li><b>filesystem</b> — sichere Dateizugriffe außerhalb des Projektordners</li>
+        </ul>
+        <p><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>,
+        oder direkt: <em>„Welche MCPs gibt es für [dein Werkzeug]?"</em> im Chat fragen.</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>
+        <ul class="tut-steps" style="list-style:disc">
+          <li><a href="https://cursor.directory" target="_blank" rel="noopener">cursor.directory</a>
+            — vorgefertigte Rules für React, Vue, Python, etc.</li>
+          <li>Einfach fragen: <em>„Schreib mir eine AGENTS.md für ein React + TypeScript Projekt mit Tailwind."</em></li>
+        </ul>`],
+    ],
+  },
+
+  {
+    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 davon, oft auf etwas spezialisiert (Code, Bilder, Chat)."],
+  ["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. Unsere Engine lädt nur GGUF — Repos ohne GGUF kann sie nicht nutzen."],
+  ["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 beliebte Sweetspot."],
+  ["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 aus Qualität und Geschwindigkeit."],
-  ["Kontextfenster", "Das Kurzzeitgedächtnis: wie viel Text sich das Modell gleichzeitig merkt. Größer = mehr Überblick, mehr Speicher, etwas langsamer."],
+  ["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."],
-  ["Agent", "Ein Programm (OpenCode, Cline, Continue), das das Modell handeln lässt — Dateien lesen/ändern, Befehle ausführen, planen, im Loop bis die Aufgabe erledigt ist."],
+  ["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)."],
-  ["MCP", "Model Context Protocol — der Anschluss, über den ein Agent zusätzliche Werkzeuge bekommt (Web, Dateien, Datenbank). MCP = Werkzeuge."],
+  ["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."],
-  ["Skills", "Verpackte Anleitung für wiederkehrende Aufgaben — der Agent liest sie und macht es jedes Mal wie du willst. Skills = Anleitungen."],
+  ["MCP", "Model Context Protocol — der Stecker, über den ein Agent zusätzliche Werkzeuge bekommt (Web, Datenbank, GitHub …). MCP = neue Fähigkeiten."],
-  ["Rules / Commands", "Die konkrete Form von Skills je Tool: AGENTS.md (OpenCode), .clinerules (Cline), Rules/Prompts (Continue)."],
+  ["Skills / Rules", "Kurze Textdatei (AGENTS.md, .clinerules …) mit Anweisungen wie der Agent in deinem Projekt arbeiten soll — einmal geschrieben, immer befolgt."],
+  ["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."],
 ]

static/dist/main.css

@@ -0,0 +1 @@
+.guide-card.svelte-112sh7i{padding:0;overflow:hidden;margin-bottom:8px}.guide-group-hd.svelte-112sh7i{padding:9px 18px 7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:#2dd4bf0f;border-bottom:1px solid var(--line)}.tut-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px;font-size:12.5px}.tut-row{display:grid;grid-template-columns:1fr 2fr;border-bottom:1px solid var(--line)}.tut-row:last-child{border-bottom:none}.tut-cell-hd{padding:10px 14px;font-weight:500;border-right:1px solid var(--line);background:#ffffff06;line-height:1.5}.tut-cell-hd.bad{color:var(--mut);text-decoration:line-through;font-style:italic}.tut-cell-bd{padding:10px 14px;line-height:1.6;color:var(--fg)}.tut-code{display:block;background:var(--bg, #0d0d0d);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:monospace;font-size:11.5px;line-height:1.65;white-space:pre;overflow-x:auto;margin:10px 0;color:var(--fg)}

static/index.html

@@ -70,6 +70,7 @@
 </div>
 
 <div id="toast" class="toast"></div>
+<link rel="stylesheet" href="/static/dist/main.css">
 <script type="module" src="/static/dist/main.js"></script>
 </body>
 </html>