@reactra/replay-devtools 0.1.0-alpha.0

package/dist/panel.js

@@ -0,0 +1,725 @@
+// @reactra/replay-devtools — the <ReplayDevtools> session-recorder panel.
+//
+// Owner: reactra-runtime-spec.md §2 (UI-companion tier) + §3; the consumed
+// APIs are Replay spec §5 (`finalizeReplay`, `ReplayPlayer.statesAt`, the
+// live re-drive trio). Written with `createElement` (no JSX — Node
+// type-stripping doesn't transform JSX; §2 tier rule) and an injected
+// stylesheet (no `.css` import). Browser globals appear only inside
+// handlers/effects.
+//
+// The server READ surface (`GET {endpoint}/sessions`, `…/:id/bundle`,
+// `DELETE …/:id`, `?meta.<k>=<v>`) matches examples/replay-server's HTTP
+// API and is documented in the README — it is NOT a Reactra spec contract;
+// the streaming WS transport stays user code in examples/ (§2 tier rule).
+//
+// Chrome mechanics (drag-resize, pop-out, theme toggle, Shift+Alt+R hotkey)
+// use shared helpers from `@reactra/replay-devtools/chrome` (C1 — one impl
+// shared with @reactra/devtools). createPortal stays here (C2 — no react-dom
+// dep in chrome.ts).
+//
+// C3/C4 pop-out lifecycle:
+//   Pop-out is a createPortal re-attach only — the panel fiber is NEVER
+//   unmounted on pop-out or popup-close. The [bundle]-keyed drive effect and
+//   the []-keyed unmount cleanup are both anchored to the panel's lifecycle,
+//   not to the popup's. On popup-close (C4): setPopup(null) → panel returns
+//   to the drawer; driveOn + liveRoute.current survive intact, drive continues
+//   from the drawer. The panel never calls exitReplayMode on popup-close.
+import { createElement as h, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { applyReplayState, enterReplayMode, exitReplayMode, finalizeReplay, } from "@reactra/behaviours/replayable";
+import { ReplayPlayer, diffBundles } from "@reactra/replay";
+import { navigate } from "@reactra/router";
+import { openPanelWindow, usePanelHeight, usePanelTheme, useToggleHotkey } from "./chrome.js";
+import { authHeaders, bundleFilename, bundleToBlobText, describeEvent, diffKeys, eventStops, eventStyle, formatOffset, instanceIds, nextChangeStop, playbackDelay, routeDriveTarget, sessionsQuery, stopIndexAt, } from "./helpers.js";
+import { ensureStyles } from "./styles.js";
+import { Timeline } from "./timeline.js";
+import { CompareBody } from "./compare.js";
+const ALL_TYPES = ["action", "state_snapshot", "resource", "mount", "gap"];
+/**
+ * The Reactra session-recorder panel: finalize-and-scrub, a color-coded
+ * visual timeline, transport controls with auto-playback, keyboard stepping
+ * (←/→/space), per-instance state cards with change highlighting, event-type
+ * and instance filters, live re-drive, and server-session browsing.
+ *
+ * Window chrome: Shift+Alt+R hotkey, drag-to-resize, minimize, pop-out,
+ * System→Light→Dark theme — all powered by the shared `/chrome` helpers.
+ */
+export const ReplayDevtools = (props) => {
+    const endpoint = props.endpoint ?? "/replay";
+    const showDrive = props.drive ?? true;
+    const [open, setOpen] = useState(props.defaultOpen ?? false);
+    const [minimized, setMinimized] = useState(false);
+    // popup: the Window we portaled into. null = docked in the page.
+    const [popup, setPopup] = useState(null);
+    const [bundle, setBundle] = useState(null);
+    const [bundleSource, setBundleSource] = useState("local");
+    const [offset, setOffset] = useState(0);
+    const [playing, setPlaying] = useState(false);
+    const [speed, setSpeed] = useState(1);
+    const [driveOn, setDriveOn] = useState(false);
+    const [sessions, setSessions] = useState(null);
+    const [serverError, setServerError] = useState(null);
+    // Non-null while a server fetch (list refresh or bundle load) is in flight —
+    // drives the indeterminate loading bar so async loads aren't silent.
+    const [busy, setBusy] = useState(null);
+    const [metaFilter, setMetaFilter] = useState("");
+    const [typesOff, setTypesOff] = useState(new Set());
+    const [instsOff, setInstsOff] = useState(new Set());
+    // The from/to timeline window (Chrome-Network-style brush); null = full session.
+    const [win, setWin] = useState(null);
+    // Compare mode state. null = normal single-bundle mode.
+    // compareSlotA: the bundle waiting to be paired (after the user picks A from
+    // the rail but before they pick B). null in normal mode and once both are set.
+    const [compareSession, setCompareSession] = useState(null);
+    const [compareSlotA, setCompareSlotA] = useState(null);
+    // Theme: System→Light→Dark, persisted under a namespace distinct from
+    // @reactra/devtools so co-mounted panels don't fight (plan constraint).
+    const [theme, cycleTheme] = usePanelTheme("@reactra/replay-devtools:theme");
+    // Panel height: drag-to-resize + localStorage persistence.
+    const [panelHeight, resizeHandleProps] = usePanelHeight("@reactra/replay-devtools:panel-height", { defaultHeight: 380, min: 100, max: 1200 });
+    // Latest-value ref for `open`, read by the Shift+Alt+R handler — avoids a
+    // nested setState inside a setOpen updater (StrictMode double-invoke bug,
+    // per 2026-06-10 devtools fix).
+    const openRef = useRef(open);
+    openRef.current = open;
+    // Shift+Alt+R: toggle open / minimized (devtools owns Shift+Alt+D).
+    useToggleHotkey("R", { shift: true, alt: true }, () => {
+        if (!openRef.current)
+            setOpen(true);
+        else
+            setMinimized((m) => !m);
+    });
+    // Hidden file-input for the ⭱ import button (A3). A ref avoids a stateful
+    // DOM node — React renders it once; we trigger it programmatically on click.
+    const importInputRef = useRef(null);
+    ensureStyles();
+    const player = useMemo(() => (bundle ? new ReplayPlayer(bundle) : null), [bundle]);
+    const instances = useMemo(() => (bundle ? instanceIds(bundle) : []), [bundle]);
+    const visible = (e) => !typesOff.has(e.type) && !instsOff.has(e.componentId);
+    const inWindow = (e) => {
+        if (!win || !bundle)
+            return true;
+        const t = e.timestamp - bundle.startTime;
+        return t >= win.from && t <= win.to;
+    };
+    const stops = useMemo(() => (bundle ? eventStops(bundle, (e) => visible(e) && inWindow(e)) : []), [bundle, typesOff, instsOff, win]);
+    const stepIndex = stopIndexAt(stops, offset);
+    const states = useMemo(() => (player && bundle ? player.statesAt(bundle.startTime + offset) : null), [player, bundle, offset]);
+    const prevStates = useMemo(() => {
+        if (!player || !bundle || stepIndex < 1)
+            return null;
+        return player.statesAt(bundle.startTime + stops[stepIndex - 1]);
+    }, [player, bundle, stepIndex, stops]);
+    // The live URL captured when drive turned ON, so `⏎ live` / drive-off can
+    // restore it instead of stranding the browser at a scrubbed route (§5 C2).
+    const liveRoute = useRef(null);
+    const currentLocation = () => typeof location === "undefined" ? "" : location.pathname + location.search;
+    const drive = (atOffset) => {
+        if (!player || !bundle)
+            return;
+        const s = player.statesAt(bundle.startTime + atOffset);
+        // Route-first (§5 C2): navigate BEFORE applying component state, only when
+        // the recorded route differs from the current URL.
+        const target = routeDriveTarget(player.routeAt(bundle.startTime + atOffset), currentLocation());
+        if (target !== undefined)
+            navigate(target);
+        for (const [componentId, state] of s) {
+            if (componentId === "Route#1")
+                continue;
+            applyReplayState(state, componentId.split("#")[0] ?? componentId);
+        }
+    };
+    /** Restore the live URL captured at drive-on (§5 C2). */
+    const restoreLiveRoute = () => {
+        const live = liveRoute.current;
+        if (live !== null && live !== currentLocation())
+            navigate(live);
+        liveRoute.current = null;
+    };
+    const scrub = (atOffset) => {
+        setOffset(atOffset);
+        if (driveOn)
+            drive(atOffset);
+    };
+    const stepTo = (i) => {
+        const t = stops[Math.max(0, Math.min(stops.length - 1, i))];
+        if (t !== undefined)
+            scrub(t);
+    };
+    // Auto-playback: walk the stops at recorded pacing / speed.
+    useEffect(() => {
+        if (!playing || !bundle)
+            return;
+        if (stepIndex >= stops.length - 1) {
+            setPlaying(false);
+            return;
+        }
+        const cur = stops[Math.max(0, stepIndex)] ?? 0;
+        const next = stops[stepIndex + 1];
+        const id = setTimeout(() => scrub(next), playbackDelay(cur, next, speed));
+        return () => clearTimeout(id);
+    });
+    // Replay mode must not outlive the panel; restore the live URL too so
+    // unmounting mid-scrub doesn't strand the browser (§5 C2).
+    // C3: this effect has [] deps — it fires ONLY on true unmount, not on
+    // pop-out (which keeps the panel fiber alive via createPortal).
+    useEffect(() => () => {
+        exitReplayMode();
+        restoreLiveRoute();
+    }, []);
+    // Drive ON by default: loading or finishing a session immediately re-drives
+    // the live app to its first event (parity with devtools Time Travel). The
+    // toggle switches to inspect-only. Keyed on the bundle so each loaded
+    // session re-enters drive; `showDrive===false` opts out entirely.
+    // C3: keyed on [bundle], not on popup/minimized — pop-out doesn't re-fire.
+    // COND-3: compare mode suppresses drive entirely — entering compare already
+    // called exitDrive(), and the panel must not re-enter while comparing.
+    useEffect(() => {
+        if (!bundle || !showDrive || compareSession !== null)
+            return;
+        enterDrive(eventStops(bundle)[0] ?? 0);
+        // Release the live app before the next session re-enters.
+        // Unmount is covered by the [] effect above.
+        return () => {
+            exitReplayMode();
+            restoreLiveRoute();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bundle]);
+    // Popup-close detection (MAJOR-3 fix).
+    // Primary: a synchronous `pagehide` listener on the popup fires immediately
+    // when the user closes the window via the OS chrome (X button), avoiding the
+    // race where createPortal targets a tearing-down document during the interval
+    // lag. The interval is kept as a backstop for environments that suppress
+    // pagehide (some embedded webviews).
+    // C4: both paths call setPopup(null) only — driveOn + liveRoute.current are
+    // unchanged; exitReplayMode is NOT called; drive resumes from the drawer.
+    useEffect(() => {
+        if (!popup)
+            return;
+        const onClose = () => setPopup(null);
+        popup.addEventListener("pagehide", onClose);
+        const id = setInterval(() => {
+            if (popup.closed)
+                setPopup(null);
+        }, 500);
+        return () => {
+            popup.removeEventListener("pagehide", onClose);
+            clearInterval(id);
+        };
+    }, [popup]);
+    const enterDrive = (atOffset) => {
+        if (liveRoute.current === null)
+            liveRoute.current = currentLocation();
+        enterReplayMode();
+        setDriveOn(true);
+        drive(atOffset);
+    };
+    /** Stop driving: release the live app and restore the route it was on. */
+    const exitDrive = () => {
+        exitReplayMode();
+        restoreLiveRoute();
+        setDriveOn(false);
+    };
+    // COND-3: in compare mode the drive toggle is disabled. toggleDrive is
+    // left callable for keyboard shortcuts but exits early.
+    const toggleDrive = () => {
+        if (compareSession !== null)
+            return;
+        if (driveOn)
+            exitDrive();
+        else
+            enterDrive(offset);
+    };
+    // COND-3: entering compare mode FIRST exits any active drive (exitDrive calls
+    // exitReplayMode + restoreLiveRoute). Then compute the diff and enter compare.
+    // Drive never re-enters while compareSession !== null (the [bundle] effect
+    // is gated above).
+    const enterCompareMode = (bA, bB) => {
+        if (driveOn)
+            exitDrive();
+        const diff = diffBundles(bA, bB);
+        const firstShared = diff.instances.find((i) => i.presence === "both");
+        const componentId = firstShared?.componentId ?? diff.instances[0]?.componentId ?? "";
+        // Pick the first ordinal that has state divergence. When there are none
+        // (only event-level divergences), fall back to ordinal 0 so the state
+        // panel shows the actual state rather than "select a divergence row".
+        const stateDivOrdinal = firstShared?.stops.findIndex((s) => s.changedKeys.length > 0) ?? -1;
+        const firstDivergent = stateDivOrdinal !== -1
+            ? stateDivOrdinal
+            : (firstShared?.stops.length ?? 0) > 0 ? 0 : -1;
+        setCompareSession({
+            bundleA: bA,
+            bundleB: bB,
+            playerA: new ReplayPlayer(bA),
+            playerB: new ReplayPlayer(bB),
+            diff,
+            componentId,
+            selectedOrdinal: firstDivergent,
+        });
+        setCompareSlotA(null);
+        setServerError(null);
+    };
+    /** Exit compare mode — returns to normal single-bundle inspect.
+     *  COND-3: if a bundle is loaded and drive is enabled, re-enter drive so
+     *  the user doesn't have to manually click "driving app" after exiting compare.
+     */
+    const exitCompareMode = () => {
+        setCompareSession(null);
+        setCompareSlotA(null);
+        // Re-enter drive only when a bundle is present and drive is not suppressed
+        // (showDrive). driveOn may be false here because enterCompareMode called
+        // exitDrive first (COND-3). We re-enter at the current offset so the app
+        // snaps back to the scrubbed position the user was inspecting.
+        if (bundle !== null && showDrive) {
+            enterDrive(offset);
+        }
+    };
+    /**
+     * Handle a "compare" click on a rail session row. If no slot A is set yet,
+     * and a bundle is already loaded, use it as A and load the clicked session
+     * as B immediately. If no bundle is loaded, set slot A to the clicked
+     * session (waiting for B). If slot A is already set, enter compare.
+     */
+    const handleCompareClick = async (s) => {
+        // If a bundle is already loaded, treat it as A and the clicked row as B.
+        if (bundle && compareSlotA === null) {
+            try {
+                const res = await fetch(`${endpoint}/sessions/${s.sessionId}/bundle`, {
+                    headers: fetchHeaders(),
+                });
+                if (!res.ok)
+                    throw new Error(`HTTP ${res.status}`);
+                const bB = (await res.json());
+                enterCompareMode(bundle, bB);
+            }
+            catch (err) {
+                setServerError(`compare load failed: ${String(err)}`);
+            }
+            return;
+        }
+        // No bundle loaded yet: first click sets slot A.
+        if (compareSlotA === null) {
+            try {
+                const res = await fetch(`${endpoint}/sessions/${s.sessionId}/bundle`, {
+                    headers: fetchHeaders(),
+                });
+                if (!res.ok)
+                    throw new Error(`HTTP ${res.status}`);
+                const bA = (await res.json());
+                setCompareSlotA(bA);
+                setServerError(`compare: slot A = ${s.sessionId.slice(0, 8)} — now pick session B`);
+            }
+            catch (err) {
+                setServerError(`compare load failed: ${String(err)}`);
+            }
+            return;
+        }
+        // Slot A is set — load B and enter compare.
+        try {
+            const res = await fetch(`${endpoint}/sessions/${s.sessionId}/bundle`, {
+                headers: fetchHeaders(),
+            });
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            const bB = (await res.json());
+            enterCompareMode(compareSlotA, bB);
+        }
+        catch (err) {
+            setServerError(`compare load failed: ${String(err)}`);
+        }
+    };
+    const togglePlay = () => {
+        if (!bundle || stops.length === 0)
+            return;
+        if (playing) {
+            setPlaying(false);
+            return;
+        }
+        if (stepIndex >= stops.length - 1)
+            scrub(stops[0]);
+        setPlaying(true);
+    };
+    const finish = async () => {
+        const b = await finalizeReplay();
+        setBundle(b);
+        setBundleSource("local");
+        setPlaying(false);
+        setWin(null);
+        setOffset(b ? (eventStops(b)[0] ?? 0) : 0);
+        // The session streamed to the server during recording; finalizeReplay just
+        // sent the finalize frame. Refresh the server list so the just-finished
+        // session appears (flipping live → final) without a manual ⟳. Best-effort.
+        await refreshSessions();
+    };
+    // A2: download the current bundle as a JSON file. All browser globals
+    // (Blob, URL, document.createElement) are inside the handler — never at
+    // module or hook top level (UI-companion tier rule; test:node gate).
+    const exportBundle = () => {
+        if (!bundle)
+            return;
+        const blob = new Blob([bundleToBlobText(bundle)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = bundleFilename(bundle);
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    // A3: load a bundle from a local file. Validates the minimal shape
+    // (version + events array + numeric startTime) before accepting it; on
+    // failure sets serverError so the user sees the problem inline.
+    const importBundle = (file) => {
+        file.text().then((text) => {
+            let parsed;
+            try {
+                parsed = JSON.parse(text);
+            }
+            catch {
+                setServerError("invalid bundle file: not valid JSON");
+                return;
+            }
+            if (typeof parsed !== "object" || parsed === null) {
+                setServerError("invalid bundle file: missing required fields (version, events, startTime)");
+                return;
+            }
+            const rec = parsed;
+            if (!("version" in rec) ||
+                !Array.isArray(rec["events"]) ||
+                typeof rec["startTime"] !== "number") {
+                setServerError("invalid bundle file: missing required fields (version, events, startTime)");
+                return;
+            }
+            const b = rec;
+            setBundle(b);
+            setBundleSource("local");
+            setPlaying(false);
+            setWin(null);
+            setOffset(eventStops(b)[0] ?? 0);
+            setServerError(null);
+        }).catch((err) => {
+            setServerError(`invalid bundle file: ${String(err)}`);
+        });
+    };
+    // A4: copy the server bundle URL for a session to the clipboard. On
+    // clipboard failure (permission denied, non-HTTPS, etc.) shows the URL in
+    // serverError so the user can still copy it manually.
+    const copySessionLink = (sessionId) => {
+        const url = `${endpoint}/sessions/${sessionId}/bundle`;
+        navigator.clipboard.writeText(url).catch(() => {
+            setServerError(`copy failed — link: ${url}`);
+        });
+    };
+    const fetchHeaders = () => authHeaders(props.token, props.headers);
+    const refreshSessions = async () => {
+        setBusy("loading sessions…");
+        try {
+            const res = await fetch(`${endpoint}/sessions${sessionsQuery(metaFilter)}`, {
+                headers: fetchHeaders(),
+            });
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            setSessions((await res.json()));
+            setServerError(null);
+        }
+        catch (err) {
+            setServerError(`replay-server unreachable: ${String(err)}`);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const loadSession = async (sessionId) => {
+        setBusy("loading session…");
+        try {
+            const res = await fetch(`${endpoint}/sessions/${sessionId}/bundle`, {
+                headers: fetchHeaders(),
+            });
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            const b = (await res.json());
+            setBundle(b);
+            setBundleSource("server");
+            setPlaying(false);
+            setWin(null);
+            setOffset(eventStops(b)[0] ?? 0);
+            setServerError(null);
+        }
+        catch (err) {
+            setServerError(`bundle fetch failed: ${String(err)}`);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const deleteSession = async (sessionId) => {
+        try {
+            await fetch(`${endpoint}/sessions/${sessionId}`, {
+                method: "DELETE",
+                headers: fetchHeaders(),
+            });
+            await refreshSessions();
+        }
+        catch (err) {
+            setServerError(`delete failed: ${String(err)}`);
+        }
+    };
+    const popOut = () => {
+        const w = openPanelWindow({
+            name: "reactra-replay-devtools",
+            title: "Reactra Session Replay",
+            width: 1200,
+            height: 560,
+            injectStyles: [ensureStyles],
+        });
+        // C3: setPopup triggers a createPortal re-attach only — the panel fiber
+        // stays alive. The [bundle] drive effect does NOT re-fire because its deps
+        // haven't changed. driveOn + liveRoute.current are unchanged.
+        if (w)
+            setPopup(w);
+    };
+    // Keyboard transport on the focused panel: ←/→ step, space play/pause.
+    const onKeyDown = (e) => {
+        if (e.target?.tagName === "INPUT")
+            return;
+        if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            stepTo(stepIndex - 1);
+        }
+        else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            stepTo(stepIndex + 1);
+        }
+        else if (e.key === " ") {
+            e.preventDefault();
+            togglePlay();
+        }
+    };
+    if (!open) {
+        return h("button", {
+            className: "rdt-root rrd-pill",
+            onClick: () => setOpen(true),
+            title: "Open the Reactra session recorder (Shift+Alt+R)",
+        }, h("span", { className: "rrd-dot" }), "replay");
+    }
+    const timeline = bundle &&
+        h(Timeline, {
+            bundle,
+            offset,
+            window: win,
+            visible,
+            onScrub: scrub,
+            onWindowChange: setWin,
+            onGrab: () => setPlaying(false),
+        });
+    const transport = bundle &&
+        h("div", { className: "rrd-transport" }, h("button", { className: "rrd-btn", disabled: stops.length === 0 || stepIndex <= 0, onClick: () => stepTo(0), title: "Rewind to the first event" }, "⏮"), h("button", { className: "rrd-btn", disabled: stepIndex <= 0, onClick: () => stepTo(stepIndex - 1), title: "Previous event (←)" }, "⏴"), h("button", { className: "rrd-btn rrd-btn--accent", onClick: togglePlay, title: "Play / pause (space) — restarts from the first event at the end" }, playing ? "⏸" : "▶"), h("button", { className: "rrd-btn", disabled: stepIndex >= stops.length - 1, onClick: () => stepTo(stepIndex + 1), title: "Next event (→)" }, "⏵"), h("select", {
+            className: "rrd-select",
+            value: String(speed),
+            onChange: (e) => setSpeed(Number(e.target.value)),
+            title: "Playback speed",
+        }, h("option", { value: "0.5" }, "0.5×"), h("option", { value: "1" }, "1×"), h("option", { value: "2" }, "2×"), h("option", { value: "4" }, "4×")), h("span", { className: "rrd-pos" }, `event ${Math.max(0, stepIndex) + 1}/${stops.length} · ${formatOffset(offset)}`), win &&
+            h("button", {
+                className: "rrd-btn rrd-mini",
+                onClick: () => setWin(null),
+                title: "Clear the from/to window",
+            }, `✕ ${formatOffset(win.from)}–${formatOffset(win.to)}`), showDrive &&
+            h("button", {
+                // COND-3: disabled in compare mode — can't drive to two states at once.
+                className: driveOn ? "rrd-btn rrd-btn--live" : "rrd-btn",
+                disabled: compareSession !== null,
+                onClick: toggleDrive,
+                title: compareSession !== null
+                    ? "Drive disabled in compare mode"
+                    : driveOn
+                        ? "Driving the live app — scrub/play re-drives it (Replay §5). Click for inspect-only."
+                        : "Inspect-only — the panel shows recorded state but doesn't touch the live app. Click to drive it.",
+            }, driveOn ? "● driving app" : "○ inspect only"));
+    const filters = bundle &&
+        h("div", { className: "rrd-filters" }, ...ALL_TYPES.map((t) => h("button", {
+            key: t,
+            className: typesOff.has(t) ? "rrd-chip" : "rrd-chip rrd-chip--on",
+            onClick: () => setTypesOff((cur) => {
+                const next = new Set(cur);
+                if (next.has(t))
+                    next.delete(t);
+                else
+                    next.add(t);
+                return next;
+            }),
+        }, t)), ...instances.map((id) => h("button", {
+            key: id,
+            className: instsOff.has(id) ? "rrd-chip" : "rrd-chip rrd-chip--on",
+            onClick: () => setInstsOff((cur) => {
+                const next = new Set(cur);
+                if (next.has(id))
+                    next.delete(id);
+                else
+                    next.add(id);
+                return next;
+            }),
+        }, id)));
+    const stateCards = states &&
+        h("div", { className: "rrd-states" }, ...[...states.entries()]
+            .filter(([id]) => !instsOff.has(id))
+            .map(([id, state]) => {
+            const changed = new Set(diffKeys(prevStates?.get(id), state));
+            return h("div", { key: id, className: "rrd-card" }, h("div", { className: "rrd-card-id" }, id), ...Object.entries(state).map(([k, v]) => h("div", { key: k, className: "rrd-kv" }, 
+            // B2: clicking a key jumps to the next/previous stop where that
+            // key changes. Shift-click walks backward. No-op when there is
+            // no further change in that direction. `player` and `bundle` are
+            // non-null here (stateCards is only built when `states` is set,
+            // which requires both). `stops` is the already-filtered array —
+            // so the jump respects active type/instance chips + window brush.
+            h("span", {
+                className: "rrd-k rrd-k--jumpable",
+                title: "Jump to next change (Shift-click: previous)",
+                onClick: (e) => {
+                    if (!player || !bundle)
+                        return;
+                    const dir = e.shiftKey ? -1 : 1;
+                    const target = nextChangeStop(player, bundle, stops, stepIndex, id, k, dir);
+                    if (target !== null)
+                        stepTo(target);
+                },
+            }, `${k}:`), h("span", { className: changed.has(k) ? "rrd-v rrd-v--changed" : "rrd-v" }, JSON.stringify(v)))));
+        }));
+    const eventTable = bundle &&
+        h("div", { className: "rrd-events" }, h("table", null, h("thead", null, h("tr", null, h("th", null, "t"), h("th", null, "instance"), h("th", null, "event"))), h("tbody", null, ...bundle.events.map((e, i) => {
+            if (!visible(e) || !inWindow(e))
+                return null;
+            const t = e.timestamp - bundle.startTime;
+            const s = eventStyle(e);
+            const cls = t === offset ? "rrd-row--current" : t > offset ? "rrd-row--future" : undefined;
+            return h("tr", { key: i, className: cls, onClick: () => scrub(t) }, h("td", null, formatOffset(t)), h("td", null, e.componentId), h("td", { className: "rrd-detail" }, h("span", { className: "rrd-glyph", style: { color: s.color } }, s.glyph), `${e.type === "state_snapshot" ? "" : e.type + " "}${describeEvent(e)}`));
+        }))));
+    const sessionList = h("div", { className: "rrd-sessions" }, h("h4", null, "Server sessions"), h("div", { style: { display: "flex", gap: "6px", marginBottom: "6px" } }, h("button", { className: "rrd-btn rrd-icon-btn", onClick: refreshSessions, disabled: busy !== null, title: "Refresh session list" }, "⟳"), h("input", {
+        className: "rrd-input",
+        style: { minWidth: 0, flex: 1 },
+        placeholder: "meta: userId=…",
+        value: metaFilter,
+        onChange: (e) => setMetaFilter(e.target.value),
+        title: "Filter: GET /sessions?meta.<key>=<value>",
+    })), 
+    // Progress indicator while a server fetch is in flight (issue: async loads
+    // were silent — the user couldn't tell a load from the server was running).
+    busy && h("div", { className: "rrd-loading-label" }, busy), busy && h("div", { className: "rrd-loading", role: "progressbar", "aria-label": busy }), serverError && h("div", { className: "rrd-err" }, serverError), sessions !== null && sessions.length === 0 && h("div", { className: "rrd-hint" }, "no sessions"), ...(sessions ?? []).map((s) => h("div", { key: s.sessionId, className: "rrd-session" }, h("code", null, s.sessionId), 
+    // Metadata row: event count + status + meta tags (info only, wraps).
+    h("div", { className: "rrd-session-meta" }, h("span", { className: "rrd-hint" }, `${s.eventCount}ev · ${s.finalized ? "final" : "live"}`), ...Object.entries(s.meta ?? {}).map(([k, v]) => h("span", { key: k, className: "rrd-meta-tag" }, `${k}=${v}`))), 
+    // Action row: all buttons on one line; the destructive delete is pushed
+    // to the far right (separated from load/compare/copy).
+    h("div", { className: "rrd-session-actions" }, 
+    // `load` is the primary action per row → accent-highlighted.
+    h("button", { className: "rrd-btn rrd-mini rrd-btn--accent", onClick: () => loadSession(s.sessionId) }, "load"), 
+    // Compare: pick this session as one side of a diff.
+    h("button", {
+        className: compareSlotA?.sessionId === s.sessionId
+            ? "rrd-btn rrd-icon-btn rrd-btn--compare-active"
+            : "rrd-btn rrd-icon-btn rrd-btn--compare",
+        title: compareSlotA
+            ? `Compare with slot A (${compareSlotA.sessionId.slice(0, 8)})`
+            : bundle
+                ? "Compare against the loaded session"
+                : "Pick as compare slot A",
+        onClick: () => handleCompareClick(s),
+    }, "⟷"), 
+    // A4: copy the direct bundle URL to the clipboard.
+    h("button", {
+        className: "rrd-btn rrd-icon-btn",
+        title: "Copy bundle URL to clipboard",
+        onClick: () => copySessionLink(s.sessionId),
+    }, "⧉"), h("button", { className: "rrd-btn rrd-icon-btn rrd-btn--danger rrd-session-del", title: "Erase on the server (PII removal)", onClick: () => deleteSession(s.sessionId) }, "🗑")))));
+    // `rdt-root` is required on the panel root so the `--rdt-*` token block
+    // (injected by ensureTokens via ensureStyles) is in scope for child elements.
+    const panelClass = popup
+        ? "rdt-root rrd-panel rrd-panel--popup"
+        : minimized
+            ? "rdt-root rrd-panel rrd-panel--min"
+            : "rdt-root rrd-panel";
+    // Apply the persisted height only for the docked, non-minimized panel.
+    const panelStyle = popup || minimized ? undefined : { height: panelHeight };
+    const panel = h("section", {
+        className: panelClass,
+        tabIndex: 0,
+        style: panelStyle,
+        // Explicit theme override; "system" defers to prefers-color-scheme via CSS.
+        "data-rdt-theme": theme,
+        onKeyDown,
+    }, 
+    // Resize handle: only docked + not minimized.
+    !popup && !minimized &&
+        h("div", {
+            className: "rrd-resize-handle",
+            onMouseDown: resizeHandleProps.onMouseDown,
+            title: "Drag to resize panel",
+            role: "separator",
+            "aria-orientation": "horizontal",
+        }), h("header", { className: "rrd-head" }, h("span", { className: "rrd-title" }, "Reactra Session Replay"), h("span", { className: "rrd-kbd-hint" }, "←/→ step · space play"), h("span", { className: "rrd-spacer" }), h("button", { className: "rrd-btn rrd-btn--accent", onClick: finish }, "⏹ finish & inspect"), 
+    // A2: download the current bundle. Only visible when a bundle is loaded.
+    bundle &&
+        h("button", {
+            className: "rrd-btn",
+            onClick: exportBundle,
+            title: "Download session as JSON",
+        }, "⭳ export"), 
+    // A3: import a bundle from a local file — triggers the hidden file input.
+    h("button", {
+        className: "rrd-btn",
+        onClick: () => importInputRef.current?.click(),
+        title: "Load a session bundle from a local file",
+    }, "⭱ import"), 
+    // Hidden file input — the actual file picker, triggered by the import button.
+    h("input", {
+        ref: importInputRef,
+        type: "file",
+        accept: ".json",
+        style: { display: "none" },
+        onChange: (e) => {
+            const file = e.target.files?.[0];
+            if (file)
+                importBundle(file);
+            // Reset the input so the same file can be re-imported after a reload.
+            if (importInputRef.current)
+                importInputRef.current.value = "";
+        },
+    }), 
+    // Theme toggle: System→Light→Dark→System cycle, persisted.
+    h("button", {
+        className: "rrd-btn",
+        onClick: cycleTheme,
+        title: `Theme: ${theme} (click to cycle System → Light → Dark)`,
+        "aria-label": `Theme: ${theme}`,
+    }, theme === "light" ? "☀" : theme === "dark" ? "🌙" : "◐"), 
+    // Minimize / restore — only shown when docked (popup is already resizable).
+    !popup &&
+        h("button", {
+            className: "rrd-btn",
+            onClick: () => setMinimized((m) => !m),
+            title: minimized ? "Restore" : "Minimize to the header bar",
+        }, minimized ? "▴" : "▾"), 
+    // Pop-out to a separate window (C3/C4: portal-only, fiber stays alive).
+    !popup &&
+        h("button", { className: "rrd-btn", onClick: popOut, title: "Pop out into its own window" }, "⧉"), !popup &&
+        h("button", { className: "rrd-btn", onClick: () => setOpen(false), title: "Collapse" }, "✕")), 
+    // Panel body: hidden while minimized (body not rendered, effects/subscriptions
+    // pause) — unless we're in the popup window (it's already a separate window).
+    (!minimized || popup !== null) &&
+        h("div", { className: "rrd-body" }, 
+        // In compare mode: the full body is replaced by CompareBody. The session
+        // rail is still shown on the left so the user can navigate or exit compare.
+        compareSession !== null
+            ? h(CompareBody, {
+                session: compareSession,
+                onSelectComponent: (id) => setCompareSession((cs) => cs ? { ...cs, componentId: id, selectedOrdinal: -1 } : cs),
+                onSelectOrdinal: (ordinal) => setCompareSession((cs) => cs ? { ...cs, selectedOrdinal: ordinal } : cs),
+                onExit: exitCompareMode,
+            })
+            : h("div", { className: "rrd-body-inner" }, sessionList, h("div", { className: "rrd-main" }, bundle === null &&
+                h("div", { className: "rrd-hint" }, "Recording is live (configured at bootstrap). Interact with the app, then finish the session — or load one back from the server."), bundle &&
+                h("div", { className: "rrd-info" }, h("span", { className: bundleSource === "server" ? "rrd-src rrd-src--server" : "rrd-src rrd-src--local" }, bundleSource), h("code", null, bundle.sessionId), `${bundle.events.length} events · ${(bundle.duration / 1000).toFixed(1)}s · ${instances.join(", ")}`), timeline, transport, filters, bundle && h("div", { className: "rrd-content" }, stateCards, eventTable)))));
+    // createPortal re-attaches the existing panel fiber into the popup window's
+    // body without unmounting it. The [] cleanup effect and [bundle] drive effect
+    // are anchored to the panel's lifecycle, so neither fires on portal changes.
+    return popup ? createPortal(panel, popup.document.body) : panel;
+};
+//# sourceMappingURL=panel.js.map