@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/flow/run/RunDrawer.tsx

@@ -0,0 +1,485 @@
+// RunDrawer: the docked, full run view. Live run and history in tabs; a run
+// shows metrics, token usage, tools called and a per-node breakdown. Non-modal
+// complementary landmark: the canvas stays usable.
+
+import { useEffect, useId, useRef, useState } from 'react'
+import { ArrowLeft, ChevronRight, CircleAlert, Minimize2, Workflow } from 'lucide-react'
+import { Button, Spinner, TabPanel, Tabs } from '../../index'
+import { DockedPanel } from '../internal/DockedPanel'
+import { formatDateTime, formatDuration, formatNumber } from '../internal/format'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import { useControllable } from '../internal/useControllable'
+import { useFlowEditorState } from '../state/editorState'
+import { NON_EXECUTABLE_KINDS } from './RunPanel'
+import { RunStatusMark, runWordLabels, runWordOf, type RunWordLabels } from './RunStatusMark'
+import { countTools, prettyValue, sumTokens, useRunHistory, useTransition } from './runData'
+import type { LoadRuns, RunNodeResult, RunSummary } from './types'
+
+export interface RunDrawerLabels {
+  title: string
+  close: string
+  tabs: string
+  live: string
+  history: string
+  idleHint: string
+  back: string
+  totalDuration: string
+  nodeCount: string
+  succeeded: string
+  errors: string
+  errorsTerm: string
+  tokens: string
+  tokensIn: string
+  tokensOut: string
+  tokensTotal: string
+  tokensNotReported: string
+  tools: string
+  toolCalls: string
+  toolsNotReported: string
+  nodes: string
+  output: string
+  notReported: string
+  loading: string
+  loadError: string
+  retry: string
+  empty: string
+  runRow: string
+  compact: string
+  statusChanged: string
+}
+
+export const runDrawerLabels = defineLabels<RunDrawerLabels>('run-drawer', {
+  en: {
+    title: 'Run details',
+    close: 'Close run details',
+    tabs: 'Run views',
+    live: 'Live',
+    history: 'History',
+    idleHint: 'Start a run to follow it here, step by step.',
+    back: 'Back to runs',
+    totalDuration: 'Total duration',
+    nodeCount: 'Steps',
+    succeeded: 'Succeeded',
+    errors: '{count, plural, =0 {No errors} one {# error} other {# errors}}',
+    errorsTerm: 'Errors',
+    tokens: 'Model tokens',
+    tokensIn: 'Input',
+    tokensOut: 'Output',
+    tokensTotal: 'Total',
+    tokensNotReported: 'Token usage was not reported.',
+    tools: 'Tools called',
+    toolCalls: '{count, plural, one {# call} other {# calls}}',
+    toolsNotReported: 'No tool calls were reported.',
+    nodes: 'Steps of this run',
+    output: 'Output of {node}',
+    notReported: 'not reported',
+    loading: 'Loading runs',
+    loadError: 'Runs could not be loaded: {message}',
+    retry: 'Try again',
+    empty: 'This flow has not been run yet.',
+    runRow: 'Run started {time}',
+    compact: 'Switch to compact view',
+    statusChanged: 'Run {status}',
+  },
+  'pt-BR': {
+    title: 'Detalhes da execução',
+    close: 'Fechar detalhes da execução',
+    tabs: 'Visões da execução',
+    live: 'Ao vivo',
+    history: 'Histórico',
+    idleHint: 'Inicie uma execução para acompanhá-la aqui, passo a passo.',
+    back: 'Voltar às execuções',
+    totalDuration: 'Duração total',
+    nodeCount: 'Passos',
+    succeeded: 'Concluídos',
+    errors: '{count, plural, =0 {Nenhum erro} one {# erro} other {# erros}}',
+    errorsTerm: 'Erros',
+    tokens: 'Tokens do modelo',
+    tokensIn: 'Entrada',
+    tokensOut: 'Saída',
+    tokensTotal: 'Total',
+    tokensNotReported: 'O uso de tokens não foi informado.',
+    tools: 'Ferramentas chamadas',
+    toolCalls: '{count, plural, one {# chamada} other {# chamadas}}',
+    toolsNotReported: 'Nenhuma chamada de ferramenta foi informada.',
+    nodes: 'Passos desta execução',
+    output: 'Saída de {node}',
+    notReported: 'não informado',
+    loading: 'Carregando execuções',
+    loadError: 'Não foi possível carregar as execuções: {message}',
+    retry: 'Tentar de novo',
+    empty: 'Este fluxo ainda não foi executado.',
+    runRow: 'Execução iniciada {time}',
+    compact: 'Mudar para a visão compacta',
+    statusChanged: 'Execução {status}',
+  },
+  es: {
+    title: 'Detalles de la ejecución',
+    close: 'Cerrar detalles de la ejecución',
+    tabs: 'Vistas de la ejecución',
+    live: 'En vivo',
+    history: 'Historial',
+    idleHint: 'Inicie una ejecución para seguirla aquí, paso a paso.',
+    back: 'Volver a las ejecuciones',
+    totalDuration: 'Duración total',
+    nodeCount: 'Pasos',
+    succeeded: 'Completados',
+    errors: '{count, plural, =0 {Sin errores} one {# error} other {# errores}}',
+    errorsTerm: 'Errores',
+    tokens: 'Tokens del modelo',
+    tokensIn: 'Entrada',
+    tokensOut: 'Salida',
+    tokensTotal: 'Total',
+    tokensNotReported: 'No se informó el uso de tokens.',
+    tools: 'Herramientas llamadas',
+    toolCalls: '{count, plural, one {# llamada} other {# llamadas}}',
+    toolsNotReported: 'No se informaron llamadas a herramientas.',
+    nodes: 'Pasos de esta ejecución',
+    output: 'Salida de {node}',
+    notReported: 'no informado',
+    loading: 'Cargando ejecuciones',
+    loadError: 'No se pudieron cargar las ejecuciones: {message}',
+    retry: 'Reintentar',
+    empty: 'Este flujo aún no se ha ejecutado.',
+    runRow: 'Ejecución iniciada {time}',
+    compact: 'Cambiar a la vista compacta',
+    statusChanged: 'Ejecución {status}',
+  },
+})
+export const defaultRunDrawerLabels: RunDrawerLabels = runDrawerLabels.bundles.en
+
+export type RunDrawerTab = 'live' | 'history'
+
+export interface RunDrawerProps {
+  open: boolean
+  onClose: () => void
+  flowId: string
+  isRunning: boolean
+  /** Engine status of the current run; normalised to idle, running, completed or failed. */
+  runStatus: string
+  loadRuns: LoadRuns
+  labels?: Partial<RunDrawerLabels>
+  statusLabels?: Partial<RunWordLabels>
+  tab?: RunDrawerTab
+  onTabChange?: (tab: RunDrawerTab) => void
+  selectedRunId?: string | null
+  onSelectedRunChange?: (id: string | null) => void
+  /** Node whose output is expanded (the failing node on a failed run). */
+  selectedNodeId?: string | null
+  onSelectedNodeChange?: (id: string | null) => void
+  /** Shows the "compact view" control that switches to RunPreviewPanel. */
+  onCompact?: () => void
+  returnFocusTo?: HTMLElement | null
+}
+
+export function RunDrawer(props: RunDrawerProps) {
+  if (!props.open) return null
+  return <DrawerBody {...props} />
+}
+
+function drawerWord(status: string, isRunning: boolean): 'idle' | 'running' | 'completed' | 'failed' {
+  if (isRunning) return 'running'
+  const w = runWordOf(status)
+  return w === 'running' || w === 'completed' || w === 'failed' ? w : 'idle'
+}
+
+function DrawerBody(props: RunDrawerProps) {
+  const { onClose, flowId, isRunning, runStatus, loadRuns, labels, statusLabels, onCompact, returnFocusTo } = props
+  const l = useLabels(runDrawerLabels, labels)
+  const words = useLabels(runWordLabels, statusLabels)
+  const { locale } = useFlowLocale()
+  const [tab, setTab] = useControllable<RunDrawerTab>(props.tab, 'live', props.onTabChange)
+  const [runId, setRunId] = useControllable<string | null>(props.selectedRunId, null, props.onSelectedRunChange)
+  const [expandedNode, setExpandedNode] = useControllable<string | null>(props.selectedNodeId, null, props.onSelectedNodeChange)
+  const nodes = useFlowEditorState((s) => s.nodes)
+  const results = useFlowEditorState((s) => s.nodeResults)
+  const history = useRunHistory(flowId, loadRuns, tab === 'history')
+  const rowRefs = useRef(new Map<string, HTMLButtonElement>())
+  const lastSelected = useRef<string | null>(null)
+  const word = drawerWord(runStatus, isRunning)
+  const [announcement, setAnnouncement] = useState('')
+
+  // A new run takes the drawer to Live and clears any history selection.
+  useTransition(isRunning, false, true, () => {
+    setTab('live')
+    setRunId(null)
+  })
+  const firstWord = useRef(true)
+  useEffect(() => {
+    if (firstWord.current) {
+      firstWord.current = false
+      return
+    }
+    setAnnouncement(fill(l.statusChanged, { status: words[word] }, locale))
+    // Announce status changes only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [word])
+
+  const liveRows: RunNodeResult[] = nodes
+    .filter((n) => !NON_EXECUTABLE_KINDS.includes(n.kind) && results[n.id])
+    .map((n) => {
+      const r = results[n.id]!
+      return { nodeId: n.id, label: typeof n.data.label === 'string' ? n.data.label : undefined, kind: n.kind, status: r.status, ...(r.durationMs !== undefined ? { durationMs: r.durationMs } : {}), ...(r.error ? { error: r.error } : {}), outputs: r.data }
+    })
+  const selectedRun = runId ? history.runs.find((r) => r.id === runId) : undefined
+  const back = () => {
+    const target = lastSelected.current
+    setRunId(null)
+    requestAnimationFrame(() => (target ? rowRefs.current.get(target)?.focus() : undefined))
+  }
+
+  return (
+    <DockedPanel
+      title={l.title}
+      landmark="complementary"
+      edge="end"
+      icon={<Workflow />}
+      onClose={onClose}
+      closeLabel={l.close}
+      returnFocusTo={returnFocusTo ?? null}
+      className="ty-run-drawer"
+      data={{ 'data-status': word }}
+      actions={
+        <>
+          <RunStatusMark status={word} labels={statusLabels} className="ty-run-drawer__status" />
+          {onCompact ? <Button variant="quiet" size="compact" shape="circle" iconOnly accessibleLabel={l.compact} leadingIcon={<Minimize2 />} onPress={onCompact} className="ty-run-switch" /> : null}
+        </>
+      }
+    >
+      <p className="ty-visually-hidden" role="status" aria-live="polite">
+        {announcement}
+      </p>
+      <Tabs label={l.tabs} tabs={[{ id: 'live', label: l.live }, { id: 'history', label: l.history }]} selectedKey={tab} onSelectionChange={(k) => setTab(k as RunDrawerTab)}>
+        <TabPanel id="live">
+          {liveRows.length === 0 && !isRunning ? (
+            <p className="ty-run-empty">{l.idleHint}</p>
+          ) : (
+            <RunDetail rows={liveRows} total={undefined} failed={word === 'failed'} labels={l} statusLabels={statusLabels} locale={locale} expanded={expandedNode} onExpanded={setExpandedNode} />
+          )}
+        </TabPanel>
+        <TabPanel id="history">
+          {selectedRun ? (
+            <div className="ty-run-drawer__run">
+              <Button variant="quiet" size="compact" leadingIcon={<ArrowLeft className="ty-run-mirror" />} onPress={back}>
+                {l.back}
+              </Button>
+              <RunDetail
+                rows={selectedRun.nodeResults ?? []}
+                total={selectedRun.durationMs}
+                failed={runWordOf(selectedRun.status) === 'failed'}
+                labels={l}
+                statusLabels={statusLabels}
+                locale={locale}
+                expanded={expandedNode}
+                onExpanded={setExpandedNode}
+              />
+            </div>
+          ) : (
+            <HistoryList
+              history={history}
+              labels={l}
+              statusLabels={statusLabels}
+              locale={locale}
+              rowRefs={rowRefs.current}
+              onSelect={(run) => {
+                lastSelected.current = run.id
+                setRunId(run.id)
+              }}
+            />
+          )}
+        </TabPanel>
+      </Tabs>
+    </DockedPanel>
+  )
+}
+
+function HistoryList({
+  history,
+  labels: l,
+  statusLabels,
+  locale,
+  rowRefs,
+  onSelect,
+}: {
+  history: ReturnType<typeof useRunHistory>
+  labels: RunDrawerLabels
+  statusLabels?: Partial<RunWordLabels>
+  locale: string
+  rowRefs: Map<string, HTMLButtonElement>
+  onSelect: (run: RunSummary) => void
+}) {
+  if (history.state === 'loading' || history.state === 'idle') {
+    return (
+      <div aria-busy="true" role="status" className="ty-run-loading">
+        <Spinner size="small" label={l.loading} showLabel />
+      </div>
+    )
+  }
+  if (history.state === 'error') {
+    return (
+      <div className="ty-run-load-error" role="alert">
+        <p>{fill(l.loadError, { message: history.error ?? '' }, locale)}</p>
+        <Button size="compact" onPress={history.retry}>
+          {l.retry}
+        </Button>
+      </div>
+    )
+  }
+  if (!history.runs.length) return <p className="ty-run-empty">{l.empty}</p>
+  return (
+    <ul className="ty-run-items">
+      {history.runs.map((run) => (
+        <li key={run.id}>
+          <button
+            type="button"
+            className="ty-run-item"
+            data-status={runWordOf(run.status)}
+            ref={(el) => {
+              if (el) rowRefs.set(run.id, el)
+            }}
+            onClick={() => onSelect(run)}
+          >
+            <RunStatusMark status={run.status} labels={statusLabels} />
+            <span className="ty-run-item__name">{fill(l.runRow, { time: formatDateTime(run.startedAt, locale) }, locale)}</span>
+            <span className="ty-run-item__meta">{run.durationMs === undefined ? l.notReported : formatDuration(run.durationMs, locale)}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function RunDetail({
+  rows,
+  total,
+  failed,
+  labels: l,
+  statusLabels,
+  locale,
+  expanded,
+  onExpanded,
+}: {
+  rows: readonly RunNodeResult[]
+  total: number | undefined
+  failed: boolean
+  labels: RunDrawerLabels
+  statusLabels?: Partial<RunWordLabels>
+  locale: string
+  expanded: string | null
+  onExpanded: (id: string | null) => void
+}) {
+  const baseId = useId()
+  const succeeded = rows.filter((r) => runWordOf(r.status) === 'completed').length
+  const errorCount = rows.filter((r) => runWordOf(r.status) === 'failed').length
+  const totalMs = total ?? rows.reduce((sum, r) => sum + (r.durationMs ?? 0), 0)
+  const outputs = rows.map((r) => r.outputs)
+  const tokens = sumTokens(outputs)
+  const tools = countTools(outputs)
+  const firstFailing = rows.find((r) => runWordOf(r.status) === 'failed')?.nodeId ?? null
+  // A failed run opens with the failing node expanded.
+  const [autoOpened, setAutoOpened] = useState(false)
+  useEffect(() => {
+    if (failed && firstFailing && !autoOpened && expanded === null) {
+      setAutoOpened(true)
+      onExpanded(firstFailing)
+    }
+  }, [failed, firstFailing, autoOpened, expanded, onExpanded])
+  const num = (v: number) => formatNumber(v, locale)
+
+  return (
+    <div className="ty-run-detail" data-failed={failed || undefined}>
+      {failed ? <div className="ty-run-detail__band" aria-hidden="true" /> : null}
+      <dl className="ty-run-metrics">
+        <div className="ty-run-metric">
+          <dt>{l.totalDuration}</dt>
+          <dd>{formatDuration(totalMs, locale)}</dd>
+        </div>
+        <div className="ty-run-metric">
+          <dt>{l.nodeCount}</dt>
+          <dd>{num(rows.length)}</dd>
+        </div>
+        <div className="ty-run-metric">
+          <dt>{l.succeeded}</dt>
+          <dd>{num(succeeded)}</dd>
+        </div>
+        <div className="ty-run-metric" data-tone={errorCount > 0 ? 'danger' : undefined}>
+          <dt className="ty-visually-hidden">{l.errorsTerm}</dt>
+          <dd className="ty-run-metric__errors">
+            {errorCount > 0 ? <CircleAlert aria-hidden="true" focusable="false" /> : null}
+            {fill(l.errors, { count: errorCount }, locale)}
+          </dd>
+        </div>
+      </dl>
+
+      <section className="ty-run-section" aria-labelledby={`${baseId}-tokens`}>
+        <h3 id={`${baseId}-tokens`} className="ty-run-section__title">
+          {l.tokens}
+        </h3>
+        {tokens ? (
+          <dl className="ty-run-facts" data-testid="run-tokens">
+            <div>
+              <dt>{l.tokensIn}</dt>
+              <dd>{num(tokens.input)}</dd>
+            </div>
+            <div>
+              <dt>{l.tokensOut}</dt>
+              <dd>{num(tokens.output)}</dd>
+            </div>
+            <div>
+              <dt>{l.tokensTotal}</dt>
+              <dd>{num(tokens.total)}</dd>
+            </div>
+          </dl>
+        ) : (
+          <p className="ty-run-hint">{l.tokensNotReported}</p>
+        )}
+      </section>
+
+      <section className="ty-run-section" aria-labelledby={`${baseId}-tools`}>
+        <h3 id={`${baseId}-tools`} className="ty-run-section__title">
+          {l.tools}
+        </h3>
+        {tools ? (
+          <ul className="ty-run-tools">
+            {tools.map((t) => (
+              <li key={t.name}>
+                <code className="ty-run-mono">{t.name}</code> <span>{fill(l.toolCalls, { count: t.count }, locale)}</span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="ty-run-hint">{l.toolsNotReported}</p>
+        )}
+      </section>
+
+      <section className="ty-run-section" aria-labelledby={`${baseId}-nodes`}>
+        <h3 id={`${baseId}-nodes`} className="ty-run-section__title">
+          {l.nodes}
+        </h3>
+        <ul className="ty-run-rows">
+          {rows.map((r) => {
+            const open = expanded === r.nodeId
+            const panelId = `${baseId}-${r.nodeId}`
+            return (
+              <li key={r.nodeId} className="ty-run-row" data-status={runWordOf(r.status)}>
+                <button type="button" className="ty-run-row__toggle" aria-expanded={open} aria-controls={panelId} onClick={() => onExpanded(open ? null : r.nodeId)}>
+                  <ChevronRight className="ty-run-row__chevron ty-run-mirror" aria-hidden="true" focusable="false" />
+                  <RunStatusMark status={r.status} labels={statusLabels} />
+                  <span className="ty-run-row__label">{r.label ?? r.nodeId}</span>
+                  {r.kind ? <span className="ty-run-row__kind">{r.kind}</span> : null}
+                  <span className="ty-run-row__duration">{r.durationMs === undefined ? l.notReported : formatDuration(r.durationMs, locale)}</span>
+                </button>
+                {r.error ? <p className="ty-run-row__error">{r.error}</p> : null}
+                {open ? (
+                  <pre id={panelId} className="ty-run-output" tabIndex={0} aria-label={fill(l.output, { node: r.label ?? r.nodeId }, locale)}>
+                    {r.outputs === undefined ? l.notReported : prettyValue(r.outputs)}
+                  </pre>
+                ) : null}
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+    </div>
+  )
+}

package/src/flow/run/RunInputDialog.tsx

@@ -0,0 +1,149 @@
+// RunInputDialog: before a run starts, ask for a value for every input the
+// flow's start step declares, pre-filled with its saved defaults each time the
+// dialog opens.
+
+import { useEffect, useId, useState, type FormEvent } from 'react'
+import { Button, ModalDialog, TextField } from '../../index'
+import { defineLabels, useLabels } from '../internal/labels'
+import { createFlowEditorStore, useOptionalFlowEditorStore } from '../state/editorState'
+import { useStoreSelector } from '../state/store'
+import { NumberInput } from './NumberInput'
+
+export interface RunInputDialogLabels {
+  title: string
+  subtitle: string
+  empty: string
+  valuePlaceholder: string
+  cancel: string
+  run: string
+}
+
+export const runInputDialogLabels = defineLabels<RunInputDialogLabels>('run-input-dialog', {
+  en: { title: 'Run this flow', subtitle: 'Give a value to each input the flow declares.', empty: 'This flow declares no inputs. It runs as it is.', valuePlaceholder: 'Value', cancel: 'Cancel', run: 'Run' },
+  'pt-BR': { title: 'Executar este fluxo', subtitle: 'Informe um valor para cada entrada que o fluxo declara.', empty: 'Este fluxo não declara entradas. Ele roda como está.', valuePlaceholder: 'Valor', cancel: 'Cancelar', run: 'Executar' },
+  es: { title: 'Ejecutar este flujo', subtitle: 'Indique un valor para cada entrada que declara el flujo.', empty: 'Este flujo no declara entradas. Se ejecuta tal cual.', valuePlaceholder: 'Valor', cancel: 'Cancelar', run: 'Ejecutar' },
+})
+export const defaultRunInputDialogLabels: RunInputDialogLabels = runInputDialogLabels.bundles.en
+
+export type InputFieldKind = 'currency' | 'count' | 'text'
+export type RunInputValue = string | number | boolean | null
+
+export interface RunInputDialogProps {
+  open: boolean
+  onClose: () => void
+  onRun: (inputs: Record<string, RunInputValue>) => void
+  classifyVariable?: (name: string) => InputFieldKind
+  currencySymbol?: string
+  labels?: Partial<RunInputDialogLabels>
+}
+
+/** "loanAmount", "loan_amount" and "loan-amount" read as "Loan amount" (any script's letter cases). */
+export function humaniseIdentifier(id: string): string {
+  const spaced = id
+    .split(/(?<=[\p{Ll}\p{N}])(?=\p{Lu})|[_-]+/u)
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase()
+  return spaced ? spaced.charAt(0).toUpperCase() + spaced.slice(1) : id
+}
+
+/** Declared inputs as names; objects with a name are reduced to it, anything else is stringified. */
+export function declaredInputNames(raw: unknown): string[] {
+  if (!Array.isArray(raw)) return []
+  return raw.map((item: unknown) => {
+    if (typeof item === 'string') return item
+    const named = item && typeof item === 'object' ? (item as { name?: unknown }).name : undefined
+    if (typeof named === 'string') return named
+    return typeof item === 'object' ? JSON.stringify(item) : String(item)
+  })
+}
+
+type Raw = string | number | null
+interface Declared {
+  names: string[]
+  saved: Record<string, unknown>
+}
+
+const NO_START: Declared = { names: [], saved: {} }
+
+/** Inputs and saved defaults of the start step (config either nested or flat). */
+function declaredBy(nodes: ReadonlyArray<{ kind: string; data: Record<string, unknown> }>): Declared {
+  const start = nodes.find((n) => n.kind === 'start')
+  if (!start) return NO_START
+  const nested = start.data.config
+  const cfg = (nested && typeof nested === 'object' ? nested : start.data) as Record<string, unknown>
+  const saved = cfg.inputDefaults && typeof cfg.inputDefaults === 'object' ? (cfg.inputDefaults as Record<string, unknown>) : {}
+  return { names: declaredInputNames(cfg.inputVariables), saved }
+}
+
+const seedOf = (saved: unknown): Raw => (saved === undefined || saved === null ? '' : typeof saved === 'number' ? saved : String(saved))
+const numeric = (raw: Raw | undefined): number | null => {
+  if (typeof raw === 'number') return raw
+  if (raw === null || raw === undefined || raw === '') return null
+  const n = Number(raw)
+  return Number.isNaN(n) ? null : n
+}
+/** What `onRun` receives for a field: text as text, numbers as numbers, empty as an empty string. */
+const outgoing = (kind: InputFieldKind, raw: Raw | undefined): RunInputValue => (kind === 'text' ? (raw === null || raw === undefined ? '' : String(raw)) : (numeric(raw) ?? ''))
+
+const orphanStore = createFlowEditorStore()
+
+export function RunInputDialog({ open, onClose, onRun, classifyVariable, currencySymbol, labels }: RunInputDialogProps) {
+  const l = useLabels(runInputDialogLabels, labels)
+  const nodes = useStoreSelector(useOptionalFlowEditorStore() ?? orphanStore, (s) => s.nodes)
+  const { names, saved } = declaredBy(nodes)
+  const formId = useId()
+  const [entered, setEntered] = useState<Record<string, Raw>>({})
+  const kindOf = (name: string): InputFieldKind => classifyVariable?.(name) ?? 'text'
+
+  // Each opening starts again from the saved defaults.
+  useEffect(() => {
+    if (open) setEntered(Object.fromEntries(names.map((n) => [n, seedOf(saved[n])])))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  const put = (name: string) => (v: Raw) => setEntered((prev) => ({ ...prev, [name]: v }))
+  const send = (e?: FormEvent) => {
+    e?.preventDefault()
+    const inputs = Object.fromEntries(names.map((n) => [n, outgoing(kindOf(n), entered[n])]))
+    setEntered({})
+    onRun(inputs)
+    onClose()
+  }
+
+  const fields = names.map((name, index) => {
+    const kind = kindOf(name)
+    const common = { label: humaniseIdentifier(name), hint: <code className="ty-run-mono">{name}</code>, name }
+    return kind === 'text' ? (
+      <TextField key={name} {...common} placeholder={l.valuePlaceholder} value={String(entered[name] ?? '')} onChange={put(name)} {...(index === 0 ? { autoFocus: true } : {})} />
+    ) : (
+      <NumberInput key={name} {...common} integer={kind === 'count'} {...(kind === 'currency' && currencySymbol ? { prefix: currencySymbol } : {})} value={numeric(entered[name])} onChange={put(name)} autoFocus={index === 0} />
+    )
+  })
+
+  return (
+    <ModalDialog
+      isOpen={open}
+      onOpenChange={(stillOpen) => (stillOpen ? undefined : onClose())}
+      title={l.title}
+      description={l.subtitle}
+      width="regular"
+      actions={
+        <>
+          <Button variant="quiet" onPress={onClose}>
+            {l.cancel}
+          </Button>
+          <Button variant="primary" type="submit" form={formId}>
+            {l.run}
+          </Button>
+        </>
+      }
+    >
+      <form id={formId} className="ty-run-form" onSubmit={send} noValidate>
+        {fields.length ? fields : <p className="ty-run-empty">{l.empty}</p>}
+        {/* Lets Enter in a single-line field submit. */}
+        <button type="submit" hidden tabIndex={-1} aria-hidden="true" />
+      </form>
+    </ModalDialog>
+  )
+}