@swirls/looms 0.0.2 → 0.2.0

package/dist/debugger/app/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Looms debugger</title>
+    <script type="module" crossorigin src="./assets/index-Qb371t_O.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-CbXtAM7H.js">
+    <link rel="stylesheet" crossorigin href="./assets/index-B3Ah8WAE.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/debugger/components/composer.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Message input with one primary action. Enter sends, Shift+Enter adds a newline,
+ * and `toolbar` holds secondary controls such as delivery mode.
+ */
+export declare function Composer({ value, onChange, onSubmit, pending, disabled, placeholder, submitLabel, toolbar, error, className, }: {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    pending?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    submitLabel?: string;
+    toolbar?: ReactNode;
+    error?: string | null;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/debugger/components/composer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, LoaderCircle } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from '../ui/button.js';
+import { Kbd } from '../ui/panel.js';
+/**
+ * Message input with one primary action. Enter sends, Shift+Enter adds a newline,
+ * and `toolbar` holds secondary controls such as delivery mode.
+ */
+export function Composer({ value, onChange, onSubmit, pending = false, disabled = false, placeholder = 'Message', submitLabel = 'Send', toolbar, error, className, }) {
+    const canSubmit = !pending && !disabled && value.trim().length > 0;
+    return (_jsxs("form", { className: cn('border-border shrink-0 border-t p-3', className), onSubmit: (event) => {
+            event.preventDefault();
+            if (canSubmit) {
+                onSubmit();
+            }
+        }, children: [_jsxs("div", { className: "border-input bg-card focus-within:border-ring/70 focus-within:ring-ring/25 rounded-lg border transition-[border-color,box-shadow] duration-150 focus-within:ring-[3px]", children: [_jsx("textarea", { "data-slot": "composer-input", value: value, rows: 1, placeholder: placeholder, "aria-label": placeholder, disabled: disabled, onChange: (event) => onChange(event.target.value), onKeyDown: (event) => {
+                            if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+                                event.preventDefault();
+                                if (canSubmit) {
+                                    onSubmit();
+                                }
+                            }
+                        }, className: "placeholder:text-muted-foreground block field-sizing-content max-h-48 min-h-11 w-full resize-none bg-transparent px-3 pt-2.5 pb-1 text-[13px] leading-relaxed outline-none disabled:cursor-not-allowed disabled:opacity-50" }), _jsxs("div", { className: "flex h-10 items-center gap-1 pr-1.5 pl-1.5", children: [toolbar, _jsxs("span", { className: "text-muted-foreground ml-auto hidden items-center gap-1 pr-1 text-[10px] @sm:flex", children: [_jsx(Kbd, { children: "\u21B5" }), submitLabel.toLowerCase(), _jsx(Kbd, { className: "ml-1.5", children: "\u21E7\u21B5" }), "newline"] }), _jsx(Button, { type: "submit", size: "icon-sm", "aria-label": submitLabel, disabled: !canSubmit, className: "ml-auto rounded-full @sm:ml-0", children: pending ? _jsx(LoaderCircle, { className: "animate-spin" }) : _jsx(ArrowUp, {}) })] })] }), error ? _jsx("p", { className: "text-status-failed mt-2 px-1 text-[11px]", children: error }) : null] }));
+}

package/dist/debugger/components/debugger-split.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-import type { ThreadTree } from '@swirls/looms/core';
+import type { ThreadNode, ThreadTree } from '@swirls/looms/core';
 import type { DebuggerEvent, EventStreamCatalog, ReplayLoader } from '../contracts';
