@calliopelabs/ui 0.7.0 → 0.11.0

package/dist/workflow/editor/WorkflowInspector.js

@@ -0,0 +1,349 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PlusIcon, Trash2Icon, XIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../primitives/Button.js";
+import { Checkbox } from "../../primitives/Checkbox.js";
+import { Field } from "../../primitives/Field.js";
+import { Input } from "../../primitives/Input.js";
+import { Select } from "../../primitives/Select.js";
+import { Switch } from "../../primitives/Switch.js";
+import { Textarea } from "../../primitives/Textarea.js";
+import { useUI } from "../../provider/UIProvider.js";
+import { WORKFLOW_SELECTORS, dataTypes, edgeId, exitLabel, findFact, findGateKind, findPreset, freshId, inputsOf, operatorsFor, outputsOf, portOf, removeEdge, removeNode, updateEdge, updateNode, withFlow, } from "../definition.js";
+const DEFAULT = "__default";
+const NONE = "__none";
+/** A number field that commits a number, or nothing when emptied. */
+function NumberInput({ value, onValue, min, max, step, ...props }) {
+    return (_jsx(Input, { ...props, type: "number", inputMode: "decimal", min: min, max: max, step: step, value: value ?? "", onChange: (e) => {
+            const n = e.target.valueAsNumber;
+            onValue(e.target.value === "" || Number.isNaN(n) ? undefined : n);
+        } }));
+}
+/** A 0 to 1 value as a percentage. */
+function PercentInput({ value, onValue, ...props }) {
+    return (_jsx(NumberInput, { ...props, min: 0, max: 100, step: 1, value: value === undefined ? undefined : Math.round(value * 100), onValue: (v) => onValue(v === undefined ? undefined : Math.min(1, Math.max(0, v / 100))) }));
+}
+/** A host picker: the host's options, with "the default" first. */
+function HostPicker({ label, options, value, onValue, disabled, }) {
+    const { messages } = useUI();
+    if (!options?.length)
+        return null;
+    const known = !value || options.some((o) => o.id === value);
+    return (_jsx(Field, { label: label, children: _jsx(Select, { value: value ?? DEFAULT, disabled: disabled, onValueChange: (v) => onValue(v === DEFAULT ? undefined : v), options: [
+                { value: DEFAULT, label: messages.editor.hostDefault },
+                ...options.map((o) => ({ value: o.id, label: o.label })),
+                ...(known ? [] : [{ value: value, label: value }]),
+            ] }) }));
+}
+/** Ticks for a set of the host's options: roles, members. */
+function OptionChecks({ legend, options, value, onValue, disabled, }) {
+    const id = React.useId();
+    return (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("legend", { className: "mb-1 text-sm font-medium", children: legend }), options.map((o) => (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: `${id}-${o.id}`, checked: value.includes(o.id), disabled: disabled, onCheckedChange: (checked) => onValue(checked === true ? [...value, o.id] : value.filter((v) => v !== o.id)) }), _jsx("label", { htmlFor: `${id}-${o.id}`, children: o.label })] }, o.id)))] }));
+}
+/** One comparison on a run fact: the fact, its node when it is a node's, the operator and the value. */
+export function ConditionEditor({ condition, onChange, flow, registry, label, disabled = false, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const fact = findFact(registry, condition.fact);
+    const ops = operatorsFor(registry, fact);
+    const op = registry.operators.find((o) => o.id === condition.op);
+    const nodes = fact?.node
+        ? flow.nodes.filter((n) => fact.node === true || (Array.isArray(fact.node) && fact.node.includes(n.kind)))
+        : [];
+    const setFact = (id) => {
+        const next = findFact(registry, id);
+        const nextOp = operatorsFor(registry, next)[0];
+        onChange({
+            fact: id,
+            op: nextOp?.id ?? "",
+            ...(next?.node && condition.node ? { node: condition.node } : {}),
+            ...(nextOp?.unary
+                ? {}
+                : {
+                    value: next?.type === "boolean"
+                        ? true
+                        : next?.type === "number"
+                            ? 0
+                            : next?.type === "enum"
+                                ? (next.values?.[0]?.id ?? "")
+                                : "",
+                }),
+        });
+    };
+    return (_jsxs("fieldset", { className: "flex flex-col gap-3 rounded-lg border border-border p-3", children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: label }), _jsx(Field, { label: m.fact, children: _jsx(Select, { value: condition.fact || NONE, disabled: disabled, onValueChange: setFact, options: [
+                        ...(fact
+                            ? []
+                            : [
+                                {
+                                    value: condition.fact || NONE,
+                                    label: condition.fact || m.choose,
+                                    disabled: true,
+                                },
+                            ]),
+                        ...registry.facts.map((f) => ({ value: f.id, label: f.label })),
+                    ] }) }), fact?.node ? (_jsx(Field, { label: m.factNode, children: _jsx(Select, { value: condition.node ?? NONE, disabled: disabled, onValueChange: (v) => onChange({ ...condition, node: v }), options: [
+                        ...(condition.node ? [] : [{ value: NONE, label: m.choose, disabled: true }]),
+                        ...nodes.map((n) => ({ value: n.id, label: n.label })),
+                    ] }) })) : null, _jsx(Field, { label: m.operator, children: _jsx(Select, { value: op && ops.includes(op) ? op.id : NONE, disabled: disabled, onValueChange: (v) => {
+                        const next = registry.operators.find((o) => o.id === v);
+                        const { value: _value, ...rest } = condition;
+                        onChange(next?.unary ? { ...rest, op: v } : { ...condition, op: v });
+                    }, options: [
+                        ...(op && ops.includes(op)
+                            ? []
+                            : [{ value: NONE, label: condition.op || m.choose, disabled: true }]),
+                        ...ops.map((o) => ({ value: o.id, label: o.label })),
+                    ] }) }), op?.unary ? null : fact?.type === "number" ? (_jsx(Field, { label: m.value, children: _jsx(NumberInput, { value: typeof condition.value === "number" ? condition.value : undefined, disabled: disabled, onValue: (v) => onChange({ ...condition, value: v }) }) })) : fact?.type === "boolean" ? (_jsx(Field, { label: m.value, children: _jsx(Select, { value: String(condition.value === true), disabled: disabled, onValueChange: (v) => onChange({ ...condition, value: v === "true" }), options: [
+                        { value: "true", label: m.boolean(true) },
+                        { value: "false", label: m.boolean(false) },
+                    ] }) })) : fact?.type === "enum" && fact.values ? (_jsx(Field, { label: m.value, children: _jsx(Select, { value: typeof condition.value === "string" && condition.value ? condition.value : NONE, disabled: disabled, onValueChange: (v) => onChange({ ...condition, value: v }), options: [
+                        ...(fact.values.some((v) => v.id === condition.value)
+                            ? []
+                            : [{ value: NONE, label: m.choose, disabled: true }]),
+                        ...fact.values.map((v) => ({ value: v.id, label: v.label })),
+                    ] }) })) : (_jsx(Field, { label: m.value, children: _jsx(Input, { value: typeof condition.value === "string" ? condition.value : String(condition.value ?? ""), disabled: disabled, onChange: (e) => onChange({ ...condition, value: e.target.value }) }) }))] }));
+}
+/** Who approves a gate: roles, named members, a quorum, and a timeout with what happens then. */
+export function GatePolicyEditor({ policy, onChange, registry, approvers = true, timeout = true, disabled = false, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const set = (patch) => {
+        const next = { ...policy, ...patch };
+        for (const k of Object.keys(next))
+            if (next[k] === undefined)
+                delete next[k];
+        onChange(next);
+    };
+    return (_jsxs("fieldset", { className: "flex flex-col gap-3 rounded-lg border border-border p-3", children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: m.approvers }), approvers ? (_jsxs(_Fragment, { children: [registry.roles?.length ? (_jsx(OptionChecks, { legend: m.roles, options: registry.roles, value: policy.roles ?? [], onValue: (roles) => set({ roles }), disabled: disabled })) : null, registry.members?.length ? (_jsx(OptionChecks, { legend: m.members, options: [
+                            ...registry.members,
+                            ...(policy.members ?? [])
+                                .filter((id) => !registry.members?.some((o) => o.id === id))
+                                .map((id) => ({ id, label: id })),
+                        ], value: policy.members ?? [], onValue: (members) => set({ members }), disabled: disabled })) : null, _jsx(Field, { label: m.quorum, hint: m.quorumHint, children: _jsx(NumberInput, { value: policy.quorum, min: 1, step: 1, disabled: disabled, onValue: (quorum) => set({ quorum }) }) })] })) : null, timeout ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.timeoutHours, children: _jsx(NumberInput, { value: policy.timeoutHours, min: 0, step: 1, disabled: disabled, onValue: (timeoutHours) => set({ timeoutHours }) }) }), policy.timeoutHours ? (_jsx(Field, { label: m.onTimeout, children: _jsx(Select, { value: policy.onTimeout ?? NONE, disabled: disabled, onValueChange: (v) => set({ onTimeout: v }), options: [
+                                ...(policy.onTimeout ? [] : [{ value: NONE, label: m.choose, disabled: true }]),
+                                { value: "fail", label: m.onTimeoutOption("fail") },
+                                { value: "escalate", label: m.onTimeoutOption("escalate") },
+                            ] }) })) : null] })) : null] }));
+}
+/** A list of rows with add and remove, for cases, labels, variants and ports. */
+function RowList({ legend, rows, render, name, onAdd, onRemove, addLabel, disabled, }) {
+    const { messages } = useUI();
+    return (_jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "mb-1 text-sm font-medium", children: legend }), rows.map((row, i) => (_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-border p-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: render(row, i) }), disabled ? null : (_jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": messages.editor.remove(name(row)), title: messages.editor.remove(name(row)), onClick: () => onRemove(i), children: _jsx(XIcon, { "aria-hidden": true }) }))] }, i))), disabled ? null : (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "self-start", onClick: onAdd, children: [_jsx(PlusIcon, { "aria-hidden": true }), addLabel] }))] }));
+}
+const replace = (rows, i, row) => rows.map((r, j) => (j === i ? row : r));
+function PortsEditor({ legend, ports, onChange, registry, disabled, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const types = [{ id: "any", label: m.anyType }, ...dataTypes(registry)];
+    return (_jsx(RowList, { legend: legend, rows: ports, name: (p) => p.label, addLabel: m.addPort, disabled: disabled, onAdd: () => {
+            const id = freshId(m.newPort, ports.map((p) => p.id));
+            onChange([...ports, { id, label: m.newPort, type: "any" }]);
+        }, onRemove: (i) => onChange(ports.filter((_, j) => j !== i)), render: (p, i) => (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.portLabel, children: _jsx(Input, { value: p.label, disabled: disabled, onChange: (e) => onChange(replace(ports, i, { ...p, label: e.target.value })) }) }), _jsx(Field, { label: m.portType, children: _jsx(Select, { value: p.type, disabled: disabled, onValueChange: (type) => onChange(replace(ports, i, { ...p, type })), options: [
+                            ...types.map((t) => ({ value: t.id, label: t.label })),
+                            ...(types.some((t) => t.id === p.type) ? [] : [{ value: p.type, label: p.type }]),
+                        ] }) })] })) }));
+}
+/**
+ * The selected node's or connection's fields, edited in place: per-kind
+ * fields, a condition editor over the host's facts and operators, a gate
+ * policy editor (roles, members, quorum, timeout), and the host's model,
+ * harness and effort pickers. With nothing selected, the workflow's name and
+ * description. Every edit goes out as the whole next definition.
+ */
+export function WorkflowInspector({ definition, registry, selection = null, onChange, onSelectionChange, readOnly = false, className, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const disabled = readOnly || !onChange;
+    const flowName = selection?.flow && definition.flows[selection.flow] ? selection.flow : definition.main;
+    const flow = definition.flows[flowName] ?? { nodes: [], edges: [] };
+    const node = selection?.type === "node" ? flow.nodes.find((n) => n.id === selection.id) : undefined;
+    const edge = selection?.type === "edge" ? flow.edges.find((e) => edgeId(e) === selection.id) : undefined;
+    const setFlow = (next) => onChange?.(withFlow(definition, flowName, next));
+    let body;
+    let title;
+    if (node) {
+        title = m.inspectorFor(m.kind(node.kind), node.label);
+        body = (_jsx(NodeFields, { node: node, flow: flow, definition: definition, registry: registry, disabled: disabled, onPatch: (patch) => setFlow(updateNode(flow, node.id, patch)), onDelete: () => {
+                setFlow(removeNode(flow, node.id));
+                onSelectionChange?.(null);
+            } }));
+    }
+    else if (edge) {
+        const from = flow.nodes.find((n) => n.id === edge.from);
+        const to = flow.nodes.find((n) => n.id === edge.to);
+        title = m.edgeName(edge.kind, from?.label ?? edge.from, to?.label ?? edge.to);
+        body = (_jsx(EdgeFields, { edge: edge, flow: flow, definition: definition, registry: registry, disabled: disabled, 
+            // A connection's id is its ends and ports, none of which the inspector changes.
+            onPatch: (patch) => setFlow(updateEdge(flow, edgeId(edge), patch)), onDelete: () => {
+                setFlow(removeEdge(flow, edgeId(edge)));
+                onSelectionChange?.(null);
+            } }));
+    }
+    else {
+        title = m.workflowDetails;
+        body = (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { label: m.name, children: _jsx(Input, { value: definition.name, disabled: disabled, onChange: (e) => onChange?.({ ...definition, name: e.target.value }) }) }), _jsx(Field, { label: m.description, children: _jsx(Textarea, { value: definition.description ?? "", disabled: disabled, onChange: (e) => onChange?.({ ...definition, description: e.target.value || undefined }) }) }), _jsx(PortsEditor, { legend: m.runInputs, ports: flow.inputs ?? [], registry: registry, disabled: disabled, onChange: (inputs) => setFlow({ ...flow, inputs }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: m.inspectorEmpty })] }));
+    }
+    return (_jsxs("section", { "aria-label": m.inspector, "data-slot": "workflow-inspector", className: cn("flex min-h-0 flex-col gap-3", className), children: [_jsx("h2", { className: "truncate text-sm font-medium", children: title }), _jsx("div", { className: "flex min-h-0 flex-col gap-4 overflow-y-auto pb-2", children: body })] }));
+}
+function NodeFields({ node, flow, definition, registry, disabled, onPatch, onDelete, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const presetOptions = registry.modules.flatMap((mod) => mod.presets.map((p) => ({ value: `${mod.id}/${p.id}`, label: `${mod.label} · ${p.label}` })));
+    const presetValue = (ref) => ref ? `${ref.module}/${ref.id}` : NONE;
+    const toRef = (v) => {
+        if (v === NONE)
+            return undefined;
+        const [module, id] = v.split("/");
+        return { module, id };
+    };
+    const others = flow.nodes.filter((n) => n.id !== node.id);
+    const common = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.label, children: _jsx(Input, { value: node.label, disabled: disabled, onChange: (e) => onPatch({ label: e.target.value }) }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: m.nodeId(node.id) })] }));
+    const agent = (target, patch) => (_jsxs(_Fragment, { children: [_jsx(HostPicker, { label: m.model, options: registry.models, value: target.model, onValue: (model) => patch({ model }), disabled: disabled }), _jsx(HostPicker, { label: m.harness, options: registry.harnesses, value: target.harness, onValue: (harness) => patch({ harness }), disabled: disabled }), _jsx(HostPicker, { label: m.effort, options: registry.efforts, value: target.effort, onValue: (effort) => patch({ effort }), disabled: disabled })] }));
+    let fields = null;
+    switch (node.kind) {
+        case "step": {
+            const found = findPreset(registry, node.preset);
+            const unknown = node.preset && !found;
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.preset, children: _jsx(Select, { value: presetValue(node.preset), disabled: disabled, onValueChange: (v) => {
+                                const preset = toRef(v);
+                                onPatch(preset
+                                    ? { preset, inputs: undefined, outputs: undefined }
+                                    : { preset: undefined, inputs: [], outputs: [] });
+                            }, options: [
+                                { value: NONE, label: m.customStep },
+                                ...presetOptions,
+                                ...(unknown && node.preset
+                                    ? [{ value: presetValue(node.preset), label: presetValue(node.preset) }]
+                                    : []),
+                            ] }) }), found ? (_jsx(PortSummary, { node: node, definition: definition, registry: registry })) : (_jsxs(_Fragment, { children: [_jsx(PortsEditor, { legend: m.inputs, ports: node.inputs ?? [], registry: registry, disabled: disabled, onChange: (inputs) => onPatch({ inputs }) }), _jsx(PortsEditor, { legend: m.outputs, ports: node.outputs ?? [], registry: registry, disabled: disabled, onChange: (outputs) => onPatch({ outputs }) })] })), !found || found.preset.agent ? agent(node, (p) => onPatch(p)) : null] }));
+            break;
+        }
+        case "subflow":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.subflow, children: _jsx(Select, { value: node.flow || NONE, disabled: disabled, onValueChange: (flow) => onPatch({ flow }), options: [
+                                ...(node.flow ? [] : [{ value: NONE, label: m.choose, disabled: true }]),
+                                ...Object.entries(definition.flows)
+                                    .filter(([name]) => name !== definition.main)
+                                    .map(([name, f]) => ({ value: name, label: f.label ?? name })),
+                            ] }) }), _jsx(Field, { label: m.each, hint: m.eachHint, children: _jsx(Input, { value: node.each ?? "", disabled: disabled, onChange: (e) => onPatch({ each: e.target.value || undefined }) }) })] }));
+            break;
+        case "gate": {
+            const kind = findGateKind(registry, node.gate);
+            const fieldsOf = kind?.fields ?? [];
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.gateKind, hint: kind?.hint, children: _jsx(Select, { value: kind ? node.gate : NONE, disabled: disabled, onValueChange: (gate) => onPatch({ gate }), options: [
+                                ...(kind ? [] : [{ value: NONE, label: node.gate || m.choose, disabled: true }]),
+                                ...registry.gateKinds.map((g) => ({ value: g.id, label: g.label })),
+                            ] }) }), fieldsOf.includes("approvers") || fieldsOf.includes("timeout") ? (_jsx(GatePolicyEditor, { policy: node.policy ?? {}, registry: registry, approvers: fieldsOf.includes("approvers"), timeout: fieldsOf.includes("timeout"), disabled: disabled, onChange: (policy) => onPatch({ policy }) })) : null, fieldsOf.includes("threshold") ? (_jsx(Field, { label: m.threshold, children: _jsx(PercentInput, { value: node.threshold, disabled: disabled, onValue: (threshold) => onPatch({ threshold }) }) })) : null, fieldsOf.includes("rule") ? (_jsx(Field, { label: m.rule, children: _jsx(Textarea, { value: node.rule ?? "", disabled: disabled, onChange: (e) => onPatch({ rule: e.target.value }) }) })) : null] }));
+            break;
+        }
+        case "condition": {
+            const n = node;
+            fields = (_jsx(RowList, { legend: m.cases, rows: n.cases, name: (c) => c.label, addLabel: m.addCase, disabled: disabled, onAdd: () => {
+                    const id = freshId("case", n.cases.map((c) => c.id));
+                    const fact = registry.facts[0];
+                    const op = operatorsFor(registry, fact)[0];
+                    onPatch({
+                        cases: [
+                            ...n.cases,
+                            {
+                                id,
+                                label: m.newCase(n.cases.length + 1),
+                                when: {
+                                    fact: fact?.id ?? "",
+                                    op: op?.id ?? "",
+                                    ...(op?.unary ? {} : { value: "" }),
+                                },
+                            },
+                        ],
+                    });
+                }, onRemove: (i) => onPatch({ cases: n.cases.filter((_, j) => j !== i) }), render: (c, i) => (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.caseLabel, children: _jsx(Input, { value: c.label, disabled: disabled, onChange: (e) => onPatch({ cases: replace(n.cases, i, { ...c, label: e.target.value }) }) }) }), _jsx(ConditionEditor, { label: m.when(c.label), condition: c.when, flow: flow, registry: registry, disabled: disabled, onChange: (when) => onPatch({ cases: replace(n.cases, i, { ...c, when }) }) })] })) }));
+            break;
+        }
+        case "goto":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.target, children: _jsx(Select, { value: node.target || NONE, disabled: disabled, onValueChange: (target) => onPatch({ target }), options: [
+                                ...(others.some((o) => o.id === node.target)
+                                    ? []
+                                    : [
+                                        {
+                                            value: node.target || NONE,
+                                            label: node.target || m.choose,
+                                            disabled: true,
+                                        },
+                                    ]),
+                                ...others.map((o) => ({ value: o.id, label: o.label })),
+                            ] }) }), _jsx(Field, { label: m.limit, children: _jsx(NumberInput, { value: node.max, min: 1, step: 1, disabled: disabled, onValue: (max) => onPatch({ max }) }) })] }));
+            break;
+        case "fanout":
+            fields = _jsx("p", { className: "text-sm text-muted-foreground", children: m.kindHint("fanout") });
+            break;
+        case "join":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.wait, children: _jsx(Select, { value: node.wait, disabled: disabled, onValueChange: (wait) => onPatch({ wait: wait }), options: ["all", "any", "n"].map((w) => ({
+                                value: w,
+                                label: m.waitOption(w),
+                            })) }) }), node.wait === "n" ? (_jsx(Field, { label: m.waitN, children: _jsx(NumberInput, { value: node.n, min: 1, step: 1, disabled: disabled, onValue: (n) => onPatch({ n }) }) })) : null] }));
+            break;
+        case "variants": {
+            const n = node;
+            const evaluators = others.filter((o) => o.kind === "evaluator");
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.preset, children: _jsx(Select, { value: presetValue(n.preset), disabled: disabled, onValueChange: (v) => onPatch({ preset: toRef(v) }), options: [{ value: NONE, label: m.noPreset }, ...presetOptions] }) }), _jsx(Field, { label: m.winner, children: _jsx(Select, { value: n.select ?? NONE, disabled: disabled, onValueChange: (v) => onPatch({ select: v }), options: [
+                                ...(n.select ? [] : [{ value: NONE, label: m.choose, disabled: true }]),
+                                ...WORKFLOW_SELECTORS.map((s) => ({ value: s, label: m.selector(s) })),
+                            ] }) }), n.select === "evaluator" ? (_jsx(Field, { label: m.evaluator, children: _jsx(Select, { value: n.evaluator ?? NONE, disabled: disabled, onValueChange: (evaluator) => onPatch({ evaluator }), options: [
+                                ...(n.evaluator ? [] : [{ value: NONE, label: m.choose, disabled: true }]),
+                                ...evaluators.map((o) => ({ value: o.id, label: o.label })),
+                            ] }) })) : null, _jsx(RowList, { legend: m.variants, rows: n.variants, name: (v) => v.label, addLabel: m.addVariant, disabled: disabled, onAdd: () => {
+                            const id = freshId("variant", n.variants.map((v) => v.id));
+                            onPatch({
+                                variants: [...n.variants, { id, label: m.newVariant(n.variants.length + 1) }],
+                            });
+                        }, onRemove: (i) => onPatch({ variants: n.variants.filter((_, j) => j !== i) }), render: (v, i) => (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.variantLabel, children: _jsx(Input, { value: v.label, disabled: disabled, onChange: (e) => onPatch({ variants: replace(n.variants, i, { ...v, label: e.target.value }) }) }) }), agent(v, (p) => onPatch({ variants: replace(n.variants, i, { ...v, ...p }) }))] })) })] }));
+            break;
+        }
+        case "evaluator":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.question, children: _jsx(Textarea, { value: node.question ?? "", disabled: disabled, onChange: (e) => onPatch({ question: e.target.value || undefined }) }) }), _jsx(Field, { label: m.levels, hint: m.levelsHint, children: _jsx(Textarea, { value: node.levels.join("\n"), disabled: disabled, onChange: (e) => onPatch({
+                                levels: e.target.value
+                                    .split("\n")
+                                    .map((l) => l.trim())
+                                    .filter(Boolean),
+                            }) }) }), _jsx(Field, { label: m.routes, orientation: "horizontal", children: _jsx(Switch, { checked: node.routes, disabled: disabled, onCheckedChange: (routes) => onPatch({ routes }) }) }), _jsx(Field, { label: m.threshold, children: _jsx(PercentInput, { value: node.threshold, disabled: disabled, onValue: (threshold) => onPatch({ threshold }) }) }), _jsx(Field, { label: m.minConfidence, hint: m.minConfidenceHint, children: _jsx(PercentInput, { value: node.minConfidence, disabled: disabled, onValue: (minConfidence) => onPatch({ minConfidence }) }) })] }));
+            break;
+        case "classifier": {
+            const n = node;
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.question, children: _jsx(Textarea, { value: n.question ?? "", disabled: disabled, onChange: (e) => onPatch({ question: e.target.value || undefined }) }) }), _jsx(RowList, { legend: m.options, rows: n.options, name: (o) => o.label, addLabel: m.addOption, disabled: disabled, onAdd: () => {
+                            const id = freshId("label", n.options.map((o) => o.id));
+                            onPatch({
+                                options: [...n.options, { id, label: m.newOption(n.options.length + 1) }],
+                            });
+                        }, onRemove: (i) => onPatch({ options: n.options.filter((_, j) => j !== i) }), render: (o, i) => (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.optionLabel, children: _jsx(Input, { value: o.label, disabled: disabled, onChange: (e) => onPatch({ options: replace(n.options, i, { ...o, label: e.target.value }) }) }) }), _jsx(Field, { label: m.optionDescription, children: _jsx(Input, { value: o.description ?? "", disabled: disabled, onChange: (e) => onPatch({
+                                            options: replace(n.options, i, {
+                                                ...o,
+                                                description: e.target.value || undefined,
+                                            }),
+                                        }) }) })] })) }), _jsx(Field, { label: m.otherExit, orientation: "horizontal", children: _jsx(Switch, { checked: n.other, disabled: disabled, onCheckedChange: (other) => onPatch({ other }) }) }), _jsx(Field, { label: m.minConfidence, hint: m.minConfidenceHint, children: _jsx(PercentInput, { value: n.minConfidence, disabled: disabled, onValue: (minConfidence) => onPatch({ minConfidence }) }) })] }));
+            break;
+        }
+        case "check":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.question, children: _jsx(Textarea, { value: node.question, disabled: disabled, onChange: (e) => onPatch({ question: e.target.value }) }) }), _jsx(Field, { label: m.yesAt, children: _jsx(PercentInput, { value: node.threshold, disabled: disabled, onValue: (threshold) => onPatch({ threshold: threshold ?? 0.5 }) }) })] }));
+            break;
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [common, fields, _jsx(Field, { label: m.note, children: _jsx(Textarea, { value: node.note ?? "", disabled: disabled, onChange: (e) => onPatch({ note: e.target.value || undefined }) }) }), disabled ? null : (_jsxs(Button, { type: "button", variant: "destructive", size: "sm", className: "self-start", onClick: onDelete, children: [_jsx(Trash2Icon, { "aria-hidden": true }), m.deleteNode(node.label)] }))] }));
+}
+/** A preset's contract, read from the registry. */
+function PortSummary({ node, definition, registry, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const list = (title, ports) => (_jsxs("div", { children: [_jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: title }), ports.length ? (_jsx("ul", { className: "text-sm", children: ports.map((p) => (_jsxs("li", { children: [m.port(p.label, p.type), p.optional ? _jsxs("span", { className: "text-muted-foreground", children: [", ", m.optional] }) : null] }, p.id))) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.run.none }))] }));
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [list(m.inputs, inputsOf(node, registry, definition)), list(m.outputs, outputsOf(node, registry, definition))] }));
+}
+function EdgeFields({ edge, flow, definition, registry, disabled, onPatch, onDelete, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const from = flow.nodes.find((n) => n.id === edge.from);
+    const to = flow.nodes.find((n) => n.id === edge.to);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [edge.kind === "next" && from ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: m.exitIs(m.exit(exitLabel(from, portOf(edge)))) }), _jsx(Field, { label: m.edgeLabel, children: _jsx(Input, { value: edge.label ?? "", disabled: disabled, onChange: (e) => onPatch({ label: e.target.value || undefined }) }) })] })) : null, edge.kind === "data" && from && to ? (_jsx("p", { className: "text-sm", children: m.dataFlow(outputsOf(from, registry, definition).find((p) => p.id === edge.port)?.label ??
+                    edge.port ??
+                    "", inputsOf(to, registry, definition).find((p) => p.id === edge.input)?.label ??
+                    edge.input ??
+                    "") })) : null, edge.kind === "loop" ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: m.limit, children: _jsx(NumberInput, { value: edge.max, min: 1, step: 1, disabled: disabled, onValue: (max) => onPatch({ max }) }) }), _jsx(ConditionEditor, { label: m.until, condition: edge.until ?? { fact: "", op: "" }, flow: flow, registry: registry, disabled: disabled, onChange: (until) => onPatch({ until }) })] })) : null, disabled ? null : (_jsxs(Button, { type: "button", variant: "destructive", size: "sm", className: "self-start", onClick: onDelete, children: [_jsx(Trash2Icon, { "aria-hidden": true }), m.deleteEdge] }))] }));
+}

