@swirls/looms 0.1.0 → 0.2.0

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))) })] })] }));
+}

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

@@ -0,0 +1,31 @@
+import { type JsonValue } from '@swirls/looms/core';
+export interface FormField {
+    readonly name: string;
+    readonly label: string;
+    readonly type: 'string' | 'number' | 'boolean';
+    readonly defaultValue: string;
+}
+/** How a definition's input is edited: one text box, flat scalar fields, or raw JSON. */
+export type InputForm = {
+    readonly kind: 'text';
+} | {
+    readonly kind: 'fields';
+    readonly fields: readonly FormField[];
+} | {
+    readonly kind: 'json';
+};
+export interface FormValues {
+    /** Field values by name, for the `fields` form. */
+    readonly fields: Readonly<Record<string, string>>;
+    /** Text for the `text` form, or JSON source for the `json` form. */
+    readonly source: string;
+}
+/** Flat object fields, or undefined when the schema needs the raw JSON editor. */
+export declare function formFields(schema: JsonValue | undefined): readonly FormField[] | undefined;
+export declare function inputForm(schema: JsonValue | undefined): InputForm;
+export declare function initialValues(form: InputForm): FormValues;
+export declare function valuesToInput(fields: readonly FormField[], values: Readonly<Record<string, string>>): JsonValue;
+/** Input for the form's current values. Throws when the JSON source does not parse. */
+export declare function formInput(form: InputForm, values: FormValues): JsonValue;
+/** Input carrying a single chat message, when the form has exactly one string to put it in. */
+export declare function messageInput(form: InputForm, message: string): JsonValue | undefined;

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

