@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/flow/editor/useSelectionArrange.ts

@@ -0,0 +1,135 @@
+// SelectionArrange: group, ungroup, align, distribute and measure for the
+// selected nodes. Every mutating action takes exactly one snapshot first, so it
+// is one undo step; a selection too small for the action is a no-op.
+
+import { useCallback, useRef } from 'react'
+import { alignBoxes, distributeBoxes, frameAround, type AlignEdge, type DistributeAxis, type Placed } from '../geometry/arrange'
+import { absoluteRect, sizeOf } from '../geometry/rect'
+import { createId } from '../internal/ids'
+import type { FlowNode, Size } from '../model/types'
+
+/** Inner padding of a new group frame and the height of its header band. */
+const FRAME_PADDING = 24
+const FRAME_HEADER = 40
+
+export interface GroupHandlers {
+  onEdit?: (id: string) => void
+  onToggleExpanded?: (id: string) => void
+  onRemove?: (id: string) => void
+}
+
+export interface SelectionArrangeArgs {
+  nodes: FlowNode[]
+  setNodes: (next: FlowNode[] | ((prev: FlowNode[]) => FlowNode[])) => void
+  snapshot: () => void
+  /** Kept by the editor and passed to the frame's renderer (not stored in node data, which must stay serialisable). */
+  groupHandlers?: GroupHandlers
+  locked?: boolean
+  /** Default name of a new group (from the i18n adapter). */
+  groupName?: string
+  /** Polite announcement after an action ("4 nodes aligned left"). */
+  announce?: (action: 'group' | 'ungroup' | 'align' | 'distribute', detail: { count: number; edge?: AlignEdge; axis?: DistributeAxis }) => void
+}
+
+export function useSelectionArrange({ nodes, setNodes, snapshot, locked = false, groupName = 'Group', announce }: SelectionArrangeArgs) {
+  const current = useRef(nodes)
+  current.current = nodes
+
+  const measure = useCallback((node: FlowNode): Size => sizeOf(node), [])
+
+  const selectedBoxes = (): Placed[] => {
+    const byId = new Map(current.current.map((n) => [n.id, n]))
+    return current.current.filter((n) => n.selected && !n.hidden).map((n) => ({ id: n.id, rect: absoluteRect(n, byId) }))
+  }
+
+  /** Moves nodes to absolute canvas points, converting back to frame-relative positions. */
+  const moveTo = (points: Map<string, { x: number; y: number }>) => {
+    setNodes((prev) => {
+      const byId = new Map(prev.map((n) => [n.id, n]))
+      return prev.map((n) => {
+        const p = points.get(n.id)
+        if (!p) return n
+        const parent = n.parentId ? byId.get(n.parentId) : undefined
+        const origin = parent ? absoluteRect(parent, byId) : { x: 0, y: 0 }
+        return { ...n, position: { x: p.x - origin.x, y: p.y - origin.y } }
+      })
+    })
+  }
+
+  const group = useCallback(() => {
+    if (locked) return
+    const boxes = selectedBoxes().filter((b) => !current.current.find((n) => n.id === b.id)?.parentId)
+    if (boxes.length < 2) return
+    const frame = frameAround(boxes, FRAME_PADDING, FRAME_HEADER)!
+    snapshot()
+    const id = createId('group')
+    const members = new Set(boxes.map((b) => b.id))
+    setNodes((prev) => {
+      const byId = new Map(prev.map((n) => [n.id, n]))
+      const rest = prev.map((n) => {
+        if (!members.has(n.id)) return n.selected ? { ...n, selected: false } : n
+        const abs = absoluteRect(n, byId)
+        return { ...n, parentId: id, selected: false, position: { x: abs.x - frame.x, y: abs.y - frame.y } }
+      })
+      const frameNode: FlowNode = {
+        id,
+        kind: 'group',
+        position: { x: frame.x, y: frame.y },
+        size: { width: frame.width, height: frame.height },
+        data: { label: groupName, tone: 'neutral', expanded: true, autoFit: true },
+      }
+      // First in the list so it renders behind its members.
+      return [frameNode, ...rest]
+    })
+    announce?.('group', { count: boxes.length })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locked, snapshot, setNodes, groupName, announce])
+
+  const ungroup = useCallback(() => {
+    if (locked) return
+    const frames = new Set(current.current.filter((n) => n.selected && n.kind === 'group').map((n) => n.id))
+    if (!frames.size) return
+    snapshot()
+    setNodes((prev) => {
+      const byId = new Map(prev.map((n) => [n.id, n]))
+      return prev
+        .filter((n) => !frames.has(n.id))
+        .map((n) => {
+          if (!n.parentId || !frames.has(n.parentId)) return n
+          const abs = absoluteRect(n, byId)
+          const { parentId: _drop, ...rest } = n
+          return { ...rest, hidden: false, position: { x: abs.x, y: abs.y } }
+        })
+    })
+    announce?.('ungroup', { count: frames.size })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locked, snapshot, setNodes, announce])
+
+  const align = useCallback(
+    (edge: AlignEdge) => {
+      if (locked) return
+      const boxes = selectedBoxes()
+      if (boxes.length < 2) return
+      snapshot()
+      moveTo(alignBoxes(boxes, edge))
+      announce?.('align', { count: boxes.length, edge })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locked, snapshot, announce],
+  )
+
+  const distribute = useCallback(
+    (axis: DistributeAxis) => {
+      if (locked) return
+      const boxes = selectedBoxes()
+      if (boxes.length < 3) return
+      snapshot()
+      moveTo(distributeBoxes(boxes, axis))
+      announce?.('distribute', { count: boxes.length, axis })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locked, snapshot, announce],
+  )
+
+  return { group, ungroup, align, distribute, measure }
+}

