nodefony 7.0.2 → 10.0.0-alpha.2

package/dist/client/client/debugbar/DebugBar.js

@@ -0,0 +1,1624 @@
+import { PLATFORM_CHANNELS, PLATFORM_EVENTS } from "../../realtime/platformChannels.js";
+import { RealtimeClient } from "../realtime/RealtimeClient.js";
+import { fmtClock, formatBytes, formatUptime, gauge, sparklinePoints } from "./format.js";
+import { DebugBarModel } from "./model.js";
+import { observeViteHmr } from "./hmr.js";
+import { installNetworkInterceptor } from "./network.js";
+import { NetworkModel, computeWaterfall, isError } from "./profile.js";
+//#region src/client/debugbar/DebugBar.ts
+/**
+* DebugBar — toolbar de debug par-page type Symfony WDT, **dev-only**, pensée
+* comme une **vitrine du realtime Nodefony** (on doit *voir* le framework
+* respirer en direct).
+*
+* 2ᵉ consommateur navigateur du Core isomorphe après Studio : MÊME backbone
+* realtime (WS JSON-RPC 2.0, canaux `nodefony:supervision` / `nodefony:syslog`) via
+* {@link RealtimeClient}. Aucun rendu serveur splicé dans le body : le serveur
+* *collecte*, le client *rend*.
+*
+* UI : **onglets** (Realtime / Network / Perf / Logs / Runtime) — un seul pane
+* rendu/visible à la fois (≠ grid fourre-tout) + **poignée de resize** (hauteur
+* persistée). Vanilla TS + **Shadow DOM** + sparklines **SVG maison** — 0 dep UI.
+*
+* Perf scroll (critique) : fond OPAQUE sur le panneau (le `backdrop-filter:blur`
+* sur le conteneur scrollable recompositait à chaque frame), `contain:content`
+* par pane, et la liste Network en **mise à jour incrémentale** (nœuds stables,
+* jamais de rebuild `innerHTML` global → le clic n'est plus perdu, le scroll ne
+* saute plus).
+*
+* Panneau **Network** (dev-only) : intercepte `fetch`/`XHR` (header-only,
+* défensif, réversible) → liste des appels AJAX ; clic sur un appel → fetch du
+* profil serveur (`/nodefony/profiler/api/{requestId}`, corrélé via le header
+* `X-Request-Id`) → **waterfall des phases** du pipeline. SPA-first : on profile
+* les appels, pas la page. Le `traceparent` W3C (RFC-propre) est aussi remonté.
+*/
+/** Canaux realtime consommés (figés, alignés sur les providers Studio). */
+const CHANNELS = {
+	stats: PLATFORM_CHANNELS.debugbar,
+	syslog: PLATFORM_CHANNELS.syslog
+};
+/** Endpoint WS realtime par défaut (porté par Studio aujourd'hui, RealtimeService demain). */
+const DEFAULT_PATH = "/nodefony/studio/api/realtime";
+/** Base du data-plane profiler (data-plane admin `IAdminApi` namespace `profiler`). */
+const DEFAULT_PROFILER_BASE = "/nodefony/profiler/api";
+const HOST_ID = "nodefony-debugbar";
+/** Dimensions des sparklines (unités viewBox SVG). */
+const MINI_W = 58;
+const MINI_H = 20;
+const CHART_W = 260;
+const CHART_H = 46;
+const RT_POINTS = 60;
+/** Borne basse de hauteur du panneau (px). */
+const PANEL_H_MIN = 140;
+/**
+* Hauteur par défaut = **fraction de l'écran** (≈48 % du viewport) — gros écran
+* → grand panneau, petit écran → panneau modeste. Bornée [300, 640] pour rester
+* raisonnable aux extrêmes.
+*/
+function defaultPanelH() {
+	const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+	return Math.min(640, Math.max(300, Math.round(vh * .48)));
+}
+/** Hauteur mini à l'ouverture d'un profil (waterfall confortable) ≈55 % écran. */
+function detailPanelH() {
+	const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+	return Math.min(680, Math.max(360, Math.round(vh * .55)));
+}
+/** Métadonnées d'affichage par framework (couleur de marque officielle). */
+const FRAMEWORKS = {
+	react19: {
+		label: "React 19",
+		color: "#61dafb"
+	},
+	react: {
+		label: "React",
+		color: "#61dafb"
+	},
+	vue3: {
+		label: "Vue 3",
+		color: "#42b883"
+	},
+	vue: {
+		label: "Vue",
+		color: "#42b883"
+	},
+	angular: {
+		label: "Angular",
+		color: "#dd0031"
+	},
+	vanilla: {
+		label: "Vanilla",
+		color: "#f7df1e"
+	}
+};
+const STYLES = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.bar {
+  position: fixed; left: 0; right: 0; z-index: 2147483000;
+  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: #e8eaed;
+  /* Fond OPAQUE (pas de backdrop-filter sur le conteneur scrollable : il
+     recompositait le blur à chaque frame de scroll → lag). Blur seulement sur
+     .strip (fin, non scrollé). */
+  background: #14161a;
+  --blue:#0067ba; --blue2:#3aa0ff; --orange:#ff8a3d; --ok:#36b37e; --warn:#ffab00;
+  --crit:#ff5630; --info:#4c9aff; --muted:#8a9099; --line:#2a2e36; --card:#1c1f26;
+  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
+}
+.bar.bottom { bottom: 0; }
+.bar.top { top: 0; }
+.bar::before {
+  content:""; position:absolute; left:0; right:0; height:2px;
+  background: linear-gradient(90deg, var(--blue), var(--blue2), var(--orange));
+  background-size: 200% 100%; animation: flow 4s linear infinite; opacity:.9;
+}
+.bar.bottom::before { top:0; } .bar.top::before { bottom:0; }
+@keyframes flow { to { background-position: 200% 0; } }
+
+/* Strip responsive : police (et tout le contenu en em) scale avec la largeur
+   d'écran, bornée 12→15px. Padding scale aussi. */
+.strip { display: flex; align-items: center; gap: clamp(12px,1.1vw,20px);
+  padding: clamp(8px,1vh,13px) clamp(14px,1.4vw,26px); cursor: pointer;
+  font-size: clamp(12px, 0.35vw + 8px, 16px); flex-wrap: nowrap; overflow: hidden;
+  background: rgba(20,22,26,.6); backdrop-filter: blur(14px) saturate(140%); }
+.strip:hover { background: rgba(255,255,255,.03); }
+.brand { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; flex:none; }
+.brand .logo { color: var(--blue2); font-size:1.05em; filter: drop-shadow(0 0 6px rgba(58,160,255,.6)); }
+.brand .name { background: linear-gradient(90deg,#fff,var(--blue2)); -webkit-background-clip:text;
+  background-clip:text; -webkit-text-fill-color:transparent; }
+.rt-pill { display:flex; align-items:center; gap:5px; padding:.2em .7em; border-radius:11px; flex:none;
+  font-size:.76em; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
+  color:var(--muted); background:#22262e; border:1px solid var(--line); }
+.rt-pill.connected { color:#fff; border-color:rgba(58,160,255,.5);
+  background: linear-gradient(90deg, rgba(0,103,186,.35), rgba(255,138,61,.25));
+  box-shadow: 0 0 14px rgba(58,160,255,.35); }
+.rt-pill .bolt { animation: bolt 1.6s ease-in-out infinite; }
+.rt-pill.connected .bolt { color: var(--orange); }
+@keyframes bolt { 0%,100%{opacity:.5;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} }
+
+.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; color: var(--muted); }
+.dot.connected { background: var(--ok); color: var(--ok); animation: pulse 2s infinite; }
+.dot.connecting, .dot.reconnecting { background: var(--warn); color: var(--warn); }
+.dot.error, .dot.disconnected { background: var(--crit); color: var(--crit); }
+@keyframes pulse { 0%{box-shadow:0 0 0 0 currentColor} 70%{box-shadow:0 0 0 5px transparent} 100%{box-shadow:0 0 0 0 transparent} }
+
+.metric { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex:none; }
+.metric .k { color: var(--muted); text-transform: uppercase; font-size: .76em; letter-spacing:.5px; }
+.metric .v { font-weight: 700; min-width: 2.6em; font-size: 1em; }
+.mini { width: 3.8em; height: 1.35em; display:block; }
+.mini polyline { fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; }
+.chip { display:flex; align-items:center; gap:6px; padding:.2em .7em; border-radius:11px; flex:none;
+  background:#22262e; font-weight:700; font-size:.92em; white-space:nowrap; }
+.chip .k { color: var(--muted); font-size:.82em; text-transform:uppercase; }
+.spacer { flex: 1 1 auto; min-width: 8px; }
+.toggle { color: var(--muted); font-size: .85em; transition: transform .25s; flex:none; }
+.bar.open .toggle { transform: rotate(180deg); }
+.ok{color:var(--ok)} .warn{color:var(--warn)} .crit{color:var(--crit)} .info{color:var(--info)} .muted{color:var(--muted)} .blue{color:var(--blue2)}
+.spark.ok{stroke:var(--ok)} .spark.warn{stroke:var(--warn)} .spark.crit{stroke:var(--crit)} .spark.rt{stroke:var(--blue2)}
+.area.ok{fill:rgba(54,179,126,.12)} .area.warn{fill:rgba(255,171,0,.14)} .area.crit{fill:rgba(255,86,48,.16)} .area.rt{fill:rgba(58,160,255,.16)}
+
+/* ── Panneau : resize + onglets + panes ──────────────────────────────────── */
+.panelwrap { display:none; flex-direction:column; border-top:1px solid var(--line); }
+.bar.open .panelwrap { display:flex; }
+.resize { height:8px; cursor:ns-resize; display:flex; align-items:center; justify-content:center;
+  flex:none; background:rgba(255,255,255,.015); }
+.resize::after { content:""; width:42px; height:3px; border-radius:2px; background:var(--line); transition:background .15s; }
+.resize:hover::after { background:var(--blue2); }
+.tabs { display:flex; gap:2px; padding:0 8px; flex:none; border-bottom:1px solid var(--line);
+  overflow-x:auto; scrollbar-width:none; }
+.tabs::-webkit-scrollbar { display:none; }
+.tab { padding:7px 12px; font:inherit; font-size:11px; font-weight:700; color:var(--muted);
+  cursor:pointer; border:0; background:none; border-bottom:2px solid transparent;
+  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; display:flex; align-items:center; gap:5px; }
+.tab:hover { color:#fff; }
+.tab.active { color:#fff; border-bottom-color:var(--blue2); }
+.tab .tcount { font-size:9px; padding:0 5px; border-radius:8px; background:#22262e; color:var(--muted); }
+.tab.active .tcount { background:rgba(58,160,255,.25); color:#fff; }
+.tab .tcount.crit { background:rgba(255,86,48,.3); color:#fff; }
+.panes { overflow:hidden; }
+.pane { display:none; height:100%; overflow:auto; padding:14px; contain:content; }
+.pane.active { display:block; }
+.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:14px; align-items:start; }
+.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
+.card.hero { border-color: rgba(58,160,255,.35);
+  background: linear-gradient(160deg, rgba(0,103,186,.16), rgba(28,31,38,.7) 60%); }
+.card > h4 { margin:0 0 9px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:800; display:flex; gap:6px; align-items:center; }
+
+.hero .big { font-size:30px; font-weight:800; line-height:1; letter-spacing:-.5px;
+  background:linear-gradient(90deg,var(--blue2),var(--orange)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
+.hero .big small { font-size:12px; -webkit-text-fill-color:var(--muted); color:var(--muted); font-weight:700; margin-left:4px; }
+.hero svg { width:100%; height:38px; display:block; margin:6px 0 8px; }
+.hero polyline { fill:none; stroke-width:1.75; vector-effect:non-scaling-stroke; }
+.tag { margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted);
+  font-size:10px; line-height:1.5; }
+.tag b { color:#cfd3d8; }
+
+.chart { margin-bottom:10px; } .chart:last-child { margin-bottom:0; }
+.chart .hd { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
+.chart .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
+.chart .val { font-weight:700; font-size:13px; }
+.chart .peak { color:var(--muted); font-size:9px; }
+.chart svg { width:100%; height:${CHART_H}px; display:block; }
+.chart polyline { fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; }
+
+.kv { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
+.kv .k { color:var(--muted); } .kv .v { font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; }
+
+.counts { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
+.feed { font-size:11px; }
+/* ── Explorateur de journal ─────────────────────────────────────────────── */
+.counts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
+.counts .spacer { flex:1 1 auto; }
+.counts button { font: inherit; color: inherit; background:none; border:1px solid transparent; cursor:pointer; }
+.chip.sevf { border-color: var(--line); }
+.chip.sevf.on { border-color: var(--ok); color:#fff; }
+.search { font: inherit; font-size:11px; color:inherit; background:rgba(255,255,255,.04);
+  border:1px solid var(--line); border-radius:6px; padding:3px 8px; min-width:120px; max-width:220px; }
+.search::placeholder { color: var(--muted); }
+.toolbtn { font: inherit; font-size:12px; line-height:1; color:var(--muted); background:none;
+  border:1px solid var(--line); border-radius:6px; padding:3px 7px; cursor:pointer; }
+.toolbtn:hover { color:#fff; }
+.toolbtn.on { color:var(--ok); border-color:var(--ok); }
+.log { display:flex; align-items:baseline; gap:8px; padding:2px 0; cursor:pointer; }
+.log:hover { background:rgba(255,255,255,.04); }
+.log .ts { color:var(--muted); font-variant-numeric: tabular-nums; flex:none; }
+.log .rid { color:var(--muted); font-family:monospace; flex:none; margin-left:auto;
+  border:1px solid var(--line); border-radius:4px; padding:0 4px; }
+.logdetail { margin:2px 0 6px 0; padding:6px 8px; border-left:2px solid var(--line);
+  background:rgba(255,255,255,.03); border-radius:0 6px 6px 0; }
+.drow { display:flex; gap:8px; padding:1px 0; }
+.drow .dk { color:var(--muted); min-width:92px; flex:none; }
+.drow .dv { word-break:break-word; }
+.feed .empty { color:var(--muted); padding:6px 0; }
+.log { display:flex; gap:7px; padding:2px 0; align-items:baseline; border-bottom:1px solid rgba(255,255,255,.04); }
+.log .sev { flex:none; width:54px; font-size:9px; font-weight:800; text-transform:uppercase; }
+.log .mod { flex:none; color:var(--muted); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.log .txt { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+.card.fe { border-color: rgba(255,138,61,.3);
+  background: linear-gradient(160deg, rgba(255,138,61,.12), rgba(28,31,38,.7) 60%); }
+.fw { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
+.fw .badge { padding:2px 10px; border-radius:7px; font-weight:800; font-size:11px; color:#0b0d10; }
+.fw .name { color:var(--muted); }
+.fe .hd { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
+.fe .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
+.hmr-big { font-size:26px; font-weight:800; line-height:1; transition: color .2s; }
+.hmr-big.hmr-flash { color: var(--orange); text-shadow: 0 0 14px rgba(255,138,61,.7); }
+.fe svg { width:100%; height:34px; display:block; margin:6px 0 8px; }
+.fe polyline { fill:none; stroke-width:1.75; vector-effect:non-scaling-stroke; }
+.spark.fe { stroke:var(--orange); } .area.fe { fill:rgba(255,138,61,.16); }
+
+.env-badge { padding:.2em .7em; border-radius:6px; font-size:.76em; font-weight:800;
+  letter-spacing:.6px; text-transform:uppercase; color:#0b0d10; background:var(--muted); flex:none; }
+.env-badge.dev { background: var(--ok); } .env-badge.prod { background: var(--crit); color:#fff; }
+.env-badge.test { background: var(--warn); } .env-badge.staging { background:#a06bff; color:#fff; }
+.branch { display:flex; align-items:center; gap:5px; padding:2px 9px; border-radius:6px; flex:none;
+  background:#22262e; font-weight:700; max-width:200px; cursor:help; }
+.branch .git { color:var(--blue2); } .branch span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+/* Les contrôles et les indicateurs du bandeau sont de VRAIS <button> : ils
+   s'atteignent au clavier et s'annoncent. Ce bloc leur retire l'apparence
+   native que le navigateur leur donne, sans leur retirer leur nature. */
+.strip button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
+.strip button:focus-visible, .tab:focus-visible, .toolbtn:focus-visible {
+  outline: 2px solid var(--ok); outline-offset: 2px; border-radius: 4px; }
+.goto:hover .v, .goto:hover .k { color: #fff; }
+
+/* ── Infobulles ────────────────────────────────────────────────────────────
+   Maison, et non l'attribut « title » du navigateur : celui-là met environ une
+   seconde à venir, ne se style pas, et surtout n'apparaît JAMAIS au focus
+   clavier — l'aide restait donc inaccessible à qui n'utilise pas la souris.
+   Celle-ci s'ouvre au survol ET au focus, ce qui la rend utilisable par tout le
+   monde. En CSS pur : aucun script, aucun écouteur, rien à libérer. */
+[data-tip] { position: relative; }
+[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
+  width: max-content; max-width: 280px; white-space: normal; text-align: left;
+  background: #0b0b0d; color: #f2f2f2; border: 1px solid var(--line);
+  border-radius: 6px; padding: 6px 9px; font-size: 11px; line-height: 1.45;
+  font-weight: 400; text-transform: none; letter-spacing: 0;
+  box-shadow: 0 6px 20px rgba(0,0,0,.5);
+  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; z-index: 20;
+}
+[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
+/* Barre ancrée en haut : l'infobulle bascule dessous, sinon elle sort de l'écran. */
+.bar.top [data-tip]::after { bottom: auto; top: calc(100% + 9px); }
+/* Les bords : l'infobulle se recale pour ne pas déborder de la fenêtre. */
+.strip > :first-child[data-tip]::after { left: 0; transform: none; }
+.strip > :last-child[data-tip]::after { left: auto; right: 0; transform: none; }
+@media (prefers-reduced-motion: reduce) { [data-tip]::after { transition: none; } }
+
+.ctrl { color:var(--muted); cursor:pointer; padding:0 4px; font-weight:800; font-size:1.05em; line-height:1; flex:none; }
+.ctrl:hover { color:#fff; }
+.ctrl.live { font-size:.78em; font-weight:700; border:1px solid var(--line); border-radius:6px; padding:2px 7px; letter-spacing:.3px; }
+.ctrl.live.on { color:var(--ok); border-color:var(--ok); }
+.ctrl.live:not(.on) { color:var(--muted); }
+
+.minbar { position:fixed; z-index:2147483000; display:none; align-items:center; gap:8px;
+  padding:6px 13px; border-radius:22px; cursor:pointer;
+  font:12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:#e8eaed;
+  background:rgba(18,20,25,.92); backdrop-filter:blur(12px);
+  border:1px solid rgba(58,160,255,.45); box-shadow:0 4px 20px rgba(0,0,0,.5); }
+.minbar:hover { border-color:#3aa0ff; box-shadow:0 4px 26px rgba(58,160,255,.4); }
+.minbar.bottom { bottom:14px; } .minbar.top { top:14px; }
+.minbar.dock-left { left:14px; } .minbar.dock-right { right:14px; }
+.minbar .dot { width:8px; height:8px; border-radius:50%; background:#36b37e; }
+.minbar .dot.connected { background:#36b37e; } .minbar .dot.disconnected,.minbar .dot.error { background:#ff5630; }
+.minbar .dot.connecting,.minbar .dot.reconnecting { background:#ffab00; }
+.minbar .mlogo { color:#ff8a3d; } .minbar .mrate { font-weight:800; }
+.minbar .mbadge { font-size:9px; font-weight:800; text-transform:uppercase; color:#8a9099; }
+
+/* ── Network ─────────────────────────────────────────────────────────────── */
+.net-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
+.net-clear { margin-left:auto; color:var(--muted); cursor:pointer; font-size:10px;
+  text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; border-radius:6px; }
+.net-clear:hover { color:#fff; background:rgba(255,255,255,.06); }
+.net-list { border-top:1px solid var(--line); }
+.net-list .empty { color:var(--muted); padding:8px 0; }
+.net-row { display:flex; align-items:center; gap:9px; padding:3px 4px; cursor:pointer;
+  border-bottom:1px solid rgba(255,255,255,.04); }
+.net-row:hover { background:rgba(255,255,255,.04); }
+.net-row.sel { background:rgba(58,160,255,.14); }
+.net-row.err .net-path { color:#ffb4a6; }
+.net-method { flex:none; width:46px; text-align:center; font-weight:800; font-size:9px;
+  padding:1px 0; border-radius:5px; text-transform:uppercase; color:#0b0d10; background:var(--muted); }
+.net-method.get { background:var(--blue2); } .net-method.post { background:var(--ok); }
+.net-method.put,.net-method.patch { background:var(--orange); }
+.net-method.delete { background:var(--crit); color:#fff; }
+.net-method.ws { background:#a06bff; color:#fff; }
+.net-path { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.net-status { flex:none; width:38px; text-align:center; font-weight:800; font-size:10px; }
+.net-status.s2 { color:var(--ok); } .net-status.s3 { color:var(--info); }
+.net-status.s4 { color:var(--warn); } .net-status.s5 { color:var(--crit); }
+.net-status.sp { color:var(--muted); }
+.net-dur { flex:none; width:58px; text-align:right; color:var(--muted); font-size:10px; }
+.net-rid { flex:none; color:var(--blue2); font-size:9px; opacity:.7; }
+
+.net-detail { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
+.net-detail .empty { color:var(--muted); }
+.det-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:2px 14px; margin-bottom:10px; }
+.wf { display:flex; flex-direction:column; gap:3px; }
+.wf-title { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
+.wf-row { display:flex; align-items:center; gap:8px; }
+.wf-name { flex:none; width:74px; text-align:right; color:#cfd3d8; font-size:10px; }
+.wf-track { flex:1; position:relative; height:14px; background:rgba(255,255,255,.04); border-radius:3px; }
+.wf-bar { position:absolute; top:0; bottom:0; border-radius:3px; min-width:2px;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
+.wf-ms { flex:none; width:62px; text-align:right; color:var(--muted); font-size:10px; }
+.wf-bar.parse { background:#4c9aff; } .wf-bar.resolve { background:#3aa0ff; }
+.wf-bar.firewall { background:#ff8a3d; } .wf-bar.init { background:#a06bff; }
+.wf-bar.action { background:#36b37e; } .wf-bar.render { background:#ffab00; }
+.wf-bar.send { background:#00b8d9; } .wf-bar.other { background:#8a9099; }
+.wf-bar.identity { background:#ff5c8a; }
+.det-loading,.det-err { color:var(--muted); padding:6px 0; } .det-err { color:var(--crit); }
+
+/* Network pane = split DevTools : liste (scroll) + détail (scroll), détail
+   TOUJOURS visible (≠ tout dans un seul scroll où le détail finit hors écran). */
+.pane.np.active { display:flex; flex-direction:column; padding:0; }
+.np .net-head { padding:10px 14px 8px; flex:none; margin:0; }
+.np .net-list { flex:1 1 auto; min-height:56px; overflow:auto; padding:0 14px; border-top:1px solid var(--line); }
+/* Détail : placeholder = petit (flex:0). Sélection active (.np.sel) → le détail
+   prend une vraie part (60%) avec son propre scroll → le waterfall est visible,
+   la liste se réduit. */
+.np .net-detail { flex:0 1 auto; max-height:50%; overflow:auto; padding:8px 14px 12px; margin-top:0; border-top:1px solid var(--line); }
+.np.sel .net-list { flex:1 1 40%; min-height:48px; }
+.np.sel .net-detail { flex:1 1 60%; max-height:none; }
+.det-bar { display:flex; justify-content:flex-end; margin-bottom:2px; }
+.det-close { cursor:pointer; color:var(--muted); font-weight:800; font-size:15px; line-height:1; padding:0 4px; }
+.det-close:hover { color:#fff; }
+`;
+function pushCap(arr, v, cap) {
+	arr.push(v);
+	if (arr.length > cap) arr.shift();
+}
+function clampH(h) {
+	const max = typeof window !== "undefined" ? window.innerHeight * .85 : 700;
+	if (h < PANEL_H_MIN) return PANEL_H_MIN;
+	if (h > max) return Math.round(max);
+	return Math.round(h);
+}
+/**
+* Version du format de l'état persisté.
+*
+* Elle existe pour une raison précise : ces clés survivent aux mises à jour du
+* framework, dans un navigateur que personne ne nettoie. Le jour où l'une change
+* de sens, une valeur écrite par une version d'avant est lue comme si elle
+* disait la même chose — et la barre s'ouvre dans un état incohérent que
+* l'utilisateur ne sait pas défaire. Au changement de version, tout est purgé :
+* on perd une préférence d'affichage, ce qui ne coûte rien, plutôt que de
+* charger un état dont on ne sait rien.
+*/
+const LS_VERSION = "1";
+/** Clés de persistance localStorage (état chrome de la barre). */
+const LS = {
+	/** Version du format — jamais purgée, c'est elle qui décide de la purge. */
+	version: "nf.debugbar.v",
+	visible: "nf.debugbar.visible",
+	min: "nf.debugbar.min",
+	side: "nf.debugbar.side",
+	tab: "nf.debugbar.tab",
+	h: "nf.debugbar.h",
+	live: "nf.debugbar.live"
+};
+/**
+* Toutes les clés que la barre écrit sur CE navigateur.
+*
+* Cette liste n'est pas décorative : elle est ce que la barre AFFICHE dans son
+* onglet Runtime et ce que sa purge efface. Trois choses qui doivent rester
+* d'accord, donc une seule source.
+*/
+function lsKeys() {
+	return Object.values(LS);
+}
+/** Efface l'état persisté de la barre — et rien d'autre du stockage de l'app. */
+function lsPurge() {
+	try {
+		for (const k of lsKeys()) localStorage.removeItem(k);
+	} catch {}
+}
+/**
+* Purge l'état si le format a changé depuis la dernière visite.
+*
+* Appelée avant toute lecture — sinon on lirait justement les valeurs qu'on
+* s'apprête à jeter.
+*/
+function lsMigrate() {
+	try {
+		if (localStorage.getItem(LS.version) === LS_VERSION) return;
+		lsPurge();
+		localStorage.setItem(LS.version, LS_VERSION);
+	} catch {}
+}
+function lsGet(key, def) {
+	try {
+		return localStorage.getItem(key) ?? def;
+	} catch {
+		return def;
+	}
+}
+function lsSet(key, val) {
+	try {
+		localStorage.setItem(key, val);
+	} catch {}
+}
+const GLOBAL_KEY = "__NODEFONY_DEBUGBAR__";
+/**
+* Widget DOM. Lazy : ne construit le Shadow DOM qu'au `mount()`. Idempotent
+* (un seul `#nodefony-debugbar` par page).
+*/
+var DebugBar = class DebugBar {
+	client;
+	model = new DebugBarModel();
+	url;
+	position;
+	startOpen;
+	ownClient;
+	frontend;
+	host = null;
+	bar = null;
+	visible;
+	minimized;
+	side;
+	activeTab;
+	panelH;
+	live;
+	/** dispose des abonnements realtime (null quand OFF). */
+	liveOff = null;
+	rafPending = false;
+	feedLen = -1;
+	/** Filtre de sévérité de l'onglet Logs — `all` par défaut. */
+	feedSev = "all";
+	/** Recherche courante, déjà en minuscules (comparée telle quelle). */
+	feedQuery = "";
+	/**
+	* Affichage suspendu. Les entrées continuent d'arriver dans le modèle : à la
+	* reprise, la liste se reconstruit complète — mettre en pause ne fait pas
+	* perdre ce qui s'est passé pendant, ce qui serait le pire des deux mondes.
+	*/
+	feedPaused = false;
+	/** La liste affichée doit être refaite (changement de filtre ou de recherche). */
+	feedDirty = false;
+	prevFrames = 0;
+	rtRate = 0;
+	rtPeak = 0;
+	rtSeries = [];
+	viteConnected = false;
+	hmrCount = 0;
+	hmrPrev = 0;
+	hmrRate = 0;
+	hmrLast = "—";
+	hmrSeries = [];
+	flashTimer = null;
+	disposers = [];
+	el = Object.create(null);
+	networkEnabled;
+	profilerBase;
+	net = new NetworkModel();
+	/** Observe la barre → publie sa hauteur (var CSS) pour l'app hôte. */
+	ro = null;
+	netRows = /* @__PURE__ */ new Map();
+	selectedRid = null;
+	selRowId = null;
+	selNoRid = false;
+	detailVersion = 0;
+	detailRendered = -1;
+	constructor(opts = {}) {
+		this.url = opts.url ?? DEFAULT_PATH;
+		this.position = opts.position ?? "bottom";
+		this.startOpen = opts.open ?? false;
+		this.ownClient = false;
+		this.frontend = opts.frontend ?? null;
+		this.networkEnabled = opts.network !== false;
+		this.profilerBase = (opts.profilerBase ?? DEFAULT_PROFILER_BASE).replace(/\/$/, "");
+		this.client = opts.client ?? RealtimeClient.shared({ url: this.url });
+		lsMigrate();
+		this.visible = lsGet(LS.visible, "1") !== "0";
+		this.minimized = lsGet(LS.min, "0") === "1";
+		this.side = lsGet(LS.side, "right") === "left" ? "left" : "right";
+		this.activeTab = lsGet(LS.tab, "realtime") || "realtime";
+		this.panelH = clampH(parseInt(lsGet(LS.h, String(defaultPanelH())), 10) || defaultPanelH());
+		this.live = lsGet(LS.live, "0") === "1";
+	}
+	/** Construit le DOM, branche le realtime et ouvre la connexion. No-op si déjà monté. */
+	mount() {
+		if (typeof document === "undefined") return this;
+		if (document.getElementById(HOST_ID)) return this;
+		this.buildDom();
+		this.wireRealtime();
+		this.wireHmr();
+		this.wireNetwork();
+		this.applyChrome();
+		this.registerHandle();
+		this.client.connect().catch(() => {});
+		this.render();
+		return this;
+	}
+	/** Détache listeners, ferme la connexion (si propriétaire) et retire le DOM. */
+	unmount() {
+		for (const d of this.disposers) d();
+		this.disposers.length = 0;
+		if (this.flashTimer) clearTimeout(this.flashTimer);
+		this.flashTimer = null;
+		if (this.ownClient) this.client.disconnect();
+		this.unregisterHandle();
+		this.ro?.disconnect();
+		this.ro = null;
+		try {
+			document.documentElement.style.removeProperty("--nodefony-debugbar-height");
+		} catch {}
+		this.host?.remove();
+		this.host = null;
+		this.bar = null;
+	}
+	/** Affiche/masque la barre (pilotable depuis une app via le handle global). */
+	setVisible(v) {
+		this.visible = v;
+		lsSet(LS.visible, v ? "1" : "0");
+		this.applyChrome();
+	}
+	setMinimized(v) {
+		this.minimized = v;
+		lsSet(LS.min, v ? "1" : "0");
+		this.applyChrome();
+	}
+	toggleSide() {
+		this.side = this.side === "left" ? "right" : "left";
+		lsSet(LS.side, this.side);
+		this.applyChrome();
+	}
+	/**
+	* Déplie ou replie le panneau — le SEUL endroit qui bascule cet état.
+	*
+	* Il porte aussi ce qu'un lecteur d'écran doit entendre : `aria-expanded` sur
+	* le bouton qui commande, et un nom qui dit l'action à venir (« Déplier » /
+	* « Replier »), pas l'état courant — un nom qui décrit l'état laisse
+	* l'utilisateur deviner ce que le bouton va faire.
+	*/
+	setOpen(open) {
+		const bar = this.bar;
+		if (!bar) return;
+		bar.classList.toggle("open", open);
+		const btn = this.el.btnToggle;
+		if (btn) {
+			btn.setAttribute("aria-expanded", open ? "true" : "false");
+			const label = open ? "Replier le panneau" : "Déplier le panneau";
+			btn.setAttribute("aria-label", label);
+			btn.setAttribute("data-tip", label);
+		}
+		this.render();
+	}
+	setTab(tab) {
+		this.activeTab = tab;
+		lsSet(LS.tab, tab);
+		this.applyTab();
+		this.render();
+	}
+	setPanelH(h) {
+		this.panelH = clampH(h);
+		const panes = this.el.panes;
+		if (panes) panes.style.height = `${this.panelH}px`;
+	}
+	/** Reflète l'onglet actif sur les boutons + panes. */
+	applyTab() {
+		(this.bar?.querySelectorAll(".tab"))?.forEach((t) => t.classList.toggle("active", t.getAttribute("data-tab") === this.activeTab));
+		(this.bar?.querySelectorAll(".pane"))?.forEach((p) => p.classList.toggle("active", p.getAttribute("data-pane") === this.activeTab));
+	}
+	/** Applique l'état chrome au DOM (display + classes de dock + hauteur). */
+	applyChrome() {
+		if (!this.host || !this.bar) return;
+		this.host.style.display = this.visible ? "" : "none";
+		this.bar.style.display = this.minimized ? "none" : "";
+		const min = this.el.minbar;
+		if (min) {
+			min.style.display = this.minimized ? "flex" : "none";
+			min.setAttribute("class", `minbar ${this.position} dock-${this.side}`);
+		}
+		this.setPanelH(this.panelH);
+		this.applyTab();
+		this.publishHeight();
+	}
+	/**
+	* Publie la hauteur occupée par la barre (dock bas, visible, dépliée) en
+	* variable CSS `--nodefony-debugbar-height` sur `:root`. L'app hôte (Studio)
+	* la réserve en `padding-bottom` → le contenu n'est jamais masqué. `0px` si
+	* masquée / réduite (chip flottante) / dockée en haut.
+	*/
+	publishHeight() {
+		if (typeof document === "undefined") return;
+		const h = this.visible && !this.minimized && this.position === "bottom" && this.bar ? this.bar.offsetHeight : 0;
+		document.documentElement.style.setProperty("--nodefony-debugbar-height", `${h}px`);
+	}
+	registerHandle() {
+		globalThis[GLOBAL_KEY] = {
+			isVisible: () => this.visible,
+			setVisible: (v) => this.setVisible(v),
+			toggle: () => this.setVisible(!this.visible),
+			minimize: () => this.setMinimized(true),
+			restore: () => this.setMinimized(false)
+		};
+	}
+	unregisterHandle() {
+		try {
+			delete globalThis[GLOBAL_KEY];
+		} catch {}
+	}
+	buildDom() {
+		const host = document.createElement("div");
+		host.id = HOST_ID;
+		host.setAttribute("role", "complementary");
+		host.setAttribute("aria-label", "Barre de débogage Nodefony");
+		const shadow = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = STYLES;
+		const bar = document.createElement("div");
+		bar.className = `bar ${this.position}${this.startOpen ? " open" : ""}`;
+		bar.innerHTML = this.template();
+		const minbar = document.createElement("div");
+		minbar.className = `minbar ${this.position} dock-${this.side}`;
+		minbar.innerHTML = `<span class="dot" data-el="mdot"></span><span class="mlogo">⚡</span><span class="mrate" data-el="mrate">0/s</span><span class="mbadge" data-el="mEnv"></span>`;
+		shadow.append(style, bar, minbar);
+		document.body.appendChild(host);
+		this.host = host;
+		this.bar = bar;
+		this.el.minbar = minbar;
+		if (typeof ResizeObserver !== "undefined") {
+			this.ro = new ResizeObserver(() => this.publishHeight());
+			this.ro.observe(bar);
+		}
+		shadow.querySelectorAll("[data-el]").forEach((node) => {
+			const key = node.getAttribute("data-el");
+			if (key) this.el[key] = node;
+		});
+		const strip = bar.querySelector(".strip");
+		this.wireBtn("btnToggle", () => this.setOpen(!bar.classList.contains("open")));
+		const onGoto = (ev) => {
+			const id = (ev.target?.closest?.(".goto"))?.getAttribute("data-goto");
+			if (!id) return;
+			this.setOpen(true);
+			this.setTab(id);
+		};
+		strip.addEventListener("click", onGoto);
+		this.disposers.push(() => strip.removeEventListener("click", onGoto));
+		this.wireBtn("btnMin", () => this.setMinimized(true));
+		this.wireBtn("btnSide", () => this.toggleSide());
+		this.wireBtn("btnLive", () => this.setLive(!this.live));
+		this.updateLiveBtn();
+		const tabsBar = bar.querySelector(".tabs");
+		if (tabsBar) {
+			const onTab = (ev) => {
+				const id = (ev.target?.closest?.(".tab"))?.getAttribute("data-tab");
+				if (id) this.setTab(id);
+			};
+			tabsBar.addEventListener("click", onTab);
+			this.disposers.push(() => tabsBar.removeEventListener("click", onTab));
+		}
+		const resize = this.el.resize;
+		if (resize) {
+			const onDown = (e) => this.startResize(e);
+			resize.addEventListener("pointerdown", onDown);
+			this.disposers.push(() => resize.removeEventListener("pointerdown", onDown));
+		}
+		const counts = bar.querySelector(".counts");
+		if (counts) {
+			const onSev = (ev) => {
+				const sev = (ev.target?.closest?.(".sevf"))?.getAttribute("data-sev");
+				if (sev !== "all" && sev !== "err" && sev !== "warn") return;
+				this.feedSev = this.feedSev === sev ? "all" : sev;
+				counts.querySelectorAll(".sevf").forEach((n) => n.classList.toggle("on", n.getAttribute("data-sev") === this.feedSev && this.feedSev !== "all"));
+				this.feedDirty = true;
+				this.render();
+			};
+			counts.addEventListener("click", onSev);
+			this.disposers.push(() => counts.removeEventListener("click", onSev));
+		}
+		const search = this.el.logSearch;
+		if (search) {
+			const onSearch = () => {
+				this.feedQuery = search.value.trim().toLowerCase();
+				this.feedDirty = true;
+				this.render();
+			};
+			search.addEventListener("input", onSearch);
+			this.disposers.push(() => search.removeEventListener("input", onSearch));
+		}
+		this.wireBtn("btnPause", () => {
+			this.feedPaused = !this.feedPaused;
+			const b = this.el.btnPause;
+			if (b) {
+				b.setAttribute("aria-pressed", this.feedPaused ? "true" : "false");
+				b.classList.toggle("on", this.feedPaused);
+				b.textContent = this.feedPaused ? "▶" : "⏸";
+				const tip = this.feedPaused ? "Reprendre l'affichage — la liste se recompose avec ce qui est arrivé pendant la pause" : "Suspendre l'affichage — les entrées continuent d'arriver et se rattrapent à la reprise";
+				b.setAttribute("data-tip", tip);
+			}
+			if (!this.feedPaused) {
+				this.feedDirty = true;
+				this.render();
+			}
+		});
+		this.wireBtn("btnCopy", () => {
+			const node = this.el.feed;
+			const text = node ? node.textContent ?? "" : "";
+			navigator.clipboard?.writeText(text).then(() => this.flashBtn("btnCopy", "✓"), () => this.flashBtn("btnCopy", "✗"));
+		});
+		this.wireBtn("btnClearFeed", () => {
+			const node = this.el.feed;
+			if (node) node.innerHTML = `<div class="empty">liste vidée — les nouvelles entrées s'afficheront ici.</div>`;
+			this.feedLen = this.model.view.feed.length;
+		});
+		const feed = this.el.feed;
+		if (feed) {
+			const onFeed = (ev) => {
+				const row = ev.target?.closest?.(".log");
+				if (!row) return;
+				if (row.nextElementSibling?.classList.contains("logdetail")) {
+					row.nextElementSibling?.remove();
+					row.setAttribute("aria-expanded", "false");
+					return;
+				}
+				const uid = Number(row.getAttribute("data-uid"));
+				const entry = this.model.view.feed.find((l) => l.uid === uid);
+				if (!entry) return;
+				feed.querySelectorAll(".logdetail").forEach((n) => n.remove());
+				feed.querySelectorAll(".log[aria-expanded='true']").forEach((n) => n.setAttribute("aria-expanded", "false"));
+				row.insertAdjacentHTML("afterend", this.feedDetail(entry));
+				row.setAttribute("aria-expanded", "true");
+			};
+			const onFeedKey = (ev) => {
+				const k = ev.key;
+				if (k !== "Enter" && k !== " ") return;
+				const row = ev.target?.closest?.(".log");
+				if (!row) return;
+				ev.preventDefault();
+				row.click();
+			};
+			feed.addEventListener("click", onFeed);
+			feed.addEventListener("keydown", onFeedKey);
+			this.disposers.push(() => {
+				feed.removeEventListener("click", onFeed);
+				feed.removeEventListener("keydown", onFeedKey);
+			});
+		}
+		this.wireBtn("btnPurge", () => {
+			lsPurge();
+			this.flashBtn("btnPurge", "état effacé ✓");
+		});
+		const onMin = () => this.setMinimized(false);
+		minbar.addEventListener("click", onMin);
+		this.disposers.push(() => minbar.removeEventListener("click", onMin));
+		let resizePending = false;
+		const onWinResize = () => {
+			if (resizePending) return;
+			resizePending = true;
+			requestAnimationFrame(() => {
+				resizePending = false;
+				this.setPanelH(this.panelH);
+			});
+		};
+		window.addEventListener("resize", onWinResize);
+		this.disposers.push(() => window.removeEventListener("resize", onWinResize));
+	}
+	startResize(ev) {
+		ev.preventDefault();
+		const startY = ev.clientY;
+		const startH = this.panelH;
+		const onMove = (e) => {
+			const delta = this.position === "bottom" ? startY - e.clientY : e.clientY - startY;
+			this.setPanelH(startH + delta);
+		};
+		const onUp = () => {
+			document.removeEventListener("pointermove", onMove);
+			document.removeEventListener("pointerup", onUp);
+			lsSet(LS.h, String(this.panelH));
+		};
+		document.addEventListener("pointermove", onMove);
+		document.addEventListener("pointerup", onUp);
+	}
+	/**
+	* Retour visuel bref sur un bouton d'action.
+	*
+	* Une copie réussie ne change rien à l'écran : sans ce clin d'œil, on ne sait
+	* pas si le clic a porté, et on reclique.
+	*/
+	flashBtn(key, glyph) {
+		const b = this.el[key];
+		if (!b) return;
+		const before = b.textContent ?? "";
+		b.textContent = glyph;
+		const t = setTimeout(() => {
+			b.textContent = before;
+		}, 900);
+		this.disposers.push(() => clearTimeout(t));
+	}
+	wireBtn(key, handler) {
+		const node = this.el[key];
+		if (!node) return;
+		node.addEventListener("click", handler);
+		this.disposers.push(() => node.removeEventListener("click", handler));
+	}
+	template() {
+		return `
+      <div class="strip">
+        <span class="dot" data-el="dot" data-tip="État de la connexion temps réel"></span>
+        <span class="brand" data-tip="Barre de débogage Nodefony — visible en développement uniquement"><span class="logo">◆</span><span class="name">nodefony</span></span>
+        <span class="env-badge" data-el="envBadge" data-tip="Environnement dans lequel tourne l'application">env</span>
+        <span class="branch" data-el="branch" data-tip="Branche git de la copie de travail"><span class="git">⎇</span><span data-el="branchName">—</span></span>
+        <span class="rt-pill" data-el="rtPill" data-tip="Transport temps réel et état de la socket"><span class="bolt">⚡</span> realtime</span>
+        ${this.miniMetric("rt", "rt", "rtMini", "0/s", "realtime", "Messages temps réel reçus par seconde — cliquer pour ouvrir l'onglet Realtime")}
+        ${this.miniMetric("cpu", "cpu", "cpuMini", "0%", "perf", "Charge processeur du serveur — cliquer pour ouvrir l'onglet Perf")}
+        ${this.miniMetric("mem", "mem", "memMini", "0%", "perf", "Mémoire utilisée par le serveur — cliquer pour ouvrir l'onglet Perf")}
+        <span class="spacer"></span>
+        ${this.networkEnabled ? `<button type="button" class="chip goto" data-goto="network" data-tip="Requêtes réseau observées — cliquer pour ouvrir l'onglet Network"><span class="k">net</span><span class="blue" data-el="netChip">0</span></button>` : ""}
+        <button type="button" class="chip goto" data-goto="logs" data-tip="Entrées de journal reçues — cliquer pour ouvrir l'onglet Logs"><span class="k">logs</span><span data-el="logs">0</span></button>
+        <button type="button" class="chip goto" data-goto="logs" data-tip="Erreurs et alertes — cliquer pour ouvrir l'onglet Logs"><span class="k">err</span><span class="crit" data-el="err">0</span></button>
+        <button type="button" class="ctrl live" data-el="btnLive" aria-pressed="false" data-tip="Recevoir les mesures et les journaux en direct. Coupé par défaut : le flux maintient des compteurs côté serveur.">flux OFF</button>
+        <button type="button" class="ctrl" data-el="btnSide" aria-label="Changer la barre de côté" data-tip="Changer la barre de côté">⇄</button>
+        <button type="button" class="ctrl" data-el="btnMin" aria-label="Réduire la barre en pastille" data-tip="Réduire en pastille">—</button>
+        <button type="button" class="toggle" data-el="btnToggle" aria-expanded="${this.startOpen}" aria-controls="nf-db-panel" aria-label="${this.startOpen ? "Replier" : "Déplier"} le panneau" data-tip="${this.startOpen ? "Replier" : "Déplier"} le panneau">▴</button>
+      </div>
+      <div class="panelwrap" id="nf-db-panel">
+        <div class="resize" data-el="resize" title="Redimensionner"></div>
+        <div class="tabs">
+          <button class="tab" data-tab="realtime">Realtime</button>
+          ${this.networkEnabled ? `<button class="tab" data-tab="network">Network <span class="tcount" data-el="netTab">0</span></button>` : ""}
+          <button class="tab" data-tab="perf">Perf</button>
+          <button class="tab" data-tab="logs">Logs <span class="tcount" data-el="logsTab">0</span></button>
+          <button class="tab" data-tab="runtime">Runtime</button>
+        </div>
+        <div class="panes" data-el="panes">
+          ${this.realtimePane()}
+          ${this.networkEnabled ? this.networkPane() : ""}
+          ${this.perfPane()}
+          ${this.logsPane()}
+          ${this.runtimePane()}
+        </div>
+      </div>`;
+	}
+	realtimePane() {
+		return `<div class="pane" data-pane="realtime"><div class="cards">
+      <div class="card hero">
+        <h4><span class="blue">⚡</span> Realtime</h4>
+        <div class="big"><span data-el="rtBig">0</span><small>msg/s</small></div>
+        <svg viewBox="0 0 ${CHART_W} 38" preserveAspectRatio="none">
+          <polygon class="area rt" data-el="rtArea" points=""/>
+          <polyline class="spark rt" data-el="rtLine" points=""/>
+        </svg>
+        ${this.kv("transport", "rtTransport")}
+        ${this.kv("protocole", "rtProto")}
+        ${this.kv("état", "rtState")}
+        ${this.kv("frames reçues", "rtFrames")}
+        ${this.kv("pic", "rtPeak")}
+        <div class="tag"><b>HTTP &amp; WebSocket, même contexte.</b> Push natif, <b>0 polling</b> — chaque chiffre arrive en temps réel par le Core isomorphe.</div>
+      </div>
+      ${this.frontendCard()}
+    </div></div>`;
+	}
+	networkPane() {
+		return `<div class="pane np" data-pane="network">
+      <div class="net-head">
+        <span class="chip"><span class="k">total</span><span data-el="netTotal">0</span></span>
+        <span class="chip"><span class="k">err</span><span class="crit" data-el="netErr">0</span></span>
+        <span class="chip"><span class="k">pending</span><span class="muted" data-el="netPend">0</span></span>
+        <span class="net-clear" data-el="netClear" title="vider la liste">vider</span>
+      </div>
+      <div class="net-list" data-el="netList"><div class="empty">en attente d'appels AJAX (fetch / XHR)…</div></div>
+      <div class="net-detail" data-el="netDetail"><div class="empty">clique un appel → profil serveur (waterfall des phases, route, user).</div></div>
+    </div>`;
+	}
+	perfPane() {
+		return `<div class="pane" data-pane="perf"><div class="cards">
+      <div class="card">
+        <h4>Performance</h4>
+        ${this.chart("CPU", "cpuVal", "cpuPeak", "cpuLine", "cpuArea")}
+        ${this.chart("Heap", "heapVal", "heapPeak", "heapLine", "heapArea")}
+        ${this.chart("Event loop", "loopVal", "loopPeak", "loopLine", "loopArea")}
+      </div>
+    </div></div>`;
+	}
+	/**
+	* L'onglet Logs — une petite console de lecture, pas une liste qui défile.
+	*
+	* Ce qu'elle porte, et pourquoi : un FILTRE par sévérité et une RECHERCHE
+	* (sans quoi on lit le bruit au lieu de son incident) ; une PAUSE (sans quoi
+	* la ligne qu'on essaie de lire s'en va) ; une COPIE (une trace se colle dans
+	* un ticket) ; et le DÉTAIL d'une entrée, où vit le `requestId` — le champ qui
+	* relie ce journal à sa requête, et que la barre recevait sans jamais le
+	* montrer.
+	*/
+	logsPane() {
+		return `<div class="pane" data-pane="logs">
+      <div class="counts">
+        <button type="button" class="chip sevf" data-sev="all" data-tip="Tout afficher"><span class="k">total</span><span data-el="cTotal">0</span></button>
+        <button type="button" class="chip sevf" data-sev="err" data-tip="N'afficher que les erreurs (sévérité 0 à 3)"><span class="k">err</span><span class="crit" data-el="cErr">0</span></button>
+        <button type="button" class="chip sevf" data-sev="warn" data-tip="N'afficher que les alertes (sévérité 4)"><span class="k">warn</span><span class="warn" data-el="cWarn">0</span></button>
+        <span class="chip" data-tip="Entrées écartées par le serveur faute de place dans le tampon — le flux était plus rapide que l'envoi"><span class="k">dropped</span><span class="muted" data-el="cDrop">0</span></span>
+        <span class="spacer"></span>
+        <input class="search" data-el="logSearch" type="search" placeholder="rechercher…"
+               aria-label="Filtrer les journaux sur leur texte, leur module ou leur requête" />
+        <button type="button" class="toolbtn" data-el="btnPause" aria-pressed="false" data-tip="Suspendre l'affichage — les entrées continuent d'arriver et se rattrapent à la reprise">⏸</button>
+        <button type="button" class="toolbtn" data-el="btnCopy" data-tip="Copier les entrées affichées dans le presse-papiers">⧉</button>
+        <button type="button" class="toolbtn" data-el="btnClearFeed" data-tip="Vider la liste affichée (n'efface rien côté serveur)">⌫</button>
+      </div>
+      <div class="feed" data-el="feed" role="log" aria-label="Journaux du serveur"><div class="empty">en attente de logs…</div></div>
+    </div>`;
+	}
+	/**
+	* Ce que la barre garde sur CE navigateur — écrit noir sur blanc.
+	*
+	* Une console de développement qui écrit dans le stockage local sans le dire
+	* est exactement ce qu'on reproche aux autres. La liste est dérivée des clés
+	* réelles, donc elle ne peut pas mentir par oubli, et le bouton efface
+	* précisément celles-là — jamais le stockage de l'application hôte.
+	*/
+	storageCard() {
+		return `<div class="card">
+      <h4>Stockage local</h4>
+      <div class="tag">Ces valeurs vivent dans ce navigateur, sur cet appareil. Elles ne quittent jamais la page et ne concernent que l'apparence de la barre.</div>
+      ${lsKeys().map((k) => `<div class="drow"><span class="dk">${escapeHtml(k.replace("nf.debugbar.", ""))}</span><span class="dv">${escapeHtml(lsGet(k, "—"))}</span></div>`).join("")}
+      <div style="margin-top:8px"><button type="button" class="toolbtn" data-el="btnPurge" data-tip="Effacer les préférences de la barre sur ce navigateur — l'application n'est pas touchée">Purger l'état de la barre</button></div>
+    </div>`;
+	}
+	runtimePane() {
+		return `<div class="pane" data-pane="runtime"><div class="cards">
+      ${this.storageCard()}
+      <div class="card">
+        <h4>Runtime</h4>
+        ${this.kv("app", "appName")}
+        ${this.kv("version", "appVersion")}
+        ${this.kv("environnement", "envRow")}
+        ${this.kv("branche", "branchRow")}
+        ${this.kv("pid", "pid")}
+        ${this.kv("uptime", "uptime")}
+        ${this.kv("instance", "instance")}
+        ${this.kv("cpu cores", "cores")}
+        ${this.kv("loadavg", "load")}
+        ${this.kv("rss", "rss")}
+        ${this.kv("heap used", "heapUsed")}
+        ${this.kv("heap total", "heapTotal")}
+        ${this.kv("heap limit", "heapLimit")}
+        ${this.kv("external", "external")}
+      </div>
+    </div></div>`;
+	}
+	/**
+	* Un indicateur du bandeau — et un RACCOURCI vers l'onglet qui le détaille.
+	*
+	* C'est un `<button>` et non un `<span>` : le bandeau ne se replie plus au
+	* clic (c'était le défaut principal — lire une valeur refermait le panneau),
+	* donc chaque indicateur peut faire quelque chose d'utile de son propre clic.
+	* Mener à l'onglet qui explique le chiffre est ce que l'utilisateur attend,
+	* et un bouton l'annonce et s'atteint au clavier.
+	*/
+	miniMetric(label, valKey, sparkKey, init, goto, tip) {
+		return `<button type="button" class="metric goto" data-goto="${goto}" data-tip="${escapeHtml(tip)}">
+      <span class="k">${label}</span>
+      <span class="v" data-el="${valKey}">${init}</span>
+      <svg class="mini" viewBox="0 0 ${MINI_W} ${MINI_H}" preserveAspectRatio="none">
+        <polyline class="spark ok" data-el="${sparkKey}" points=""/>
+      </svg>
+    </button>`;
+	}
+	chart(label, valKey, peakKey, lineKey, areaKey) {
+		return `<div class="chart">
+      <div class="hd">
+        <span class="lbl">${label}</span>
+        <span><span class="val" data-el="${valKey}">—</span> <span class="peak" data-el="${peakKey}"></span></span>
+      </div>
+      <svg viewBox="0 0 ${CHART_W} ${CHART_H}" preserveAspectRatio="none">
+        <polygon class="area ok" data-el="${areaKey}" points=""/>
+        <polyline class="spark ok" data-el="${lineKey}" points=""/>
+      </svg>
+    </div>`;
+	}
+	kv(label, key) {
+		return `<div class="kv"><span class="k">${label}</span><span class="v" data-el="${key}">—</span></div>`;
+	}
+	/** Carte Frontend / HMR — affichée seulement si un contexte frontend est fourni. */
+	frontendCard() {
+		if (!this.frontend) return "";
+		const fw = FRAMEWORKS[this.frontend.framework ?? ""] ?? {
+			label: this.frontend.framework ?? "Frontend",
+			color: "#3aa0ff"
+		};
+		return `<div class="card fe">
+      <h4><span style="color:${fw.color}">●</span> Frontend</h4>
+      <div class="fw">
+        <span class="badge" style="background:${fw.color}">${escapeHtml(fw.label)}</span>
+        <span class="name">${escapeHtml(this.frontend.name ?? "")}</span>
+      </div>
+      <div class="hd"><span class="lbl">HMR hot updates</span><span class="hmr-big" data-el="hmrBig">0</span></div>
+      <svg viewBox="0 0 ${CHART_W} 34" preserveAspectRatio="none">
+        <polygon class="area fe" data-el="hmrArea" points=""/>
+        <polyline class="spark fe" data-el="hmrLine" points=""/>
+      </svg>
+      ${this.kv("bundler", "feVite")}
+      ${this.kv("dernier module", "hmrLast")}
+      <div class="tag"><b>Backend &amp; frontend, un seul process.</b> HMR Vite branché au runtime — sauvegarde un composant, la barre pulse.</div>
+    </div>`;
+	}
+	wireRealtime() {
+		const offState = this.client.onState((state) => {
+			this.model.setState(state);
+			this.scheduleRender();
+		});
+		const offTick = this.client.onStats(() => {
+			if (!this.live) return;
+			this.sampleThroughput();
+			this.scheduleRender();
+		});
+		const offStats = this.client.on(CHANNELS.stats, (...a) => {
+			const p = a[0];
+			if (p && typeof p === "object") this.model.ingestStats(p);
+			this.scheduleRender();
+		});
+		const offSyslog = this.client.on(CHANNELS.syslog, (...a) => {
+			const p = a[0];
+			if (p && typeof p === "object") this.model.ingestSyslog(p);
+			this.scheduleRender();
+		});
+		this.model.setState(this.client.state);
+		this.disposers.push(offState, offTick, offStats, offSyslog, () => {
+			this.stopLive();
+		});
+		if (this.live) this.startLive();
+	}
+	/**
+	* Démarre les abonnements realtime (tickers serveur stats+syslog). REF-COMPTÉ
+	* (UNE fois) sur le client PARTAGÉ : un canal reste actif tant qu'un
+	* consommateur le veut ; le client ré-abonne seul au reconnect. Idempotent.
+	*/
+	startLive() {
+		if (this.liveOff) return;
+		this.client.subscribe(CHANNELS.stats);
+		this.client.subscribe(CHANNELS.syslog);
+		this.liveOff = () => {
+			this.client.unsubscribe(CHANNELS.stats);
+			this.client.unsubscribe(CHANNELS.syslog);
+		};
+	}
+	/** Arrête les abonnements realtime (relâche la réf de la barre). Idempotent. */
+	stopLive() {
+		if (!this.liveOff) return;
+		this.liveOff();
+		this.liveOff = null;
+	}
+	/** Active/désactive le temps réel (bouton de la barre) + persiste la préférence. */
+	setLive(v) {
+		if (v === this.live && !!this.liveOff === v) return;
+		this.live = v;
+		lsSet(LS.live, v ? "1" : "0");
+		if (v) {
+			this.prevFrames = this.client.framesReceived;
+			this.startLive();
+		} else {
+			this.stopLive();
+			this.rtRate = 0;
+			pushCap(this.rtSeries, 0, RT_POINTS);
+		}
+		this.updateLiveBtn();
+		this.scheduleRender();
+	}
+	/** Met à jour l'aspect du bouton « Temps réel » selon l'état. */
+	updateLiveBtn() {
+		const btn = this.el["btnLive"];
+		if (!btn) return;
+		btn.textContent = this.live ? "flux ON" : "flux OFF";
+		btn.title = this.live ? "Flux push ACTIF (stats + logs) — clic pour couper. ≠ état de la connexion (pastille « realtime »)." : "Flux push coupé (perf) — clic pour activer (stats + logs). ≠ état de la connexion (pastille « realtime »).";
+		btn.setAttribute("aria-pressed", this.live ? "true" : "false");
+		btn.classList.toggle("on", this.live);
+	}
+	sampleThroughput() {
+		const total = this.client.framesReceived;
+		this.rtRate = Math.max(0, total - this.prevFrames);
+		this.prevFrames = total;
+		if (this.rtRate > this.rtPeak) this.rtPeak = this.rtRate;
+		pushCap(this.rtSeries, this.rtRate, RT_POINTS);
+		this.hmrRate = Math.max(0, this.hmrCount - this.hmrPrev);
+		this.hmrPrev = this.hmrCount;
+		pushCap(this.hmrSeries, this.hmrRate, RT_POINTS);
+	}
+	wireHmr() {
+		if (!this.frontend) return;
+		const dispose = observeViteHmr((e) => this.onHmr(e));
+		this.disposers.push(dispose);
+	}
+	onHmr(e) {
+		if (e.kind === "connected") this.viteConnected = true;
+		else if (e.kind === "update") {
+			this.hmrCount++;
+			this.hmrLast = e.path ?? "(module)";
+			this.flashHmr();
+		} else if (e.kind === "full-reload") {
+			this.hmrCount++;
+			this.hmrLast = e.path ?? "full reload";
+			this.flashHmr();
+		}
+		this.scheduleRender();
+	}
+	flashHmr() {
+		const node = this.el.hmrBig;
+		if (!node) return;
+		node.setAttribute("class", "hmr-big hmr-flash");
+		if (this.flashTimer) clearTimeout(this.flashTimer);
+		this.flashTimer = setTimeout(() => {
+			node.setAttribute("class", "hmr-big");
+		}, 600);
+	}
+	wireNetwork() {
+		if (!this.networkEnabled) return;
+		const viteOrigin = this.frontend?.viteOrigin ?? "";
+		const uninstall = installNetworkInterceptor({
+			onChange: (e) => this.onNetEntry(e),
+			ignore: (url) => url.includes(this.profilerBase) || url.includes("/@vite/") || url.includes("/@fs/") || url.includes("/node_modules/.vite/") || viteOrigin !== "" && url.includes(viteOrigin)
+		});
+		this.disposers.push(uninstall);
+		const list = this.el.netList;
+		if (list) {
+			const onClick = (ev) => {
+				const row = ev.target?.closest?.(".net-row");
+				if (!row) return;
+				const rid = row.dataset.rid;
+				this.selectRow(row, rid || null);
+			};
+			list.addEventListener("click", onClick);
+			this.disposers.push(() => list.removeEventListener("click", onClick));
+		}
+		const detail = this.el.netDetail;
+		if (detail) {
+			const onDetail = (ev) => {
+				if (ev.target?.closest?.("[data-act=\"close\"]")) this.deselect();
+			};
+			detail.addEventListener("click", onDetail);
+			this.disposers.push(() => detail.removeEventListener("click", onDetail));
+		}
+		const clear = this.el.netClear;
+		if (clear) {
+			const onClear = (e) => {
+				e.stopPropagation();
+				this.net.clear();
+				this.netRows.clear();
+				this.selectedRid = null;
+				this.selRowId = null;
+				const node = this.el.netList;
+				if (node) node.innerHTML = `<div class="empty">en attente d'appels AJAX (fetch / XHR)…</div>`;
+				this.detailVersion++;
+				this.scheduleRender();
+			};
+			clear.addEventListener("click", onClear);
+			this.disposers.push(() => clear.removeEventListener("click", onClear));
+		}
+	}
+	onNetEntry(e) {
+		this.net.ingest(e);
+		this.upsertNetRow(e);
+		if (e.requestId && e.requestId === this.selectedRid) this.detailVersion++;
+		this.scheduleRender();
+	}
+	/** Crée ou met à jour le nœud de ligne d'un appel (jamais d'innerHTML global). */
+	upsertNetRow(e) {
+		const list = this.el.netList;
+		if (!list) return;
+		let row = this.netRows.get(e.id);
+		if (!row) {
+			if (this.netRows.size === 0) list.textContent = "";
+			row = document.createElement("div");
+			row.className = "net-row";
+			row.innerHTML = "<span class=\"net-method\"></span><span class=\"net-path\"></span><span class=\"net-rid\"></span><span class=\"net-status\"></span><span class=\"net-dur\"></span>";
+			this.netRows.set(e.id, row);
+			list.insertBefore(row, list.firstChild);
+			while (this.netRows.size > 80 && list.lastElementChild) {
+				const last = list.lastElementChild;
+				for (const [id, n] of this.netRows) if (n === last) {
+					this.netRows.delete(id);
+					break;
+				}
+				last.remove();
+			}
+		}
+		this.fillNetRow(row, e);
+	}
+	/** Remplit/actualise les cellules d'une ligne (textContent → 0 échappement). */
+	fillNetRow(row, e) {
+		row.dataset.rid = e.requestId ?? "";
+		row.className = `net-row${e.requestId && e.requestId === this.selectedRid ? " sel" : ""}${isError(e) ? " err" : ""}`;
+		const [m, path, rid, status, dur] = row.children;
+		m.className = `net-method ${methodClass(e.method)}`;
+		m.textContent = e.method;
+		path.textContent = e.path;
+		path.title = e.url;
+		rid.textContent = e.requestId ? shortId(e.requestId) : "";
+		if (e.pending) {
+			status.className = "net-status sp";
+			status.textContent = "···";
+		} else if (e.error) {
+			status.className = "net-status s5";
+			status.textContent = "ERR";
+		} else {
+			status.className = `net-status s${statusFamily(e.status)}`;
+			status.textContent = e.status === null ? "—" : String(e.status);
+		}
+		dur.textContent = e.durationMs === null ? "" : `${e.durationMs}ms`;
+	}
+	/** Sélectionne une ligne (highlight) + déclenche le fetch du profil. */
+	selectRow(row, rid) {
+		if (this.selRowId !== null) this.netRows.get(this.selRowId)?.classList.remove("sel");
+		row.classList.add("sel");
+		const idEntry = [...this.netRows.entries()].find(([, n]) => n === row);
+		this.selRowId = idEntry ? idEntry[0] : null;
+		this.selectedRid = rid;
+		this.selNoRid = !rid;
+		this.detailVersion++;
+		const minDetail = detailPanelH();
+		if (rid && this.panelH < minDetail) this.setPanelH(minDetail);
+		if (rid && !this.net.profileState(rid)) this.fetchProfile(rid);
+		if (rid && typeof window !== "undefined") try {
+			window.dispatchEvent(new CustomEvent(PLATFORM_EVENTS.debugbarSelect, { detail: { requestId: rid } }));
+		} catch {}
+		this.scheduleRender();
+	}
+	/** Fetch `/{profilerBase}/{requestId}` (ignoré par l'intercepteur). */
+	fetchProfile(requestId) {
+		if (typeof fetch === "undefined") return;
+		this.net.setProfileState(requestId, { status: "loading" });
+		fetch(`${this.profilerBase}/${encodeURIComponent(requestId)}`, { headers: { accept: "application/json" } }).then(async (res) => {
+			if (res.status === 404) {
+				this.net.setProfileState(requestId, { status: "missing" });
+				return;
+			}
+			const ct = res.headers.get("content-type") ?? "";
+			if (!res.ok || !ct.includes("application/json")) {
+				this.net.setProfileState(requestId, {
+					status: "error",
+					message: res.ok ? "réponse non-JSON (path profiler non proxifié par Vite ?)" : `HTTP ${res.status}`
+				});
+				return;
+			}
+			const profile = await res.json();
+			this.net.setProfileState(requestId, {
+				status: "ready",
+				profile
+			});
+		}).catch((err) => {
+			this.net.setProfileState(requestId, {
+				status: "error",
+				message: err instanceof Error ? err.message : "fetch failed"
+			});
+		}).finally(() => {
+			if (requestId === this.selectedRid) this.detailVersion++;
+			this.scheduleRender();
+		});
+	}
+	scheduleRender() {
+		if (typeof requestAnimationFrame === "undefined") {
+			this.render();
+			return;
+		}
+		if (this.rafPending) return;
+		this.rafPending = true;
+		requestAnimationFrame(() => {
+			this.rafPending = false;
+			this.render();
+		});
+	}
+	text(key, value) {
+		const node = this.el[key];
+		if (node) node.textContent = value;
+	}
+	/** className safe pour HTML *et* SVG (SVGElement.className n'est pas une string). */
+	cls(key, value) {
+		this.el[key]?.setAttribute("class", value);
+	}
+	setPoints(lineKey, areaKey, series, tier, height, max) {
+		const pts = sparklinePoints(series, CHART_W, height, max);
+		this.el[lineKey]?.setAttribute("points", pts);
+		this.el[lineKey]?.setAttribute("class", `spark ${tier}`);
+		if (areaKey) {
+			const area = this.el[areaKey];
+			if (area) {
+				area.setAttribute("points", pts ? `${pts} ${CHART_W},${height} 0,${height}` : "");
+				area.setAttribute("class", `area ${tier}`);
+			}
+		}
+	}
+	render() {
+		if (!this.bar) return;
+		const v = this.model.view;
+		this.renderStrip(v);
+		if (!this.bar.classList.contains("open")) return;
+		switch (this.activeTab) {
+			case "realtime":
+				this.renderRealtimePane(v);
+				break;
+			case "network":
+				this.renderNetwork();
+				break;
+			case "perf":
+				this.renderPerf(v);
+				break;
+			case "logs":
+				this.renderLogsPane(v);
+				break;
+			case "runtime": this.renderRuntime(v);
+		}
+	}
+	/** Bandeau toujours visible (chips + pouls) — léger. */
+	renderStrip(v) {
+		const connected = v.state === "connected";
+		const cpuT = gauge(v.cpuPercent);
+		const memT = gauge(v.heapPercent);
+		this.text("envBadge", v.env || "env");
+		this.cls("envBadge", `env-badge ${envClass(v.env)}`);
+		this.text("branchName", v.branch || "—");
+		this.el.branch?.setAttribute("title", v.branch ? `branche git : ${v.branch}` : "branche git");
+		this.text("mEnv", v.env);
+		this.cls("dot", `dot ${v.state}`);
+		this.cls("mdot", `dot ${v.state}`);
+		this.text("mrate", `${this.rtRate}/s`);
+		this.cls("rtPill", connected ? "rt-pill connected" : "rt-pill");
+		const connTitle = `Connexion temps réel : ${v.state}`;
+		this.el.rtPill?.setAttribute("title", connTitle);
+		this.el.dot?.setAttribute("title", connTitle);
+		this.text("rt", `${this.rtRate}/s`);
+		this.cls("rt", "v blue");
+		this.el.rtMini?.setAttribute("points", sparklinePoints(this.rtSeries, MINI_W, MINI_H));
+		this.el.rtMini?.setAttribute("class", "spark rt");
+		this.text("cpu", `${v.cpuPercent}%`);
+		this.cls("cpu", `v ${cpuT}`);
+		this.text("mem", `${v.heapPercent}%`);
+		this.cls("mem", `v ${memT}`);
+		this.el.cpuMini?.setAttribute("points", sparklinePoints(v.cpuSeries, MINI_W, MINI_H, 100));
+		this.el.cpuMini?.setAttribute("class", `spark ${cpuT}`);
+		this.el.memMini?.setAttribute("points", sparklinePoints(v.heapSeries, MINI_W, MINI_H, 100));
+		this.el.memMini?.setAttribute("class", `spark ${memT}`);
+		if (this.networkEnabled) {
+			this.text("netChip", String(this.net.total));
+			this.cls("netChip", this.net.errors > 0 ? "crit" : "blue");
+			this.text("netTab", String(this.net.total));
+			this.cls("netTab", this.net.errors > 0 ? "tcount crit" : "tcount");
+		}
+		this.text("logs", String(v.logTotal));
+		this.text("err", String(v.errorCount));
+		this.text("logsTab", String(v.logTotal));
+		this.cls("logsTab", v.errorCount > 0 ? "tcount crit" : "tcount");
+	}
+	renderRealtimePane(v) {
+		const live = v.state === "connected";
+		this.text("rtBig", String(this.rtRate));
+		this.setPoints("rtLine", "rtArea", this.rtSeries, "rt", 38);
+		this.text("rtTransport", "WebSocket");
+		this.text("rtProto", "JSON-RPC 2.0");
+		this.text("rtState", v.state);
+		this.cls("rtState", `v ${live ? "ok" : "warn"}`);
+		this.text("rtFrames", String(this.client.framesReceived));
+		this.text("rtPeak", `${this.rtPeak}/s`);
+		if (this.frontend) {
+			this.text("hmrBig", String(this.hmrCount));
+			this.setPoints("hmrLine", "hmrArea", this.hmrSeries, "fe", 34);
+			this.text("feVite", this.viteConnected ? "Vite · connecté" : "Vite · …");
+			this.cls("feVite", `v ${this.viteConnected ? "ok" : "warn"}`);
+			this.text("hmrLast", this.hmrLast);
+		}
+	}
+	renderPerf(v) {
+		const cpuT = gauge(v.cpuPercent);
+		const memT = gauge(v.heapPercent);
+		const loopT = gauge(v.eventLoopMs, 50, 200);
+		this.text("cpuVal", `${v.cpuPercent}%`);
+		this.text("cpuPeak", v.cpuPeak ? `peak ${v.cpuPeak}%` : "");
+		this.cls("cpuVal", `val ${cpuT}`);
+		this.setPoints("cpuLine", "cpuArea", v.cpuSeries, cpuT, CHART_H, 100);
+		this.text("heapVal", `${v.heapPercent}%`);
+		this.text("heapPeak", v.heapPeak ? `peak ${v.heapPeak}%` : "");
+		this.cls("heapVal", `val ${memT}`);
+		this.setPoints("heapLine", "heapArea", v.heapSeries, memT, CHART_H, 100);
+		this.text("loopVal", `${v.eventLoopMs}ms`);
+		this.text("loopPeak", v.eventLoopPeak ? `peak ${v.eventLoopPeak}ms` : "");
+		this.cls("loopVal", `val ${loopT}`);
+		this.setPoints("loopLine", "loopArea", v.loopSeries, loopT, CHART_H);
+	}
+	renderRuntime(v) {
+		this.text("appName", v.appName || "—");
+		this.text("appVersion", v.appVersion || "—");
+		this.text("envRow", v.debug ? `${v.env} · debug` : v.env || "—");
+		this.text("branchRow", v.branch || "—");
+		this.text("pid", String(v.pid));
+		this.text("uptime", formatUptime(v.uptime));
+		this.text("instance", v.instanceId);
+		this.text("cores", String(v.cpuCount));
+		this.text("load", v.loadavg.map((n) => n.toFixed(2)).join(" ") || "—");
+		this.text("rss", formatBytes(v.rss));
+		this.text("heapUsed", formatBytes(v.heapUsed));
+		this.text("heapTotal", formatBytes(v.heapTotal));
+		this.text("heapLimit", formatBytes(v.heapLimit));
+		this.text("external", formatBytes(v.external));
+	}
+	renderLogsPane(v) {
+		this.text("cTotal", String(v.logTotal));
+		this.text("cErr", String(v.errorCount));
+		this.text("cWarn", String(v.warnCount));
+		this.text("cDrop", String(v.dropped));
+		this.renderFeed(v.feed);
+	}
+	/** Classe de couleur d'une entrée, dérivée de sa sévérité RFC 5424. */
+	static tierOf(severity) {
+		if (severity <= 3) return "crit";
+		if (severity === 4) return "warn";
+		if (severity === 7) return "muted";
+		return "info";
+	}
+	/** L'entrée passe-t-elle le filtre de sévérité et la recherche en cours ? */
+	feedMatch(l) {
+		if (this.feedSev === "err" && l.severity > 3) return false;
+		if (this.feedSev === "warn" && l.severity !== 4) return false;
+		const q = this.feedQuery;
+		if (q === "") return true;
+		return l.text.toLowerCase().includes(q) || l.module.toLowerCase().includes(q) || l.msgid.toLowerCase().includes(q) || (l.requestId ?? "").toLowerCase().includes(q);
+	}
+	/** Une ligne de journal — horodatage, sévérité, module, texte, requête. */
+	feedRow(l) {
+		const tier = DebugBar.tierOf(l.severity);
+		const rid = l.requestId ? `<span class="rid" data-tip="requête ${escapeHtml(l.requestId)} — la même valeur relie ce journal à sa route, à ses requêtes de base et à sa réponse">${escapeHtml(l.requestId.slice(0, 8))}</span>` : "";
+		return `<div class="log" data-uid="${l.uid}" tabindex="0" role="button" aria-expanded="false" aria-label="Entrée ${escapeHtml(l.name)} de ${escapeHtml(l.module)} — ouvrir le détail"><span class="ts">${fmtClock(l.ts)}</span><span class="sev ${tier}">${escapeHtml(l.name)}</span><span class="mod">${escapeHtml(l.module)}</span><span class="txt">${escapeHtml(l.text)}</span>${rid}</div>`;
+	}
+	/** Le détail d'une entrée — ce qu'on colle dans un ticket. */
+	feedDetail(l) {
+		const row = (k, v) => `<div class="drow"><span class="dk">${k}</span><span class="dv">${escapeHtml(v)}</span></div>`;
+		return `<div class="logdetail">
+      ${row("horodatage", new Date(l.ts).toISOString())}
+      ${row("sévérité", `${l.name} (${l.severity})`)}
+      ${row("module", l.module)}
+      ${l.msgid ? row("catégorie", l.msgid) : ""}
+      ${l.pid ? row("worker (pid)", String(l.pid)) : ""}
+      ${row("séquence", String(l.uid))}
+      ${l.requestId ? row("requête", l.requestId) : ""}
+      ${row("message", l.text)}
+    </div>`;
+	}
+	/**
+	* Rendu du journal — **incrémental**, et c'est le point.
+	*
+	* L'ancienne version réassignait `innerHTML` en entier à chaque arrivée. Deux
+	* conséquences qu'on ne voit pas dans le code et qu'on subit à l'écran : la
+	* SÉLECTION de texte s'efface — impossible de copier une ligne pendant que le
+	* flux tourne — et la position de DÉFILEMENT saute. Ici, seules les entrées
+	* nouvelles sont insérées en tête ; ce qui est affiché n'est jamais reconstruit.
+	*
+	* Un changement de filtre ou de recherche, lui, refait bien la liste : le jeu
+	* affiché change entièrement, il n'y a rien à préserver.
+	*/
+	renderFeed(feed) {
+		const node = this.el.feed;
+		if (!node) return;
+		if (this.feedPaused) return;
+		const refilter = this.feedDirty;
+		if (!refilter && feed.length === this.feedLen) return;
+		const previous = this.feedLen;
+		this.feedLen = feed.length;
+		this.feedDirty = false;
+		if (refilter) {
+			const rows = [];
+			for (let i = feed.length - 1; i >= 0; i--) {
+				const l = feed[i];
+				if (this.feedMatch(l)) rows.push(this.feedRow(l));
+			}
+			node.innerHTML = rows.length === 0 ? `<div class="empty">${feed.length === 0 ? "en attente de logs…" : "aucune entrée ne correspond au filtre."}</div>` : rows.join("");
+			return;
+		}
+		const added = feed.length - previous;
+		if (previous < 0 || added < 0 || added > feed.length) {
+			this.feedDirty = true;
+			this.renderFeed(feed);
+			return;
+		}
+		if (added === 0) return;
+		let html = "";
+		for (let i = feed.length - 1; i >= feed.length - added; i--) {
+			const l = feed[i];
+			if (this.feedMatch(l)) html += this.feedRow(l);
+		}
+		if (html === "") return;
+		if (node.querySelector(".empty")) node.innerHTML = "";
+		node.insertAdjacentHTML("afterbegin", html);
+		while (node.childElementCount > 40) node.lastElementChild?.remove();
+	}
+	renderNetwork() {
+		this.text("netTotal", String(this.net.total));
+		this.text("netErr", String(this.net.errors));
+		this.text("netPend", String(this.net.pending));
+		if (this.detailVersion !== this.detailRendered) {
+			this.detailRendered = this.detailVersion;
+			this.renderDetail();
+		}
+	}
+	renderDetail() {
+		const node = this.el.netDetail;
+		if (!node) return;
+		const rid = this.selectedRid;
+		const hasSel = !!rid || this.selNoRid;
+		node.parentElement?.classList.toggle("sel", hasSel);
+		if (!hasSel) {
+			node.innerHTML = `<div class="empty">clique un appel → profil serveur (waterfall des phases, route, user).</div>`;
+			return;
+		}
+		const closeBar = `<div class="det-bar"><span class="det-close" data-act="close" title="Fermer le détail">✕</span></div>`;
+		let body;
+		if (!rid) body = `<div class="det-err">cet appel n'a pas de requestId lisible — réponse sans header <b>X-Request-Id</b> (cross-origin sans Access-Control-Expose-Headers, ou appel hors Nodefony).</div>`;
+		else {
+			const st = this.net.profileState(rid);
+			if (!st || st.status === "loading") body = `<div class="det-loading">profil <b>${escapeHtml(shortId(rid))}</b> — chargement…</div>`;
+			else if (st.status === "missing") body = `<div class="det-err">profil introuvable (évincé du ring buffer, ou requête sans timing).</div>`;
+			else if (st.status === "error") body = `<div class="det-err">erreur profiler : ${escapeHtml(st.message)}</div>`;
+			else body = this.profileHtml(st.profile);
+		}
+		node.innerHTML = closeBar + body;
+	}
+	/** Désélectionne la requête → referme le détail (placeholder). */
+	deselect() {
+		if (this.selRowId !== null) this.netRows.get(this.selRowId)?.classList.remove("sel");
+		this.selRowId = null;
+		this.selectedRid = null;
+		this.selNoRid = false;
+		this.detailVersion++;
+		this.scheduleRender();
+	}
+	/** Rend le détail d'un profil serveur (méta + waterfall des phases). */
+	profileHtml(p) {
+		const bars = computeWaterfall(p.phases);
+		const total = p.durationMs === null ? "—" : `${p.durationMs}ms`;
+		const kv = (k, val) => `<div class="kv"><span class="k">${k}</span><span class="v">${val}</span></div>`;
+		const meta = `<div class="det-grid">` + kv("route", escapeHtml(p.route ?? "—")) + kv("controller", escapeHtml(p.controller ? `${p.controller}.${p.action ?? "?"}` : "—")) + kv("status", `${p.status ?? "—"}`) + kv("total serveur", total) + kv("user", escapeHtml(p.user ?? "anonyme")) + kv("kind", p.kind) + kv("requestId", escapeHtml(shortId(p.requestId))) + kv("traceparent", escapeHtml(traceId(p))) + (p.error ? kv("erreur", `<span class="crit">${escapeHtml(p.error)}</span>`) : "") + `</div>`;
+		let wf = "";
+		if (bars.length === 0) wf = `<div class="empty">aucune phase mesurée (timing désactivé ?).</div>`;
+		else {
+			wf = `<div class="wf-title">timeline des phases (serveur)</div><div class="wf">`;
+			for (const b of bars) wf += `<div class="wf-row"><span class="wf-name">${escapeHtml(b.name)}</span><div class="wf-track"><div class="wf-bar ${b.tier}" style="left:${b.leftPct}%;width:${b.widthPct}%"></div></div><span class="wf-ms">${b.durationMs}ms</span></div>`;
+			wf += `</div>`;
+		}
+		return meta + wf + this.queriesHtml(p.queries);
+	}
+	/** Rend les requêtes ORM (SEAM futur) — vide tant qu'aucun adapter ne pushe. */
+	queriesHtml(queries) {
+		if (!queries || queries.length === 0) return "";
+		let out = `<div class="wf-title" style="margin-top:10px">requêtes ORM (${queries.length})</div><div class="net-list" style="border:0">`;
+		for (const q of queries) out += `<div class="net-row" style="cursor:default"><span class="net-path" title="${escapeHtml(q.sql)}">${escapeHtml(q.sql)}</span>` + (q.connector ? `<span class="net-rid">${escapeHtml(q.connector)}</span>` : "") + (typeof q.rows === "number" ? `<span class="net-dur">${q.rows} rows</span>` : "") + `<span class="net-dur">${q.durationMs}ms</span></div>`;
+		out += `</div>`;
+		return out;
+	}
+};
+/** Famille de status (2/3/4/5) → classe de couleur. `null` → 5 (inconnu). */
+function statusFamily(status) {
+	if (status === null) return 5;
+	return Math.floor(status / 100);
+}
+/** Méthode HTTP → classe de couleur du chip. */
+function methodClass(method) {
+	const m = method.toLowerCase();
+	if (m === "get" || m === "post" || m === "put" || m === "patch" || m === "delete") return m;
+	return "ws";
+}
+/** Raccourci d'un id (1er bloc UUID, ou 8 chars). */
+function shortId(id) {
+	return id.length > 8 ? id.slice(0, 8) : id;
+}
+/** Extrait le trace-id (2ᵉ segment) d'un `traceparent` W3C, raccourci. */
+function traceId(p) {
+	if (!p.traceparent) return "—";
+	const seg = p.traceparent.split("-");
+	const tid = seg.length >= 2 ? seg[1] : p.traceparent;
+	return tid && tid.length > 12 ? tid.slice(0, 12) + "…" : tid ?? "—";
+}
+/** Mappe un nom d'environnement vers une classe de couleur du badge. */
+function envClass(env) {
+	const e = env.toLowerCase();
+	if (e.startsWith("prod")) return "prod";
+	if (e.startsWith("dev")) return "dev";
+	if (e.startsWith("test")) return "test";
+	if (e.startsWith("stag")) return "staging";
+	return "";
+}
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+//#endregion
+export { DebugBar, DebugBar as default };