mission-control-v2/frontend/src/views/GuideView.tsx

import { useState, type ReactNode } from "react"
import {
  BookOpen, Boxes, Cpu, Layers, Plug, Bot,
  Wrench, Shield, Compass, Code, Network, Database, Sparkles, Gauge,
  Lock, Lightbulb, Server, Zap, ArrowUpRight, LifeBuoy, Puzzle,
  type LucideIcon,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { SystemSchaubild } from "./guide/SystemSchaubild"

/* ------------------------------------------------------------------ *
 *  Anleitung = Allgemeine AI-Bibel (Stand Juli 2026).
 *  Ganz oben „Dein System": Schaubild + Kreislauf der eigenen Box.
 *  Danach allgemeines Nachschlagewerk für lokale & agentische AI;
 *  Stack-Spezifika nur als "Bei dir konkret"-Callouts.
 * ------------------------------------------------------------------ */

const SECTIONS: { id: string; label: string }[] = [
  { id: "system", label: "Dein System" },
  { id: "grundlagen", label: "Grundlagen" },
  { id: "moe", label: "MoE & Quant" },
  { id: "lokal", label: "Lokal betreiben" },
  { id: "modelle", label: "Modell-Landschaft" },
  { id: "gateway", label: "Gateway-Trick" },
  { id: "mcp", label: "MCP" },
  { id: "skills", label: "Skills" },
  { id: "memory", label: "Gedächtnis & RAG" },
  { id: "agents", label: "Agenten" },
  { id: "ide", label: "IDE anbinden" },
  { id: "tricks", label: "Tricks & Kniffe" },
  { id: "wartung", label: "Sicherheit & Wartung" },
  { id: "ressourcen", label: "Ressourcen" },
  { id: "troubleshooting", label: "Troubleshooting" },
]

function scrollToId(id: string) {
  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" })
}

/* ---- kleine Bausteine ---- */

function Card({ id, icon: Icon, color, title, kicker, children, wide }: {
  id?: string
  icon: LucideIcon
  color: string
  title: string
  kicker?: string
  children: ReactNode
  wide?: boolean
}) {
  return (
    <section
      id={id}
      className={cn(
        "scroll-mt-20 mc-card p-6 space-y-3",
        wide && "md:col-span-2"
      )}
    >
      <div className="flex items-center gap-2.5 border-b border-border/20 pb-3">
        <Icon className={cn("h-5 w-5 shrink-0", color)} />
        <div>
          <h3 className="text-xs font-bold uppercase tracking-wider text-foreground">{title}</h3>
          {kicker && <span className={cn("text-[9px] font-mono", color)}>{kicker}</span>}
        </div>
      </div>
      <div className="text-xs text-muted-foreground space-y-2.5 leading-relaxed">{children}</div>
    </section>
  )
}

/* "Bei dir konkret" — Stack-Einschub, nur wo eine Einschränkung es rechtfertigt */
function Stack({ children }: { children: ReactNode }) {
  return (
    <div className="mt-1 rounded-xl border border-primary/25 bg-primary/[0.06] p-3 text-[11px] leading-relaxed">
      <div className="flex items-center gap-1.5 font-bold text-primary mb-1">
        <Sparkles className="h-3 w-3" /> Bei dir konkret
      </div>
      <div className="text-muted-foreground space-y-1">{children}</div>
    </div>
  )
}

function Pill({ children }: { children: ReactNode }) {
  return (
    <code className="rounded bg-background/40 border border-border/30 px-1.5 py-0.5 font-mono text-[10px] text-foreground">
      {children}
    </code>
  )
}

function LinkItem({ href, name, note }: { href: string; name: string; note: string }) {
  return (
    <li className="leading-relaxed">
      <a
        href={href}
        target="_blank"
        rel="noopener"
        className="text-primary hover:underline font-semibold inline-flex items-center gap-0.5"
      >
        {name}
        <ArrowUpRight className="h-3 w-3 opacity-60" />
      </a>
      <span className="text-muted-foreground"> — {note}</span>
    </li>
  )
}

export function GuideView() {
  const [showAllNav, setShowAllNav] = useState(false)

  return (
    <div className="space-y-7">
      {/* Hero */}
      <div className="mc-card p-6 flex items-start gap-4">
        <div className="h-11 w-11 rounded-xl bg-primary/15 flex items-center justify-center shrink-0">
          <BookOpen className="h-6 w-6 text-primary" />
        </div>
        <div className="space-y-1">
          <h1 className="text-2xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
            Die AI-Bibel
          </h1>
          <p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
            Erst <span className="font-semibold text-foreground">dein System auf einen Blick</span>, dann das
            allgemeine Nachschlagewerk für lokale &amp; agentische AI — Konzepte, Tricks, Kniffe und
            kuratierte Quellen. <span className="font-semibold text-foreground">Stand Juli 2026.</span>{" "}
            <span className="text-primary font-semibold">„Bei dir konkret"</span>-Kästen
            zeigen, was dein Stack daraus macht.
          </p>
        </div>
      </div>

      {/* Sprung-Navigation (sticky) */}
      <div className="sticky top-0 z-10 -mx-1 px-1">
        <div className="rounded-xl border border-border/50 bg-card/70 backdrop-blur-xl p-2 shadow-lg shadow-black/20">
          <div className="flex items-center gap-1.5 flex-wrap">
            <Compass className="h-3.5 w-3.5 text-primary ml-1 mr-0.5 shrink-0" />
            {(showAllNav ? SECTIONS : SECTIONS.slice(0, 9)).map((s) => (
              <button
                key={s.id}
                onClick={() => scrollToId(s.id)}
                className="rounded-lg px-2.5 py-1 text-[11px] font-semibold text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors cursor-pointer"
              >
                {s.label}
              </button>
            ))}
            <button
              onClick={() => setShowAllNav((v) => !v)}
              className="rounded-lg px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/10 transition-colors cursor-pointer"
            >
              {showAllNav ? "weniger" : "+ mehr"}
            </button>
          </div>
        </div>
      </div>

      {/* 0 — Dein System (Schaubild) */}
      <section id="system" className="scroll-mt-20 mc-card p-6 space-y-4">
        <div className="flex items-center gap-2.5 border-b border-border/20 pb-3">
          <Network className="h-5 w-5 text-primary" />
          <div>
            <h3 className="text-xs font-bold uppercase tracking-wider text-foreground">So funktioniert dein System</h3>
            <span className="text-[9px] font-mono text-primary">Landkarte &amp; Kreislauf — das große Bild</span>
          </div>
        </div>
        <p className="text-xs text-muted-foreground leading-relaxed max-w-3xl">
          Vier Türen führen zur selben Box: <strong className="text-foreground">diese Oberfläche</strong> zum Steuern
          und Abnicken, <strong className="text-foreground">Lucy</strong> für Zurufe per Stimme,
          <strong className="text-foreground"> Hermes Desktop</strong> für richtige Projekte und
          <strong className="text-foreground"> Telegram</strong> für unterwegs. In der Box denken die Modelle, das
          Gedächtnis lernt automatisch mit — und nachts arbeitet sie allein: Sie träumt, inventarisiert sich selbst,
          entwickelt Ideen zu fertigen Vorschlägen und legt sie dir als Karten ins Auftragsbuch.
          <strong className="text-primary"> Nichts geht live ohne deinen Klick</strong> — und wenn nach einer Annahme
          etwas rot wird, baut die Box es selbst zurück.
        </p>
        <SystemSchaubild />
      </section>

      <div className="grid gap-5 md:grid-cols-2">

        {/* 1 — Grundlagen */}
        <Card id="grundlagen" icon={Cpu} color="text-cyan-400" title="1. Wie LLMs ticken" kicker="Grundlagen">
          <p>
            Ein LLM ist im Kern ein <strong>Wahrscheinlichkeits-Rechner für das nächste Token</strong> (Wortteil).
            Es „weiß" nichts — es setzt fort, was statistisch am plausibelsten ist. Daraus folgt fast alles andere.
          </p>
          <ul className="list-disc pl-4 space-y-1">
            <li><strong>Tokens</strong> sind die Einheit — ~¾ Wort. Ein- und Ausgabe werden in Tokens gezählt.</li>
            <li><strong>Kontextfenster</strong> = wie viele Tokens das Modell gleichzeitig „sehen" kann (Prompt + Antwort). Voll = Anfang fällt raus.</li>
            <li><strong>Parameter</strong> = die trainierten Gewichte. Training ist einmalig, <strong>Inferenz</strong> ist jede Antwort.</li>
            <li><strong>Temperatur / Sampling</strong> steuert Zufall: niedrig = deterministisch/präzise (Code), hoch = kreativ.</li>
            <li><strong>Halluzination</strong> ist kein Bug, sondern die Kehrseite des Ratens. Gegenmittel: Grounding via Tools/RAG, Verifikation.</li>
            <li><strong>Reasoning-/Thinking-Modelle</strong> „denken" in unsichtbaren Tokens vor der Antwort — besser bei Logik, langsamer/teurer.</li>
          </ul>
        </Card>

        {/* 2 — MoE & Quant */}
        <Card id="moe" icon={Layers} color="text-violet-400" title="2. MoE & Quantisierung" kicker="Mehr Modell, weniger Last">
          <p>
            <strong>Mixture of Experts (MoE):</strong> Statt für jedes Token das ganze Netz zu aktivieren, wählt ein
            <em> Router</em> nur ein paar spezialisierte <em>Experts</em> aus. So läuft ein 100B-Modell mit der aktiven
            Rechenlast eines viel kleineren (z.B. „122B total / 10B aktiv").
          </p>
          <p>
            <strong>Quantisierung:</strong> Gewichte von FP16 auf weniger Bits eindampfen — kleiner &amp; schneller bei
            minimalem Qualitätsverlust. Faustregel:
          </p>
          <ul className="list-disc pl-4 space-y-1">
            <li><Pill>Q8</Pill> nahezu verlustfrei, größter Footprint</li>
            <li><Pill>Q6_K</Pill> sehr gut, guter Mittelweg</li>
            <li><Pill>Q4_K_M</Pill> der Sweet-Spot für lokal — viel Modell pro GB</li>
          </ul>
          <Stack>
            VRAM/RAM ist die harte Grenze — <strong>darum</strong> ist beides hier zentral: MoE lässt 100B+ überhaupt
            laufen, Quant entscheidet, was reinpasst. Dein Line-up fährt durchweg <Pill>Q4_K_M</Pill>/<Pill>Q6_K</Pill>.
          </Stack>
        </Card>

        {/* 3 — Lokal betreiben */}
        <Card id="lokal" icon={Server} color="text-emerald-400" title="3. Lokal betreiben: Engines & Backends" kicker="llama.cpp, vLLM & Co." wide>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <p><strong>Inference-Engines</strong> — was die Modelle ausführt:</p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>llama.cpp / GGUF</strong> — der De-facto-Standard für lokal, CPU+GPU, läuft überall.</li>
                <li><strong>Ollama / LM Studio</strong> — bequeme Wrapper mit One-Click-Downloads (LM Studio mit GUI).</li>
                <li><strong>vLLM / TGI</strong> — Server-Engines für maximalen Durchsatz auf dicken GPUs.</li>
                <li><strong>llama-swap</strong> — Proxy, der <em>mehrere</em> Modelle hinter <em>einem</em> Port hält und je nach Anfrage automatisch ein-/aussattelt.</li>
              </ul>
            </div>
            <div className="space-y-2">
              <p><strong>GPU-Backends</strong> — wie gerechnet wird:</p>
              <ul className="list-disc pl-4 space-y-1">
                <li><Pill>CUDA</Pill> NVIDIA · <Pill>ROCm</Pill> AMD · <Pill>Vulkan</Pill> herstellerübergreifend · <Pill>Metal</Pill> Apple</li>
              </ul>
              <p className="pt-1"><strong>Begriffe, die immer wiederkommen:</strong> Kontext (<Pill>-c</Pill>), Slots/Parallel, KV-Cache, Modell-TTL/Swap, <strong>Speculative Decoding</strong> (kleines Draft-Modell rät voraus → schneller).</p>
            </div>
          </div>
          <Stack>
            Deine Box hat eine AMD-APU (gfx1151). <strong>Einschränkung &amp; Trick:</strong> dort schlägt <Pill>Vulkan/RADV</Pill> das
            offizielle <Pill>ROCm</Pill> bei Token-Generierung um ~12–22 % — darum läuft die Engine auf Vulkan.
            <Pill>llama-swap</Pill> hält die Alltags-Hirne dauerwarm; <Pill>coder</Pill> nutzt Spec-Decoding.
          </Stack>
        </Card>

        {/* 4 — Modell-Landschaft */}
        <Card id="modelle" icon={Boxes} color="text-sky-400" title="4. Modell-Landschaft" kicker="Stand Juni 2026" wide>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <p><strong>Open-Weight (lokal nutzbar):</strong></p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>Qwen</strong> (Alibaba) — starke Allrounder + Coder + Vision, viele Größen/MoE.</li>
                <li><strong>Llama</strong> (Meta), <strong>Gemma</strong> (Google), <strong>Phi</strong> (Microsoft) — solide Open-Familien.</li>
                <li><strong>DeepSeek</strong>, <strong>Mistral/Mixtral</strong> — kräftige MoE-/Reasoning-Modelle.</li>
              </ul>
            </div>
            <div className="space-y-2">
              <p><strong>Frontier (Cloud-API):</strong></p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>Claude</strong> (Anthropic), <strong>GPT</strong> (OpenAI), <strong>Gemini</strong> (Google) — die stärksten Allrounder, aber nicht lokal.</li>
              </ul>
              <p className="pt-1"><strong>Modellwahl nach Aufgabe:</strong> schnelles Alltags-Hirn · großes Logik-Hirn für harte Tasks · dediziertes Code-Modell · multimodal für Bilder · Embedding-Modell fürs Gedächtnis.</p>
            </div>
          </div>
          <p className="text-[11px] italic">
            Leaderboards (HF, LMArena) sind grobe Orientierung — der einzige Benchmark, der zählt, ist deine eigene Aufgabe.
            Vorsicht vor „Benchmaxxing".
          </p>
          <Stack>
            Dein Line-up via llama-swap (Klartext-Rollen): <Pill>Hirn</Pill> (Agent, dauerwarm) · <Pill>Groß</Pill> (schwere
            Logik) · <Pill>Coder</Pill> · <Pill>Augen</Pill> (Bilder) · <Pill>Späher</Pill> (schnelle Recherche) ·
            <Pill>Kritiker</Pill> (Fremdblick/Review) · <Pill>Gedächtnis</Pill> + <Pill>Sortierer</Pill> (Embedding &amp;
            Reranking). Verwalten/tauschen im <strong>Modelle</strong>-Tab.
          </Stack>
        </Card>

        {/* 5 — Gateway-Trick */}
        <Card id="gateway" icon={Network} color="text-amber-400" title="5. Der Gateway-Trick" kicker="OpenAI-kompatibel = überall andocken">
          <p>
            Fast jedes AI-Tool spricht heute das <strong>OpenAI-Format</strong> (<Pill>/v1/chat/completions</Pill>). Ein
            <strong> Gateway</strong> davor gibt dir <em>einen</em> Endpunkt für alles: zentrales Key-Management, Logging
            und transparentes <strong>Routing</strong> — der Client merkt nicht, welches Modell tatsächlich antwortet.
          </p>
          <p>
            Die Lane-Idee: du wählst <Pill>chat</Pill> (Alltag, <Pill>auto</Pill> geht als Alias weiter) oder{" "}
            <Pill>coding</Pill> (agentisch), das Gateway pickt das passende echte Modell und lädt es bei Bedarf.
          </p>
          <Stack>
            Dein Gateway: <Pill>http://192.168.178.151:9001/v1</Pill>, Model <Pill>chat</Pill> oder <Pill>coding</Pill>, API-Key beliebig.
            Fertige Configs erzeugt dir der <strong>Verbinden</strong>-Tab live — eine Wahrheit, kein Abtippen.
          </Stack>
        </Card>

        {/* 6 — MCP */}
        <Card id="mcp" icon={Plug} color="text-violet-400" title="6. MCP — Werkzeuge für Agenten" kicker="USB-C für AI-Tools">
          <p>
            Das <strong>Model Context Protocol</strong> (offen, von Anthropic initiiert) standardisiert, wie ein
            AI-Client mit externen Tools &amp; Datenquellen spricht. Ein <strong>MCP-Server</strong> bringt Fähigkeiten:
            Dateien, Web-Fetch, Git, Datenbanken, eigene APIs.
          </p>
          <p>Statt für jeden Editor eigene Tools zu schreiben, bindet jeder MCP-fähige Agent denselben Server an.</p>
          <div className="flex items-start gap-1.5 rounded-xl border border-amber-500/25 bg-amber-500/[0.06] p-2.5 text-[11px]">
            <Lock className="h-3.5 w-3.5 text-amber-400 shrink-0 mt-0.5" />
            <span><strong>Sicherheit:</strong> ein MCP-Server hat echten Zugriff (Dateien, Shell). Nur vertrauenswürdige Server laufen lassen, Rechte minimal halten, Quelle prüfen.</span>
          </div>
        </Card>

        {/* 7 — Skills */}
        <Card id="skills" icon={Puzzle} color="text-emerald-400" title="7. Agent Skills" kicker="Wiederverwendbare Fähigkeiten">
          <p>
            Ein <strong>Skill</strong> ist ein Ordner mit einer <Pill>SKILL.md</Pill> (YAML-Kopf + Anleitung, optional
            Skripte/Beispiele), den der Agent für eine bestimmte Aufgabe lädt — z.B. TDD, Code-Vereinfachung, API-Design.
          </p>
          <pre className="p-2.5 bg-background/25 rounded-lg border border-border/30 font-mono text-[9px] text-foreground overflow-x-auto whitespace-pre">
{`---
name: tdd-pro
description: Treibt Entwicklung mit strikter TDD-Praxis
---
# Instructions
...`}
          </pre>
          <p>
            Suchen &amp; installieren über die <strong>skills.sh</strong>-Registry: <Pill>npx skills find</Pill> /
            <Pill>npx skills add owner/repo</Pill>. Skills liegen projektweit (vom Agent beim Start gelesen) oder global.
          </p>
        </Card>

        {/* 8 — Gedächtnis & RAG */}
        <Card id="memory" icon={Database} color="text-indigo-400" title="8. Gedächtnis & RAG" kicker="Modelle vergessen — du nicht" wide>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <p>LLMs sind <strong>zustandslos</strong>: ohne Hilfe weiß das Modell beim nächsten Turn nichts mehr. Gedächtnis lebt extern.</p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>Embeddings</strong> wandeln Text in Vektoren; ein <strong>Vektor-Store</strong> (Chroma, …) findet semantisch Ähnliches.</li>
                <li><strong>RAG</strong> = relevante Fakten vor dem Turn heraussuchen und einblenden statt alles im Prompt zu halten.</li>
                <li><strong>Long-Context vs. RAG:</strong> riesige Fenster sind bequem, aber teuer &amp; „lost in the middle" — gezieltes Abrufen skaliert besser.</li>
              </ul>
            </div>
            <div className="space-y-2">
              <p><strong>Auto-lernendes Gedächtnis</strong> ist die nächste Stufe:</p>
              <ul className="list-disc pl-4 space-y-1">
                <li>extrahiert Fakten <em>selbst</em> aus Gesprächen, statt nur abzuspeichern</li>
                <li>dedupliziert semantisch (kein 10× derselbe Fakt)</li>
                <li><strong>Graph-Sicht</strong> = Fakten <em>plus</em> ihre Beziehungen, nicht nur eine flache Liste</li>
              </ul>
            </div>
          </div>
          <Stack>
            Dein Gedächtnis (Tab <strong>Gedächtnis</strong>) ist <strong>Mem0</strong>-basiert: auto-lernend &amp;
            semantisch, <strong>graph-first</strong> dargestellt, mit 4-Typen-Taxonomie
            (<Pill>Identität</Pill> · <Pill>Wissen</Pill> · <Pill>Regeln</Pill> · <Pill>Ereignisse</Pill>). Der Agent
            lernt im Hintergrund nach jedem Turn — egal ob du per Desktop, Konsole, Telegram oder Lucy mit ihm sprichst.
            <br /><strong>Gotcha:</strong> ein gelöschter Fakt kann wieder auftauchen, solange die Original-Nachricht noch im Verlauf steht (additive Extraktion).
          </Stack>
        </Card>

        {/* 9 — Agenten */}
        <Card id="agents" icon={Bot} color="text-rose-400" title="9. Autonome Agenten betreiben" kicker="LLM in der Schleife" wide>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <p>
                Ein <strong>Agent</strong> ist ein LLM in einer Schleife mit Tools:
                <em> denken → Tool aufrufen → Ergebnis beobachten → weiter</em>, bis das Ziel erreicht ist.
              </p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>Guardrails</strong> (Hard-Stop, Tool-Limits) verhindern Endlos-Loops, wenn ein Tool fehlt oder hängt.</li>
                <li><strong>Kontext-Hygiene</strong> ist die wichtigste Disziplin: frische Sessions starten — vollgemüllte Historien werden langsam, driften und halluzinieren.</li>
                <li><strong>Kanäle:</strong> CLI/Terminal, Chat-UI, Messaging (z.B. Telegram), reine API.</li>
              </ul>
            </div>
            <div className="space-y-2">
              <p><strong>Least Privilege:</strong> gib einem Agenten nur die Tools, die er wirklich braucht. Kritische Aktionen (Shell auf dem Host, Löschen, Geld/Deploys) hinter menschliche Freigabe.</p>
              <p><strong>Was sich vollautomatisch lohnt:</strong> Modell-Routing, Hintergrund-Gedächtnis, Recherche. <strong>Was Freigabe braucht:</strong> Systembefehle, Updates/Reboots, permanentes Löschen.</p>
            </div>
          </div>
          <Stack>
            <strong>Hermes</strong> ist dein Box-Agent mit eigenem Agent-Hirn (Rolle <Pill>Hirn</Pill>, dauerwarm).
            Reden tust du mit ihm über <strong>Hermes Desktop</strong> (am PC, remote via <Pill>/hermes-ui</Pill>),
            die <strong>Konsole</strong> (Box-Shell im Browser), <strong>Telegram</strong> — oder per Stimme über
            <strong> Lucy</strong>. Er hat MCP-Server für Gedächtnis, Stack-Steuerung, Web-Fetch und
            <strong> PC-Steuerung</strong> (Executor auf deinem Windows-PC). Nachts betreibt er Werkstatt &amp;
            Radar-Crons — alles Gebaute landet als Karte im <strong>Auftragsbuch</strong>.
            Status &amp; Verdrahtung im <strong>Hermes</strong>-Tab.
          </Stack>
        </Card>

        {/* 10 — IDE anbinden */}
        <Card id="ide" icon={Code} color="text-cyan-400" title="10. IDE / Editor anbinden" kicker="Vibe-Coding lokal">
          <p>
            Jede <strong>OpenAI-kompatible</strong> IDE oder Extension lässt sich auf einen lokalen Server umbiegen —
            Base-URL + Model eintragen, fertig:
          </p>
          <ul className="list-disc pl-4 space-y-1">
            <li><strong>Cline</strong> &amp; <strong>Roo Code</strong> (VS-Code-Extensions, voller Agent + MCP)</li>
            <li><strong>Cursor</strong> (VS-Code-Fork mit Top-Autocomplete)</li>
            <li><strong>Continue</strong>, <strong>aider</strong> (CLI), <strong>OpenCode</strong> (Desktop)</li>
          </ul>
          <Stack>
            Deine Haupt-IDE ist inzwischen <strong>Hermes Desktop</strong> — sie ist ab Werk mit Box, Gedächtnis und
            Skills verdrahtet, da ist nichts zu konfigurieren. Für alles andere gilt: Tipp den Kram nicht ab — der
            <strong> Verbinden</strong>-Tab generiert die fertige Config (inkl. MCP-Gedächtnis) pro Tool zum Kopieren.
            Essenz: Base <Pill>…:9001/v1</Pill>, Model <Pill>chat</Pill> / <Pill>coding</Pill>, Key beliebig.
          </Stack>
        </Card>

        {/* 11 — Tricks & Kniffe */}
        <Card id="tricks" icon={Lightbulb} color="text-amber-400" title="11. Tricks & Kniffe" kicker="Was im Alltag wirklich spart" wide>
          <div className="grid md:grid-cols-3 gap-3">
            {[
              ["Kontext sauber halten", "Neue Session statt Mega-Historie. Drift, Tempo und Halluzination hängen direkt am Kontext-Müll."],
              ["Plan-then-Act", "Erst Plan/Vorgehen bestätigen lassen, dann ausführen. Spart teure Holzwege."],
              ["Gezielte Edits", "Nie ganze Dateien überschreiben für eine Zeile — Such-/Ersetz-Tools nutzen. Weniger Tokens, weniger Fehler."],
              ["Non-interaktive Befehle", "Keine interaktiven Prompts im Agent-Terminal; lange Tasks als Background-Job. Sonst hängt der Loop."],
              ["DevTools koppeln", "Browser-/Konsolen-Zugriff geben — der Agent liest echte Fehler statt blind zu raten."],
              ["Richtige Modellwahl", "Schnelles Hirn für Alltag, großes für harte Logik, Coder fürs Coden. Nicht alles mit der Kanone."],
              ["Akzeptanzkriterien", "Sag konkret, woran „fertig“ erkennbar ist. Vage Prompts → vage Ergebnisse."],
              ["Verifizieren statt vertrauen", "Tests/Live-Check fordern. „Sollte funktionieren“ ist kein Beweis."],
              ["Regeln ins Gedächtnis", "Wiederkehrende Vorlieben/Konventionen einmal ablegen — der Agent zieht sie selbst."],
            ].map(([t, d]) => (
              <div key={t} className="space-y-1 p-3 bg-background/10 rounded-xl border border-border/30">
                <div className="flex items-center gap-1.5 font-bold text-foreground text-[11px]">
                  <Zap className="h-3 w-3 text-amber-400" /> {t}
                </div>
                <p className="text-[11px]">{d}</p>
              </div>
            ))}
          </div>
        </Card>

        {/* 12 — Sicherheit & Wartung */}
        <Card id="wartung" icon={Shield} color="text-emerald-400" title="12. Sicherheit & Wartung" kicker="Damit's auch morgen noch läuft" wide>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <p className="flex items-center gap-1.5 font-bold text-foreground"><Gauge className="h-3.5 w-3.5 text-emerald-400" /> Goldene Regeln</p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>Ein ungetesteter Restore ist kein Backup.</strong> Wiederherstellung mindestens einmal echt durchspielen.</li>
                <li><strong>Updates können Dinge still zerschießen</strong> — gerade bei AI-Stacks (Embeddings, Provider-Interna). Versionen pinnen, Smoke-Test, Post-Check.</li>
                <li><strong>Least Privilege</strong> für Agenten, MCP-Server und PC-Zugriff. Kritisches hinter Freigabe.</li>
              </ul>
            </div>
            <div className="space-y-2">
              <p className="flex items-center gap-1.5 font-bold text-foreground"><Wrench className="h-3.5 w-3.5 text-emerald-400" /> Bei dir im SystemDrawer</p>
              <ul className="list-disc pl-4 space-y-1">
                <li><strong>Backup:</strong> PBS-Backup-Zentrum (Sicherung auf den Proxmox-Server) + tägliche Tarball-Sicherung; Restore echt durchgespielt (<Pill>restore.sh</Pill>, Doku in <Pill>docs/BACKUP.md</Pill>).</li>
                <li><strong>Updates:</strong> git-basierter Update-Check; <strong>Update-Buttons</strong> mit anschließendem <strong>Gehirn-Check</strong> (rot, falls ein Update das Gedächtnis zerschießt).</li>
                <li><strong>Annahme-Sicherheit:</strong> jede Auftragsbuch-Annahme läuft mit Health-Check — wird's rot, baut die Box automatisch zurück (Auto-Revert).</li>
                <li><strong>Dienste &amp; Gefahrenzone:</strong> Restart/Logs pro Dienst, kritische Eingriffe getrennt.</li>
              </ul>
              <p className="text-[10px] italic">Erreichbar über das System-Icon → Tab „Wartung".</p>
            </div>
          </div>
        </Card>

        {/* 13 — Ressourcen */}
        <section id="ressourcen" className="scroll-mt-20 md:col-span-2 mc-card p-6 space-y-4">
          <div className="flex items-center gap-2.5 border-b border-border/20 pb-3">
            <Compass className="h-5 w-5 text-primary" />
            <div>
              <h3 className="text-xs font-bold uppercase tracking-wider text-foreground">13. Kuratierte Ressourcen &amp; Links</h3>
              <span className="text-[9px] font-mono text-primary">Sauber geordnet — die guten Quellen</span>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-5 text-xs">
            <div className="space-y-2">
              <div className="font-bold text-foreground flex items-center gap-1.5"><Boxes className="h-3.5 w-3.5 text-sky-400" /> Modelle &amp; Engines</div>
              <ul className="list-disc pl-4 space-y-1.5">
                <LinkItem href="https://huggingface.co/models" name="Hugging Face" note="das Repository für offene Modelle (GGUF, Embeddings, Datasets)." />
                <LinkItem href="https://github.com/ggml-org/llama.cpp" name="llama.cpp" note="die Referenz-Engine für lokale Inferenz." />
                <LinkItem href="https://github.com/mostlygeek/llama-swap" name="llama-swap" note="mehrere Modelle hinter einem Port, Auto-Swap." />
                <LinkItem href="https://ollama.com" name="Ollama" note="einfachster Einstieg, One-Command-Modelle." />
                <LinkItem href="https://lmstudio.ai" name="LM Studio" note="lokale GUI zum Stöbern, Laden &amp; Chatten." />
                <LinkItem href="https://github.com/vllm-project/vllm" name="vLLM" note="Hochdurchsatz-Serving auf dicken GPUs." />
              </ul>
            </div>
            <div className="space-y-2">
              <div className="font-bold text-foreground flex items-center gap-1.5"><Plug className="h-3.5 w-3.5 text-violet-400" /> MCP &amp; Skills</div>
              <ul className="list-disc pl-4 space-y-1.5">
                <LinkItem href="https://modelcontextprotocol.io" name="MCP — offizielle Doku" note="Spezifikation &amp; Einstieg." />
                <LinkItem href="https://github.com/modelcontextprotocol/servers" name="Offizielle MCP-Server" note="filesystem, git, postgres, fetch &amp; mehr." />
                <LinkItem href="https://smithery.ai" name="Smithery" note="Registry zum Suchen &amp; Auto-Installieren von MCP-Servern." />
                <LinkItem href="https://glama.ai/mcp/servers" name="Glama MCP Registry" note="kuratierte Community-Datenbank." />
                <LinkItem href="https://skills.sh" name="skills.sh" note="Registry &amp; CLI für Agent-Skills." />
              </ul>
            </div>
            <div className="space-y-2">
              <div className="font-bold text-foreground flex items-center gap-1.5"><Bot className="h-3.5 w-3.5 text-rose-400" /> Agenten &amp; Frameworks</div>
              <ul className="list-disc pl-4 space-y-1.5">
                <LinkItem href="https://github.com/NousResearch/hermes-agent" name="Hermes Agent (Nous)" note="der Agent, der auf deiner Box läuft." />
                <LinkItem href="https://docs.claude.com" name="Anthropic / Claude Docs" note="API, Tool-Use, Agent SDK, MCP." />
                <LinkItem href="https://github.com/cline/cline" name="Cline" note="autonomer Coding-Agent für VS Code." />
                <LinkItem href="https://aider.chat" name="aider" note="AI-Pair-Programming im Terminal, git-nativ." />
                <LinkItem href="https://continue.dev" name="Continue" note="Open-Source-Autopilot für IDEs." />
              </ul>
            </div>
            <div className="space-y-2">
              <div className="font-bold text-foreground flex items-center gap-1.5"><BookOpen className="h-3.5 w-3.5 text-amber-400" /> Lernen &amp; Community</div>
              <ul className="list-disc pl-4 space-y-1.5">
                <LinkItem href="https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview" name="Prompt-Engineering (Anthropic)" note="die beste praktische Anleitung." />
                <LinkItem href="https://github.com/anthropics/anthropic-cookbook" name="Anthropic Cookbook" note="lauffähige Rezepte für Tools, RAG, Agenten." />
                <LinkItem href="https://www.promptingguide.ai" name="Prompt Engineering Guide" note="herstellerneutrales Nachschlagewerk." />
                <LinkItem href="https://github.com/mem0ai/mem0" name="Mem0" note="die auto-lernende Memory-Schicht hinter deinem Gedächtnis." />
                <LinkItem href="https://www.reddit.com/r/LocalLLaMA/" name="r/LocalLLaMA" note="der Puls der lokalen-LLM-Szene." />
              </ul>
            </div>
          </div>
        </section>

        {/* 14 — Troubleshooting */}
        <Card id="troubleshooting" icon={LifeBuoy} color="text-rose-400" title="14. Troubleshooting" kicker="Wenn's hakt" wide>
          <ul className="space-y-2 list-disc pl-4">
            <li><strong>Keine Verbindung?</strong> Selbes LAN wie die Box? IP/Port stimmen (<Pill>:9001</Pill>)? Backend-Status im <strong>Cockpit</strong> prüfen.</li>
            <li><strong>Modell antwortet nicht / langsam?</strong> Im <strong>Cockpit → Dienste</strong> schauen, ob <Pill>llama-swap</Pill> grün ist; sonst Restart. Erstes Token nach Swap dauert (Modell lädt).</li>
            <li><strong>Agent dreht durch / halluziniert?</strong> Frische Session starten (Hermes Desktop oder <strong>Konsole</strong>) — meist ist es vollgemüllter Kontext.</li>
            <li><strong>Gedächtnis findet nichts?</strong> Embedding-Dienst online? Semantisch suchen (Sinn statt exaktem Wort).</li>
            <li><strong>Angenommene Karte hat etwas zerschossen?</strong> Meist fängt es der Auto-Revert; sonst <strong>Chronik → Zeitmaschine</strong> (Stand von gestern) oder Backup &amp; <Pill>restore.sh</Pill>.</li>
          </ul>
        </Card>

      </div>

      <p className="text-center text-[10px] text-muted-foreground/50 pt-2">
        Mission Control 2 · AI-Bibel · Stand Juli 2026 — lebendes Dokument, wächst mit dem Stack.
      </p>
    </div>
  )
}