package/src/flow/expressions/ComputeInsertPanel.tsx

@@ -0,0 +1,123 @@
+// Side panel of the compute form's text mode: three sources of fragments
+// (operations by family, references, named examples). Each source is a
+// descriptor that lists groups of pickable fragments; one renderer draws any
+// source, and picking inserts the fragment at the caret.
+
+import { useMemo, useState, type ReactNode } from 'react'
+import { Button as AriaButton } from 'react-aria-components'
+import { SegmentedControl, TextField } from '../../index'
+import { fill } from '../internal/labels'
+import { EXPRESSION_FAMILIES, pickerEntries, prettyJson, seedOperation, type ExpressionCatalog, type OperationNode } from './model'
+
+export interface InsertExample {
+  id: string
+  expression: OperationNode
+}
+
+export interface InsertPanelWords {
+  referencePanel: string
+  operations: string
+  references: string
+  examples: string
+  searchOperations: string
+  noOperations: string
+  familyCount: string
+  exampleNames: Record<string, string>
+  familyNames?: Record<string, string>
+}
+
+type SourceId = 'operations' | 'references' | 'examples'
+
+interface Pick {
+  key: string
+  face: ReactNode
+  fragment: string
+}
+
+interface PickGroup {
+  key: string
+  title?: string
+  picks: Pick[]
+}
+
+const asCode = (text: string) => (
+  <code className="ty-compute__ref" dir="ltr">
+    {text}
+  </code>
+)
+
+interface SourceInput {
+  catalog: ExpressionCatalog | undefined
+  refs: readonly string[]
+  examples: readonly InsertExample[]
+  words: InsertPanelWords
+  locale: string
+  query: string
+}
+
+/** Each source turns the panel's inputs into titled groups of picks. */
+const SOURCES: Record<SourceId, (i: SourceInput) => PickGroup[]> = {
+  operations: ({ catalog, words, locale, query }) => {
+    const needle = query.trim().toLocaleLowerCase(locale)
+    const entries = pickerEntries(catalog, 'expression')
+    const groups: PickGroup[] = []
+    for (const family of EXPRESSION_FAMILIES) {
+      const picks = entries
+        .filter((e) => e.family === family && (needle === '' || e.id.toLocaleLowerCase(locale).includes(needle)))
+        .map((e) => ({ key: e.id, face: asCode(e.id), fragment: JSON.stringify(seedOperation(e)) }))
+      if (picks.length) groups.push({ key: family, title: fill(words.familyCount, { family: words.familyNames?.[family] ?? family, count: picks.length }, locale), picks })
+    }
+    return groups
+  },
+  references: ({ refs, words }) => [{ key: 'refs', title: words.references, picks: refs.map((r) => ({ key: r, face: asCode(r), fragment: JSON.stringify({ ref: r }) })) }],
+  examples: ({ examples, words }) => [
+    { key: 'examples', title: words.examples, picks: examples.map((x) => ({ key: x.id, face: words.exampleNames[x.id] ?? x.id, fragment: prettyJson(x.expression) })) },
+  ],
+}
+
+export function ComputeInsertPanel(props: { catalog: ExpressionCatalog | undefined; refs: readonly string[]; examples: readonly InsertExample[]; words: InsertPanelWords; locale: string; onPick: (fragment: string) => void }) {
+  const { words, onPick } = props
+  const [source, setSource] = useState<SourceId>('operations')
+  const [query, setQuery] = useState('')
+  const groups = useMemo(() => SOURCES[source]({ ...props, query }), [source, props, query])
+  const titledAsSection = source === 'operations'
+
+  return (
+    <div className="ty-expr-form__panel">
+      <SegmentedControl
+        label={words.referencePanel}
+        size="compact"
+        value={source}
+        onChange={(v) => setSource(v as SourceId)}
+        options={(Object.keys(SOURCES) as SourceId[]).map((id) => ({ value: id, label: words[id] }))}
+      />
+      {source === 'operations' ? <TextField mode="search" label={words.searchOperations} value={query} onChange={setQuery} /> : null}
+      {source === 'operations' && groups.length === 0 ? (
+        <p className="ty-expr__hint" role="status">
+          {words.noOperations}
+        </p>
+      ) : null}
+      {groups.map((group) => {
+        const list = (
+          <ul className="ty-expr-form__insert-list" {...(titledAsSection ? {} : { 'aria-label': group.title })}>
+            {group.picks.map((pick) => (
+              <li key={pick.key}>
+                <AriaButton className="ty-expr-form__insert" onPress={() => onPick(pick.fragment)}>
+                  {pick.face}
+                </AriaButton>
+              </li>
+            ))}
+          </ul>
+        )
+        return titledAsSection ? (
+          <section key={group.key} className="ty-expr-form__family" aria-label={group.title}>
+            <h4 className="ty-expr-form__family-title">{group.title}</h4>
+            {list}
+          </section>
+        ) : (
+          <div key={group.key}>{list}</div>
+        )
+      })}
+    </div>
+  )
+}

