@flowdular/sdk 0.1.0

package/modules/workflows/src/client/WorkflowMappingEditor.tsrx

@@ -0,0 +1,283 @@
+import { t } from '@flowdular/sdk/client';
+import { Alert, Button, FormField } from '@flowdular/sdk/ui';
+import { useMemo } from 'octane';
+import { cell, createStore, useValue } from 'segment-state';
+import type {
+	WorkflowGraphV1,
+	WorkflowNodeV1,
+	WorkflowTargetMappingV1,
+} from '../domain/types.ts';
+import { upstreamPorts, validateMappingInput } from './mapping-model.ts';
+import { pointerCatalog, sourcePointerCatalog } from './pointer-model.ts';
+import { WorkflowPointerField } from './WorkflowPointerField.tsrx';
+
+export function WorkflowMappingEditor(props: {
+	readonly graph: WorkflowGraphV1;
+	readonly node: WorkflowNodeV1;
+	readonly editable: boolean;
+	readonly onChange: (node: WorkflowNodeV1) => void;
+}) @{
+	const store = useMemo(
+		() => createStore({
+			values: cell<Record<string, string>>({}),
+			editing: -1,
+			kind: 'path',
+			error: '',
+			formVersion: 0,
+		}),
+		[],
+	);
+	const [values, setValues] = useValue(store.state.values);
+	const captureDraft = (event: Event) => {
+		const input = event.target as HTMLInputElement;
+		if (input.name) setValues({
+			...values,
+			[input.name]: input.type === 'checkbox'
+				? String(input.checked)
+				: input.value,
+		});
+	};
+	const [editing, setEditing] = useValue(store.state.editing);
+	const [kind, setKind] = useValue(store.state.kind);
+	const [error, setError] = useValue(store.state.error);
+	const [formVersion, setFormVersion] = useValue(store.state.formVersion);
+	const sources = upstreamPorts(props.graph, props.node.id);
+	const mapping = props.node.mappings?.[editing];
+	const binding = mapping?.binding;
+	const sourceKey =
+		values.source ??
+			(binding?.kind === 'path'
+				? binding.sourceNodeId + '|' + binding.sourcePort
+				: sources[0]?.key ?? '');
+	const targetCatalog = pointerCatalog(
+		props.graph.schemas[props.node.inputPorts[0]?.schemaId ??
+			props.node.outputPorts[0]?.schemaId ??
+			''],
+		false,
+	);
+	const sourceCatalog = sourcePointerCatalog(props.graph, sourceKey);
+	const entries = (props.node.mappings ?? []).map(
+		(entry, index) => ({ ...entry, index }),
+	);
+	const reset = () => {
+		setValues({});
+		setEditing(-1);
+		setError('');
+		setFormVersion(formVersion + 1);
+	};
+	const submit = (event: SubmitEvent) => {
+		event.preventDefault();
+		if (!props.editable) return;
+		const form = new FormData(event.currentTarget as HTMLFormElement);
+		try {
+			const source = String(form.get('source') ?? '').split('|');
+			const next: WorkflowTargetMappingV1 = {
+				targetPointer: String(form.get('target') ?? ''),
+				binding: kind === 'literal'
+					? {
+							kind: 'literal',
+							value: JSON.parse(String(form.get('literal') ?? '')),
+						}
+					: kind === 'template'
+						? {
+								kind: 'template',
+								template: String(form.get('template') ?? ''),
+								variables: JSON.parse(String(form.get('variables') ?? '[]')),
+							}
+						: {
+								kind: 'path',
+								sourceNodeId: source[0] ?? '',
+								sourcePort: source[1] ?? '',
+								pointer: String(form.get('pointer') ?? ''),
+							},
+			};
+			if (
+				!validateMappingInput(next, props.graph, props.node.id)
+			) throw new Error('invalid');
+			const mappings = [...(props.node.mappings ?? [])];
+			if (editing >= 0) mappings[editing] = next;
+			else mappings.push(next);
+			props.onChange({ ...props.node, mappings });
+			reset();
+		} catch {
+			setError(t('workflows.mapping.invalid'));
+		}
+	};
+
+	<div class="ui-form__section">
+		<div class="ui-form__section-head">
+			<b>{t('workflows.inspector.mappings')}</b>
+			<small>{t('workflows.mapping.help')}</small>
+		</div>
+		@for (const entry of entries; key entry.index) {
+			<div class="workflow-mapping-row">
+				<span class="ui-cell">
+					<b class="ui-mono">
+						{entry.targetPointer || t('workflows.mapping.whole')}
+					</b>
+					<small>{t('workflows.mapping.' + entry.binding.kind)}</small>
+				</span>
+				@if (props.editable) {
+					<>
+						<Button
+							size="sm"
+							onClick={() => {
+								setValues({});
+								setEditing(entry.index);
+								setKind(entry.binding.kind);
+								setError('');
+								setFormVersion(formVersion + 1);
+							}}
+						>{t('workflows.mapping.edit')}</Button>
+						<Button
+							size="sm"
+							variant="danger"
+							onClick={() => {
+								props.onChange({
+									...props.node,
+									mappings: (props.node.mappings ?? []).filter(
+										(_, index) => index !== entry.index,
+									),
+								});
+								reset();
+							}}
+						>{t('workflows.mapping.remove')}</Button>
+					</>
+				}
+			</div>
+		}
+		@if (props.editable) {
+			<form
+				class="workflow-mapping-form"
+				key={props.node.id + ':' + formVersion}
+				onSubmit={submit}
+				onInput={captureDraft}
+			>
+				@if (error) {
+					<Alert>{error}</Alert>
+				}
+				<FormField label={t('workflows.mapping.kind')}>
+					<select
+						class="ui-select"
+						value={kind}
+						onInput={(event) => setKind(event.currentTarget.value)}
+					>
+						<option value="path">{t('workflows.mapping.path')}</option>
+						<option value="literal">{t('workflows.mapping.literal')}</option>
+						<option value="template">{t('workflows.mapping.template')}</option>
+					</select>
+				</FormField>
+				<WorkflowPointerField
+					label={t('workflows.inspector.targetPointer')}
+					name="target"
+					value={values.target ?? mapping?.targetPointer ?? ''}
+					catalog={targetCatalog}
+					onInput={(value) => setValues({ ...values, target: value })}
+				/>
+				@if (kind === 'path') {
+					<>
+						<FormField label={t('workflows.inspector.mappingSource')}>
+							<select
+								class="ui-select"
+								name="source"
+								required
+								value={values.source ??
+									(binding?.kind === 'path'
+										? binding.sourceNodeId + '|' + binding.sourcePort
+										: sources[0]?.key ?? '')}
+							>
+								@for (const source of sources; key source.key) {
+									<option value={source.key}>{source.label}</option>
+								}
+							</select>
+						</FormField>
+						<WorkflowPointerField
+							label={t('workflows.inspector.sourcePointer')}
+							name="pointer"
+							value={values.pointer ??
+								(binding?.kind === 'path' ? binding.pointer : '')}
+							catalog={sourceCatalog}
+							onInput={(value) => setValues({ ...values, pointer: value })}
+						/>
+					</>
+				} @else if (kind === 'literal') {
+					<FormField
+						label={t('workflows.mapping.literal')}
+						help={t('workflows.mapping.literalHelp')}
+					>
+						<textarea
+							class="ui-textarea ui-mono"
+							name="literal"
+							required
+							maxlength={16384}
+							rows={3}
+							value={values.literal ??
+								(binding?.kind === 'literal'
+									? JSON.stringify(binding.value, null, 2)
+									: '{}')}
+						/>
+					</FormField>
+				} @else {
+					<>
+						<FormField label={t('workflows.mapping.template')}>
+							<textarea
+								class="ui-textarea"
+								name="template"
+								maxlength={8192}
+								rows={3}
+								value={values.template ??
+									(binding?.kind === 'template'
+										? binding.template
+										: '{{ value }}')}
+							/>
+						</FormField>
+						<FormField
+							label={t('workflows.mapping.variables')}
+							help={t('workflows.mapping.variablesHelp')}
+						>
+							<textarea
+								class="ui-textarea ui-mono"
+								name="variables"
+								maxlength={16384}
+								rows={5}
+								value={values.variables ??
+									JSON.stringify(
+										binding?.kind === 'template'
+											? binding.variables
+											: sources[0]
+												? [
+														{
+															name: 'value',
+															sourceNodeId: sources[0].nodeId,
+															sourcePort: sources[0].port,
+															pointer: '',
+														},
+													]
+												: [],
+										null,
+										2,
+									)}
+							/>
+						</FormField>
+					</>
+				}
+				<div class="ui-form__actions">
+					@if (editing >= 0) {
+						<Button size="sm" onClick={reset}>{t(
+							'workflows.common.cancel',
+						)}</Button>
+					}
+					<Button
+						type="submit"
+						size="sm"
+						disabled={kind === 'path' && sources.length === 0}
+					>{t(
+						editing >= 0
+							? 'workflows.mapping.save'
+							: 'workflows.inspector.addMapping',
+					)}</Button>
+				</div>
+			</form>
+		}
+	</div>
+}

