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

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#333

code-lead commented

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

Collaborator

As an operator, I want to edit a flow graph visually (add nodes, connect ports, delete selections, save) so that I can fork the default graph and tailor my pipelines without editing JSON.

Acceptance criteria

Palette

Q hotkey + right-click on empty canvas opens a searchable, category-grouped node palette.
Clicking an entry spawns the node at the cursor.

Edit operations

Delete / Backspace removes selected nodes + attached edges.
Source node is undeletable.
Drag-to-connect: output → input; drop on non-compatible type refuses visually + with a toast.
Cycle detection via React Flow isValidConnection.

Priority number input (default 100).
Mutex-group autocomplete against existing groups across every flow.
Enable / disable toggle.

Save

Ctrl+S → PATCH /flows/:id; version bumps.
Save fails cleanly on server-side validation errors (offending nodes highlighted).
Dirty-tracking: navigating away with unsaved changes prompts confirmation.

Out of scope

Inspector + widgets — NF-UI-4.
Input-reference picker — NF-UI-5.

References

Spec: specs/node-flows-ui.md § Stories § NF-UI-3.
Depends on NF-UI-2 (#332) + NF-7 (#328).

As an operator, I want to edit a flow graph visually (add nodes, connect ports, delete selections, save) so that I can fork the default graph and tailor my pipelines without editing JSON. ## Acceptance criteria ### Palette - [ ] `Q` hotkey + right-click on empty canvas opens a searchable, category-grouped node palette. - [ ] Clicking an entry spawns the node at the cursor. ### Edit operations - [ ] `Delete` / `Backspace` removes selected nodes + attached edges. - [ ] Source node is undeletable. - [ ] Drag-to-connect: output → input; drop on non-compatible type refuses visually + with a toast. - [ ] Cycle detection via React Flow `isValidConnection`. ### Toolbar - [ ] Priority number input (default 100). - [ ] Mutex-group autocomplete against existing groups across every flow. - [ ] Enable / disable toggle. ### Save - [ ] `Ctrl+S` → `PATCH /flows/:id`; version bumps. - [ ] Save fails cleanly on server-side validation errors (offending nodes highlighted). - [ ] Dirty-tracking: navigating away with unsaved changes prompts confirmation. ## Out of scope - Inspector + widgets — NF-UI-4. - Input-reference picker — NF-UI-5. ## References - Spec: [`specs/node-flows-ui.md`](../src/branch/main/specs/node-flows-ui.md) § Stories § NF-UI-3. - Depends on NF-UI-2 (#332) + NF-7 (#328).

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

code-lead added the

labels

code-lead referenced this issue

NF-UI-4: Inspector — widgets, docs, static args #334

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

NF-UI-5: Input-reference picker #335

NF-UI-6: Annotations + mode banner #336

NF-UI-7: Replay mode + runs drawer #337

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

NF-UI-9: Version diff + revert #339

M21 Tracking — Node Flows #340