Install React Flow and scaffold WorkflowCanvas base component

[geoffjay]

Summary

Add @xyflow/react (React Flow v12) as a dependency and create the foundational WorkflowCanvas component that all subsequent workflow builder features will build upon.

Context

The agentd UI currently uses form-based CRUD for workflow management. This issue introduces the base canvas infrastructure for a visual workflow builder. React Flow is a mature, MIT-licensed library for building node-based editors and is the standard choice for workflow visualization in React applications.

Implementation Details

1. Install dependency

cd ui && bun add @xyflow/react

React Flow v12 (@xyflow/react) ships its own TypeScript types and CSS.

2. Create base canvas component

Create ui/src/components/workflows/canvas/WorkflowCanvas.tsx:

• Render a <ReactFlow> instance with:
  • <Controls /> - zoom in/out, fit view
  • <MiniMap /> - overview navigation
  • <Background variant="dots" /> - visual grid
• Accept nodes, edges, onNodesChange, onEdgesChange, onConnect props
• Import React Flow CSS (@xyflow/react/dist/style.css)
• Wrap in a <ReactFlowProvider> at the appropriate level
• Apply theme-compatible styling using existing --th-* CSS custom properties
• Set sensible defaults: fitView, snapToGrid, snapGrid={[16, 16]}

3. Create barrel exports

• ui/src/components/workflows/canvas/index.ts - export WorkflowCanvas
• Update ui/src/components/workflows/index.ts to re-export canvas module

4. Add basic test

• ui/src/components/workflows/canvas/WorkflowCanvas.test.tsx
• Verify canvas renders without errors
• Verify controls, minimap, and background are present

Files to Create/Modify

• ui/package.json - add @xyflow/react dependency
• ui/src/components/workflows/canvas/WorkflowCanvas.tsx - new component
• ui/src/components/workflows/canvas/index.ts - barrel export
• ui/src/components/workflows/index.ts - update exports
• ui/src/components/workflows/canvas/WorkflowCanvas.test.tsx - tests

Acceptance Criteria

• @xyflow/react installed and importable
• WorkflowCanvas renders a React Flow canvas with controls, minimap, and background
• Canvas styling is compatible with the existing theme system (--th-* variables)
• Component accepts standard React Flow props (nodes, edges, callbacks)
• snapToGrid enabled with 16px grid
• Test passes verifying basic rendering
• No regressions in existing workflow components

Stack Base

• Stack on: feature/autonomous-pipeline
• Parallel: no ordering constraint (can be implemented independently of type extensions)

[geoffjay]

✅ Triage Complete

Field	Value
Type	enhancement
Complexity	medium
Milestone	v0.14.0 - Visual Workflow Builder
Labels	enhancement, ui, frontend, complexity:medium

No duplicates found. #1094 is the parent epic; all other related issues (#1096–#1102) are downstream dependents covering distinct scope.

Complexity rationale: 5 files touched, but 4 are trivial (package.json +1 line, two barrel exports, one basic render test). The main file WorkflowCanvas.tsx is a thin React Flow wrapper (~50–70 lines) that passes through standard props with no custom logic, no API integration, and no design decisions beyond what is fully specified in the issue. Total ~90–120 lines. Consistent with the complexity:medium pattern established for #1096: multi-file but low design effort with a fully-specified implementation. Simpler than any of the complexity:large component issues it unblocks.

Milestone confirmed: Already assigned to v0.14.0 - Visual Workflow Builder — the foundational root of the entire canvas epic.

No blockers: Can be implemented immediately — explicitly no ordering constraint (parallel with #1096).

No clarifying questions needed — dependency name, component props, sub-components (Controls, MiniMap, Background), defaults (fitView, snapToGrid, 16px grid), and test scope are all fully specified.

[geoffjay]

Implemented in PR #1107. Created WorkflowCanvas base component with @xyflow/react v12, Controls, MiniMap, Background, theme token mapping, and snapToGrid.