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>
17 lines
12 KiB
JavaScript
17 lines
12 KiB
JavaScript
import{c as f,r as m,D as G,F as H,j as e,t as I,B as M,I as y,G as z,b as S,L as B,J as _,K as E,C as P}from"./index-CB2Jz083.js";import{A as u}from"./arrow-right-C2xQ80N8.js";import{C as K}from"./chevron-down-BVWIvMwj.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 T=f("Copy",[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
|
||
* @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 F=f("Globe",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",key:"13o1zl"}],["path",{d:"M2 12h20",key:"9i4pu4"}]]);/**
|
||
* @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 g=f("Laptop",[["path",{d:"M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16",key:"tarvll"}]]),k={hermes_desktop:"Hermes Desktop: Browser-Login",kilo:"Kilo: Einstellungen → API Provider",claude_code:"env / Übersetzer"};function h({line:t,loading:n}){return n||!t?e.jsxs("span",{className:"inline-flex items-center gap-1 text-[10px] font-semibold text-muted-foreground",children:[e.jsx(B,{className:"h-3 w-3 animate-spin"})," prüfe…"]}):t.ok?e.jsxs("span",{className:"inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-400",children:[e.jsx(_,{className:"h-3 w-3"})," ",t.detail]}):e.jsxs("span",{className:"inline-flex items-center gap-1 text-[10px] font-semibold text-red-400",children:[e.jsx(E,{className:"h-3 w-3"})," ",t.detail]})}function C({tool:t,fileName:n,accent:o,copied:i,onCopy:c}){return e.jsxs("div",{className:"flex flex-col border border-border/60 bg-black/60 rounded-2xl overflow-hidden shadow-2xl",children:[e.jsxs("div",{className:"flex h-11 items-center justify-between px-4 border-b border-border/40 bg-black/40 shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"h-3 w-3 rounded-full bg-red-500/80"}),e.jsx("span",{className:"h-3 w-3 rounded-full bg-amber-500/80"}),e.jsx("span",{className:"h-3 w-3 rounded-full bg-emerald-500/80"})]}),e.jsx("div",{className:"flex items-center gap-1.5 text-[10px] font-mono text-muted-foreground/75 bg-background/30 px-3 py-1 rounded-md border border-border/20",children:e.jsx("span",{children:n})}),e.jsxs("button",{onClick:c,className:"flex h-7 px-2.5 items-center gap-1.5 rounded-lg border border-border/40 bg-background/30 text-[10px] font-semibold text-muted-foreground hover:text-foreground hover:bg-background/60 transition-all cursor-pointer",children:[i?e.jsx(P,{className:"h-3.5 w-3.5 text-emerald-400"}):e.jsx(T,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:i?"Kopiert":"Kopieren"})]})]}),e.jsx("pre",{className:S("p-5 overflow-x-auto text-xs font-mono whitespace-pre leading-relaxed scrollbar-thin select-text bg-black/10",o==="teal"?"text-cyan-200/90":"text-violet-200/90"),children:e.jsx("code",{children:t.snippet})})]})}function R(){const t=window.location.hostname;return t&&t!=="localhost"&&t!=="127.0.0.1"?t:"192.168.178.151"}function Z(){const[t,n]=m.useState(localStorage.getItem("mc_host")||R()),[o,i]=m.useState("kilo"),[c,L]=m.useState(!1),[b,j]=m.useState(null),A=new URLSearchParams({host:t}),{data:a,error:N}=G(A.toString()),{data:r,isLoading:p}=H(),v=N?String(N):"";function D(s){n(s),s&&localStorage.setItem("mc_host",s)}const d=a==null?void 0:a.tools.hermes_desktop,l=a==null?void 0:a.tools[o];async function w(s,x){x&&(await navigator.clipboard.writeText(x),j(s),setTimeout(()=>j(null),1500))}return e.jsxs("div",{className:"space-y-6",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:"Verbindung & Integration"}),e.jsxs("p",{className:"text-sm text-muted-foreground",children:[e.jsx("span",{className:"text-foreground",children:"Hermes Desktop"})," ist die Tür zur Box — einmal verbinden, fertig. Für Spezialfälle gibt es darunter den rohen Gateway-Zugang ( /v1) für sonstige Tools."]})]}),e.jsxs("div",{className:"p-5 mc-card",children:[e.jsxs("div",{className:"grid gap-4 md:grid-cols-[170px_1fr] items-center",children:[e.jsxs("div",{className:"rounded-2xl border border-border/60 bg-background/40 p-4 text-center",children:[e.jsx(g,{className:"h-7 w-7 mx-auto text-muted-foreground"}),e.jsx("div",{className:"mt-2 text-sm font-semibold text-foreground",children:"Dein lokaler Agent"}),e.jsx("div",{className:"text-[11px] text-muted-foreground",children:"Hermes Desktop · Kilo Code · Claude Code …"})]}),e.jsxs("div",{className:"flex flex-col gap-2.5",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(u,{className:"h-4 w-4 text-muted-foreground shrink-0"}),e.jsxs("div",{className:"flex-1 rounded-xl border border-primary/25 bg-primary/5 px-3.5 py-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-xs font-semibold text-primary",children:[e.jsx(I,{className:"h-3.5 w-3.5"})," Leitung 1 — Modell"]}),e.jsx(h,{line:r==null?void 0:r.gateway,loading:p})]}),e.jsx("div",{className:"mt-1 text-[11px] font-mono text-primary/80",children:"Gateway · :9001/v1 · Modelle coder / heavy / vision"})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(u,{className:"h-4 w-4 text-muted-foreground shrink-0"}),e.jsxs("div",{className:"flex-1 rounded-xl border border-violet-500/25 bg-violet-500/5 px-3.5 py-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-xs font-semibold text-violet-300",children:[e.jsx(M,{className:"h-3.5 w-3.5"})," Leitung 2 — Gedächtnis"]}),e.jsx(h,{line:r==null?void 0:r.memory,loading:p})]}),e.jsx("div",{className:"mt-1 text-[11px] font-mono text-violet-300/80",children:"Hermes-nativ · im Agenten · nichts einzurichten"})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(u,{className:"h-4 w-4 text-muted-foreground shrink-0"}),e.jsxs("div",{className:"flex-1 rounded-xl border border-emerald-500/25 bg-emerald-500/5 px-3.5 py-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-xs font-semibold text-emerald-300",children:[e.jsx(g,{className:"h-3.5 w-3.5"})," Leitung 3 — Desktop-Gateway"]}),e.jsx(h,{line:r==null?void 0:r.desktop_gateway,loading:p})]}),e.jsx("div",{className:"mt-1 text-[11px] font-mono text-emerald-300/80",children:"Desktop-Gateway · :9119 · API-Status"})]})]})]})]}),e.jsxs("p",{className:"mt-3.5 text-[11px] text-muted-foreground leading-relaxed",children:["Der Gateway liefert ",e.jsx("span",{className:"text-foreground",children:"nur das LLM"}),". Das Gedächtnis führt",e.jsx("span",{className:"text-foreground",children:" Hermes selbst"})," (nichts einzurichten — die Kachel zeigt nur, ob es lebt), und das Desktop-Gateway bietet die Agenten-Schnittstelle. IDEs wählen die ",e.jsx("span",{className:"text-foreground",children:"echten Modelle"})," ","(coder · heavy · vision); daneben gibt es die virtuellen Lanes ",e.jsx("span",{className:"text-foreground",children:"chat"})," und"," ",e.jsx("span",{className:"text-foreground",children:"coding"}),", die je Anfrage selbst das passende Modell wählen (Alltags-Chat, simple Tools)."]})]}),e.jsx("div",{className:"p-5 mc-card",children:e.jsxs("div",{className:"space-y-1.5 max-w-md",children:[e.jsxs("label",{className:"text-[10px] font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5",children:[e.jsx(F,{className:"h-3.5 w-3.5 text-primary"})," Box LAN IP-Adresse",e.jsx("span",{className:"normal-case font-semibold tracking-normal text-muted-foreground/60",children:"— vorbefüllt aus der Adresse dieser Seite"})]}),e.jsx("input",{value:t,onChange:s=>D(s.target.value),"aria-label":"Box LAN IP-Adresse",spellCheck:!1,placeholder:"z.B. 192.168.178.151",className:"w-full h-9 rounded-lg border border-border/60 bg-background/40 px-3 font-mono text-xs outline-none focus:ring-1 focus:ring-primary/50 text-foreground"}),e.jsx("p",{className:"text-[10px] text-muted-foreground/70",children:"Wird in alle Snippets eingebacken. Ändern musst du sie nur, wenn die Box eine neue IP bekommt."})]})}),v&&e.jsxs("div",{className:"rounded-xl border border-red-500/20 bg-red-500/5 p-4 text-xs text-red-400",children:["Fehler beim Generieren der Snippets: ",v]}),a&&e.jsxs("div",{className:"space-y-5",children:[d&&e.jsxs("div",{className:"space-y-3 rounded-2xl border border-border/60 border-t-2 border-t-emerald-500/70 bg-card/30 p-4",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-space font-bold text-foreground",children:[e.jsx(g,{className:"h-4 w-4 text-emerald-400"}),"Hermes Desktop anbinden",e.jsx("span",{className:"text-[10px] font-medium text-emerald-400/90 normal-case",children:"der Hauptweg"})]}),e.jsx("p",{className:"text-[11px] text-muted-foreground mt-0.5",children:"Die Desktop-App dockt remote an die Box an — volle Agent-Oberfläche, Projekte, Review, Gedächtnis inklusive."})]}),d.note&&e.jsxs("div",{className:"flex items-start gap-2.5 p-3 rounded-xl bg-emerald-500/5 border border-emerald-500/20 text-[11px] text-muted-foreground leading-relaxed",children:[e.jsx(y,{className:"h-4 w-4 text-emerald-400 shrink-0 mt-0.5"}),e.jsx("span",{children:d.note})]}),e.jsx(C,{tool:d,fileName:k.hermes_desktop,accent:"teal",copied:b==="desktop",onCopy:()=>w("desktop",d.snippet)})]}),e.jsxs("div",{className:"rounded-2xl border border-border/60 bg-card/30",children:[e.jsxs("button",{onClick:()=>L(s=>!s),className:"flex w-full items-center gap-2 p-4 text-sm font-space font-bold text-foreground cursor-pointer hover:text-primary transition-colors",children:[c?e.jsx(K,{className:"h-4 w-4"}):e.jsx(z,{className:"h-4 w-4"}),"Sonstige Tools (roher /v1-Zugang)",e.jsx("span",{className:"text-[10px] font-medium text-muted-foreground normal-case",children:"Kilo Code · Claude Code · Eigenbau"})]}),c&&e.jsx("div",{className:"grid gap-5 p-4 pt-0",children:e.jsxs("div",{className:"space-y-3 rounded-2xl border border-border/60 border-t-2 border-t-primary/70 bg-card/30 p-4",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-space font-bold text-foreground",children:[e.jsx("span",{className:"flex h-5 w-5 items-center justify-center rounded-md bg-primary/15 text-primary text-[11px]",children:"1"}),"Modell anbinden"]}),e.jsx("p",{className:"text-[11px] text-muted-foreground mt-0.5",children:"Wähle dein Tool — das Snippet zeigt auf den Gateway."})]}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:Object.entries(a.tools).filter(([s])=>s!=="hermes_desktop").map(([s,x])=>e.jsx("button",{onClick:()=>i(s),className:S("rounded-lg px-3 py-1.5 text-[11px] font-semibold tracking-wide transition-all cursor-pointer",o===s?"bg-primary text-primary-foreground shadow-md shadow-primary/10":"border border-border/50 text-muted-foreground hover:text-foreground"),children:x.label},s))}),l&&e.jsxs(e.Fragment,{children:[l.note&&e.jsxs("div",{className:"flex items-start gap-2.5 p-3 rounded-xl bg-primary/5 border border-primary/20 text-[11px] text-muted-foreground leading-relaxed",children:[e.jsx(y,{className:"h-4 w-4 text-primary shrink-0 mt-0.5"}),e.jsx("span",{children:l.note})]}),e.jsx(C,{tool:l,fileName:k[o]||"config.json",accent:"teal",copied:b==="model",onCopy:()=>w("model",l.snippet)})]})]})})]})]})]})}export{Z as ConnectView};
|