package/modules/workflows/src/client/WorkflowNodePalette.tsrx

@@ -0,0 +1,50 @@
+import { t } from '@flowdular/sdk/client';
+import { Icon } from '@flowdular/sdk/ui';
+import { WORKFLOW_NODE_TYPES, type WorkflowNodeType } from './canvas-model.ts';
+
+export interface WorkflowNodePaletteProps {
+	readonly disabled: boolean;
+	readonly types?: readonly WorkflowNodeType[];
+	readonly compact?: boolean;
+	readonly onAdd: (type: WorkflowNodeType) => void;
+}
+
+function icon(type: WorkflowNodeType): string {
+	if (type === 'agent' || type === 'agent-decision') return 'bot';
+	if (type === 'gate') return 'shield';
+	if (type === 'validator') return 'check';
+	if (type === 'action') return 'plug';
+	if (type === 'input') return 'download';
+	if (type === 'output') return 'external';
+	return 'modules';
+}
+
+export function WorkflowNodePalette(props: WorkflowNodePaletteProps) @{
+	const entries = (props.types ?? WORKFLOW_NODE_TYPES).map(
+		(type) => ({
+			key: type,
+			type,
+			icon: icon(type),
+			label: t('workflows.nodeType.' + type),
+		}),
+	);
+
+	<aside
+		class={props.compact ? 'workflow-palette-inline' : 'workflow-palette'}
+		aria-label={t('workflows.palette.label')}
+	>
+		<div class="workflow-palette__items">
+			@for (const entry of entries; key entry.key) {
+				<button
+					class="workflow-palette__item"
+					type="button"
+					disabled={props.disabled}
+					onClick={() => props.onAdd(entry.type)}
+				>
+					<Icon name={entry.icon} size={16} />
+					<span>{entry.label}</span>
+				</button>
+			}
+		</div>
+	</aside>
+}

