diff --git a/frontend/dist/assets/index-D6XqaWNR.js b/frontend/dist/assets/index-CNOUjLQN.js similarity index 92% rename from frontend/dist/assets/index-D6XqaWNR.js rename to frontend/dist/assets/index-CNOUjLQN.js index f024c9d..aa1535f 100644 --- a/frontend/dist/assets/index-D6XqaWNR.js +++ b/frontend/dist/assets/index-CNOUjLQN.js @@ -367,7 +367,7 @@ Error generating stack: `+i.message+` stroke-dasharray: 4 6; animation: flow-dash 1s linear infinite; } - `}),n.jsxs("div",{className:"flex flex-col sm:flex-row justify-between sm:items-center gap-4",children:[n.jsxs("div",{children:[n.jsx("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",children:"Hermes Agenten-Cockpit"}),n.jsxs("p",{className:"text-sm text-muted-foreground",children:["Hermes ist ein autonomer Agent, der im Hintergrund der Box läuft (Port ",n.jsx("code",{children:":8642"}),") und seine eigene UI besitzt."]})]}),(o==null?void 0:o.webui_url)&&n.jsxs("a",{href:Ms(o.webui_url),target:"_blank",rel:"noopener",className:ee("flex h-9 px-4 items-center gap-1.5 text-xs font-semibold rounded-lg transition-all cursor-pointer shadow-md shrink-0 self-start",o.webui_reachable?"bg-primary text-primary-foreground hover:opacity-90 shadow-primary/10":"border border-border/60 text-muted-foreground bg-background/20"),children:[n.jsx(el,{className:"h-4 w-4"}),n.jsx("span",{children:"Hermes WebUI öffnen"})]})]}),a&&n.jsxs("div",{className:"rounded-xl border border-red-500/20 bg-red-500/5 p-4 text-xs text-red-400 font-mono",children:["Status nicht lesbar (",a,")."]}),o&&n.jsxs("div",{className:"space-y-6",children:[n.jsxs("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-4",children:[n.jsx(Zo,{label:"Agent Gateway",ok:o.gateway_reachable,detail:"Port :8642 (REST API)",icon:Ss}),n.jsx(Zo,{label:"Agent WebUI",ok:o.webui_reachable,detail:"Port :8787 (Chat UI)",icon:Xo}),n.jsx(Zo,{label:"Aktives Gehirn",ok:o.gateway_reachable,detail:o.brain_model?`Model: ${o.brain_model}`:"Model: auto",icon:ht,onClick:()=>x(!0)}),n.jsx(Zo,{label:"Verdrahtung",ok:o.has_config,detail:`Config: ${o.has_config?"✓":"—"} · Skills: ${o.has_skills?"✓":"—"} · Memory: ${o.has_memories?"✓":"—"}`,icon:rl})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Interactive Agent Flow Graph"}),n.jsx("p",{className:"text-[10px] text-muted-foreground mt-0.5 leading-relaxed",children:"Visualisiert das Zusammenspiel und die Verbindungspfade zwischen den Hermes-Systemkomponenten."})]}),n.jsxs("div",{ref:S,className:"relative w-full h-[360px] border border-border/30 rounded-xl bg-black/25 overflow-hidden flex",children:[n.jsxs("svg",{className:"absolute inset-0 pointer-events-none w-full h-full",children:[n.jsxs("defs",{children:[n.jsxs("linearGradient",{id:"cyan-to-teal",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[n.jsx("stop",{offset:"0%",stopColor:"#06b6d4",stopOpacity:"0.45"}),n.jsx("stop",{offset:"100%",stopColor:"#0d9488",stopOpacity:"0.45"})]}),n.jsxs("linearGradient",{id:"active-glow",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[n.jsx("stop",{offset:"0%",stopColor:"#3b82f6",stopOpacity:"0.8"}),n.jsx("stop",{offset:"100%",stopColor:"#10b981",stopOpacity:"0.8"})]})]}),n.jsx("path",{d:q(M*.15,L*.5,M*.5,L*.5),stroke:"url(#cyan-to-teal)",strokeWidth:"1.5",fill:"none"}),(f==="webui"||o.webui_reachable)&&n.jsx("path",{d:q(M*.15,L*.5,M*.5,L*.5),stroke:"#06b6d4",strokeWidth:"2.5",fill:"none",className:"svg-flow-path"}),n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.3),stroke:"url(#cyan-to-teal)",strokeWidth:"1.5",fill:"none"}),(f==="gateway"||f==="brain"||o.gateway_reachable)&&n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.3),stroke:"url(#active-glow)",strokeWidth:"2.5",fill:"none",className:"svg-flow-path"}),n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.7),stroke:"url(#cyan-to-teal)",strokeWidth:"1.5",fill:"none"}),(f==="gateway"||f==="wiring"||o.gateway_reachable)&&n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.7),stroke:"url(#active-glow)",strokeWidth:"2.5",fill:"none",className:"svg-flow-path"})]}),n.jsxs("div",{className:"absolute cursor-pointer select-none z-10 w-36 h-9 -translate-y-1/2 -translate-x-1/2 rounded-xl border border-border/60 bg-card/75 backdrop-blur-md flex items-center justify-center gap-1.5 px-2.5 hover:border-primary transition-all text-[10px] font-semibold text-foreground shadow shadow-black/20",style:{left:"15%",top:"50%"},onMouseEnter:()=>p("webui"),onMouseLeave:()=>p(null),onClick:()=>o.webui_reachable&&window.open(Ms(o.webui_url),"_blank"),title:o.webui_reachable?"Klicken um Chat-WebUI zu öffnen":"WebUI Offline",children:[n.jsx(Xo,{className:ee("h-3.5 w-3.5",o.webui_reachable?"text-emerald-400":"text-amber-500")}),n.jsx("span",{children:"Agent WebUI"}),n.jsx("span",{className:ee("w-1.5 h-1.5 rounded-full animate-pulse ml-auto",o.webui_reachable?"bg-emerald-500":"bg-amber-500")})]}),n.jsxs("div",{className:"absolute select-none z-10 w-40 py-2.5 px-3 -translate-y-1/2 -translate-x-1/2 rounded-2xl border border-primary/50 bg-card/90 backdrop-blur-md flex flex-col items-center justify-center text-center shadow-lg shadow-primary/5 cursor-pointer",style:{left:"50%",top:"50%"},onMouseEnter:()=>p("gateway"),onMouseLeave:()=>p(null),children:[n.jsxs("div",{className:"flex items-center gap-1",children:[n.jsx(Ss,{className:"h-3.5 w-3.5 text-primary"}),n.jsx("span",{className:"text-[10px] uppercase font-bold text-primary font-space tracking-wide",children:"Agent Gateway"})]}),n.jsx("div",{className:"text-[9px] font-mono text-muted-foreground mt-0.5",children:"Port :8642"}),n.jsx("div",{className:ee("mt-1 px-1.5 py-0.5 rounded text-[8px] font-semibold uppercase font-mono border",o.gateway_reachable?"bg-emerald-500/10 border-emerald-500/20 text-emerald-400":"bg-red-500/10 border-red-500/20 text-red-400"),children:o.gateway_reachable?"Online":"Offline"})]}),n.jsxs("div",{className:ee("absolute z-20 w-44 py-1.5 px-3 -translate-y-1/2 -translate-x-1/2 rounded-xl border flex flex-col justify-center hover:border-primary/50 transition-all text-left shadow select-none cursor-pointer",o.gateway_reachable?"border-emerald-500/50 bg-emerald-500/5 shadow-emerald-500/5":"border-border/60 bg-card/75"),style:{left:"85%",top:"30%"},onMouseEnter:()=>p("brain"),onMouseLeave:()=>p(null),onClick:()=>x(!0),children:[n.jsxs("div",{className:"flex items-center justify-between",children:[n.jsxs("div",{className:"flex items-center gap-1 text-muted-foreground",children:[n.jsx(ht,{className:"h-3 w-3 text-primary"}),n.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"Aktives Gehirn"})]}),o.gateway_reachable&&n.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"})]}),n.jsxs("div",{className:"flex items-center justify-between mt-1",children:[n.jsx("span",{className:"text-[10px] font-mono font-medium truncate text-foreground font-space max-w-[100px]",title:o.brain_model,children:o.brain_model||"auto"}),n.jsx("span",{className:"text-[8px] bg-primary/20 hover:bg-primary/30 border border-primary/30 text-primary px-1.5 py-0.5 rounded uppercase font-bold tracking-wider transition-colors",children:"Ändern"})]})]}),n.jsxs("div",{className:ee("absolute z-10 w-44 py-1.5 px-3 -translate-y-1/2 -translate-x-1/2 rounded-xl border flex flex-col justify-center hover:border-primary/50 transition-all text-left shadow select-none",o.has_config?"border-emerald-500/50 bg-emerald-500/5 shadow-emerald-500/5":"border-border/60 bg-card/75"),style:{left:"85%",top:"70%"},onMouseEnter:()=>p("wiring"),onMouseLeave:()=>p(null),children:[n.jsxs("div",{className:"flex items-center justify-between",children:[n.jsxs("div",{className:"flex items-center gap-1 text-muted-foreground",children:[n.jsx(rl,{className:"h-3 w-3 text-primary"}),n.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"Verdrahtung"})]}),o.has_config&&n.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"})]}),n.jsxs("div",{className:"text-[9px] font-mono mt-0.5 text-muted-foreground flex gap-1 justify-between",children:[n.jsxs("span",{children:["Config: ",o.has_config?"✓":"—"]}),n.jsxs("span",{children:["Skills: ",o.has_skills?"✓":"—"]}),n.jsxs("span",{children:["Memory: ",o.has_memories?"✓":"—"]})]})]})]}),n.jsxs("div",{className:"flex flex-wrap items-center gap-6 mt-3 text-[10px] text-muted-foreground border-t border-border/20 pt-3",children:[n.jsxs("span",{className:"flex items-center gap-1.5",children:[n.jsx("span",{className:"h-2 w-2 rounded-full bg-cyan-400"}),n.jsx("span",{children:"Cyan-Fluss: Client-Anfrage an Agenten"})]}),n.jsxs("span",{className:"flex items-center gap-1.5",children:[n.jsx("span",{className:"h-2 w-2 rounded-full bg-emerald-500 animate-pulse"}),n.jsx("span",{children:"Grüner Puls: Verbindung hergestellt / Modul online"})]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10",children:[n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(Vr,{className:"h-5 w-5 text-primary"}),n.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-foreground",children:"SSH-Kopplung & Sandbox-Umgehung"})]}),n.jsxs("div",{className:"grid gap-6 md:grid-cols-2 text-xs text-muted-foreground leading-relaxed text-left",children:[n.jsxs("div",{className:"space-y-3",children:[n.jsx("h4",{className:"text-xs font-bold text-foreground",children:"1. Warum verweigert Hermes Aktionen auf dem PC?"}),n.jsx("p",{children:"Hermes ist standardmäßig so ausgerichtet, dass er sich als virtueller Assistent ohne Systemzugriff versteht. Um dies zu umgehen, musst du Hermes' **System-Prompt** in der Chat-WebUI anpassen."}),n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[9px] text-cyan-300",children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Beispiel System-Prompt Erweiterung:"}),n.jsx("br",{}),'"Du hast über das terminal-Tool vollen SSH-Zugriff auf den Windows-PC des Users (TobisPC). Nutze SSH-Befehle um Aktionen dort auszuführen, wenn danach gefragt wird. Behaupte nie, du könntest das nicht!"']})]}),n.jsxs("div",{className:"space-y-3",children:[n.jsx("h4",{className:"text-xs font-bold text-foreground",children:"2. SSH-Verbindung zum lokalen Windows-PC einrichten"}),n.jsx("p",{children:"Damit der Agent Befehle auf deinem PC ausführen kann, muss OpenSSH auf Windows aktiv und mit einem Key gekoppelt sein:"}),n.jsxs("ul",{className:"list-disc pl-4 space-y-1.5 text-[11px]",children:[n.jsxs("li",{children:[n.jsx("strong",{children:"OpenSSH Server auf Windows starten:"})," In PowerShell als Admin ausführen: ",n.jsx("code",{className:"text-foreground font-mono",children:"Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0"})]}),n.jsxs("li",{children:[n.jsx("strong",{children:"SSH-Key auf der Box erzeugen:"})," ",n.jsx("code",{className:"text-foreground font-mono",children:"ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519_hermes_agent"})]}),n.jsxs("li",{children:[n.jsx("strong",{children:"Key autorisieren:"})," Kopiere den Inhalt von ",n.jsx("code",{className:"text-foreground font-mono",children:"~/.ssh/id_ed25519_hermes_agent.pub"})," in deine Windows-Datei ",n.jsx("code",{className:"text-foreground font-mono",children:"C:\\Users\\TobisPC\\.ssh\\authorized_keys"})]})]})]})]})]}),!o.gateway_reachable&&n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10 text-left",children:[n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(Vr,{className:"h-5 w-5 text-amber-500"}),n.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-foreground",children:"Hermes-Agent Diagnostics"})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-3 leading-relaxed",children:[n.jsx("p",{children:"Der Hermes-Dienst ist auf der Box derzeit offline oder kann sich nicht mit dem lokalen llama-swap verbinden."}),n.jsxs("p",{children:["Stelle sicher, dass die systemd-Dienste auf der Box laufen. Du kannst den Status im ",n.jsx("strong",{children:"OS & Updates Drawer"})," prüfen und die Dienste bei Bedarf neu starten."]}),n.jsxs("div",{className:"p-3.5 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1",children:[n.jsx("div",{className:"text-muted-foreground/60",children:"# Dienste manuell auf der Box prüfen:"}),n.jsx("div",{className:"text-primary",children:"systemctl --user status hermes-gateway"}),n.jsx("div",{className:"text-primary",children:"systemctl --user status hermes-webui"})]}),n.jsxs("p",{children:["Weitere Einrichtungsdetails (Brain-Konfiguration, MCP-Kopplungen, SSH-Tunneling und Such-Engines) findest du in der Dokumentationsdatei:",n.jsx("code",{className:"ml-1 px-1.5 py-0.5 rounded bg-muted/40 text-foreground border border-border/30",children:"docs/HERMES_SETUP.md"}),"."]})]})]})]}),o&&h&&n.jsx("div",{className:"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4",children:n.jsxs("div",{className:"w-full max-w-md rounded-2xl border border-border/80 bg-card p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-200",children:[n.jsxs("div",{className:"flex items-center justify-between border-b border-border/20 pb-2",children:[n.jsxs("h3",{className:"text-xs font-bold uppercase tracking-wider text-primary flex items-center gap-1.5",children:[n.jsx(ht,{className:"h-4 w-4"}),n.jsx("span",{children:"Hermes-Gehirn konfigurieren"})]}),n.jsx("button",{onClick:()=>x(!1),className:"p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer",children:n.jsx(Hr,{className:"h-4 w-4"})})]}),n.jsxs("p",{className:"text-xs text-muted-foreground leading-relaxed",children:['Das „Gehirn" ist das primäre LLM für Hermes. Wähle ein Modell aus deiner Bibliothek oder nutze ein Gateway-Alias (',n.jsx("code",{className:"text-primary font-semibold",children:"auto"})," / ",n.jsx("code",{className:"text-primary font-semibold",children:"fast"})," / ",n.jsx("code",{className:"text-primary font-semibold",children:"heavy"}),"):"]}),n.jsx("div",{className:"space-y-1.5 max-h-60 overflow-y-auto pr-1",children:C.map(F=>{const ie=["auto","fast","heavy"].includes(F);return n.jsxs("button",{onClick:()=>T(F),className:ee("w-full text-left px-3 py-2.5 rounded-lg text-xs hover:bg-accent flex items-center justify-between font-mono cursor-pointer border border-border/30",o.brain_model===F||!o.brain_model&&F==="auto"?"text-primary font-bold bg-primary/10 border-primary/30":"text-foreground bg-background/20"),children:[n.jsxs("div",{className:"flex flex-col text-left",children:[n.jsx("span",{className:"font-semibold truncate max-w-[280px]",children:F}),n.jsx("span",{className:"text-[9px] text-muted-foreground mt-0.5",children:ie?"Gateway Routing Alias":"Installiertes GGUF Modell"})]}),(o.brain_model===F||!o.brain_model&&F==="auto")&&n.jsx(zn,{className:"h-4 w-4 shrink-0 text-primary"})]},F)})})]})}),k&&n.jsx(Qr,{type:k.type,title:k.title,message:k.message,onConfirm:()=>k.onConfirm&&k.onConfirm(),onCancel:k.onCancel})]})}function z0(){const[o,d]=m.useState("connect"),[a,c]=m.useState("roocode"),[f,p]=m.useState(null),h="192.168.178.151",[x,C]=m.useState(!1),[y,k]=m.useState(null);function _(){C(!0),pe("/api/health").then(O=>{p(O),k(O.engine_reachable?"success":"partial")}).catch(()=>{p(null),k("fail")}).finally(()=>C(!1))}return m.useEffect(()=>{_()},[]),n.jsxs("div",{className:"space-y-6",children:[n.jsxs("div",{children:[n.jsx("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",children:"Stack-Anleitung & Vibe-Coding-Guide"}),n.jsx("p",{className:"text-sm text-muted-foreground",children:"Einsteigerfreundliche Erklärungen zu deinem Stack und Schritt-für-Schritt-Anleitungen zur Anbindung deiner Editoren."})]}),n.jsxs("div",{className:"flex gap-4 border-b border-border/40 pb-px",children:[n.jsx("button",{onClick:()=>d("connect"),className:ee("pb-3 text-xs font-bold uppercase tracking-wider border-b-2 px-1 transition-all",o==="connect"?"border-primary text-primary":"border-transparent text-muted-foreground hover:text-foreground"),children:"Editor-Anbindung"}),n.jsx("button",{onClick:()=>d("concepts"),className:ee("pb-3 text-xs font-bold uppercase tracking-wider border-b-2 px-1 transition-all",o==="concepts"?"border-primary text-primary":"border-transparent text-muted-foreground hover:text-foreground"),children:"KI-Wissensdatenbank (Juni 2026)"})]}),o==="connect"?n.jsxs(n.Fragment,{children:[n.jsxs("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",children:[n.jsxs("div",{className:"flex items-center gap-3",children:[n.jsx("span",{className:ee("h-3 w-3 rounded-full ring-2 ring-black/40",y==="success"&&"bg-emerald-500 animate-pulse",y==="partial"&&"bg-amber-500",y==="fail"&&"bg-red-500",!y&&"bg-muted")}),n.jsxs("div",{children:[n.jsx("div",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Lokaler Verbindungs-Check"}),n.jsxs("div",{className:"text-[10px] text-muted-foreground mt-0.5 font-mono",children:[y==="success"&&`Erfolgreich! Dein PC hat Zugriff auf das Box-Gateway (v${(f==null?void 0:f.version)||""}).`,y==="partial"&&"Gateway erreichbar, aber die llama-cpp-Engine ist offline.",y==="fail"&&"Verbindung fehlgeschlagen. Ist die Box im selben LAN-Netzwerk?",!y&&"Verbindung wird geprüft..."]})]})]}),n.jsxs("button",{onClick:_,disabled:x,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",children:[n.jsx(Br,{className:ee("h-3.5 w-3.5",x&&"animate-spin")}),n.jsx("span",{children:"Testen"})]})]}),n.jsxs("div",{className:"space-y-3",children:[n.jsxs("div",{className:"flex items-center gap-2 px-1",children:[n.jsx(of,{className:"h-4.5 w-4.5 text-primary"}),n.jsx("h2",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Wie funktioniert mein Stack?"})]}),n.jsxs("div",{className:"grid gap-4 sm:grid-cols-3",children:[n.jsxs("div",{className:"p-4 rounded-xl border border-border/60 bg-card/20 space-y-2",children:[n.jsxs("div",{className:"flex items-center gap-1.5",children:[n.jsx(ht,{className:"h-4 w-4 text-cyan-400"}),n.jsx("h3",{className:"text-xs font-bold text-foreground",children:"1. Die Zentrale"})]}),n.jsx("p",{className:"text-[11px] text-muted-foreground leading-relaxed",children:"Dein Dashboard. Hier siehst du die CPU-/RAM- und GPU-Last der Box und siehst sofort, ob Updates anstehen."})]}),n.jsxs("div",{className:"p-4 rounded-xl border border-border/60 bg-card/20 space-y-2",children:[n.jsxs("div",{className:"flex items-center gap-1.5",children:[n.jsx(Es,{className:"h-4 w-4 text-violet-400"}),n.jsx("h3",{className:"text-xs font-bold text-foreground",children:"2. Modell-Zentrale"})]}),n.jsxs("p",{className:"text-[11px] text-muted-foreground leading-relaxed",children:["Deine GGUF-Datenbank. Gesteuert von ",n.jsx("strong",{children:"llama-swap"}),". Lädt dein schnelles Alltags-Hirn (`fast`) oder dein schweres Logik-Hirn (`heavy`) vollautomatisch im VRAM."]})]}),n.jsxs("div",{className:"p-4 rounded-xl border border-border/60 bg-card/20 space-y-2",children:[n.jsxs("div",{className:"flex items-center gap-1.5",children:[n.jsx(Cs,{className:"h-4 w-4 text-indigo-400"}),n.jsx("h3",{className:"text-xs font-bold text-foreground",children:"3. Das Gedächtnis"})]}),n.jsx("p",{className:"text-[11px] text-muted-foreground leading-relaxed",children:"Dein geteiltes Langzeitgedächtnis (Memory-Pool). Hier merkt sich dein Agent Regeln, Projekt-Details und Vorlieben."})]})]})]}),n.jsxs("div",{className:"space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 px-1",children:[n.jsx(mi,{className:"h-4.5 w-4.5 text-primary"}),n.jsx("h2",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Vibe Coding auf dem PC einrichten"})]}),n.jsxs("div",{className:"flex gap-1.5 bg-card/20 p-1 border border-border/40 rounded-xl max-w-fit",children:[n.jsxs("button",{onClick:()=>c("roocode"),className:ee("rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer flex items-center gap-1.5",a==="roocode"?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"text-muted-foreground hover:text-foreground"),children:[n.jsx(cf,{className:"h-3.5 w-3.5 fill-amber-400/20"}),"Roo Code (VS Code)"]}),n.jsx("button",{onClick:()=>c("cursor"),className:ee("rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",a==="cursor"?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"text-muted-foreground hover:text-foreground"),children:"Cursor IDE"}),n.jsx("button",{onClick:()=>c("opencode"),className:ee("rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",a==="opencode"?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"text-muted-foreground hover:text-foreground"),children:"OpenCode Desktop"})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10",children:[a==="roocode"&&n.jsxs("div",{className:"space-y-4 text-xs leading-relaxed text-muted-foreground",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-sm font-bold text-foreground",children:"Roo Code Kopplung (Empfohlene Open-Source-Erweiterung)"}),n.jsx("p",{children:"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."})]}),n.jsxs("div",{className:"space-y-3.5 border-t border-border/20 pt-4",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"1"}),"Roo Code installieren"]}),n.jsxs("p",{className:"pl-6",children:["Suche in VS Code nach der Erweiterung ",n.jsx("strong",{children:"Roo Code"})," und installiere sie."]})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"2"}),"API-Anbindung konfigurieren"]}),n.jsx("p",{className:"pl-6",children:"Klicke auf das Roo-Code-Symbol in der Sidebar, öffne die Einstellungen (Zahnrad) und stelle folgendes ein:"}),n.jsx("div",{className:"pl-6 pt-1",children:n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"API Provider:"})," OpenAI Compatible"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Base URL:"})," http://",h,":9001/v1"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"API Key:"})," ",n.jsx("span",{className:"italic text-muted-foreground/50",children:'beliebig (z.B. "local")'})]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Model ID:"})," auto"]})]})})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"3"}),"MCP Gedächtnis verknüpfen (Optional, aber empfohlen)"]}),n.jsxs("p",{className:"pl-6",children:["Damit Roo Code auf deinen ",n.jsx("strong",{children:"Gedächtnis-Pool"})," zugreifen kann, kopiere die MCP-Konfiguration aus dem Reiter ",n.jsx("strong",{children:"Verbinden"})," und füge sie in deine lokale Roo-Code-Konfigurationsdatei ein."]})]})]})]}),a==="cursor"&&n.jsxs("div",{className:"space-y-4 text-xs leading-relaxed text-muted-foreground",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-sm font-bold text-foreground",children:"Cursor IDE Kopplung (Proprietäre All-in-One IDE)"}),n.jsx("p",{children:"Cursor ist ein polierter, extrem schneller VS-Code-Fork mit hervorragenden, tief integrierten Autovervollständigungen (Tab-Completions)."})]}),n.jsxs("div",{className:"space-y-3.5 border-t border-border/20 pt-4",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"1"}),"Einstellungen öffnen"]}),n.jsxs("p",{className:"pl-6",children:["Öffne Cursor, klicke oben rechts auf das Zahnrad (Settings) und navigiere zu ",n.jsx("strong",{children:"Models"}),"."]})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"2"}),"OpenAI API überschreiben"]}),n.jsxs("p",{className:"pl-6",children:["Deaktiviere die Standard-Cloudmodelle, klappe den Bereich ",n.jsx("strong",{children:"OpenAI API"})," auf und konfiguriere:"]}),n.jsx("div",{className:"pl-6 pt-1",children:n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Override Base URL:"})," http://",h,":9001/v1"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"API Key:"})," ",n.jsx("span",{className:"italic text-muted-foreground/50",children:'beliebig (z.B. "local")'})]})]})})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"3"}),"Modell hinzufügen"]}),n.jsxs("p",{className:"pl-6",children:["Trage in der Modell-Liste ein neues Modell mit dem Namen ",n.jsx("strong",{children:"auto"})," ein und wähle es als aktives Modell aus. Cursor leitet ab jetzt alle deine Anfragen an die Box weiter."]})]})]})]}),a==="opencode"&&n.jsxs("div",{className:"space-y-4 text-xs leading-relaxed text-muted-foreground",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-sm font-bold text-foreground",children:"OpenCode Desktop Kopplung (Open-Source Vibe-Coding-App)"}),n.jsx("p",{children:"OpenCode ist eine standalone Desktop-App für ein ablenkungsfreies Coden über natürliche Sprache. Es trennt den KI-Prozess von deinem Editor."})]}),n.jsxs("div",{className:"space-y-3.5 border-t border-border/20 pt-4",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"1"}),"OpenCode Desktop herunterladen"]}),n.jsx("p",{className:"pl-6",children:"Lade die Desktop-Anwendung von der offiziellen Website (opencode.ai) herunter und starte sie."})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"2"}),"Endpunkt auf Box-Gateway setzen"]}),n.jsx("p",{className:"pl-6",children:"Gehe in den Bereich Einstellungen ➔ Provider, deaktiviere die Cloud-Voreinstellungen und trage deinen lokalen Server ein:"}),n.jsx("div",{className:"pl-6 pt-1",children:n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Base URL:"})," http://",h,":9001/v1"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Model:"})," auto"]})]})})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"3"}),"Erster Vibe-Coding Test"]}),n.jsx("p",{className:"pl-6",children:'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.'})]})]})]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 space-y-3 shadow-lg shadow-black/10",children:[n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(tl,{className:"h-4.5 w-4.5 text-primary"}),n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Was tun, wenn das Coden hakt?"})]}),n.jsxs("ul",{className:"text-[11px] text-muted-foreground space-y-2 list-disc pl-4 leading-relaxed",children:[n.jsxs("li",{children:[n.jsx("strong",{children:"Keine Verbindung?"})," Ü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."]}),n.jsxs("li",{children:[n.jsx("strong",{children:"Modell antwortet nicht?"})," Schaue unter ",n.jsx("strong",{children:"Diagnose"}),", ob der Dienst `llama-swap` aktiv (grün) is. Wenn nicht, klicke daneben auf ",n.jsx("strong",{children:"Restart"}),"."]}),n.jsxs("li",{children:[n.jsx("strong",{children:"Hermes Agent reagiert merkwürdig?"})," Starte in der Hermes WebUI einfach eine frische Session (neuen Chat). Ältere Chats sammeln Kontext-Müll an."]})]})]})]}):n.jsxs("div",{className:"space-y-6",children:[n.jsxs("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",children:[n.jsx(hi,{className:"h-8 w-8 text-primary shrink-0 mt-0.5"}),n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Entwickler-Guide: Modernes Agentic Coding (2026)"}),n.jsx("p",{className:"text-xs text-muted-foreground leading-normal",children:"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."})]})]}),n.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 border-b border-border/20 pb-3",children:[n.jsx(Es,{className:"h-5 w-5 text-cyan-400"}),n.jsxs("div",{children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"1. Mixture of Experts (MoE)"}),n.jsx("span",{className:"text-[9px] text-cyan-400 font-mono",children:"Effizienz durch Spezialisierung"})]})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-2 leading-normal",children:[n.jsxs("p",{children:[n.jsx("strong",{children:"Was ist das?"})," Bei traditionellen LLMs wird für jedes Wort das gesamte neuronale Netz aktiviert. Bei MoE besteht das Modell aus mehreren spezialisierten Teilnetzwerken (den ",n.jsx("em",{children:"Experts"}),"). Ein intelligenter ",n.jsx("em",{children:"Router"})," entscheidet pro Token (Wortteil), welche Experten zur Berechnung herangezogen werden."]}),n.jsxs("p",{children:[n.jsx("strong",{children:"Warum in MC2?"})," 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."]}),n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] text-foreground",children:[n.jsx("span",{className:"text-cyan-400",children:"Vorteil:"})," GPT-4-Klasse Performance bei einem Bruchteil der aktiven VRAM-Last auf deinem Homelab!"]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 border-b border-border/20 pb-3",children:[n.jsx(hi,{className:"h-5 w-5 text-violet-400"}),n.jsxs("div",{children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"2. Model Context Protocol (MCP)"}),n.jsx("span",{className:"text-[9px] text-violet-400 font-mono",children:"Standardisierte Agenten-Tools"})]})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-2 leading-normal",children:[n.jsxs("p",{children:[n.jsx("strong",{children:"Was ist das?"})," 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."]}),n.jsxs("p",{children:[n.jsx("strong",{children:"Warum in MC2?"})," 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."]}),n.jsxs("div",{className:"space-y-1.5 p-3 bg-background/25 rounded-xl border border-border/30 text-[10px]",children:[n.jsx("div",{className:"font-bold text-foreground",children:"Gute Quellen für MCP Server:"}),n.jsxs("ul",{className:"list-disc pl-4 space-y-1 text-muted-foreground",children:[n.jsxs("li",{children:[n.jsx("a",{href:"https://smithery.ai/",target:"_blank",rel:"noopener",className:"text-primary hover:underline font-semibold",children:"Smithery Registry"})," — Ein Portal zum Suchen und automatischen Installieren von MCP Servern."]}),n.jsxs("li",{children:[n.jsx("a",{href:"https://glama.ai/mcp/servers",target:"_blank",rel:"noopener",className:"text-primary hover:underline font-semibold",children:"Glama MCP Registry"})," — Eine kuratierte, umfangreiche Community-Datenbank von MCP Servern."]}),n.jsxs("li",{children:[n.jsx("a",{href:"https://github.com/modelcontextprotocol/servers",target:"_blank",rel:"noopener",className:"text-primary hover:underline font-semibold",children:"Offizielles Anthropic Repo"})," — Das offizielle Repository mit Standards wie filesystem, postgres, sqlite, brave-search und puppeteer."]})]})]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 border-b border-border/20 pb-3",children:[n.jsx(Cs,{className:"h-5 w-5 text-emerald-400"}),n.jsxs("div",{children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"3. Agent Skills"}),n.jsx("span",{className:"text-[9px] text-emerald-400 font-mono",children:"Modulbasierte Fähigkeiten"})]})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-2 leading-normal",children:[n.jsxs("p",{children:[n.jsx("strong",{children:"Was ist das?"})," 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)."]}),n.jsxs("p",{children:[n.jsx("strong",{children:"Wie benutzt man sie?"})," Lege einen Skill-Ordner unter ",n.jsx("code",{children:".agents/skills/"})," in deinem Projekt an. Das Herzstück ist die Datei ",n.jsx("code",{children:"SKILL.md"})," mit folgendem Aufbau:"]}),n.jsx("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",children:`--- + `}),n.jsxs("div",{className:"flex flex-col sm:flex-row justify-between sm:items-center gap-4",children:[n.jsxs("div",{children:[n.jsx("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",children:"Hermes Agenten-Cockpit"}),n.jsxs("p",{className:"text-sm text-muted-foreground",children:["Hermes ist ein autonomer Agent, der im Hintergrund der Box läuft (Port ",n.jsx("code",{children:":8642"}),") und seine eigene UI besitzt."]})]}),(o==null?void 0:o.webui_url)&&n.jsxs("a",{href:Ms(o.webui_url),target:"_blank",rel:"noopener",className:ee("flex h-9 px-4 items-center gap-1.5 text-xs font-semibold rounded-lg transition-all cursor-pointer shadow-md shrink-0 self-start",o.webui_reachable?"bg-primary text-primary-foreground hover:opacity-90 shadow-primary/10":"border border-border/60 text-muted-foreground bg-background/20"),children:[n.jsx(el,{className:"h-4 w-4"}),n.jsx("span",{children:"Hermes WebUI öffnen"})]})]}),a&&n.jsxs("div",{className:"rounded-xl border border-red-500/20 bg-red-500/5 p-4 text-xs text-red-400 font-mono",children:["Status nicht lesbar (",a,")."]}),o&&n.jsxs("div",{className:"space-y-6",children:[n.jsxs("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-4",children:[n.jsx(Zo,{label:"Agent Gateway",ok:o.gateway_reachable,detail:"Port :8642 (REST API)",icon:Ss}),n.jsx(Zo,{label:"Agent WebUI",ok:o.webui_reachable,detail:"Port :8787 (Chat UI)",icon:Xo}),n.jsx(Zo,{label:"Aktives Gehirn",ok:o.gateway_reachable,detail:o.brain_model?`Model: ${o.brain_model}`:"Model: auto",icon:ht,onClick:()=>x(!0)}),n.jsx(Zo,{label:"Verdrahtung",ok:o.has_config,detail:`Config: ${o.has_config?"✓":"—"} · Skills: ${o.has_skills?"✓":"—"} · Memory: ${o.has_memories?"✓":"—"}`,icon:rl})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Interactive Agent Flow Graph"}),n.jsx("p",{className:"text-[10px] text-muted-foreground mt-0.5 leading-relaxed",children:"Visualisiert das Zusammenspiel und die Verbindungspfade zwischen den Hermes-Systemkomponenten."})]}),n.jsxs("div",{ref:S,className:"relative w-full h-[360px] border border-border/30 rounded-xl bg-black/25 overflow-hidden flex",children:[n.jsxs("svg",{className:"absolute inset-0 pointer-events-none w-full h-full",children:[n.jsxs("defs",{children:[n.jsxs("linearGradient",{id:"cyan-to-teal",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[n.jsx("stop",{offset:"0%",stopColor:"#06b6d4",stopOpacity:"0.45"}),n.jsx("stop",{offset:"100%",stopColor:"#0d9488",stopOpacity:"0.45"})]}),n.jsxs("linearGradient",{id:"active-glow",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[n.jsx("stop",{offset:"0%",stopColor:"#3b82f6",stopOpacity:"0.8"}),n.jsx("stop",{offset:"100%",stopColor:"#10b981",stopOpacity:"0.8"})]})]}),n.jsx("path",{d:q(M*.15,L*.5,M*.5,L*.5),stroke:"url(#cyan-to-teal)",strokeWidth:"1.5",fill:"none"}),(f==="webui"||o.webui_reachable)&&n.jsx("path",{d:q(M*.15,L*.5,M*.5,L*.5),stroke:"#06b6d4",strokeWidth:"2.5",fill:"none",className:"svg-flow-path"}),n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.3),stroke:"url(#cyan-to-teal)",strokeWidth:"1.5",fill:"none"}),(f==="gateway"||f==="brain"||o.gateway_reachable)&&n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.3),stroke:"url(#active-glow)",strokeWidth:"2.5",fill:"none",className:"svg-flow-path"}),n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.7),stroke:"url(#cyan-to-teal)",strokeWidth:"1.5",fill:"none"}),(f==="gateway"||f==="wiring"||o.gateway_reachable)&&n.jsx("path",{d:q(M*.5,L*.5,M*.85,L*.7),stroke:"url(#active-glow)",strokeWidth:"2.5",fill:"none",className:"svg-flow-path"})]}),n.jsxs("div",{className:"absolute cursor-pointer select-none z-10 w-36 h-9 -translate-y-1/2 -translate-x-1/2 rounded-xl border border-border/60 bg-card/75 backdrop-blur-md flex items-center justify-center gap-1.5 px-2.5 hover:border-primary transition-all text-[10px] font-semibold text-foreground shadow shadow-black/20",style:{left:"15%",top:"50%"},onMouseEnter:()=>p("webui"),onMouseLeave:()=>p(null),onClick:()=>o.webui_reachable&&window.open(Ms(o.webui_url),"_blank"),title:o.webui_reachable?"Klicken um Chat-WebUI zu öffnen":"WebUI Offline",children:[n.jsx(Xo,{className:ee("h-3.5 w-3.5",o.webui_reachable?"text-emerald-400":"text-amber-500")}),n.jsx("span",{children:"Agent WebUI"}),n.jsx("span",{className:ee("w-1.5 h-1.5 rounded-full animate-pulse ml-auto",o.webui_reachable?"bg-emerald-500":"bg-amber-500")})]}),n.jsxs("div",{className:"absolute select-none z-10 w-40 py-2.5 px-3 -translate-y-1/2 -translate-x-1/2 rounded-2xl border border-primary/50 bg-card/90 backdrop-blur-md flex flex-col items-center justify-center text-center shadow-lg shadow-primary/5 cursor-pointer",style:{left:"50%",top:"50%"},onMouseEnter:()=>p("gateway"),onMouseLeave:()=>p(null),children:[n.jsxs("div",{className:"flex items-center gap-1",children:[n.jsx(Ss,{className:"h-3.5 w-3.5 text-primary"}),n.jsx("span",{className:"text-[10px] uppercase font-bold text-primary font-space tracking-wide",children:"Agent Gateway"})]}),n.jsx("div",{className:"text-[9px] font-mono text-muted-foreground mt-0.5",children:"Port :8642"}),n.jsx("div",{className:ee("mt-1 px-1.5 py-0.5 rounded text-[8px] font-semibold uppercase font-mono border",o.gateway_reachable?"bg-emerald-500/10 border-emerald-500/20 text-emerald-400":"bg-red-500/10 border-red-500/20 text-red-400"),children:o.gateway_reachable?"Online":"Offline"})]}),n.jsxs("div",{className:ee("absolute z-20 w-44 py-1.5 px-3 -translate-y-1/2 -translate-x-1/2 rounded-xl border flex flex-col justify-center hover:border-primary/50 transition-all text-left shadow select-none cursor-pointer",o.gateway_reachable?"border-emerald-500/50 bg-emerald-500/5 shadow-emerald-500/5":"border-border/60 bg-card/75"),style:{left:"85%",top:"30%"},onMouseEnter:()=>p("brain"),onMouseLeave:()=>p(null),onClick:()=>x(!0),children:[n.jsxs("div",{className:"flex items-center justify-between",children:[n.jsxs("div",{className:"flex items-center gap-1 text-muted-foreground",children:[n.jsx(ht,{className:"h-3 w-3 text-primary"}),n.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"Aktives Gehirn"})]}),o.gateway_reachable&&n.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"})]}),n.jsx("div",{className:"text-[10px] font-mono font-medium truncate mt-0.5 text-foreground font-space",title:o.brain_model,children:o.brain_model||"auto"})]}),n.jsxs("div",{className:ee("absolute z-10 w-44 py-1.5 px-3 -translate-y-1/2 -translate-x-1/2 rounded-xl border flex flex-col justify-center hover:border-primary/50 transition-all text-left shadow select-none",o.has_config?"border-emerald-500/50 bg-emerald-500/5 shadow-emerald-500/5":"border-border/60 bg-card/75"),style:{left:"85%",top:"70%"},onMouseEnter:()=>p("wiring"),onMouseLeave:()=>p(null),children:[n.jsxs("div",{className:"flex items-center justify-between",children:[n.jsxs("div",{className:"flex items-center gap-1 text-muted-foreground",children:[n.jsx(rl,{className:"h-3 w-3 text-primary"}),n.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"Verdrahtung"})]}),o.has_config&&n.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"})]}),n.jsxs("div",{className:"text-[9px] font-mono mt-0.5 text-muted-foreground flex gap-1 justify-between",children:[n.jsxs("span",{children:["Config: ",o.has_config?"✓":"—"]}),n.jsxs("span",{children:["Skills: ",o.has_skills?"✓":"—"]}),n.jsxs("span",{children:["Memory: ",o.has_memories?"✓":"—"]})]})]})]}),n.jsxs("div",{className:"flex flex-wrap items-center gap-6 mt-3 text-[10px] text-muted-foreground border-t border-border/20 pt-3",children:[n.jsxs("span",{className:"flex items-center gap-1.5",children:[n.jsx("span",{className:"h-2 w-2 rounded-full bg-cyan-400"}),n.jsx("span",{children:"Cyan-Fluss: Client-Anfrage an Agenten"})]}),n.jsxs("span",{className:"flex items-center gap-1.5",children:[n.jsx("span",{className:"h-2 w-2 rounded-full bg-emerald-500 animate-pulse"}),n.jsx("span",{children:"Grüner Puls: Verbindung hergestellt / Modul online"})]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10",children:[n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(Vr,{className:"h-5 w-5 text-primary"}),n.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-foreground",children:"SSH-Kopplung & Sandbox-Umgehung"})]}),n.jsxs("div",{className:"grid gap-6 md:grid-cols-2 text-xs text-muted-foreground leading-relaxed text-left",children:[n.jsxs("div",{className:"space-y-3",children:[n.jsx("h4",{className:"text-xs font-bold text-foreground",children:"1. Warum verweigert Hermes Aktionen auf dem PC?"}),n.jsx("p",{children:"Hermes ist standardmäßig so ausgerichtet, dass er sich als virtueller Assistent ohne Systemzugriff versteht. Um dies zu umgehen, musst du Hermes' **System-Prompt** in der Chat-WebUI anpassen."}),n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[9px] text-cyan-300",children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Beispiel System-Prompt Erweiterung:"}),n.jsx("br",{}),'"Du hast über das terminal-Tool vollen SSH-Zugriff auf den Windows-PC des Users (TobisPC). Nutze SSH-Befehle um Aktionen dort auszuführen, wenn danach gefragt wird. Behaupte nie, du könntest das nicht!"']})]}),n.jsxs("div",{className:"space-y-3",children:[n.jsx("h4",{className:"text-xs font-bold text-foreground",children:"2. SSH-Verbindung zum lokalen Windows-PC einrichten"}),n.jsx("p",{children:"Damit der Agent Befehle auf deinem PC ausführen kann, muss OpenSSH auf Windows aktiv und mit einem Key gekoppelt sein:"}),n.jsxs("ul",{className:"list-disc pl-4 space-y-1.5 text-[11px]",children:[n.jsxs("li",{children:[n.jsx("strong",{children:"OpenSSH Server auf Windows starten:"})," In PowerShell als Admin ausführen: ",n.jsx("code",{className:"text-foreground font-mono",children:"Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0"})]}),n.jsxs("li",{children:[n.jsx("strong",{children:"SSH-Key auf der Box erzeugen:"})," ",n.jsx("code",{className:"text-foreground font-mono",children:"ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519_hermes_agent"})]}),n.jsxs("li",{children:[n.jsx("strong",{children:"Key autorisieren:"})," Kopiere den Inhalt von ",n.jsx("code",{className:"text-foreground font-mono",children:"~/.ssh/id_ed25519_hermes_agent.pub"})," in deine Windows-Datei ",n.jsx("code",{className:"text-foreground font-mono",children:"C:\\Users\\TobisPC\\.ssh\\authorized_keys"})]})]})]})]})]}),!o.gateway_reachable&&n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10 text-left",children:[n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(Vr,{className:"h-5 w-5 text-amber-500"}),n.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-foreground",children:"Hermes-Agent Diagnostics"})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-3 leading-relaxed",children:[n.jsx("p",{children:"Der Hermes-Dienst ist auf der Box derzeit offline oder kann sich nicht mit dem lokalen llama-swap verbinden."}),n.jsxs("p",{children:["Stelle sicher, dass die systemd-Dienste auf der Box laufen. Du kannst den Status im ",n.jsx("strong",{children:"OS & Updates Drawer"})," prüfen und die Dienste bei Bedarf neu starten."]}),n.jsxs("div",{className:"p-3.5 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1",children:[n.jsx("div",{className:"text-muted-foreground/60",children:"# Dienste manuell auf der Box prüfen:"}),n.jsx("div",{className:"text-primary",children:"systemctl --user status hermes-gateway"}),n.jsx("div",{className:"text-primary",children:"systemctl --user status hermes-webui"})]}),n.jsxs("p",{children:["Weitere Einrichtungsdetails (Brain-Konfiguration, MCP-Kopplungen, SSH-Tunneling und Such-Engines) findest du in der Dokumentationsdatei:",n.jsx("code",{className:"ml-1 px-1.5 py-0.5 rounded bg-muted/40 text-foreground border border-border/30",children:"docs/HERMES_SETUP.md"}),"."]})]})]})]}),o&&h&&n.jsx("div",{className:"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4",children:n.jsxs("div",{className:"w-full max-w-md rounded-2xl border border-border/80 bg-card p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-200",children:[n.jsxs("div",{className:"flex items-center justify-between border-b border-border/20 pb-2",children:[n.jsxs("h3",{className:"text-xs font-bold uppercase tracking-wider text-primary flex items-center gap-1.5",children:[n.jsx(ht,{className:"h-4 w-4"}),n.jsx("span",{children:"Hermes-Gehirn konfigurieren"})]}),n.jsx("button",{onClick:()=>x(!1),className:"p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer",children:n.jsx(Hr,{className:"h-4 w-4"})})]}),n.jsxs("p",{className:"text-xs text-muted-foreground leading-relaxed",children:['Das „Gehirn" ist das primäre LLM für Hermes. Wähle ein Modell aus deiner Bibliothek oder nutze ein Gateway-Alias (',n.jsx("code",{className:"text-primary font-semibold",children:"auto"})," / ",n.jsx("code",{className:"text-primary font-semibold",children:"fast"})," / ",n.jsx("code",{className:"text-primary font-semibold",children:"heavy"}),"):"]}),n.jsx("div",{className:"space-y-1.5 max-h-60 overflow-y-auto pr-1",children:C.map(F=>{const ie=["auto","fast","heavy"].includes(F);return n.jsxs("button",{onClick:()=>T(F),className:ee("w-full text-left px-3 py-2.5 rounded-lg text-xs hover:bg-accent flex items-center justify-between font-mono cursor-pointer border border-border/30",o.brain_model===F||!o.brain_model&&F==="auto"?"text-primary font-bold bg-primary/10 border-primary/30":"text-foreground bg-background/20"),children:[n.jsxs("div",{className:"flex flex-col text-left",children:[n.jsx("span",{className:"font-semibold truncate max-w-[280px]",children:F}),n.jsx("span",{className:"text-[9px] text-muted-foreground mt-0.5",children:ie?"Gateway Routing Alias":"Installiertes GGUF Modell"})]}),(o.brain_model===F||!o.brain_model&&F==="auto")&&n.jsx(zn,{className:"h-4 w-4 shrink-0 text-primary"})]},F)})})]})}),k&&n.jsx(Qr,{type:k.type,title:k.title,message:k.message,onConfirm:()=>k.onConfirm&&k.onConfirm(),onCancel:k.onCancel})]})}function z0(){const[o,d]=m.useState("connect"),[a,c]=m.useState("roocode"),[f,p]=m.useState(null),h="192.168.178.151",[x,C]=m.useState(!1),[y,k]=m.useState(null);function _(){C(!0),pe("/api/health").then(O=>{p(O),k(O.engine_reachable?"success":"partial")}).catch(()=>{p(null),k("fail")}).finally(()=>C(!1))}return m.useEffect(()=>{_()},[]),n.jsxs("div",{className:"space-y-6",children:[n.jsxs("div",{children:[n.jsx("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",children:"Stack-Anleitung & Vibe-Coding-Guide"}),n.jsx("p",{className:"text-sm text-muted-foreground",children:"Einsteigerfreundliche Erklärungen zu deinem Stack und Schritt-für-Schritt-Anleitungen zur Anbindung deiner Editoren."})]}),n.jsxs("div",{className:"flex gap-4 border-b border-border/40 pb-px",children:[n.jsx("button",{onClick:()=>d("connect"),className:ee("pb-3 text-xs font-bold uppercase tracking-wider border-b-2 px-1 transition-all",o==="connect"?"border-primary text-primary":"border-transparent text-muted-foreground hover:text-foreground"),children:"Editor-Anbindung"}),n.jsx("button",{onClick:()=>d("concepts"),className:ee("pb-3 text-xs font-bold uppercase tracking-wider border-b-2 px-1 transition-all",o==="concepts"?"border-primary text-primary":"border-transparent text-muted-foreground hover:text-foreground"),children:"KI-Wissensdatenbank (Juni 2026)"})]}),o==="connect"?n.jsxs(n.Fragment,{children:[n.jsxs("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",children:[n.jsxs("div",{className:"flex items-center gap-3",children:[n.jsx("span",{className:ee("h-3 w-3 rounded-full ring-2 ring-black/40",y==="success"&&"bg-emerald-500 animate-pulse",y==="partial"&&"bg-amber-500",y==="fail"&&"bg-red-500",!y&&"bg-muted")}),n.jsxs("div",{children:[n.jsx("div",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Lokaler Verbindungs-Check"}),n.jsxs("div",{className:"text-[10px] text-muted-foreground mt-0.5 font-mono",children:[y==="success"&&`Erfolgreich! Dein PC hat Zugriff auf das Box-Gateway (v${(f==null?void 0:f.version)||""}).`,y==="partial"&&"Gateway erreichbar, aber die llama-cpp-Engine ist offline.",y==="fail"&&"Verbindung fehlgeschlagen. Ist die Box im selben LAN-Netzwerk?",!y&&"Verbindung wird geprüft..."]})]})]}),n.jsxs("button",{onClick:_,disabled:x,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",children:[n.jsx(Br,{className:ee("h-3.5 w-3.5",x&&"animate-spin")}),n.jsx("span",{children:"Testen"})]})]}),n.jsxs("div",{className:"space-y-3",children:[n.jsxs("div",{className:"flex items-center gap-2 px-1",children:[n.jsx(of,{className:"h-4.5 w-4.5 text-primary"}),n.jsx("h2",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Wie funktioniert mein Stack?"})]}),n.jsxs("div",{className:"grid gap-4 sm:grid-cols-3",children:[n.jsxs("div",{className:"p-4 rounded-xl border border-border/60 bg-card/20 space-y-2",children:[n.jsxs("div",{className:"flex items-center gap-1.5",children:[n.jsx(ht,{className:"h-4 w-4 text-cyan-400"}),n.jsx("h3",{className:"text-xs font-bold text-foreground",children:"1. Die Zentrale"})]}),n.jsx("p",{className:"text-[11px] text-muted-foreground leading-relaxed",children:"Dein Dashboard. Hier siehst du die CPU-/RAM- und GPU-Last der Box und siehst sofort, ob Updates anstehen."})]}),n.jsxs("div",{className:"p-4 rounded-xl border border-border/60 bg-card/20 space-y-2",children:[n.jsxs("div",{className:"flex items-center gap-1.5",children:[n.jsx(Es,{className:"h-4 w-4 text-violet-400"}),n.jsx("h3",{className:"text-xs font-bold text-foreground",children:"2. Modell-Zentrale"})]}),n.jsxs("p",{className:"text-[11px] text-muted-foreground leading-relaxed",children:["Deine GGUF-Datenbank. Gesteuert von ",n.jsx("strong",{children:"llama-swap"}),". Lädt dein schnelles Alltags-Hirn (`fast`) oder dein schweres Logik-Hirn (`heavy`) vollautomatisch im VRAM."]})]}),n.jsxs("div",{className:"p-4 rounded-xl border border-border/60 bg-card/20 space-y-2",children:[n.jsxs("div",{className:"flex items-center gap-1.5",children:[n.jsx(Cs,{className:"h-4 w-4 text-indigo-400"}),n.jsx("h3",{className:"text-xs font-bold text-foreground",children:"3. Das Gedächtnis"})]}),n.jsx("p",{className:"text-[11px] text-muted-foreground leading-relaxed",children:"Dein geteiltes Langzeitgedächtnis (Memory-Pool). Hier merkt sich dein Agent Regeln, Projekt-Details und Vorlieben."})]})]})]}),n.jsxs("div",{className:"space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 px-1",children:[n.jsx(mi,{className:"h-4.5 w-4.5 text-primary"}),n.jsx("h2",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Vibe Coding auf dem PC einrichten"})]}),n.jsxs("div",{className:"flex gap-1.5 bg-card/20 p-1 border border-border/40 rounded-xl max-w-fit",children:[n.jsxs("button",{onClick:()=>c("roocode"),className:ee("rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer flex items-center gap-1.5",a==="roocode"?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"text-muted-foreground hover:text-foreground"),children:[n.jsx(cf,{className:"h-3.5 w-3.5 fill-amber-400/20"}),"Roo Code (VS Code)"]}),n.jsx("button",{onClick:()=>c("cursor"),className:ee("rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",a==="cursor"?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"text-muted-foreground hover:text-foreground"),children:"Cursor IDE"}),n.jsx("button",{onClick:()=>c("opencode"),className:ee("rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",a==="opencode"?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"text-muted-foreground hover:text-foreground"),children:"OpenCode Desktop"})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10",children:[a==="roocode"&&n.jsxs("div",{className:"space-y-4 text-xs leading-relaxed text-muted-foreground",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-sm font-bold text-foreground",children:"Roo Code Kopplung (Empfohlene Open-Source-Erweiterung)"}),n.jsx("p",{children:"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."})]}),n.jsxs("div",{className:"space-y-3.5 border-t border-border/20 pt-4",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"1"}),"Roo Code installieren"]}),n.jsxs("p",{className:"pl-6",children:["Suche in VS Code nach der Erweiterung ",n.jsx("strong",{children:"Roo Code"})," und installiere sie."]})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"2"}),"API-Anbindung konfigurieren"]}),n.jsx("p",{className:"pl-6",children:"Klicke auf das Roo-Code-Symbol in der Sidebar, öffne die Einstellungen (Zahnrad) und stelle folgendes ein:"}),n.jsx("div",{className:"pl-6 pt-1",children:n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"API Provider:"})," OpenAI Compatible"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Base URL:"})," http://",h,":9001/v1"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"API Key:"})," ",n.jsx("span",{className:"italic text-muted-foreground/50",children:'beliebig (z.B. "local")'})]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Model ID:"})," auto"]})]})})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"3"}),"MCP Gedächtnis verknüpfen (Optional, aber empfohlen)"]}),n.jsxs("p",{className:"pl-6",children:["Damit Roo Code auf deinen ",n.jsx("strong",{children:"Gedächtnis-Pool"})," zugreifen kann, kopiere die MCP-Konfiguration aus dem Reiter ",n.jsx("strong",{children:"Verbinden"})," und füge sie in deine lokale Roo-Code-Konfigurationsdatei ein."]})]})]})]}),a==="cursor"&&n.jsxs("div",{className:"space-y-4 text-xs leading-relaxed text-muted-foreground",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-sm font-bold text-foreground",children:"Cursor IDE Kopplung (Proprietäre All-in-One IDE)"}),n.jsx("p",{children:"Cursor ist ein polierter, extrem schneller VS-Code-Fork mit hervorragenden, tief integrierten Autovervollständigungen (Tab-Completions)."})]}),n.jsxs("div",{className:"space-y-3.5 border-t border-border/20 pt-4",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"1"}),"Einstellungen öffnen"]}),n.jsxs("p",{className:"pl-6",children:["Öffne Cursor, klicke oben rechts auf das Zahnrad (Settings) und navigiere zu ",n.jsx("strong",{children:"Models"}),"."]})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"2"}),"OpenAI API überschreiben"]}),n.jsxs("p",{className:"pl-6",children:["Deaktiviere die Standard-Cloudmodelle, klappe den Bereich ",n.jsx("strong",{children:"OpenAI API"})," auf und konfiguriere:"]}),n.jsx("div",{className:"pl-6 pt-1",children:n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Override Base URL:"})," http://",h,":9001/v1"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"API Key:"})," ",n.jsx("span",{className:"italic text-muted-foreground/50",children:'beliebig (z.B. "local")'})]})]})})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"3"}),"Modell hinzufügen"]}),n.jsxs("p",{className:"pl-6",children:["Trage in der Modell-Liste ein neues Modell mit dem Namen ",n.jsx("strong",{children:"auto"})," ein und wähle es als aktives Modell aus. Cursor leitet ab jetzt alle deine Anfragen an die Box weiter."]})]})]})]}),a==="opencode"&&n.jsxs("div",{className:"space-y-4 text-xs leading-relaxed text-muted-foreground",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-sm font-bold text-foreground",children:"OpenCode Desktop Kopplung (Open-Source Vibe-Coding-App)"}),n.jsx("p",{children:"OpenCode ist eine standalone Desktop-App für ein ablenkungsfreies Coden über natürliche Sprache. Es trennt den KI-Prozess von deinem Editor."})]}),n.jsxs("div",{className:"space-y-3.5 border-t border-border/20 pt-4",children:[n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"1"}),"OpenCode Desktop herunterladen"]}),n.jsx("p",{className:"pl-6",children:"Lade die Desktop-Anwendung von der offiziellen Website (opencode.ai) herunter und starte sie."})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"2"}),"Endpunkt auf Box-Gateway setzen"]}),n.jsx("p",{className:"pl-6",children:"Gehe in den Bereich Einstellungen ➔ Provider, deaktiviere die Cloud-Voreinstellungen und trage deinen lokalen Server ein:"}),n.jsx("div",{className:"pl-6 pt-1",children:n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] space-y-1 text-foreground",children:[n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Base URL:"})," http://",h,":9001/v1"]}),n.jsxs("div",{children:[n.jsx("span",{className:"text-muted-foreground/60",children:"Model:"})," auto"]})]})})]}),n.jsxs("div",{className:"space-y-1",children:[n.jsxs("div",{className:"font-semibold text-foreground flex items-center gap-1.5",children:[n.jsx("span",{className:"h-4.5 w-4.5 rounded-full bg-primary/20 text-primary flex items-center justify-center font-mono text-[10px]",children:"3"}),"Erster Vibe-Coding Test"]}),n.jsx("p",{className:"pl-6",children:'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.'})]})]})]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 space-y-3 shadow-lg shadow-black/10",children:[n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(tl,{className:"h-4.5 w-4.5 text-primary"}),n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Was tun, wenn das Coden hakt?"})]}),n.jsxs("ul",{className:"text-[11px] text-muted-foreground space-y-2 list-disc pl-4 leading-relaxed",children:[n.jsxs("li",{children:[n.jsx("strong",{children:"Keine Verbindung?"})," Ü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."]}),n.jsxs("li",{children:[n.jsx("strong",{children:"Modell antwortet nicht?"})," Schaue unter ",n.jsx("strong",{children:"Diagnose"}),", ob der Dienst `llama-swap` aktiv (grün) is. Wenn nicht, klicke daneben auf ",n.jsx("strong",{children:"Restart"}),"."]}),n.jsxs("li",{children:[n.jsx("strong",{children:"Hermes Agent reagiert merkwürdig?"})," Starte in der Hermes WebUI einfach eine frische Session (neuen Chat). Ältere Chats sammeln Kontext-Müll an."]})]})]})]}):n.jsxs("div",{className:"space-y-6",children:[n.jsxs("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",children:[n.jsx(hi,{className:"h-8 w-8 text-primary shrink-0 mt-0.5"}),n.jsxs("div",{className:"space-y-1",children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Entwickler-Guide: Modernes Agentic Coding (2026)"}),n.jsx("p",{className:"text-xs text-muted-foreground leading-normal",children:"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."})]})]}),n.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 border-b border-border/20 pb-3",children:[n.jsx(Es,{className:"h-5 w-5 text-cyan-400"}),n.jsxs("div",{children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"1. Mixture of Experts (MoE)"}),n.jsx("span",{className:"text-[9px] text-cyan-400 font-mono",children:"Effizienz durch Spezialisierung"})]})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-2 leading-normal",children:[n.jsxs("p",{children:[n.jsx("strong",{children:"Was ist das?"})," Bei traditionellen LLMs wird für jedes Wort das gesamte neuronale Netz aktiviert. Bei MoE besteht das Modell aus mehreren spezialisierten Teilnetzwerken (den ",n.jsx("em",{children:"Experts"}),"). Ein intelligenter ",n.jsx("em",{children:"Router"})," entscheidet pro Token (Wortteil), welche Experten zur Berechnung herangezogen werden."]}),n.jsxs("p",{children:[n.jsx("strong",{children:"Warum in MC2?"})," 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."]}),n.jsxs("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[10px] text-foreground",children:[n.jsx("span",{className:"text-cyan-400",children:"Vorteil:"})," GPT-4-Klasse Performance bei einem Bruchteil der aktiven VRAM-Last auf deinem Homelab!"]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 border-b border-border/20 pb-3",children:[n.jsx(hi,{className:"h-5 w-5 text-violet-400"}),n.jsxs("div",{children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"2. Model Context Protocol (MCP)"}),n.jsx("span",{className:"text-[9px] text-violet-400 font-mono",children:"Standardisierte Agenten-Tools"})]})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-2 leading-normal",children:[n.jsxs("p",{children:[n.jsx("strong",{children:"Was ist das?"})," 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."]}),n.jsxs("p",{children:[n.jsx("strong",{children:"Warum in MC2?"})," 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."]}),n.jsxs("div",{className:"space-y-1.5 p-3 bg-background/25 rounded-xl border border-border/30 text-[10px]",children:[n.jsx("div",{className:"font-bold text-foreground",children:"Gute Quellen für MCP Server:"}),n.jsxs("ul",{className:"list-disc pl-4 space-y-1 text-muted-foreground",children:[n.jsxs("li",{children:[n.jsx("a",{href:"https://smithery.ai/",target:"_blank",rel:"noopener",className:"text-primary hover:underline font-semibold",children:"Smithery Registry"})," — Ein Portal zum Suchen und automatischen Installieren von MCP Servern."]}),n.jsxs("li",{children:[n.jsx("a",{href:"https://glama.ai/mcp/servers",target:"_blank",rel:"noopener",className:"text-primary hover:underline font-semibold",children:"Glama MCP Registry"})," — Eine kuratierte, umfangreiche Community-Datenbank von MCP Servern."]}),n.jsxs("li",{children:[n.jsx("a",{href:"https://github.com/modelcontextprotocol/servers",target:"_blank",rel:"noopener",className:"text-primary hover:underline font-semibold",children:"Offizielles Anthropic Repo"})," — Das offizielle Repository mit Standards wie filesystem, postgres, sqlite, brave-search und puppeteer."]})]})]})]})]}),n.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/45 p-6 shadow-lg shadow-black/10 space-y-4",children:[n.jsxs("div",{className:"flex items-center gap-2 border-b border-border/20 pb-3",children:[n.jsx(Cs,{className:"h-5 w-5 text-emerald-400"}),n.jsxs("div",{children:[n.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"3. Agent Skills"}),n.jsx("span",{className:"text-[9px] text-emerald-400 font-mono",children:"Modulbasierte Fähigkeiten"})]})]}),n.jsxs("div",{className:"text-xs text-muted-foreground space-y-2 leading-normal",children:[n.jsxs("p",{children:[n.jsx("strong",{children:"Was ist das?"})," 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)."]}),n.jsxs("p",{children:[n.jsx("strong",{children:"Wie benutzt man sie?"})," Lege einen Skill-Ordner unter ",n.jsx("code",{children:".agents/skills/"})," in deinem Projekt an. Das Herzstück ist die Datei ",n.jsx("code",{children:"SKILL.md"})," mit folgendem Aufbau:"]}),n.jsx("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",children:`--- name: tdd-pro description: Drive development with strict TDD practices --- diff --git a/frontend/dist/index.html b/frontend/dist/index.html index dea0b57..82110ab 100644 --- a/frontend/dist/index.html +++ b/frontend/dist/index.html @@ -7,7 +7,7 @@ Mission Control 2.0 - + diff --git a/frontend/src/views/AgentView.tsx b/frontend/src/views/AgentView.tsx index 0be50c0..8bdc1c9 100644 --- a/frontend/src/views/AgentView.tsx +++ b/frontend/src/views/AgentView.tsx @@ -309,13 +309,8 @@ export function AgentView() { {s.gateway_reachable && } -
- - {s.brain_model || "auto"} - - - Ändern - +
+ {s.brain_model || "auto"}