@next-rsc-debug/devtools 0.1.9 → 0.2.0

package/README.md

@@ -2,6 +2,11 @@
 
 React-based DevTools UI for Next RSC Debug.
 
+The dashboard is a normal React page mounted inside your application, not a
+browser extension. There is nothing to install, no permissions to grant, and no
+dependency on a particular browser; events reach it over an SSE route handler
+that you mount yourself.
+
 ## Features
 
 - Event timeline
@@ -21,9 +26,10 @@ pnpm add @next-rsc-debug/devtools
 
 ## Usage
 
-The package ships `"use client"` directives, so you can import it directly into
-an App Router Server Component page. Do **not** wrap it in `next/dynamic` with
-`ssr: false` — that is not permitted inside a Server Component on Next.js 16.
+`DevTools` is a Client Component (it opens an `EventSource`), so you can render
+it directly from an App Router Server Component page. Do **not** wrap it in
+`next/dynamic` with `ssr: false` — that is not permitted inside a Server
+Component on Next.js 16.
 
 ```tsx
 // app/rsc-debug/page.tsx
@@ -47,6 +53,91 @@ export { GET } from "next-rsc-debug/route";
 > and they are not routable, so the page would return 404. Use a path such as
 > `/rsc-debug` instead.
 
+## Client boundaries
+
+The package root has **no** `"use client"` directive, so the import path above
+works identically from a Server or a Client Component. The boundary is per
+module:
+
+| Export                           | Boundary          | Why                               |
+| -------------------------------- | ----------------- | --------------------------------- |
+| `DevTools`                       | `"use client"`    | Owns state and the SSE connection |
+| `FilterControls`                 | `"use client"`    | Button `onClick` handlers         |
+| `useSse`                         | `"use client"`    | Opens an `EventSource`            |
+| `PanelBoundary`                  | `"use client"`    | Class error boundary + Suspense   |
+| `Summary`                        | server-renderable | Reads serializable props only     |
+| `Timeline`                       | server-renderable | `onSelect` is optional            |
+| `Warnings`                       | server-renderable | Reads serializable props only     |
+| `FetchInspector`                 | server-renderable | Renders one event                 |
+| `FILTER_OPTIONS`, `filterEvents` | plain values      | Data and a pure function          |
+
+Because the barrel is not itself a client module, `FILTER_OPTIONS` and
+`filterEvents` are real values rather than client references, so a Server
+Component can read and call them directly.
+
+### Fault isolation
+
+Every panel in `DevTools` is wrapped in a `PanelBoundary`, which composes an
+error boundary with a Suspense boundary:
+
+- a panel that throws renders an inline error in place, and **sibling panels
+  keep working** — a single malformed event cannot white-screen the dashboard
+- a panel that suspends (a future `use()`, or lazy-loaded panel code) shows a
+  skeleton instead of blocking the dashboard
+
+Because error boundaries do not reset on their own, `PanelBoundary` takes a
+`resetKey`; changing it clears the caught error and re-renders. `DevTools`
+derives each key from the inputs that panel depends on, so a panel that failed
+once recovers as soon as the offending data changes.
+
+`PanelBoundary` is exported, so you can use it when composing your own
+dashboard from the presentational components:
+
+```tsx
+<PanelBoundary label="Timeline" resetKey={`${events.length}`}>
+  <Timeline events={events} />
+</PanelBoundary>
+```
+
+### Rendering panels without the live stream
+
+The presentational components can be rendered server-side with events you
+already have, which avoids shipping the SSE client entirely:
+
+```tsx
+import { Summary, Warnings } from "@next-rsc-debug/devtools";
+import { analyzeEvents, getCollector } from "@next-rsc-debug/core";
+
+export default function ReportPage() {
+  const events = getCollector().list();
+  const { warnings } = analyzeEvents(events, { slowThreshold: 500 });
+
+  return (
+    <>
+      <Summary events={events} threshold={500} warnings={warnings} />
+      <Warnings events={events} threshold={500} warnings={warnings} />
+    </>
+  );
+}
+```
+
+Pass `warnings` to both to run the analysis once instead of once per panel;
+omit it and each component computes its own.
+
+### Bounded history
+
+Two independent caps keep the dashboard responsive on long-running sessions:
+
+```tsx
+// Client-side buffer: defaults to core's DEFAULT_MAX_EVENTS (5000)
+const { events } = useSse("/api/debug-events", { maxEvents: 2000 });
+
+// Rendered rows: defaults to 200, showing the most recent
+<Timeline events={events} maxItems={100} />;
+```
+
+When the timeline truncates it says so, rather than silently showing a subset.
+
 ## License
 
 MIT

package/dist/components/DevTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../src/components/DevTools.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAgC,EAChC,gBAAsB,GACvB,EAAE,aAAa,+BA0Df;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../src/components/DevTools.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAgC,EAChC,gBAAsB,GACvB,EAAE,aAAa,+BA0Gf;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/DevTools.js

@@ -4,19 +4,53 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Main DevTools dashboard.
  */
 import { useState, useMemo } from "react";
+import { analyzeEvents } from "@next-rsc-debug/core";
 import { useSse } from "../hooks/useSse.js";
 import { Summary } from "./Summary.js";
 import { Timeline } from "./Timeline.js";
 import { FetchInspector } from "./FetchInspector.js";
 import { Warnings } from "./Warnings.js";
-import { FilterControls, filterEvents } from "./Filters.js";
+import { FilterControls } from "./FilterControls.js";
+import { PanelBoundary } from "./PanelBoundary.js";
+import { filterEvents } from "../lib/filterOptions.js";
 export function DevTools({ url = "/__next-rsc-debug/events", defaultThreshold = 500, }) {
     const { connected, events, error } = useSse(url);
     const [filter, setFilter] = useState("all");
     const [threshold, setThreshold] = useState(defaultThreshold);
     const [selectedId, setSelectedId] = useState(undefined);
-    const filtered = useMemo(() => filterEvents(events, filter, threshold), [events, filter, threshold]);
-    const selectedEvent = useMemo(() => filtered.find((e) => e.id === selectedId) ?? null, [filtered, selectedId]);
-    return (_jsxs("div", { className: "nrpd-dashboard", children: [_jsxs("header", { className: "nrpd-header", children: [_jsx("h1", { children: "Next RSC Debug" }), _jsx("span", { className: `nrpd-connection ${connected ? "connected" : "disconnected"}`, children: connected ? "● Connected" : "○ Disconnected" }), error && _jsx("span", { className: "nrpd-error", children: error })] }), _jsx(Summary, { events: events, threshold: threshold }), _jsx(FilterControls, { activeFilter: filter, onFilterChange: setFilter, threshold: threshold, onThresholdChange: setThreshold }), _jsxs("div", { className: "nrpd-main", children: [_jsxs("div", { className: "nrpd-panel nrpd-panel-timeline", children: [_jsx("h2", { children: "Timeline" }), _jsx(Timeline, { events: filtered, selectedId: selectedId, onSelect: (event) => setSelectedId(event.id) })] }), _jsxs("div", { className: "nrpd-panel nrpd-panel-inspector", children: [_jsx("h2", { children: "Event details" }), _jsx(FetchInspector, { event: selectedEvent })] })] }), _jsx("div", { className: "nrpd-panel nrpd-panel-warnings", children: _jsx(Warnings, { events: events, threshold: threshold }) })] }));
+    // Analyzed once here and shared with both panels. `Summary` and `Warnings`
+    // would otherwise each run the same O(n) pass with identical arguments on
+    // every render.
+    //
+    // These three derivations run in the orchestrator's body, which sits *above*
+    // every panel boundary — an exception here would take down the whole
+    // dashboard regardless of the boundaries below. They read untrusted event
+    // payloads, so they degrade instead of throwing: a bad event costs you that
+    // panel's detail, not the whole UI.
+    const warnings = useMemo(() => {
+        try {
+            return analyzeEvents(events, { slowThreshold: threshold }).warnings;
+        }
+        catch {
+            return [];
+        }
+    }, [events, threshold]);
+    const filtered = useMemo(() => {
+        try {
+            return filterEvents(events, filter, threshold);
+        }
+        catch {
+            return events;
+        }
+    }, [events, filter, threshold]);
+    const selectedEvent = useMemo(() => {
+        try {
+            return filtered.find((e) => e?.id === selectedId) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }, [filtered, selectedId]);
+    return (_jsxs("div", { className: "nrpd-dashboard", children: [_jsxs("header", { className: "nrpd-header", children: [_jsx("h1", { children: "Next RSC Debug" }), _jsx("span", { className: `nrpd-connection ${connected ? "connected" : "disconnected"}`, children: connected ? "● Connected" : "○ Disconnected" }), error && _jsx("span", { className: "nrpd-error", children: error })] }), _jsx(PanelBoundary, { label: "Summary", resetKey: `summary:${events.length}:${threshold}`, children: _jsx(Summary, { events: events, threshold: threshold, warnings: warnings }) }), _jsx(PanelBoundary, { label: "Filters", resetKey: `filters:${filter}:${threshold}`, children: _jsx(FilterControls, { activeFilter: filter, onFilterChange: setFilter, threshold: threshold, onThresholdChange: setThreshold }) }), _jsxs("div", { className: "nrpd-main", children: [_jsxs("div", { className: "nrpd-panel nrpd-panel-timeline", children: [_jsx("h2", { children: "Timeline" }), _jsx(PanelBoundary, { label: "Timeline", resetKey: `timeline:${filtered.length}:${selectedId ?? ""}`, children: _jsx(Timeline, { events: filtered, selectedId: selectedId, onSelect: (event) => setSelectedId(event.id) }) })] }), _jsxs("div", { className: "nrpd-panel nrpd-panel-inspector", children: [_jsx("h2", { children: "Event details" }), _jsx(PanelBoundary, { label: "Event details", resetKey: `inspector:${selectedEvent?.id ?? "none"}`, children: _jsx(FetchInspector, { event: selectedEvent }) })] })] }), _jsx("div", { className: "nrpd-panel nrpd-panel-warnings", children: _jsx(PanelBoundary, { label: "Warnings", resetKey: `warnings:${events.length}:${threshold}`, children: _jsx(Warnings, { events: events, threshold: threshold, warnings: warnings }) }) })] }));
 }
 export default DevTools;

package/dist/components/FetchInspector.d.ts

@@ -1,6 +1,16 @@
+/**
+ * Fetch inspector component.
+ *
+ * No `"use client"` directive: it renders from a single serializable `event`.
+ */
 import type { DebugEvent } from "@next-rsc-debug/core";
 export interface FetchInspectorProps {
     event: DebugEvent | null;
 }
-export declare function FetchInspector({ event }: FetchInspectorProps): import("react").JSX.Element;
+/**
+ * Memoized: the inspector renders from a single `event`, which only changes
+ * when the selection changes. Without `memo` it re-rendered on every streamed
+ * SSE event because the parent re-renders on each flush.
+ */
+export declare const FetchInspector: import("react").MemoExoticComponent<({ event, }: FetchInspectorProps) => import("react").JSX.Element>;
 //# sourceMappingURL=FetchInspector.d.ts.map

package/dist/components/FetchInspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FetchInspector.d.ts","sourceRoot":"","sources":["../../src/components/FetchInspector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAOD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BAkE5D"}
+{"version":3,"file":"FetchInspector.d.ts","sourceRoot":"","sources":["../../src/components/FetchInspector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAOD;;;;GAIG;AACH,eAAO,MAAM,cAAc,mDAExB,mBAAmB,iCAkEpB,CAAC"}

package/dist/components/FetchInspector.js

@@ -1,10 +1,16 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Fetch inspector component.
+ *
+ * No `"use client"` directive: it renders from a single serializable `event`.
  */
-import { useMemo } from "react";
-export function FetchInspector({ event }) {
+import { memo, useMemo } from "react";
+/**
+ * Memoized: the inspector renders from a single `event`, which only changes
+ * when the selection changes. Without `memo` it re-rendered on every streamed
+ * SSE event because the parent re-renders on each flush.
+ */
+export const FetchInspector = memo(function FetchInspector({ event, }) {
     const metadata = (event?.metadata ?? {});
     const rows = useMemo(() => {
         if (!event)
@@ -39,4 +45,4 @@ export function FetchInspector({ event }) {
         ? metadata.warnings
         : [];
     return (_jsxs("div", { className: "nrpd-inspector", children: [_jsx("table", { className: "nrpd-inspector-table", children: _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [_jsx("td", { className: "nrpd-inspector-label", children: row.label }), _jsx("td", { className: "nrpd-inspector-value", children: row.value })] }, row.label))) }) }), warnings.length > 0 && (_jsxs("div", { className: "nrpd-warnings", children: [_jsx("h4", { children: "Warnings" }), _jsx("ul", { children: warnings.map((w, i) => (_jsx("li", { children: typeof w === "string" ? w : (w.message ?? "") }, i))) })] }))] }));
-}
+});

package/dist/components/FilterControls.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Interactive filter controls for the DevTools dashboard.
+ *
+ * This is the only part of the former `Filters.tsx` that needs the client
+ * boundary — the buttons hold `onClick` handlers. The option data and the
+ * `filterEvents` predicate live in `../lib/filterOptions.ts`, which is
+ * server-safe.
+ */
+import { type FilterType } from "../lib/filterOptions.js";
+export interface FilterControlsProps {
+    activeFilter: FilterType;
+    onFilterChange: (filter: FilterType) => void;
+    threshold: number;
+    onThresholdChange: (threshold: number) => void;
+}
+export declare function FilterControls({ activeFilter, onFilterChange, threshold, onThresholdChange, }: FilterControlsProps): import("react").JSX.Element;
+//# sourceMappingURL=FilterControls.d.ts.map

package/dist/components/FilterControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterControls.d.ts","sourceRoot":"","sources":["../../src/components/FilterControls.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,UAAU,CAAC;IACzB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,cAAc,EACd,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,+BA+BrB"}

package/dist/components/FilterControls.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Interactive filter controls for the DevTools dashboard.
+ *
+ * This is the only part of the former `Filters.tsx` that needs the client
+ * boundary — the buttons hold `onClick` handlers. The option data and the
+ * `filterEvents` predicate live in `../lib/filterOptions.ts`, which is
+ * server-safe.
+ */
+import { FILTER_OPTIONS } from "../lib/filterOptions.js";
+export function FilterControls({ activeFilter, onFilterChange, threshold, onThresholdChange, }) {
+    return (_jsxs("div", { className: "nrpd-filters", children: [_jsx("div", { className: "nrpd-filter-group", children: FILTER_OPTIONS.map((opt) => (_jsx("button", { className: `nrpd-filter-btn ${activeFilter === opt.id ? "active" : ""}`, onClick: () => onFilterChange(opt.id), children: opt.label }, opt.id))) }), _jsx("div", { className: "nrpd-threshold", children: _jsxs("label", { children: ["Slow threshold:", _jsx("input", { type: "number", value: threshold, onChange: (e) => onThresholdChange(Number.parseInt(e.target.value, 10) || 500), min: 0, step: 50 }), _jsx("span", { children: "ms" })] }) })] }));
+}

package/dist/components/PanelBoundary.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Panel-level fault isolation.
+ *
+ * A devtools panel is fed by whatever the application under observation
+ * happens to emit, so a single malformed event must not white-screen the whole
+ * dashboard. Each panel is wrapped in its own error boundary plus a Suspense
+ * boundary:
+ *
+ *   - a render error is caught and shown inline, leaving sibling panels alive
+ *   - a suspended child (a future `use()`, or lazy-loaded panel code) shows a
+ *     skeleton instead of blocking the rest of the dashboard
+ *
+ * Error boundaries must be class components; React provides no hook equivalent.
+ */
+import { type ErrorInfo, type ReactNode } from "react";
+export interface PanelBoundaryProps {
+    children: ReactNode;
+    /** Human-readable panel name, shown in the error and skeleton states. */
+    label: string;
+    /**
+     * Changing this value clears a caught error and re-renders the children.
+     * Error boundaries do not reset on their own, so without this a panel that
+     * failed once would stay broken even after the offending data changed. Pass
+     * whatever inputs the panel depends on.
+     */
+    resetKey?: string;
+    /** Escape hatch for logging/reporting; the error is always rendered inline. */
+    onError?: (error: Error, info: ErrorInfo) => void;
+}
+/**
+ * Composes the error boundary *outside* the Suspense boundary so a suspended
+ * child shows the skeleton while a thrown error shows the error state.
+ */
+export declare function PanelBoundary({ children, label, resetKey, onError, }: PanelBoundaryProps): import("react").JSX.Element;
+//# sourceMappingURL=PanelBoundary.d.ts.map

package/dist/components/PanelBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelBoundary.d.ts","sourceRoot":"","sources":["../../src/components/PanelBoundary.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACnD;AAuED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE,kBAAkB,+BAMpB"}

package/dist/components/PanelBoundary.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Panel-level fault isolation.
+ *
+ * A devtools panel is fed by whatever the application under observation
+ * happens to emit, so a single malformed event must not white-screen the whole
+ * dashboard. Each panel is wrapped in its own error boundary plus a Suspense
+ * boundary:
+ *
+ *   - a render error is caught and shown inline, leaving sibling panels alive
+ *   - a suspended child (a future `use()`, or lazy-loaded panel code) shows a
+ *     skeleton instead of blocking the rest of the dashboard
+ *
+ * Error boundaries must be class components; React provides no hook equivalent.
+ */
+import { Component, Suspense } from "react";
+class PanelErrorBoundary extends Component {
+    state = { error: null, resetKey: undefined };
+    /**
+     * Where the caught error is actually stored. This runs ahead of the re-render
+     * that replaces the children, which is why it is preferred over setting state
+     * inside `componentDidCatch`.
+     */
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    static getDerivedStateFromProps(props, state) {
+        if (props.resetKey !== state.resetKey) {
+            return { error: null, resetKey: props.resetKey };
+        }
+        return null;
+    }
+    componentDidCatch(error, info) {
+        this.props.onError?.(error, info);
+    }
+    render() {
+        if (this.state.error) {
+            return (_jsx(PanelErrorState, { label: this.props.label, error: this.state.error }));
+        }
+        return this.props.children;
+    }
+}
+function PanelErrorState({ label, error }) {
+    return (_jsxs("div", { className: "nrpd-panel-error", role: "alert", children: [_jsxs("strong", { children: [label, " failed to render."] }), _jsx("span", { className: "nrpd-panel-error-message", children: error.message })] }));
+}
+function PanelSkeleton({ label }) {
+    return (_jsxs("div", { className: "nrpd-skeleton", "aria-busy": "true", "aria-label": `Loading ${label}`, children: [_jsx("div", { className: "nrpd-skeleton-bar" }), _jsx("div", { className: "nrpd-skeleton-bar" }), _jsx("div", { className: "nrpd-skeleton-bar" })] }));
+}
+/**
+ * Composes the error boundary *outside* the Suspense boundary so a suspended
+ * child shows the skeleton while a thrown error shows the error state.
+ */
+export function PanelBoundary({ children, label, resetKey, onError, }) {
+    return (_jsx(PanelErrorBoundary, { label: label, resetKey: resetKey, onError: onError, children: _jsx(Suspense, { fallback: _jsx(PanelSkeleton, { label: label }), children: children }) }));
+}

package/dist/components/Summary.d.ts

@@ -1,7 +1,20 @@
-import type { DebugEvent } from "@next-rsc-debug/core";
+/**
+ * Summary cards for the DevTools dashboard.
+ *
+ * No `"use client"` directive: this component only reads serializable props
+ * and uses `useMemo` as a render-time optimization, so it can be rendered by a
+ * Server Component. `DevTools` (a client module) imports it just fine.
+ */
+import type { DebugEvent, Warning } from "@next-rsc-debug/core";
 export interface SummaryProps {
     events: DebugEvent[];
     threshold: number;
+    /**
+     * Pre-computed warnings from `analyzeEvents`. Supply this when several
+     * panels share one analysis so the (O(n), URL-normalizing) pass is not
+     * repeated. When omitted the component computes its own.
+     */
+    warnings?: Warning[];
 }
-export declare function Summary({ events, threshold }: SummaryProps): import("react").JSX.Element;
+export declare function Summary({ events, threshold, warnings }: SummaryProps): import("react").JSX.Element;
 //# sourceMappingURL=Summary.d.ts.map

package/dist/components/Summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../src/components/Summary.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,YAAY,+BAsC1D"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../src/components/Summary.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,+BA2CpE"}

package/dist/components/Summary.js

@@ -1,19 +1,22 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Summary cards for the DevTools dashboard.
+ *
+ * No `"use client"` directive: this component only reads serializable props
+ * and uses `useMemo` as a render-time optimization, so it can be rendered by a
+ * Server Component. `DevTools` (a client module) imports it just fine.
  */
 import { useMemo } from "react";
 import { analyzeEvents } from "@next-rsc-debug/core";
-export function Summary({ events, threshold }) {
-    const { warnings } = useMemo(() => analyzeEvents(events, { slowThreshold: threshold }), [events, threshold]);
+export function Summary({ events, threshold, warnings }) {
+    const resolvedWarnings = useMemo(() => warnings ?? analyzeEvents(events, { slowThreshold: threshold }).warnings, [warnings, events, threshold]);
     const stats = useMemo(() => {
         const fetches = events.filter((e) => e.type === "fetch:start" || e.type === "fetch:end").length;
-        const slow = warnings.filter((w) => w.type === "slow-request").length;
-        const dupes = warnings.filter((w) => w.type === "duplicate-request").length;
+        const slow = resolvedWarnings.filter((w) => w.type === "slow-request").length;
+        const dupes = resolvedWarnings.filter((w) => w.type === "duplicate-request").length;
         const errors = events.filter((e) => e.type === "error").length;
         return { total: events.length, fetches, slow, dupes, errors };
-    }, [events, warnings]);
+    }, [events, resolvedWarnings]);
     const cards = [
         { label: "Events", value: stats.total, color: "#60a5fa" },
         { label: "Fetches", value: stats.fetches, color: "#34d399" },

package/dist/components/Timeline.d.ts

@@ -1,8 +1,21 @@
+/**
+ * Event timeline component.
+ *
+ * No `"use client"` directive: it renders from serializable props. `onSelect`
+ * is optional, so a Server Component may render it read-only; `DevTools`
+ * supplies the handler from the client.
+ */
 import type { DebugEvent } from "@next-rsc-debug/core";
 export interface TimelineProps {
     events: DebugEvent[];
     selectedId?: string;
     onSelect?: (event: DebugEvent) => void;
+    /**
+     * Maximum rows rendered at once. The event array is bounded (see `useSse`),
+     * but the DOM is not: a few thousand rows is enough to make the panel
+     * unusable, so only the most recent are drawn and the rest are summarised.
+     */
+    maxItems?: number;
 }
-export declare function Timeline({ events, selectedId, onSelect }: TimelineProps): import("react").JSX.Element;
+export declare function Timeline({ events, selectedId, onSelect, maxItems, }: TimelineProps): import("react").JSX.Element;
 //# sourceMappingURL=Timeline.d.ts.map

package/dist/components/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Timeline.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAUvD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AA2CD,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAyCvE"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Timeline.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAUvD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6CD,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAA4B,GAC7B,EAAE,aAAa,+BAoDf"}

package/dist/components/Timeline.js

@@ -1,10 +1,14 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Event timeline component.
+ *
+ * No `"use client"` directive: it renders from serializable props. `onSelect`
+ * is optional, so a Server Component may render it read-only; `DevTools`
+ * supplies the handler from the client.
  */
 import { useMemo } from "react";
 import { isNavigationEventType, isRscEventType, isFetchEventType, isCacheEventType, isActionEventType, isErrorEventType, } from "@next-rsc-debug/core";
+const DEFAULT_MAX_ITEMS = 200;
 function getEventIcon(type) {
     if (isNavigationEventType(type))
         return "🧭";
@@ -50,14 +54,18 @@ function getEventLabel(event) {
             return event.type;
     }
 }
-export function Timeline({ events, selectedId, onSelect }) {
+export function Timeline({ events, selectedId, onSelect, maxItems = DEFAULT_MAX_ITEMS, }) {
     const sorted = useMemo(() => [...events].sort((a, b) => a.timestamp - b.timestamp), [events]);
     if (sorted.length === 0) {
         return (_jsx("div", { className: "nrpd-empty", children: _jsx("span", { children: "No events yet." }) }));
     }
-    return (_jsx("div", { className: "nrpd-timeline", children: sorted.map((event) => {
-            const isSelected = event.id === selectedId;
-            const duration = event.duration !== undefined ? ` (${event.duration}ms)` : "";
-            return (_jsxs("div", { className: `nrpd-timeline-item ${isSelected ? "selected" : ""}`, onClick: () => onSelect?.(event), children: [_jsx("span", { className: "nrpd-timeline-icon", children: getEventIcon(event.type) }), _jsxs("span", { className: "nrpd-timeline-label", children: [getEventLabel(event), duration] }), _jsx("span", { className: "nrpd-timestamp", children: new Date(event.timestamp).toLocaleTimeString() })] }, event.id));
-        }) }));
+    // Keep the newest rows: this is a live tail, and the most recent activity is
+    // what a developer is looking at.
+    const visible = sorted.slice(-maxItems);
+    const hiddenCount = sorted.length - visible.length;
+    return (_jsxs("div", { className: "nrpd-timeline", children: [hiddenCount > 0 && (_jsxs("div", { className: "nrpd-timeline-truncated", children: ["Showing the ", visible.length, " most recent of ", sorted.length, " events (", hiddenCount, " older not rendered)."] })), visible.map((event) => {
+                const isSelected = event.id === selectedId;
+                const duration = event.duration !== undefined ? ` (${event.duration}ms)` : "";
+                return (_jsxs("div", { className: `nrpd-timeline-item ${isSelected ? "selected" : ""}`, onClick: () => onSelect?.(event), children: [_jsx("span", { className: "nrpd-timeline-icon", children: getEventIcon(event.type) }), _jsxs("span", { className: "nrpd-timeline-label", children: [getEventLabel(event), duration] }), _jsx("span", { className: "nrpd-timestamp", children: new Date(event.timestamp).toLocaleTimeString() })] }, event.id));
+            })] }));
 }

package/dist/components/Warnings.d.ts

@@ -1,7 +1,17 @@
-import type { DebugEvent } from "@next-rsc-debug/core";
+/**
+ * Warnings panel.
+ *
+ * No `"use client"` directive — see the note in `Summary.tsx`.
+ */
+import type { DebugEvent, Warning } from "@next-rsc-debug/core";
 export interface WarningsProps {
     events: DebugEvent[];
     threshold?: number;
+    /**
+     * Pre-computed warnings from `analyzeEvents`. Supply this to share one
+     * analysis across panels; when omitted the component computes its own.
+     */
+    warnings?: Warning[];
 }
-export declare function Warnings({ events, threshold }: WarningsProps): import("react").JSX.Element;
+export declare function Warnings({ events, threshold, warnings }: WarningsProps): import("react").JSX.Element;
 //# sourceMappingURL=Warnings.d.ts.map

package/dist/components/Warnings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Warnings.d.ts","sourceRoot":"","sources":["../../src/components/Warnings.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,+BA8B5D"}
+{"version":3,"file":"Warnings.d.ts","sourceRoot":"","sources":["../../src/components/Warnings.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,+BA+BtE"}

package/dist/components/Warnings.js

@@ -1,14 +1,15 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Warnings panel.
+ *
+ * No `"use client"` directive — see the note in `Summary.tsx`.
  */
 import { useMemo } from "react";
 import { analyzeEvents } from "@next-rsc-debug/core";
-export function Warnings({ events, threshold }) {
-    const { warnings } = useMemo(() => analyzeEvents(events, { slowThreshold: threshold }), [events, threshold]);
-    if (warnings.length === 0) {
+export function Warnings({ events, threshold, warnings }) {
+    const resolvedWarnings = useMemo(() => warnings ?? analyzeEvents(events, { slowThreshold: threshold }).warnings, [warnings, events, threshold]);
+    if (resolvedWarnings.length === 0) {
         return (_jsxs("div", { className: "nrpd-panel-body", children: [_jsx("h2", { children: "Warnings" }), _jsx("div", { className: "nrpd-empty", children: _jsx("span", { children: "No warnings detected." }) })] }));
     }
-    return (_jsxs("div", { className: "nrpd-panel-body", children: [_jsxs("h2", { children: ["Warnings (", warnings.length, ")"] }), _jsx("ul", { className: "nrpd-warning-list", children: warnings.map((w) => (_jsxs("li", { className: `nrpd-warning nrpd-warning-${w.type}`, children: [_jsx("span", { className: "nrpd-warning-type", children: w.type }), _jsx("span", { className: "nrpd-warning-message", children: w.message })] }, w.id))) })] }));
+    return (_jsxs("div", { className: "nrpd-panel-body", children: [_jsxs("h2", { children: ["Warnings (", resolvedWarnings.length, ")"] }), _jsx("ul", { className: "nrpd-warning-list", children: resolvedWarnings.map((w) => (_jsxs("li", { className: `nrpd-warning nrpd-warning-${w.type}`, children: [_jsx("span", { className: "nrpd-warning-type", children: w.type }), _jsx("span", { className: "nrpd-warning-message", children: w.message })] }, w.id))) })] }));
 }

package/dist/hooks/useSse.d.ts

@@ -4,5 +4,14 @@ export interface SseState {
     events: DebugEvent[];
     error: string | null;
 }
-export declare function useSse(url: string): SseState;
+export interface UseSseOptions {
+    /**
+     * Upper bound on events retained in the browser. The server already evicts
+     * beyond its own ring buffer, but the client would otherwise accumulate every
+     * streamed event for the lifetime of the page. Defaults to the same limit so
+     * a snapshot is never truncated on arrival.
+     */
+    maxEvents?: number;
+}
+export declare function useSse(url: string, options?: UseSseOptions): SseState;
 //# sourceMappingURL=useSse.d.ts.map

package/dist/hooks/useSse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSse.d.ts","sourceRoot":"","sources":["../../src/hooks/useSse.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAiE5C"}
+{"version":3,"file":"useSse.d.ts","sourceRoot":"","sources":["../../src/hooks/useSse.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,QAAQ,CAwHzE"}

package/dist/hooks/useSse.js

@@ -2,13 +2,60 @@
 /**
  * SSE client hook for live event streaming.
  */
-import { useState, useEffect, useRef } from "react";
-export function useSse(url) {
+import { useState, useEffect, useRef, useCallback } from "react";
+import { DEFAULT_MAX_EVENTS } from "@next-rsc-debug/core";
+export function useSse(url, options = {}) {
+    const maxEvents = options.maxEvents ?? DEFAULT_MAX_EVENTS;
     const [connected, setConnected] = useState(false);
     const [events, setEvents] = useState([]);
     const [error, setError] = useState(null);
-    const esRef = useRef(null);
     const eventsRef = useRef([]);
+    const pendingRef = useRef([]);
+    const cancelRef = useRef(null);
+    // Keep the latest limit in a ref so changing it does not tear down and
+    // re-establish the EventSource connection.
+    const maxEventsRef = useRef(maxEvents);
+    maxEventsRef.current = maxEvents;
+    /**
+     * SSE delivers events one message at a time. Committing each one to state
+     * immediately gives every message a fresh array identity, which invalidates
+     * every downstream `useMemo` and re-renders the whole dashboard. Buffering
+     * pending events and flushing once per frame collapses a burst into a single
+     * render, keeping the analysis cost linear in the number of events rather
+     * than quadratic.
+     */
+    const flush = useCallback(() => {
+        cancelRef.current = null;
+        if (pendingRef.current.length === 0) {
+            return;
+        }
+        const merged = [...eventsRef.current, ...pendingRef.current];
+        // Drop the oldest rather than refusing new events: for a live tail, the
+        // most recent activity is the useful part.
+        eventsRef.current =
+            merged.length > maxEventsRef.current
+                ? merged.slice(merged.length - maxEventsRef.current)
+                : merged;
+        pendingRef.current = [];
+        setEvents(eventsRef.current);
+    }, []);
+    const scheduleFlush = useCallback(() => {
+        if (cancelRef.current !== null) {
+            return;
+        }
+        if (typeof requestAnimationFrame === "function") {
+            const handle = requestAnimationFrame(flush);
+            cancelRef.current = () => cancelAnimationFrame(handle);
+        }
+        else {
+            const handle = setTimeout(flush, 0);
+            cancelRef.current = () => clearTimeout(handle);
+        }
+    }, [flush]);
+    const cancelFlush = useCallback(() => {
+        cancelRef.current?.();
+        cancelRef.current = null;
+    }, []);
     useEffect(() => {
         if (typeof window === "undefined") {
             return;
@@ -21,7 +68,6 @@ export function useSse(url) {
             setError(err instanceof Error ? err.message : "Failed to connect");
             return;
         }
-        esRef.current = es;
         es.onopen = () => {
             setConnected(true);
             setError(null);
@@ -34,8 +80,12 @@ export function useSse(url) {
             try {
                 const data = JSON.parse(e.data);
                 if (data.events) {
-                    eventsRef.current = data.events;
-                    setEvents(data.events);
+                    // A snapshot is authoritative and replaces buffered history, so any
+                    // queued events are dropped rather than appended out of order.
+                    cancelFlush();
+                    pendingRef.current = [];
+                    eventsRef.current = data.events.slice(-maxEventsRef.current);
+                    setEvents(eventsRef.current);
                 }
             }
             catch {
@@ -45,8 +95,8 @@ export function useSse(url) {
         es.addEventListener("event", (e) => {
             try {
                 const event = JSON.parse(e.data);
-                eventsRef.current = [...eventsRef.current, event];
-                setEvents(eventsRef.current);
+                pendingRef.current = [...pendingRef.current, event];
+                scheduleFlush();
             }
             catch {
                 // Ignore parse errors.
@@ -57,8 +107,12 @@ export function useSse(url) {
         });
         return () => {
             es.close();
+            // Drain anything still buffered so a url change (or unmount) never
+            // silently drops events that already arrived.
+            cancelFlush();
+            flush();
             setConnected(false);
         };
-    }, [url]);
+    }, [url, flush, scheduleFlush, cancelFlush]);
     return { connected, events, error };
 }

package/dist/index.d.ts

@@ -1,11 +1,25 @@
 /**
  * Public API for @next-rsc-debug/devtools.
+ *
+ * This barrel deliberately carries NO `"use client"` directive. Previously it
+ * did, which meant every non-component export below (`FILTER_OPTIONS`,
+ * `filterEvents`) reached a Server Component as a *client reference* rather
+ * than a real value — `FILTER_OPTIONS.map(...)` would have thrown.
+ *
+ * The boundary now lives on the individual modules that need it:
+ *   - `DevTools`, `FilterControls`, `useSse`, `PanelBoundary` → "use client"
+ *   - `Summary`, `Timeline`, `Warnings`, `FetchInspector` → server-renderable
+ *
+ * Re-exporting a client component from this server-safe module is the normal
+ * pattern, so the single import path still works for both runtimes.
  */
 export { DevTools, type DevToolsProps } from "./components/DevTools.js";
 export { Timeline, type TimelineProps } from "./components/Timeline.js";
 export { FetchInspector, type FetchInspectorProps, } from "./components/FetchInspector.js";
 export { Warnings, type WarningsProps } from "./components/Warnings.js";
 export { Summary, type SummaryProps } from "./components/Summary.js";
-export { FilterControls, filterEvents, FILTER_OPTIONS, type FilterType, type FilterControlsProps, } from "./components/Filters.js";
+export { FilterControls, type FilterControlsProps, } from "./components/FilterControls.js";
+export { PanelBoundary, type PanelBoundaryProps, } from "./components/PanelBoundary.js";
+export { filterEvents, FILTER_OPTIONS, type FilterType, type FilterOption, } from "./lib/filterOptions.js";
 export { useSse, type SseState } from "./hooks/useSse.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,cAAc,EACd,YAAY,EACZ,cAAc,EACd,KAAK,UAAU,EACf,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,YAAY,EACZ,cAAc,EACd,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,11 +1,24 @@
-"use client";
 /**
  * Public API for @next-rsc-debug/devtools.
+ *
+ * This barrel deliberately carries NO `"use client"` directive. Previously it
+ * did, which meant every non-component export below (`FILTER_OPTIONS`,
+ * `filterEvents`) reached a Server Component as a *client reference* rather
+ * than a real value — `FILTER_OPTIONS.map(...)` would have thrown.
+ *
+ * The boundary now lives on the individual modules that need it:
+ *   - `DevTools`, `FilterControls`, `useSse`, `PanelBoundary` → "use client"
+ *   - `Summary`, `Timeline`, `Warnings`, `FetchInspector` → server-renderable
+ *
+ * Re-exporting a client component from this server-safe module is the normal
+ * pattern, so the single import path still works for both runtimes.
  */
 export { DevTools } from "./components/DevTools.js";
 export { Timeline } from "./components/Timeline.js";
 export { FetchInspector, } from "./components/FetchInspector.js";
 export { Warnings } from "./components/Warnings.js";
 export { Summary } from "./components/Summary.js";
-export { FilterControls, filterEvents, FILTER_OPTIONS, } from "./components/Filters.js";
+export { FilterControls, } from "./components/FilterControls.js";
+export { PanelBoundary, } from "./components/PanelBoundary.js";
+export { filterEvents, FILTER_OPTIONS, } from "./lib/filterOptions.js";
 export { useSse } from "./hooks/useSse.js";

package/dist/lib/filterOptions.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Filter definitions and the pure event-filtering predicate.
+ *
+ * Deliberately NOT a `"use client"` module: these are plain data and a pure
+ * function, so a Server Component can import and call them directly. Keeping
+ * them out of the client boundary is what lets `index.ts` re-export them as
+ * real values instead of client references.
+ */
+import type { DebugEvent } from "@next-rsc-debug/core";
+export type FilterType = "all" | "navigation" | "rsc" | "fetch" | "cache" | "action" | "error" | "slow" | "errors";
+export interface FilterOption {
+    id: FilterType;
+    label: string;
+}
+export declare const FILTER_OPTIONS: FilterOption[];
+export declare function filterEvents(events: DebugEvent[], filter: FilterType, threshold: number): DebugEvent[];
+//# sourceMappingURL=filterOptions.d.ts.map

package/dist/lib/filterOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterOptions.d.ts","sourceRoot":"","sources":["../../src/lib/filterOptions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,YAAY,GACZ,KAAK,GACL,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,UAAU,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,YAAY,EAUxC,CAAC;AAEF,wBAAgB,YAAY,CAC1B,MAAM,EAAE,UAAU,EAAE,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,GAChB,UAAU,EAAE,CAiCd"}

package/dist/{components/Filters.js → lib/filterOptions.js}

@@ -1,5 +1,11 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Filter definitions and the pure event-filtering predicate.
+ *
+ * Deliberately NOT a `"use client"` module: these are plain data and a pure
+ * function, so a Server Component can import and call them directly. Keeping
+ * them out of the client boundary is what lets `index.ts` re-export them as
+ * real values instead of client references.
+ */
 export const FILTER_OPTIONS = [
     { id: "all", label: "All" },
     { id: "navigation", label: "Navigation" },
@@ -40,6 +46,3 @@ export function filterEvents(events, filter, threshold) {
         }
     });
 }
-export function FilterControls({ activeFilter, onFilterChange, threshold, onThresholdChange, }) {
-    return (_jsxs("div", { className: "nrpd-filters", children: [_jsx("div", { className: "nrpd-filter-group", children: FILTER_OPTIONS.map((opt) => (_jsx("button", { className: `nrpd-filter-btn ${activeFilter === opt.id ? "active" : ""}`, onClick: () => onFilterChange(opt.id), children: opt.label }, opt.id))) }), _jsx("div", { className: "nrpd-threshold", children: _jsxs("label", { children: ["Slow threshold:", _jsx("input", { type: "number", value: threshold, onChange: (e) => onThresholdChange(Number.parseInt(e.target.value, 10) || 500), min: 0, step: 50 }), _jsx("span", { children: "ms" })] }) })] }));
-}

package/dist/styles.css

@@ -187,6 +187,15 @@
   background: #1a1f29;
 }
 
+.nrpd-timeline-truncated {
+  padding: 6px 8px;
+  margin-bottom: 6px;
+  border-radius: 4px;
+  background: #1a1f29;
+  color: #6e7681;
+  font-size: 11px;
+}
+
 .nrpd-timeline-item.selected {
   background: #1e3a5f;
 }
@@ -258,6 +267,65 @@
   flex: 1;
 }
 
+/* Panel fault isolation: shown in place of a panel that threw. */
+.nrpd-panel-error {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid #7f1d1d;
+  border-radius: 6px;
+  background: #2d1416;
+  color: #f87171;
+  font-size: 12px;
+}
+
+.nrpd-panel-error-message {
+  color: #fca5a5;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  word-break: break-word;
+}
+
+/* Shown in place of a panel that suspended. */
+.nrpd-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.nrpd-skeleton-bar {
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #1a1f29 25%, #232b36 50%, #1a1f29 75%);
+  background-size: 200% 100%;
+  animation: nrpd-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+.nrpd-skeleton-bar:nth-child(2) {
+  width: 85%;
+}
+
+.nrpd-skeleton-bar:nth-child(3) {
+  width: 65%;
+}
+
+@keyframes nrpd-skeleton-pulse {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nrpd-skeleton-bar {
+    animation: none;
+  }
+}
+
 @media (max-width: 768px) {
   .nrpd-main {
     grid-template-columns: 1fr;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@next-rsc-debug/devtools",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "React-based DevTools UI for Next RSC Debug",
   "author": "Samith Mendis",
   "license": "MIT",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -20,10 +23,11 @@
   "scripts": {
     "build": "tsc -p tsconfig.json && node ./scripts/copy-css.mjs",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "vitest run --config vitest.config.ts"
+    "test": "vitest run --config vitest.config.ts",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
   },
   "dependencies": {
-    "@next-rsc-debug/core": "0.1.9"
+    "@next-rsc-debug/core": "0.2.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/components/Filters.d.ts

@@ -1,19 +0,0 @@
-/**
- * Filter controls for the DevTools dashboard.
- */
-import type { DebugEvent } from "@next-rsc-debug/core";
-export type FilterType = "all" | "navigation" | "rsc" | "fetch" | "cache" | "action" | "error" | "slow" | "errors";
-export interface FilterOption {
-    id: FilterType;
-    label: string;
-}
-export declare const FILTER_OPTIONS: FilterOption[];
-export declare function filterEvents(events: DebugEvent[], filter: FilterType, threshold: number): DebugEvent[];
-export interface FilterControlsProps {
-    activeFilter: FilterType;
-    onFilterChange: (filter: FilterType) => void;
-    threshold: number;
-    onThresholdChange: (threshold: number) => void;
-}
-export declare function FilterControls({ activeFilter, onFilterChange, threshold, onThresholdChange, }: FilterControlsProps): import("react").JSX.Element;
-//# sourceMappingURL=Filters.d.ts.map

package/dist/components/Filters.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/components/Filters.tsx"],"names":[],"mappings":"AAEA;;GAEG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,YAAY,GACZ,KAAK,GACL,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,UAAU,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,YAAY,EAUxC,CAAC;AAEF,wBAAgB,YAAY,CAC1B,MAAM,EAAE,UAAU,EAAE,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,GAChB,UAAU,EAAE,CAiCd;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,UAAU,CAAC;IACzB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,cAAc,EACd,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,+BA+BrB"}