NF-UI-2: Canvas shell + default-flow read-only view #332

New issue

Closed

opened 2026-04-24 11:29:52 +00:00 by code-lead · 0 comments

code-lead commented

2026-04-24 11:29:52 +00:00

Collaborator

As an operator, I want to open a flow at /app/flows/:id and see its graph rendered as a React Flow canvas (pan/zoom/minimap) so that I can inspect the default graph before any edits are possible.

Acceptance criteria

Canvas

/app/flows/:id loads flow JSON via GET /flows/:id.
React Flow v11 canvas: pan, zoom, minimap.
One generic node component: header (icon + label + category strip) + left-side input handles + right-side output handles.
Port handles colored by the type palette (Tokyo-Night derived, per spec).
Edges colored by source-port type.

Layout

dagre autolayout on load; deterministic (same seed per identical graph).

Read-only

Toolbar shows "Read only — NF-UI-3 adds editing" placeholder.
No mutation endpoints hit.

Default flow

Loads legibly with zero manual layout needed.

Out of scope

Editing — NF-UI-3.
Inspector widgets — NF-UI-4.

References

Spec: specs/node-flows-ui.md § Stories § NF-UI-2.
Depends on NF-4 (#325) + NF-UI-1 (#331).

As an operator, I want to open a flow at `/app/flows/:id` and see its graph rendered as a React Flow canvas (pan/zoom/minimap) so that I can inspect the default graph before any edits are possible. ## Acceptance criteria ### Canvas - [ ] `/app/flows/:id` loads flow JSON via `GET /flows/:id`. - [ ] React Flow v11 canvas: pan, zoom, minimap. - [ ] One generic node component: header (icon + label + category strip) + left-side input handles + right-side output handles. - [ ] Port handles colored by the type palette (Tokyo-Night derived, per spec). - [ ] Edges colored by source-port type. ### Layout - [ ] dagre autolayout on load; deterministic (same seed per identical graph). ### Read-only - [ ] Toolbar shows "Read only — NF-UI-3 adds editing" placeholder. - [ ] No mutation endpoints hit. ### Default flow - [ ] Loads legibly with zero manual layout needed. ## Out of scope - Editing — NF-UI-3. - Inspector widgets — NF-UI-4. ## References - Spec: [`specs/node-flows-ui.md`](../src/branch/main/specs/node-flows-ui.md) § Stories § NF-UI-2. - Depends on NF-4 (#325) + NF-UI-1 (#331).

code-lead added this to the M21 — Node Flows milestone

2026-04-24 11:29:52 +00:00

code-lead added the

type:user-story

area:dashboard

labels

2026-04-24 11:29:52 +00:00

code-lead referenced this issue

2026-04-24 11:29:53 +00:00

NF-UI-3: Editing — add / delete / connect / wire validation #333

code-lead referenced this issue

2026-04-24 11:29:57 +00:00