@bimetal/devtools-react 0.16.5

package/dist/EventInspectorPanel.js

@@ -0,0 +1,669 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Event-Inspector — Vollseiten-Variant (v0.14.0, in `@bimetal/devtools-react`
+ * extrahiert in v0.16.5).
+ *
+ * UX-Vorbild laut Architektur-Doc: EDA-Lab / KurrentDB-UI.
+ * Tabelle statt Cards. ID-Stubs (8-Zeichen) statt Volltext.
+ * Causation/Correlation als first-class Spalten.
+ *
+ * Ehrlichkeits-Grundsatz: causationId zeigt im Calendar-DomainStore-Flow
+ * auf eine Command-ID, nicht auf ein vorausgehendes Event. Die Tabelle
+ * zeigt die rohe ID — keine Fake-Causation-Tree-Verlinkung.
+ *
+ * **Registry-Resolution (v0.16.5 Pilot-Schärfung):** Prop > Context >
+ * Throw. Kein impliziter Singleton-Fallback. Siehe
+ * `16-devtools-react-architecture.md` Leitplanke 2.
+ */
+import { useState, useSyncExternalStore, useMemo, useEffect } from 'react';
+import { exportSnapshot, serializeSnapshot } from '@bimetal/devtools';
+import { CausationBody } from './CausationBody.js';
+import { BridgesBody } from './BridgesBody.js';
+import { useResolvedRegistry } from './useDevtoolsRegistry.js';
+import { DevtoolsRegistryContext } from './DevtoolsRegistryContext.js';
+import { EventDetail, MetaPlainRow, MetaRow, Section, detailColumnStyle, detailHeaderStyle, detailInnerStyle, detailMetaGridStyle, emptyDetailStyle, emptyStyle, formatTimeWithMs, inlineCodeStyle, preStyle, safeStringify, stub, tableScrollStyle, twoColStyle, } from './inspector-shared.js';
+export function EventInspectorPanel({ registry: registryProp } = {}) {
+    const registry = useResolvedRegistry(registryProp);
+    const [activeTab, setActiveTab] = useState('events');
+    const [selectedSeq, setSelectedSeq] = useState(null);
+    const [typeFilter, setTypeFilter] = useState('');
+    const [streamFilter, setStreamFilter] = useState('');
+    const [storeFilter, setStoreFilter] = useState('');
+    const [minSeq, setMinSeq] = useState(0);
+    const [snapshotWhenPaused, setSnapshotWhenPaused] = useState(null);
+    const liveState = useSyncExternalStore(registry.subscribe, () => registry.state, () => registry.state);
+    const state = snapshotWhenPaused ?? liveState;
+    const paused = snapshotWhenPaused !== null;
+    const visible = useMemo(() => {
+        const tf = typeFilter.toLowerCase();
+        const sf = streamFilter.toLowerCase();
+        return state.events.filter(e => {
+            if (e.seq < minSeq)
+                return false;
+            if (storeFilter && e.storeId !== storeFilter)
+                return false;
+            if (tf && !e.event.type.toLowerCase().includes(tf))
+                return false;
+            if (sf && !e.streamId.toLowerCase().includes(sf))
+                return false;
+            return true;
+        });
+    }, [state.events, minSeq, storeFilter, typeFilter, streamFilter]);
+    const streamCount = useMemo(() => {
+        const set = new Set();
+        for (const e of state.events) {
+            if (e.seq >= minSeq)
+                set.add(`${e.storeId}::${e.streamId}`);
+        }
+        return set.size;
+    }, [state.events, minSeq]);
+    const selected = state.events.find(e => e.seq === selectedSeq) ?? null;
+    function togglePause() {
+        setSnapshotWhenPaused(prev => (prev === null ? liveState : null));
+    }
+    function clear() {
+        const maxSeq = state.events.length > 0 ? state.events[state.events.length - 1].seq : 0;
+        setMinSeq(maxSeq + 1);
+        setSelectedSeq(null);
+    }
+    // Snapshot-Export (v0.16.6 Sub 2). Date.now() läuft am UI-Layer —
+    // exportSnapshot bleibt deterministisch (Pilot-Schärfung Sub 1).
+    // Exportiert den aktuellen `state` (= paused-Snapshot wenn pausiert,
+    // sonst Live-Snapshot). Filename mit saniertem ISO-Datum
+    // (Doppelpunkt/Punkt → Bindestrich; Windows-Datei-System-freundlich).
+    function exportAndDownload() {
+        const exportedAt = Date.now();
+        const snap = exportSnapshot(state, { exportedAt });
+        const json = serializeSnapshot(snap);
+        const iso = new Date(exportedAt).toISOString();
+        const filename = `bimetal-devtools-snapshot-${iso.replace(/[:.]/g, '-')}.json`;
+        triggerDownload(filename, json);
+    }
+    const visibleCountInWindow = useMemo(() => state.events.filter(e => e.seq >= minSeq).length, [state.events, minSeq]);
+    // Causation-Tab respektiert den Clear-Button-Vertrag wie der Events-Tab:
+    // nach Clear (= minSeq nach vorne geschoben) sollen die alten Events
+    // auch im Forest verschwinden. Andere Filter (type/stream/store) bleiben
+    // bewusst draußen — der Forest soll die Causation-Topologie zeigen, nicht
+    // eine gefilterte Teilsicht.
+    const causationEvents = useMemo(() => state.events.filter(e => e.seq >= minSeq), [state.events, minSeq]);
+    // v0.15.5 + v0.16.0: Tab-Bar wird zur Laufzeit aufgebaut. Tabs werden
+    // einzeln sichtbar, sobald ihr Datenfeld nicht leer ist (überlebt
+    // Variant-Switch via rolling-window oder Registry-Stand).
+    // Bridges-Tab respektiert Clear-Button-Vertrag wie Events- und Causation-
+    // Tab: nach Clear (minSeq nach vorne) verschwinden alte Bridge-Records.
+    // Type-/Stream-/Store-Filter bleiben bewusst draußen — der Bridge-Tab
+    // zeigt Transport-Topologie, keine Event-Filter-Teilsicht.
+    const bridgeRecords = useMemo(() => state.bridgeRecords.filter(r => r.seq >= minSeq), [state.bridgeRecords, minSeq]);
+    const showSyncTab = state.syncTransports.length > 0 || state.syncRecords.length > 0;
+    const showStateTab = state.replayTargets.length > 0;
+    const showCausationTab = causationEvents.length > 0;
+    const showBridgesTab = state.bridges.length > 0 || bridgeRecords.length > 0;
+    const showTabs = showSyncTab || showStateTab || showCausationTab || showBridgesTab;
+    // Wenn der gerade aktive Tab nicht mehr verfügbar ist (Variant-Wechsel
+    // hat Targets/Transports abgemeldet), fall back auf Events.
+    const effectiveTab = (activeTab === 'sync' && !showSyncTab) ||
+        (activeTab === 'state' && !showStateTab) ||
+        (activeTab === 'causation' && !showCausationTab) ||
+        (activeTab === 'bridges' && !showBridgesTab)
+        ? 'events'
+        : activeTab;
+    // Resolved Registry intern als Context bereitstellen, damit interne
+    // Tab-Bodies und zukünftige Sub-Komponenten useDevtoolsRegistry() nutzen
+    // können, auch wenn der Konsument nur per Prop konfiguriert hat.
+    // Pilot-Schärfung Sub 1: Hook liest ausschließlich Context — der Panel
+    // ist die Stelle, die Prop und Context vereinheitlicht.
+    return (_jsx(DevtoolsRegistryContext.Provider, { value: registry, children: _jsxs("div", { style: pageStyle, children: [_jsx(PanelHeader, { events: visibleCountInWindow, streams: streamCount, stores: state.eventStores.length, syncTransports: state.syncTransports.length, replayTargets: state.replayTargets.length, filtered: visible.length, paused: paused, onTogglePause: togglePause, onClear: clear, onExport: exportAndDownload }), showTabs && (_jsx(TabBar, { activeTab: effectiveTab, onSelect: setActiveTab, showSync: showSyncTab, showState: showStateTab, showCausation: showCausationTab, showBridges: showBridgesTab })), effectiveTab === 'events' && (_jsxs(_Fragment, { children: [_jsx(FilterBar, { stores: state.eventStores, storeFilter: storeFilter, onStoreFilter: setStoreFilter, typeFilter: typeFilter, onTypeFilter: setTypeFilter, streamFilter: streamFilter, onStreamFilter: setStreamFilter }), _jsx(EventsBody, { state: state, visible: visible, selected: selected, selectedSeq: selectedSeq, onSelect: setSelectedSeq, paused: paused })] })), effectiveTab === 'sync' && (_jsx(SyncBody, { records: state.syncRecords, paused: paused })), effectiveTab === 'state' && (_jsx(StateBody, { targets: state.replayTargets, registry: registry })), effectiveTab === 'causation' && (_jsx(CausationBody, { events: causationEvents })), effectiveTab === 'bridges' && (_jsx(BridgesBody, { bridges: state.bridges, records: bridgeRecords }))] }) }));
+}
+function TabBar({ activeTab, onSelect, showSync, showState, showCausation, showBridges, }) {
+    return (_jsxs("div", { style: tabBarStyle, children: [_jsx("button", { onClick: () => onSelect('events'), style: activeTab === 'events' ? tabActiveStyle : tabStyle, children: "Events" }), showSync && (_jsx("button", { onClick: () => onSelect('sync'), style: activeTab === 'sync' ? tabActiveStyle : tabStyle, children: "Sync" })), showState && (_jsx("button", { onClick: () => onSelect('state'), style: activeTab === 'state' ? tabActiveStyle : tabStyle, children: "State" })), showCausation && (_jsx("button", { onClick: () => onSelect('causation'), style: activeTab === 'causation' ? tabActiveStyle : tabStyle, children: "Causation" })), showBridges && (_jsx("button", { onClick: () => onSelect('bridges'), style: activeTab === 'bridges' ? tabActiveStyle : tabStyle, children: "Bridges" }))] }));
+}
+// ── Sync-Tab ──────────────────────────────────────────────────────
+function SyncBody({ records, paused }) {
+    const [selectedSeq, setSelectedSeq] = useState(null);
+    const selected = records.find(r => r.seq === selectedSeq) ?? null;
+    if (records.length === 0) {
+        return (_jsxs("div", { style: emptyStyle, children: ["Noch keine Sync-Records. Sobald ein registrierter Transport sendet/empf\u00E4ngt, erscheinen hier ", _jsx("code", { children: "sync-connect" }), ", ", _jsx("code", { children: "sync-append-sent" }), ",", _jsx("code", { children: "sync-events-received" }), " etc."] }));
+    }
+    return (_jsxs("div", { style: twoColStyle, children: [_jsxs("div", { style: tableScrollStyle, children: [paused && _jsx("div", { style: pausedBannerStyle, children: "\u23F8 Live-Stream pausiert \u2014 Ansicht eingefroren." }), _jsxs("table", { style: tableStyle, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: thStyle, children: "Zeit" }), _jsx("th", { style: thStyle, children: "Dir" }), _jsx("th", { style: thStyle, children: "Kind" }), _jsx("th", { style: thStyle, children: "Transport" }), _jsx("th", { style: thStyle, children: "Stream / Sub" }), _jsx("th", { style: thStyle, children: "Req-ID" }), _jsx("th", { style: thNumStyle, children: "Info" })] }) }), _jsx("tbody", { children: records.slice().reverse().map(r => (_jsx(SyncRow, { captured: r, isSelected: r.seq === selectedSeq, onSelect: () => setSelectedSeq(r.seq === selectedSeq ? null : r.seq) }, r.seq))) })] })] }), _jsx("div", { style: detailColumnStyle, children: selected
+                    ? _jsx(SyncDetail, { captured: selected })
+                    : _jsx("div", { style: emptyDetailStyle, children: "Klick auf eine Zeile zeigt das vollst\u00E4ndige Wire-Frame." }) })] }));
+}
+function SyncRow({ captured, isSelected, onSelect, }) {
+    const r = captured.record;
+    const direction = syncDirection(r.kind);
+    const dirColor = direction === '↑' ? '#a8d8a8' : direction === '↓' ? '#9ec8ff' : '#888';
+    const reqId = 'requestId' in r ? r.requestId : '';
+    const subId = 'subscriptionId' in r ? r.subscriptionId : '';
+    const streamSubLabel = ('streamId' in r ? r.streamId : '')
+        + (subId ? ` · ${stub(subId)}` : '');
+    const info = syncRowInfo(r);
+    return (_jsxs("tr", { onClick: onSelect, style: { ...trStyle, ...(isSelected ? trSelectedStyle : null), cursor: 'pointer' }, children: [_jsx("td", { style: tdStyle, children: formatTime(captured.capturedAt) }), _jsx("td", { style: { ...tdStyle, color: dirColor, fontFamily: 'ui-monospace, monospace', fontWeight: 600 }, children: direction }), _jsx("td", { style: { ...tdStyle, fontFamily: 'ui-monospace, monospace' }, children: r.kind.replace('sync-', '') }), _jsx("td", { style: tdStoreStyle, children: captured.transportName }), _jsx("td", { style: tdMonoStyle, children: streamSubLabel || '—' }), _jsx("td", { style: tdMonoStyle, children: reqId ? stub(reqId) : '—' }), _jsx("td", { style: tdNumStyle, children: info })] }));
+}
+function SyncDetail({ captured }) {
+    return (_jsxs("div", { style: detailInnerStyle, children: [_jsxs("div", { style: detailHeaderStyle, children: [_jsx("div", { style: { fontWeight: 600, fontSize: 14, fontFamily: 'ui-monospace, monospace' }, children: captured.record.kind }), _jsxs("div", { style: { fontSize: 11, color: '#888', marginTop: 4 }, children: ["#", captured.seq, " \u00B7 Transport ", _jsx("code", { style: inlineCodeStyle, children: captured.transportName }), " ", _jsxs("span", { style: { opacity: 0.6 }, children: ["(id: ", captured.transportId, ")"] })] }), _jsx("div", { style: { fontSize: 11, color: '#888', marginTop: 4 }, children: formatTimeWithMs(captured.capturedAt) })] }), _jsx(Section, { title: "Record", children: _jsx("pre", { style: preStyle, children: safeStringify(captured.record) }) })] }));
+}
+function syncDirection(kind) {
+    if (kind === 'sync-append-sent')
+        return '↑';
+    if (kind === 'sync-append-confirmed' || kind === 'sync-append-rejected' || kind === 'sync-events-received')
+        return '↓';
+    return '·';
+}
+function syncRowInfo(r) {
+    switch (r.kind) {
+        case 'sync-connect': return r.url ?? 'connected';
+        case 'sync-disconnect': return r.code !== undefined ? `code ${r.code}` : 'disconnect';
+        case 'sync-reconnect-scheduled': return `attempt ${r.attempt} in ${r.nextAttemptInMs}ms`;
+        case 'sync-append-sent': return `${r.eventCount} ev @ v${r.expectedVersion}`;
+        case 'sync-append-confirmed': return `→ v${r.newVersion} (${r.tookMs.toFixed(1)}ms)`;
+        case 'sync-append-rejected': return `${r.reason} (exp ${r.expectedVersion}, act ${r.actualVersion})`;
+        case 'sync-events-received': return `${r.eventCount} ev → v${r.toVersion}`;
+        default: return '';
+    }
+}
+// ── State-Tab (v0.16.0 Replay-Target) ────────────────────────────
+function StateBody({ targets, registry, }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const selected = targets.find(t => t.id === selectedId) ?? targets[0] ?? null;
+    if (targets.length === 0) {
+        return (_jsxs("div", { style: emptyStyle, children: ["Keine ReplayTargets registriert. Variants registrieren ihre Calendar-Stores via ", _jsx("code", { children: "createObservedReplayTarget" }), " \u2014 der Stream-State erscheint hier sobald ein Target l\u00E4uft."] }));
+    }
+    return (_jsxs("div", { style: twoColStyle, children: [_jsx("div", { style: tableScrollStyle, children: _jsxs("table", { style: tableStyle, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: thStyle, children: "Target" }), _jsx("th", { style: thStyle, children: "Stream" }), _jsx("th", { style: thStyle, children: "Status" }), _jsx("th", { style: thNumStyle, children: "v" }), _jsx("th", { style: thNumStyle, children: "schema" }), _jsx("th", { style: thNumStyle, children: "proj" }), _jsx("th", { style: thNumStyle, children: "blocked" })] }) }), _jsx("tbody", { children: targets.map(t => (_jsx(StateRow, { target: t, isSelected: selected?.id === t.id, onSelect: () => setSelectedId(t.id) }, t.id))) })] }) }), _jsx("div", { style: detailColumnStyle, children: selected
+                    ? _jsx(StateDetail, { target: selected, registry: registry })
+                    : _jsx("div", { style: emptyDetailStyle, children: "Klick auf eine Zeile zeigt State + ReadModel." }) })] }));
+}
+/**
+ * Drift erkannt wenn `schema` und `projection` auseinanderlaufen. Visuell
+ * rot markiert in der Tabelle. Beide Werte werden separat angezeigt,
+ * sodass der User sofort sieht, in welche Richtung die Drift geht.
+ */
+function isSchemaDrift(schemaV, projV) {
+    return schemaV !== undefined && schemaV !== projV;
+}
+function StateRow({ target, isSelected, onSelect, }) {
+    const snap = target.snapshot;
+    const statusColor = snap.status === 'error' ? '#d97a6b' : snap.status === 'live' ? '#a8d8a8' : '#e0c878';
+    const drift = isSchemaDrift(snap.lastAppliedSchemaVersion, target.projectionVersion);
+    const driftStyle = drift ? { color: '#d97a6b', fontWeight: 600 } : {};
+    return (_jsxs("tr", { onClick: onSelect, style: { ...trStyle, ...(isSelected ? trSelectedStyle : null), cursor: 'pointer' }, children: [_jsx("td", { style: tdStoreStyle, children: target.name }), _jsx("td", { style: tdMonoStyle, children: target.streamId }), _jsx("td", { style: { ...tdStyle, color: statusColor, fontFamily: 'ui-monospace, monospace', fontWeight: 600 }, children: snap.status }), _jsx("td", { style: tdNumStyle, children: snap.lastAppliedVersion }), _jsx("td", { style: { ...tdNumStyle, ...driftStyle }, title: drift ? 'Schema-Drift: Event-schemaVersion ≠ projection.version' : undefined, children: snap.lastAppliedSchemaVersion ?? '—' }), _jsx("td", { style: { ...tdNumStyle, ...driftStyle }, children: target.projectionVersion }), _jsx("td", { style: tdNumStyle, children: snap.blockedEventCount })] }));
+}
+function StateDetail({ target, registry, }) {
+    const snap = target.snapshot;
+    const drift = isSchemaDrift(snap.lastAppliedSchemaVersion, target.projectionVersion);
+    return (_jsxs("div", { style: detailInnerStyle, children: [_jsxs("div", { style: detailHeaderStyle, children: [_jsx("div", { style: { fontWeight: 600, fontSize: 14 }, children: target.name }), _jsxs("div", { style: { fontSize: 11, color: '#888', marginTop: 4 }, children: ["Stream ", _jsx("code", { style: inlineCodeStyle, children: target.streamId }), " \u00B7 ", _jsxs("span", { style: { opacity: 0.6 }, children: ["id: ", target.id] })] }), drift && (_jsxs("div", { style: { marginTop: 8, padding: '6px 10px', background: '#3a2a1a', color: '#ffc88a', fontSize: 11, borderRadius: 4 }, children: ["\u26A0 Schema-Drift: zuletzt applied Event hat ", _jsxs("code", { style: inlineCodeStyle, children: ["schemaVersion=", snap.lastAppliedSchemaVersion] }), ", aber ", _jsxs("code", { style: inlineCodeStyle, children: ["projection.version=", target.projectionVersion] }), ". Upcaster auf Domain-Ebene pr\u00FCfen."] })), _jsxs("div", { style: detailMetaGridStyle, children: [_jsx(MetaPlainRow, { label: "Status", value: snap.status }), _jsx(MetaPlainRow, { label: "Version", value: String(snap.lastAppliedVersion) }), _jsx(MetaPlainRow, { label: "Schema v", value: snap.lastAppliedSchemaVersion !== undefined ? String(snap.lastAppliedSchemaVersion) : '—' }), _jsx(MetaPlainRow, { label: "Projection v", value: String(target.projectionVersion) }), _jsx(MetaPlainRow, { label: "Last event", value: snap.lastAppliedEventId ?? '—', mono: true }), _jsx(MetaPlainRow, { label: "Blocked", value: String(snap.blockedEventCount) })] })] }), snap.lastError && (_jsx(Section, { title: "Last Error", children: _jsxs("pre", { style: preStyle, children: [snap.lastError.error.message, snap.lastError.event ? `\n\nAt event v${snap.lastError.event.envelope.version} (${snap.lastError.event.type})` : '\n\n(from read() — no event)'] }) })), _jsx(TimeTravelSection, { targetId: target.id, liveVersion: snap.lastAppliedVersion, registry: registry }, target.id)] }));
+}
+function TimeTravelSection({ targetId, liveVersion, registry, }) {
+    // Pilot-Bug-Fix 2026-06-09: Controller-Lifecycle gehört in `useEffect`,
+    // NICHT in `useState`. Vorher: `useState(() => createCtrl)` hielt eine
+    // einzige Instanz, die der `useEffect`-Cleanup in StrictMode-Dev sofort
+    // nach Mount disposed hat — der Re-Setup-Pass feuerte `goTo` auf der
+    // toten Instanz, `view.status='loading'` blieb dauerhaft. In Production
+    // (ohne StrictMode) lief das durch, in Dev hing es immer.
+    //
+    // Lifecycle hier: Setup-1 erzeugt ctrl_A; Cleanup-1 dispose'd + nullt
+    // state; Setup-2 erzeugt ctrl_B; Inner re-rendered mit ctrl_B und der
+    // useSyncExternalStore-Hook subscribed neu.
+    const [controller, setController] = useState(null);
+    useEffect(() => {
+        const ctrl = registry.createTimeTravelController(targetId);
+        setController(ctrl);
+        return () => {
+            ctrl.dispose();
+            setController(curr => (curr === ctrl ? null : curr));
+        };
+    }, [targetId, registry]);
+    if (!controller) {
+        return (_jsx(Section, { title: "Time Travel \u00B7 \u2026", children: _jsx("div", { style: { opacity: 0.6, fontSize: 12 }, children: "Initialisiere \u2026" }) }));
+    }
+    return (_jsx(TimeTravelSectionInner, { controller: controller, liveVersion: liveVersion }));
+}
+function TimeTravelSectionInner({ controller, liveVersion, }) {
+    const view = useSyncExternalStore(controller.subscribe, () => controller.view, () => controller.view);
+    // Auto-Follow Live: solange `hasUserMoved=false` zieht der Cursor
+    // dem Live-Stand nach. Sobald der User scrubt, friert die Position
+    // fest. `→ Live`-Button setzt das Flag zurück.
+    //
+    // Deps bewusst nur `[hasUserMoved, liveVersion, controller]`:
+    // - status/cursor SIND NICHT in deps → kein Re-Run pro Status-Tick
+    //   (kein Spam).
+    // - Wenn Live während eines laufenden goTo(oldLive) springt, läuft
+    //   der Effect mit neuem liveVersion und ruft goTo(newLive). Der
+    //   Controller invalidiert den alten Read via running-counter
+    //   (Stale-Cancel). Genau dafür ist der running-counter da.
+    const [hasUserMoved, setHasUserMoved] = useState(false);
+    useEffect(() => {
+        if (hasUserMoved)
+            return;
+        void controller.goTo(liveVersion);
+    }, [hasUserMoved, liveVersion, controller]);
+    const [mode, setMode] = useState('live');
+    const [diff, setDiff] = useState([]);
+    const [diffLoading, setDiffLoading] = useState(false);
+    // Diff: pro view.status sauberen UI-Zustand. Nicht-ready löscht den
+    // alten Diff, damit kein stale-Inhalt zur falschen Version stehen
+    // bleibt. Promise mit catch/finally + stale-Flag.
+    useEffect(() => {
+        let stale = false;
+        if (view.status !== 'ready') {
+            setDiff([]);
+            setDiffLoading(view.status === 'loading');
+            return () => { stale = true; };
+        }
+        setDiffLoading(true);
+        const compareTo = mode === 'previous' ? Math.max(0, view.cursor - 1) : undefined;
+        controller.diff(compareTo).then((d) => {
+            if (stale)
+                return;
+            setDiff(d);
+        }, () => {
+            if (stale)
+                return;
+            setDiff([]);
+        }).finally(() => {
+            if (stale)
+                return;
+            setDiffLoading(false);
+        });
+        return () => { stale = true; };
+    }, [view.cursor, view.status, mode, controller]);
+    const max = Math.max(liveVersion, view.maxVersion);
+    // atLive = synchron mit Live (nicht: am Slider-Ende). Falls
+    // view.maxVersion temporär > liveVersion, kann der User über
+    // liveVersion hinaus scrubben — aber "am Live" heißt explizit
+    // cursor === liveVersion.
+    const atLive = view.cursor === liveVersion;
+    const stateLabel = atLive ? 'Live' : `v${view.cursor}`;
+    return (_jsxs(Section, { title: `Time Travel · ${stateLabel} / max v${max}`, children: [_jsxs("div", { style: ttRowStyle, children: [_jsx("input", { type: "range", min: 0, max: max, value: view.cursor, onChange: (e) => {
+                            setHasUserMoved(true);
+                            void controller.goTo(Number(e.target.value));
+                        }, style: sliderStyle, "aria-label": "Time-Travel-Cursor" }), _jsx("button", { type: "button", onClick: () => {
+                            // → Live = „folge wieder Live": Flag zurücksetzen, der
+                            // Auto-Follow-Effect macht den goTo(liveVersion). Keine
+                            // doppelte goTo-Quelle.
+                            setHasUserMoved(false);
+                        }, disabled: atLive, style: atLive ? ttBtnDisabledStyle : ttBtnStyle, title: "Auto-Follow Live aktivieren", children: "\u2192 Live" })] }), _jsxs("div", { style: ttMetaRowStyle, children: [_jsxs("span", { children: ["Status: ", _jsx("code", { style: inlineCodeStyle, children: view.status }), view.status === 'loading' && ' · liest Stream …', view.status === 'error' && view.lastError && ` · ${view.lastError.message}`, !hasUserMoved && view.status === 'ready' && ' · auto-follow Live'] }), _jsxs("span", { children: ["Vergleich:", _jsx(DiffModeButton, { mode: mode, setMode: setMode, value: "live", label: "vs Live" }), _jsx(DiffModeButton, { mode: mode, setMode: setMode, value: "previous", label: "vs Previous", disabled: view.cursor === 0 })] })] }), _jsx(Section, { title: `Aggregate State @ ${stateLabel}`, children: _jsx("pre", { style: preStyle, children: safeStringify(view.snapshot.state) }) }), _jsx(Section, { title: `ReadModel @ ${stateLabel}`, children: _jsx("pre", { style: preStyle, children: safeStringify(view.snapshot.readModel) }) }), _jsx(DiffPanel, { diff: diff, loading: diffLoading, mode: mode, cursor: view.cursor, atLive: atLive })] }));
+}
+function DiffModeButton({ mode, setMode, value, label, disabled, }) {
+    const active = mode === value;
+    return (_jsx("button", { type: "button", onClick: () => setMode(value), disabled: disabled, style: active ? ttToggleActiveStyle : disabled ? ttToggleDisabledStyle : ttToggleStyle, children: label }));
+}
+function DiffPanel({ diff, loading, mode, cursor, atLive, }) {
+    if (loading && diff.length === 0) {
+        return _jsx("div", { style: diffEmptyStyle, children: "diff l\u00E4dt \u2026" });
+    }
+    if (mode === 'live' && atLive) {
+        return _jsx("div", { style: diffEmptyStyle, children: "Cursor ist am Live-Stand \u2014 kein Diff." });
+    }
+    if (mode === 'previous' && cursor === 0) {
+        return _jsx("div", { style: diffEmptyStyle, children: "v0 hat keinen Vorg\u00E4nger." });
+    }
+    if (diff.length === 0) {
+        return _jsx("div", { style: diffEmptyStyle, children: "Kein Unterschied im Aggregate-State." });
+    }
+    return (_jsx("div", { style: diffListStyle, children: diff.map((entry, i) => (_jsx(DiffRow, { entry: entry }, `${entry.path}-${i}`))) }));
+}
+function DiffRow({ entry }) {
+    const kindColor = entry.kind === 'added' ? '#a8d8a8' :
+        entry.kind === 'removed' ? '#d97a6b' :
+            '#e0c878';
+    return (_jsxs("div", { style: diffRowStyle, children: [_jsx("span", { style: { ...diffKindStyle, color: kindColor }, children: entry.kind === 'added' ? '+' : entry.kind === 'removed' ? '−' : '~' }), _jsx("code", { style: diffPathStyle, children: entry.path || '(root)' }), _jsxs("span", { style: diffArrowStyle, children: [_jsx("code", { style: diffValStyle, children: safeStringify(entry.before) }), _jsx("span", { style: { margin: '0 6px', opacity: 0.5 }, children: "\u2192" }), _jsx("code", { style: diffValStyle, children: safeStringify(entry.after) })] })] }));
+}
+// ── Header ────────────────────────────────────────────────────────
+function PanelHeader({ events, streams, stores, syncTransports, replayTargets, filtered, paused, onTogglePause, onClear, onExport, }) {
+    return (_jsxs("div", { style: headerStyle, children: [_jsxs("div", { style: headerRowStyle, children: [_jsx("div", { style: titleStyle, children: "Event-Inspector" }), _jsxs("div", { style: statsStyle, children: [_jsx(Stat, { label: "Events", value: filtered === events ? events : `${filtered} / ${events}` }), _jsx(Stat, { label: "Streams", value: streams }), _jsx(Stat, { label: "Stores", value: stores }), syncTransports > 0 && _jsx(Stat, { label: "Sync", value: syncTransports }), replayTargets > 0 && _jsx(Stat, { label: "Replay", value: replayTargets })] }), _jsx("div", { style: { flex: 1 } }), _jsx("button", { onClick: onTogglePause, style: paused ? buttonActiveStyle : buttonStyle, title: paused ? 'Live-Stream wieder aufnehmen' : 'Live-Stream einfrieren', children: paused ? '▶ Resume' : '⏸ Pause' }), _jsx("button", { onClick: onClear, style: buttonStyle, title: "Sichtbare Events ausblenden (folgende bleiben sichtbar)", children: "Clear" }), _jsx("button", { onClick: onExport, style: buttonStyle, title: "Snapshot des aktuellen DevtoolsState als JSON herunterladen (v0.16.6)", "aria-label": "Snapshot als JSON exportieren", children: "\u21E9 Export" })] }), _jsx("div", { style: subtitleStyle, children: "Live-Stream aller Events aus den registrierten EventStores. Klick auf eine Zeile \u00F6ffnet die Drei-Schichten-Sicht." })] }));
+}
+/**
+ * Download-Trigger via temporären `<a download>`. Pilot-Schärfungen:
+ * - Date.now() läuft beim Button-Klick im UI-Layer, NICHT im Core-
+ *   Helper — exportSnapshot bleibt deterministisch.
+ * - Cleanup im try/finally — wenn `a.click()` synchron wirft (manche
+ *   Browser-Policies, Test-Mocks), MÜSSEN trotzdem removeChild und
+ *   revokeObjectURL laufen. Sonst URL-Leak + DOM-Müll.
+ */
+function triggerDownload(filename, content) {
+    const blob = new Blob([content], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    try {
+        a.click();
+    }
+    finally {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+}
+function Stat({ label, value }) {
+    return (_jsxs("span", { style: statItemStyle, children: [_jsx("span", { style: statValueStyle, children: value }), _jsx("span", { style: statLabelStyle, children: label })] }));
+}
+// ── Filter-Bar ────────────────────────────────────────────────────
+function FilterBar({ stores, storeFilter, onStoreFilter, typeFilter, onTypeFilter, streamFilter, onStreamFilter, }) {
+    return (_jsxs("div", { style: filterBarStyle, children: [_jsxs("select", { value: storeFilter, onChange: e => onStoreFilter(e.target.value), style: selectStyle, title: "Auf einen Store filtern", children: [_jsx("option", { value: "", children: "Alle Stores" }), stores.map(s => (_jsx("option", { value: s.id, children: s.name }, s.id)))] }), _jsx("input", { type: "text", placeholder: "Type filter (substring)", value: typeFilter, onChange: e => onTypeFilter(e.target.value), style: inputStyle }), _jsx("input", { type: "text", placeholder: "Stream filter (substring)", value: streamFilter, onChange: e => onStreamFilter(e.target.value), style: inputStyle })] }));
+}
+// ── Events-Body (Tabelle + Detail-Sidebar) ────────────────────────
+function EventsBody({ state, visible, selected, selectedSeq, onSelect, paused, }) {
+    if (state.eventStores.length === 0 && state.events.length === 0) {
+        return (_jsx("div", { style: emptyStyle, children: "Keine EventStores registriert und kein History-Buffer. Wechsel zur Variant \u201EMinimal\", \u201EMulti-View\", \u2026 \u2014 sobald eine Variant einen observed Store mountet, erscheinen die Events hier." }));
+    }
+    if (state.events.length === 0) {
+        return (_jsxs("div", { style: emptyStyle, children: ["EventStore registriert (", state.eventStores.map(s => s.name).join(', '), "), aber noch keine Events. Wechsel zu einer Calendar-Variant und lege einen Termin an."] }));
+    }
+    // state.events.length > 0 — auch wenn eventStores leer ist (Variant
+    // wurde gewechselt, rolling-window-Buffer überlebt). Tabelle rendern.
+    if (visible.length === 0) {
+        return (_jsx("div", { style: emptyStyle, children: "Keine Events sichtbar. Filter ggf. zur\u00FCcksetzen oder \u201EClear\" r\u00FCckg\u00E4ngig (Variant neu \u00F6ffnen)." }));
+    }
+    return (_jsxs("div", { style: twoColStyle, children: [_jsxs("div", { style: tableScrollStyle, children: [paused && _jsx("div", { style: pausedBannerStyle, children: "\u23F8 Live-Stream pausiert \u2014 Ansicht eingefroren." }), _jsxs("table", { style: tableStyle, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: thStyle, children: "Zeit" }), _jsx("th", { style: thStyle, children: "Store" }), _jsx("th", { style: thStyle, children: "Type" }), _jsx("th", { style: thStyle, children: "Label" }), _jsx("th", { style: thStyle, children: "Stream" }), _jsx("th", { style: thStyle, children: "Entity" }), _jsx("th", { style: thNumStyle, children: "v" }), _jsx("th", { style: thNumStyle, children: "sv" }), _jsx("th", { style: thStyle, children: "Event-ID" }), _jsx("th", { style: thStyle, children: "Corr" }), _jsx("th", { style: thStyle, children: "Cau" }), _jsx("th", { style: thNumStyle, children: "tookMs" })] }) }), _jsx("tbody", { children: visible.slice().reverse().map(e => (_jsx(EventRow, { captured: e, isSelected: e.seq === selectedSeq, onSelect: () => onSelect(e.seq === selectedSeq ? null : e.seq) }, e.seq))) })] })] }), _jsx("div", { style: detailColumnStyle, children: selected
+                    ? _jsx(EventDetail, { captured: selected })
+                    : _jsx("div", { style: emptyDetailStyle, children: "Klick auf eine Zeile zeigt Envelope, Metadata und Payload." }) })] }));
+}
+function EventRow({ captured, isSelected, onSelect, }) {
+    const { event, streamId, storeName, tookMs } = captured;
+    const label = typeToLabel(event.type);
+    const sev = typeSeverity(event.type);
+    const schemaVersion = event.metadata.schemaVersion;
+    return (_jsxs("tr", { onClick: onSelect, style: { ...trStyle, ...(isSelected ? trSelectedStyle : null), cursor: 'pointer' }, children: [_jsx("td", { style: tdStyle, children: formatTime(event.envelope.timestamp) }), _jsx("td", { style: tdStoreStyle, children: storeName }), _jsx("td", { style: { ...tdStyle, color: sev === 'destructive' ? '#d97a6b' : '#5da3dc', fontFamily: 'ui-monospace, monospace' }, children: event.type }), _jsx("td", { style: tdStyle, children: label }), _jsx("td", { style: tdMonoStyle, children: streamId }), _jsx("td", { style: tdMonoStyle, children: event.envelope.entityId }), _jsx("td", { style: tdNumStyle, children: event.envelope.version }), _jsx("td", { style: tdNumStyle, children: schemaVersion ?? '—' }), _jsx("td", { style: tdMonoStyle, children: stub(event.envelope.id) }), _jsx("td", { style: tdMonoStyle, children: stub(event.metadata.correlationId) }), _jsx("td", { style: tdMonoStyle, children: stub(event.metadata.causationId) }), _jsx("td", { style: tdNumStyle, children: tookMs.toFixed(2) })] }));
+}
+// ── Helpers ────────────────────────────────────────────────────────
+function formatTime(ms) {
+    const d = new Date(ms);
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    const ss = String(d.getSeconds()).padStart(2, '0');
+    return `${hh}:${mm}:${ss}`;
+}
+function typeToLabel(type) {
+    const lastSegment = type.split('.').pop() ?? type;
+    const spaced = lastSegment.replace(/([a-z])([A-Z])/g, '$1 $2');
+    if (spaced.length === 0)
+        return type;
+    return spaced[0].toUpperCase() + spaced.slice(1).toLowerCase();
+}
+function typeSeverity(type) {
+    return /Cancelled|Deleted|Failed|Rejected|Declined/i.test(type) ? 'destructive' : 'normal';
+}
+// ── Styles ─────────────────────────────────────────────────────────
+const pageStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    background: '#1a1a1a',
+    color: '#eee',
+    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+    fontSize: 13,
+};
+const headerStyle = {
+    padding: '10px 16px 8px',
+    background: '#222',
+    borderBottom: '1px solid #333',
+};
+const headerRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+};
+const titleStyle = {
+    fontSize: 14,
+    fontWeight: 600,
+    color: '#fff',
+};
+const subtitleStyle = {
+    marginTop: 6,
+    fontSize: 11,
+    color: '#888',
+};
+const statsStyle = {
+    display: 'flex',
+    gap: 14,
+    marginLeft: 8,
+};
+const statItemStyle = {
+    display: 'inline-flex',
+    alignItems: 'baseline',
+    gap: 4,
+};
+const statValueStyle = {
+    fontFamily: 'ui-monospace, "SF Mono", monospace',
+    fontSize: 13,
+    fontWeight: 600,
+    color: '#fff',
+};
+const statLabelStyle = {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    color: '#888',
+};
+const tabBarStyle = {
+    display: 'flex',
+    gap: 0,
+    background: '#1e1e1e',
+    borderBottom: '1px solid #2a2a2a',
+    padding: '0 16px',
+};
+const tabStyle = {
+    background: 'transparent',
+    border: 'none',
+    color: '#888',
+    padding: '10px 16px',
+    fontSize: 12,
+    cursor: 'pointer',
+    borderBottom: '2px solid transparent',
+};
+const tabActiveStyle = {
+    ...tabStyle,
+    color: '#fff',
+    borderBottom: '2px solid #5082dc',
+    fontWeight: 600,
+};
+const filterBarStyle = {
+    display: 'flex',
+    gap: 8,
+    padding: '8px 16px',
+    background: '#1e1e1e',
+    borderBottom: '1px solid #2a2a2a',
+};
+const selectStyle = {
+    background: '#262626',
+    color: '#eee',
+    border: '1px solid #3a3a3a',
+    borderRadius: 4,
+    padding: '4px 8px',
+    fontSize: 12,
+    minWidth: 140,
+};
+const inputStyle = {
+    background: '#262626',
+    color: '#eee',
+    border: '1px solid #3a3a3a',
+    borderRadius: 4,
+    padding: '4px 8px',
+    fontSize: 12,
+    flex: 1,
+    minWidth: 0,
+};
+const buttonStyle = {
+    background: '#2e2e2e',
+    color: '#ddd',
+    border: '1px solid #3a3a3a',
+    borderRadius: 4,
+    padding: '4px 10px',
+    fontSize: 12,
+    cursor: 'pointer',
+};
+const buttonActiveStyle = {
+    ...buttonStyle,
+    background: '#3a4a6a',
+    borderColor: '#5082dc',
+    color: '#fff',
+};
+const pausedBannerStyle = {
+    padding: '6px 12px',
+    background: '#3a2a1a',
+    color: '#ffc88a',
+    borderBottom: '1px solid #443322',
+    fontSize: 12,
+};
+const tableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: 12,
+};
+const thStyle = {
+    textAlign: 'left',
+    padding: '8px 10px',
+    background: '#1e1e1e',
+    borderBottom: '1px solid #333',
+    position: 'sticky',
+    top: 0,
+    fontWeight: 600,
+    fontSize: 11,
+    textTransform: 'uppercase',
+    letterSpacing: 0.4,
+    color: '#999',
+};
+const thNumStyle = {
+    ...thStyle,
+    textAlign: 'right',
+};
+const trStyle = {
+    borderBottom: '1px solid #2a2a2a',
+};
+const trSelectedStyle = {
+    background: 'rgba(80, 130, 220, 0.22)',
+    outline: '1px solid rgba(80, 130, 220, 0.55)',
+    outlineOffset: -1,
+};
+const tdStyle = {
+    padding: '6px 10px',
+    fontSize: 12,
+};
+const tdMonoStyle = {
+    ...tdStyle,
+    fontFamily: 'ui-monospace, "SF Mono", monospace',
+    fontSize: 11,
+    color: '#bbb',
+};
+const tdNumStyle = {
+    ...tdStyle,
+    fontFamily: 'ui-monospace, "SF Mono", monospace',
+    fontSize: 11,
+    color: '#888',
+    textAlign: 'right',
+};
+const tdStoreStyle = {
+    ...tdStyle,
+    fontSize: 11,
+    color: '#9ec8ff',
+};
+// ── Time-Travel ────────────────────────────────────────────────────
+const ttRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    padding: '8px 0 4px',
+};
+const sliderStyle = {
+    flex: 1,
+    accentColor: '#7aaef5',
+};
+const ttBtnStyle = {
+    background: '#2a2a2a',
+    color: '#ddd',
+    border: '1px solid #444',
+    borderRadius: 4,
+    padding: '4px 10px',
+    fontSize: 11,
+    cursor: 'pointer',
+};
+const ttBtnDisabledStyle = {
+    ...ttBtnStyle,
+    opacity: 0.4,
+    cursor: 'default',
+};
+const ttMetaRowStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontSize: 11,
+    color: '#999',
+    padding: '4px 0 8px',
+    gap: 10,
+};
+const ttToggleStyle = {
+    background: 'transparent',
+    color: '#bbb',
+    border: '1px solid #333',
+    borderRadius: 3,
+    padding: '2px 8px',
+    marginLeft: 6,
+    fontSize: 11,
+    cursor: 'pointer',
+};
+const ttToggleActiveStyle = {
+    ...ttToggleStyle,
+    background: '#3a4f6a',
+    borderColor: '#5a7aa6',
+    color: '#e8f0ff',
+};
+const ttToggleDisabledStyle = {
+    ...ttToggleStyle,
+    opacity: 0.4,
+    cursor: 'default',
+};
+const diffEmptyStyle = {
+    padding: '8px 12px',
+    fontSize: 11,
+    color: '#888',
+    background: '#161616',
+    borderRadius: 4,
+    fontStyle: 'italic',
+};
+const diffListStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    fontSize: 11,
+    background: '#161616',
+    borderRadius: 4,
+    padding: 6,
+    maxHeight: 240,
+    overflow: 'auto',
+};
+const diffRowStyle = {
+    display: 'grid',
+    gridTemplateColumns: '16px minmax(80px, 200px) 1fr',
+    alignItems: 'center',
+    gap: 6,
+    padding: '2px 4px',
+    fontFamily: 'ui-monospace, "SF Mono", monospace',
+};
+const diffKindStyle = {
+    fontWeight: 700,
+    textAlign: 'center',
+};
+const diffPathStyle = {
+    fontSize: 11,
+    color: '#ddd',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const diffArrowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+};
+const diffValStyle = {
+    fontSize: 11,
+    background: '#0f0f0f',
+    padding: '1px 5px',
+    borderRadius: 3,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '40%',
+};
+//# sourceMappingURL=EventInspectorPanel.js.map