@swirls/looms 0.0.2 → 0.2.0

package/dist/debugger/lib/payload.js

@@ -0,0 +1,11 @@
+import { isJsonNumber, isJsonObject, isJsonString } from '@swirls/looms/core';
+/** Fields of a JSON object, or no fields for any other value. */
+export function jsonFields(value) {
+    return isJsonObject(value) ? value : {};
+}
+export function jsonText(value) {
+    return isJsonString(value) ? value : undefined;
+}
+export function jsonNumberText(value) {
+    return isJsonNumber(value) ? String(value) : undefined;
+}

package/dist/debugger/lib/time.d.ts

@@ -0,0 +1,3 @@
+/** Run ids start with a base36 millisecond timestamp (`run_<ms36>_<counter>_<entropy>`). */
+export declare function runCreatedAt(runId: string): number | undefined;
+export declare function relativeTime(then: number, now: number): string;

package/dist/debugger/lib/time.js

@@ -0,0 +1,24 @@
+/** Run ids start with a base36 millisecond timestamp (`run_<ms36>_<counter>_<entropy>`). */
+export function runCreatedAt(runId) {
+    const stamp = runId.split('_')[1];
+    if (!stamp) {
+        return undefined;
+    }
+    const ms = Number.parseInt(stamp, 36);
+    return Number.isFinite(ms) ? ms : undefined;
+}
+export function relativeTime(then, now) {
+    const seconds = Math.max(0, Math.round((now - then) / 1000));
+    if (seconds < 45) {
+        return 'just now';
+    }
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60) {
+        return `${minutes}m ago`;
+    }
+    const hours = Math.round(minutes / 60);
+    if (hours < 24) {
+        return `${hours}h ago`;
+    }
+    return `${Math.round(hours / 24)}d ago`;
+}

package/dist/debugger/plugin.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentType } from 'react';
+import type { PublishedDefinition } from '@swirls/looms/core';
+import type { DebuggerEvent, EventSummary } from './contracts';
+export interface EventFamilyView {
+    readonly family: string;
+    /** Event type prefix the family owns. Defaults to `${family}.`. */
+    readonly prefix?: string;
+    readonly color: string;
+    readonly summarize?: (event: DebuggerEvent) => EventSummary | undefined;
+}
+export interface WorkspaceContext {
+    readonly definition: PublishedDefinition;
+    readonly runId?: string;
+    readonly onStarted: (runId: string) => void;
+}
+export interface WorkspaceView {
+    readonly kinds: readonly string[];
+    readonly component: ComponentType<WorkspaceContext>;
+    /** Narrows `kinds`. When omitted, every definition of those kinds uses the workspace. */
+    readonly matches?: (definition: PublishedDefinition) => boolean;
+}
+/** A projection pane. The component reads the projection for `runId` itself. */
+export interface ProjectionView {
+    readonly name: string;
+    readonly component: ComponentType<{
+        readonly runId: string;
+    }>;
+}
+export interface DebuggerPlugin {
+    readonly name: string;
+    readonly families?: readonly EventFamilyView[];
+    readonly workspace?: WorkspaceView;
+    readonly projections?: readonly ProjectionView[];
+}
+export declare function workspaceFor(plugins: readonly DebuggerPlugin[], definition: PublishedDefinition): WorkspaceView | undefined;
+export declare function projectionFor(plugins: readonly DebuggerPlugin[], name: string): ProjectionView | undefined;

package/dist/debugger/plugin.js

@@ -0,0 +1,14 @@
+export function workspaceFor(plugins, definition) {
+    return plugins.find((plugin) => plugin.workspace !== undefined &&
+        plugin.workspace.kinds.includes(definition.kind) &&
+        (plugin.workspace.matches?.(definition) ?? true))?.workspace;
+}
+export function projectionFor(plugins, name) {
+    for (const plugin of plugins) {
+        const view = plugin.projections?.find((candidate) => candidate.name === name);
+        if (view) {
+            return view;
+        }
+    }
+    return undefined;
+}

package/dist/debugger/server/index.d.ts