package/src/flow/expressions/ComputeNodeForm.tsx

@@ -0,0 +1,291 @@
+// ComputeNodeForm: the settings of a compute step, whose logic is one
+// expression tree edited visually or as JSON text. The pieces live in their
+// own modules: computeDraft.ts (tree and text state), ComputeInsertPanel.tsx
+// (operations, references and examples to insert at the caret) and
+// ComputeTrial.tsx (dry run on sample data). This file wires them together.
+
+import { useMemo, useState, type ReactNode } from 'react'
+import { SegmentedControl, TextArea } from '../../index'
+import { NodeFormFooter } from '../forms/NodeFormFooter'
+import { defineLabels, useFlowLocale, useLabels } from '../internal/labels'
+import { useExpressionCatalog } from './catalogContext'
+import { ComputeInsertPanel } from './ComputeInsertPanel'
+import { ComputeTrial } from './ComputeTrial'
+import { openingTree, textErrorMessage, useComputeDraft, withoutScriptKeys } from './computeDraft'
+import { ExpressionBuilder, type ExpressionBuilderLabels } from './ExpressionBuilder'
+import { FLOW_INPUTS_REF, type ExpressionCatalog, type ExpressionNode, type OperationNode } from './model'
+import type { TraceReport } from './trace'
+import type { TraceTreeLabels } from './TraceTree'
+
+export { LEGACY_SCRIPT_KEYS, PASS_THROUGH, textErrorMessage } from './computeDraft'
+
+export interface ComputeNodeConfig {
+  kind: 'compute'
+  expression?: ExpressionNode
+  [key: string]: unknown
+}
+
+export interface ComputeExample {
+  /** Key into labels.examples for the visible name. */
+  id: string
+  expression: OperationNode
+}
+
+/** Examples authored for a research dataset of assertions; names come from labels. */
+export const defaultComputeExamples: ComputeExample[] = [
+  {
+    id: 'countConfirmed',
+    expression: {
+      operation: 'count',
+      list: {
+        operation: 'filter',
+        list: { ref: 'inputs.assertions' },
+        where: { operation: 'compare', op: 'eq', left: { ref: 'item.value' }, right: { value: 'confirmed_primary' } },
+      },
+    },
+  },
+  {
+    id: 'shareProved',
+    expression: {
+      operation: 'arithmetic',
+      op: 'divide',
+      left: { operation: 'count', list: { ref: 'inputs.proved' } },
+      right: { operation: 'count', list: { ref: 'inputs.assertions' } },
+    },
+  },
+  { id: 'daysSinceRetrieval', expression: { operation: 'days_between', from: { ref: 'retrieval.fetched_at' }, to: { ref: 'inputs.edition_date' } } },
+]
+
+export interface ComputeNodeFormLabels {
+  editorMode: string
+  visual: string
+  text: string
+  expression: string
+  expressionHint: string
+  valid: string
+  unparseable: string
+  missingOperation: string
+  unknownOperation: string
+  referencePanel: string
+  operations: string
+  references: string
+  examples: string
+  searchOperations: string
+  familyCount: string
+  noOperations: string
+  exampleNames: Record<string, string>
+  testToggle: string
+  sampleInputs: string
+  sampleOutputs: string
+  sampleHint: string
+  run: string
+  running: string
+  results: string
+  invalidExpression: string
+  invalidSamples: string
+  testFailed: string
+  save: string
+  cancel: string
+  builder: Partial<ExpressionBuilderLabels>
+  trace: Partial<TraceTreeLabels>
+}
+
+export const computeNodeFormLabels = defineLabels<ComputeNodeFormLabels>('ComputeNodeForm', {
+  en: {
+    editorMode: 'Editor',
+    visual: 'Visual',
+    text: 'Structured text',
+    expression: 'Expression',
+    expressionHint: 'One expression tree with an operation at its root.',
+    valid: 'The expression is valid.',
+    unparseable: 'The text could not be read: {detail}',
+    missingOperation: 'The root must name an operation.',
+    unknownOperation: '{name} is not an operation of the engine.',
+    referencePanel: 'Reference',
+    operations: 'Operations',
+    references: 'References',
+    examples: 'Examples',
+    searchOperations: 'Search operations',
+    familyCount: '{family} ({count, number})',
+    noOperations: 'No operation matches.',
+    exampleNames: {
+      countConfirmed: 'Count assertions coded as confirmed',
+      shareProved: 'Share of proved assertions',
+      daysSinceRetrieval: 'Days between retrieval and edition',
+    },
+    testToggle: 'Test with sample data',
+    sampleInputs: 'Sample flow inputs',
+    sampleOutputs: 'Sample upstream outputs',
+    sampleHint: 'Structured data; leave blank for none.',
+    run: 'Run test',
+    running: 'Running',
+    results: 'Test result',
+    invalidExpression: 'Fix the expression before testing it.',
+    invalidSamples: 'The sample data could not be read: {detail}',
+    testFailed: 'The test failed: {message}',
+    save: 'Save',
+    cancel: 'Cancel',
+    builder: {},
+    trace: {},
+  },
+  'pt-BR': {
+    editorMode: 'Editor',
+    visual: 'Visual',
+    text: 'Texto estruturado',
+    expression: 'Expressão',
+    expressionHint: 'Uma árvore de expressão com uma operação na raiz.',
+    valid: 'A expressão é válida.',
+    unparseable: 'Não foi possível ler o texto: {detail}',
+    missingOperation: 'A raiz precisa indicar uma operação.',
+    unknownOperation: '{name} não é uma operação do motor.',
+    referencePanel: 'Consulta',
+    operations: 'Operações',
+    references: 'Referências',
+    examples: 'Exemplos',
+    searchOperations: 'Buscar operações',
+    familyCount: '{family} ({count, number})',
+    noOperations: 'Nenhuma operação corresponde.',
+    exampleNames: {
+      countConfirmed: 'Contar asserções codificadas como confirmadas',
+      shareProved: 'Proporção de asserções provadas',
+      daysSinceRetrieval: 'Dias entre a coleta e a edição',
+    },
+    testToggle: 'Testar com dados de exemplo',
+    sampleInputs: 'Entradas de exemplo do fluxo',
+    sampleOutputs: 'Saídas de exemplo das etapas anteriores',
+    sampleHint: 'Dado estruturado; deixe em branco para nenhum.',
+    run: 'Executar teste',
+    running: 'Executando',
+    results: 'Resultado do teste',
+    invalidExpression: 'Corrija a expressão antes de testá-la.',
+    invalidSamples: 'Não foi possível ler os dados de exemplo: {detail}',
+    testFailed: 'O teste falhou: {message}',
+    save: 'Salvar',
+    cancel: 'Cancelar',
+    builder: {},
+    trace: {},
+  },
+  es: {
+    editorMode: 'Editor',
+    visual: 'Visual',
+    text: 'Texto estructurado',
+    expression: 'Expresión',
+    expressionHint: 'Un árbol de expresión con una operación en la raíz.',
+    valid: 'La expresión es válida.',
+    unparseable: 'No se pudo leer el texto: {detail}',
+    missingOperation: 'La raíz debe indicar una operación.',
+    unknownOperation: '{name} no es una operación del motor.',
+    referencePanel: 'Consulta',
+    operations: 'Operaciones',
+    references: 'Referencias',
+    examples: 'Ejemplos',
+    searchOperations: 'Buscar operaciones',
+    familyCount: '{family} ({count, number})',
+    noOperations: 'Ninguna operación coincide.',
+    exampleNames: {
+      countConfirmed: 'Contar afirmaciones codificadas como confirmadas',
+      shareProved: 'Proporción de afirmaciones probadas',
+      daysSinceRetrieval: 'Días entre la recuperación y la edición',
+    },
+    testToggle: 'Probar con datos de ejemplo',
+    sampleInputs: 'Entradas de ejemplo del flujo',
+    sampleOutputs: 'Salidas de ejemplo de los pasos anteriores',
+    sampleHint: 'Dato estructurado; déjelo en blanco si no hay.',
+    run: 'Ejecutar prueba',
+    running: 'Ejecutando',
+    results: 'Resultado de la prueba',
+    invalidExpression: 'Corrija la expresión antes de probarla.',
+    invalidSamples: 'No se pudieron leer los datos de ejemplo: {detail}',
+    testFailed: 'La prueba falló: {message}',
+    save: 'Guardar',
+    cancel: 'Cancelar',
+    builder: {},
+    trace: {},
+  },
+})
+export const defaultComputeNodeFormLabels: ComputeNodeFormLabels = computeNodeFormLabels.bundles.en
+
+export interface ComputeDryRunRequest {
+  config: ComputeNodeConfig
+  inputs?: Record<string, unknown>
+  nodeOutputs?: Record<string, unknown>
+}
+
+export interface ComputeNodeFormProps {
+  value: ComputeNodeConfig | Record<string, unknown>
+  /** Ancestor node ids. */
+  references?: string[]
+  onDryRun?: (req: ComputeDryRunRequest) => Promise<{ result: unknown; trace: TraceReport }>
+  onSave: (config: ComputeNodeConfig) => void
+  onCancel: () => void
+  catalog?: ExpressionCatalog
+  examples?: ComputeExample[]
+  labels?: Partial<ComputeNodeFormLabels>
+}
+
+type EditorMode = 'visual' | 'text'
+
+export function ComputeNodeForm(props: ComputeNodeFormProps) {
+  const words = useLabels(computeNodeFormLabels, props.labels)
+  const { locale } = useFlowLocale()
+  const { catalog } = useExpressionCatalog(props.catalog)
+  const base = useMemo(() => withoutScriptKeys(props.value as Record<string, unknown>), [props.value])
+  const draft = useComputeDraft(openingTree(base), catalog)
+  const [mode, setMode] = useState<EditorMode>('visual')
+  const refs = useMemo(() => [FLOW_INPUTS_REF, ...(props.references ?? []).filter((r) => r !== FLOW_INPUTS_REF)], [props.references])
+
+  const inText = mode === 'text'
+  const textBroken = inText && draft.problem !== null
+  const toConfig = (): ComputeNodeConfig => ({ ...base, kind: 'compute', expression: draft.tree })
+
+  const editors: Record<EditorMode, () => ReactNode> = {
+    visual: () => (
+      <ExpressionBuilder label={words.expression} value={draft.tree} onChange={(n) => draft.setTree(n as OperationNode)} references={refs} {...(props.catalog ? { catalog: props.catalog } : {})} labels={words.builder} />
+    ),
+    text: () => {
+      const error = draft.problem ? textErrorMessage(draft.problem, words, locale) : null
+      return (
+        <div className="ty-expr-form__section">
+          <TextArea ref={draft.textArea} className="ty-expr-form__code" label={words.expression} hint={words.expressionHint} monospace rows={12} value={draft.text} onChange={draft.editText} errorMessage={error ?? undefined} />
+          {draft.problem ? null : (
+            <p className="ty-expr-form__valid" role="status">
+              {words.valid}
+            </p>
+          )}
+        </div>
+      )
+    },
+  }
+
+  const panel = inText ? (
+    <ComputeInsertPanel
+      catalog={catalog}
+      refs={refs}
+      examples={props.examples ?? defaultComputeExamples}
+      words={{ ...words, familyNames: words.builder.families as Record<string, string> | undefined }}
+      locale={locale}
+      onPick={draft.splice}
+    />
+  ) : null
+
+  const onDryRun = props.onDryRun
+  return (
+    <div className="ty-expr-form" data-form="compute">
+      <SegmentedControl
+        label={words.editorMode}
+        value={mode}
+        onChange={(next) => {
+          if (next === 'text') draft.reprint()
+          setMode(next as EditorMode)
+        }}
+        options={(['visual', 'text'] as const).map((m) => ({ value: m, label: words[m] }))}
+      />
+      <div className="ty-expr-form__layout" data-with-panel={inText || undefined}>
+        {editors[mode]()}
+        {panel}
+      </div>
+      {onDryRun ? <ComputeTrial words={words} locale={locale} blocked={textBroken} launch={async (samples) => (await onDryRun({ config: toConfig(), ...samples })).trace} /> : null}
+      <NodeFormFooter labels={{ save: words.save, cancel: words.cancel }} saveDisabled={textBroken} onCancel={props.onCancel} onSave={() => props.onSave(toConfig())} />
+    </div>
+  )
+}

