@nifrajs/devtools 1.4.0

package/dist/client.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Re-export the client script for consumers who only need the browser overlay.
+ *
+ * Usage:
+ * ```ts
+ * import { devtoolsClientScript } from "@nifrajs/devtools/client"
+ * ```
+ */
+export { devtoolsClientScript } from "./index.js";
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA"}

package/dist/client.js

@@ -0,0 +1,10 @@
+/**
+ * Re-export the client script for consumers who only need the browser overlay.
+ *
+ * Usage:
+ * ```ts
+ * import { devtoolsClientScript } from "@nifrajs/devtools/client"
+ * ```
+ */
+export { devtoolsClientScript } from "./index.js";
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+/**
+ * `@nifrajs/devtools` — interactive DevTools overlay for `nifra dev`.
+ *
+ * Server-side: a middleware plugin that captures request traces into a ring buffer
+ * and streams them via SSE at `/_nifra/devtools`.
+ *
+ * Client-side: a floating browser overlay that connects to the SSE stream and
+ * renders a scrolling log of request traces with ISR status badges.
+ *
+ * **Zero production overhead** — register conditionally:
+ * ```ts
+ * if (process.env.NODE_ENV !== "production") app.use(devtools())
+ * ```
+ * When not registered, routes stay `bare` and the SSE endpoint doesn't exist.
+ */
+export interface DevToolsEvent {
+    readonly id: string;
+    readonly traceId: string;
+    readonly spanId: string;
+    readonly parentSpanId?: string | undefined;
+    readonly timestamp: number;
+    readonly method: string;
+    readonly path: string;
+    readonly status: number;
+    readonly durationMs: number;
+    readonly isrStatus?: string | undefined;
+    readonly bodyBytes: number;
+}
+export interface DevToolsOptions {
+    /** Maximum events to retain in the ring buffer (default 200). */
+    readonly maxEvents?: number | undefined;
+    /** Maximum simultaneous SSE connections (default 5). */
+    readonly maxConnections?: number | undefined;
+    /** SSE path (default `/_nifra/devtools`). */
+    readonly path?: string | undefined;
+    /** Explicit enable switch. Defaults to true only when `NODE_ENV === "development"`. */
+    readonly enabled?: boolean | undefined;
+    /** Permit non-loopback URL hosts. Default false. */
+    readonly allowRemote?: boolean | undefined;
+    /** Additional origins permitted to open the stream. Same-origin requests are always allowed. */
+    readonly allowedOrigins?: readonly string[] | undefined;
+    /** Optional request authorization for the stream. */
+    readonly authorize?: ((request: Request) => boolean | Promise<boolean>) | undefined;
+    /**
+     * Interval for SSE keep-alive comment frames, in milliseconds (default 15000). Pings stop
+     * idle proxies/dev tunnels from dropping the stream and evict dead connections so they no
+     * longer count against `maxConnections`.
+     */
+    readonly pingIntervalMs?: number | undefined;
+}
+export interface DevToolsClientOptions {
+    /** SSE path configured on the server plugin. */
+    readonly path?: string | undefined;
+}
+/**
+ * DevTools plugin. Its observation adapter projects the single request span into a
+ * `DevToolsEvent`; its middleware only owns the secured SSE transport.
+ * When configuring `tracing()` yourself, register it before this plugin so DevTools attaches to
+ * that request owner.
+ */
+export declare function devtools(options?: DevToolsOptions | undefined): import("@nifrajs/core").NifraPlugin<import("@nifrajs/core").AnyServer, import("@nifrajs/core").AnyServer>;
+/**
+ * Returns a self-contained JavaScript string that creates a floating DevTools
+ * overlay in the browser. Inject via `<script>` tag in dev mode.
+ *
+ * The overlay:
+ * - Connects to `/_nifra/devtools` via EventSource
+ * - Shows a scrolling log of request traces
+ * - Color-coded method badges and status codes
+ * - ISR hit/miss/stale indicators
+ * - Collapsible with a ⚡ toggle button
+ */
+export declare function devtoolsClientScript(options?: DevToolsClientOptions): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAcH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvC,wDAAwD;IACxD,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5C,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,uFAAuF;IACvF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACtC,oDAAoD;IACpD,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,gGAAgG;IAChG,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACvD,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAA;IACnF;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7C;AAED,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC;AAQD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,6GAmK7D;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CAuGhF"}

