HitonabiandClaude Opus 5
5aa5a484a7
Vierte Etappe. Der Client-Zustand hatte bisher keinen Ort: zwei handgebaute
useSyncExternalStore-Speicher, drei CustomEvent-Kanaele und ein localStorage-Griff
mitten in einem useState — verteilt ueber fuenf Dateien.
## Ein Store (Befund B-08/B-09)
app/store.ts (Zustand, 1,2 kB gzip) haelt genau vier Dinge: Bedienvorlieben
(Schiene, Expertenmodus, Palette), die Lage des Ereignisstroms und die
Meldungs-Warteschlange. Der Kopfkommentar nennt die Regel, nach der etwas dort
landen darf — und ein Test prueft sie: gespeichert werden AUSSCHLIESSLICH
Schienen- und Expertenmodus-Zustand, kein Strom, keine Meldungen, kein Geheimnis.
Der Metrik-Verlauf bleibt bewusst DRAUSSEN (lib/metricsStore.ts): Er nimmt ab P4
jede Sekunde einen Messpunkt entgegen, ein Store-Update pro Sekunde wuerde jede
abonnierende Komponente neu rendern.
Die drei CustomEvent-Kanaele sind ERSATZLOS weg — `grep -r dispatchEvent src`
liefert nichts mehr. Wer die Schublade oeffnen will, setzt `?system=`; wer springen
will, navigiert. Auch der letzte Rest von P2 (`mc-palette-open`) ist aufgeloest.
## Statusleiste (Spezifikation §4.1)
Der Zustand der Box stand bisher verstreut: die Ampel unten in der Sidebar, die
Auslastung nur im Cockpit, das aktive Modell nur im Modell-Manager. Wer in der
Konsole arbeitete, sah gar nichts.
Jetzt eine feste Leiste ueber allen Ansichten: Motor/Hirn-Ampel (klickbar zum
Agenten) · aktive Rolle + Durchsatz mit Sparkline · geteilter Speicher ALS BALKEN
(nicht als Prozent — 128 GB Unified Memory ist die Kernzahl dieser Box) · CPU/GPU
· Temperatur (ab 85 °C bernstein) · Betriebszeit · Token-Summe · Live-Anzeige.
Die Sparklines sind eigenes SVG, ~20 Zeilen. Fuer eine 56-Pixel-Linie waere eine
Diagramm-Bibliothek Verschwendung.
Dafuer neu im Backend: `uptime_s` in /api/system/status (psutil.boot_time).
Gehoert dorthin, weil die Box sich woechentlich selbst neu startet — dann ist
"laeuft seit 20 Minuten" die Antwort auf eine ganze Klasse von Fragen.
Liefert psutil nichts, steht dort None und die Leiste blendet das Feld aus,
statt eine Zahl zu erfinden.
## aria-live (Befund B-11) — und diesmal mit Absender
Im ganzen Frontend gab es KEIN einziges aria-live. app/shell/Meldungen.tsx ist
jetzt die eine Stelle fuer beilaeufige Rueckmeldungen; Fehler bekommen
`assertive` und bleiben stehen, alles andere `polite` und raeumt sich weg.
Wichtig: Die Region ist keine Attrappe. Gespeist wird sie von den Uebergaengen des
Ereignisstroms und vom Konsolen-Neustart (mit dem echten Grund aus ApiError.detail).
Der erste Verbindungsaufbau wird bewusst NICHT gemeldet — sonst begruesst jede
Seite den Nutzer mit "Verbindung wieder da".
## Ehrliche Anzeige statt stillem Altern (Befund B-15/B-18)
lib/events.ts fuehrt die Stromlage jetzt im Store: live · nachlauf · getrennt.
Beim Wechsel wird EINMAL invalidiert — vorher las relax() den Zustand erst beim
naechsten Refetch, nach einem Riss blieb die UI bis zu 150 s im langsamen Modus.
## Bahnbreiten-Deckel (Befund B-10)
Die Arbeitsflaeche endet bei 1600 px. Ohne Deckel zog sich das Cockpit auf einem
3440-px-Ultrawide auf ueber 3 000 px, waehrend die Wurzel-Schriftgroesse mitwuchs
und die Zeilen GROESSER statt lesbarer machte.
## Nebenbei
Der Buendel-Budget-Check aus P0 war fragil: `ls dist/assets/index-*.js | head -1`
kann den falschen treffen, weil Rollup auch kleine geteilte Module "index-*.js"
nennt (gemessen: ein 67-Byte-Chunk neben dem 374-kB-Einstieg). Er waere dann still
immer gruen gewesen. Beide Ampel-Dateien lesen den Einstieg jetzt aus index.html.
## Verifiziert im Browser
Statusleiste: alle Felder mit Live-Daten, "Laeuft seit 1 Std 10 min"
Backend abgewuergt -> Leiste springt auf "Nachlauf" UND die aria-live-Region
meldet "Verbindung zur Zentrale verloren" (polite)
Backend zurueck -> "Live", ohne Begruessungs-Meldung
Cockpit-Kachel -> /cockpit?system=logs, Schublade offen, Reiter "System-Logs"
Arbeitsflaeche -> max-width 1600 px
33/33 Tests gruen (7 neue fuer den Store) · ESLint 0 Fehler · tsc sauber ·
Einstieg 118 153 B gzip / Budget 125 000.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
7 lines
15 KiB
JavaScript
7 lines
15 KiB
JavaScript
import{c as A,z as M,M as B,f as z,k as D,u as T,r as W,j as e,b as a,N as g,O as b,P as G,t as f,W as j,X as I,C as N,n as y,q as i}from"./index-CB2Jz083.js";import{E as q}from"./external-link-CeXCWq9C.js";import{S as U}from"./shield-C1oLnNqm.js";/**
|
|
* @license lucide-react v0.460.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const w=A("Monitor",[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21",key:"1svkeh"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21",key:"vw1qmm"}]]),K=["chat","coding","fast","heavy"];function F(){const v=M(),{data:r,error:c}=B(),{data:d}=z(),{showAlert:n,dialogElement:k}=D(),o=T(),x=c?String(c):"",[_,l]=W.useState(!1),S=(d==null?void 0:d.models)??[],m=s=>{var t;return((t=s==null?void 0:s.match(/:(\d+)/))==null?void 0:t[1])??""},p=m(r==null?void 0:r.gateway_url)||"8642",u=(r==null?void 0:r.pc_executor_url)??"",C=u.replace(/^https?:\/\//,""),H=m(u)||"7777";async function E(s){try{await y("/api/agent/brain",{method:"POST",body:JSON.stringify({model:s})}),n("Erledigt",`Hermes-Hirn zeigt jetzt auf das Alias '${s}'. Der Gateway-Dienst wurde neu gestartet.`),o.invalidateQueries({queryKey:i.agentStatus}),l(!1)}catch(t){n("Fehler",`Wechsel fehlgeschlagen: ${t.message||t}`)}}async function P(s){try{await y("/api/agent/brain/set",{method:"POST",body:JSON.stringify({model_id:s})}),n("Erledigt","Agent-Hirn gewechselt (warm gehalten). Gateway wurde neugestartet."),o.invalidateQueries({queryKey:i.agentStatus}),o.invalidateQueries({queryKey:i.models}),l(!1)}catch(t){n("Fehler",`Wechsel fehlgeschlagen: ${t.message||t}`)}}return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row justify-between sm:items-center gap-4",children:[e.jsxs("div",{children:[e.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"}),e.jsxs("p",{className:"text-sm text-muted-foreground",children:["Hermes ist ein autonomer Agent, der im Hintergrund der Box läuft (Port ",e.jsxs("code",{children:[":",p]}),") und seine eigene UI besitzt."]})]}),(r==null?void 0:r.hermes_ui_url)&&e.jsxs("a",{href:g(r.hermes_ui_url),target:"_blank",rel:"noopener",className:a("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",r.hermes_ui_reachable?"bg-primary text-primary-foreground hover:opacity-90 shadow-primary/10":"border border-border/60 text-muted-foreground bg-background/20"),children:[e.jsx(q,{className:"h-4 w-4"}),e.jsx("span",{children:"Hermes-GUI öffnen"})]})]}),x&&e.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 (",x,")."]}),r&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"mc-card p-5",children:[e.jsxs("div",{className:"mb-4 flex items-center gap-2",children:[e.jsx(b,{className:"h-4.5 w-4.5 text-primary"}),e.jsx("span",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:"Agent-Fluss"})]}),e.jsxs("div",{className:"flex flex-col lg:flex-row lg:items-stretch gap-3",children:[e.jsxs("button",{onClick:()=>r.hermes_ui_reachable&&window.open(g(r.hermes_ui_url),"_blank"),title:r.hermes_ui_reachable?"Hermes-GUI öffnen":"Desktop-Gateway offline",className:"lg:w-40 shrink-0 rounded-xl border border-border/60 bg-background/30 p-3 text-left hover:border-primary/40 transition-all cursor-pointer flex flex-col justify-center",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(G,{className:a("h-3.5 w-3.5",r.hermes_ui_reachable?"text-emerald-400":"text-amber-500")}),e.jsx("span",{className:"text-xs font-semibold text-foreground",children:"Desktop & GUI"}),e.jsx("span",{className:a("ml-auto h-1.5 w-1.5 rounded-full animate-pulse",r.hermes_ui_reachable?"bg-emerald-500":"bg-amber-500")})]}),e.jsx("span",{className:"text-[10px] text-muted-foreground font-mono mt-0.5",children:"Hermes Desktop · Clients"})]}),e.jsx("div",{className:"hidden lg:flex items-center text-muted-foreground text-lg select-none",children:"→"}),e.jsxs("div",{className:"flex-1 flex flex-col gap-2.5",children:[e.jsxs("div",{className:"rounded-xl border border-primary/40 bg-primary/5 px-3.5 py-2.5 flex items-center gap-2",children:[e.jsx(b,{className:"h-3.5 w-3.5 text-primary"}),e.jsx("span",{className:"text-xs font-semibold text-primary",children:"Agent Gateway"}),e.jsxs("span",{className:"text-[11px] font-mono text-muted-foreground",children:[":",p]}),e.jsxs("span",{className:a("ml-auto inline-flex items-center gap-1.5 text-[10px] font-bold uppercase font-mono px-2 py-0.5 rounded-full border",r.gateway_reachable?"bg-emerald-500/10 text-emerald-400 border-emerald-500/20":"bg-red-500/10 text-red-400 border-red-500/20"),children:[e.jsx("span",{className:a("h-1.5 w-1.5 rounded-full",r.gateway_reachable?"bg-emerald-500 animate-pulse":"bg-red-500")}),r.gateway_reachable?"online":"offline"]})]}),e.jsxs("div",{className:"grid gap-2.5 sm:grid-cols-3",children:[e.jsxs("button",{onClick:()=>l(!0),className:"rounded-xl border border-border/60 bg-background/30 p-3 text-left hover:border-primary/45 transition-all cursor-pointer",children:[e.jsxs("div",{className:"flex items-center gap-1.5 text-muted-foreground",children:[e.jsx(f,{className:"h-3.5 w-3.5 text-primary"}),e.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"Hirn"}),e.jsx("span",{className:"ml-auto text-[9px] text-primary/70 font-bold uppercase",children:"wechseln →"})]}),e.jsx("div",{className:"text-[11px] font-mono font-medium text-foreground truncate mt-1",title:r.brain_model,children:r.brain_model||"chat"})]}),e.jsxs("div",{className:"rounded-xl border border-border/60 bg-background/30 p-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5 text-muted-foreground",children:[e.jsx(j,{className:"h-3.5 w-3.5 text-primary"}),e.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"Verdrahtung"})]}),e.jsxs("div",{className:"text-[10px] font-mono mt-1 flex flex-wrap gap-x-2 text-muted-foreground",children:[e.jsxs("span",{children:["Config: ",r.has_config?"✓":"—"]}),e.jsxs("span",{children:["Skills: ",r.has_skills?"✓":"—"]}),e.jsxs("span",{children:["Memory: ",r.has_memories?"✓":"—"]})]})]}),e.jsxs("div",{className:"rounded-xl border border-border/60 bg-background/30 p-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5 text-muted-foreground",children:[e.jsx(w,{className:"h-3.5 w-3.5 text-primary"}),e.jsx("span",{className:"text-[10px] font-bold uppercase tracking-wider",children:"PC"}),e.jsx("span",{className:a("ml-auto h-1.5 w-1.5 rounded-full",r.pc_executor_reachable?"bg-emerald-500 animate-pulse":"bg-amber-500")})]}),e.jsxs("div",{className:a("text-[11px] font-mono mt-1",r.pc_executor_reachable?"text-emerald-400":"text-muted-foreground"),children:[":",H," ",r.pc_executor_reachable?"verbunden":"offline"]})]})]})]})]})]}),e.jsxs("div",{className:"mc-card p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(w,{className:"h-5 w-5 text-primary"}),e.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-foreground",children:"PC Verbindung"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:a("h-2 w-2 rounded-full",r.pc_executor_reachable?"bg-emerald-500 animate-pulse":"bg-amber-500")}),e.jsx("span",{className:"text-xs font-semibold text-foreground",children:r.pc_executor_reachable?"Erreichbar":"Nicht verbunden"})]})]}),e.jsxs("div",{className:"grid gap-6 md:grid-cols-2 text-xs text-muted-foreground leading-relaxed text-left",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsxs("p",{children:["Der ",e.jsx("strong",{className:"text-foreground",children:"Hermes PC Executor"})," läuft auf ",e.jsx("code",{className:"text-foreground font-mono px-1 py-0.5 rounded bg-muted/40 border border-border/30",children:C||"deinem Windows-PC"})," und ermöglicht Hermes den direkten Zugriff auf deinen Windows-PC — Shell-Befehle, Screenshots, Tastatureingaben."]}),e.jsxs("p",{children:["Hermes erreicht den PC über den MCP-Server ",e.jsx("code",{className:"text-foreground font-mono px-1 py-0.5 rounded bg-muted/40 border border-border/30",children:"hermes-pc-control"}),", der automatisch beim Gateway-Start verbunden wird."]})]}),e.jsx("div",{className:"space-y-3",children:r.pc_executor_reachable?e.jsxs("div",{className:"p-3.5 bg-emerald-500/5 border border-emerald-500/20 rounded-xl space-y-1",children:[e.jsxs("div",{className:"text-emerald-400 font-semibold text-xs flex items-center gap-1.5",children:[e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"}),"PC Executor verbunden"]}),e.jsxs("p",{className:"text-[10px]",children:["Hermes kann jetzt per Telegram oder Terminal Befehle auf TobisNicerPC ausführen. Nutze ",e.jsx("code",{className:"text-foreground",children:"pc_shell"}),", ",e.jsx("code",{className:"text-foreground",children:"pc_screenshot"})," oder ",e.jsx("code",{className:"text-foreground",children:"pc_open"}),"."]})]}):e.jsxs("div",{className:"space-y-2",children:[e.jsx("h4",{className:"text-xs font-bold text-foreground",children:"PC Executor starten"}),e.jsxs("p",{children:["Starte ",e.jsx("code",{className:"text-foreground font-mono",children:"start.bat"})," im Ordner ",e.jsx("code",{className:"text-foreground font-mono",children:"client\\hermes-pc\\"})," auf dem Windows-PC und lasse das Fenster offen."]}),e.jsx("div",{className:"p-3 bg-background/25 rounded-xl border border-border/30 font-mono text-[9px] text-cyan-300",children:"client\\hermes-pc\\start.bat"})]})})]})]}),!r.gateway_reachable&&e.jsxs("div",{className:"mc-card p-6 space-y-4 text-left",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(U,{className:"h-5 w-5 text-amber-500"}),e.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-foreground",children:"Hermes-Agent Diagnostics"})]}),e.jsxs("div",{className:"text-xs text-muted-foreground space-y-3 leading-relaxed",children:[e.jsx("p",{children:"Der Hermes-Dienst ist auf der Box derzeit offline oder kann sich nicht mit dem lokalen llama-swap verbinden."}),e.jsxs("p",{children:["Am schnellsten: In der System-Schublade unter ",e.jsx("strong",{children:"Dienste"})," den Eintrag"," ",e.jsx("strong",{children:"Hermes-Gateway"})," mit einem Klick neu starten (dort gibt es auch die Logs dazu)."]}),e.jsxs("button",{onClick:()=>v({to:".",search:s=>({...s,system:"wartung"})}),className:"flex h-9 items-center gap-1.5 rounded-lg border border-primary/40 bg-primary/10 px-4 text-[11px] font-bold uppercase tracking-wide text-primary transition-all hover:bg-primary/20 cursor-pointer",children:[e.jsx(j,{className:"h-3.5 w-3.5"})," Dienste-Übersicht öffnen"]}),e.jsxs("p",{children:["Weitere Einrichtungsdetails (Brain-Konfiguration, MCP-Kopplungen, SSH-Tunneling und Such-Engines) findest du in der Dokumentationsdatei:",e.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"}),"."]})]})]})]}),r&&_&&e.jsx("div",{className:"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 overscroll-contain",role:"dialog","aria-modal":"true","aria-label":"Hermes-Hirn konfigurieren",children:e.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:[e.jsxs("div",{className:"flex items-center justify-between border-b border-border/20 pb-2",children:[e.jsxs("h3",{className:"text-xs font-bold uppercase tracking-wider text-primary flex items-center gap-1.5",children:[e.jsx(f,{className:"h-4 w-4"}),e.jsx("span",{children:"Hermes-Hirn konfigurieren"})]}),e.jsx("button",{onClick:()=>l(!1),className:"p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer",children:e.jsx(I,{className:"h-4 w-4"})})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx("div",{className:"text-[10px] font-bold uppercase tracking-wider text-muted-foreground",children:"Lane / Gateway-Alias"}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:K.map(s=>{const t=r.brain_model===s;return e.jsxs("button",{onClick:()=>E(s),className:a("px-3 py-1.5 rounded-lg text-xs font-mono font-semibold border transition-all cursor-pointer flex items-center gap-1.5",t?"border-primary/40 bg-primary/10 text-primary":"border-border/30 bg-background/20 text-foreground hover:bg-accent"),children:[s,t&&e.jsx(N,{className:"h-3.5 w-3.5"})]},s)})}),e.jsxs("p",{className:"text-[10px] text-muted-foreground/70",children:["Schlank & flexibel: das Hirn folgt dem Lane-Routing (z.B. ",e.jsx("code",{className:"text-primary",children:"chat"})," = fast↔heavy)."]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx("div",{className:"text-[10px] font-bold uppercase tracking-wider text-muted-foreground",children:"Installiertes Modell (warm gehalten)"}),e.jsx("div",{className:"space-y-1.5 max-h-56 overflow-y-auto pr-1",children:S.map(s=>{var h;const t=s.role==="hermes";return e.jsxs("button",{onClick:()=>!t&&P(s.name),disabled:t||s.incomplete,className:a("w-full text-left px-3 py-2.5 rounded-lg text-xs flex items-center justify-between font-mono border transition-all",t?"border-indigo-500/40 bg-indigo-500/10 text-indigo-300":s.incomplete?"border-border/20 bg-background/10 text-muted-foreground/50 cursor-not-allowed":"border-border/30 bg-background/20 text-foreground hover:bg-accent cursor-pointer"),children:[e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx("span",{className:"font-semibold truncate max-w-[280px]",children:(h=s.name.split("/").pop())==null?void 0:h.replace(/\.gguf$/i,"")}),e.jsxs("span",{className:"text-[9px] text-muted-foreground mt-0.5",children:[s.capabilities.params_b?`${s.capabilities.params_b}B`:"?"," · ",s.capabilities.tools!=="no"?"Tools ✓":"ohne Tools",s.role&&` · Rolle: ${s.role}`]})]}),t?e.jsxs("span",{className:"text-[9px] font-bold uppercase text-indigo-300 shrink-0 flex items-center gap-1",children:[e.jsx(N,{className:"h-3.5 w-3.5"})," Aktiv"]}):e.jsx("span",{className:"text-[9px] font-bold uppercase text-primary/70 shrink-0",children:"Warm setzen →"})]},s.name)})})]}),e.jsxs("div",{className:"text-[10px] text-amber-400/80 flex items-start gap-1.5 border-t border-border/20 pt-2.5",children:[e.jsx("span",{children:"💡"}),e.jsxs("span",{children:["Für einen ",e.jsx("strong",{children:"Agenten"}),' sind Hermes-Modelle (natives Tool-Calling) meist die robustere Wahl. Neues Modell? Erst über „Modell-Manager → Modelle finden" laden.']})]})]})}),k]})}export{F as AgentView};
|