remora-monorepo

---

remora-monorepo / viewer / WorkflowViewerProps

Interface: WorkflowViewerProps

Defined in: packages/ui/src/workflow-viewer.tsx:122

Props for the WorkflowViewer component.

Properties

diagnostics?

optional diagnostics: Diagnostic[]

Defined in: packages/ui/src/workflow-viewer.tsx:126

Compiler diagnostics to display on affected nodes.

---

executionState?

optional executionState: object

Defined in: packages/ui/src/workflow-viewer.tsx:130

Execution state to visualize on the workflow DAG.

completedAt?

optional completedAt: string

durationMs?

optional durationMs: number

error?

optional error: object

error.category

category: string

error.code

code: string

error.isRetryable?

optional isRetryable: boolean

error.message

message: string

error.statusCode?

optional statusCode: number

error.stepId?

optional stepId: string

output?

optional output: unknown

runId

runId: string

startedAt

startedAt: string

status

status: "pending" | "running" | "completed" | "failed"

stepRecords

stepRecords: object[]

workflowHash?

optional workflowHash: string

---

hideDetailPanel?

optional hideDetailPanel: boolean

Defined in: packages/ui/src/workflow-viewer.tsx:153

Hide the built-in detail/editor panel. Use this when rendering StepDetailPanel or StepEditorPanel externally.

---

isEditing?

optional isEditing: boolean

Defined in: packages/ui/src/workflow-viewer.tsx:140

Enable editing mode. When true, nodes are draggable and editable.

---

layout?

optional layout: LayoutDirection

Defined in: packages/ui/src/workflow-viewer.tsx:155

Controls whether the DAG flows top-to-bottom ("vertical") or left-to-right ("horizontal").

See

LayoutDirection

---

minimapHeight?

optional minimapHeight: number

Defined in: packages/ui/src/workflow-viewer.tsx:136

Height of the minimap in pixels.

Default

150

---

minimapWidth?

optional minimapWidth: number

Defined in: packages/ui/src/workflow-viewer.tsx:134

Width of the minimap in pixels (capped at 25% of viewer width).

Default

200

---

onStepSelect()?

optional onStepSelect: (step, diagnostics) => void

Defined in: packages/ui/src/workflow-viewer.tsx:128

Called when a step node is clicked (with the step and its diagnostics) or when the selection is cleared (with null).

Parameters

step