package/dist/index.js

@@ -0,0 +1,303 @@
+/**
+ * `@nifrajs/devtools` — interactive DevTools overlay for `nifra dev`.
+ *
+ * Server-side: a middleware plugin that captures request traces into a ring buffer
+ * and streams them via SSE at `/_nifra/devtools`.
+ *
+ * Client-side: a floating browser overlay that connects to the SSE stream and
+ * renders a scrolling log of request traces with ISR status badges.
+ *
+ * **Zero production overhead** — register conditionally:
+ * ```ts
+ * if (process.env.NODE_ENV !== "production") app.use(devtools())
+ * ```
+ * When not registered, routes stay `bare` and the SSE endpoint doesn't exist.
+ */
+import { definePlugin } from "@nifrajs/core";
+import { tracing, } from "@nifrajs/otel";
+// ---------------------------------------------------------------------------
+// Server middleware
+// ---------------------------------------------------------------------------
+const encoder = new TextEncoder();
+/**
+ * DevTools plugin. Its observation adapter projects the single request span into a
+ * `DevToolsEvent`; its middleware only owns the secured SSE transport.
+ * When configuring `tracing()` yourself, register it before this plugin so DevTools attaches to
+ * that request owner.
+ */
+export function devtools(options) {
+    const maxEvents = options?.maxEvents ?? 200;
+    const maxConnections = Math.max(1, options?.maxConnections ?? 5);
+    const endpoint = options?.path ?? "/_nifra/devtools";
+    const enabled = options?.enabled ?? process.env.NODE_ENV === "development";
+    const allowRemote = options?.allowRemote ?? false;
+    const allowedOrigins = new Set(options?.allowedOrigins ?? []);
+    const pingIntervalMs = Math.max(1, options?.pingIntervalMs ?? 15_000);
+    const buffer = [];
+    const controllers = new Set();
+    let eventCounter = 0;
+    let pingTimer;
+    const pingFrame = encoder.encode(": ping\n\n");
+    function stopPing() {
+        if (pingTimer === undefined)
+            return;
+        clearInterval(pingTimer);
+        pingTimer = undefined;
+    }
+    function startPing() {
+        if (pingTimer !== undefined)
+            return;
+        pingTimer = setInterval(() => {
+            for (const ctrl of controllers) {
+                try {
+                    ctrl.enqueue(pingFrame);
+                }
+                catch {
+                    controllers.delete(ctrl);
+                }
+            }
+            if (controllers.size === 0)
+                stopPing();
+        }, pingIntervalMs);
+        pingTimer.unref?.();
+    }
+    function dropController(ctrl) {
+        controllers.delete(ctrl);
+        if (controllers.size === 0)
+            stopPing();
+    }
+    function broadcast(event) {
+        const data = encoder.encode(`data: ${JSON.stringify(event)}\n\n`);
+        for (const ctrl of controllers) {
+            try {
+                ctrl.enqueue(data);
+            }
+            catch {
+                dropController(ctrl);
+            }
+        }
+    }
+    const adapter = {
+        onEnd(span) {
+            const method = span.attributes["http.request.method"];
+            const path = span.attributes["url.path"];
+            const status = span.attributes["http.response.status_code"];
+            if (typeof method !== "string" || typeof path !== "string" || typeof status !== "number") {
+                return;
+            }
+            if (path === endpoint)
+                return;
+            const isrStatus = span.attributes["nifra.isr.status"];
+            const bodyBytes = span.attributes["http.response.body.size"];
+            const event = {
+                id: String(++eventCounter),
+                traceId: span.traceId,
+                spanId: span.spanId,
+                parentSpanId: span.parentSpanId,
+                timestamp: span.startTime,
+                method,
+                path,
+                status,
+                durationMs: Math.round((span.durationMs ?? 0) * 100) / 100,
+                isrStatus: typeof isrStatus === "string" ? isrStatus : undefined,
+                bodyBytes: typeof bodyBytes === "number" ? bodyBytes : 0,
+            };
+            buffer.push(event);
+            if (buffer.length > maxEvents)
+                buffer.splice(0, buffer.length - maxEvents);
+            broadcast(event);
+        },
+    };
+    return definePlugin("devtools", (app) => {
+        // Disabled → wire nothing: no tracing pipeline, no SSE middleware, zero per-request overhead.
+        if (!enabled)
+            return app;
+        return app.use(tracing({ adapters: [adapter] })).use({
+            name: "devtools-stream",
+            async onRequest(request) {
+                // Handle the SSE endpoint
+                const url = new URL(request.url);
+                if (url.pathname === endpoint) {
+                    const loopback = url.hostname === "localhost" ||
+                        url.hostname === "127.0.0.1" ||
+                        url.hostname === "[::1]" ||
+                        url.hostname.endsWith(".localhost");
+                    if (!allowRemote && !loopback) {
+                        return new Response("Nifra DevTools is restricted to loopback hosts", { status: 403 });
+                    }
+                    const origin = request.headers.get("origin");
+                    if (origin !== null && origin !== url.origin && !allowedOrigins.has(origin)) {
+                        return new Response("Origin not allowed", { status: 403 });
+                    }
+                    if (options?.authorize !== undefined && !(await options.authorize(request))) {
+                        return new Response("Unauthorized", { status: 401 });
+                    }
+                    if (controllers.size >= maxConnections) {
+                        return new Response("Too many DevTools connections", {
+                            status: 503,
+                            headers: { "retry-after": "5" },
+                        });
+                    }
+                    let activeController;
+                    const stream = new ReadableStream({
+                        start(controller) {
+                            activeController = controller;
+                            controllers.add(controller);
+                            startPing();
+                            // Send buffered events as initial payload
+                            for (const evt of buffer) {
+                                try {
+                                    controller.enqueue(encoder.encode(`data: ${JSON.stringify(evt)}\n\n`));
+                                }
+                                catch {
+                                    break;
+                                }
+                            }
+                        },
+                        cancel() {
+                            if (activeController !== undefined)
+                                dropController(activeController);
+                        },
+                    });
+                    // Clean up dead controllers on cancel
+                    const response = new Response(stream, {
+                        headers: {
+                            "content-type": "text/event-stream",
+                            "cache-control": "no-store",
+                            connection: "keep-alive",
+                            "content-security-policy": "default-src 'none'",
+                            "x-content-type-options": "nosniff",
+                            "x-nifra-devtools": "true",
+                        },
+                    });
+                    return response;
+                }
+                return undefined;
+            },
+            beforeHandle(context) {
+                ;
+                context.observation?.addAdapter(adapter);
+                return undefined;
+            },
+        });
+    });
+}
+// ---------------------------------------------------------------------------
+// Browser client script
+// ---------------------------------------------------------------------------
+/**
+ * Returns a self-contained JavaScript string that creates a floating DevTools
+ * overlay in the browser. Inject via `<script>` tag in dev mode.
+ *
+ * The overlay:
+ * - Connects to `/_nifra/devtools` via EventSource
+ * - Shows a scrolling log of request traces
+ * - Color-coded method badges and status codes
+ * - ISR hit/miss/stale indicators
+ * - Collapsible with a ⚡ toggle button
+ */
+export function devtoolsClientScript(options = {}) {
+    const endpoint = JSON.stringify(options.path ?? "/_nifra/devtools");
+    return `(function(){
+  if(typeof window==='undefined')return;
+  var MAX=50,events=[],open=false;
+
+  // Panel container
+  var panel=document.createElement('div');
+  panel.id='nifra-devtools';
+  panel.style.cssText='position:fixed;bottom:12px;right:12px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;font-size:12px;';
+
+  // Toggle button
+  var btn=document.createElement('button');
+  btn.textContent='⚡';
+  btn.title='Nifra DevTools';
+  btn.style.cssText='width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:rgba(10,10,30,0.9);color:#7c3aed;font-size:16px;cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.4);transition:transform 0.2s;';
+  btn.onmouseenter=function(){btn.style.transform='scale(1.1)'};
+  btn.onmouseleave=function(){btn.style.transform='scale(1)'};
+
+  // Log container
+  var log=document.createElement('div');
+  log.style.cssText='display:none;width:380px;max-height:400px;overflow-y:auto;background:rgba(10,10,30,0.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:8px;margin-bottom:8px;box-shadow:0 8px 32px rgba(0,0,0,0.5);';
+
+  // Header
+  var hdr=document.createElement('div');
+  hdr.style.cssText='display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:6px;';
+  hdr.innerHTML='<span style="color:#7c3aed;font-weight:700;font-size:13px;">⚡ Nifra DevTools</span>';
+  var counter=document.createElement('span');
+  counter.style.cssText='color:#888;font-size:11px;';
+  counter.textContent='0 events';
+  var clearBtn=document.createElement('button');
+  clearBtn.textContent='Clear';
+  clearBtn.style.cssText='background:none;border:1px solid rgba(255,255,255,0.1);color:#888;font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:8px;';
+  clearBtn.onclick=function(){events=[];list.innerHTML='';counter.textContent='0 events';};
+  var right=document.createElement('span');
+  right.appendChild(counter);right.appendChild(clearBtn);
+  hdr.appendChild(right);
+  log.appendChild(hdr);
+
+  var list=document.createElement('div');
+  log.appendChild(list);
+
+  panel.appendChild(log);
+  panel.appendChild(btn);
+
+  btn.onclick=function(){
+    open=!open;
+    log.style.display=open?'block':'none';
+  };
+
+  function methodColor(m){
+    switch(m){case'GET':return'#2ecc71';case'POST':return'#3b82f6';case'PUT':return'#f59e0b';case'DELETE':return'#ef4444';default:return'#888';}
+  }
+  function statusColor(s){
+    if(s<300)return'#2ecc71';if(s<400)return'#3b82f6';if(s<500)return'#f59e0b';return'#ef4444';
+  }
+
+  function addEvent(evt){
+    events.push(evt);
+    if(events.length>MAX)events.shift();
+    counter.textContent=events.length+' events';
+
+    var row=document.createElement('div');
+    row.style.cssText='padding:4px 8px;border-bottom:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;gap:8px;';
+
+    var method=document.createElement('span');
+    method.textContent=evt.method;
+    method.style.cssText='font-weight:700;font-size:10px;padding:1px 6px;border-radius:3px;color:#fff;background:'+methodColor(evt.method)+';min-width:36px;text-align:center;';
+
+    var path=document.createElement('span');
+    path.textContent=evt.path;
+    path.style.cssText='color:#e0e0e0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+
+    var status=document.createElement('span');
+    status.textContent=String(evt.status);
+    status.style.cssText='color:'+statusColor(evt.status)+';font-weight:600;';
+
+    var dur=document.createElement('span');
+    dur.textContent=evt.durationMs+'ms';
+    dur.style.cssText='color:#888;font-size:11px;min-width:50px;text-align:right;';
+
+    row.appendChild(method);row.appendChild(path);row.appendChild(status);row.appendChild(dur);
+
+    if(evt.isrStatus){
+      var isr=document.createElement('span');
+      isr.textContent=evt.isrStatus;
+      var ic=evt.isrStatus==='hit'?'#2ecc71':evt.isrStatus==='stale'?'#f59e0b':'#888';
+      isr.style.cssText='font-size:9px;padding:1px 4px;border-radius:3px;background:'+ic+'22;color:'+ic+';border:1px solid '+ic+'44;';
+      row.appendChild(isr);
+    }
+
+    list.insertBefore(row,list.firstChild);
+    if(list.children.length>MAX)list.removeChild(list.lastChild);
+  }
+
+  // Connect SSE
+  var es=new EventSource(${endpoint});
+  es.onmessage=function(e){
+    try{addEvent(JSON.parse(e.data));}catch(err){}
+  };
+
+  document.body.appendChild(panel);
+})();`;
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@nifrajs/devtools",
+  "version": "1.4.0",
+  "description": "Interactive DevTools overlay for nifra dev — loader traces, ISR status, route metadata.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "bun": "./src/client.ts",
+      "types": "./dist/client.d.ts",
+      "default": "./dist/client.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && bun run ../../scripts/fix-dts.ts dist"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nifrajs/otel": "1.4.0"
+  },
+  "peerDependencies": {
+    "@nifrajs/core": "^1.4.0"
+  },
+  "devDependencies": {
+    "@nifrajs/core": "workspace:*"
+  }
+}

