Annotated wireframes for all primary canvas states. Each mockup shows the layout, component placement, and UI behaviour for a specific interaction scenario. Rendered at approximately 1:1.5 scale relative to a 1440px viewport.
Initial state on load when no ?org= or ?pipeline= URL params are present
State: Engine not yet contacted (OFFLINE). App and Pipeline dropdowns show placeholder text. SAVE, RUN, and DELETE buttons are inactive. Canvas area is blank with a faint dot grid. The DEMO button is hidden.
After selecting ARC org and nesto-worker-onboard-full pipeline — graph rendered on canvas
State: ARC app selected; Nesto Worker Onboard Full pipeline loaded (6 nodes, 6 edges). SSE shows LIVE. SAVE and RUN are active (orange/green). DEMO button visible (purple). All nodes and bezier edges visible within the frame. Branch from AI Transform splits to Approval Gate (up) and Write deltaPrism (down), both converging on Send Email.
Double-clicking the "Approval Gate" node opens the Class Panel on the right
State: Approval Gate node double-clicked. Node renders with orange selection border. Class Panel slides in from the right showing 5 editable properties (label, gate type, assignee role, timeout, on-reject route) and a rule reference link with "EDIT RULE" button. Crumb bar extends to show selected node name.
After clicking RUN — run log panel open, nodes show live execution status
State: Pipeline is executing. "Submission Form" and "OCR Document" nodes show green DONE indicators. "AI Transform" node shows amber RUNNING state. Downstream nodes are dim/pending. Run log panel shows timestamped SSE events. RUN button is dimmed (cannot re-run while executing).
After clicking PALETTE in the toolbar — node type palette visible on the right
State: PALETTE button active (orange border). Node palette panel slides in from the right listing all 18 node types grouped into 5 categories: Forms, Intelligence, Storage, Integration, Logic. Each item shows the category badge and node name. Drag any item to the canvas to place it.
Per NEXUS_DEMO_UX_REQUIREMENTS.md §4 — form nodes are colour-coded by the role that interacts with them
State: RBAC colour coding active (per NEXUS_DEMO_UX_REQUIREMENTS.md §4). Worker-facing form nodes are blue, HR-facing gates are purple, finance approval nodes are amber, automated/system nodes are green. Legend displayed bottom-left of canvas. Edge colour matches the upstream node role. Neutral intelligence nodes (OCR, AI Transform) retain the standard grey border.
Canonical names for all mockup UI elements
| Zone | Element | ID / Selector | Behaviour |
|---|---|---|---|
| Topbar | HUB button | #btn-hub | Navigates to NEXUS_APP.html |
| Topbar | Level tabs | #level-tabs .tb-tab | Switch canvas between L1–L4 |
| Topbar | App selector | #sel-org | Calls GET /orgs, triggers loadPipelines() |
| Topbar | Pipeline selector | #sel-pipeline | Calls loadPipelineGraph(); supports ?pipeline= URL param |
| Topbar | SAVE button | #btn-save | PUT /pipelines/{id} with current LEVELS[lv] graph |
| Topbar | RUN button | #btn-run | POST /pipelines/{id}/run; opens run log panel |
| Topbar | DEMO button | #btn-demo | Hidden by CSS; shown only when pipeline slug is in DEMO_SLUGS |
| Toolbar | SSE indicator | #sse-lbl | Shows LIVE / OFFLINE based on EventSource state |
| Toolbar | ZOOM +/− | #btn-zi, #btn-zo | Multiply zoom by 1.2 or 1/1.2 |
| Toolbar | RESET | #btn-reset | zoom=1, pan={60,40}, applyXform() |
| Toolbar | Zoom label | #zoom-label | Displays current zoom as integer % |
| Crumb bar | Crumb root | #crumb-bar | Shows WORMWOOD APP; extends with pipeline / node name |
| Canvas | Node element | .bp-node[data-nid] | Draggable; mousedown on body starts drag; dblclick opens config panel |
| Canvas | Pin (input) | .pin.pin-in | Connection target; mouseup here completes edge |
| Canvas | Pin (output) | .pin.pin-out | Connection source; mousedown here starts edge drag |
| Canvas | SVG edge layer | #edge-svg | renderEdges() draws bezier paths per LEVELS[lv].edges |
| Side panel | Class Panel | #class-panel | Slides in on node dblclick; shows node properties + rule ref |
| Side panel | Run Log | #run-panel | Slides in on RUN or LOG button; streams SSE events |
| Side panel | Node Palette | #node-palette | Slides in on PALETTE button; lists all node types for drag-to-canvas |