@@ -0,0 +1,14 @@
+import type { DebuggerHost } from '@swirls/looms/core';
+export interface DebuggerUiOptions {
+    /** Mount path. Defaults to `/debugger`. */
+    readonly path?: string;
+    /** Built SPA directory. Defaults to `debuggerAppRoot()`. */
+    readonly root?: string;
+}
+/**
+ * Built SPA directory beside the server module: `dist/debugger/app` in the published package.
+ * Source checkouts have no bundle there; pass `root` pointing at `apps/debugger/dist` instead.
+ */
+export declare function debuggerAppRoot(moduleUrl?: string): string;
+/** Static host for the debugger SPA. Mount it with `createLooms({ debugger: debuggerUi() })`. */
+export declare function debuggerUi(options?: DebuggerUiOptions): DebuggerHost;

package/dist/debugger/server/index.js

@@ -0,0 +1,114 @@
+import { readFile, realpath, stat } from 'node:fs/promises';
+import { extname, join, normalize, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+function contentType(extension) {
+    switch (extension) {
+        case '.css':
+            return 'text/css; charset=utf-8';
+        case '.html':
+            return 'text/html; charset=utf-8';
+        case '.ico':
+            return 'image/x-icon';
+        case '.js':
+        case '.mjs':
+            return 'text/javascript; charset=utf-8';
+        case '.json':
+        case '.map':
+            return 'application/json; charset=utf-8';
+        case '.png':
+            return 'image/png';
+        case '.svg':
+            return 'image/svg+xml';
+        case '.txt':
+            return 'text/plain; charset=utf-8';
+        case '.woff2':
+            return 'font/woff2';
+        default:
+            return 'application/octet-stream';
+    }
+}
+const assetCache = 'public, max-age=31536000, immutable';
+function inside(root, file) {
+    const rootPath = normalize(root);
+    const filePath = normalize(file);
+    const prefix = rootPath.endsWith(sep) ? rootPath : `${rootPath}${sep}`;
+    return filePath === rootPath || filePath.startsWith(prefix);
+}
+/**
+ * Built SPA directory beside the server module: `dist/debugger/app` in the published package.
+ * Source checkouts have no bundle there; pass `root` pointing at `apps/debugger/dist` instead.
+ */
+export function debuggerAppRoot(moduleUrl = import.meta.url) {
+    return fileURLToPath(new URL('../app/', moduleUrl));
+}
+/** Relative file path for a mount path, or null when it cannot name a file inside the bundle. */
+function relativeFile(path) {
+    let decoded;
+    try {
+        decoded = decodeURIComponent(path);
+    }
+    catch {
+        return null;
+    }
+    const relative = decoded.replace(/^[/\\]+/, '');
+    if (relative.includes('\0') || relative.split(/[/\\]/).includes('..')) {
+        return null;
+    }
+    return relative;
+}
+function shellResponse(root, basePath, head) {
+    return readFile(join(root, 'index.html'), 'utf8').then((html) => {
+        const base = `<base href="${basePath}/">`;
+        const document = html.includes('<head>')
+            ? html.replace('<head>', `<head>${base}`)
+            : base + html;
+        return new Response(head ? null : document, {
+            headers: {
+                'cache-control': 'no-cache',
+                'content-type': 'text/html; charset=utf-8',
+            },
+        });
+    }, () => new Response('Debugger UI is not built', { status: 404 }));
+}
+function fileResponse(file, relative, head) {
+    const headers = new Headers({
+        'cache-control': relative.startsWith('assets/') ? assetCache : 'no-cache',
+        'content-type': contentType(extname(file)),
+    });
+    if (head) {
+        return Promise.resolve(new Response(null, { headers }));
+    }
+    return readFile(file).then((body) => new Response(body, { headers }));
+}
+function serveBundle(root, relative, mount, head) {
+    return realpath(join(root, relative)).then((file) => {
+        if (!inside(root, file)) {
+            return new Response('Invalid path', { status: 400 });
+        }
+        return stat(file).then((info) => info.isFile() && file !== join(root, 'index.html')
+            ? fileResponse(file, relative, head)
+            : shellResponse(root, mount.basePath, head));
+    }, 
+    // Client routes have no extension; a missing asset must 404 rather than load the HTML shell.
+    () => extname(relative) === ''
+        ? shellResponse(root, mount.basePath, head)
+        : new Response('Not Found', { status: 404 }));
+}
+function serveDebugger(root, req, mount) {
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+        return Promise.resolve(new Response('Method Not Allowed', { status: 405 }));
+    }
+    const relative = relativeFile(mount.path);
+    if (relative === null) {
+        return Promise.resolve(new Response('Invalid path', { status: 400 }));
+    }
+    return realpath(root).then((rootReal) => serveBundle(rootReal, relative, mount, req.method === 'HEAD'), () => new Response('Debugger UI is not built', { status: 404 }));
+}
+/** Static host for the debugger SPA. Mount it with `createLooms({ debugger: debuggerUi() })`. */
+export function debuggerUi(options = {}) {
+    const root = options.root ?? debuggerAppRoot();
+    return {
+        basePath: options.path ?? '/debugger',
+        fetch: (req, mount) => serveDebugger(root, req, mount),
+    };
+}

