Feat: UI-Audit — Telegram/MCP/PC-Status, incomplete-Badge, SSH-Karte ersetzt

- backend: PC_EXECUTOR_URL Env-Var + 3 neue agent_status()-Felder
  (telegram_enabled, mcp_server_count, pc_executor_reachable)
- AgentStatusCard: 2x2-Grid (Gateway/WebUI/Gehirn/Verdrahtung) +
  echte Status-Footer-Zeilen fuer Telegram, MCP-Server-Anzahl, PC
- TokenStatsCard: 'Juni 2026' entfernt, Null-Fallback fuer pricing
- AgentView: SSH-Bypass-Karte ersetzt durch PC-Executor-Statuskarte
- Cockpit + RolesCard: Datei-fehlt-Badge + Load-Button disabled fuer incomplete-Modelle
- api.ts: AgentStatus-Interface um 3 neue Felder erweitert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-27 00:01:36 +02:00
parent 6a464bf653
commit 0afddcdfdc
13 changed files with 546 additions and 455 deletions
+37 -23
View File
@@ -1,5 +1,5 @@
import { useState, useRef, useCallback, useMemo } from "react"
import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield, Check, X } from "lucide-react"
import { Bot, ExternalLink, Activity, Cpu, Wrench, Monitor, Shield, Check, X } from "lucide-react"
import { api } from "@/lib/api"
import { useAgentStatus, useModels, useQueryClient, qk } from "@/lib/queries"
import { useDialog } from "@/lib/useDialog"
@@ -327,37 +327,51 @@ export function AgentView() {
</div>
</div>
{/* SSH / Sandbox-Hilfe Card */}
{/* PC Executor Status Card */}
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-6 space-y-4 shadow-lg shadow-black/10">
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
<h3 className="text-sm font-bold uppercase tracking-wider text-foreground">SSH-Kopplung &amp; Sandbox-Umgehung</h3>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Monitor className="h-5 w-5 text-primary" />
<h3 className="text-sm font-bold uppercase tracking-wider text-foreground">PC Verbindung</h3>
</div>
<div className="flex items-center gap-2">
<span className={cn("h-2 w-2 rounded-full", s.pc_executor_reachable ? "bg-emerald-500 animate-pulse" : "bg-amber-500")} />
<span className="text-xs font-semibold text-foreground">
{s.pc_executor_reachable ? "Erreichbar" : "Nicht verbunden"}
</span>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2 text-xs text-muted-foreground leading-relaxed text-left">
<div className="space-y-3">
<h4 className="text-xs font-bold text-foreground">1. Warum verweigert Hermes Aktionen auf dem PC?</h4>
<p>
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.
Der <strong className="text-foreground">Hermes PC Executor</strong> läuft auf <code className="text-foreground font-mono px-1 py-0.5 rounded bg-muted/40 border border-border/30">192.168.178.98:7777</code> und ermöglicht Hermes den direkten Zugriff auf deinen Windows-PC Shell-Befehle, Screenshots, Tastatureingaben.
</p>
<p>
Hermes erreicht den PC über den MCP-Server <code className="text-foreground font-mono px-1 py-0.5 rounded bg-muted/40 border border-border/30">hermes-pc-control</code>, der automatisch beim Gateway-Start verbunden wird.
</p>
<div className="p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[9px] text-cyan-300">
<span className="text-muted-foreground/60">Beispiel System-Prompt Erweiterung:</span>
<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!"
</div>
</div>
<div className="space-y-3">
<h4 className="text-xs font-bold text-foreground">2. SSH-Verbindung zum lokalen Windows-PC einrichten</h4>
<p>
Damit der Agent Befehle auf deinem PC ausführen kann, muss OpenSSH auf Windows aktiv und mit einem Key gekoppelt sein:
</p>
<ul className="list-disc pl-4 space-y-1.5 text-[11px]">
<li><strong>OpenSSH Server auf Windows starten:</strong> In PowerShell als Admin ausführen: <code className="text-foreground font-mono">Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0</code></li>
<li><strong>SSH-Key auf der Box erzeugen:</strong> <code className="text-foreground font-mono">ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519_hermes_agent</code></li>
<li><strong>Key autorisieren:</strong> Kopiere den Inhalt von <code className="text-foreground font-mono">~/.ssh/id_ed25519_hermes_agent.pub</code> in deine Windows-Datei <code className="text-foreground font-mono">C:\Users\TobisPC\.ssh\authorized_keys</code></li>
</ul>
{s.pc_executor_reachable ? (
<div className="p-3.5 bg-emerald-500/5 border border-emerald-500/20 rounded-xl space-y-1">
<div className="text-emerald-400 font-semibold text-xs flex items-center gap-1.5">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
PC Executor verbunden
</div>
<p className="text-[10px]">
Hermes kann jetzt per Telegram oder WebUI Befehle auf TobisNicerPC ausführen. Nutze <code className="text-foreground">pc_shell</code>, <code className="text-foreground">pc_screenshot</code> oder <code className="text-foreground">pc_open</code>.
</p>
</div>
) : (
<div className="space-y-2">
<h4 className="text-xs font-bold text-foreground">PC Executor starten</h4>
<p>Starte <code className="text-foreground font-mono">start.bat</code> im Ordner <code className="text-foreground font-mono">client\hermes-pc\</code> auf dem Windows-PC und lasse das Fenster offen.</p>
<div className="p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[9px] text-cyan-300">
client\hermes-pc\start.bat
</div>
</div>
)}
</div>
</div>
</div>