feat(flows): NF-UI-5 input-reference picker #356

Merged

code-lead merged 2 commits from dev/335 into main 2026-04-24 14:37:15 +00:00

Conversation 0 Commits 2 Files changed 3 +1144 -8

dev commented 2026-04-24 13:34:27 +00:00

Collaborator

Copy link

Floating tree picker for binding a node's input port to an upstream value — operators right-click any input handle to choose a reference instead of typing src.pr.number by hand.

Test plan

• Right-click on an input handle fires onInputHandleContextMenu in node data → picker opens at cursor position
• Tree shows upstream nodes → compatible output ports → JSON paths; trigger-type ports use DSL shorthand (src.repo, src.pr.number, …); forge-type ports show base ref + sub-fields; scalars show just the base ref
• Port-type filtering: incompatible ports hidden; same rule as drag-to-connect
• Selecting a path writes to nodeInputs, marks editor dirty, round-trips via Ctrl+S → updateFlow
• Free-form escape hatch: nodeId.field validation, error shown inline, Enter / Set button both fire onSelect
• Escape and click-outside dismiss the picker
• Edge binding tooltip: onEdgeMouseEnter shows all inputs bindings on target that reference source node; onEdgeMouseLeave clears it
• just qa clean — typecheck (4 packages), Biome, 297 web tests + 1562 server tests all pass

Closes #335

Floating tree picker for binding a node's input port to an upstream value — operators right-click any input handle to choose a reference instead of typing `src.pr.number` by hand. ## Test plan - [x] Right-click on an input handle fires `onInputHandleContextMenu` in node data → picker opens at cursor position - [x] Tree shows upstream nodes → compatible output ports → JSON paths; trigger-type ports use DSL shorthand (`src.repo`, `src.pr.number`, …); forge-type ports show base ref + sub-fields; scalars show just the base ref - [x] Port-type filtering: incompatible ports hidden; same rule as drag-to-connect - [x] Selecting a path writes to `nodeInputs`, marks editor dirty, round-trips via Ctrl+S → `updateFlow` - [x] Free-form escape hatch: `nodeId.field` validation, error shown inline, Enter / Set button both fire `onSelect` - [x] Escape and click-outside dismiss the picker - [x] Edge binding tooltip: `onEdgeMouseEnter` shows all `inputs` bindings on target that reference source node; `onEdgeMouseLeave` clears it - [x] `just qa` clean — typecheck (4 packages), Biome, 297 web tests + 1562 server tests all pass Closes #335

dev added 1 commit 2026-04-24 13:34:27 +00:00

feat(flows): NF-UI-5 input-reference picker ... 4acc952b7d

Add `InputRefPicker` — a floating tree picker that opens on right-click
of an input handle, letting operators bind a port to an upstream node's
output via point-and-click rather than hand-typing dotted references.

- `InputRefPicker` component: header (port name + type), tree of
  upstream nodes → compatible output ports → JSON path options,
  free-form escape hatch with `nodeId.field` validation.
- DSL shorthand paths for `trigger`-type ports (`src.repo`,
  `src.pr.number`, …) matching the seed-fixture convention; forge-type
  ports get base ref + common sub-fields; scalars get just the base ref.
- Port-type compatibility filtering mirrors the drag-to-connect rule.
- Selection writes to `nodeInputs`, marks the editor dirty, and
  round-trips through `updateFlow` on save.
- Edge binding tooltip: `onEdgeMouseEnter` aggregates all `inputs`
  bindings on the target node that reference the source, then shows a
  floating tooltip — satisfying the discoverability AC.
- 30 new tests (unit + integration) in `InputRefPicker.test.tsx`.
- Export `PORT_COLORS` from `FlowCanvas.tsx` for downstream consumers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer 2026-04-24 13:49:34 +00:00

dev force-pushed dev/335 from 4acc952b7d to d8c49f67cb 2026-04-24 13:58:41 +00:00 Compare

charles added 1 commit 2026-04-24 14:11:35 +00:00

fix(web): NF-UI-5 import order for biome (#335 follow-up) ... 1efd03a5cb

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

code-lead merged commit f5afd9cdc6 into main 2026-04-24 14:37:15 +00:00

code-lead deleted branch dev/335 2026-04-24 14:37:16 +00:00

code-lead referenced this pull request from a commit 2026-04-24 14:37:17 +00:00

feat(flows): NF-UI-5 input-reference picker (#356)

Sign in to join this conversation.

Reviewers

No reviewers

reviewer

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

No labels

area:agents

area:dashboard

area:database

area:design

area:design-review

area:flows

area:infra

area:meta

area:security

area:sessions

area:webhook

area:workdir

security

type:bug

type:chore

type:meta

type:user-story

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

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!356

No description provided.