package/dist/debugger/shell/debugger-shell.d.ts

@@ -0,0 +1,15 @@
+import type { DebuggerPlugin } from '../plugin';
+export interface DebuggerSelection {
+    readonly kind?: string;
+    readonly name?: string;
+    readonly run?: string;
+    readonly thread?: string;
+    readonly seq?: number;
+}
+export declare function DebuggerShell({ plugins, selection, onSelectionChange, endpoint, }: {
+    plugins: readonly DebuggerPlugin[];
+    selection: DebuggerSelection;
+    onSelectionChange: (selection: DebuggerSelection) => void;
+    /** Looms host base URL. Defaults to the page origin. */
+    endpoint?: string;
+}): import("react").JSX.Element;

package/dist/debugger/shell/debugger-shell.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, GitBranch, ListTree } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useDefaultLayout } from 'react-resizable-panels';
+import { DebuggerProvider, useDebugger } from '../context.js';
+import { errorMessage } from '../lib/cn.js';
+import { EmptyState, PanelHeader, PanelTitle } from '../ui/panel.js';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable.js';
+import { definitionKey } from './definition-key.js';
+import { EventsPane, RunTreePane } from './events-pane.js';
+import { ProjectionsPanel } from './projections-panel.js';
+import { RunControls } from './run-controls.js';
+import { RunSearch } from './run-search.js';
+import { RunTypeMenu } from './run-type-menu.js';
+import { Workspace } from './workspace.js';
+const emptyCatalog = { definitions: [], projections: [] };
+function useDefinitionCatalog() {
+    const { client } = useDebugger();
+    const [catalog, setCatalog] = useState(emptyCatalog);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        client.listDefinitions().then(setCatalog, (cause) => setError(errorMessage(cause)));
+    }, [client]);
+    return { catalog, error };
+}
+function Brand() {
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2 pr-1", children: [_jsx("span", { className: "bg-foreground text-background flex size-5 items-center justify-center rounded-md", children: _jsx(GitBranch, { className: "size-3", strokeWidth: 2.5 }) }), _jsx("span", { className: "text-[13px] font-semibold tracking-tight", children: "Looms" })] }));
+}
+function DebuggerFrame({ selection, onSelectionChange, }) {
+    const { catalog, error } = useDefinitionCatalog();
+    const { kind, name } = selection;
+    const selectedKey = kind && name ? definitionKey({ kind, name }) : undefined;
+    const selected = catalog.definitions.find((definition) => definitionKey(definition) === selectedKey);
+    const layout = useDefaultLayout({ id: 'looms-debugger-columns', storage: localStorage });
+    return (_jsxs("div", { className: "looms-debugger bg-background text-foreground flex h-full flex-col overflow-hidden font-sans antialiased", children: [_jsxs("header", { className: "border-border bg-sidebar flex h-11 shrink-0 items-center gap-2 border-b px-3", children: [_jsx(Brand, {}), _jsx("span", { className: "text-border text-lg font-light select-none", "aria-hidden": true, children: "/" }), _jsx(RunTypeMenu, { definitions: catalog.definitions, selected: selected, onSelect: (definition) => onSelectionChange({ kind: definition.kind, name: definition.name }) }), _jsx(RunSearch, { runId: selection.run, fallbackLabel: selected?.name, onSelectRun: (run) => onSelectionChange({
+                            kind: run.kind ?? undefined,
+                            name: run.definitionName ?? undefined,
+                            run: run.runId,
+                        }) }), _jsxs("div", { className: "ml-auto flex min-w-0 items-center gap-2", children: [error ? (_jsx("p", { className: "text-status-failed truncate text-[11px]", title: error, children: error })) : null, selection.run ? _jsx(RunControls, { runId: selection.run }) : null] })] }), _jsxs(ResizablePanelGroup, { id: "looms-debugger-columns", className: "min-h-0 flex-1", defaultLayout: layout.defaultLayout, onLayoutChanged: layout.onLayoutChanged, children: [_jsx(ResizablePanel, { id: "tree", defaultSize: "17%", minSize: "12rem", maxSize: "30%", className: "bg-sidebar", children: _jsx("section", { "aria-label": "Run tree", className: "h-full min-h-0 overflow-hidden", children: selection.run ? (_jsx(RunTreePane, { runId: selection.run, threadId: selection.thread, onSelectThread: (thread) => onSelectionChange({ ...selection, thread, seq: undefined }) })) : (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: "Run tree" }) }), _jsx(EmptyState, { icon: _jsx(ListTree, {}), title: "No run selected", children: "Threads and child runs appear here once a run starts." })] })) }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { id: "workspace", defaultSize: "29%", minSize: "16rem", children: _jsx("section", { "aria-label": "Workspace", className: "@container h-full min-h-0 overflow-hidden", children: _jsx(Workspace, { definition: selected, runId: selection.run, onStarted: (run) => onSelectionChange({ kind, name, run }) }) }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { id: "events", defaultSize: "32%", minSize: "16rem", children: _jsx("section", { "aria-label": "Events", className: "h-full min-h-0 overflow-hidden", children: selection.run ? (_jsx(EventsPane, { runId: selection.run, threadId: selection.thread, seq: selection.seq, onSelectSeq: (seq) => onSelectionChange({ ...selection, seq }), onClearThread: () => onSelectionChange({ ...selection, thread: undefined }) })) : (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: "Events" }) }), _jsx(EmptyState, { icon: _jsx(Activity, {}), title: "No events yet", children: "Events stream in live once a run starts." })] })) }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { id: "projections", defaultSize: "22%", minSize: "14rem", className: "bg-sidebar", children: _jsx("section", { "aria-label": "Projections", className: "h-full min-h-0 overflow-hidden", children: _jsx(ProjectionsPanel, { runId: selection.run, names: catalog.projections }) }) })] })] }));
+}
+export function DebuggerShell({ plugins, selection, onSelectionChange, endpoint, }) {
+    return (_jsx(DebuggerProvider, { endpoint: endpoint, plugins: plugins, children: _jsx(DebuggerFrame, { selection: selection, onSelectionChange: onSelectionChange }) }));
+}