package/modules/workflows/src/client/WorkflowPointerField.tsrx

@@ -0,0 +1,178 @@
+import { t } from '@flowdular/sdk/client';
+import { Icon } from '@flowdular/sdk/ui';
+import { useEffect, useMemo, useRef, useState } from 'octane';
+import {
+	filterPointers,
+	type PointerCatalog,
+	type PointerSuggestion,
+} from './pointer-model.ts';
+
+/** Module-local pointer combobox, a candidate for promotion to the shared UI kit. */
+export function WorkflowPointerField(props: {
+	readonly name: string;
+	readonly label: string;
+	readonly value: string;
+	readonly catalog: PointerCatalog;
+	readonly onInput: (value: string) => void;
+}) @{
+	const input = useRef<HTMLInputElement | null>(null);
+	const menu = useRef<HTMLDivElement | null>(null);
+	const [open, setOpen] = useState(false);
+	const [browse, setBrowse] = useState(false);
+	const [active, setActive] = useState(0);
+	const id = useMemo(() => 'workflow-pointer-' + props.name, [props.name]);
+	const matches = filterPointers(
+		props.catalog.entries,
+		browse ? '' : props.value,
+	);
+	const options = matches.slice(0, 50).map(
+		(entry, index) => ({ ...entry, index }),
+	);
+	const pick = (entry: PointerSuggestion) => {
+		props.onInput(entry.pointer);
+		setOpen(false);
+		input.current?.focus();
+	};
+	useEffect(() => {
+		const list = menu.current;
+		const option = list?.querySelector('[aria-selected="true"]');
+		if (!list || !option) return;
+		const bounds = list.getBoundingClientRect();
+		const selected = option.getBoundingClientRect();
+		if (selected.top < bounds.top) list.scrollTop -= bounds.top - selected.top;
+		else if (selected.bottom > bounds.bottom) list.scrollTop +=
+			selected.bottom - bounds.bottom;
+	}, [active]);
+	const keyDown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+		} else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			setOpen(true);
+			setActive(
+				open
+					? Math.max(
+							0,
+							Math.min(
+								options.length - 1,
+								active + (event.key === 'ArrowDown' ? 1 : -1),
+							),
+						)
+					: 0,
+			);
+		} else if (event.key === 'Enter' && open) {
+			event.preventDefault();
+			const entry = options[active];
+			if (entry) pick(entry);
+		}
+	};
+
+	<div class="workflow-pointer">
+		<label class="ui-label" for={id}>{props.label}</label>
+		<div class="workflow-pointer__control">
+			<input
+				ref={input}
+				id={id}
+				name={props.name}
+				class="ui-input ui-mono"
+				value={props.value}
+				maxlength={1024}
+				role="combobox"
+				aria-autocomplete="list"
+				aria-expanded={open}
+				aria-controls={id + '-list'}
+				aria-activedescendant={open && options[active]
+					? id + '-option-' + active
+					: undefined}
+				aria-describedby={id + '-help'}
+				autocomplete="off"
+				spellcheck={false}
+				onInput={(event) => {
+					props.onInput(event.currentTarget.value);
+					setBrowse(false);
+					setActive(0);
+					setOpen(true);
+				}}
+				onKeyDown={keyDown}
+				onBlur={() => setOpen(false)}
+			/>
+			<button
+				class="ui-btn ui-btn--sm"
+				type="button"
+				aria-label={t('workflows.pointer.browse')}
+				title={t('workflows.pointer.browse')}
+				aria-expanded={open}
+				aria-controls={id + '-list'}
+				onMouseDown={(event: MouseEvent) => event.preventDefault()}
+				onClick={() => {
+					setBrowse(true);
+					setActive(0);
+					setOpen(!open);
+					input.current?.focus();
+				}}
+			>
+				<Icon name="braces" size={16} />
+			</button>
+		</div>
+		@if (open) {
+			<div class="workflow-pointer__picker">
+				<div
+					class="workflow-pointer__list"
+					ref={menu}
+					id={id + '-list'}
+					role="listbox"
+					aria-label={t('workflows.pointer.browse')}
+				>
+					@for (const entry of options; key entry.pointer) {
+						<button
+							type="button"
+							class="workflow-pointer__option"
+							id={id + '-option-' + entry.index}
+							role="option"
+							aria-selected={entry.index === active}
+							tabindex={-1}
+							onMouseDown={(event: MouseEvent) => event.preventDefault()}
+							onMouseEnter={() => setActive(entry.index)}
+							onClick={() => pick(entry)}
+						>
+							<span class="workflow-pointer__title">
+								<b>
+									{entry.pointer === ''
+										? t('workflows.mapping.whole')
+										: entry.label || entry.pointer}
+								</b>
+								<small>{t('workflows.pointer.type.' + entry.type)}</small>
+							</span>
+							@if (entry.pointer) {
+								<code class="ui-mono">{entry.pointer}</code>
+							}
+							@if (entry.description) {
+								<small>{entry.description}</small>
+							}
+							@if (entry.arrayExample) {
+								<small>{t('workflows.pointer.arrayExample')}</small>
+							}
+							@if (entry.required && entry.pointer) {
+								<small>{t('workflows.input.required')}</small>
+							}
+						</button>
+					}
+				</div>
+				@if (!options.length) {
+					<p class="ui-help">{t('workflows.pointer.empty')}</p>
+				}
+				@if (props.catalog.incomplete) {
+					<p class="ui-help">{t('workflows.pointer.incomplete')}</p>
+				}
+				@if (props.catalog.truncated || matches.length > 50) {
+					<p class="ui-help">{t('workflows.pointer.limited')}</p>
+				}
+			</div>
+		}
+		<small class="ui-help" id={id + '-help'}>{t(
+			'workflows.mapping.pointerHelp',
+		)}</small>
+	</div>
+}

