HitonabiandClaude Opus 5
3249c8e942
React 18.3.1 -> 19.2.8, dazu @types/react(-dom) 19.
## Nichts brach
tsc --noEmit sauber, 54/54 Tests gruen, ESLint 0 Fehler
Im Browser gegen die ECHTE Box: Cockpit mit 2 Diagrammen und 4 Flaechen,
Statusleiste live (40,8/122,7 GB, 38 °C, 532 748 115 Token), 8 Karten
NULL Konsolen-Warnungen — keine veralteten Muster im Bestand
Das eigentliche Risiko war `react-force-graph-2d` (peer: react "*", also ungeprueft,
und es umhuellt eine Nicht-React-Bibliothek). Gegen den echten Vault der Box getestet:
Canvas 500x560, 4498 gezeichnete Pixel, keine Fehlerflaeche. Es laeuft.
## Das Budget hat angeschlagen — und ich habe es trotzdem angehoben
Gemessen kostet der Sprung 14 645 B gzip (118 762 -> 133 407) und riss damit das
in P0 gesetzte Budget von 125 000. Das Gate hat also getan, was es soll.
Beim Router (P2) habe ich in derselben Lage NICHT das Budget angefasst, sondern den
Platz zurueckgeholt (Schublade und Palette hinter lazy()). Hier geht das nicht: Der
Zuwachs IST die Plattform, es gibt nichts wegzulassen.
Also angehoben — einmalig, auf 140 000, mit der Begruendung IM Ampel-Skript, damit ein
spaeterer Leser sieht, dass es ein ueberlegter Schritt war und kein Nachgeben:
MC2 ist eine LAN-Appliance; 14 kB sind ueber Gigabit-Ethernet keine messbare Wartezeit.
Das Budget existiert gegen DRIFT — einen 24-MB-Avatar, eine 95-kB-Diagramm-Bibliothek
auf der Startseite — nicht gegen einen bewussten Plattform-Schritt. Der relative
Abstand zum Deckel bleibt derselbe wie vorher (~5 %).
## Ehrlich zum Nutzen
React 19 bringt diesem Projekt HEUTE wenig Konkretes: use(), Actions und
Server-Komponenten sind hier nicht im Spiel. Der Grund ist die Zukunft — 18 altert,
und der React Compiler ist der Pfad, auf dem die 18 offenen Warnungen aus
eslint-plugin-react-hooks (setState im Effekt, Ref-Zugriff im Render) irgendwann
nicht mehr nur Warnungen sind.
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-Dd1yR_F_.js";import{A as u}from"./arrow-right-BQzOIyyQ.js";import{C as K}from"./chevron-down-BP_KoZ0O.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};
|