package/dist/debugger/shell/definition-key.d.ts

@@ -0,0 +1,3 @@
+import type { PublishedDefinition } from '@swirls/looms/core';
+/** Definitions are unique by kind and name; the same name can appear under two kinds. */
+export declare function definitionKey(definition: Pick<PublishedDefinition, 'kind' | 'name'>): string;

package/dist/debugger/shell/definition-key.js

@@ -0,0 +1,4 @@
+/** Definitions are unique by kind and name; the same name can appear under two kinds. */
+export function definitionKey(definition) {
+    return `${definition.kind}:${definition.name}`;
+}

package/dist/debugger/shell/events-pane.d.ts

@@ -0,0 +1,12 @@
+export declare function EventsPane({ runId, threadId, seq, onSelectSeq, onClearThread, }: {
+    runId: string;
+    threadId?: string;
+    seq?: number;
+    onSelectSeq: (seq: number | undefined) => void;
+    onClearThread: () => void;
+}): import("react").JSX.Element;
+export declare function RunTreePane({ runId, threadId, onSelectThread, }: {
+    runId: string;
+    threadId?: string;
+    onSelectThread: (threadId: string | undefined) => void;
+}): import("react").JSX.Element;

package/dist/debugger/shell/events-pane.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useEventCounts, useRunEvents, useRunStore, useRunSummary, useThreadTree, } from '@swirls/looms/react';
+import { findThreadName } from '../components/debugger-split.js';
+import { EventStream } from '../components/event-stream.js';
+import { RunTree } from '../components/run-tree.js';
+import { useDebugger } from '../context.js';
+import { createEventCatalog } from '../events/catalog.js';
+export function EventsPane({ runId, threadId, seq, onSelectSeq, onClearThread, }) {
+    const { client, plugins } = useDebugger();
+    const catalog = useMemo(() => createEventCatalog(plugins), [plugins]);
+    const store = useRunStore(runId);
+    const events = useRunEvents(store);
+    const summary = useRunSummary(store);
+    const tree = useThreadTree(store);
+    const loadReplayStep = useCallback(({ runId: replayRunId, seq: replaySeq }) => client.replayTo(replayRunId, replaySeq).then((result) => result.step), [client]);
+    return (_jsx(EventStream, { events: events, startedAt: summary.startedAt, threadId: threadId, threadLabel: findThreadName(tree.root, threadId), onClearThread: onClearThread, selectedSeq: seq, onSelectSeq: onSelectSeq, loadReplayStep: loadReplayStep, catalog: catalog }));
+}
+export function RunTreePane({ runId, threadId, onSelectThread, }) {
+    const store = useRunStore(runId);
+    const summary = useRunSummary(store);
+    const tree = useThreadTree(store);
+    const counts = useEventCounts(store);
+    return (_jsx(RunTree, { runId: runId, runStatus: summary.status, tree: tree, eventCounts: counts, selectedThread: threadId, onSelectThread: onSelectThread }));
+}