+export declare function findThreadName(node: ThreadNode | null, threadId: string | undefined): string | undefined;
 export declare function DebuggerSplit<TEvent extends DebuggerEvent>({ runId, runStatus, tree, events, eventCounts, startedAt, selectedThread, onSelectThread, selectedSeq, onSelectSeq, catalog, loadReplayStep, renderInspector, orientation, showTreeHeading, className, treeClassName, streamClassName, }: {
     runId: string;
     runStatus: string;

package/dist/debugger/components/debugger-split.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/cn.js';
 import { EventStream } from './event-stream.js';
 import { RunTree } from './run-tree.js';
-function findThreadName(node, threadId) {
+export function findThreadName(node, threadId) {
     if (!node || !threadId) {
         return undefined;
     }
@@ -21,5 +21,5 @@ export function DebuggerSplit({ runId, runStatus, tree, events, eventCounts, sta
     const vertical = orientation === 'vertical';
     return (_jsxs("div", { className: cn('grid h-full min-h-0', vertical
             ? 'grid-rows-[minmax(0,38%)_minmax(0,1fr)]'
-            : 'grid-cols-1 min-[36rem]:grid-cols-[11rem_minmax(0,1fr)]', className), children: [_jsx("section", { "aria-label": "Run tree", className: cn('border-border min-h-0 overflow-auto border-b py-2', !vertical && 'min-[36rem]:border-r min-[36rem]:border-b-0', treeClassName), children: _jsx(RunTree, { showHeading: showTreeHeading, runId: runId, runStatus: runStatus, tree: tree, eventCounts: eventCounts, totalEventCount: events.length, selectedThread: selectedThread, onSelectThread: onSelectThread }) }), _jsx("section", { className: cn('min-h-0 overflow-hidden', streamClassName), children: _jsx(EventStream, { events: events, startedAt: startedAt, threadId: selectedThread, threadLabel: findThreadName(tree.root, selectedThread), selectedSeq: selectedSeq, onSelectSeq: onSelectSeq, catalog: catalog, loadReplayStep: loadReplayStep, renderInspector: renderInspector }) })] }));
+            : 'grid-cols-1 min-[36rem]:grid-cols-[14rem_minmax(0,1fr)]', className), children: [_jsx("section", { "aria-label": "Run tree", className: cn('border-border min-h-0 overflow-hidden border-b', !vertical && 'min-[36rem]:border-r min-[36rem]:border-b-0', treeClassName), children: _jsx(RunTree, { showHeading: showTreeHeading, runId: runId, runStatus: runStatus, tree: tree, eventCounts: eventCounts, totalEventCount: events.length, selectedThread: selectedThread, onSelectThread: onSelectThread }) }), _jsx("section", { className: cn('min-h-0 overflow-hidden', streamClassName), children: _jsx(EventStream, { events: events, startedAt: startedAt, threadId: selectedThread, threadLabel: findThreadName(tree.root, selectedThread), onClearThread: selectedThread ? () => onSelectThread(undefined) : undefined, selectedSeq: selectedSeq, onSelectSeq: onSelectSeq, catalog: catalog, loadReplayStep: loadReplayStep, renderInspector: renderInspector }) })] }));
 }

package/dist/debugger/components/event-inspector.d.ts

@@ -1,5 +1,6 @@
 import type { DebuggerEvent, ReplayLoader } from '../contracts';
-export declare function EventInspector({ event, loadReplayStep, }: {
+export declare function EventInspector({ event, loadReplayStep, onClose, }: {
     event: DebuggerEvent;
     loadReplayStep?: ReplayLoader;
+    onClose?: () => void;
 }): import("react").JSX.Element;

package/dist/debugger/components/event-inspector.js

@@ -1,9 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { asJson } from '@swirls/looms/core';
+import { Button } from '../ui/button.js';
+import { ScrollArea } from '../ui/scroll-area.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs.js';
-import { JsonView } from './json-view.js';
-export function EventInspector({ event, loadReplayStep, }) {
+import { JsonTree } from './json-tree.js';
+function Pane({ value, children }) {
+    return (_jsx(TabsContent, { value: value, className: "min-h-0", children: _jsx(ScrollArea, { className: "h-full", children: _jsx("div", { className: "px-3 pb-3", children: children }) }) }));
+}
+function StepJson({ step, pick, }) {
+    return step ? (_jsx(JsonTree, { value: pick(step), defaultExpandDepth: 2 })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: "Loading\u2026" }));
+}
+export function EventInspector({ event, loadReplayStep, onClose, }) {
     const [step, setStep] = useState(null);
     const canReplay = loadReplayStep !== undefined;
     useEffect(() => {
@@ -21,18 +30,18 @@ export function EventInspector({ event, loadReplayStep, }) {
             cancelled = true;
         };
     }, [event.runId, event.seq, loadReplayStep]);
-    return (_jsxs("div", { className: "border-border flex max-h-[45%] min-h-0 shrink-0 flex-col border-t", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 px-3 py-1.5 text-[11px]", children: [_jsx("span", { className: "font-mono", children: event.seq }), _jsx("span", { className: "text-foreground truncate font-mono", children: event.type })] }), _jsxs(Tabs, { defaultValue: "payload", className: "min-h-0 flex-1 px-3 pb-2", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "payload", children: "Payload" }), _jsx(TabsTrigger, { value: "envelope", children: "Envelope" }), canReplay ? _jsx(TabsTrigger, { value: "before", children: "Before" }) : null, canReplay ? _jsx(TabsTrigger, { value: "after", children: "After" }) : null, canReplay ? _jsx(TabsTrigger, { value: "effects", children: "Effects" }) : null] }), _jsx(TabsContent, { value: "payload", className: "overflow-auto", children: _jsx(JsonView, { value: event.payload }) }), _jsx(TabsContent, { value: "envelope", className: "overflow-auto", children: _jsx(JsonView, { value: asJson({
-                                id: event.id,
-                                runId: event.runId,
-                                seq: event.seq,
-                                ts: event.ts,
-                                type: event.type,
-                                threadId: event.threadId,
-                                parentThreadId: event.parentThreadId ?? null,
-                                causationId: event.causationId ?? null,
-                                correlationId: event.correlationId ?? null,
-                                effectId: event.effectId ?? null,
-                                origin: event.origin,
-                                ephemeral: event.ephemeral ?? false,
-                            }) }) }), canReplay ? (_jsx(TabsContent, { value: "before", className: "overflow-auto", children: step ? (_jsx(JsonView, { value: asJson(step.before) })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: "Loading\u2026" })) })) : null, canReplay ? (_jsx(TabsContent, { value: "after", className: "overflow-auto", children: step ? (_jsx(JsonView, { value: asJson(step.after) })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: "Loading\u2026" })) })) : null, canReplay ? (_jsx(TabsContent, { value: "effects", className: "overflow-auto", children: step ? (_jsx(JsonView, { value: asJson(step.effects) })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: "Loading\u2026" })) })) : null] })] }));
+    return (_jsx("div", { className: "border-border bg-sidebar flex h-[45%] min-h-40 shrink-0 flex-col border-t", children: _jsxs(Tabs, { defaultValue: "payload", className: "min-h-0 flex-1 gap-0", children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 pr-2 pl-3", children: [_jsxs("span", { className: "text-muted-foreground font-mono text-[11px] tabular-nums", children: ["#", event.seq] }), _jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: event.type }), _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "payload", children: "Payload" }), _jsx(TabsTrigger, { value: "envelope", children: "Envelope" }), canReplay ? _jsx(TabsTrigger, { value: "state", children: "State" }) : null, canReplay ? _jsx(TabsTrigger, { value: "effects", children: "Effects" }) : null] }), onClose ? (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close inspector", onClick: onClose, children: _jsx(X, {}) })) : null] }), _jsx(Pane, { value: "payload", children: _jsx(JsonTree, { value: event.payload, defaultExpandDepth: 2 }) }), _jsx(Pane, { value: "envelope", children: _jsx(JsonTree, { value: asJson({
+                            id: event.id,
+                            runId: event.runId,
+                            seq: event.seq,
+                            ts: event.ts,
+                            type: event.type,
+                            threadId: event.threadId,
+                            parentThreadId: event.parentThreadId ?? null,
+                            causationId: event.causationId ?? null,
+                            correlationId: event.correlationId ?? null,
+                            effectId: event.effectId ?? null,
+                            origin: event.origin,
+                            ephemeral: event.ephemeral ?? false,
+                        }) }) }), canReplay ? (_jsx(Pane, { value: "state", children: _jsxs("div", { className: "grid gap-3", children: [_jsxs("section", { children: [_jsx("h4", { className: "text-muted-foreground mb-1 text-[11px] font-medium", children: "Before" }), _jsx(StepJson, { step: step, pick: (loaded) => asJson(loaded.before) })] }), _jsxs("section", { children: [_jsx("h4", { className: "text-muted-foreground mb-1 text-[11px] font-medium", children: "After" }), _jsx(StepJson, { step: step, pick: (loaded) => asJson(loaded.after) })] })] }) })) : null, canReplay ? (_jsx(Pane, { value: "effects", children: _jsx(StepJson, { step: step, pick: (loaded) => asJson(loaded.effects) }) })) : null] }) }));
 }

