Workflows UX: touch the graph, trust the list
The v0.6.0 backend is right; the surface isn't. This page draws the intended experience — edit by touching nodes on the canvas, one list that tells the truth everywhere, runs you can watch — so we can measure the shipped UI against it.
Three confusions, three causes
| You saw | Why it happens | The fix, drawn below | |
|---|---|---|---|
| Sidebar says no workflows; the panel lists 3 | The sidebar kept phase-1 semantics (schedules you own); it was never taught about governed workflows. Two lists, two definitions of “workflow.” | One data source feeds both — same rows, same counts, same states (§03) | bug |
| Palette click adds a box… then nothing responds | Selection lives in a side list (“Pick a node below”), not on the canvas; nodes aren't clickable, draggable, or deletable in place. | Direct manipulation: click to select, drag to move, drag ports to wire, ⌫ to delete (§02) | gap |
| No way to modify or remove what you added | Config edits exist but only through that side list; delete is buried; edges are a from/to form. | Selected node opens its config in the inspector; a mini-toolbar on the node carries delete/duplicate (§02) | gap |
Edit by touching the graph
The canvas is the editor. Everything you can do happens where you're looking: the four numbered callouts are the whole interaction model. The palette drags in; the inspector always shows the selected node's config; Publish stays put.
Palette · drag onto canvas
Click still works (adds at a free spot). Drag gives placement. Same six kinds as NEP-0006 — the palette never grows nodes the server would refuse.
Inspector · agent turn “draft”
The inspector is the same form the side list opens today — it just follows canvas selection instead of a separate list. Errors from Publish land on the offending node.
One list, one truth
Sidebar and panel read the same rows: governed workflows and legacy schedules together, each with its state, its shape, its owner, and its last run. The sidebar is the compact projection of exactly this — never a different query.
Sidebar · same rows 4
Count matches the panel. A legacy schedule appears here too, tagged — one definition of “workflow” everywhere.
Governed workflows · 3
Legacy schedules · 1
Watching it happen — and acting from where you stand
A run lights the same graph up node by node. When it parks, the gate node carries the approval — and the inspector is where you decide, without leaving the page.
Steps
Step outputs are one click away — what the branch saw, what the agent wrote, why a step failed.
Inspector · approval
Same durable approval row as the inbox and WhatsApp card — this is a third door to the identical decision, not a new mechanism.
Creating, and the empty canvas that teaches
Creation stays inline — name and seat live in the editor header, not a separate form screen. The empty canvas says what to do next, so the first minute teaches the whole model.
Details
Non-admins see seats they occupy; admins see every human seat. An agent-owned workflow is authored by the agent itself through workflow_upsert (§06).
When an agent proposes, the card is the decision
Agent authoring already works end to end. What the vision adds: the card links to a rendered graph preview — the same canvas, read-only — so the approver judges the picture, not a text summary alone.
And the door to this flow lives in the section itself: a Build with agent button beside "Import from n8n" opens an in-section assistant panel — a slide-over hosting the same chat surface used everywhere else, with the instance's designated builder agent (a setting, never a hardcoded agent) pre-framed with the workflow you're looking at. The canvas stays visible while the agent works; its proposals still arrive as approval cards.
Where the live surface stands against this page
| Surface | Live today (v0.6.0) | This page's vision | Distance |
|---|---|---|---|
| List coherence | Sidebar = schedules only; panel = governed + legacy; counts disagree | One query feeds both; unified rows with state, shape chip, owner, last run | bug — fix first |
| Canvas selection | Select via side list; canvas nodes inert | Click node → selection ring + inspector; Esc deselects | small |
| Delete / duplicate | Buried; not on the node | Mini-toolbar on selection; ⌫ key; edges cleaned up with the node | small |
| Move nodes | Auto-layout only | Drag to move; positions persist as editor metadata (additive ui block in the graph doc — NEP v1.4, semantics untouched) |
medium |
| Connect edges | from/to/label form | Drag port → port; branch wires auto-take the next free label (true, then false), click a label to flip it; form stays as fallback | medium |
| Run detail | Live overlay + step list ship; approval decided elsewhere | Approve/Deny in the run inspector; step outputs one click away | small |
| Creation | Inline name+seat ship; empty canvas is silent | Guided empty state; port-first hint | small |
| Branch edge tones | true/false edge colors illegible / inconsistent (owner-reported on live) | Distinct, theme-legible tones per label; label text readable on the canvas ground | fix in C |
| Drag affordance | Read-only canvas ignores drag attempts silently; edit-mode drag feel unpolished (owner-reported) | Smooth edit-mode drag; read-only canvas answers a drag attempt with an "Edit to rearrange" hint | fix in C |
| Build with agent | Agent authoring exists (workflow_upsert, gated) but has no entry point from the Workflows section beyond n8n import | "Build with agent" opens an in-section assistant slide-over (reusing the app's chat surface) with the configurable builder agent, workflow context pre-framed; sidebar "+" opens the create flow like every other section | small · C |
| Approval card | Forgery-proofed text card ships | + read-only canvas preview link | small |
Shippable slices
A · Truth & touch
~4–6 sessions- One list — sidebar reads the same rows as the panel (kills the bug)
- Canvas selection + node mini-toolbar (delete, duplicate)
- Guided empty canvas on create
B · Direct manipulation
~6–9 sessions- Drag to move, positions persisted (NEP v1.4 additive
uiblock) - Drag-a-wire port-to-port connect; branch label on drop
- Palette drag-in with placement
C · Decide in place
~2–4 sessions- Approve/Deny in the run inspector (same durable row)
- Step-output drawer; card → canvas preview link
- Build with agent in-section assistant slide-over (configurable builder agent)
- Sidebar "+" wired to the create flow (section-aware header add)
- Branch edge tones fixed; drag polish + read-only drag hint