package/dist/debugger/shell/projections-panel.d.ts

@@ -0,0 +1,4 @@
+export declare function ProjectionsPanel({ runId, names }: {
+    runId?: string;
+    names: readonly string[];
+}): import("react").JSX.Element;

package/dist/debugger/shell/projections-panel.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, Layers } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { asJson } from '@swirls/looms/core';
+import { useRunSelector, useRunStore } from '@swirls/looms/react';
+import { JsonTree } from '../components/json-tree.js';
+import { useDebugger } from '../context.js';
+import { cn, errorMessage } from '../lib/cn.js';
+import { projectionFor } from '../plugin.js';
+import { EmptyState, PanelHeader, PanelTitle } from '../ui/panel.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+function Section({ title, children }) {
+    const [open, setOpen] = useState(true);
+    return (_jsxs("section", { className: "border-border border-b last:border-b-0", children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen(!open), className: "bg-background/95 hover:bg-accent/40 sticky top-0 z-10 flex h-8 w-full items-center gap-1.5 px-3 text-left backdrop-blur", children: [_jsx(ChevronRight, { "aria-hidden": true, className: cn('text-muted-foreground ease-snappy size-3 transition-transform duration-100', open && 'rotate-90') }), _jsx("h3", { className: "font-mono text-[11px] font-medium", children: title })] }), open ? _jsx("div", { className: "px-3 pt-0.5 pb-3", children: children }) : null] }));
+}
+function lastDurableSeq(store) {
+    return store.events().reduce((seq, event) => (event.ephemeral ? seq : event.seq), 0);
+}
+function FetchedProjection({ runId, name }) {
+    const { client } = useDebugger();
+    const durableSeq = useRunSelector(useRunStore(runId), lastDurableSeq);
+    const [value, setValue] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let active = true;
+        client.project(runId, name).then((result) => {
+            if (active) {
+                setValue(asJson(result.value));
+                setError(null);
+            }
+        }, (cause) => {
+            if (active) {
+                setError(errorMessage(cause));
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [client, durableSeq, name, runId]);
+    if (error) {
+        return _jsx("p", { className: "text-status-failed text-xs", children: error });
+    }
+    if (value === null) {
+        return _jsx("p", { className: "text-muted-foreground text-xs", children: "Loading\u2026" });
+    }
+    return _jsx(JsonTree, { value: value, defaultExpandDepth: 2 });
+}
+function ProjectionBody({ runId, name }) {
+    const { plugins } = useDebugger();
+    const view = projectionFor(plugins, name);
+    if (view) {
+        const View = view.component;
+        return _jsx(View, { runId: runId });
+    }
+    return _jsx(FetchedProjection, { runId: runId, name: name });
+}
+export function ProjectionsPanel({ runId, names }) {
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { meta: names.length, children: "Projections" }) }), !runId ? (_jsx(EmptyState, { icon: _jsx(Layers, {}), title: "No run selected", children: "Projections fold the run's event log into live views." })) : names.length === 0 ? (_jsx(EmptyState, { icon: _jsx(Layers, {}), title: "No projections" })) : (_jsx(ScrollArea, { className: "min-h-0 flex-1", children: names.map((name) => (_jsx(Section, { title: name, children: _jsx(ProjectionBody, { runId: runId, name: name }) }, name))) }))] }));
+}

package/dist/debugger/shell/run-controls.d.ts

@@ -0,0 +1,4 @@
+/** Run-scoped actions that live beside the run switcher. */
+export declare function RunControls({ runId }: {
+    runId: string;
+}): import("react").JSX.Element;

