Feat: Anleitung-Tab -> allgemeine AI-Bibel (Stand Juni 2026)
Kompletter Rework von GuideView: statt veralteter Editor-Setups + KI-Wissensdatenbank jetzt ein allgemeines AI-Nachschlagewerk mit 14 Sektionen (Grundlagen, MoE/Quant, lokal betreiben, Modell-Landschaft, Gateway-Trick, MCP, Skills, Gedaechtnis/RAG, Agenten, IDE, Tricks/Kniffe, Sicherheit/Wartung, kuratierte Ressourcen, Troubleshooting) + Sprung-Nav. Allgemein gehalten; Stack-Spezifika nur als "Bei dir konkret"-Callouts, wo eine echte Einschraenkung sie rechtfertigt. Tote Verweise entfernt: AnythingLLM, hermes-webui/ChatUI :8787, reasoning-Rolle. Neuer Stand drin: Mem0 (auto-lernend/semantisch/graph, 4-Typen-Taxonomie, Hermes-Onboarding), Terminal (ttyd), Backup+restore.sh, git-basierter Update-Check + Hermes-Update + Gehirn-Check. Live gegen die Box verifiziert; Frontend gebaut, dist committed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
import{r as K,a as Hv,g as Hr,R as Um,c as q2,j as Ne,l as Z2,S as K2,b as Vx,T as $2}from"./index-COVfHYKu.js";/**
|
import{r as K,a as Hv,g as Hr,R as Um,c as q2,j as Ne,l as Z2,S as K2,b as Vx,T as $2}from"./index-BNlNRfcu.js";/**
|
||||||
* @license
|
* @license
|
||||||
* Copyright 2010-2023 Three.js Authors
|
* Copyright 2010-2023 Three.js Authors
|
||||||
* SPDX-License-Identifier: MIT
|
* SPDX-License-Identifier: MIT
|
||||||
+564
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
-524
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -7,8 +7,8 @@
|
|||||||
<link rel="manifest" href="/manifest.webmanifest" />
|
<link rel="manifest" href="/manifest.webmanifest" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>Mission Control 2.0</title>
|
<title>Mission Control 2.0</title>
|
||||||
<script type="module" crossorigin src="/assets/index-COVfHYKu.js"></script>
|
<script type="module" crossorigin src="/assets/index-BNlNRfcu.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-BSw7DIjB.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-DuS2cUe8.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
+426
-498
@@ -1,565 +1,493 @@
|
|||||||
import { useState, useEffect } from "react"
|
import { useState, type ReactNode } from "react"
|
||||||
import { BookOpen, Layers, Brain, Terminal, Code, RefreshCw, Cpu, Star, Compass, Wrench, Shield, ArrowRight } from "lucide-react"
|
import {
|
||||||
import { api, type Health } from "@/lib/api"
|
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 { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ *
|
||||||
|
* Anleitung = Allgemeine AI-Bibel (Stand Juni 2026).
|
||||||
|
* Allgemeines Nachschlagewerk für lokale & agentische AI.
|
||||||
|
* Stack-Spezifika nur als "Bei dir konkret"-Callouts, wo eine echte
|
||||||
|
* Einschränkung sie relevant macht — sonst bewusst allgemein gehalten.
|
||||||
|
* ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
const SECTIONS: { id: string; label: string }[] = [
|
||||||
|
{ 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 rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 shadow-lg shadow-black/10 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() {
|
export function GuideView() {
|
||||||
const [mainTab, setMainTab] = useState<"connect" | "concepts">("connect")
|
const [showAllNav, setShowAllNav] = useState(false)
|
||||||
const [activeTab, setActiveTab] = useState<"roocode" | "cursor" | "opencode">("roocode")
|
|
||||||
const [health, setHealth] = useState<Health | null>(null)
|
|
||||||
|
|
||||||
const currentHost = "192.168.178.151"
|
|
||||||
|
|
||||||
const [testing, setTesting] = useState(false)
|
|
||||||
const [testResult, setTestResult] = useState<string | null>(null)
|
|
||||||
|
|
||||||
function checkConnection() {
|
|
||||||
setTesting(true)
|
|
||||||
api<Health>("/api/health")
|
|
||||||
.then((h) => {
|
|
||||||
setHealth(h)
|
|
||||||
setTestResult(h.engine_reachable ? "success" : "partial")
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
setHealth(null)
|
|
||||||
setTestResult("fail")
|
|
||||||
})
|
|
||||||
.finally(() => setTesting(false))
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
checkConnection()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-7">
|
||||||
{/* Title */}
|
{/* Hero */}
|
||||||
<div>
|
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 shadow-lg shadow-black/10 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">
|
<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">
|
||||||
Stack-Anleitung & Vibe-Coding-Guide
|
Die AI-Bibel
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
|
||||||
Einsteigerfreundliche Erklärungen zu deinem Stack und Schritt-für-Schritt-Anleitungen zur Anbindung deiner Editoren.
|
Allgemeines Nachschlagewerk für lokale & agentische AI — Konzepte, Tricks, Kniffe und
|
||||||
</p>
|
kuratierte Quellen. <span className="font-semibold text-foreground">Stand Juni 2026.</span>{" "}
|
||||||
</div>
|
Das meiste gilt überall; <span className="text-primary font-semibold">„Bei dir konkret"</span>-Kästen
|
||||||
|
zeigen, was dein Stack daraus macht.
|
||||||
{/* Main Mode Tabs */}
|
|
||||||
<div className="flex gap-4 border-b border-border/40 pb-px">
|
|
||||||
<button
|
|
||||||
onClick={() => setMainTab("connect")}
|
|
||||||
className={cn(
|
|
||||||
"pb-3 text-xs font-bold uppercase tracking-wider border-b-2 px-1 transition-all",
|
|
||||||
mainTab === "connect"
|
|
||||||
? "border-primary text-primary"
|
|
||||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Editor-Anbindung
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setMainTab("concepts")}
|
|
||||||
className={cn(
|
|
||||||
"pb-3 text-xs font-bold uppercase tracking-wider border-b-2 px-1 transition-all",
|
|
||||||
mainTab === "concepts"
|
|
||||||
? "border-primary text-primary"
|
|
||||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
KI-Wissensdatenbank (Juni 2026)
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mainTab === "connect" ? (
|
|
||||||
<>
|
|
||||||
{/* Connection HUD Panel */}
|
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/10 flex flex-col sm:flex-row justify-between sm:items-center gap-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className={cn(
|
|
||||||
"h-3 w-3 rounded-full ring-2 ring-black/40",
|
|
||||||
testResult === "success" && "bg-emerald-500 animate-pulse",
|
|
||||||
testResult === "partial" && "bg-amber-500",
|
|
||||||
testResult === "fail" && "bg-red-500",
|
|
||||||
!testResult && "bg-muted"
|
|
||||||
)} />
|
|
||||||
<div>
|
|
||||||
<div className="text-xs font-bold uppercase tracking-wider text-foreground">Lokaler Verbindungs-Check</div>
|
|
||||||
<div className="text-[10px] text-muted-foreground mt-0.5 font-mono">
|
|
||||||
{testResult === "success" && `Erfolgreich! Dein PC hat Zugriff auf das Box-Gateway (v${health?.version || ""}).`}
|
|
||||||
{testResult === "partial" && "Gateway erreichbar, aber die llama-cpp-Engine ist offline."}
|
|
||||||
{testResult === "fail" && "Verbindung fehlgeschlagen. Ist die Box im selben LAN-Netzwerk?"}
|
|
||||||
{!testResult && "Verbindung wird geprüft..."}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={checkConnection}
|
|
||||||
disabled={testing}
|
|
||||||
className="h-8 px-3 flex items-center gap-1.5 text-xs font-semibold rounded-lg border border-border/60 bg-background/20 hover:border-primary/50 transition-colors disabled:opacity-50 cursor-pointer self-start sm:self-auto shrink-0"
|
|
||||||
>
|
|
||||||
<RefreshCw className={cn("h-3.5 w-3.5", testing && "animate-spin")} />
|
|
||||||
<span>Testen</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Conceptual Explanation Grid */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center gap-2 px-1">
|
|
||||||
<BookOpen className="h-4.5 w-4.5 text-primary" />
|
|
||||||
<h2 className="text-xs font-bold uppercase tracking-wider text-foreground">Wie funktioniert mein Stack?</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-4 sm:grid-cols-3">
|
|
||||||
{/* Card 1: Dashboard */}
|
|
||||||
<div className="p-4 rounded-xl border border-border/60 bg-card/20 space-y-2">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Cpu className="h-4 w-4 text-cyan-400" />
|
|
||||||
<h3 className="text-xs font-bold text-foreground">1. Die Zentrale</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-muted-foreground leading-relaxed">
|
|
||||||
Dein Dashboard. Hier siehst du die CPU-/RAM- und GPU-Last der Box und siehst sofort, ob Updates anstehen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card 2: Llama Swap */}
|
|
||||||
<div className="p-4 rounded-xl border border-border/60 bg-card/20 space-y-2">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Layers className="h-4 w-4 text-violet-400" />
|
|
||||||
<h3 className="text-xs font-bold text-foreground">2. Modell-Zentrale</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-muted-foreground leading-relaxed">
|
|
||||||
Deine GGUF-Datenbank. Gesteuert von <strong>llama-swap</strong>. Lädt dein schnelles Alltags-Hirn (`fast`) oder dein schweres Logik-Hirn (`heavy`) vollautomatisch im VRAM.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card 3: Memory */}
|
|
||||||
<div className="p-4 rounded-xl border border-border/60 bg-card/20 space-y-2">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Brain className="h-4 w-4 text-indigo-400" />
|
|
||||||
<h3 className="text-xs font-bold text-foreground">3. Das Gedächtnis</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-muted-foreground leading-relaxed">
|
|
||||||
Dein geteiltes Langzeitgedächtnis (Memory-Pool). Hier merkt sich dein Agent Regeln, Projekt-Details und Vorlieben.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Editor Integration Guides */}
|
{/* Sprung-Navigation (sticky) */}
|
||||||
<div className="space-y-4">
|
<div className="sticky top-0 z-10 -mx-1 px-1">
|
||||||
<div className="flex items-center gap-2 px-1">
|
<div className="rounded-xl border border-border/50 bg-card/70 backdrop-blur-xl p-2 shadow-lg shadow-black/20">
|
||||||
<Code className="h-4.5 w-4.5 text-primary" />
|
<div className="flex items-center gap-1.5 flex-wrap">
|
||||||
<h2 className="text-xs font-bold uppercase tracking-wider text-foreground">Vibe Coding auf dem PC einrichten</h2>
|
<Compass className="h-3.5 w-3.5 text-primary ml-1 mr-0.5 shrink-0" />
|
||||||
</div>
|
{(showAllNav ? SECTIONS : SECTIONS.slice(0, 9)).map((s) => (
|
||||||
|
|
||||||
{/* Editor Selector Tabs */}
|
|
||||||
<div className="flex gap-1.5 bg-card/20 p-1 border border-border/40 rounded-xl max-w-fit">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab("roocode")}
|
key={s.id}
|
||||||
className={cn(
|
onClick={() => scrollToId(s.id)}
|
||||||
"rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer flex items-center gap-1.5",
|
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"
|
||||||
activeTab === "roocode"
|
|
||||||
? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
|
|
||||||
: "text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<Star className="h-3.5 w-3.5 fill-amber-400/20" />
|
{s.label}
|
||||||
Roo Code (VS Code)
|
|
||||||
</button>
|
</button>
|
||||||
|
))}
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab("cursor")}
|
onClick={() => setShowAllNav((v) => !v)}
|
||||||
className={cn(
|
className="rounded-lg px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/10 transition-colors cursor-pointer"
|
||||||
"rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",
|
|
||||||
activeTab === "cursor"
|
|
||||||
? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
|
|
||||||
: "text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
Cursor IDE
|
{showAllNav ? "weniger" : "+ mehr"}
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab("opencode")}
|
|
||||||
className={cn(
|
|
||||||
"rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",
|
|
||||||
activeTab === "opencode"
|
|
||||||
? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
|
|
||||||
: "text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
OpenCode Desktop
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Guide Content */}
|
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10">
|
|
||||||
{activeTab === "roocode" && (
|
|
||||||
<div className="space-y-4 text-xs leading-relaxed text-muted-foreground">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h3 className="text-sm font-bold text-foreground">Roo Code Kopplung (Empfohlene Open-Source-Erweiterung)</h3>
|
|
||||||
<p>Roo Code ist die beliebteste und flexibelste Vibe-Coding-Erweiterung für VS Code im Jahr 2026. Sie ermöglicht vollen Zugriff auf das Terminal und das MCP-Gedächtnis.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3.5 border-t border-border/20 pt-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">1</span>
|
|
||||||
Roo Code installieren
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Suche in VS Code nach der Erweiterung <strong>Roo Code</strong> und installiere sie.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">2</span>
|
|
||||||
API-Anbindung konfigurieren
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Klicke auf das Roo-Code-Symbol in der Sidebar, öffne die Einstellungen (Zahnrad) und stelle folgendes ein:</p>
|
|
||||||
<div className="pl-6 pt-1">
|
|
||||||
<div className="p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground">
|
|
||||||
<div><span className="text-muted-foreground/60">API Provider:</span> OpenAI Compatible</div>
|
|
||||||
<div><span className="text-muted-foreground/60">Base URL:</span> http://{currentHost}:9001/v1</div>
|
|
||||||
<div><span className="text-muted-foreground/60">API Key:</span> <span className="italic text-muted-foreground/50">beliebig (z.B. "local")</span></div>
|
|
||||||
<div><span className="text-muted-foreground/60">Model ID:</span> auto</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">3</span>
|
|
||||||
MCP Gedächtnis verknüpfen (Optional, aber empfohlen)
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Damit Roo Code auf deinen <strong>Gedächtnis-Pool</strong> zugreifen kann, kopiere die MCP-Konfiguration aus dem Reiter <strong>Verbinden</strong> und füge sie in deine lokale Roo-Code-Konfigurationsdatei ein.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "cursor" && (
|
|
||||||
<div className="space-y-4 text-xs leading-relaxed text-muted-foreground">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h3 className="text-sm font-bold text-foreground">Cursor IDE Kopplung (Proprietäre All-in-One IDE)</h3>
|
|
||||||
<p>Cursor ist ein polierter, extrem schneller VS-Code-Fork mit hervorragenden, tief integrierten Autovervollständigungen (Tab-Completions).</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3.5 border-t border-border/20 pt-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">1</span>
|
|
||||||
Einstellungen öffnen
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Öffne Cursor, klicke oben rechts auf das Zahnrad (Settings) und navigiere zu <strong>Models</strong>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">2</span>
|
|
||||||
OpenAI API überschreiben
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Deaktiviere die Standard-Cloudmodelle, klappe den Bereich <strong>OpenAI API</strong> auf und konfiguriere:</p>
|
|
||||||
<div className="pl-6 pt-1">
|
|
||||||
<div className="p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground">
|
|
||||||
<div><span className="text-muted-foreground/60">Override Base URL:</span> http://{currentHost}:9001/v1</div>
|
|
||||||
<div><span className="text-muted-foreground/60">API Key:</span> <span className="italic text-muted-foreground/50">beliebig (z.B. "local")</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">3</span>
|
|
||||||
Modell hinzufügen
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Trage in der Modell-Liste ein neues Modell mit dem Namen <strong>auto</strong> ein und wähle es als aktives Modell aus. Cursor leitet ab jetzt alle deine Anfragen an die Box weiter.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "opencode" && (
|
|
||||||
<div className="space-y-4 text-xs leading-relaxed text-muted-foreground">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h3 className="text-sm font-bold text-foreground">OpenCode Desktop Kopplung (Open-Source Vibe-Coding-App)</h3>
|
|
||||||
<p>OpenCode ist eine standalone Desktop-App für ein ablenkungsfreies Coden über natürliche Sprache. Es trennt den KI-Prozess von deinem Editor.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3.5 border-t border-border/20 pt-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">1</span>
|
|
||||||
OpenCode Desktop herunterladen
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Lade die Desktop-Anwendung von der offiziellen Website (opencode.ai) herunter und starte sie.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">2</span>
|
|
||||||
Endpunkt auf Box-Gateway setzen
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Gehe in den Bereich Einstellungen ➔ Provider, deaktiviere die Cloud-Voreinstellungen und trage deinen lokalen Server ein:</p>
|
|
||||||
<div className="pl-6 pt-1">
|
|
||||||
<div className="p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground">
|
|
||||||
<div><span className="text-muted-foreground/60">Base URL:</span> http://{currentHost}:9001/v1</div>
|
|
||||||
<div><span className="text-muted-foreground/60">Model:</span> auto</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-semibold text-foreground flex items-center gap-1.5">
|
|
||||||
<span className="h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]">3</span>
|
|
||||||
Erster Vibe-Coding Test
|
|
||||||
</div>
|
|
||||||
<p className="pl-6">Starte eine neue Session und teste die Verbindung mit einem einfachen Prompt, z. B. *"Erstelle ein einfaches Skript, das die Fibonaccizahlen berechnet"*. Das Box-Gateway tauscht das Modell im Hintergrund vollautomatisch aus.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Diagnostic Tips Card */}
|
<div className="grid gap-5 md:grid-cols-2">
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 space-y-3 shadow-lg shadow-black/10">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Terminal className="h-4.5 w-4.5 text-primary" />
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">Was tun, wenn das Coden hakt?</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul className="text-[11px] text-muted-foreground space-y-2 list-disc pl-4 leading-relaxed">
|
{/* 1 — Grundlagen */}
|
||||||
<li><strong>Keine Verbindung?</strong> Überprüfe im Live-Verbindungsprüfer oben, ob die Box-IP erreichbar ist. Stelle sicher, dass dein lokaler PC im selben WLAN/LAN-Netzwerk wie die Box eingeloggt ist.</li>
|
<Card id="grundlagen" icon={Cpu} color="text-cyan-400" title="1. Wie LLMs ticken" kicker="Grundlagen">
|
||||||
<li><strong>Modell antwortet nicht?</strong> Schaue in der <strong>Zentrale</strong> unter <strong>Dienste</strong>, ob `llama-swap` aktiv (grün) ist. Wenn nicht, klicke daneben auf <strong>Restart</strong>.</li>
|
<p>
|
||||||
<li><strong>Hermes Agent reagiert merkwürdig?</strong> Starte im <strong>Terminal</strong> eine frische Session (neuer `hermes chat`). Ältere Sessions sammeln Kontext-Müll an.</li>
|
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 & 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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</>
|
<div className="space-y-2">
|
||||||
) : (
|
<p><strong>GPU-Backends</strong> — wie gerechnet wird:</p>
|
||||||
/* KI-Wissensdatenbank Concepts Tab */
|
<ul className="list-disc pl-4 space-y-1">
|
||||||
<div className="space-y-6">
|
<li><Pill>CUDA</Pill> NVIDIA · <Pill>ROCm</Pill> AMD · <Pill>Vulkan</Pill> herstellerübergreifend · <Pill>Metal</Pill> Apple</li>
|
||||||
{/* Introduction */}
|
</ul>
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/10 flex items-start gap-4">
|
<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>
|
||||||
<Compass className="h-8 w-8 text-primary shrink-0 mt-0.5" />
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">Entwickler-Guide: Modernes Agentic Coding (2026)</h3>
|
|
||||||
<p className="text-xs text-muted-foreground leading-normal">
|
|
||||||
Willkommen im Wissenszentrum für dein Mission Control 2 Setup. Hier erfährst du, wie die verschiedenen Technologien (MoE, MCP, Skills, Hermes) zusammenarbeiten und wie du das Maximum aus deinen AI-Prozessabläufen herausholst.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Stack>
|
||||||
|
Deine Box hat eine AMD-APU (gfx1151). <strong>Einschränkung & 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>
|
||||||
|
|
||||||
{/* Concepts Grid */}
|
{/* 4 — Modell-Landschaft */}
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
<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">
|
||||||
{/* MoE Card */}
|
<div className="space-y-2">
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4">
|
<p><strong>Open-Weight (lokal nutzbar):</strong></p>
|
||||||
<div className="flex items-center gap-2 border-b border-border/20 pb-3">
|
<ul className="list-disc pl-4 space-y-1">
|
||||||
<Layers className="h-5 w-5 text-cyan-400" />
|
<li><strong>Qwen</strong> (Alibaba) — starke Allrounder + Coder + Vision, viele Größen/MoE.</li>
|
||||||
<div>
|
<li><strong>Llama</strong> (Meta), <strong>Gemma</strong> (Google), <strong>Phi</strong> (Microsoft) — solide Open-Familien.</li>
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">1. Mixture of Experts (MoE)</h3>
|
<li><strong>DeepSeek</strong>, <strong>Mistral/Mixtral</strong> — kräftige MoE-/Reasoning-Modelle.</li>
|
||||||
<span className="text-[9px] text-cyan-400 font-mono">Effizienz durch Spezialisierung</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground space-y-2 leading-normal">
|
|
||||||
<p>
|
|
||||||
<strong>Was ist das?</strong> Bei traditionellen LLMs wird für jedes Wort das gesamte neuronale Netz aktiviert. Bei MoE besteht das Modell aus mehreren spezialisierten Teilnetzwerken (den <em>Experts</em>). Ein intelligenter <em>Router</em> entscheidet pro Token (Wortteil), welche Experten zur Berechnung herangezogen werden.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Warum in MC2?</strong> So können extrem leistungsstarke Modelle (wie DeepSeek-V3, Mixtral oder Command R+) mit wesentlich geringeren Hardwarekosten ausgeführt werden. Es wird nur ein Bruchteil der Parameter geladen und aktiv berechnet, was Speicherplatz spart und die Inferenz beschleunigt.
|
|
||||||
</p>
|
|
||||||
<div className="p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] text-foreground">
|
|
||||||
<span className="text-cyan-400">Vorteil:</span> GPT-4-Klasse Performance bei einem Bruchteil der aktiven VRAM-Last auf deinem Homelab!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* MCP Card */}
|
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4">
|
|
||||||
<div className="flex items-center gap-2 border-b border-border/20 pb-3">
|
|
||||||
<Compass className="h-5 w-5 text-violet-400" />
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">2. Model Context Protocol (MCP)</h3>
|
|
||||||
<span className="text-[9px] text-violet-400 font-mono">Standardisierte Agenten-Tools</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground space-y-2 leading-normal">
|
|
||||||
<p>
|
|
||||||
<strong>Was ist das?</strong> MCP ist ein offenes Protokoll (initiiert von Anthropic), das festlegt, wie ein KI-Client (z.B. Roo Code auf deinem PC) mit externen Datenquellen und Tools kommuniziert. Es funktioniert wie ein USB-Standard für KI.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Warum in MC2?</strong> MCP trennt den AI-Kern von der Umgebung. Statt für jeden Editor eigene Tools zu schreiben, binden deine Agenten (Roo Code, Hermes) einfach MCP-Server an. Diese Server können Dateien lesen, Websuchen durchführen, Git bedienen oder mit deiner App interagieren.
|
|
||||||
</p>
|
|
||||||
<div className="space-y-1.5 p-3 bg-background/25 rounded-xl border border-border/30 text-[10px]">
|
|
||||||
<div className="font-bold text-foreground">Gute Quellen für MCP Server:</div>
|
|
||||||
<ul className="list-disc pl-4 space-y-1 text-muted-foreground">
|
|
||||||
<li>
|
|
||||||
<a href="https://smithery.ai/" target="_blank" rel="noopener" className="text-primary hover:underline font-semibold">Smithery Registry</a> — Ein Portal zum Suchen und automatischen Installieren von MCP Servern.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://glama.ai/mcp/servers" target="_blank" rel="noopener" className="text-primary hover:underline font-semibold">Glama MCP Registry</a> — Eine kuratierte, umfangreiche Community-Datenbank von MCP Servern.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/modelcontextprotocol/servers" target="_blank" rel="noopener" className="text-primary hover:underline font-semibold">Offizielles Anthropic Repo</a> — Das offizielle Repository mit Standards wie filesystem, postgres, sqlite, brave-search und puppeteer.
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
</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: <Pill>fast</Pill> (Alltag/Vision/MoE) · <Pill>heavy</Pill> (schwere Logik) ·
|
||||||
|
<Pill>coder</Pill> · <Pill>scout</Pill> · <Pill>vision</Pill> · <Pill>embed</Pill> (fürs Gedächtnis) ·
|
||||||
|
<Pill>hermes</Pill> (Agent-Hirn). Verwalten/tauschen im <strong>Modell-Manager</strong>-Tab.
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Skills Card */}
|
{/* 5 — Gateway-Trick */}
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4">
|
<Card id="gateway" icon={Network} color="text-amber-400" title="5. Der Gateway-Trick" kicker="OpenAI-kompatibel = überall andocken">
|
||||||
<div className="flex items-center gap-2 border-b border-border/20 pb-3">
|
|
||||||
<Brain className="h-5 w-5 text-emerald-400" />
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">3. Agent Skills</h3>
|
|
||||||
<span className="text-[9px] text-emerald-400 font-mono">Modulbasierte Fähigkeiten</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground space-y-2 leading-normal">
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Was ist das?</strong> Ein Skill ist ein Verzeichnis mit standardisierten Anweisungen, Scripten und Beispielen, das deine Agenten für spezifische Aufgaben trainiert (z.B. Test-Driven Development, Code-Vereinfachung, API-Design).
|
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>
|
||||||
<p>
|
<p>
|
||||||
<strong>Wie benutzt man sie?</strong> Lege einen Skill-Ordner unter <code>.agents/skills/<name></code> in deinem Projekt an. Das Herzstück ist die Datei <code>SKILL.md</code> mit folgendem Aufbau:
|
Die <Pill>model:auto</Pill>-Idee: du sagst „auto", das Gateway wählt das passende Modell je nach Anfrage und
|
||||||
|
lädt es bei Bedarf.
|
||||||
|
</p>
|
||||||
|
<Stack>
|
||||||
|
Dein Gateway: <Pill>http://192.168.178.151:9001/v1</Pill>, Model <Pill>auto</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 & 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>
|
</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">
|
<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
|
name: tdd-pro
|
||||||
description: Drive development with strict TDD practices
|
description: Treibt Entwicklung mit strikter TDD-Praxis
|
||||||
---
|
---
|
||||||
# Instructions
|
# Instructions
|
||||||
...`}
|
...`}
|
||||||
</pre>
|
</pre>
|
||||||
<div className="space-y-1.5 p-3 bg-background/25 rounded-xl border border-border/30 text-[10px]">
|
<p>
|
||||||
<div className="font-bold text-foreground">Wo gibt es Skills & wo liegen sie?</div>
|
Suchen & installieren über die <strong>skills.sh</strong>-Registry: <Pill>npx skills find</Pill> /
|
||||||
<ul className="list-disc pl-4 space-y-2.5 text-muted-foreground">
|
<Pill>npx skills add owner/repo</Pill>. Skills liegen projektweit (vom Agent beim Start gelesen) oder global.
|
||||||
<li>
|
</p>
|
||||||
<strong>skills.sh Registry & CLI:</strong> Das offizielle offene Portal für Agent-Skills (<a href="https://skills.sh/" target="_blank" rel="noopener" className="text-primary hover:underline font-semibold">skills.sh</a>). Du kannst Skills direkt über das Terminal suchen und in deinem Projekt installieren:
|
</Card>
|
||||||
<div className="mt-1 font-mono text-[9px] bg-background/40 p-2 rounded border border-border/30 text-cyan-300">
|
|
||||||
# Nach Skills suchen:<br />
|
{/* 8 — Gedächtnis & RAG */}
|
||||||
<span className="text-foreground">npx skills find</span><br />
|
<Card id="memory" icon={Database} color="text-indigo-400" title="8. Gedächtnis & RAG" kicker="Modelle vergessen — du nicht" wide>
|
||||||
# Skill zum aktuellen Projekt hinzufügen:<br />
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
<span className="text-foreground">npx skills add [owner/repo]</span>
|
<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 & „lost in the middle" — gezieltes Abrufen skaliert besser.</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
<div className="space-y-2">
|
||||||
<li>
|
<p><strong>Auto-lernendes Gedächtnis</strong> ist die nächste Stufe:</p>
|
||||||
<strong>Globaler Pfad:</strong> <code className="text-foreground select-all">C:\Users\TobisPC\.gemini\config\plugins\agent-skills\skills\</code>. Hier sind deine vorinstallierten, global verfügbaren Skills (wie <i>code-simplification</i>, <i>api-and-interface-design</i>, etc.) abgelegt.
|
<ul className="list-disc pl-4 space-y-1">
|
||||||
</li>
|
<li>extrahiert Fakten <em>selbst</em> aus Gesprächen, statt nur abzuspeichern</li>
|
||||||
<li>
|
<li>dedupliziert semantisch (kein 10× derselbe Fakt)</li>
|
||||||
<strong>Projekt-Pfad:</strong> <code className="text-foreground select-all">.agents/skills/</code>. Lege diesen Ordner im Root eines beliebigen Projekts an. Dein lokaler Editor-Agent (z.B. Roo Code) liest ihn beim Starten automatisch ein.
|
<li><strong>Graph-Sicht</strong> = Fakten <em>plus</em> ihre Beziehungen, nicht nur eine flache Liste</li>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Vorlagen / Beispiele:</strong> Kopiere einfach bestehende Skills aus dem globalen Verzeichnis oder erstelle deine eigenen, indem du eine <code>SKILL.md</code> mit YAML-Header (name, description) anlegst.
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Stack>
|
||||||
|
Dein Gedächtnis (Tab <strong>Gedächtnis</strong>) ist <strong>Mem0</strong>-basiert: auto-lernend &
|
||||||
|
semantisch, <strong>graph-first</strong> dargestellt, mit 4-Typen-Taxonomie
|
||||||
|
(<Pill>Identität</Pill> · <Pill>Wissen</Pill> · <Pill>Regeln</Pill> · <Pill>Ereignisse</Pill>). Einstieg über
|
||||||
|
ein kurzes <strong>Hermes-Onboarding-Gespräch</strong> im Terminal — der Agent lernt im Hintergrund nach jedem Turn.
|
||||||
|
<br /><strong>Gotcha:</strong> ein gelöschter Fakt kann wieder auftauchen, solange die Original-Nachricht noch im Verlauf steht (additive Extraktion).
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Hermes Card */}
|
{/* 9 — Agenten */}
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4">
|
<Card id="agents" icon={Bot} color="text-rose-400" title="9. Autonome Agenten betreiben" kicker="LLM in der Schleife" wide>
|
||||||
<div className="flex items-center gap-2 border-b border-border/20 pb-3">
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
<Cpu className="h-5 w-5 text-indigo-400" />
|
<div className="space-y-2">
|
||||||
<div>
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">4. Arbeiten mit Hermes</h3>
|
|
||||||
<span className="text-[9px] text-indigo-400 font-mono">Autonomer Box-Agent</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground space-y-2 leading-normal">
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Was ist das?</strong> Hermes ist der auf der Box installierte, autonome Hintergrund-Agent. Er verwaltet das Dateisystem und kann über REST (Port 8642) oder eine interaktive ChatUI (Port 8787) gesteuert werden.
|
Ein <strong>Agent</strong> ist ein LLM in einer Schleife mit Tools:
|
||||||
</p>
|
<em> denken → Tool aufrufen → Ergebnis beobachten → weiter</em>, bis das Ziel erreicht ist.
|
||||||
<p>
|
|
||||||
<strong>Best Practices für Hermes:</strong>
|
|
||||||
</p>
|
</p>
|
||||||
<ul className="list-disc pl-4 space-y-1">
|
<ul className="list-disc pl-4 space-y-1">
|
||||||
<li><strong>Chat-Kontext sauber halten:</strong> Starte regelmäßig neue Chats. Zu große Historien verlangsamen den Agenten und führen zu Halluzinationen.</li>
|
<li><strong>Guardrails</strong> (Hard-Stop, Tool-Limits) verhindern Endlos-Loops, wenn ein Tool fehlt oder hängt.</li>
|
||||||
<li><strong>Gehirn festlegen:</strong> Konfiguriere im Gateway die Modell-Rolle <code>brain</code> für Hermes, damit er automatisch das passende Modell per Llama Swap lädt.</li>
|
<li><strong>Kontext-Hygiene</strong> ist die wichtigste Disziplin: frische Sessions starten — vollgemüllte Historien werden langsam, driften und halluzinieren.</li>
|
||||||
<li><strong>Sandbox umgehen:</strong> Erweitere Hermes' System-Prompt (`~/.hermes/SOUL.md` / Config), um Befehle über SSH an deinen Windows-PC zu leiten.</li>
|
<li><strong>Kanäle:</strong> CLI/Terminal, Chat-UI, Messaging (z.B. Telegram), reine API.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
|
<Stack>
|
||||||
|
<strong>Hermes</strong> ist dein Box-Agent (Hirn = <Pill>fast</Pill>). Reden tust du mit ihm im
|
||||||
|
<strong> Terminal</strong>-Tab (Web-Terminal via ttyd) oder per <strong>Telegram</strong>. Er hat MCP-Server für
|
||||||
|
Gedächtnis, Stack-Steuerung, Web-Fetch und <strong>PC-Steuerung</strong> (Executor auf deinem Windows-PC).
|
||||||
|
Status & Verdrahtung im <strong>Hermes</strong>-Tab.
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Tools Best Practices */}
|
{/* 10 — IDE anbinden */}
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4 md:col-span-2">
|
<Card id="ide" icon={Code} color="text-cyan-400" title="10. IDE / Editor anbinden" kicker="Vibe-Coding lokal">
|
||||||
<div className="flex items-center gap-2 border-b border-border/20 pb-3">
|
|
||||||
<Wrench className="h-5 w-5 text-amber-400" />
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">5. Richtiges Arbeiten mit Tools (Dateien, Terminal, DevTools)</h3>
|
|
||||||
<span className="text-[9px] text-amber-400 font-mono">Fehler vermeiden & Kosten senken</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid md:grid-cols-3 gap-4 text-xs text-muted-foreground leading-normal">
|
|
||||||
<div className="space-y-1.5 p-3 bg-background/10 rounded-xl border border-border/30">
|
|
||||||
<h4 className="font-bold text-foreground flex items-center gap-1">
|
|
||||||
<Terminal className="h-3.5 w-3.5 text-primary" /> Terminal
|
|
||||||
</h4>
|
|
||||||
<p className="text-[11px]">
|
|
||||||
Verwende nur non-interaktive Befehle. Hänge bei langen Tasks (wie dev-Servern) ein <code>&</code> an oder nutze die integrierte Job-Verwaltung. Verwende niemals interaktive Eingabeaufforderungen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5 p-3 bg-background/10 rounded-xl border border-border/30">
|
|
||||||
<h4 className="font-bold text-foreground flex items-center gap-1">
|
|
||||||
<Code className="h-3.5 w-3.5 text-cyan-400" /> Dateimanager
|
|
||||||
</h4>
|
|
||||||
<p className="text-[11px]">
|
|
||||||
Überschreibe keine ganzen Dateien, wenn du nur eine Zeile ändern willst. Verwende gezielte Ersetzungs-Tools (wie <code>replace_file_content</code>). Das spart massiv Token-Kosten und beugt Fehlern vor.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5 p-3 bg-background/10 rounded-xl border border-border/30">
|
|
||||||
<h4 className="font-bold text-foreground flex items-center gap-1">
|
|
||||||
<Wrench className="h-3.5 w-3.5 text-violet-400" /> Browser DevTools
|
|
||||||
</h4>
|
|
||||||
<p className="text-[11px]">
|
|
||||||
Koppele deine Debug-Dienste mit dem Chrome-DevTools-Plugin. So kann der Agent Fehler in der Konsole live analysieren und das DOM verifizieren, anstatt blind zu raten.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Autonomie Erklärung */}
|
|
||||||
<div className="rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4 md:col-span-2">
|
|
||||||
<div className="flex items-center gap-2 border-b border-border/20 pb-3">
|
|
||||||
<Shield className="h-5 w-5 text-emerald-400" />
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xs font-bold uppercase tracking-wider text-foreground">Wie autonom ist Mission Control 2 wirklich?</h3>
|
|
||||||
<span className="text-[9px] text-emerald-400 font-mono">Die Grenze zwischen Automatisierung und Kontrolle</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground space-y-3 leading-normal">
|
|
||||||
<p>
|
<p>
|
||||||
Mission Control 2 ist als <strong>semi-autonomes Gateway</strong> konzipiert. Es besitzt die Fähigkeit, komplexe Workflows komplett selbstständig durchzuführen, unterliegt jedoch strikten Sicherheitsplanken:
|
Jede <strong>OpenAI-kompatible</strong> IDE oder Extension lässt sich auf einen lokalen Server umbiegen —
|
||||||
|
Base-URL + Model eintragen, fertig:
|
||||||
</p>
|
</p>
|
||||||
<div className="grid sm:grid-cols-2 gap-4 pt-1">
|
<ul className="list-disc pl-4 space-y-1">
|
||||||
<div className="space-y-1.5">
|
<li><strong>Cline</strong> & <strong>Roo Code</strong> (VS-Code-Extensions, voller Agent + MCP)</li>
|
||||||
<h4 className="font-bold text-foreground flex items-center gap-1 text-[11px]">
|
<li><strong>Cursor</strong> (VS-Code-Fork mit Top-Autocomplete)</li>
|
||||||
<ArrowRight className="h-3 w-3 text-emerald-400" /> Was läuft vollautomatisch?
|
<li><strong>Continue</strong>, <strong>aider</strong> (CLI), <strong>OpenCode</strong> (Desktop)</li>
|
||||||
</h4>
|
</ul>
|
||||||
<ul className="list-disc pl-4 space-y-1 text-[11px]">
|
<Stack>
|
||||||
<li>Modellaustausch (Routing) per llama-swap je nach Anfragetyp (z.B. Code vs. Reasoning).</li>
|
Tipp den Kram nicht ab: der <strong>Verbinden</strong>-Tab generiert die fertige Config (inkl. MCP-Gedächtnis)
|
||||||
<li>Hintergrund-Synchronisation und Speicherung von Gedächtniseinträgen (Memory).</li>
|
pro Tool zum Kopieren. Essenz: Base <Pill>…:9001/v1</Pill>, Model <Pill>auto</Pill>, Key beliebig.
|
||||||
<li>Modell-Installation und API-Key-Injektionen in Gateway-Verbindungen.</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-2">
|
||||||
<h4 className="font-bold text-foreground flex items-center gap-1 text-[11px]">
|
<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>
|
||||||
<ArrowRight className="h-3 w-3 text-amber-400" /> Wo ist menschliche Freigabe nötig?
|
<ul className="list-disc pl-4 space-y-1">
|
||||||
</h4>
|
<li><strong>Backup:</strong> tägliches Voll-Zustands-Backup, getesteter <Pill>restore.sh</Pill> (Doku in <Pill>docs/BACKUP.md</Pill>).</li>
|
||||||
<ul className="list-disc pl-4 space-y-1 text-[11px]">
|
<li><strong>Updates:</strong> git-basierter Update-Check; <strong>Hermes-Update-Button</strong> mit anschließendem <strong>Gehirn-Check</strong> (rot, falls das Update das Gedächtnis zerschießt) + Engine-Update.</li>
|
||||||
<li><strong>Systembefehle:</strong> Das Ausführen von Terminal-Kommandos auf deinem PC erfordert standardmäßig deine Bestätigung.</li>
|
<li><strong>Dienste & Gefahrenzone:</strong> Restart/Logs pro Dienst, kritische Eingriffe getrennt.</li>
|
||||||
<li><strong>Kritische Systemeingriffe:</strong> OS-Updates, Engine-Rebuilds und Host-Reboots müssen manuell über das Dashboard ausgelöst werden.</li>
|
</ul>
|
||||||
<li><strong>Gedächtnis-Löschung:</strong> Permanentes Verwerfen von gesammelten Memorys wird von dir freigegeben.</li>
|
<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 rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 shadow-lg shadow-black/10 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 & 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 & 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 & 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 & Skills</div>
|
||||||
|
<ul className="list-disc pl-4 space-y-1.5">
|
||||||
|
<LinkItem href="https://modelcontextprotocol.io" name="MCP — offizielle Doku" note="Spezifikation & Einstieg." />
|
||||||
|
<LinkItem href="https://github.com/modelcontextprotocol/servers" name="Offizielle MCP-Server" note="filesystem, git, postgres, fetch & mehr." />
|
||||||
|
<LinkItem href="https://smithery.ai" name="Smithery" note="Registry zum Suchen & 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 & 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 & 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 & 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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] bg-background/25 p-3 rounded-xl border border-border/30 mt-2">
|
</section>
|
||||||
<strong>Fazit:</strong> Der Stack erledigt die Kärrnerarbeit (Modelle tauschen, API-Adapter bereitstellen, Sandbox-Verbindungen herstellen) komplett im Hintergrund. Er agiert als dein persönlicher, treuer Copilot, ohne jemals ungefragt schädliche Operationen auf deinem Hauptsystem auszuführen.
|
|
||||||
</p>
|
{/* 14 — Troubleshooting */}
|
||||||
</div>
|
<Card id="troubleshooting" icon={LifeBuoy} color="text-rose-400" title="14. Troubleshooting" kicker="Wenn's hakt" wide>
|
||||||
</div>
|
<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 in der <strong>Zentrale</strong> prüfen.</li>
|
||||||
|
<li><strong>Modell antwortet nicht / langsam?</strong> In der <strong>Zentrale → 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 im <strong>Terminal</strong> starten — meist ist es vollgemüllter Kontext.</li>
|
||||||
|
<li><strong>Gedächtnis findet nichts?</strong> Embedding-Dienst online? Semantisch suchen (Sinn statt exaktem Wort). Leeres Gedächtnis → Hermes-Onboarding starten.</li>
|
||||||
|
<li><strong>Update hat etwas zerschossen?</strong> Genau dafür gibt es Backup & <Pill>restore.sh</Pill> — den getesteten Restore fahren, dann Ursache suchen.</li>
|
||||||
|
</ul>
|
||||||
|
</Card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
<p className="text-center text-[10px] text-muted-foreground/50 pt-2">
|
||||||
|
Mission Control 2 · AI-Bibel · Stand Juni 2026 — lebendes Dokument, wächst mit dem Stack.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user