feat(ui): install @xyflow/react and scaffold WorkflowCanvas base component

[geoffjay]

Install React Flow v12 and create the foundational WorkflowCanvas component with Controls, MiniMap, Background, theme token mapping, and snapToGrid defaults.

Closes #1095

[geoffjay]

This change is part of the following stack:

• feat(ui): install @xyflow/react and scaffold WorkflowCanvas base component #1107 ◀
  • feat(ui): extend TriggerConfig types to match all backend trigger variants #1108
    • feat(ui): create trigger source node components for workflow canvas #1109
      • feat(ui): create agent node and prompt template edge components #1110
        • feat(ui): implement graph-to-API serialization for workflow canvas save/load #1111
          • feat(ui): build node palette sidebar with drag-and-drop onto workflow canvas #1112
            • feat(ui): add workflow builder page with routing and persistence #1113
              • feat(ui): add read-only workflow visualization with auto-layout #1114

_{Change managed by git-spice.}

[geoffjay]

Review: feat(ui): install @xyflow/react and scaffold WorkflowCanvas base component

Stack position: Base of the UI canvas stack — stacked directly on feature/autonomous-pipeline. No parent PRs to review first.

Overview

Installs @xyflow/react@12.10.2 and scaffolds the WorkflowCanvas component that wraps React Flow with Controls, MiniMap, and Background. The canvas accepts nodeTypes/edgeTypes registries as optional props so children in the stack can extend it without modifying this file.

What looks good

• Theme token wiring: React Flow's CSS variables (--xy-background-color, --xy-edge-stroke, etc.) are mapped to the project's --th-* tokens inline. This ensures the canvas inherits both light and dark mode correctly without duplicating theme logic.
• Provider pattern: The outer WorkflowCanvas wraps Canvas in ReactFlowProvider. The comment correctly explains the trade-offs for multi-canvas pages.
• snapToGrid={true} with snapGrid={[16, 16]}: Sensible default for a workflow builder. This keeps node placement tidy and consistent.
• Optional nodeTypes/edgeTypes props: Correct extensibility design — callers pass their type registries; this base component doesn't need to know about them.
• Smoke tests: 4 tests cover: no-throw, wrapper testid, className forwarding, and render with non-empty nodes/edges. Appropriate for a scaffold component.

Non-blocking note

The inline style map requires a biome-ignore lint/suspicious/noExplicitAny comment to suppress the TypeScript error from assigning to CSS custom properties. This is the standard workaround and is correctly annotated. An alternative would be style={{ ...cssVarMap } as React.CSSProperties} where cssVarMap is typed as Record<string, string>, but what's here is readable and correct.

Verdict

Clean scaffold with good extensibility design. LGTM.