package/dist/debugger/shell/run-controls.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlarmClock, CircleStop, Radio } from 'lucide-react';
+import { useState } from 'react';
+import { cleanUndefined } from '@swirls/looms/core';
+import { useRunStore, useRunSummary } from '@swirls/looms/react';
+import { useDebugger } from '../context.js';
+import { errorMessage } from '../lib/cn.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Kbd } from '../ui/panel.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+import { Textarea } from '../ui/textarea.js';
+const CANCEL_TYPE = 'runtime.thread.cancel.requested';
+function useRunAction() {
+    const [error, setError] = useState(null);
+    const [pending, setPending] = useState(false);
+    function run(action, onDone) {
+        setPending(true);
+        setError(null);
+        action()
+            .then(() => onDone?.())
+            .catch((cause) => setError(errorMessage(cause)))
+            .finally(() => setPending(false));
+    }
+    return { run, pending, error, setError };
+}
+function Field({ label, hint, children }) {
+    return (_jsxs("label", { className: "grid gap-1.5", children: [_jsxs("span", { className: "flex items-baseline justify-between text-[11px]", children: [_jsx("span", { className: "text-foreground font-medium", children: label }), hint ? _jsx("span", { className: "text-muted-foreground", children: hint }) : null] }), children] }));
+}
+function SignalForm({ runId, rootThreadId }) {
+    const { client } = useDebugger();
+    const [type, setType] = useState(CANCEL_TYPE);
+    const [payload, setPayload] = useState('{}');
+    const [thread, setThread] = useState('');
+    const [sent, setSent] = useState(false);
+    const { run, pending, error, setError } = useRunAction();
+    function submit() {
+        setSent(false);
+        let parsed;
+        try {
+            parsed = {
+                type,
+                payload: cleanUndefined(JSON.parse(payload)),
+                threadId: thread || rootThreadId,
+            };
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+            return;
+        }
+        run(() => client.signal(runId, [parsed]), () => setSent(true));
+    }
+    return (_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, children: [_jsxs("div", { children: [_jsx("p", { className: "text-[13px] font-medium", children: "Send a signal" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Append an event to this run's log." })] }), _jsx(Field, { label: "Type", children: _jsx(Input, { value: type, onChange: (event) => setType(event.target.value), className: "h-7 font-mono text-xs", autoFocus: true }) }), _jsx(Field, { label: "Thread", hint: "defaults to root", children: _jsx(Input, { value: thread, placeholder: rootThreadId ?? 'thread id', onChange: (event) => setThread(event.target.value), className: "h-7 font-mono text-xs" }) }), _jsx(Field, { label: "Payload", hint: "JSON", children: _jsx(Textarea, { value: payload, onChange: (event) => setPayload(event.target.value), onKeyDown: (event) => {
+                        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                            event.preventDefault();
+                            submit();
+                        }
+                    }, className: "max-h-48 min-h-20 font-mono text-xs", spellCheck: false }) }), _jsxs("div", { className: "flex items-center gap-2", children: [error ? (_jsx("p", { className: "text-status-failed min-w-0 flex-1 truncate text-[11px]", title: error, children: error })) : sent ? (_jsx("p", { className: "text-status-completed flex-1 text-[11px]", children: "Signal sent" })) : (_jsxs("p", { className: "text-muted-foreground flex flex-1 items-center gap-1 text-[11px]", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "\u21B5" })] })), _jsx(Button, { type: "submit", size: "sm", disabled: pending || type.length === 0, children: "Send signal" })] })] }));
+}
+/** Run-scoped actions that live beside the run switcher. */
+export function RunControls({ runId }) {
+    const { client } = useDebugger();
+    const { rootThreadId, status } = useRunSummary(useRunStore(runId));
+    const { run, pending, error } = useRunAction();
+    const finished = status === 'completed' || status === 'failed' || status === 'cancelled';
+    return (_jsxs("div", { className: "flex items-center gap-0.5", children: [error ? (_jsx("span", { className: "text-status-failed mr-2 max-w-60 truncate text-[11px]", title: error, children: error })) : null, _jsxs(Button, { variant: "ghost", size: "sm", disabled: pending, onClick: () => run(() => client.wake(runId)), children: [_jsx(AlarmClock, {}), "Wake"] }), _jsxs(Button, { variant: "destructive", size: "sm", disabled: pending || finished, onClick: () => run(() => client.signal(runId, [
+                    { type: CANCEL_TYPE, payload: { threadId: rootThreadId ?? '' } },
+                ])), children: [_jsx(CircleStop, {}), "Cancel"] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "data-[state=open]:bg-accent data-[state=open]:text-foreground", children: [_jsx(Radio, {}), "Signal"] }) }), _jsx(PopoverContent, { align: "end", className: "w-80", children: _jsx(SignalForm, { runId: runId, rootThreadId: rootThreadId }) })] })] }));
+}