package/modules/workflows/src/client/WorkflowRevisionReview.tsrx

@@ -0,0 +1,49 @@
+import { t } from '@flowdular/sdk/client';
+import { Tag } from '@flowdular/sdk/ui';
+import type {
+	WorkflowDefinitionDetail,
+	WorkflowGraphV1,
+} from '../domain/types.ts';
+import { workflowChangeSummary } from './canvas-model.ts';
+
+export function WorkflowRevisionReview(props: {
+	readonly detail: WorkflowDefinitionDetail;
+	readonly graph: WorkflowGraphV1;
+}) @{
+	const publishedRevision = props.detail.definition.publishedRevision;
+	const published =
+		publishedRevision === null
+			? null
+			: props.detail.revisions.find(
+				(revision) => revision.revision === publishedRevision,
+			) ?? null;
+	const summary = workflowChangeSummary(published?.graph ?? null, props.graph);
+
+	<section
+		class="workflow-revision-review"
+		aria-label={t('workflows.revision.label')}
+	>
+		<span class="ui-cell">
+			<b>{t('workflows.revision.title')}</b>
+			<small>
+				{published
+					? t('workflows.revision.comparedWith', {
+							revision: published.revision,
+						})
+					: t('workflows.revision.unpublished')}
+			</small>
+		</span>
+		<span class="workflow-revision-review__changes">
+			<Tag tone={summary.semanticChanged ? 'info' : 'neutral'}>{t(
+				summary.semanticChanged
+					? 'workflows.revision.semanticChanged'
+					: 'workflows.revision.semanticUnchanged',
+			)}</Tag>
+			<Tag tone={summary.layoutChanged ? 'info' : 'neutral'}>{t(
+				summary.layoutChanged
+					? 'workflows.revision.layoutChanged'
+					: 'workflows.revision.layoutUnchanged',
+			)}</Tag>
+		</span>
+	</section>
+}