@@ -0,0 +1,117 @@
+import { Predicate } from 'effect';
+import { cleanUndefined, isJsonNumber, isJsonObject, isJsonString, } from '@swirls/looms/core';
+function fieldType(value) {
+    if (value === 'string') {
+        return 'string';
+    }
+    if (value === 'number' || value === 'integer') {
+        return 'number';
+    }
+    if (value === 'boolean') {
+        return 'boolean';
+    }
+    return undefined;
+}
+/** Flat object fields, or undefined when the schema needs the raw JSON editor. */
+export function formFields(schema) {
+    if (!isJsonObject(schema) || schema.type !== 'object' || !isJsonObject(schema.properties)) {
+        return undefined;
+    }
+    const fields = [];
+    for (const [name, property] of Object.entries(schema.properties)) {
+        if (!isJsonObject(property) || !isJsonString(property.type)) {
+            return undefined;
+        }
+        const type = fieldType(property.type);
+        if (!type) {
+            return undefined;
+        }
+        const fallback = property.default;
+        const defaultValue = isJsonString(fallback) || isJsonNumber(fallback) || Predicate.isBoolean(fallback)
+            ? String(fallback)
+            : '';
+        fields.push({
+            name,
+            label: isJsonString(property.title) ? property.title : name,
+            type,
+            defaultValue,
+        });
+    }
+    return fields;
+}
+export function inputForm(schema) {
+    if (isJsonObject(schema) && schema.type === 'string') {
+        return { kind: 'text' };
+    }
+    const fields = formFields(schema);
+    return fields ? { kind: 'fields', fields } : { kind: 'json' };
+}
+export function initialValues(form) {
+    switch (form.kind) {
+        case 'text':
+            return { fields: {}, source: '' };
+        case 'fields':
+            return {
+                fields: Object.fromEntries(form.fields.map((field) => [field.name, field.defaultValue])),
+                source: '',
+            };
+        case 'json':
+            return { fields: {}, source: '{}' };
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}
+export function valuesToInput(fields, values) {
+    const input = {};
+    for (const field of fields) {
+        const raw = values[field.name] ?? field.defaultValue;
+        if (field.type === 'number') {
+            const parsed = Number(raw);
+            input[field.name] = Number.isFinite(parsed) ? parsed : 0;
+            continue;
+        }
+        if (field.type === 'boolean') {
+            input[field.name] = raw === 'true';
+            continue;
+        }
+        input[field.name] = raw;
+    }
+    return input;
+}
+/** Input for the form's current values. Throws when the JSON source does not parse. */
+export function formInput(form, values) {
+    switch (form.kind) {
+        case 'text':
+            return values.source;
+        case 'fields':
+            return valuesToInput(form.fields, values.fields);
+        case 'json':
+            return cleanUndefined(JSON.parse(values.source));
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}
+/** Input carrying a single chat message, when the form has exactly one string to put it in. */
+export function messageInput(form, message) {
+    switch (form.kind) {
+        case 'text':
+            return message;
+        case 'fields': {
+            const strings = form.fields.filter((field) => field.type === 'string');
+            const [only] = strings;
+            return strings.length === 1 && only
+                ? valuesToInput(form.fields, { [only.name]: message })
+                : undefined;
+        }
+        case 'json':
+            return undefined;
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+import type { WorkspaceContext } from '../plugin';
+/** Starts a run from a form built from the definition's input schema, then shows its result. */
+export declare function StartForm(context: WorkspaceContext): import("react").JSX.Element;

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Play } from 'lucide-react';
+import { useState } from 'react';
+import { isJsonObject, isJsonString } from '@swirls/looms/core';
+import { useRunEvents, useRunStore, useRunSummary, useThreadTree } from '@swirls/looms/react';
+import { JsonTree } from '../components/json-tree.js';
+import { StatusBadge } from '../components/status-dot.js';
+import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
+import { Input } from '../ui/input.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+import { Textarea } from '../ui/textarea.js';
+import { formInput, initialValues, inputForm, } from './schema-form.js';
+import { useStartRun } from './use-start-run.js';
+function RunResult({ runId }) {
+    const store = useRunStore(runId);
+    const summary = useRunSummary(store);
+    const tree = useThreadTree(store);
+    const events = useRunEvents(store);
+    const rootThreadId = tree.root?.threadId;
+    const completed = events.find((event) => event.type === 'runtime.thread.completed' && event.threadId === rootThreadId);
+    const failed = events.find((event) => event.type === 'runtime.thread.failed' && event.threadId === rootThreadId);
+    const output = completed && isJsonObject(completed.payload) ? completed.payload.output : undefined;
+    const failure = failed && isJsonObject(failed.payload) ? failed.payload.error : undefined;
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "Status" }), _jsx(StatusBadge, { status: summary.status })] }), output !== undefined ? (_jsxs("section", { className: "border-border bg-card rounded-lg border p-3", children: [_jsx("h3", { className: "text-muted-foreground mb-1.5 text-[11px] font-medium", children: "Output" }), _jsx(JsonTree, { value: output, defaultExpandDepth: 2 })] })) : null, isJsonString(failure) ? (_jsx("p", { className: "text-status-failed bg-status-failed/10 rounded-md px-3 py-2 text-xs", children: failure })) : null] }));
+}
+function FieldInput({ field, value, onChange, }) {
+    switch (field.type) {
+        case 'boolean':
+            return (_jsx(Checkbox, { checked: value === 'true', onCheckedChange: (checked) => onChange(String(checked === true)) }));
+        case 'number':
+            return (_jsx(Input, { type: "number", className: "h-8 font-mono text-xs", value: value, onChange: (event) => onChange(event.target.value) }));
+        case 'string':
+            return (_jsx(Input, { className: "h-8 text-[13px]", value: value, onChange: (event) => onChange(event.target.value) }));
+        default: {
+            const exhaustive = field.type;
+            return exhaustive;
+        }
+    }
+}
+function InputFields({ form, values, onChange, }) {
+    switch (form.kind) {
+        case 'text':
+            return (_jsx(Textarea, { className: "max-h-64 min-h-20", value: values.source, onChange: (event) => onChange({ ...values, source: event.target.value }), "aria-label": "Input" }));
+        case 'fields':
+            return form.fields.map((field) => (_jsxs("label", { className: field.type === 'boolean' ? 'flex items-center gap-2 text-xs' : 'grid gap-1.5 text-xs', children: [_jsx("span", { className: "text-foreground font-medium", children: field.label }), _jsx(FieldInput, { field: field, value: values.fields[field.name] ?? '', onChange: (value) => onChange({ ...values, fields: { ...values.fields, [field.name]: value } }) })] }, field.name)));
+        case 'json':
+            return (_jsx(Textarea, { className: "max-h-80 min-h-28 font-mono text-xs", value: values.source, onChange: (event) => onChange({ ...values, source: event.target.value }), "aria-label": "JSON input", spellCheck: false }));
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}
+/** Starts a run from a form built from the definition's input schema, then shows its result. */
+export function StartForm(context) {
+    const form = inputForm(context.definition.inputSchema);
+    const [values, setValues] = useState(() => initialValues(form));
+    const { start, fail, pending, error } = useStartRun(context);
+    function submit() {
+        let input;
+        try {
+            input = formInput(form, values);
+        }
+        catch (cause) {
+            fail(cause);
+            return;
+        }
+        start(input);
+    }
+    return (_jsx(ScrollArea, { className: "h-full", children: _jsxs("div", { className: "p-4", children: [context.runId ? (_jsx(RunResult, { runId: context.runId })) : (_jsxs("form", { className: "grid gap-4", onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [_jsxs("div", { children: [_jsx("p", { className: "text-[13px] font-medium", children: "Input" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Fields come from the definition's input schema." })] }), _jsx(InputFields, { form: form, values: values, onChange: setValues }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: pending, children: [_jsx(Play, {}), "Start run"] }), error ? _jsx("p", { className: "text-status-failed min-w-0 text-[11px]", children: error }) : null] })] })), context.runId && error ? (_jsx("p", { className: "text-status-failed mt-3 text-[11px]", children: error })) : null] }) }));
+}

package/dist/debugger/shell/use-start-run.d.ts

@@ -0,0 +1,14 @@
+import { type JsonValue } from '@swirls/looms/core';
+import type { WorkspaceContext } from '../plugin';
+export interface StartedRun {
+    readonly runId: string;
+    readonly threadId: string;
+}
+export interface StartRun {
+    /** Starts a run of the workspace definition, then runs `after` once the start is accepted. */
+    readonly start: <T>(input: JsonValue, after?: (started: StartedRun) => Promise<T>) => void;
+    readonly fail: (cause: unknown) => void;
+    readonly pending: boolean;
+    readonly error: string | null;
+}
+export declare function useStartRun({ definition, onStarted }: WorkspaceContext): StartRun;

package/dist/debugger/shell/use-start-run.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { createRunId } from '@swirls/looms/core';
+import { useDebugger } from '../context.js';
+import { errorMessage } from '../lib/cn.js';
+export function useStartRun({ definition, onStarted }) {
+    const { client } = useDebugger();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    function start(input, after) {
+        const runId = createRunId();
+        setPending(true);
+        setError(null);
+        onStarted(runId);
+        client
+            .startRun({
+            kind: definition.kind,
+            definitionName: definition.name,
+            definitionVersion: definition.version,
+            input,
+            runId,
+        })
+            .then((result) => after?.({ runId: result.runId, threadId: result.threadId }))
+            .catch((cause) => setError(errorMessage(cause)))
+            .finally(() => setPending(false));
+    }
+    return {
+        start,
+        fail: (cause) => setError(errorMessage(cause)),
+        pending,
+        error,
+    };
+}

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

@@ -0,0 +1,6 @@
+import type { PublishedDefinition } from '@swirls/looms/core';
+export declare function Workspace({ definition, runId, onStarted, }: {
+    definition: PublishedDefinition | undefined;
+    runId?: string;
+    onStarted: (runId: string) => void;
+}): import("react").JSX.Element;

package/dist/debugger/shell/workspace.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MousePointerClick } from 'lucide-react';
+import { useDebugger } from '../context.js';
+import { workspaceFor } from '../plugin.js';
+import { EmptyState, PanelHeader } from '../ui/panel.js';
+import { definitionKey } from './definition-key.js';
+import { StartForm } from './start-form.js';
+export function Workspace({ definition, runId, onStarted, }) {
+    const { plugins } = useDebugger();
+    if (!definition) {
+        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(PanelHeader, {}), _jsx(EmptyState, { icon: _jsx(MousePointerClick, {}), title: "Pick a run type", children: "Choose one from the run type menu to start a run, or press \u2318K to open a past run." })] }));
+    }
+    const View = workspaceFor(plugins, definition)?.component ?? StartForm;
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(PanelHeader, { children: _jsxs("h2", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { className: "shrink-0 text-[13px] font-medium", children: definition.name }), definition.description ? (_jsx("span", { className: "text-muted-foreground truncate text-xs", title: definition.description, children: definition.description })) : null] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(View, { definition: definition, runId: runId, onStarted: onStarted }, definitionKey(definition)) })] }));
+}

package/dist/debugger/styles.css

@@ -1,31 +1,129 @@
-@source "./**/*.{ts,tsx}";
+@source "./**/*.js";
+@source "../agent/debugger/**/*.js";
+@source "../workflow/debugger/**/*.js";
+@source "../approval/debugger/**/*.js";
 
 @theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
   --color-status-running: var(--status-running);
   --color-status-waiting: var(--status-waiting);
   --color-status-completed: var(--status-completed);
   --color-status-failed: var(--status-failed);
   --color-status-cancelled: var(--status-cancelled);
-  --color-family-runtime: var(--family-runtime);
-  --color-family-agent: var(--family-agent);
-  --color-family-workflow: var(--family-workflow);
-  --color-family-approval: var(--family-approval);
-  --color-family-payments: var(--family-payments);
-  --color-family-wait: var(--family-wait);
+  --color-json-key: var(--json-key);
+  --color-json-string: var(--json-string);
+  --color-json-number: var(--json-number);
+  --color-json-boolean: var(--json-boolean);
+  --color-json-null: var(--json-null);
+  --ease-snappy: var(--debugger-ease);
+}
+
+/* Layered so a host's own unlayered :root theme (for example shadcn/ui) takes precedence. */
+@layer base {
+  :root {
+    --background: oklch(0.16 0.005 260);
+    --foreground: oklch(0.93 0.01 260);
+    --card: oklch(0.19 0.006 260);
+    --card-foreground: oklch(0.93 0.01 260);
+    --primary: oklch(0.93 0.01 260);
+    --primary-foreground: oklch(0.2 0.006 260);
+    --secondary: oklch(0.24 0.008 260);
+    --secondary-foreground: oklch(0.93 0.01 260);
+    --muted: oklch(0.24 0.008 260);
+    --muted-foreground: oklch(0.68 0.015 260);
+    --accent: oklch(0.26 0.01 260);
+    --accent-foreground: oklch(0.95 0.01 260);
+    --destructive: oklch(0.65 0.18 25);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 12%);
+    --ring: oklch(0.55 0.02 260);
+    --sidebar: oklch(0.18 0.006 260);
+    --sidebar-foreground: oklch(0.93 0.01 260);
+  }
+
+  :where(.looms-debugger, .debugger-pop),
+  :where(.looms-debugger, .debugger-pop) *,
+  :where(.looms-debugger, .debugger-pop) ::before,
+  :where(.looms-debugger, .debugger-pop) ::after {
+    border-color: var(--color-border);
+  }
 }
 
 :root {
+  --debugger-ease: cubic-bezier(0.23, 1, 0.32, 1);
   --status-running: oklch(0.74 0.12 240);
   --status-waiting: oklch(0.8 0.14 85);
   --status-completed: oklch(0.76 0.13 155);
   --status-failed: oklch(0.68 0.18 25);
   --status-cancelled: oklch(0.62 0.01 260);
-  --family-runtime: oklch(0.76 0.13 155);
-  --family-agent: oklch(0.74 0.12 240);
-  --family-workflow: oklch(0.76 0.12 300);
-  --family-approval: oklch(0.8 0.14 85);
-  --family-payments: oklch(0.78 0.1 175);
-  --family-wait: oklch(0.8 0.14 85);
+  --json-key: oklch(0.8 0.06 280);
+  --json-string: oklch(0.8 0.1 150);
+  --json-number: oklch(0.8 0.1 230);
+  --json-boolean: oklch(0.82 0.11 70);
+  --json-null: oklch(0.6 0.01 260);
+}
+
+@keyframes debugger-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+@keyframes debugger-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Anchored overlays grow from their trigger; keyboard-opened ones appear instantly. */
+.debugger-pop {
+  transform-origin: var(--radix-popper-transform-origin);
+  animation: debugger-pop-in 150ms var(--debugger-ease);
+}
+
+.debugger-pop[data-instant] {
+  animation: none;
+}
+
+.debugger-float-in {
+  transition:
+    opacity 150ms var(--debugger-ease),
+    transform 150ms var(--debugger-ease),
+    scale 150ms var(--debugger-ease),
+    background-color 150ms var(--debugger-ease);
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .debugger-pop {
+    animation-name: debugger-fade-in;
+  }
+
+  .debugger-float-in {
+    transition-property: opacity;
+  }
 }
 
 .debugger-event-stream {
@@ -55,17 +153,3 @@
     display: inline;
   }
 }
-
-@container (max-width: 22rem) {
-  .debugger-follow-label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-}

package/dist/debugger/ui/button.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+declare const variants: {
+    readonly default: 'bg-primary text-primary-foreground hover:bg-primary/90';
+    readonly secondary: 'bg-secondary text-secondary-foreground hover:bg-accent';
+    readonly outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent';
+    readonly ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground';
+    readonly destructive: 'text-muted-foreground hover:bg-status-failed/15 hover:text-status-failed';
+};
+declare const sizes: {
+    readonly xs: 'h-6 gap-1 rounded-sm px-2 text-[11px] [&_svg]:size-3';
+    readonly sm: 'h-7 gap-1.5 rounded-md px-2.5 text-xs [&_svg]:size-3.5';
+    readonly default: 'h-8 gap-1.5 rounded-md px-3 text-xs [&_svg]:size-3.5';
+    readonly 'icon-xs': 'size-6 rounded-sm [&_svg]:size-3';
+    readonly 'icon-sm': 'size-7 rounded-md [&_svg]:size-3.5';
+    readonly icon: 'size-8 rounded-md [&_svg]:size-4';
+};
+export type ButtonVariant = keyof typeof variants;
+export type ButtonSize = keyof typeof sizes;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button };

package/dist/debugger/ui/button.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const variants = {
+    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-accent',
+    outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent',
+    ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground',
+    destructive: 'text-muted-foreground hover:bg-status-failed/15 hover:text-status-failed',
+};
+const sizes = {
+    xs: 'h-6 gap-1 rounded-sm px-2 text-[11px] [&_svg]:size-3',
+    sm: 'h-7 gap-1.5 rounded-md px-2.5 text-xs [&_svg]:size-3.5',
+    default: 'h-8 gap-1.5 rounded-md px-3 text-xs [&_svg]:size-3.5',
+    'icon-xs': 'size-6 rounded-sm [&_svg]:size-3',
+    'icon-sm': 'size-7 rounded-md [&_svg]:size-3.5',
+    icon: 'size-8 rounded-md [&_svg]:size-4',
+};
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (_jsx(Comp, { "data-slot": "button", type: asChild ? undefined : (props.type ?? 'button'), className: cn('focus-visible:ring-ring/50 ease-snappy inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap outline-none select-none focus-visible:ring-[3px] active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0', 'transition-[transform,background-color,color,opacity] duration-150', variants[variant], sizes[size], className), ...props }));
+}
+export { Button };

package/dist/debugger/ui/command.d.ts

@@ -0,0 +1,9 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };