feat(web): flow canvas read-only view (NF-UI-2) #347

Merged

code-lead merged 1 commit from feat/332-nfui2-canvas-readonly into main

2026-04-24 12:41:25 +00:00

claude-desktop commented

2026-04-24 12:24:19 +00:00

Collaborator

Summary

Replace the /flows/:flowId stub with a React Flow canvas that renders the flow's DAG with deterministic dagre left-to-right autolayout, pan/zoom/minimap.
Generic node component: category-colored left strip + typed input/output handles (static palette from specs/node-flows-ui.md — string blue, number green, boolean red, string[] purple, forge amber, trigger cyan, any gray). Edges colored by source-port type.
Read-only: nodesDraggable=false, nodesConnectable=false, attribution hidden, toolbar carries a Read only — NF-UI-3 adds editing badge.
Data surface stays mock-first: new getFlow(id) on flowsApi joins the summary from fixtures/flows.json with a body from new fixtures/flow-graphs.json (5 seeded graphs, one per flows.json entry). Swap to GET /flows/:id when NF-7 lands.
8 unit tests mock @xyflow/react to a trivial stub and assert on the props (nodes/edges arrays, layout positions, edge stroke colors) — sidesteps happy-dom's SVG measurement gaps.

Test plan

bun x turbo run typecheck clean across all 4 workspaces
bun x biome check clean on touched files
vitest run FlowCanvas.test.tsx — 8/8 pass (loading, toolbar, error+retry, nodes/edges forwarding, dagre LR ranking, edge colors)
vitest run flows.test.tsx — 8/8 pass (NF-UI-1 regressions)
Manual: open /app/flows/default.issue-assigned and confirm the 5-node graph lays out left-to-right, minimap + controls visible, read-only badge in toolbar.

Out of scope

Drag-to-connect / palette / delete / save — NF-UI-3 (#333).
Inspector panel + widget-driven args editing — NF-UI-4 (#334).
Input-reference picker — NF-UI-5 (#335).
Annotation icons + mode banner — NF-UI-6 (#336).
Run-trace overlay + replay — NF-UI-7 (#337).
The node registry is not yet consumed; port-type inference is a static heuristic over port names, good enough for the seeded fixtures. Dynamic port schemas arrive with NF-UI-4.

Closes #332

Generated with Claude Code

## Summary - Replace the `/flows/:flowId` stub with a React Flow canvas that renders the flow's DAG with deterministic `dagre` left-to-right autolayout, pan/zoom/minimap. - Generic node component: category-colored left strip + typed input/output handles (static palette from `specs/node-flows-ui.md` — `string` blue, `number` green, `boolean` red, `string[]` purple, `forge` amber, `trigger` cyan, `any` gray). Edges colored by source-port type. - Read-only: `nodesDraggable=false`, `nodesConnectable=false`, attribution hidden, toolbar carries a `Read only — NF-UI-3 adds editing` badge. - Data surface stays mock-first: new `getFlow(id)` on `flowsApi` joins the summary from `fixtures/flows.json` with a body from new `fixtures/flow-graphs.json` (5 seeded graphs, one per `flows.json` entry). Swap to `GET /flows/:id` when NF-7 lands. - 8 unit tests mock `@xyflow/react` to a trivial stub and assert on the props (nodes/edges arrays, layout positions, edge stroke colors) — sidesteps happy-dom's SVG measurement gaps. ## Test plan - [x] `bun x turbo run typecheck` clean across all 4 workspaces - [x] `bun x biome check` clean on touched files - [x] `vitest run FlowCanvas.test.tsx` — 8/8 pass (loading, toolbar, error+retry, nodes/edges forwarding, dagre LR ranking, edge colors) - [x] `vitest run flows.test.tsx` — 8/8 pass (NF-UI-1 regressions) - [ ] Manual: open `/app/flows/default.issue-assigned` and confirm the 5-node graph lays out left-to-right, minimap + controls visible, read-only badge in toolbar. ## Out of scope - Drag-to-connect / palette / delete / save — NF-UI-3 (#333). - Inspector panel + widget-driven `args` editing — NF-UI-4 (#334). - Input-reference picker — NF-UI-5 (#335). - Annotation icons + mode banner — NF-UI-6 (#336). - Run-trace overlay + replay — NF-UI-7 (#337). - The node registry is not yet consumed; port-type inference is a static heuristic over port names, good enough for the seeded fixtures. Dynamic port schemas arrive with NF-UI-4. Closes #332 --- Generated with Claude Code

claude-desktop added 1 commit

2026-04-24 12:24:19 +00:00

feat(web): flow canvas read-only view (NF-UI-2)

qa / qa (pull_request) Successful in 5m53s

Details

qa / dockerfile (pull_request) Successful in 8s

Details

de91c7fa8e

Replace the `/flows/:flowId` stub with a React Flow canvas that
renders the flow's DAG with dagre autolayout. Read-only pan/zoom/
minimap; drag-to-connect, palette and inspector land with NF-UI-3
and NF-UI-4. Data surface stays mock-first: a new `getFlow(id)`
joins the summary from `flows.json` with a body from
`flow-graphs.json`, same one-file-swap pattern NF-UI-1 used.

Closes #332

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>