ReferenceComponentsWorkflow UI
OperationTree
OperationTree component API, behavior, and executable example.
Loading executable example…
API and events
Bind observable workflow and operation snapshots to guided terminal flows, progress, errors, cancellation, splash state, and contextual help.
export function OperationTree({
id = "operation-tree",
operations,
expanded,
defaultExpanded = operations.map((operation) => operation.id),
onExpandedChange,
value,
defaultValue,
onValueChange,
slots,
slotProps,
...props
}: OperationTreeProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
expanded | readonly string[] | undefined | No | The expanded member uses the readonly string[] | undefined contract. | — |
defaultExpanded | readonly string[] | undefined | No | The defaultExpanded member uses the readonly string[] | undefined contract. | — |
onExpandedChange | ((expanded: readonly string[]) => void | Promise<void>) | undefined | No | The onExpandedChange member uses the ((expanded: readonly string[]) => void | Promise<void>) | undefined contract. | — |
value | string | undefined | No | The value member uses the string | undefined contract. | — |
defaultValue | string | undefined | No | The defaultValue member uses the string | undefined contract. | — |
onValueChange | ((value: string) => void | Promise<void>) | undefined | No | The onValueChange member uses the ((value: string) => void | Promise<void>) | undefined contract. | — |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
operations | readonly OperationSnapshot<unknown>[] | Yes | The operations member uses the readonly OperationSnapshot<unknown>[] contract. | OperationSnapshot |
showDuration | boolean | undefined | No | The showDuration member uses the boolean | undefined contract. | — |
showAttempts | boolean | undefined | No | The showAttempts member uses the boolean | undefined contract. | — |
showProgress | boolean | undefined | No | The showProgress member uses the boolean | undefined contract. | — |
now | number | undefined | No | The now member uses the number | undefined contract. | — |
slots | Partial<SlotComponents<{ root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; }>> | undefined contract. | BoxProps, SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; }, object>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; }, object>> | undefined contract. | BoxProps, SlotProps, TextProps |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
The runner emits the complete workflow:* lifecycle; operation components reflect operation snapshots and callbacks.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
Controls call the runner's next, back, skip, retry, cancel, and rollback operations with transition locking.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { OperationTree } from "@/components/tuil/workflows/workflow";