HitonabiandClaude Opus 5
464b0d20b8
Dritte Etappe. Die Ansicht lag bisher im URL-Hash (`#models`), gespeist aus einem
useState in App.tsx. Das war fuer Reload und Lesezeichen brauchbar — aber nur auf
View-Ebene; fuer den Zustand DARUNTER war kein Platz.
## Was jetzt in der Adresse steht (Befund B-05)
/modelle?reiter=routing der Reiter war lokaler State, nicht teilbar
/ideen?offen=<id> die aufgeklappte Karte; wer waehrend eines
laufenden Workers neu lud, verlor seinen Platz
/wissen?datei=<pfad> jede Vault-Notiz verlinkbar
<ueberall>?system=wartung|logs die System-Schublade inkl. Reiter
Alle Suchparameter werden validiert (app/router.tsx) — ein Link mit Unsinn darin
faellt auf den Normalfall zurueck, statt die Ansicht in einen halben Zustand zu
bringen.
## Alte Lesezeichen brechen nicht
lib/hashUmleitung.ts biegt `#models` per replaceState auf `/modelle`, EINMAL vor
dem Router-Mount. Fuenf Tests decken das ab (jeder NAV-Eintrag, die Schreibweise
`#/models`, erhaltene Suchparameter, unbekannter Hash, kein Hash) — die Bruecke
sieht sonst wie toter Code aus und waere ein naheliegender Kandidat zum Wegraeumen.
Das Backend brauchte KEINE Zeile: der SPA-Catch-all in app.py:148-168 beantwortet
jede unbekannte Route schon immer mit index.html. Vorher geprueft, nicht gehofft.
## Fehlergrenze pro Route (Befund B-13)
Vorher hing eine einzige Grenze in main.tsx um alles — ein Renderfehler im
Modell-Manager nahm Cockpit, Konsole und Chronik mit. Jetzt faengt jede Route fuer
sich (components/RouteFehler.tsx: was passiert ist, was man tun kann, technische
Einzelheiten aufklappbar). AppErrorBoundary bleibt als letztes Netz fuer Fehler
ausserhalb jeder Route. Dazu eine 404-Seite, die Schiene und Kopfzeile stehen
laesst — im Browser geprueft.
## Budget: der Router kostete 29 kB, sie sind wieder drin
TanStack Router hob den Start-Chunk von 111 auf 141 kB gzip und riss damit das in
P0 gesetzte Ampel-Budget (125 kB). Statt das Budget hochzusetzen — was es als
Signal entwertet haette — den Platz zurueckgeholt: SystemDrawer und CommandPalette
sind beim Start UNSICHTBAR und liegen jetzt hinter lazy(). Die Palette laedt beim
ersten Strg+K und bleibt dann gemountet.
Start-Chunk gzip 111 411 -> 114 978 B (Budget 125 000, weiter scharf)
dist gesamt 1 565 521 B (Budget 3 145 728)
## Nebenbei
· Befund B-09 erledigt: Der "Suchen"-Knopf baute ein GEFAELSCHTES KeyboardEvent
(`new KeyboardEvent("keydown", { metaKey: true })`) und feuerte es aufs
Dokument. Jetzt ein eigener Kanal; in P3 loest der Store auch den ab.
· Der Schliessen-Knopf der System-Schublade hatte kein aria-label — ein reiner
Icon-Knopf ohne Namen. Nachgeholt (beim Pruefen aufgefallen).
· nav.ts fuehrt jetzt den Pfad je Eintrag + navFuerPfad() mit Laengen-Sortierung,
damit /ideen/<id> die Sidebar bei "Ideen" markiert. Mit Tests.
## Verifiziert im Browser (lokales Backend, echtes Produktions-Buendel)
/ -> /cockpit, Sidebar markiert
/#models -> /modelle, Sidebar markiert
/modelle?reiter=routing -> Reiter "Routing & Warm-Set" aktiv
/cockpit?system=logs -> Schublade offen, Reiter "System-Logs" aktiv;
Schliessen entfernt den Parameter wieder
/gibtsnicht -> 404-Seite, Schiene + Kopfzeile intakt
Zurueck-Taste -> voriger Pfad
26/26 Tests gruen · ESLint 0 Fehler · tsc sauber.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
27 lines
12 KiB
JavaScript
27 lines
12 KiB
JavaScript
import{c as i,r as p,D as G,F as H,j as e,t as I,B as M,G as z,b as S,L as B,C as _}from"./index-Bb8GyPHo.js";import{A as u}from"./arrow-right-D09OliuI.js";import{C as E}from"./chevron-down-BGRm8kVZ.js";import{C as P}from"./circle-check-Crmfz00W.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=i("CircleX",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]]);/**
|
||
* @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 K=i("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=i("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 w=i("Info",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]]);/**
|
||
* @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=i("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 f({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(P,{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(T,{className:"h-3 w-3"})," ",t.detail]})}function C({tool:t,fileName:n,accent:o,copied:c,onCopy:x}){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:x,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:[c?e.jsx(_,{className:"h-3.5 w-3.5 text-emerald-400"}):e.jsx(K,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:c?"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]=p.useState(localStorage.getItem("mc_host")||R()),[o,c]=p.useState("kilo"),[x,L]=p.useState(!1),[b,j]=p.useState(null),A=new URLSearchParams({host:t}),{data:a,error:N}=G(A.toString()),{data:r,isLoading:h}=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 y(s,m){m&&(await navigator.clipboard.writeText(m),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(f,{line:r==null?void 0:r.gateway,loading:h})]}),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(f,{line:r==null?void 0:r.memory,loading:h})]}),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(f,{line:r==null?void 0:r.desktop_gateway,loading:h})]}),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(w,{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:()=>y("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:[x?e.jsx(E,{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"})]}),x&&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,m])=>e.jsx("button",{onClick:()=>c(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:m.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(w,{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:()=>y("model",l.snippet)})]})]})})]})]})]})}export{Z as ConnectView};
|