@next-rsc-debug/devtools 0.1.3

package/README.md

@@ -0,0 +1,52 @@
+# @next-rsc-debug/devtools
+
+React-based DevTools UI for Next RSC Debug.
+
+## Features
+
+- Event timeline
+- Request list
+- Fetch inspector
+- Warnings panel
+- Connection status indicator
+- Event details
+- Basic filtering (All, Navigation, RSC, Fetch, Cache, Actions, Errors, Slow only, Errors only)
+- Live SSE updates
+
+## Installation
+
+```bash
+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.
+
+```tsx
+// app/rsc-debug/page.tsx
+import { DevTools } from "@next-rsc-debug/devtools";
+import "@next-rsc-debug/devtools/styles.css";
+
+export default function DebugPage() {
+  return <DevTools url="/api/debug-events" />;
+}
+```
+
+Pair it with the built-in events endpoint:
+
+```ts
+// app/api/debug-events/route.ts
+export { GET } from "next-rsc-debug/route";
+```
+
+> Avoid naming the page folder with a leading underscore (for example
+> `__next-rsc-debug`). App Router treats underscore-prefixed folders as private
+> and they are not routable, so the page would return 404. Use a path such as
+> `/rsc-debug` instead.
+
+## License
+
+MIT

package/dist/components/DevTools.d.ts

@@ -0,0 +1,7 @@
+export interface DevToolsProps {
+    url?: string;
+    defaultThreshold?: number;
+}
+export declare function DevTools({ url, defaultThreshold, }: DevToolsProps): import("react").JSX.Element;
+export default DevTools;
+//# sourceMappingURL=DevTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../src/components/DevTools.tsx"],"names":[],"mappings":"AAeA,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,+BA2Df;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/DevTools.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Main DevTools dashboard.
+ */
+import { useState, useMemo } from "react";
+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";
+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 })] })] }), _jsxs("div", { className: "nrpd-panel nrpd-panel-warnings", children: [_jsx("h2", { children: "Warnings" }), _jsx(Warnings, { events: events, threshold: threshold })] })] }));
+}
+export default DevTools;

package/dist/components/FetchInspector.d.ts

@@ -0,0 +1,6 @@
+import type { DebugEvent } from "@next-rsc-debug/core";
+export interface FetchInspectorProps {
+    event: DebugEvent | null;
+}
+export declare function FetchInspector({ event }: FetchInspectorProps): import("react").JSX.Element;
+//# sourceMappingURL=FetchInspector.d.ts.map

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

@@ -0,0 +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,+BAmE5D"}

package/dist/components/FetchInspector.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Fetch inspector component.
+ */
+import { useMemo } from "react";
+export function FetchInspector({ event }) {
+    const metadata = (event?.metadata ?? {});
+    const rows = useMemo(() => {
+        if (!event)
+            return [];
+        return [
+            { label: "Method", value: String(metadata.method ?? "—") },
+            { label: "URL", value: String(metadata.url ?? "—") },
+            { label: "Status", value: String(metadata.status ?? "—") },
+            {
+                label: "Duration",
+                value: metadata.duration !== undefined ? `${metadata.duration}ms` : "—",
+            },
+            { label: "Timestamp", value: new Date(event.timestamp).toISOString() },
+            { label: "Request ID", value: String(event.requestId ?? "—") },
+            { label: "Parent ID", value: String(event.parentId ?? "—") },
+            {
+                label: "Content length",
+                value: metadata.contentLength !== undefined
+                    ? `${metadata.contentLength} bytes`
+                    : "—",
+            },
+            {
+                label: "Confidence",
+                value: String(metadata.confidence ?? "observed"),
+            },
+        ];
+    }, [event, metadata]);
+    if (!event) {
+        return (_jsx("div", { className: "nrpd-empty", children: _jsx("span", { children: "Select an event to inspect." }) }));
+    }
+    const warnings = Array.isArray(metadata.warnings)
+        ? metadata.warnings
+        : [];
+    return (_jsxs("div", { className: "nrpd-inspector", children: [_jsx("h3", { children: "Event details" }), _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/Filters.d.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/components/Filters.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,sBAAsB,CAAC;AAEvE,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"}

package/dist/components/Filters.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FILTER_OPTIONS = [
+    { id: "all", label: "All" },
+    { id: "navigation", label: "Navigation" },
+    { id: "rsc", label: "RSC" },
+    { id: "fetch", label: "Fetch" },
+    { id: "cache", label: "Cache" },
+    { id: "action", label: "Actions" },
+    { id: "error", label: "Errors" },
+    { id: "slow", label: "Slow only" },
+    { id: "errors", label: "Errors only" },
+];
+export function filterEvents(events, filter, threshold) {
+    if (filter === "all") {
+        return events;
+    }
+    return events.filter((event) => {
+        switch (filter) {
+            case "navigation":
+                return (event.type === "navigation:start" || event.type === "navigation:end");
+            case "rsc":
+                return event.type === "rsc:start" || event.type === "rsc:end";
+            case "fetch":
+                return event.type === "fetch:start" || event.type === "fetch:end";
+            case "cache":
+                return (event.type === "cache:hit" ||
+                    event.type === "cache:miss" ||
+                    event.type === "cache:invalidate");
+            case "action":
+                return event.type === "action:start" || event.type === "action:end";
+            case "error":
+                return event.type === "error";
+            case "slow":
+                return (event.duration ?? 0) >= threshold;
+            case "errors":
+                return event.type === "error";
+            default:
+                return true;
+        }
+    });
+}
+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/Summary.d.ts

@@ -0,0 +1,7 @@
+import type { DebugEvent } from "@next-rsc-debug/core";
+export interface SummaryProps {
+    events: DebugEvent[];
+    threshold: number;
+}
+export declare function Summary({ events, threshold }: SummaryProps): import("react").JSX.Element;
+//# sourceMappingURL=Summary.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Summary.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Summary cards for the DevTools dashboard.
+ */
+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]);
+    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 errors = events.filter((e) => e.type === "error").length;
+        return { total: events.length, fetches, slow, dupes, errors };
+    }, [events, warnings]);
+    const cards = [
+        { label: "Events", value: stats.total, color: "#60a5fa" },
+        { label: "Fetches", value: stats.fetches, color: "#34d399" },
+        { label: "Slow", value: stats.slow, color: "#fbbf24" },
+        { label: "Duplicates", value: stats.dupes, color: "#f87171" },
+        { label: "Errors", value: stats.errors, color: "#ef4444" },
+    ];
+    return (_jsx("div", { className: "nrpd-summary", children: cards.map((card) => (_jsxs("div", { className: "nrpd-summary-card", children: [_jsx("span", { className: "nrpd-summary-dot", style: { background: card.color } }), _jsx("span", { className: "nrpd-summary-value", children: card.value }), _jsx("span", { className: "nrpd-summary-label", children: card.label })] }, card.label))) }));
+}

package/dist/components/Timeline.d.ts

@@ -0,0 +1,8 @@
+import type { DebugEvent } from "@next-rsc-debug/core";
+export interface TimelineProps {
+    events: DebugEvent[];
+    selectedId?: string;
+    onSelect?: (event: DebugEvent) => void;
+}
+export declare function Timeline({ events, selectedId, onSelect }: TimelineProps): import("react").JSX.Element;
+//# sourceMappingURL=Timeline.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Timeline.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Event timeline component.
+ */
+import { useMemo } from "react";
+import { isNavigationEventType, isRscEventType, isFetchEventType, isCacheEventType, isActionEventType, isErrorEventType, } from "@next-rsc-debug/core";
+function getEventIcon(type) {
+    if (isNavigationEventType(type))
+        return "🧭";
+    if (isRscEventType(type))
+        return "📦";
+    if (isFetchEventType(type))
+        return "🌐";
+    if (isCacheEventType(type))
+        return "💾";
+    if (isActionEventType(type))
+        return "⚡";
+    if (isErrorEventType(type))
+        return "❌";
+    return "•";
+}
+function getEventLabel(event) {
+    switch (event.type) {
+        case "navigation:start":
+            return `Navigation start`;
+        case "navigation:end":
+            return `Navigation end`;
+        case "rsc:start":
+            return `RSC request${event.metadata?.route ? ` → ${event.metadata.route}` : ""}`;
+        case "rsc:end":
+            return `RSC response${event.metadata?.route ? ` → ${event.metadata.route}` : ""}`;
+        case "fetch:start":
+            return `fetch ${event.metadata?.method ?? "GET"} ${event.metadata?.url ?? ""}`;
+        case "fetch:end":
+            return `fetch ${event.metadata?.method ?? "GET"} ${event.metadata?.url ?? ""} ${event.metadata?.status ?? ""}`;
+        case "cache:hit":
+            return `Cache HIT: ${event.metadata?.key ?? ""}`;
+        case "cache:miss":
+            return `Cache MISS: ${event.metadata?.key ?? ""}`;
+        case "cache:invalidate":
+            return `Cache INVALIDATE: ${event.metadata?.key ?? ""}`;
+        case "action:start":
+            return `Action start: ${event.metadata?.name ?? ""}`;
+        case "action:end":
+            return `Action end: ${event.metadata?.name ?? ""}`;
+        case "error":
+            return `Error: ${event.metadata?.message ?? ""}`;
+        default:
+            return event.type;
+    }
+}
+export function Timeline({ events, selectedId, onSelect }) {
+    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));
+        }) }));
+}

package/dist/components/Warnings.d.ts

@@ -0,0 +1,7 @@
+import type { DebugEvent } from "@next-rsc-debug/core";
+export interface WarningsProps {
+    events: DebugEvent[];
+    threshold?: number;
+}
+export declare function Warnings({ events, threshold }: WarningsProps): import("react").JSX.Element;
+//# sourceMappingURL=Warnings.d.ts.map

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

@@ -0,0 +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,+BA2B5D"}

package/dist/components/Warnings.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Warnings panel.
+ */
+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) {
+        return (_jsx("div", { className: "nrpd-empty", children: _jsx("span", { children: "No warnings detected." }) }));
+    }
+    return (_jsxs("div", { className: "nrpd-warnings", children: [_jsxs("h3", { 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))) })] }));
+}

package/dist/hooks/useSse.d.ts

@@ -0,0 +1,8 @@
+import type { DebugEvent } from "@next-rsc-debug/core";
+export interface SseState {
+    connected: boolean;
+    events: DebugEvent[];
+    error: string | null;
+}
+export declare function useSse(url: string): SseState;
+//# sourceMappingURL=useSse.d.ts.map

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

@@ -0,0 +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"}

package/dist/hooks/useSse.js

@@ -0,0 +1,64 @@
+"use client";
+/**
+ * SSE client hook for live event streaming.
+ */
+import { useState, useEffect, useRef } from "react";
+export function useSse(url) {
+    const [connected, setConnected] = useState(false);
+    const [events, setEvents] = useState([]);
+    const [error, setError] = useState(null);
+    const esRef = useRef(null);
+    const eventsRef = useRef([]);
+    useEffect(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        let es;
+        try {
+            es = new EventSource(url);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to connect");
+            return;
+        }
+        esRef.current = es;
+        es.onopen = () => {
+            setConnected(true);
+            setError(null);
+        };
+        es.onerror = () => {
+            setConnected(false);
+            setError("Connection lost");
+        };
+        es.addEventListener("snapshot", (e) => {
+            try {
+                const data = JSON.parse(e.data);
+                if (data.events) {
+                    eventsRef.current = data.events;
+                    setEvents(data.events);
+                }
+            }
+            catch {
+                // Ignore parse errors.
+            }
+        });
+        es.addEventListener("event", (e) => {
+            try {
+                const event = JSON.parse(e.data);
+                eventsRef.current = [...eventsRef.current, event];
+                setEvents(eventsRef.current);
+            }
+            catch {
+                // Ignore parse errors.
+            }
+        });
+        es.addEventListener("heartbeat", () => {
+            // Heartbeat received — connection is alive.
+        });
+        return () => {
+            es.close();
+            setConnected(false);
+        };
+    }, [url]);
+    return { connected, events, error };
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public API for @next-rsc-debug/devtools.
+ */
+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 { useSse, type SseState } from "./hooks/useSse.js";
+//# 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":"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"}

package/dist/index.js

@@ -0,0 +1,11 @@
+"use client";
+/**
+ * Public API for @next-rsc-debug/devtools.
+ */
+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 { useSse } from "./hooks/useSse.js";

package/dist/styles.css

@@ -0,0 +1,250 @@
+/**
+ * DevTools dashboard styles.
+ */
+
+.nrpd-dashboard {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #0f1115;
+  color: #e6e6e6;
+  min-height: 100vh;
+  padding: 16px;
+  font-size: 13px;
+}
+
+.nrpd-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #1f2430;
+  margin-bottom: 16px;
+}
+
+.nrpd-header h1 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+  color: #f9fafb;
+}
+
+.nrpd-connection {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #1f2430;
+}
+
+.nrpd-connection.connected {
+  color: #34d399;
+}
+
+.nrpd-connection.disconnected {
+  color: #f87171;
+}
+
+.nrpd-error {
+  color: #f87171;
+  font-size: 12px;
+}
+
+.nrpd-summary {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.nrpd-summary-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #161b22;
+  border: 1px solid #1f2430;
+  border-radius: 8px;
+  padding: 8px 12px;
+  min-width: 90px;
+}
+
+.nrpd-summary-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.nrpd-summary-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f9fafb;
+}
+
+.nrpd-summary-label {
+  font-size: 11px;
+  color: #8b949e;
+}
+
+.nrpd-filters {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.nrpd-filter-group {
+  display: flex;
+  gap: 4px;
+  background: #161b22;
+  border: 1px solid #1f2430;
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.nrpd-filter-btn {
+  background: transparent;
+  border: none;
+  color: #8b949e;
+  padding: 4px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.nrpd-filter-btn.active {
+  background: #2563eb;
+  color: #fff;
+}
+
+.nrpd-threshold {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #8b949e;
+}
+
+.nrpd-threshold input {
+  width: 60px;
+  background: #161b22;
+  border: 1px solid #1f2430;
+  color: #e6e6e6;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.nrpd-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.nrpd-panel {
+  background: #161b22;
+  border: 1px solid #1f2430;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.nrpd-panel h2 {
+  font-size: 13px;
+  margin: 0 0 12px 0;
+  color: #f9fafb;
+  font-weight: 600;
+}
+
+.nrpd-timeline {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.nrpd-timeline-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  border-bottom: 1px solid #1a1f29;
+}
+
+.nrpd-timeline-item:hover {
+  background: #1a1f29;
+}
+
+.nrpd-timeline-item.selected {
+  background: #1e3a5f;
+}
+
+.nrpd-timeline-icon {
+  font-size: 14px;
+}
+
+.nrpd-timeline-label {
+  flex: 1;
+  font-size: 12px;
+}
+
+.nrpd-timestamp {
+  font-size: 11px;
+  color: #6e7681;
+}
+
+.nrpd-empty {
+  padding: 24px;
+  text-align: center;
+  color: #6e7681;
+}
+
+.nrpd-inspector table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.nrpd-inspector-label {
+  color: #8b949e;
+  padding: 4px 8px;
+  border-bottom: 1px solid #1a1f29;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.nrpd-inspector-value {
+  padding: 4px 8px;
+  border-bottom: 1px solid #1a1f29;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.nrpd-warning-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nrpd-warning {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  background: #1a1f29;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.nrpd-warning-type {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 10px;
+  color: #fbbf24;
+}
+
+.nrpd-warning-message {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .nrpd-main {
+    grid-template-columns: 1fr;
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@next-rsc-debug/devtools",
+  "version": "0.1.3",
+  "description": "React-based DevTools UI for Next RSC Debug",
+  "author": "Samith Mendis",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node ./scripts/copy-css.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --config vitest.config.ts",
+    "lint": "eslint src --ext .tsx,.ts"
+  },
+  "dependencies": {
+    "@next-rsc-debug/core": "workspace:*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "executable": false
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.0.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  }
+}