package/src/client.ts

@@ -0,0 +1,9 @@
+/**
+ * Re-export the client script for consumers who only need the browser overlay.
+ *
+ * Usage:
+ * ```ts
+ * import { devtoolsClientScript } from "@nifrajs/devtools/client"
+ * ```
+ */
+export { devtoolsClientScript } from "./index.ts"

package/src/index.ts

@@ -0,0 +1,366 @@
+/**
+ * `@nifrajs/devtools` — interactive DevTools overlay for `nifra dev`.
+ *
+ * Server-side: a middleware plugin that captures request traces into a ring buffer
+ * and streams them via SSE at `/_nifra/devtools`.
+ *
+ * Client-side: a floating browser overlay that connects to the SSE stream and
+ * renders a scrolling log of request traces with ISR status badges.
+ *
+ * **Zero production overhead** — register conditionally:
+ * ```ts
+ * if (process.env.NODE_ENV !== "production") app.use(devtools())
+ * ```
+ * When not registered, routes stay `bare` and the SSE endpoint doesn't exist.
+ */
+
+import { definePlugin } from "@nifrajs/core"
+import {
+  type ActiveObservation,
+  type NifraSpan,
+  type ObservationAdapter,
+  tracing,
+} from "@nifrajs/otel"
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface DevToolsEvent {
+  readonly id: string
+  readonly traceId: string
+  readonly spanId: string
+  readonly parentSpanId?: string | undefined
+  readonly timestamp: number
+  readonly method: string
+  readonly path: string
+  readonly status: number
+  readonly durationMs: number
+  readonly isrStatus?: string | undefined
+  readonly bodyBytes: number
+}
+
+export interface DevToolsOptions {
+  /** Maximum events to retain in the ring buffer (default 200). */
+  readonly maxEvents?: number | undefined
+  /** Maximum simultaneous SSE connections (default 5). */
+  readonly maxConnections?: number | undefined
+  /** SSE path (default `/_nifra/devtools`). */
+  readonly path?: string | undefined
+  /** Explicit enable switch. Defaults to true only when `NODE_ENV === "development"`. */
+  readonly enabled?: boolean | undefined
+  /** Permit non-loopback URL hosts. Default false. */
+  readonly allowRemote?: boolean | undefined
+  /** Additional origins permitted to open the stream. Same-origin requests are always allowed. */
+  readonly allowedOrigins?: readonly string[] | undefined
+  /** Optional request authorization for the stream. */
+  readonly authorize?: ((request: Request) => boolean | Promise<boolean>) | undefined
+  /**
+   * Interval for SSE keep-alive comment frames, in milliseconds (default 15000). Pings stop
+   * idle proxies/dev tunnels from dropping the stream and evict dead connections so they no
+   * longer count against `maxConnections`.
+   */
+  readonly pingIntervalMs?: number | undefined
+}
+
+export interface DevToolsClientOptions {
+  /** SSE path configured on the server plugin. */
+  readonly path?: string | undefined
+}
+
+// ---------------------------------------------------------------------------
+// Server middleware
+// ---------------------------------------------------------------------------
+
+const encoder = new TextEncoder()
+
+/**
+ * DevTools plugin. Its observation adapter projects the single request span into a
+ * `DevToolsEvent`; its middleware only owns the secured SSE transport.
+ * When configuring `tracing()` yourself, register it before this plugin so DevTools attaches to
+ * that request owner.
+ */
+export function devtools(options?: DevToolsOptions | undefined) {
+  const maxEvents = options?.maxEvents ?? 200
+  const maxConnections = Math.max(1, options?.maxConnections ?? 5)
+  const endpoint = options?.path ?? "/_nifra/devtools"
+  const enabled = options?.enabled ?? process.env.NODE_ENV === "development"
+  const allowRemote = options?.allowRemote ?? false
+  const allowedOrigins = new Set(options?.allowedOrigins ?? [])
+  const pingIntervalMs = Math.max(1, options?.pingIntervalMs ?? 15_000)
+  const buffer: DevToolsEvent[] = []
+  const controllers = new Set<ReadableStreamDefaultController>()
+  let eventCounter = 0
+  let pingTimer: ReturnType<typeof setInterval> | undefined
+
+  const pingFrame = encoder.encode(": ping\n\n")
+
+  function stopPing(): void {
+    if (pingTimer === undefined) return
+    clearInterval(pingTimer)
+    pingTimer = undefined
+  }
+
+  function startPing(): void {
+    if (pingTimer !== undefined) return
+    pingTimer = setInterval(() => {
+      for (const ctrl of controllers) {
+        try {
+          ctrl.enqueue(pingFrame)
+        } catch {
+          controllers.delete(ctrl)
+        }
+      }
+      if (controllers.size === 0) stopPing()
+    }, pingIntervalMs)
+    // Keep-alive frames must never keep the process alive.
+    ;(pingTimer as { unref?: () => void }).unref?.()
+  }
+
+  function dropController(ctrl: ReadableStreamDefaultController): void {
+    controllers.delete(ctrl)
+    if (controllers.size === 0) stopPing()
+  }
+
+  function broadcast(event: DevToolsEvent): void {
+    const data = encoder.encode(`data: ${JSON.stringify(event)}\n\n`)
+    for (const ctrl of controllers) {
+      try {
+        ctrl.enqueue(data)
+      } catch {
+        dropController(ctrl)
+      }
+    }
+  }
+
+  const adapter: ObservationAdapter = {
+    onEnd(span: NifraSpan) {
+      const method = span.attributes["http.request.method"]
+      const path = span.attributes["url.path"]
+      const status = span.attributes["http.response.status_code"]
+      if (typeof method !== "string" || typeof path !== "string" || typeof status !== "number") {
+        return
+      }
+      if (path === endpoint) return
+
+      const isrStatus = span.attributes["nifra.isr.status"]
+      const bodyBytes = span.attributes["http.response.body.size"]
+      const event: DevToolsEvent = {
+        id: String(++eventCounter),
+        traceId: span.traceId,
+        spanId: span.spanId,
+        parentSpanId: span.parentSpanId,
+        timestamp: span.startTime,
+        method,
+        path,
+        status,
+        durationMs: Math.round((span.durationMs ?? 0) * 100) / 100,
+        isrStatus: typeof isrStatus === "string" ? isrStatus : undefined,
+        bodyBytes: typeof bodyBytes === "number" ? bodyBytes : 0,
+      }
+
+      buffer.push(event)
+      if (buffer.length > maxEvents) buffer.splice(0, buffer.length - maxEvents)
+      broadcast(event)
+    },
+  }
+
+  return definePlugin("devtools", (app) => {
+    // Disabled → wire nothing: no tracing pipeline, no SSE middleware, zero per-request overhead.
+    if (!enabled) return app
+    return app.use(tracing({ adapters: [adapter] })).use({
+      name: "devtools-stream",
+
+      async onRequest(request: Request): Promise<Response | undefined> {
+        // Handle the SSE endpoint
+        const url = new URL(request.url)
+        if (url.pathname === endpoint) {
+          const loopback =
+            url.hostname === "localhost" ||
+            url.hostname === "127.0.0.1" ||
+            url.hostname === "[::1]" ||
+            url.hostname.endsWith(".localhost")
+          if (!allowRemote && !loopback) {
+            return new Response("Nifra DevTools is restricted to loopback hosts", { status: 403 })
+          }
+          const origin = request.headers.get("origin")
+          if (origin !== null && origin !== url.origin && !allowedOrigins.has(origin)) {
+            return new Response("Origin not allowed", { status: 403 })
+          }
+          if (options?.authorize !== undefined && !(await options.authorize(request))) {
+            return new Response("Unauthorized", { status: 401 })
+          }
+          if (controllers.size >= maxConnections) {
+            return new Response("Too many DevTools connections", {
+              status: 503,
+              headers: { "retry-after": "5" },
+            })
+          }
+
+          let activeController: ReadableStreamDefaultController | undefined
+          const stream = new ReadableStream({
+            start(controller) {
+              activeController = controller
+              controllers.add(controller)
+              startPing()
+              // Send buffered events as initial payload
+              for (const evt of buffer) {
+                try {
+                  controller.enqueue(encoder.encode(`data: ${JSON.stringify(evt)}\n\n`))
+                } catch {
+                  break
+                }
+              }
+            },
+            cancel() {
+              if (activeController !== undefined) dropController(activeController)
+            },
+          })
+
+          // Clean up dead controllers on cancel
+          const response = new Response(stream, {
+            headers: {
+              "content-type": "text/event-stream",
+              "cache-control": "no-store",
+              connection: "keep-alive",
+              "content-security-policy": "default-src 'none'",
+              "x-content-type-options": "nosniff",
+              "x-nifra-devtools": "true",
+            },
+          })
+
+          return response
+        }
+
+        return undefined
+      },
+
+      beforeHandle(context) {
+        ;(context as typeof context & { observation?: ActiveObservation }).observation?.addAdapter(
+          adapter,
+        )
+        return undefined
+      },
+    })
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Browser client script
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns a self-contained JavaScript string that creates a floating DevTools
+ * overlay in the browser. Inject via `<script>` tag in dev mode.
+ *
+ * The overlay:
+ * - Connects to `/_nifra/devtools` via EventSource
+ * - Shows a scrolling log of request traces
+ * - Color-coded method badges and status codes
+ * - ISR hit/miss/stale indicators
+ * - Collapsible with a ⚡ toggle button
+ */
+export function devtoolsClientScript(options: DevToolsClientOptions = {}): string {
+  const endpoint = JSON.stringify(options.path ?? "/_nifra/devtools")
+  return `(function(){
+  if(typeof window==='undefined')return;
+  var MAX=50,events=[],open=false;
+
+  // Panel container
+  var panel=document.createElement('div');
+  panel.id='nifra-devtools';
+  panel.style.cssText='position:fixed;bottom:12px;right:12px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;font-size:12px;';
+
+  // Toggle button
+  var btn=document.createElement('button');
+  btn.textContent='⚡';
+  btn.title='Nifra DevTools';
+  btn.style.cssText='width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:rgba(10,10,30,0.9);color:#7c3aed;font-size:16px;cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.4);transition:transform 0.2s;';
+  btn.onmouseenter=function(){btn.style.transform='scale(1.1)'};
+  btn.onmouseleave=function(){btn.style.transform='scale(1)'};
+
+  // Log container
+  var log=document.createElement('div');
+  log.style.cssText='display:none;width:380px;max-height:400px;overflow-y:auto;background:rgba(10,10,30,0.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:8px;margin-bottom:8px;box-shadow:0 8px 32px rgba(0,0,0,0.5);';
+
+  // Header
+  var hdr=document.createElement('div');
+  hdr.style.cssText='display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:6px;';
+  hdr.innerHTML='<span style="color:#7c3aed;font-weight:700;font-size:13px;">⚡ Nifra DevTools</span>';
+  var counter=document.createElement('span');
+  counter.style.cssText='color:#888;font-size:11px;';
+  counter.textContent='0 events';
+  var clearBtn=document.createElement('button');
+  clearBtn.textContent='Clear';
+  clearBtn.style.cssText='background:none;border:1px solid rgba(255,255,255,0.1);color:#888;font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:8px;';
+  clearBtn.onclick=function(){events=[];list.innerHTML='';counter.textContent='0 events';};
+  var right=document.createElement('span');
+  right.appendChild(counter);right.appendChild(clearBtn);
+  hdr.appendChild(right);
+  log.appendChild(hdr);
+
+  var list=document.createElement('div');
+  log.appendChild(list);
+
+  panel.appendChild(log);
+  panel.appendChild(btn);
+
+  btn.onclick=function(){
+    open=!open;
+    log.style.display=open?'block':'none';
+  };
+
+  function methodColor(m){
+    switch(m){case'GET':return'#2ecc71';case'POST':return'#3b82f6';case'PUT':return'#f59e0b';case'DELETE':return'#ef4444';default:return'#888';}
+  }
+  function statusColor(s){
+    if(s<300)return'#2ecc71';if(s<400)return'#3b82f6';if(s<500)return'#f59e0b';return'#ef4444';
+  }
+
+  function addEvent(evt){
+    events.push(evt);
+    if(events.length>MAX)events.shift();
+    counter.textContent=events.length+' events';
+
+    var row=document.createElement('div');
+    row.style.cssText='padding:4px 8px;border-bottom:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;gap:8px;';
+
+    var method=document.createElement('span');
+    method.textContent=evt.method;
+    method.style.cssText='font-weight:700;font-size:10px;padding:1px 6px;border-radius:3px;color:#fff;background:'+methodColor(evt.method)+';min-width:36px;text-align:center;';
+
+    var path=document.createElement('span');
+    path.textContent=evt.path;
+    path.style.cssText='color:#e0e0e0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+
+    var status=document.createElement('span');
+    status.textContent=String(evt.status);
+    status.style.cssText='color:'+statusColor(evt.status)+';font-weight:600;';
+
+    var dur=document.createElement('span');
+    dur.textContent=evt.durationMs+'ms';
+    dur.style.cssText='color:#888;font-size:11px;min-width:50px;text-align:right;';
+
+    row.appendChild(method);row.appendChild(path);row.appendChild(status);row.appendChild(dur);
+
+    if(evt.isrStatus){
+      var isr=document.createElement('span');
+      isr.textContent=evt.isrStatus;
+      var ic=evt.isrStatus==='hit'?'#2ecc71':evt.isrStatus==='stale'?'#f59e0b':'#888';
+      isr.style.cssText='font-size:9px;padding:1px 4px;border-radius:3px;background:'+ic+'22;color:'+ic+';border:1px solid '+ic+'44;';
+      row.appendChild(isr);
+    }
+
+    list.insertBefore(row,list.firstChild);
+    if(list.children.length>MAX)list.removeChild(list.lastChild);
+  }
+
+  // Connect SSE
+  var es=new EventSource(${endpoint});
+  es.onmessage=function(e){
+    try{addEvent(JSON.parse(e.data));}catch(err){}
+  };
+
+  document.body.appendChild(panel);
+})();`
+}