package/modules/workflows/src/client/WorkflowRunInspector.tsrx

@@ -0,0 +1,143 @@
+import { t } from '@flowdular/sdk/client';
+import { Button, Tag } from '@flowdular/sdk/ui';
+import type { WorkflowRunDetail } from '../domain/types.ts';
+import { evidenceText } from './canvas-model.ts';
+import {
+	costLabel,
+	duration,
+	usageLabel,
+	workflowStatusTone,
+} from './presentation.ts';
+
+import { runActions } from './run-actions.ts';
+
+export function WorkflowRunInspector(props: {
+	readonly detail: WorkflowRunDetail;
+	readonly selectedNodeId: string;
+	readonly canCancel: boolean;
+	readonly canExecute: boolean;
+	readonly busy: boolean;
+	readonly onClose: () => void;
+	readonly onCancel: () => void;
+	readonly onRetry: () => void;
+}) @{
+	const actions = runActions(props.detail.run, {
+		execute: props.canExecute,
+		cancel: props.canCancel,
+	});
+	const selectedExecution = props.detail.nodes.find(
+		(node) => node.nodeId === props.selectedNodeId,
+	);
+	const selectedAttempt = selectedExecution?.attempts.at(-1) ?? null;
+	const events = props.detail.events.map(
+		(event) => ({ key: event.eventId, event }),
+	);
+
+	<section
+		class="workflow-run-inspector"
+		aria-label={t('workflows.runDetail.label')}
+	>
+		<div class="workflow-panel-head workflow-panel-head--row">
+			<span class="ui-cell">
+				<b>{props.detail.run.workflowName}</b>
+				<small class="ui-mono">{props.detail.run.id}</small>
+			</span>
+			<span class="workflow-run-head-actions">
+				<Tag tone={workflowStatusTone(props.detail.run.status)} dot>{t(
+					'workflows.runStatus.' + props.detail.run.status,
+				)}</Tag>
+				<Button size="sm" onClick={props.onClose}>{t(
+					'workflows.runDetail.close',
+				)}</Button>
+			</span>
+		</div>
+		<div class="workflow-run-metrics">
+			<span>
+				<small>{t('workflows.runDetail.mode')}</small>
+				<b>{t('workflows.mode.' + props.detail.run.mode)}</b>
+			</span>
+			<span>
+				<small>{t('workflows.runDetail.duration')}</small>
+				<b>{duration(props.detail.run.durationMs)}</b>
+			</span>
+			<span>
+				<small>{t('workflows.runDetail.usage')}</small>
+				<b>{usageLabel(props.detail.run.usage)}</b>
+			</span>
+			<span>
+				<small>{t('workflows.runDetail.cost')}</small>
+				<b>{costLabel(props.detail.run.cost)}</b>
+			</span>
+		</div>
+		<div class="workflow-evidence-grid">
+			<div>
+				<b>{t('workflows.runDetail.input')}</b>
+				<pre class="ui-code">{evidenceText(props.detail.input)}</pre>
+			</div>
+			<div>
+				<b>{t('workflows.runDetail.output')}</b>
+				<pre class="ui-code">{evidenceText(props.detail.output)}</pre>
+			</div>
+		</div>
+		@if (selectedExecution) {
+			<div class="workflow-node-evidence">
+				<div class="workflow-panel-head workflow-panel-head--row">
+					<span class="ui-cell">
+						<b>{t('workflows.runDetail.nodeEvidence')}</b>
+						<small class="ui-mono">{selectedExecution.nodeId}</small>
+					</span>
+					<Tag tone="neutral">{t(
+						'workflows.nodeStatus.' + selectedExecution.status,
+					)}</Tag>
+				</div>
+				@if (selectedAttempt) {
+					<div class="workflow-evidence-grid">
+						<div>
+							<b>{t('workflows.runDetail.nodeInput')}</b>
+							<pre class="ui-code">{evidenceText(selectedAttempt.input)}</pre>
+						</div>
+						<div>
+							<b>{t('workflows.runDetail.nodeOutput')}</b>
+							<pre class="ui-code">{evidenceText(selectedAttempt.output)}</pre>
+						</div>
+					</div>
+				} @else {
+					<p class="workflow-node-evidence__empty">{t(
+						'workflows.runDetail.nodeNotStarted',
+					)}</p>
+				}
+			</div>
+		}
+		<details class="workflow-events">
+			<summary>{t('workflows.runDetail.events', {
+				count: events.length,
+			})}</summary>
+			<ol>
+				@for (const entry of events; key entry.key) {
+					<li>
+						<span class="num">{entry.event.sequence}</span>
+						<code class="ui-mono">{entry.event.type}</code>
+						@if (entry.event.virtualOffsetMs !== undefined) {
+							<small>{t('workflows.runDetail.virtualOffset', {
+								value: entry.event.virtualOffsetMs,
+							})}</small>
+						}
+					</li>
+				}
+			</ol>
+		</details>
+		<div class="ui-form__actions workflow-run-actions">
+			@if (actions.retry) {
+				<Button disabled={props.busy} onClick={props.onRetry}>{t(
+					'workflows.runDetail.retry',
+				)}</Button>
+			} @else if (actions.cancel) {
+				<Button
+					variant="danger"
+					disabled={props.busy}
+					onClick={props.onCancel}
+				>{t('workflows.runDetail.cancel')}</Button>
+			}
+		</div>
+	</section>
+}