nodefony 7.0.2 → 10.0.0-alpha.2

package/dist/client/types/src/client/debugbar/DebugBar.d.ts

@@ -0,0 +1,279 @@
+/**
+ * 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é.
+ */
+import { RealtimeClient } from "../realtime/RealtimeClient.js";
+/** Contexte frontend injecté par le builder Vite (@nodefony/frontend) en dev. */
+export interface DebugBarFrontend {
+    /** Type de preset : `react19` | `vue3` | `angular` | `vanilla`. */
+    framework?: string;
+    /** Nom logique de l'entrée frontend (bundle). */
+    name?: string;
+    /** Origine du serveur Vite (ex. `https://127.0.0.1:5173`). */
+    viteOrigin?: string;
+}
+export interface DebugBarOptions {
+    /** URL/chemin du WS realtime. Défaut : `/nodefony/studio/api/realtime`. */
+    url?: string;
+    /** Client realtime injectable (partage / tests). Sinon créé en interne. */
+    client?: RealtimeClient;
+    /** Position verticale du widget. Défaut `bottom`. */
+    position?: "bottom" | "top";
+    /** Ouvre le panneau au montage. Défaut `false`. */
+    open?: boolean;
+    /** Contexte frontend (active la carte Frontend + la sonde HMR Vite). */
+    frontend?: DebugBarFrontend;
+    /**
+     * Active le panneau Network (intercepte `fetch`/`XHR`). Défaut `true`.
+     * `false` → aucun monkey-patch des globals (opt-out total).
+     */
+    network?: boolean;
+    /** Base du data-plane profiler. Défaut `/nodefony/profiler/api`. */
+    profilerBase?: string;
+}
+/**
+ * Handle global exposé sur `window.__NODEFONY_DEBUGBAR__` — permet à une app
+ * (ex. Studio) de piloter la visibilité de la barre auto-injectée sans la
+ * remonter. Bridge entre le widget (Core) et un store applicatif.
+ */
+export interface DebugBarHandle {
+    isVisible(): boolean;
+    setVisible(v: boolean): void;
+    toggle(): void;
+    minimize(): void;
+    restore(): void;
+}
+/**
+ * Widget DOM. Lazy : ne construit le Shadow DOM qu'au `mount()`. Idempotent
+ * (un seul `#nodefony-debugbar` par page).
+ */
+export declare class DebugBar {
+    private readonly client;
+    private readonly model;
+    private readonly url;
+    private readonly position;
+    private readonly startOpen;
+    private readonly ownClient;
+    private readonly frontend;
+    private host;
+    private bar;
+    private visible;
+    private minimized;
+    private side;
+    private activeTab;
+    private panelH;
+    private live;
+    /** dispose des abonnements realtime (null quand OFF). */
+    private liveOff;
+    private rafPending;
+    private feedLen;
+    /** Filtre de sévérité de l'onglet Logs — `all` par défaut. */
+    private feedSev;
+    /** Recherche courante, déjà en minuscules (comparée telle quelle). */
+    private 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.
+     */
+    private feedPaused;
+    /** La liste affichée doit être refaite (changement de filtre ou de recherche). */
+    private feedDirty;
+    private prevFrames;
+    private rtRate;
+    private rtPeak;
+    private readonly rtSeries;
+    private viteConnected;
+    private hmrCount;
+    private hmrPrev;
+    private hmrRate;
+    private hmrLast;
+    private readonly hmrSeries;
+    private flashTimer;
+    private readonly disposers;
+    private readonly el;
+    private readonly networkEnabled;
+    private readonly profilerBase;
+    private readonly net;
+    /** Observe la barre → publie sa hauteur (var CSS) pour l'app hôte. */
+    private ro;
+    private readonly netRows;
+    private selectedRid;
+    private selRowId;
+    private selNoRid;
+    private detailVersion;
+    private detailRendered;
+    constructor(opts?: DebugBarOptions);
+    /** Construit le DOM, branche le realtime et ouvre la connexion. No-op si déjà monté. */
+    mount(): this;
+    /** Détache listeners, ferme la connexion (si propriétaire) et retire le DOM. */
+    unmount(): void;
+    /** Affiche/masque la barre (pilotable depuis une app via le handle global). */
+    setVisible(v: boolean): void;
+    private setMinimized;
+    private toggleSide;
+    /**
+     * 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.
+     */
+    private setOpen;
+    private setTab;
+    private setPanelH;
+    /** Reflète l'onglet actif sur les boutons + panes. */
+    private applyTab;
+    /** Applique l'état chrome au DOM (display + classes de dock + hauteur). */
+    private applyChrome;
+    /**
+     * 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.
+     */
+    private publishHeight;
+    private registerHandle;
+    private unregisterHandle;
+    private buildDom;
+    private startResize;
+    /**
+     * 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.
+     */
+    private flashBtn;
+    private wireBtn;
+    private template;
+    private realtimePane;
+    private networkPane;
+    private perfPane;
+    /**
+     * 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.
+     */
+    private logsPane;
+    /**
+     * 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.
+     */
+    private storageCard;
+    private runtimePane;
+    /**
+     * 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.
+     */
+    private miniMetric;
+    private chart;
+    private kv;
+    /** Carte Frontend / HMR — affichée seulement si un contexte frontend est fourni. */
+    private frontendCard;
+    private wireRealtime;
+    /**
+     * 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.
+     */
+    private startLive;
+    /** Arrête les abonnements realtime (relâche la réf de la barre). Idempotent. */
+    private stopLive;
+    /** Active/désactive le temps réel (bouton de la barre) + persiste la préférence. */
+    setLive(v: boolean): void;
+    /** Met à jour l'aspect du bouton « Temps réel » selon l'état. */
+    private updateLiveBtn;
+    private sampleThroughput;
+    private wireHmr;
+    private onHmr;
+    private flashHmr;
+    private wireNetwork;
+    private onNetEntry;
+    /** Crée ou met à jour le nœud de ligne d'un appel (jamais d'innerHTML global). */
+    private upsertNetRow;
+    /** Remplit/actualise les cellules d'une ligne (textContent → 0 échappement). */
+    private fillNetRow;
+    /** Sélectionne une ligne (highlight) + déclenche le fetch du profil. */
+    private selectRow;
+    /** Fetch `/{profilerBase}/{requestId}` (ignoré par l'intercepteur). */
+    private fetchProfile;
+    private scheduleRender;
+    private text;
+    /** className safe pour HTML *et* SVG (SVGElement.className n'est pas une string). */
+    private cls;
+    private setPoints;
+    private render;
+    /** Bandeau toujours visible (chips + pouls) — léger. */
+    private renderStrip;
+    private renderRealtimePane;
+    private renderPerf;
+    private renderRuntime;
+    private renderLogsPane;
+    /** Classe de couleur d'une entrée, dérivée de sa sévérité RFC 5424. */
+    private static tierOf;
+    /** L'entrée passe-t-elle le filtre de sévérité et la recherche en cours ? */
+    private feedMatch;
+    /** Une ligne de journal — horodatage, sévérité, module, texte, requête. */
+    private feedRow;
+    /** Le détail d'une entrée — ce qu'on colle dans un ticket. */
+    private feedDetail;
+    /**
+     * 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.
+     */
+    private renderFeed;
+    private renderNetwork;
+    private renderDetail;
+    /** Désélectionne la requête → referme le détail (placeholder). */
+    private deselect;
+    /** Rend le détail d'un profil serveur (méta + waterfall des phases). */
+    private profileHtml;
+    /** Rend les requêtes ORM (SEAM futur) — vide tant qu'aucun adapter ne pushe. */
+    private queriesHtml;
+}
+export default DebugBar;