package/src/flow/expressions/ComputeTrial.tsx

@@ -0,0 +1,105 @@
+// "Test with sample data" for the compute form: two sample texts, a run
+// button, and the evaluation trace. Its whole state is one reducer.
+
+import { useReducer } from 'react'
+import { FlaskConical } from 'lucide-react'
+import { Button, InlineNotice, TextArea } from '../../index'
+import { fill } from '../internal/labels'
+import { sampleFromText } from './computeDraft'
+import type { TraceReport } from './trace'
+import { TraceTree, type TraceTreeLabels } from './TraceTree'
+
+export interface TrialWords {
+  testToggle: string
+  sampleInputs: string
+  sampleOutputs: string
+  sampleHint: string
+  invalidExpression: string
+  invalidSamples: string
+  run: string
+  running: string
+  results: string
+  testFailed: string
+  trace: Partial<TraceTreeLabels>
+}
+
+export type TrialSamples = { inputs?: Record<string, unknown>; nodeOutputs?: Record<string, unknown> }
+
+interface TrialState {
+  expanded: boolean
+  inputs: string
+  outputs: string
+  outcome: { state: 'idle' } | { state: 'running' } | { state: 'traced'; report: TraceReport } | { state: 'error'; text: string }
+}
+
+type TrialEvent = { on: 'toggle' } | { on: 'inputs'; text: string } | { on: 'outputs'; text: string } | { on: 'outcome'; outcome: TrialState['outcome'] }
+
+function trialReducer(s: TrialState, e: TrialEvent): TrialState {
+  if (e.on === 'toggle') return { ...s, expanded: !s.expanded }
+  if (e.on === 'inputs') return { ...s, inputs: e.text }
+  if (e.on === 'outputs') return { ...s, outputs: e.text }
+  return { ...s, outcome: e.outcome }
+}
+
+export function ComputeTrial({ words, locale, blocked, launch }: { words: TrialWords; locale: string; blocked: boolean; launch: (samples: TrialSamples) => Promise<TraceReport> }) {
+  const [s, send] = useReducer(trialReducer, { expanded: false, inputs: '', outputs: '', outcome: { state: 'idle' } })
+  const busy = s.outcome.state === 'running'
+
+  const start = async () => {
+    const readIn = sampleFromText(s.inputs)
+    const readOut = sampleFromText(s.outputs)
+    const firstBad = [readIn, readOut].find((r) => !r.ok)
+    if (firstBad && !firstBad.ok) {
+      send({ on: 'outcome', outcome: { state: 'error', text: fill(words.invalidSamples, { detail: firstBad.reason }, locale) } })
+      return
+    }
+    const samples: TrialSamples = {}
+    if (readIn.ok && readIn.value) samples.inputs = readIn.value
+    if (readOut.ok && readOut.value) samples.nodeOutputs = readOut.value
+    send({ on: 'outcome', outcome: { state: 'running' } })
+    try {
+      send({ on: 'outcome', outcome: { state: 'traced', report: await launch(samples) } })
+    } catch (err) {
+      send({ on: 'outcome', outcome: { state: 'error', text: fill(words.testFailed, { message: err instanceof Error ? err.message : String(err) }, locale) } })
+    }
+  }
+
+  const fields = [
+    { key: 'inputs' as const, label: words.sampleInputs },
+    { key: 'outputs' as const, label: words.sampleOutputs },
+  ]
+
+  return (
+    <div className="ty-expr-form__section">
+      <Button variant="secondary" leadingIcon={<FlaskConical />} aria-expanded={s.expanded} onPress={() => send({ on: 'toggle' })}>
+        {words.testToggle}
+      </Button>
+      {s.expanded ? (
+        <div className="ty-expr-form__test">
+          {fields.map((f) => (
+            <TextArea key={f.key} className="ty-expr-form__code" label={f.label} hint={words.sampleHint} monospace rows={4} value={s[f.key]} onChange={(text) => send({ on: f.key, text })} />
+          ))}
+          {blocked ? (
+            <InlineNotice tone="warning" urgency="polite">
+              {words.invalidExpression}
+            </InlineNotice>
+          ) : null}
+          <div>
+            <Button variant="secondary" busy={busy} busyLabel={words.running} disabled={blocked || busy} onPress={start}>
+              {busy ? words.running : words.run}
+            </Button>
+          </div>
+          <div className="ty-expr-form__section" role="region" aria-label={words.results} aria-live="polite" aria-busy={busy || undefined}>
+            {s.outcome.state === 'error' ? (
+              <InlineNotice tone="danger" urgency="none">
+                {s.outcome.text}
+              </InlineNotice>
+            ) : s.outcome.state === 'traced' ? (
+              <TraceTree report={s.outcome.report} labels={words.trace} />
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}