package/dist/workflow/editor/WorkflowJsonView.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { WorkflowDefinition } from "../definition.js";
+export interface WorkflowJsonViewProps {
+    definition: WorkflowDefinition;
+    /** A valid edit, read through the format. Omitted: read-only. */
+    onChange?: (definition: WorkflowDefinition) => void;
+    readOnly?: boolean;
+    className?: string;
+}
+/**
+ * The definition as JSON, kept in step with the canvas and the inspector:
+ * an edit elsewhere rewrites the text, and text that reads as a definition
+ * goes back as an edit. Text that does not read stays as typed, with the
+ * reason, until it does; nothing outside the format is ever kept.
+ */
+export declare function WorkflowJsonView({ definition, onChange, readOnly, className, }: WorkflowJsonViewProps): React.JSX.Element;

package/dist/workflow/editor/WorkflowJsonView.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Field } from "../../primitives/Field.js";
+import { Textarea } from "../../primitives/Textarea.js";
+import { useUI } from "../../provider/UIProvider.js";
+import { readWorkflowDefinition } from "../portable.js";
+const show = (d) => JSON.stringify(d, null, 2);
+/**
+ * The definition as JSON, kept in step with the canvas and the inspector:
+ * an edit elsewhere rewrites the text, and text that reads as a definition
+ * goes back as an edit. Text that does not read stays as typed, with the
+ * reason, until it does; nothing outside the format is ever kept.
+ */
+export function WorkflowJsonView({ definition, onChange, readOnly = false, className, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const editable = !readOnly && !!onChange;
+    // The text, and the definition it was last in step with.
+    const [state, setState] = React.useState(() => ({ text: show(definition), from: definition }));
+    const [error, setError] = React.useState(null);
+    if (state.from !== definition) {
+        setState({ text: show(definition), from: definition });
+        setError(null);
+    }
+    return (_jsx("div", { "data-slot": "workflow-json", className: cn("flex min-h-0 flex-col gap-2", className), children: _jsx(Field, { label: m.json, hint: editable ? m.jsonHint : undefined, error: error ? m.readError(error) : undefined, children: _jsx(Textarea, { value: state.text, readOnly: !editable, spellCheck: false, rows: 18, className: "min-h-64 font-mono text-xs", onChange: (e) => {
+                    const text = e.target.value;
+                    const read = readWorkflowDefinition(text);
+                    if (!read.ok) {
+                        setState((s) => ({ ...s, text }));
+                        setError(read.error);
+                        return;
+                    }
+                    setError(null);
+                    // In step with what goes out, so the host handing it back keeps the person's text.
+                    setState({ text, from: read.value });
+                    onChange?.(read.value);
+                } }) }) }));
+}

package/dist/workflow/editor/WorkflowPalette.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { WorkflowRegistry } from "../definition.js";
+import { type WorkflowPaletteItem } from "../palette.js";
+export interface WorkflowPaletteProps {
+    registry: WorkflowRegistry;
+    /** Adds the item; the editor puts it after the selection. Omitted: read-only, nothing to add. */
+    onAdd?: (item: WorkflowPaletteItem) => void;
+    className?: string;
+}
+/**
+ * What a flow is built from, grouped by module: each installed module's step
+ * presets, then gates by kind, logic, judges, a custom step and a sub-flow.
+ * A click adds after the selection. An item this destination does not run is
+ * marked, never hidden: a definition can be written for another factory.
+ */
+export declare function WorkflowPalette({ registry, onAdd, className }: WorkflowPaletteProps): React.JSX.Element;

package/dist/workflow/editor/WorkflowPalette.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Input } from "../../primitives/Input.js";
+import { useUI } from "../../provider/UIProvider.js";
+import { paletteOf } from "../palette.js";
+/**
+ * What a flow is built from, grouped by module: each installed module's step
+ * presets, then gates by kind, logic, judges, a custom step and a sub-flow.
+ * A click adds after the selection. An item this destination does not run is
+ * marked, never hidden: a definition can be written for another factory.
+ */
+export function WorkflowPalette({ registry, onAdd, className }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const [query, setQuery] = React.useState("");
+    const terms = query.toLocaleLowerCase().split(/\s+/).filter(Boolean);
+    const name = (item) => item.label || (item.template.kind === "step" ? m.customStep : m.kind(item.template.kind));
+    const hint = (item) => item.hint ?? (item.label ? undefined : m.kindHint(item.template.kind));
+    const groups = paletteOf(registry)
+        .map((g) => ({
+        ...g,
+        title: g.module ? g.label : m.paletteGroup(g.key),
+    }))
+        .map((g) => ({
+        ...g,
+        items: g.items.filter((item) => {
+            const text = `${g.title} ${name(item)} ${hint(item) ?? ""}`.toLocaleLowerCase();
+            return terms.every((t) => text.includes(t));
+        }),
+    }))
+        .filter((g) => g.items.length);
+    return (_jsxs("nav", { "aria-label": m.palette, "data-slot": "workflow-palette", className: cn("flex min-h-0 flex-col gap-3", className), children: [_jsx(Input, { type: "search", "aria-label": m.paletteSearch, placeholder: m.paletteSearch, value: query, onChange: (e) => setQuery(e.target.value) }), _jsx("div", { className: "flex min-h-0 flex-col gap-4 overflow-y-auto", children: groups.length ? (groups.map((g) => (_jsxs("section", { "aria-label": g.title, className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-2xs font-medium tracking-wide text-muted-foreground uppercase", children: g.title }), _jsx("ul", { className: "flex flex-col gap-1", children: g.items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", disabled: !onAdd, onClick: () => onAdd?.(item), className: "group flex w-full items-start gap-2 rounded-lg border border-border bg-card px-2.5 py-1.5 text-left text-sm hover:bg-muted disabled:cursor-default disabled:hover:bg-card", children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: name(item) }), hint(item) ? (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground", children: hint(item) })) : null, item.available ? null : (_jsx("span", { className: "text-xs text-warning-fg", children: m.notRun }))] }), onAdd ? (_jsx(PlusIcon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-muted-foreground group-hover:text-foreground" })) : null] }) }, item.key))) })] }, g.key)))) : (_jsx("p", { className: "text-sm text-muted-foreground", children: m.paletteEmpty })) })] }));
+}