package/dist/client/types/src/client/debugbar/format.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Helpers de formatage PURS de la debug bar — aucune dépendance DOM/réseau,
+ * donc unit-testables côté Node (suite mocha du core).
+ */
+/**
+ * Formatte un nombre d'octets en unité lisible (1 décimale, base 1024).
+ *
+ * @param bytes - taille en octets (négatif/NaN → "0 B")
+ * @returns ex. `"1.5 MB"`, `"0 B"`
+ */
+export declare function formatBytes(bytes: number): string;
+/**
+ * Formatte une durée (secondes) en chaîne compacte (`1h 02m`, `3m 12s`, `45s`).
+ *
+ * @param seconds - uptime en secondes
+ */
+export declare function formatUptime(seconds: number): string;
+/** Palier de santé d'une jauge 0-100 — pilote la couleur du widget. */
+export type GaugeTier = "ok" | "warn" | "crit";
+/**
+ * Classe une valeur 0-100 en palier vert/orange/rouge.
+ *
+ * @param percent - valeur de la jauge
+ * @param warn - seuil orange (défaut 70)
+ * @param crit - seuil rouge (défaut 90)
+ */
+export declare function gauge(percent: number, warn?: number, crit?: number): GaugeTier;
+/** Retire les séquences d'échappement ANSI (couleurs terminal) d'une chaîne. */
+export declare function stripAnsi(input: string): string;
+/**
+ * Calcule l'attribut `points` d'un `<polyline>` SVG (sparkline) à partir d'une
+ * série de valeurs. Pur → testable. Mise à l'échelle sur `[0, max]`.
+ *
+ * @param values - série temporelle (gauche = ancien, droite = récent)
+ * @param width - largeur du viewBox
+ * @param height - hauteur du viewBox
+ * @param max - plafond de l'axe Y (défaut = max de la série, plancher 1)
+ * @returns ex. `"0,14 10,7 20,2"` (vide si < 2 points)
+ */
+export declare function sparklinePoints(values: number[], width: number, height: number, max?: number): string;
+/**
+ * Heure locale d'un horodatage, à la milliseconde — `14:03:27.482`.
+ *
+ * La date n'y figure pas : une barre de débogage montre ce qui vient de se
+ * passer, et une date répétée sur chaque ligne coûte de la place sans rien
+ * apprendre. Le détail d'une entrée, lui, rend l'horodatage complet.
+ */
+export declare function fmtClock(ts: number): string;

