Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8aa22e6591a4fd31f10f5eb92f259173ad12e5df
mission-control-v2/frontend/dist/assets/ConnectView-CxDIL-EH.js
T
HitonabiandClaude Opus 5 8aa22e6591 perf(frontend): v3-Umbau P0 — Ballast raus, Startbuendel halbiert 
Erste Etappe des v3-Umbaus. Bewusst ohne jede Architektur-Aenderung: nur
Entruempeln, damit der Rest des Umbaus auf einem messbar leichten Stand aufsetzt.

Gemessen (vorher -> nachher):
  dist gesamt      27 375 720 B -> 1 477 852 B   (-94,6 %)
  Dateien in dist         135   ->        35
  Start-Chunk gzip    220 278 B ->   110 571 B   (-49,8 %)
  CSS gzip             31 577 B ->    15 121 B   (-52,1 %)
  Schrift-Dateien         112   ->        11     (WOFF 1: 0)

Vier Eingriffe:

1) avatar.vrm (24,5 MB) entfernt. Lag in public/ und dist/, wurde von KEINER
   Zeile des Repos referenziert — der Renderer Avatar3D.tsx war schon vorher
   verschwunden. War 89,5 % der Nutzlast, die auf die Box ging. Damit fallen
   auch die .gitignore-Sonderregel und der Direkt-Deploy-Schritt weg.
   DISASTER_RECOVERY.md §3·D ehrlich auf "ausgebaut" gesetzt (7 Stellen).

2) Schriften: die 11 @fontsource-Sammelimporte zogen ALLE Subsets (latin-ext,
   griechisch, kyrillisch) und je eine WOFF-1-Fassung mit — 112 Dateien, 1,58 MB,
   davon 902 kB WOFF 1, das kein Browser dieser App je abruft. Jetzt stehen die
   @font-face-Regeln direkt in index.css: nur latin, nur WOFF 2, nur die Schnitte,
   die per grep ueber die font-*-Klassen wirklich belegt sind.
   Nebenbei behoben: JetBrains Mono 600/700 fehlten komplett — die 19 Stellen mit
   `font-mono font-bold/semibold` wurden vom Browser synthetisch fettgerechnet.
   Jetzt echte Schnitte; bei Monospace ist die Laufweite gleich, kein Layout-Versatz.

3) Recharts aus dem Startbuendel. Das Cockpit ist die Startseite und laedt daher
   NICHT lazy; ueber SystemStatusCard/TokenPerformanceCard zog es Recharts samt
   d3 in index-*.js. LiveAreaChart ist jetzt eine Lazy-Huelle (Suspense mit
   hoehengleichem Platzhalter, damit nichts springt), die Recharts-Umsetzung liegt
   in LiveAreaChartImpl.tsx und kommt als eigener Chunk nach (105 kB gzip).

4) index.css: height 100dvh mit 100% als Rueckfall. Auf Mobilbrowsern mit
   einfahrender Adressleiste ist 100 % nicht die sichtbare Hoehe.

Dazu ein Buendel-Budget in beiden Ampel-Dateien (.gitea/ = MC2-Fassung,
deploy/ = universelle Vorlage): Start-Chunk und dist-Gesamtgroesse werden am
FRISCHEN Build im Runner gemessen. Bewusst kein Vergleich mit dem committeten
dist — der waere ueber Node-Versionen hinweg flatterhaft und wuerde dauerhaft
rot leuchten, was das Signal zerstoert.

Verifiziert gegen die Box (Frontend-Dev mit MC_API_TARGET=192.168.178.151:9001):
Cockpit rendert mit Live-Daten, keine Konsolenfehler, alle 11 Schriftschnitte
registriert, LiveAreaChartImpl + recharts laden nachweislich als Nachlade-Chunk.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-28 08:27:49 +02:00

27 lines
12 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{c as i,r as p,z as G,A as H,j as e,D as u,t as z,B as I,F as M,b as S,L as B,G as _,C as E}from"./index-B57enqf6.js";import{C as P}from"./chevron-down-C-RXUrpR.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(_,{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(E,{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 W(){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(z,{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(I,{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(P,{className:"h-4 w-4"}):e.jsx(M,{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{W as ConnectView};
Reference in New Issue View Git Blame Copy Permalink