package/dist/debugger/components/event-stream.d.ts

@@ -1,10 +1,11 @@
 import { type ReactNode } from 'react';
 import type { DebuggerEvent, EventStreamCatalog, ReplayLoader } from '../contracts';
-export declare function EventStream<TEvent extends DebuggerEvent>({ events, startedAt, threadId, threadLabel, selectedSeq, onSelectSeq, catalog, loadReplayStep, renderInspector, }: {
+export declare function EventStream<TEvent extends DebuggerEvent>({ events, startedAt, threadId, threadLabel, onClearThread, selectedSeq, onSelectSeq, catalog, loadReplayStep, renderInspector, }: {
     events: readonly TEvent[];
     startedAt?: number;
     threadId?: string;
     threadLabel?: string;
+    onClearThread?: () => void;
     selectedSeq?: number;
     onSelectSeq: (seq: number | undefined) => void;
     catalog?: EventStreamCatalog<TEvent>;

package/dist/debugger/components/event-stream.js

@@ -1,25 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { Check, Search, SlidersHorizontal } from 'lucide-react';
-import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowDownToLine, Search, SlidersHorizontal, X } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
 import { defaultEventCatalog } from '../events/catalog.js';
 import { cn, shortId } from '../lib/cn.js';
 import { getEventMeta } from '../lib/event-meta.js';
 import { useVisibleEvents } from '../lib/visible-events.js';
-import { Checkbox } from '../ui/checkbox.js';
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
 import { Input } from '../ui/input.js';
-import { ScrollArea } from '../ui/scroll-area.js';
+import { PanelHeader, PanelTitle } from '../ui/panel.js';
 import { EventInspector } from './event-inspector.js';
-const ROW_ESTIMATE = 28;
-const FOLLOW_THRESHOLD = 24;
-export function EventStream({ events, startedAt, threadId, threadLabel, selectedSeq, onSelectSeq, catalog, loadReplayStep, renderInspector, }) {
+import { FollowList } from './follow-list.js';
+const ROW_ESTIMATE = 26;
+export function EventStream({ events, startedAt, threadId, threadLabel, onClearThread, selectedSeq, onSelectSeq, catalog, loadReplayStep, renderInspector, }) {
     const eventCatalog = catalog ?? defaultEventCatalog;
     const [query, setQuery] = useState('');
     const [follow, setFollow] = useState(true);
     const [families, setFamilies] = useState(() => new Set(eventCatalog.families));
-    const parentRef = useRef(null);
-    const followLock = useRef(false);
     const selected = useMemo(() => {
         if (selectedSeq === undefined) {
             return undefined;
@@ -37,53 +34,6 @@ export function EventStream({ events, startedAt, threadId, threadLabel, selected
         threadId,
         catalog: eventCatalog,
     });
-    const virtualizer = useVirtualizer({
-        count: visible.length,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => ROW_ESTIMATE,
-        overscan: 16,
-        paddingStart: 4,
-        paddingEnd: 4,
-        getItemKey: (index) => visible[index]?.id ?? index,
-        // Avoid flushSync during ref measurement / follow-scroll under high event rates.
-        useFlushSync: false,
-    });
-    useEffect(() => {
-        if (!follow || visible.length === 0) {
-            return () => undefined;
-        }
-        followLock.current = true;
-        let timer;
-        const rafId = requestAnimationFrame(() => {
-            virtualizer.scrollToIndex(visible.length - 1, { align: 'end' });
-            timer = setTimeout(() => {
-                followLock.current = false;
-            }, 50);
-        });
-        return () => {
-            cancelAnimationFrame(rafId);
-            if (timer !== undefined) {
-                clearTimeout(timer);
-            }
-            followLock.current = false;
-        };
-    }, [follow, visible.length, virtualizer]);
-    const onScroll = useCallback(() => {
-        if (followLock.current) {
-            return;
-        }
-        const el = parentRef.current;
-        if (!el) {
-            return;
-        }
-        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_THRESHOLD;
-        if (follow && !atBottom) {
-            setFollow(false);
-        }
-        else if (!follow && atBottom) {
-            setFollow(true);
-        }
-    }, [follow]);
     const toggleFamily = useCallback((family) => {
         setFamilies((prev) => {
             const next = new Set(prev);
@@ -97,23 +47,13 @@ export function EventStream({ events, startedAt, threadId, threadLabel, selected
         });
     }, []);
     const hiddenFamilyCount = eventCatalog.families.length - families.size;
-    return (_jsxs("div", { className: "debugger-event-stream flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "border-border flex min-h-10 items-center gap-1.5 border-b px-2 py-1.5", children: [_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Search, { "aria-hidden": true, className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2" }), _jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search events", "aria-label": "Search events", className: "h-7 w-full pl-7 text-xs" })] }), _jsxs(DropdownMenuPrimitive.Root, { children: [_jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: "border-input text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring/50 relative inline-flex size-7 shrink-0 items-center justify-center rounded-md border outline-none focus-visible:ring-[3px]", "aria-label": "Filter event families", children: [_jsx(SlidersHorizontal, { className: "size-3.5" }), hiddenFamilyCount > 0 ? (_jsx("span", { className: "bg-foreground text-background absolute -top-1 -right-1 flex size-3.5 items-center justify-center rounded-full font-mono text-[8px]", children: hiddenFamilyCount })) : null] }) }), _jsx(DropdownMenuPrimitive.Portal, { children: _jsxs(DropdownMenuPrimitive.Content, { align: "end", sideOffset: 5, className: "bg-background text-foreground border-border z-50 min-w-36 rounded-md border p-1 shadow-lg", children: [_jsx(DropdownMenuPrimitive.Label, { className: "text-muted-foreground px-2 py-1 text-[10px] font-medium tracking-wide uppercase", children: "Event families" }), eventCatalog.families.map((family) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { checked: families.has(family), onCheckedChange: () => toggleFamily(family), onSelect: (event) => event.preventDefault(), className: "focus:bg-accent relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-7 font-mono text-xs outline-none select-none", children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-3" }) }) }), family] }, family)))] }) })] }), _jsxs("label", { className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center gap-1.5 px-1 text-[10px]", children: [_jsx(Checkbox, { checked: follow, onCheckedChange: (checked) => setFollow(checked === true), "aria-label": "Follow newest events" }), _jsx("span", { className: "debugger-follow-label", children: "Follow" })] })] }), threadId ? (_jsxs("div", { className: "border-border text-muted-foreground flex items-center gap-1.5 border-b px-2 py-1 font-mono text-[10px]", children: [_jsx("span", { className: "text-[9px] tracking-wide uppercase", children: "Thread" }), _jsx("span", { className: "text-foreground truncate", title: threadId, children: threadLabel ?? shortId(threadId) })] })) : null, _jsx(ScrollArea, { viewportRef: parentRef, className: "min-h-32 flex-1", onViewportScroll: onScroll, children: _jsx("div", { className: "relative w-full px-1", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((row) => {
-                        const event = visible[row.index];
-                        if (!event) {
-                            return null;
-                        }
-                        return (_jsx("div", { "data-index": row.index, ref: virtualizer.measureElement, className: "absolute top-0 left-0 w-full", style: { transform: `translateY(${row.start}px)` }, children: _jsx(EventRow, { event: event, catalog: eventCatalog, startedAt: startedAt, selected: selectedSeq === event.seq, onSelectSeq: onSelectSeq }) }, event.id));
-                    }) }) }), selected
-                ? (renderInspector?.(selected) ?? (_jsx(EventInspector, { event: selected, loadReplayStep: loadReplayStep })))
+    const filtered = visible.length !== events.length;
+    return (_jsxs("div", { className: "debugger-event-stream flex h-full min-h-0 flex-col", children: [_jsxs(PanelHeader, { className: "gap-1.5 pr-2", children: [_jsx(PanelTitle, { className: "hidden @md:flex", meta: filtered ? `${visible.length}/${events.length}` : events.length, children: "Events" }), _jsxs("div", { className: "relative ml-auto min-w-0 flex-1 @md:max-w-64", children: [_jsx(Search, { "aria-hidden": true, className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2" }), _jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search events", "aria-label": "Search events", className: "h-7 w-full pl-7 text-xs" })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon-sm", className: "relative", "aria-label": "Filter event families", children: [_jsx(SlidersHorizontal, {}), hiddenFamilyCount > 0 ? (_jsx("span", { className: "bg-foreground text-background absolute top-0.5 right-0.5 flex size-3.5 items-center justify-center rounded-full font-mono text-[8px]", children: hiddenFamilyCount })) : null] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: "Event families" }), eventCatalog.families.map((family) => (_jsxs(DropdownMenuCheckboxItem, { checked: families.has(family), onCheckedChange: () => toggleFamily(family), onSelect: (event) => event.preventDefault(), className: "font-mono", children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full", style: { backgroundColor: eventCatalog.familyColor(family) } }), family] }, family)))] })] }), _jsxs(Button, { variant: "ghost", size: "sm", "aria-pressed": follow, "aria-label": "Follow newest events", onClick: () => setFollow(!follow), className: "aria-pressed:bg-accent aria-pressed:text-foreground px-2", children: [_jsx(ArrowDownToLine, {}), _jsx("span", { className: "hidden @lg:inline", children: "Follow" })] })] }), threadId ? (_jsxs("div", { className: "border-border flex h-8 shrink-0 items-center gap-2 border-b px-3 text-[11px]", children: [_jsx("span", { className: "text-muted-foreground", children: "Thread" }), _jsxs("span", { className: "bg-accent text-foreground inline-flex h-5 min-w-0 items-center gap-1 rounded-sm pr-0.5 pl-1.5 font-mono", children: [_jsx("span", { className: "truncate", title: threadId, children: threadLabel ?? shortId(threadId) }), onClearThread ? (_jsx("button", { type: "button", "aria-label": "Show all threads", onClick: onClearThread, className: "text-muted-foreground hover:text-foreground hover:bg-background/60 flex size-4 items-center justify-center rounded-sm", children: _jsx(X, { className: "size-3" }) })) : null] })] })) : null, _jsx(FollowList, { items: visible, getKey: (event) => event.id, estimateSize: ROW_ESTIMATE, overscan: 16, follow: follow, onFollowChange: setFollow, className: "min-h-32", itemClassName: "px-1.5", empty: _jsx("p", { className: "text-muted-foreground p-6 text-center text-xs", children: events.length === 0 ? 'Waiting for events…' : 'No events match these filters.' }), renderItem: (event) => (_jsx(EventRow, { event: event, catalog: eventCatalog, startedAt: startedAt, selected: selectedSeq === event.seq, onSelectSeq: onSelectSeq })) }), selected
+                ? (renderInspector?.(selected) ?? (_jsx(EventInspector, { event: selected, loadReplayStep: loadReplayStep, onClose: () => onSelectSeq(undefined) })))
                 : null] }));
 }