package/dist/debugger/shell/run-search.d.ts

@@ -0,0 +1,6 @@
+import type { RunSummary } from '@swirls/looms/core';
+export declare function RunSearch({ runId, fallbackLabel, onSelectRun, }: {
+    runId?: string;
+    fallbackLabel?: string;
+    onSelectRun: (run: RunSummary) => void;
+}): import("react").JSX.Element;

package/dist/debugger/shell/run-search.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateTime } from 'effect';
+import { Search } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRunStore, useRunSummary, useThreadTree } from '@swirls/looms/react';
+import { StatusDot } from '../components/status-dot.js';
+import { useDebugger } from '../context.js';
+import { errorMessage, shortId } from '../lib/cn.js';
+import { relativeTime, runCreatedAt } from '../lib/time.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '../ui/command.js';
+import { Kbd } from '../ui/panel.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+/** The list stays short enough to render eagerly; typing narrows the rest. */
+const RESULT_LIMIT = 100;
+function useRunSummaries(refreshKey) {
+    const { client } = useDebugger();
+    const [runs, setRuns] = useState([]);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let active = true;
+        client.listRunSummaries().then((listed) => {
+            if (active) {
+                setRuns(listed.runs);
+                setError(null);
+            }
+        }, (cause) => {
+            if (active) {
+                setError(errorMessage(cause));
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [client, refreshKey]);
+    return { runs, error };
+}
+function indexRuns(runs) {
+    const indexed = runs.map((run) => ({
+        run,
+        createdAt: runCreatedAt(run.runId) ?? 0,
+        haystack: [run.definitionName, run.kind, run.status, run.runId]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase(),
+    }));
+    // ES2022 has no Array#toSorted. `indexed` is a fresh array.
+    // oxlint-disable-next-line unicorn/no-array-sort
+    return indexed.sort((left, right) => right.createdAt - left.createdAt);
+}
+function matches(entry, terms) {
+    return terms.every((term) => entry.haystack.includes(term));
+}
+function CurrentRun({ runId, fallbackLabel }) {
+    const store = useRunStore(runId);
+    const { status } = useRunSummary(store);
+    const { root } = useThreadTree(store);
+    return (_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(StatusDot, { status: status }), _jsx("span", { className: "truncate", children: root?.definitionName ?? fallbackLabel ?? 'Run' }), _jsx("span", { className: "text-muted-foreground font-mono text-[11px]", children: shortId(runId) })] }));
+}
+function useCommandK(onToggle) {
+    useEffect(() => {
+        function onKeyDown(event) {
+            if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                onToggle();
+            }
+        }
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [onToggle]);
+}
+export function RunSearch({ runId, fallbackLabel, onSelectRun, }) {
+    const [open, setOpen] = useState(false);
+    const [viaKeyboard, setViaKeyboard] = useState(false);
+    const [query, setQuery] = useState('');
+    const { runs, error } = useRunSummaries(`${runId ?? ''}:${open}`);
+    const indexed = useMemo(() => indexRuns(runs), [runs]);
+    const current = runs.find((run) => run.runId === runId);
+    const now = open ? DateTime.toEpochMillis(DateTime.nowUnsafe()) : 0;
+    const results = useMemo(() => {
+        const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+        const found = terms.length === 0 ? indexed : indexed.filter((entry) => matches(entry, terms));
+        return { shown: found.slice(0, RESULT_LIMIT), total: found.length };
+    }, [indexed, query]);
+    const toggleFromKeyboard = useCallback(() => {
+        setViaKeyboard(true);
+        setOpen((value) => !value);
+    }, []);
+    useCommandK(toggleFromKeyboard);
+    function change(next) {
+        setOpen(next);
+        if (!next) {
+            setQuery('');
+            setViaKeyboard(false);
+        }
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: change, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": "Search runs", className: "border-input bg-background/40 hover:bg-accent/60 hover:border-ring/40 focus-visible:ring-ring/50 data-[state=open]:border-ring/60 flex h-7 w-80 min-w-0 items-center gap-2 rounded-md border pr-1 pl-2.5 text-left text-xs transition-colors outline-none focus-visible:ring-[3px]", children: [_jsx(Search, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": true }), runId ? (_jsx(CurrentRun, { runId: runId, fallbackLabel: current?.definitionName ?? fallbackLabel })) : (_jsx("span", { className: "text-muted-foreground flex-1 truncate", children: "Search runs\u2026" })), _jsx(Kbd, { children: "\u2318K" })] }) }), _jsx(PopoverContent, { align: "start", className: "w-[26rem] p-0", "data-instant": viaKeyboard ? '' : undefined, children: _jsxs(Command, { shouldFilter: false, loop: true, children: [_jsx(CommandInput, { value: query, onValueChange: setQuery, placeholder: "Search by name, kind, status or id\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: error ?? 'No runs match.' }), results.shown.length > 0 ? (_jsx(CommandGroup, { heading: query ? 'Matches' : 'Recent runs', children: results.shown.map(({ run, createdAt }) => (_jsxs(CommandItem, { value: run.runId, onSelect: () => {
+                                            onSelectRun(run);
+                                            change(false);
+                                        }, className: "h-8", children: [_jsx(StatusDot, { status: run.status }), _jsx("span", { className: "min-w-0 truncate font-medium", children: run.definitionName ?? shortId(run.runId) }), run.kind ? (_jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: run.kind })) : null, _jsx("span", { className: "text-muted-foreground ml-auto shrink-0 font-mono text-[10px]", children: shortId(run.runId) }), _jsx("span", { className: "text-muted-foreground/80 w-14 shrink-0 text-right text-[10px] tabular-nums", children: createdAt ? relativeTime(createdAt, now) : '' })] }, run.runId))) })) : null] }), _jsxs("div", { className: "border-border text-muted-foreground flex h-8 items-center gap-3 border-t px-3 text-[10px]", children: [_jsx("span", { className: "tabular-nums", children: results.total > results.shown.length
+                                        ? `${results.shown.length} of ${results.total} runs · keep typing to narrow`
+                                        : `${results.total} ${results.total === 1 ? 'run' : 'runs'}` }), _jsxs("span", { className: "ml-auto flex items-center gap-1", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), "navigate"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Kbd, { children: "\u21B5" }), "open"] })] })] }) })] }));
+}

