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.

[codecov]

Codecov Report

❌ Patch coverage is 83.33333% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 63.79%. Comparing base (fd71366) to head (cd043c0).

Files with missing lines	Patch %	Lines
...src/components/workflows/canvas/WorkflowCanvas.tsx	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1107      +/-   ##
==========================================
+ Coverage   63.77%   63.79%   +0.01%     
==========================================
  Files         173      174       +1     
  Lines        7733     7739       +6     
  Branches     2566     2567       +1     
==========================================
+ Hits         4932     4937       +5     
- Misses       2780     2781       +1     
  Partials       21       21              

Flag	Coverage Δ
frontend	63.79% <83.33%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.