feat(guide+verbinden): Agenten/Skills/MCP als Dummy-Leitfaden + Quote-Bug fix

- Guide: tiefe Einsteiger-Abschnitte "Was ist ein Agent (und wann)", "Was sind
  Skills (Quellen + Installation)", "MCP — Werkzeuge geben"; Konzept-Karten
  Agent/MCP/Skills geschaerft + "Rules/Commands"-Karte
- Verbinden: Hinweis verlinkt zum Guide (Agent/Skill/MCP von Grund auf)
- FIX: MCP-Konzeptkarte hatte ein ASCII-`"` in einem doppelt-gequoteten String
  -> String brach vorzeitig ab, guides.js parste nicht -> die GANZE Mount-Kette
  stand (Modelle/Verbinden/Guide leer). Im Text statt Anfuehrungszeichen "Anschluss".

Hinweis: `node --check x.js` parst lax als CommonJS und uebersah den Fehler;
erst ein erzwungener ESM-Parse (.mjs) bzw. der Browser deckte ihn auf.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

static/js/panels/connect.js

@@ -93,7 +93,9 @@ function render() {
       ${toolRow("OpenCode", "Beliebtester Open-Source-Coding-Agent (MIT) — Terminal, Desktop & IDE.", "https://opencode.ai", "Empfohlen")}
       ${toolRow("Cline", "Bestes Erlebnis in VS Code, Bring-Your-Own-Key, Mensch-im-Loop.", "https://cline.bot")}
       ${toolRow("Continue.dev", "Feinkörnige Kontrolle + bestes MCP-Ökosystem für Werkzeuge.", "https://continue.dev")}
-      <div class="hint" style="margin-top:12px">MCP gibt Agenten zusätzliche Werkzeuge (Web durchsuchen, Dateien, Tools). Continue & Cline unterstützen MCP — mehr dazu im Guide.</div>
+      <div class="hint" style="margin-top:12px">Diese Tools sind <b>Agenten</b>: Sie lassen dein Modell selbst Dateien ändern und Befehle ausführen.
+        Noch unklar, was <b>Agent</b>, <b>Skill</b> oder <b>MCP</b> heißt?
+        <a href="#" onclick="event.preventDefault();window.cnGo('guides')">Im Guide von Grund auf erklärt →</a></div>
     </div>
 
     <div class="card" style="padding:0;overflow:hidden">

static/js/panels/guides.js

@@ -30,15 +30,71 @@ const TUTORIALS = [
       <li><b>Kontext vergrößern:</b> Tab <b>Modelle</b> → <b>Konfigurieren</b> → wir zeigen das Optimum
         für deine Hardware (mehr Kontext = mehr Speicherbedarf).</li>
     </ol>`],
-  ["Brauche ich überhaupt einen Agenten?", `
-    <p>Kommt drauf an, was du willst:</p>
+  ["Was ist ein Agent — und wann brauche ich einen?", `
+    <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 —
+    Schritt für Schritt in einer Schleife, bis die Aufgabe erledigt ist.</p>
+    <p><b>Bild dazu:</b> Reiner Chat = du fragst einen Experten und tippst seine Antwort selbst ab.
+    Agent = der Experte sitzt an deinem PC und <i>macht es selbst</i> — du schaust zu und bestätigst.</p>
+    <p><b>Wann lohnt sich was?</b></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>
+      <li><b>Fragen, Texte, Erklärungen, Brainstorming</b> → <u>kein</u> Agent nötig, eine Chat-Oberfläche
+        wie <b>OpenWebUI</b> reicht völlig.</li>
+      <li><b>Coden über mehrere Dateien, Befehle ausführen, recherchieren + umsetzen, automatisieren</b>
+        → <b>Agent</b> (OpenCode, Cline, Continue).</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>`],
+    <p><b>So arbeitest du damit:</b> Du beschreibst ein <b>Ziel</b> in Worten („baue Feature X", „finde den
+    Bug in dieser Datei"). Der Agent macht sich einen Plan und arbeitet ihn ab; heikle Schritte bestätigst
+    du. Lass ihn am besten in einem <b>Projektordner mit Git</b> arbeiten — dann ist jede Änderung
+    nachvollziehbar und rückgängig zu machen.</p>
+    <p><b>Gut zu wissen:</b> Diese Agenten <b>laufen lokal auf deinem PC</b> und reden mit deinem lokalen
+    Modell. Du brauchst <b>keinen</b> Cloud-Dienst — die „empfohlenen Tools" im Tab <b>Verbinden</b> SIND
+    die Agenten.</p>`],
+  ["Was sind Skills — und wie installiere ich sie?", `
+    <p>Ein <b>Skill</b> ist <b>verpacktes Können</b>: eine kurze Anleitung (oft + ein paar Hilfsskripte),
+    die dem Agenten beibringt, eine <b>wiederkehrende Aufgabe</b> jedes Mal so zu erledigen, wie <i>du</i>
+    es willst. Stell es dir wie ein Rezept oder eine Arbeitsanweisung vor, die der Agent liest, sobald sie passt.</p>
+    <p><b>Skill vs. MCP — nicht verwechseln:</b> <b>MCP</b> gibt dem Agenten <b>neue Werkzeuge</b> (Aktionen,
+    z.B. „auf eine Datenbank zugreifen"). <b>Skills</b> geben ihm <b>Know-how</b> (wie er etwas <i>gut</i> macht)
+    mit den Werkzeugen, die er schon hat. Kurz: <b>Werkzeuge = MCP, Anleitungen = Skills.</b></p>
+    <p><b>Wofür gut?</b></p>
+    <ul class="tut-steps" style="list-style:disc">
+      <li><b>Einheitlichkeit:</b> „Commit-Nachrichten immer in diesem Format", „unsere Komponenten sehen so aus".</li>
+      <li><b>Wiederholung sparen:</b> du musst denselben Kontext nicht jedes Mal neu erklären.</li>
+      <li><b>Wissen festhalten:</b> „so testen wir", „so wird ein Changelog geschrieben", Fach-Workflows.</li>
+    </ul>
+    <p><b>In deinen Tools heißt das konkret:</b></p>
+    <ul class="tut-steps" style="list-style:disc">
+      <li><b>OpenCode:</b> Projektregeln in einer <code>AGENTS.md</code> + eigene Befehle (Commands).</li>
+      <li><b>Cline:</b> Regeln als <code>.clinerules</code> + „Workflows".</li>
+      <li><b>Continue:</b> „Rules" + „Prompts".</li>
+      <li><b>Offener Standard „Agent Skills":</b> ein Ordner mit einer <code>SKILL.md</code> (Beschreibung +
+        Anleitung, optional Skripte) — zunehmend von mehreren Tools unterstützt.</li>
+    </ul>
+    <p><b>Installieren = meist nur eine Datei/einen Ordner ablegen</b> (kein Build, kein Neustart-Zauber):</p>
+    <ol class="tut-steps">
+      <li><b>Pro Projekt:</b> die Datei in den Projektordner legen (z.B. <code>AGENTS.md</code>,
+        <code>.clinerules/</code>) — gilt nur für dieses Projekt.</li>
+      <li><b>Global:</b> in den Konfig-Ordner des Tools — gilt überall. Das Tool liest es beim nächsten Start.</li>
+    </ol>
+    <p><b>Beste Quellen:</b> zuerst die <b>Doku deines Tools</b> (OpenCode/Cline/Continue) — am verlässlichsten.
+    Dann <b>„awesome"-Listen auf GitHub</b> (z.B. <i>awesome-claude-skills</i>, <i>awesome-mcp-servers</i>) und
+    die <b>quelloffenen Anthropic-Skills</b> als Vorlagen, um das Format zu lernen.</p>
+    <p class="hint" style="margin-top:10px"><b>Für lokale Modelle wichtig:</b> Skills sind nur Text-Anleitungen
+    und funktionieren mit <i>jedem</i> Modell — aber kleinere lokale Modelle befolgen komplexe Skills weniger
+    zuverlässig als große. Halte sie <b>kurz, klar und konkret</b>.</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: das Web durchsuchen, Dateien lesen, eine Datenbank abfragen, GitHub bedienen …
+    Ohne MCP kann das Modell nur reden; mit MCP kann es <b>etwas tun</b>.</p>
+    <p><b>So nutzt du es:</b> Du fügst in deinem Agenten einen „MCP-Server" hinzu (eine kleine Zeile in der
+    Konfiguration je Werkzeug). Danach entscheidet der Agent selbst, wann er das Werkzeug einsetzt.</p>
+    <ul class="tut-steps" style="list-style:disc">
+      <li><b>Unterstützt:</b> Cline und Continue haben das beste MCP-Ökosystem; viele fertige Server gibt es
+        auf GitHub (Suchbegriff <i>awesome-mcp-servers</i>).</li>
+      <li><b>Faustregel:</b> Fehlt dem Agenten eine <b>Fähigkeit</b> (z.B. Web-Zugriff) → MCP. Soll er etwas
+        nur <b>besser/einheitlicher machen</b> → Skill.</li>
+    </ul>`],
   ["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>
@@ -60,9 +116,10 @@ const CONCEPTS = [
   ["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."],
+  ["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. Reiner Chat schreibt nur Text zurück."],
+  ["MCP", "Model Context Protocol — der Anschluss, über den ein Agent zusätzliche Werkzeuge bekommt (Web, Dateien, Datenbank). MCP = Werkzeuge."],
+  ["Skills", "Verpackte Anleitung für wiederkehrende Aufgaben — der Agent liest sie und macht es jedes Mal wie du willst. Skills = Anleitungen (das Gegenstück zu MCP-Werkzeugen)."],
+  ["Rules / Commands", "Die konkrete Form von Skills je Tool: AGENTS.md (OpenCode), .clinerules (Cline), Rules/Prompts (Continue) — eine Datei im Projekt- oder Konfig-Ordner."],
 ];
 
 function mount() {