package/dist/debugger/shell/run-type-menu.d.ts

@@ -0,0 +1,6 @@
+import type { PublishedDefinition } from '@swirls/looms/core';
+export declare function RunTypeMenu({ definitions, selected, onSelect, }: {
+    definitions: readonly PublishedDefinition[];
+    selected?: PublishedDefinition;
+    onSelect: (definition: PublishedDefinition) => void;
+}): import("react").JSX.Element;

package/dist/debugger/shell/run-type-menu.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown, Plus } from 'lucide-react';
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { definitionKey } from './definition-key.js';
+export function RunTypeMenu({ definitions, selected, onSelect, }) {
+    const kinds = [...new Set(definitions.map((definition) => definition.kind))];
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "data-[state=open]:bg-accent data-[state=open]:text-foreground text-foreground max-w-64 gap-2 px-2", children: [selected ? (_jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [_jsx("span", { className: "text-muted-foreground font-mono text-[11px] font-normal", children: selected.kind }), _jsx("span", { className: "text-muted-foreground/60 font-normal", children: "/" }), _jsx("span", { className: "truncate", children: selected.name })] })) : (_jsx("span", { className: "text-muted-foreground", children: "Select run type" })), _jsx(ChevronsUpDown, { className: "text-muted-foreground" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 px-2 pt-1.5 pb-1 text-[11px]", children: [_jsx(Plus, { className: "size-3" }), "Start a new run"] }), _jsx(DropdownMenuRadioGroup, { value: selected ? definitionKey(selected) : '', children: kinds.map((kind, index) => (_jsxs(DropdownMenuGroup, { children: [index > 0 ? _jsx(DropdownMenuSeparator, {}) : null, _jsx(DropdownMenuLabel, { className: "font-mono", children: kind }), definitions
+                                    .filter((definition) => definition.kind === kind)
+                                    .map((definition) => (_jsxs(DropdownMenuRadioItem, { value: definitionKey(definition), onSelect: () => onSelect(definition), className: "flex-col items-start gap-0", children: [_jsx("span", { className: "font-medium", children: definition.name }), definition.description ? (_jsx("span", { className: "text-muted-foreground line-clamp-1 text-[11px]", children: definition.description })) : null] }, definitionKey(definition))))] }, kind))) })] })] }));
+}