-// SAFETY: memoized EventRow preserves generic EventRowProps contract.
-const EventRow = memo(function EventRow({ event, catalog, startedAt, selected, onSelectSeq, }) {
+function EventRow({ event, catalog, startedAt, selected, onSelectSeq, }) {
     const meta = getEventMeta(event, catalog);
     const offset = startedAt !== undefined ? Math.max(0, event.ts - startedAt) : undefined;
-    const handleClick = useCallback(() => {
-        onSelectSeq(selected ? undefined : event.seq);
-    }, [onSelectSeq, selected, event.seq]);
-    return (_jsxs("button", { type: "button", onClick: handleClick, title: [meta.summary.title, meta.summary.detail].filter(Boolean).join(' — '), className: cn('flex w-full items-start gap-1.5 rounded-sm px-1.5 py-1 text-left font-mono text-[11px]', selected ? 'bg-accent' : 'hover:bg-accent/40', event.ephemeral && 'opacity-50'), children: [_jsx("span", { className: cn('mt-1.5 size-1.5 shrink-0 rounded-full', catalog.familyClass(meta.family)) }), _jsx("span", { className: "text-muted-foreground w-6 shrink-0 text-right tabular-nums", children: event.seq }), _jsx("span", { className: "debugger-event-offset text-muted-foreground w-10 shrink-0 text-right tabular-nums", children: offset !== undefined ? `+${offset}` : '' }), _jsxs("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap", children: [_jsx("span", { className: "text-foreground", children: meta.summary.title }), meta.summary.detail ? (_jsx("span", { className: "text-muted-foreground ml-1", children: meta.summary.detail })) : null] }), event.causationId ? (_jsxs("span", { className: "debugger-event-causation text-muted-foreground shrink-0", children: ["\u2190 ", shortId(event.causationId)] })) : null, event.threadId ? (_jsx("span", { className: "debugger-event-thread text-muted-foreground shrink-0", children: shortId(event.threadId) })) : null] }));
-    // SAFETY: memoized EventRow preserves generic EventRowProps contract.
-});
+    return (_jsxs("button", { type: "button", onClick: () => onSelectSeq(selected ? undefined : event.seq), title: [meta.summary.title, meta.summary.detail].filter(Boolean).join(' — '), className: cn('flex h-[26px] w-full items-center gap-2 rounded-sm px-1.5 text-left font-mono text-[11px]', selected ? 'bg-accent' : 'hover:bg-accent/40', event.ephemeral && 'opacity-50'), children: [_jsx("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: catalog.familyColor(meta.family) } }), _jsx("span", { className: "text-muted-foreground w-7 shrink-0 text-right tabular-nums", children: event.seq }), _jsx("span", { className: "debugger-event-offset text-muted-foreground/70 w-12 shrink-0 text-right tabular-nums", children: offset !== undefined ? `+${offset}` : '' }), _jsxs("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap", children: [_jsx("span", { className: "text-foreground", children: meta.summary.title }), meta.summary.detail ? (_jsx("span", { className: "text-muted-foreground ml-1.5", children: meta.summary.detail })) : null] }), event.causationId ? (_jsxs("span", { className: "debugger-event-causation text-muted-foreground/70 shrink-0", children: ["\u2190 ", shortId(event.causationId)] })) : null, event.threadId ? (_jsx("span", { className: "debugger-event-thread text-muted-foreground/70 shrink-0", children: shortId(event.threadId) })) : null] }));
+}

package/dist/debugger/components/follow-list.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/**
+ * A virtualized list that stays pinned to its newest item while following, stops following
+ * when the reader scrolls up, and resumes when they return to the bottom.
+ */
+export declare function FollowList<T>({ items, getKey, renderItem, estimateSize, overscan, follow: controlledFollow, onFollowChange, paddingStart, paddingEnd, className, itemClassName, empty, }: {
+    items: readonly T[];
+    getKey: (item: T, index: number) => string | number;
+    renderItem: (item: T, index: number) => ReactNode;
+    estimateSize: number;
+    overscan?: number;
+    follow?: boolean;
+    onFollowChange?: (follow: boolean) => void;
+    paddingStart?: number;
+    paddingEnd?: number;
+    className?: string;
+    itemClassName?: string;
+    empty?: ReactNode;
+}): import("react").JSX.Element;

package/dist/debugger/components/follow-list.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Effect, Fiber } from 'effect';
+import { ArrowDown } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { cn } from '../lib/cn.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+const FOLLOW_THRESHOLD = 24;
+const USER_INPUT_WINDOW = 400;
+/**
+ * A virtualized list that stays pinned to its newest item while following, stops following
+ * when the reader scrolls up, and resumes when they return to the bottom.
+ */
+export function FollowList({ items, getKey, renderItem, estimateSize, overscan = 8, follow: controlledFollow, onFollowChange, paddingStart = 4, paddingEnd = 4, className, itemClassName, empty, }) {
+    const [ownFollow, setOwnFollow] = useState(true);
+    const follow = controlledFollow ?? ownFollow;
+    const parentRef = useRef(null);
+    const followLock = useRef(false);
+    const lastScrollTop = useRef(0);
+    const lastInputAt = useRef(Number.NEGATIVE_INFINITY);
+    const setFollow = useCallback((next) => {
+        setOwnFollow(next);
+        onFollowChange?.(next);
+    }, [onFollowChange]);
+    const virtualizer = useVirtualizer({
+        count: items.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => estimateSize,
+        overscan,
+        paddingStart,
+        paddingEnd,
+        getItemKey: (index) => {
+            const item = items[index];
+            return item === undefined ? index : getKey(item, index);
+        },
+        // Avoid flushSync during ref measurement / follow-scroll under high event rates.
+        useFlushSync: false,
+    });
+    const totalSize = virtualizer.getTotalSize();
+    const viewportHeight = virtualizer.scrollRect?.height ?? 0;
+    useEffect(() => {
+        const el = parentRef.current;
+        // Content that shrank to fit (e.g. after filtering) never scrolls, so resume following here.
+        if (!follow && el && el.scrollHeight <= el.clientHeight + 1) {
+            setFollow(true);
+        }
+        if (!follow || items.length === 0) {
+            return () => undefined;
+        }
+        followLock.current = true;
+        let followRelease;
+        const rafId = requestAnimationFrame(() => {
+            virtualizer.scrollToIndex(items.length - 1, { align: 'end' });
+            followRelease = Effect.runFork(Effect.sleep(50).pipe(Effect.andThen(Effect.sync(() => {
+                followLock.current = false;
+            }))));
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+            if (followRelease !== undefined) {
+                Effect.runFork(Fiber.interrupt(followRelease));
+            }
+            followLock.current = false;
+        };
+    }, [follow, items.length, setFollow, totalSize, viewportHeight, virtualizer]);
+    const noteInput = useCallback((event) => {
+        lastInputAt.current = event.timeStamp;
+    }, []);
+    const onScroll = useCallback((event) => {
+        const el = parentRef.current;
+        if (!el) {
+            return;
+        }
+        // Row measurement also moves scrollTop, so only an upward scroll right after reader input unfollows.
+        const movedUp = el.scrollTop < lastScrollTop.current - 1;
+        const fromReader = event.timeStamp - lastInputAt.current < USER_INPUT_WINDOW;
+        lastScrollTop.current = el.scrollTop;
+        if (followLock.current) {
+            return;
+        }
+        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_THRESHOLD;
+        if (follow && !atBottom && movedUp && fromReader) {
+            setFollow(false);
+        }
+        else if (!follow && atBottom) {
+            setFollow(true);
+        }
+    }, [follow, setFollow]);
+    return (_jsxs("div", { className: cn('relative min-h-0 flex-1', className), children: [_jsx(ScrollArea, { viewportRef: parentRef, className: "size-full", onViewportScroll: onScroll, onWheel: noteInput, onTouchMove: noteInput, onPointerDown: noteInput, onKeyDown: noteInput, children: items.length === 0 && empty !== undefined ? (empty) : (_jsx("div", { className: "relative w-full", style: { height: totalSize }, children: virtualizer.getVirtualItems().map((row) => {
+                        const item = items[row.index];
+                        if (item === undefined) {
+                            return null;
+                        }
+                        return (_jsx("div", { "data-index": row.index, ref: virtualizer.measureElement, className: cn('absolute top-0 left-0 w-full', itemClassName), style: { transform: `translateY(${row.start}px)` }, children: renderItem(item, row.index) }, row.key));
+                    }) })) }), !follow && items.length > 0 ? (_jsxs("button", { type: "button", onClick: () => setFollow(true), className: "debugger-float-in bg-card/95 text-foreground border-border hover:bg-accent absolute bottom-3 left-1/2 z-20 flex h-7 -translate-x-1/2 items-center gap-1.5 rounded-full border px-3 text-[11px] font-medium shadow-lg shadow-black/30 backdrop-blur active:scale-[0.97]", children: [_jsx(ArrowDown, { className: "size-3" }), "Jump to latest"] })) : null] }));
+}

package/dist/debugger/components/json-tree.d.ts

@@ -0,0 +1,11 @@
+import type { JsonValue } from '@swirls/looms/core';
+/**
+ * Collapsible, syntax-coloured JSON. Strings that hold JSON expand in place,
+ * wide nodes start collapsed, and very large arrays render in buckets.
+ */
+export declare function JsonTree({ value, defaultExpandDepth, copyable, className, }: {
+    value: JsonValue;
+    defaultExpandDepth?: number;
+    copyable?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/debugger/components/json-tree.js

@@ -0,0 +1,120 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronRight, Copy } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { jsonEntries, jsonNode, jsonPreview, parseStructuredJson } from '../lib/json.js';
+/** Children past this count render in collapsed buckets so huge arrays never flood the DOM. */
+const CHUNK_SIZE = 100;
+/** Nodes wider than this start collapsed even inside the default expand depth. */
+const AUTO_EXPAND_LIMIT = 50;
+const STRING_CLAMP = 320;
+function Chevron({ open }) {
+    return (_jsx(ChevronRight, { "aria-hidden": true, className: cn('ease-snappy size-3 transition-transform duration-100', open && 'rotate-90') }));
+}
+function Key({ name, index }) {
+    if (name === undefined) {
+        return null;
+    }
+    return (_jsxs("span", { className: cn('mr-1 shrink-0', index ? 'text-muted-foreground' : 'text-json-key'), children: [name, _jsx("span", { className: "text-muted-foreground", children: ":" })] }));
+}
+function StringValue({ value }) {
+    const [expanded, setExpanded] = useState(false);
+    const clamped = !expanded && value.length > STRING_CLAMP;
+    const shown = clamped ? value.slice(0, STRING_CLAMP) : value;
+    return (_jsxs("span", { className: "text-json-string", children: ["\"", shown, clamped ? (_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground ml-0.5 rounded-sm px-0.5 hover:underline", onClick: () => setExpanded(true), children: ["\u2026+", value.length - STRING_CLAMP] })) : null, "\""] }));
+}
+function Scalar({ node }) {
+    switch (node.kind) {
+        case 'string':
+            return _jsx(StringValue, { value: node.value });
+        case 'number':
+            return _jsx("span", { className: "text-json-number", children: String(node.value) });
+        case 'boolean':
+            return _jsx("span", { className: "text-json-boolean", children: String(node.value) });
+        case 'null':
+            return _jsx("span", { className: "text-json-null italic", children: "null" });
+        case 'object':
+            return _jsx("span", { className: "text-muted-foreground", children: '{}' });
+        case 'array':
+            return _jsx("span", { className: "text-muted-foreground", children: "[]" });
+        default: {
+            const exhaustive = node;
+            return exhaustive;
+        }
+    }
+}
+/** Leaf values flow inline so long strings wrap beneath their key instead of in a narrow column. */
+function Leaf({ children, className }) {
+    return (_jsx("div", { className: cn('py-px pl-4 break-words whitespace-pre-wrap', className), children: children }));
+}
+function Branch({ label, summary, defaultOpen, children, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const [deep, setDeep] = useState(false);
+    const [generation, setGeneration] = useState(0);
+    function toggle(event) {
+        const next = !open;
+        setOpen(next);
+        // Alt-click opens or closes the whole subtree, like browser devtools.
+        if (event.altKey) {
+            setDeep(next);
+            setGeneration((value) => value + 1);
+        }
+    }
+    return (_jsxs("div", { children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: toggle, className: "hover:bg-accent/50 group/branch -mx-1 flex w-[calc(100%+0.5rem)] min-w-0 items-start gap-1 rounded-sm px-1 py-px text-left", children: [_jsx("span", { className: "text-muted-foreground group-hover/branch:text-foreground flex h-5 w-3 shrink-0 items-center", children: _jsx(Chevron, { open: open }) }), label, _jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: summary })] }), open ? (_jsx("div", { className: "border-border/70 ml-1.5 border-l pl-2.5", children: children(deep) }, generation)) : null] }));
+}
+function Children({ node, depth, options, forceOpen, }) {
+    const entries = jsonEntries(node);
+    const index = node.kind === 'array';
+    if (entries.length <= CHUNK_SIZE) {
+        return entries.map(([key, value]) => (_jsx(Entry, { name: key, index: index, value: value, depth: depth, options: options, forceOpen: forceOpen }, key)));
+    }
+    const chunks = [];
+    for (let start = 0; start < entries.length; start += CHUNK_SIZE) {
+        chunks.push(entries.slice(start, start + CHUNK_SIZE));
+    }
+    return chunks.map((chunk, chunkIndex) => {
+        const first = chunkIndex * CHUNK_SIZE;
+        const last = first + chunk.length - 1;
+        return (_jsx(Branch, { defaultOpen: forceOpen, label: _jsxs("span", { className: "text-muted-foreground shrink-0", children: ["[", first, " \u2026 ", last, "]"] }), summary: null, children: (deep) => chunk.map(([key, value]) => (_jsx(Entry, { name: key, index: index, value: value, depth: depth, options: options, forceOpen: deep }, key))) }, first));
+    });
+}
+const Entry = memo(function Entry({ name, index = false, value, depth, options, forceOpen = false, }) {
+    const node = useMemo(() => jsonNode(value), [value]);
+    const embedded = useMemo(() => (node.kind === 'string' ? parseStructuredJson(node.value) : undefined), [node]);
+    const branch = embedded !== undefined
+        ? jsonNode(embedded)
+        : node.kind === 'object' || node.kind === 'array'
+            ? node
+            : undefined;
+    const size = branch ? jsonEntries(branch).length : 0;
+    if (!branch || size === 0) {
+        return (_jsxs(Leaf, { children: [_jsx(Key, { name: name, index: index }), _jsx(Scalar, { node: branch ?? node })] }));
+    }
+    const defaultOpen = forceOpen ||
+        (embedded === undefined && depth < options.defaultExpandDepth && size <= AUTO_EXPAND_LIMIT);
+    return (_jsx(Branch, { defaultOpen: defaultOpen, label: _jsxs(_Fragment, { children: [_jsx(Key, { name: name, index: index }), embedded !== undefined ? (_jsx("span", { className: "border-border text-muted-foreground mt-0.5 shrink-0 rounded-sm border px-1 text-[9px] leading-3.5 uppercase", title: "String containing JSON", children: "json" })) : null] }), summary: jsonPreview(branch), children: (deep) => _jsx(Children, { node: branch, depth: depth + 1, options: options, forceOpen: deep }) }));
+});
+function CopyButton({ value }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", "aria-label": "Copy JSON", className: "text-muted-foreground hover:text-foreground bg-card/90 hover:bg-accent border-border absolute top-0 right-0 flex size-6 items-center justify-center rounded-md border opacity-0 transition-opacity duration-150 group-hover/json:opacity-100 focus-visible:opacity-100", onClick: () => {
+            void navigator.clipboard
+                .writeText(JSON.stringify(value, null, 2))
+                .then(() => setCopied(true));
+        }, onPointerLeave: () => setCopied(false), children: copied ? _jsx(Check, { className: "size-3" }) : _jsx(Copy, { className: "size-3" }) }));
+}
+/**
+ * Collapsible, syntax-coloured JSON. Strings that hold JSON expand in place,
+ * wide nodes start collapsed, and very large arrays render in buckets.
+ */
+export function JsonTree({ value, defaultExpandDepth = 1, copyable = true, className, }) {
+    const options = useMemo(() => ({ defaultExpandDepth }), [defaultExpandDepth]);
+    const { root, source } = useMemo(() => {
+        const node = jsonNode(value);
+        const embedded = node.kind === 'string' ? parseStructuredJson(node.value) : undefined;
+        return embedded !== undefined
+            ? { root: jsonNode(embedded), source: embedded }
+            : { root: node, source: value };
+    }, [value]);
+    const hasChildren = (root.kind === 'object' || root.kind === 'array') && jsonEntries(root).length > 0;
+    return (_jsxs("div", { className: cn('group/json relative min-w-0 font-mono text-[11px] leading-5', className), children: [hasChildren ? (_jsx(Children, { node: root, depth: 0, options: options, forceOpen: false })) : (_jsx(Leaf, { className: "pl-0", children: _jsx(Scalar, { node: root }) })), copyable ? _jsx(CopyButton, { value: source }) : null] }));
+}

package/dist/debugger/components/json-view.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../lib/cn.js';
+import { JsonTree } from './json-tree.js';
 export function JsonView({ value, className }) {
-    return (_jsx("pre", { className: cn('text-muted-foreground overflow-auto font-mono text-[11px] leading-relaxed wrap-break-word whitespace-pre-wrap', className), children: JSON.stringify(value, null, 2) }));
+    return _jsx(JsonTree, { value: value, className: className });
 }