package/dist/client/types/src/client/debugbar/hmr.d.ts

@@ -0,0 +1,16 @@
+export type HmrKind = "connected" | "update" | "full-reload" | "error" | "prune";
+export interface HmrEvent {
+    kind: HmrKind;
+    /** Chemin du module mis à jour (si fourni par Vite). */
+    path?: string;
+}
+/** Nom de l'événement DOM émis par le pont HMR côté page. */
+export declare const HMR_EVENT: "nodefony:hmr";
+/**
+ * Observe les hot-updates Vite via l'événement `window` `nodefony:hmr`.
+ * Aucune connexion réseau ouverte. No-op hors navigateur.
+ *
+ * @param onEvent - appelé à chaque hot-update relayé par le pont.
+ * @returns dispose() — retire le listener (OBLIGATOIRE au démontage).
+ */
+export declare function observeViteHmr(onEvent: (e: HmrEvent) => void): () => void;

package/dist/client/types/src/client/debugbar/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Subpath `nodefony/debugbar` — point d'entrée de la debug bar Nodefony.
+ *
+ * Entry Rollup SÉPARÉE (tree-shakée, 0 octet si non importée) : ce fichier ne
+ * doit JAMAIS être réexporté depuis `client/index.ts` (sinon le barrel `nodefony`
+ * navigateur tire toute la barre). Cf décision `project_client_lib_subpaths_decision`.
+ *
+ * Usage :
+ * ```ts
+ * import { mountDebugBar } from "nodefony/debugbar";
+ * mountDebugBar(); // dev only
+ * ```
+ */
+import { DebugBar, type DebugBarOptions } from "./DebugBar.js";
+export { DebugBar };
+export type { DebugBarOptions };
+export type { DebugBarView, DebugBarModel } from "./model.js";
+export { computeWaterfall, phaseTier, NetworkModel, isError as isNetworkError, } from "./profile.js";
+export type { ProfileEntry, ProfilePhase, ProfileQuery, ProfileState, WaterfallBar, } from "./profile.js";
+export type { NetEntry } from "./network.js";
+/**
+ * Monte la debug bar sur la page courante. Idempotent (un seul widget par page).
+ * No-op hors navigateur (SSR). Branche un {@link RealtimeClient} sur le WS
+ * realtime et rend l'overlay live.
+ *
+ * @param opts - URL du WS, client partagé, position, ouverture initiale
+ * @returns l'instance {@link DebugBar} (appeler `.unmount()` pour retirer)
+ */
+export declare function mountDebugBar(opts?: DebugBarOptions): DebugBar;
+export default mountDebugBar;

package/dist/client/types/src/client/debugbar/model.d.ts