{ description: string; id: string; name: string; nextStepId?: string; params: { toolInput: {[x: string]: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; toolName: string; }; type: "tool-call"; } | { description: string; id: string; name: string; nextStepId?: string; params: { cases: object[]; switchOn: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "switch-case"; } | { description: string; id: string; name: string; nextStepId?: string; params: { itemName: string; loopBodyStepId: string; target: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "for-each"; } | { description: string; id: string; name: string; nextStepId?: string; params: { outputFormat: object; prompt: string; }; type: "llm-prompt"; } | { description: string; id: string; name: string; nextStepId?: string; params: { outputFormat: object; sourceData: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "extract-data"; } | { description: string; id: string; name: string; nextStepId?: string; params: { durationMs: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "sleep"; } | { description: string; id: string; name: string; nextStepId?: string; params: { backoffMultiplier?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; condition: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; conditionStepId: string; intervalMs?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; maxAttempts?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; timeoutMs?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "wait-for-condition"; } | { description: string; id: string; name: string; nextStepId?: string; params: { instructions: string; maxSteps?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; outputFormat: object; tools: string[]; }; type: "agent-loop"; } | { description: string; id: string; name: string; nextStepId?: string; type: "start"; } | { description: string; id: string; name: string; nextStepId?: string; params?: { output: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "end"; } | null

diagnostics

Diagnostic[]

Returns

void

---

onWorkflowChange()?

optional onWorkflowChange: (workflow) => void

Defined in: packages/ui/src/workflow-viewer.tsx:142

Called when the workflow is modified in edit mode.

Parameters

workflow

initialStepId

string

inputSchema?

object

outputSchema?

object

steps

({ description: string; id: string; name: string; nextStepId?: string; params: { toolInput: {[x: string]: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; toolName: string; }; type: "tool-call"; } | { description: string; id: string; name: string; nextStepId?: string; params: { cases: object[]; switchOn: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "switch-case"; } | { description: string; id: string; name: string; nextStepId?: string; params: { itemName: string; loopBodyStepId: string; target: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "for-each"; } | { description: string; id: string; name: string; nextStepId?: string; params: { outputFormat: object; prompt: string; }; type: "llm-prompt"; } | { description: string; id: string; name: string; nextStepId?: string; params: { outputFormat: object; sourceData: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "extract-data"; } | { description: string; id: string; name: string; nextStepId?: string; params: { durationMs: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "sleep"; } | { description: string; id: string; name: string; nextStepId?: string; params: { backoffMultiplier?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; condition: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; conditionStepId: string; intervalMs?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; maxAttempts?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; timeoutMs?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "wait-for-condition"; } | { description: string; id: string; name: string; nextStepId?: string; params: { instructions: string; maxSteps?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; outputFormat: object; tools: string[]; }; type: "agent-loop"; } | { description: string; id: string; name: string; nextStepId?: string; type: "start"; } | { description: string; id: string; name: string; nextStepId?: string; params?: { output: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "end"; })[]

Returns

void

---

paused?

optional paused: boolean

Defined in: packages/ui/src/workflow-viewer.tsx:138

Whether the workflow execution is currently paused.

---

showMinimap?

optional showMinimap: boolean

Defined in: packages/ui/src/workflow-viewer.tsx:132

Whether to show the minimap.

Default

true

---

tools?

optional tools: ToolSet

Defined in: packages/ui/src/workflow-viewer.tsx:144

Tool definitions (AI SDK ToolSet). Used for tool name autocomplete in the editor. Execute functions are optional.

---

toolSchemas?

optional toolSchemas: ToolDefinitionMap

Defined in: packages/ui/src/workflow-viewer.tsx:151

Pre-extracted tool schemas. When provided, skips extracting schemas from tools. Each schema may include an optional displayName to render a human-friendly label in the UI; the compiled workflow continues to reference tools by their actual keys.

---

workflow

workflow: { initialStepId: string; inputSchema?: object; outputSchema?: object; steps: ({ description: string; id: string; name: string; nextStepId?: string; params: { toolInput: {[x: string]: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; toolName: string; }; type: "tool-call"; } | { description: string; id: string; name: string; nextStepId?: string; params: { cases: object[]; switchOn: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "switch-case"; } | { description: string; id: string; name: string; nextStepId?: string; params: { itemName: string; loopBodyStepId: string; target: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "for-each"; } | { description: string; id: string; name: string; nextStepId?: string; params: { outputFormat: object; prompt: string; }; type: "llm-prompt"; } | { description: string; id: string; name: string; nextStepId?: string; params: { outputFormat: object; sourceData: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "extract-data"; } | { description: string; id: string; name: string; nextStepId?: string; params: { durationMs: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "sleep"; } | { description: string; id: string; name: string; nextStepId?: string; params: { backoffMultiplier?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; condition: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; conditionStepId: string; intervalMs?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; maxAttempts?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; timeoutMs?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "wait-for-condition"; } | { description: string; id: string; name: string; nextStepId?: string; params: { instructions: string; maxSteps?: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; outputFormat: object; tools: string[]; }; type: "agent-loop"; } | { description: string; id: string; name: string; nextStepId?: string; type: "start"; } | { description: string; id: string; name: string; nextStepId?: string; params?: { output: { type: "literal"; value: unknown; } | { expression: string; type: "jmespath"; } | { template: string; type: "template"; }; }; type: "end"; })[]; } | null

Defined in: packages/ui/src/workflow-viewer.tsx:124

The workflow definition to visualize. Pass null to start with an empty canvas (requires isEditing).