package/dist/workflow/editor/WorkflowProblems.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { WorkflowDefinition, WorkflowSelection } from "../definition.js";
+import type { WorkflowProblem } from "../problems.js";
+export interface WorkflowProblemsProps {
+    problems: readonly WorkflowProblem[];
+    /** Names each problem's flow when the definition has more than one. */
+    definition?: WorkflowDefinition;
+    /** Selects what a problem points at. Omitted: the rows do not select. */
+    onSelect?: (selection: WorkflowSelection) => void;
+    className?: string;
+}
+/** Where a problem points, as a selection; null for one about a whole flow or the definition. */
+export declare function problemTarget(problem: WorkflowProblem, main: string): WorkflowSelection | null;
+/**
+ * Every problem in the definition at its three levels: blocking (stops a
+ * publish), warning, and not run here. Each row names its problem and selects
+ * what it points at. The not-run notes fold away, since a definition written
+ * for another factory has many.
+ */
+export declare function WorkflowProblems({ problems, definition, onSelect, className, }: WorkflowProblemsProps): React.JSX.Element;

package/dist/workflow/editor/WorkflowProblems.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { useUI } from "../../provider/UIProvider.js";
+import { StatusBadge } from "../../status/StatusBadge.js";
+const LEVELS = ["blocking", "warning", "not-run"];
+const TONE = {
+    blocking: "error",
+    warning: "warn",
+    "not-run": "muted",
+};
+/** Where a problem points, as a selection; null for one about a whole flow or the definition. */
+export function problemTarget(problem, main) {
+    const flow = problem.flow ?? main;
+    if (problem.node)
+        return { type: "node", flow, id: problem.node };
+    if (problem.edge)
+        return { type: "edge", flow, id: problem.edge };
+    return null;
+}
+/**
+ * Every problem in the definition at its three levels: blocking (stops a
+ * publish), warning, and not run here. Each row names its problem and selects
+ * what it points at. The not-run notes fold away, since a definition written
+ * for another factory has many.
+ */
+export function WorkflowProblems({ problems, definition, onSelect, className, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const [showNotRun, setShowNotRun] = React.useState(false);
+    const multiFlow = definition ? Object.keys(definition.flows).length > 1 : false;
+    const flowName = (name) => (name && definition?.flows[name]?.label) || name;
+    const counts = Object.fromEntries(LEVELS.map((l) => [l, problems.filter((p) => p.level === l).length]));
+    const listId = React.useId();
+    return (_jsxs("section", { "aria-label": m.problems, "data-slot": "workflow-problems", className: cn("flex min-h-0 flex-col gap-2", className), children: [_jsx("p", { role: "status", className: "flex flex-wrap items-center gap-2 text-sm", children: counts.blocking || counts.warning ? (_jsxs(_Fragment, { children: [_jsx(StatusBadge, { tone: counts.blocking ? "error" : "ok", children: m.problemCount("blocking", counts.blocking) }), " ", _jsx(StatusBadge, { tone: counts.warning ? "warn" : "muted", children: m.problemCount("warning", counts.warning) })] })) : (_jsx(StatusBadge, { tone: "ok", children: m.noProblems })) }), counts["not-run"] ? (_jsx("button", { type: "button", className: "self-start text-sm text-muted-foreground underline-offset-2 hover:underline", "aria-expanded": showNotRun, "aria-controls": listId, onClick: () => setShowNotRun((v) => !v), children: m.problemCount("not-run", counts["not-run"]) })) : null, _jsx("ul", { id: listId, className: "flex min-h-0 flex-col gap-1 overflow-y-auto", children: LEVELS.flatMap((level) => level === "not-run" && !showNotRun
+                    ? []
+                    : problems
+                        .filter((p) => p.level === level)
+                        .map((p, i) => {
+                        const target = definition ? problemTarget(p, definition.main) : null;
+                        const text = m.problem(p);
+                        const where = multiFlow && p.flow ? flowName(p.flow) : undefined;
+                        const reason = p.availability?.status === "missing-capabilities"
+                            ? messages.workflow.missingCapabilities(p.availability.missing ?? [])
+                            : (p.availability?.reason ??
+                                (p.availability ? messages.workflow.unsupported : undefined));
+                        const body = (_jsxs(_Fragment, { children: [_jsx(StatusBadge, { tone: TONE[level], className: "shrink-0", children: m.problemLevel(level) }), " ", _jsxs("span", { className: "min-w-0 flex-1", children: [where ? _jsxs("span", { className: "text-muted-foreground", children: [where, ": "] }) : null, text, reason ? (_jsx("span", { className: "block text-xs text-muted-foreground", children: reason })) : null] })] }));
+                        return (_jsx("li", { children: target && onSelect ? (_jsx("button", { type: "button", onClick: () => onSelect(target), className: "flex w-full items-start gap-2 rounded-lg border border-border px-2.5 py-1.5 text-left text-sm hover:bg-muted", children: body })) : (_jsx("div", { className: "flex items-start gap-2 rounded-lg border border-border px-2.5 py-1.5 text-sm", children: body })) }, `${level}-${i}`));
+                    })) })] }));
+}

package/dist/workflow/editor/WorkflowWorkspace.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import type { WorkflowDefinition, WorkflowRegistry } from "../definition.js";
+import { type WorkflowImportSummary as ImportPreview } from "../portable.js";
+import { type WorkflowRevision } from "../workspace.js";
+/** A host action: may return a promise; a rejection's message is shown. */
+type HostAction<A extends unknown[]> = (...args: A) => Promise<unknown> | unknown;
+export interface WorkflowWorkspaceProps {
+    /** The working copy, held by the host. Null while it loads. */
+    definition: WorkflowDefinition | null;
+    /** Every edit. Omitted, or `readOnly`: a viewer. */
+    onChange?: (definition: WorkflowDefinition) => void;
+    registry: WorkflowRegistry;
+    /** The latest saved draft revision on the host. */
+    saved?: WorkflowRevision | null;
+    /** The published revision: what runs. */
+    published?: WorkflowRevision | null;
+    /** Saves the working copy as a draft over `base`, the revision it started from. */
+    onSave?: HostAction<[definition: WorkflowDefinition, base: WorkflowRevision | null]>;
+    /** Publishes the working copy: it becomes what runs. */
+    onPublish?: HostAction<[definition: WorkflowDefinition]>;
+    /** Saves the working copy as a new, named reusable definition. */
+    onSaveAs?: HostAction<[definition: WorkflowDefinition, name: string]>;
+    onExport?: (definition: WorkflowDefinition) => void;
+    /** Starts an import: the host picks a file and hands back `importPreview`. */
+    onImport?: () => void;
+    importPreview?: ImportPreview | null;
+    onImportConfirm?: HostAction<[]>;
+    onImportCancel?: () => void;
+    readOnly?: boolean;
+    loading?: boolean;
+    error?: string | {
+        message: string;
+    } | null;
+    onRetry?: () => void;
+    className?: string;
+}
+/**
+ * The whole editor on one page: the palette, the canvas and a side panel
+ * (properties, problems, JSON), around a controlled working copy. It knows
+ * the saved and published revisions the host holds: it marks unsaved edits
+ * and a draft that differs from what runs, takes a newer saved revision when
+ * there are no edits, and when the saved revision moves under unsaved edits
+ * it stops and asks (use theirs, keep mine, compare). Publishing shows the
+ * draft against live first and is held while anything blocks. Save, publish,
+ * save as, import and export are the host's; it never persists anything. On
+ * narrow containers the palette and the side panel open as drawers.
+ */
+export declare function WorkflowWorkspace(props: WorkflowWorkspaceProps): React.JSX.Element;
+export {};