@@ -0,0 +1,158 @@
+/**
+ * État PUR de la debug bar — ingère les payloads des canaux realtime
+ * (`nodefony:supervision`, `nodefony:syslog`) et expose une vue dénormalisée prête
+ * à rendre (séries temporelles pour sparklines incluses). Aucune dépendance
+ * DOM/réseau → unit-testable côté Node.
+ *
+ * Le rendu (DOM/Shadow/SVG) vit dans `DebugBar.ts` : ce modèle ne fait QUE de la
+ * collecte/agrégation, exactement comme les providers serveur sont découplés du
+ * transport. Découplage collecte / rendu.
+ */
+import type { RealtimeState } from "../realtime/RealtimeClient.js";
+/** Métadonnées applicatives statiques (env, branche git, version) — bloc `app`. */
+export interface AppMeta {
+    name?: string;
+    version?: string;
+    env?: string;
+    debug?: boolean;
+    branch?: string;
+}
+/** Payload du canal `nodefony:supervision` (cf studio `createStatsTicker`). */
+export interface StatsPayload {
+    ts: number;
+    app?: AppMeta;
+    instanceId?: string;
+    uptime?: number;
+    pid?: number;
+    cpuPercent?: number;
+    cpuCount?: number;
+    eventLoopMs?: number;
+    loadavg?: number[];
+    memory?: {
+        rss?: number;
+        heapUsed?: number;
+        heapTotal?: number;
+        heapLimit?: number;
+        external?: number;
+    };
+}
+/**
+ * Pdu sérialisé tel qu'il transite sur `nodefony:syslog` (JSON.stringify d'un
+ * {@link Pdu} côté serveur). Le message vit dans `payload`, le producteur dans
+ * `moduleName` — on réhydrate un vrai {@link Pdu} (même classe Core des 2 côtés).
+ */
+export interface LogEntry {
+    payload?: unknown;
+    severity?: number;
+    severityName?: string;
+    moduleName?: string;
+    msgid?: string;
+    msg?: string;
+    /**
+     * Les champs ci-dessous voyagent DÉJÀ sur le canal : le pont publie le `Pdu`
+     * entier, et `JSON.stringify` sérialise toutes ses propriétés publiques (il
+     * n'a pas de `toJSON` qui les filtrerait). La console d'administration les lit
+     * sur cette même source. La barre les ignorait — c'est tout ce qui lui
+     * manquait pour corréler ce qu'elle montre avec le reste du framework.
+     */
+    timeStamp?: number;
+    uid?: number;
+    pid?: number;
+    /**
+     * Identifiant de la requête qui a produit ce journal. C'est LE champ qui relie
+     * un clic dans le navigateur à sa route, à sa requête de base de données et à
+     * sa réponse — la trace de bout en bout. Absent hors de toute portée de
+     * requête (démarrage, tâche de fond), et c'est normal.
+     */
+    requestId?: string;
+}
+/** Payload coalescé du canal `nodefony:syslog` (cf studio `createSyslogBridge`). */
+export interface SyslogPayload {
+    logs?: LogEntry[];
+    dropped?: number;
+}
+/** Log normalisé pour le feed du widget. */
+export interface FeedLog {
+    severity: number;
+    name: string;
+    text: string;
+    module: string;
+    /** Horodatage du PRODUCTEUR, pas de la réception : deux horloges mentiraient. */
+    ts: number;
+    /** Numéro de séquence du `Pdu` — identifie une entrée sans ambiguïté. */
+    uid: number;
+    /** Catégorie du message (`KERNEL`, `ROUTER`, `AUTH`…), vide si absente. */
+    msgid: string;
+    /** Worker émetteur — en cluster, dit LEQUEL a parlé. */
+    pid: number;
+    /** Requête corrélée, quand elle est connue. */
+    requestId?: string;
+}
+/** Vue dénormalisée consommée par le rendu. */
+export interface DebugBarView {
+    state: RealtimeState;
+    /** Métadonnées app (env, branche git, version) — depuis le bloc `app` des stats. */
+    appName: string;
+    appVersion: string;
+    env: string;
+    debug: boolean;
+    branch: string;
+    cpuPercent: number;
+    cpuPeak: number;
+    cpuCount: number;
+    eventLoopMs: number;
+    eventLoopPeak: number;
+    uptime: number;
+    pid: number;
+    instanceId: string;
+    loadavg: number[];
+    rss: number;
+    heapUsed: number;
+    heapTotal: number;
+    heapLimit: number;
+    external: number;
+    /** heapUsed / heapLimit en %, 0 si limite inconnue. */
+    heapPercent: number;
+    heapPeak: number;
+    /** Séries temporelles (anciens → récents) pour les sparklines. */
+    cpuSeries: number[];
+    heapSeries: number[];
+    loopSeries: number[];
+    /** Total de logs reçus depuis le montage. */
+    logTotal: number;
+    /** Logs de sévérité ≤ 3 (ERROR/CRITIC/ALERT/EMERGENCY). */
+    errorCount: number;
+    /** Logs de sévérité === 4 (WARNING). */
+    warnCount: number;
+    /** Logs omis par le coalescing serveur (surcharge). */
+    dropped: number;
+    /** Derniers logs (récents en dernier), capés. */
+    feed: FeedLog[];
+}
+/** Logs conservés dans le feed. */
+export declare const FEED_MAX = 40;
+export declare class DebugBarModel {
+    private _state;
+    private _stats;
+    private _cpuPeak;
+    private _heapPeak;
+    private _loopPeak;
+    private readonly _cpuSeries;
+    private readonly _heapSeries;
+    private readonly _loopSeries;
+    private _logTotal;
+    private _errorCount;
+    private _warnCount;
+    private _dropped;
+    private readonly _feed;
+    setState(state: RealtimeState): void;
+    /** Mémorise le dernier tick stats + alimente les séries/peaks. */
+    ingestStats(payload: StatsPayload): void;
+    /**
+     * Comptabilise un batch de logs coalescés (compteurs cumulés + feed). Chaque
+     * entrée est **réhydratée en {@link Pdu}** — la MÊME classe Core que côté
+     * serveur (severityName/payload canoniques, pas de devinette de champ).
+     */
+    ingestSyslog(payload: SyslogPayload): void;
+    get view(): DebugBarView;
+}

package/dist/client/types/src/client/debugbar/network.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Intercepteur réseau **dev-only** de la debug bar — capture les appels AJAX
+ * (`fetch` + `XMLHttpRequest`) de la page pour le panneau Network, et lit le
+ * header `X-Request-Id` de chaque réponse → corrélation avec le profil serveur
+ * (`/nodefony/profiler/api/{requestId}`).
+ *
+ * ⚠️ Monkey-patch des globals = intrusif. Donc 6 garde-fous (cf décision design) :
+ *  1. **dev-only** : n'est installé que par la debug bar, jamais en prod.
+ *  2. **défensif** : toute la collecte est en try/catch — un bug ici ne casse
+ *     JAMAIS la requête de l'app (on relaie toujours l'appel original).
+ *  3. **header-only** : on ne touche jamais au body (pas de `.clone()`, pas de
+ *     lecture du stream) → 0 risque de consommer/altérer la réponse.
+ *  4. **réversible** : `uninstall()` restaure les implémentations d'origine.
+ *  5. **chain-safe** : on wrappe le `fetch`/XHR COURANT (déjà potentiellement
+ *     patché par une autre lib), on ne clobber pas — l'uninstall ne restaure que
+ *     si personne n'a re-patché par-dessus.
+ *  6. **opt-out** : `mountDebugBar({ network:false })` n'installe rien.
+ *
+ * Coût : 2 `performance.now()` + lecture d'1 header + 1 push capé par appel.
+ * Négligeable vs la latence réseau.
+ */
+/** Une entrée du panneau Network (1 appel AJAX observé). */
+export interface NetEntry {
+    /** Id local monotone (clé de rendu, ≠ requestId serveur). */
+    id: number;
+    method: string;
+    url: string;
+    /** Path seul (sans origin/query) pour l'affichage compact. */
+    path: string;
+    status: number | null;
+    ok: boolean;
+    /** Durée client (ms, envoi → réponse), `null` tant que pending. */
+    durationMs: number | null;
+    startedAt: number;
+    /** `X-Request-Id` de la réponse → clé du profil serveur. `null` si absent. */
+    requestId: string | null;
+    /** `traceparent` W3C (RFC-propre) de la réponse, pour la corrélation distribuée. */
+    traceparent: string | null;
+    /** Vrai tant que la réponse n'est pas arrivée. */
+    pending: boolean;
+    /** Message d'erreur réseau (fetch rejeté / XHR error), sinon `null`. */
+    error: string | null;
+}
+export interface NetworkInterceptorOptions {
+    /** Appelé à chaque création/mise à jour d'entrée (re-render). */
+    onChange: (entry: NetEntry) => void;
+    /** Prédicat d'exclusion d'une URL (ex. l'API profiler elle-même). */
+    ignore?: (url: string) => boolean;
+}
+/**
+ * Installe l'intercepteur fetch + XHR. No-op hors navigateur.
+ *
+ * @returns `uninstall()` — restaure les globals (OBLIGATOIRE à l'unmount).
+ */
+export declare function installNetworkInterceptor(opts: NetworkInterceptorOptions): () => void;

package/dist/client/types/src/client/debugbar/profile.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Modèle PUR du panneau Network + profil serveur — aucune dépendance DOM/réseau
+ * (le fetch vit dans `DebugBar.ts`, l'interception dans `network.ts`). Testable
+ * côté Node, comme {@link DebugBarModel}.
+ *
+ * Deux responsabilités :
+ *  - {@link NetworkModel} : ring buffer des appels AJAX observés + compteurs +
+ *    cache des profils serveur déjà fetchés (par `requestId`).
+ *  - {@link computeWaterfall} : layout proportionnel des phases serveur (le
+ *    centre UX — une timeline type Chrome/Symfony).
+ */
+import type { NetEntry } from "./network.js";
+/** Phase serveur projetée (miroir client de `@nodefony/http` `ProfilePhase`). */
+export interface ProfilePhase {
+    name: string;
+    startMs: number;
+    durationMs: number | null;
+}
+/** Requête ORM (miroir client de `@nodefony/http` `ProfileQuery` — SEAM futur). */
+export interface ProfileQuery {
+    sql: string;
+    durationMs: number;
+    rows?: number;
+    connector?: string;
+}
+/** Profil serveur complet (miroir client de `@nodefony/http` `ProfileEntry`). */
+export interface ProfileEntry {
+    requestId: string;
+    ts: number;
+    kind: "http" | "ws";
+    method: string | null;
+    url: string;
+    scheme: string;
+    status: number | null;
+    durationMs: number | null;
+    route: string | null;
+    controller: string | null;
+    action: string | null;
+    remoteAddress: string | null;
+    user: string | null;
+    /** `traceparent` W3C (RFC-propre), si présent. */
+    traceparent: string | null;
+    error: string | null;
+    phases: ProfilePhase[];
+    /** Requêtes ORM (SEAM futur — `undefined` tant qu'aucun adapter ne pushe). */
+    queries?: ProfileQuery[];
+}
+/** État de chargement d'un profil serveur dans le cache. */
+export type ProfileState = {
+    status: "loading";
+} | {
+    status: "ready";
+    profile: ProfileEntry;
+} | {
+    status: "missing";
+} | {
+    status: "error";
+    message: string;
+};
+/** Une barre du waterfall (positions en % du span total). */
+export interface WaterfallBar {
+    name: string;
+    leftPct: number;
+    widthPct: number;
+    durationMs: number;
+    /** Classe de couleur CSS (cf STYLES `.wf-<tier>`). */
+    tier: string;
+}
+/** Mappe un nom de phase vers sa classe de couleur (défaut neutre). */
+export declare function phaseTier(name: string): string;
+export declare class NetworkModel {
+    private readonly _byId;
+    private readonly _profiles;
+    private _total;
+    private _errors;
+    /** Upsert d'une entrée (pending puis résolue partagent le même `id`). */
+    ingest(entry: NetEntry): void;
+    /** Entrées récentes (récent → ancien) pour le rendu. */
+    entries(): NetEntry[];
+    get total(): number;
+    get errors(): number;
+    get pending(): number;
+    profileState(requestId: string): ProfileState | undefined;
+    setProfileState(requestId: string, state: ProfileState): void;
+    clear(): void;
+}
+/** Vrai si une entrée est en erreur réseau ou status ≥ 400. */
+export declare function isError(e: NetEntry): boolean;
+/**
+ * Calcule le layout proportionnel des phases serveur (waterfall). Pur.
+ *
+ * Chaque barre est positionnée sur le span `[min start, max end]` en %. Une
+ * phase de durée nulle reçoit une largeur plancher (visibilité). Span nul →
+ * barres vides (évite la division par zéro).
+ *
+ * @param phases - phases du profil serveur (startMs relatif + durationMs)
+ * @returns barres prêtes à rendre (gauche/largeur en %)
+ */
+export declare function computeWaterfall(phases: ProfilePhase[]): WaterfallBar[];