Clarified vision, gap analysis, remedy plan, and full user story set with every click, every visible view, and every screen state described for the Nesto Worker Onboarding autonomous demo.
01 — Clarified Vision Statement
Vision Statement — Ratified April 2026
Nexus is an enterprise AI pipeline orchestration platform. Its demo proves the product to a prospect in a single browser tab.
The presenter clicks DEMO. The system runs autonomously. Each step of the UAE worker onboarding pipeline executes in sequence — and the viewer sees the system working: the actual worker submission form appears and fills itself with real data, the OCR status is displayed, the validation result is shown, and the HR Manager decision form opens and submits itself. Every node on the canvas turns green when its step completes. The demo ends with all government API calls dispatched and confirmed. Total elapsed time: under 45 seconds. No CLI. No code. No slides. The prospect is watching a real product process a real compliance workflow live.
The key misunderstanding that produced the current broken state: the demo was implemented as canvas rectangles turning green one by one. That is a monitoring dashboard. The requirement is a simulation of the system operating — each node with a user action must open that user's form (in the correct RBAC role design variant), visibly fill it with pre-seeded data as if a user is typing, then submit it. Only then does the canvas node go green. The distinction is the same as the difference between showing a car's speedometer increasing vs showing the car actually moving.
02 — Gap Analysis: Current State vs. Required
Component
Required
Current State
Gap
DEMO button
Single click triggers full demo
Present and functional
OK
Pipeline graph render
10 nodes appear on canvas before run starts
Working — engineNodesToCanvas normalizer in place
OK
Canvas node status animation
Nodes turn green sequentially as each step completes
Working — 450ms queue animation
OK
Worker Submission Form (Step 1)
ChameleonV2 form opens in a demo overlay. Fields animate in with pre-seeded values (Mohammed Al Rashidi, AE, passport AE-2943817, etc.). Submit button clicks itself. Form closes. Canvas node goes green.
Auto Mode Panel 1 (FORM INGEST) is present. Form fields animate in with typing simulation. Submit button clicks itself. Not wired to Nesto pipeline canvas nodes — runs as standalone demo sequence, not triggered by SSE node_done events.
PARTIAL
OCR Status Display (Step 3)
A panel appears showing extracted fields animating in: Passport Number confirmed, Name confirmed, Expiry 2029-03-01 — confidence 98%.
Auto Mode Panel 2 (DOCUMENT VERIFY) shows OCR + identity validation results with animated result rows. Expiry date and confidence score not displayed. Not wired to SSE node_done.
PARTIAL
Validation Result Display (Step 4)
Panel shows rule results: passport_not_expired PASS, medical_valid PASS, polo_required_if_ph PASS, fit_to_work PASS — all green checks.
Combined into Auto Mode Panel 2 (DOCUMENT VERIFY) with identity + blacklist checks. Nexus-specific rule names (passport_not_expired, polo_required_if_ph) not shown. Not a separate panel.
No HR Manager panel in auto mode. Auto Mode sequence goes directly from Profile Store to SMS. BL20 raised.
MISSING
SMS Notify Display (Step 8)
A mock SMS panel appears showing the outbound message text: “Your application has been approved. Ref: DEMO-XXXXXXXX. Nesto HR.”
Auto Mode Panel 4 (COMPLIANCE SMS) is present. Message addressed to Mohammed Al Rashidi, worker ID shown, delivery status displayed. Ref number format differs from spec (uses workerId not DEMO-XXXXXXXX).
Auto Mode Panel 5 (API CALLBACK) shows one API call to bayt.com only. MoHRE, eMigrate, and GDRFA forwarding not shown. BL21 raised for three-agency display.
PARTIAL
Demo overlay / auto mode
A full-screen or split-screen modal that hosts the active form or result panel while the canvas is visible in the background. Smooth open/close transitions.
Auto Mode is present in WORMWOOD_APP.html. 5-panel sequence implemented: Form Ingest → Document Verify → Profile Store → Compliance SMS → API Callback. Fade in/out, backdrop click closes, ESC key closes. Not yet wired to canvas SSE node_done events.
PARTIAL
Simulated typing / auto-fill animation
Fields appear to be filled character by character or field by field with a short delay, as if a user is entering data.
Implemented via _type(el, text, charDelay) helper in auto mode JS. Used in Panel 1 (form fields) and Panel 4 (SMS message). Panel 2/3/5 use animated result rows instead of typed input fields, which is appropriate.
OK
Demo reset
Second click on DEMO resets all nodes to idle, closes any open panels, and restarts from step 1.
Auto Mode clears and reopens on each DEMO click. Panel state is wiped via _clear() at start of each panel. Any running timers are cancelled via clearTimeout(_tid) on close. Canvas node reset is handled by existing runNestoDemo reset logic.
OK
03 — Remedy Plan
All work is self-contained in WORMWOOD_APP.html and the SSE hook in connectRunSSE. No new backend work is required — the engine already executes the pipeline and returns node results via SSE. The missing piece is entirely frontend: a demo auto mode layer that intercepts each node_done event and, before marking the canvas node green, opens the appropriate demo panel, runs the simulation, then closes it.
REM-01 — HIGH PRIORITY
Demo Auto Mode Layer — Overlay HTML/CSS
Add a full-width overlay panel (#demo-auto) positioned above the canvas. Hidden by default. When a node with a demo panel fires node_done, the auto mode opens, renders the panel, runs the simulation, then closes and returns control to the SSE queue. CSS: dark semi-transparent backdrop, centred content card, smooth 200ms fade in/out.
REM-02 — HIGH PRIORITY
Worker Submission Form Panel (form_submit node)
HTML form rendered inside the auto mode. Fields: First Name, Last Name, Nationality, Passport Number, Emirates ID, Job Title. Pre-seeded values from prefilled_data in node config. Fields animate in using a typeField() helper that sets each field's value character by character with 30ms per character delay. Submit button appears, waits 600ms, then “clicks” (button flashes). Auto Mode closes. Canvas form_submit node goes green.
REM-03 — HIGH PRIORITY
OCR Result Panel (ocr node)
Panel shows document type header (“PASSPORT SCAN — AE-2943817”), then extracted fields animate in one by one: Passport Number, Full Name, Nationality, Expiry Date, confidence score (98%). No form — read-only result panel. Auto-closes after 2.5s.
REM-04 — HIGH PRIORITY
Validation Result Panel (validate node)
Panel shows “NEXUS COMPLIANCE CHECK” header. Rules animate in one by one with green check marks: passport_not_expired PASS, medical_valid PASS, polo_required_if_ph PASS, all_docs_present PASS, fit_to_work PASS. Final result: PASS banner. Auto-closes after 2.5s.
REM-05 — HIGH PRIORITY
HR Manager Decision Form Panel (hr_gate node)
Auto Mode opens with Reviewer variant form. Header: “HR MANAGER REVIEW — Mohammed Al Rashidi”. Shows: validation summary (all PASS), document list (Passport confirmed, Medical confirmed, POLO n/a — AE national). Decision dropdown animates to “APPROVED”. Note field types: “All documents verified. Worker cleared for onboarding.”. Submit button flashes and clicks. Auto Mode closes. Node goes green.
REM-06 — MEDIUM PRIORITY
SMS Notify Panel (notify_sms node)
Small panel appears (mobile phone silhouette or simple card). Shows outbound SMS: “Your application has been approved. Ref: DEMO-XXXXXXXX. Nesto HR.” Auto-closes after 1.5s.
REM-07 — MEDIUM PRIORITY
Government API Forward Panel (mohre_fwd, eid_fwd, gdrfa_fwd nodes)
Compact panel shows API call log: endpoint URL, payload summary, response 200 OK, reference ID. All three forward nodes show their panel in rapid succession (0.8s each). Auto-closes.
REM-08 — LOW PRIORITY
Demo Auto Mode Queue Integration
The existing _animQueue is extended: instead of just calling _applyNodeRunState, each node_done event checks a DEMO_PANELS map. If a panel exists for that node ID, it opens the auto mode, runs the panel, waits for it to complete, then marks the node green. Nodes without panels (store_worker, store_decision) just mark green immediately with a 300ms delay.
04 — User Stories
US-DEMO-00
Demo Start
Demo Presenter
As a demo presenter, I want to click a single button and watch the entire pipeline run autonomously, so that the prospect sees the product working without any setup or CLI.
Clicks
Open WORMWOOD_APP.html in browser (Docker engine running on port 8010).
Canvas loads. Toolbar visible: SAVE / NEW / RUN / DEMO / KEY. Status bar shows OFFLINE (engine SSE not yet connected — acceptable).
Click DEMO button (cyan, top-right toolbar).
View after click
Status bar updates: “DEMO: key set — loading orgs...”. Org dropdown populates and selects “Nesto”. Pipeline dropdown populates and selects “Nesto — Worker Onboarding Full (D3) [active]”. 10 pipeline nodes appear on canvas: Worker Submission Form (FORM), Passport + Visa OCR (OCR), Document Validation (VALIDATE), Store Worker Record (STORE), HR Manager Approval (GATE), Store HR Decision (STORE), Notify Worker by SMS (SMS), MoHRE Registration (HTTP), Emirates ID Forward (HTTP), GDRFA Visa Check (HTTP). All status dots dark (idle). Status bar: “DEMO: graph loaded (10 nodes) — starting run in 1s...”.
US-DEMO-01
Step 1 — Worker Submission Form
Worker (Submitter role)
As a viewer, I want to see the worker's submission form open with data being entered field by field, so that I understand this step is a real form the worker would fill in.
Demo auto mode overlay opens with a smooth fade. Header: WORKER SUBMISSION FORM. Sub-header: “Submitter Role — Mohammed Al Rashidi”.
Fields appear on form: First Name, Last Name, Nationality, Passport Number, Emirates ID, Job Title.
Auto-fill animation types values into each field sequentially: “Mohammed” → “Al Rashidi” → “AE” → “AE-2943817” → “784-1985-1234567-1” → “Site Engineer”.
All fields filled. A green SUBMIT button at the bottom pulses and visually clicks (brief press animation).
Auto Mode closes with fade. Canvas form_submit status dot turns green.
Auto Mode view during this step
Dark overlay behind. Centred card (480px wide): Nexus logo top-left, “ChameleonV2 Form” label, node title. Form fields with labels above and values appearing character by character. Nationality shown as flag + ISO code “AE — United Arab Emirates”. Bottom: cyan SUBMIT button. After submit: “Submitted — advancing to OCR...” flash, then fade out.
US-DEMO-02
Step 2 — Passport + Visa OCR
System — Atlas OCR Node
As a viewer, I want to see extracted document fields appear as if the OCR is reading the passport live, so that I understand the system automates document extraction.
Extracted fields animate in one by one with a scanning-line visual effect: Passport Number: AE-2943817 — Name: Mohammed Al Rashidi — Nationality: AE — Expiry: 2029-03-01 — Confidence: 98%.
All fields confirmed with green ticks. Confidence badge: 98% (green).
Auto Mode auto-closes after 2.5s. Canvas ocr node turns green.
Auto Mode view during this step
Dark card. Left: document icon (passport silhouette) with animated scan line sweeping down. Right: extracted fields appearing one by one with a brief “scanning...” delay before each value materialises. Confidence meter fills from 0 to 98%.
US-DEMO-03
Step 3 — Nexus Compliance Validation
System — Nexus Validate Node
As a viewer, I want to see each compliance rule checked and confirmed, so that I understand the platform enforces regulatory requirements automatically.
Rules animate in sequentially, each with a brief processing spinner then a green check: passport_not_expired PASS — medical_valid PASS — polo_required_if_ph PASS (n/a: AE national) — all_docs_present PASS — fit_to_work PASS.
Final result banner: VALIDATION PASSED — 5/5 rules in green.
Auto-closes after 2.5s. Canvas validate node turns green.
Auto Mode view during this step
Dark card. Rule list, each row: rule ID in monospace, status spinner then green check icon, rule description. Bottom: result banner with green border. Nexus logo or rule engine label top-right.
US-DEMO-04
Steps 4 & 6 — Store Nodes (silent)
System — deltaPrism Store Node
As a viewer, I want to see store nodes complete quickly without interruption, so that the demo maintains pace for background system steps.
What happens (automated)
store_workernode_done fires. No auto mode panel opens.
Canvas store_worker node turns green immediately. Status bar: “node_done: store_worker [ok]”.
Same for store_decision.
US-DEMO-05
Step 5 — HR Manager Decision Form (Human Gate)
HR Manager (Reviewer role)
As a viewer, I want to see the HR Manager's decision form open with the full review context and watch it get approved autonomously, so that I understand the RBAC gate functionality and what a real HR Manager would see.
Auto Mode opens with a distinct purple accent. Header: HR MANAGER REVIEW. Sub: “Worker: Mohammed Al Rashidi — Role: HR Manager”.
Review panel renders: Validation Summary section (5 rules, all green), Document List (Passport: confirmed / Medical: confirmed / POLO: not required — AE national).
Decision section appears. Dropdown field labelled “Decision”: animates to select “APPROVED”.
Note field types: “All documents verified. Worker cleared for onboarding.”
Green SUBMIT DECISION button pulses and clicks.
Auto Mode closes. Canvas hr_gate node turns green.
Auto Mode view during this step
Wider card (600px). Purple accent border-left. Three sections separated by thin dividers: (1) Validation Summary — 5 rule rows, all green checks. (2) Documents — three document rows with status icons. (3) Decision — dropdown + note textarea + submit button. All auto-filled with animation. Role label visible: “HR MANAGER” badge top-right in purple.
US-DEMO-06
Step 7 — Worker SMS Notification
System — SMS Notify Node
As a viewer, I want to see the outbound SMS message content, so that I understand the notification step sends a real message to the worker.
What happens (automated)
notify_smsnode_done fires.
Auto Mode opens. Header: SMS NOTIFICATION SENT.
Phone-style card shows message bubble: “Your application has been approved. Ref: DEMO-XXXXXXXX. Nesto HR.”
To: +971-XXXX-XXXX. Status: DELIVERED (mock).
Auto-closes after 1.5s. Canvas notify_sms node turns green.
US-DEMO-07
Step 8 — Government API Forwarding (×3)
System — HttpForward Nodes
As a viewer, I want to see each government API call dispatched and confirmed, so that I understand the pipeline automates downstream registration.
What happens (automated)
mohre_fwd node fires. Auto Mode opens briefly: “MoHRE REGISTRATION — POST https://mock-mohre.nesto.ae/api/register — 200 OK — Ref: MOHRE-DEMO-2026-001”. Auto-closes after 0.8s. Node goes green.
eid_fwd fires. Same format: “Emirates ID Forward — 200 OK — Ref: EID-DEMO-2026-001”. Auto-closes after 0.8s. Node goes green.
gdrfa_fwd fires. “GDRFA Visa Check — 200 OK — Ref: GDRFA-DEMO-2026-001”. Auto-closes after 0.8s. Node goes green.
US-DEMO-08
Demo Complete
Demo Presenter
As a demo presenter, I want to see a clear completion state on canvas, so that the prospect sees the pipeline ran successfully end-to-end.
Final state
All 10 canvas nodes have green glowing status dots. Status bar shows “run_done: complete”. PKT counter shows 10. Status indicator in toolbar shows “DONE”. A brief completion banner may appear: “Pipeline complete — 10/10 nodes — 0 errors”. Canvas is fully interactive — presenter can click any node to inspect its config. Run log available via LOGS button.
05 — Implementation Plan
ID
Task
Effort
Dependencies
IMP-01
Add #demo-auto overlay HTML + CSS to WORMWOOD_APP.html. Fade in/out transitions. Backdrop blur. Card container.
1h
None
IMP-02
Implement typeField(el, value, delay) helper that sets an input’s value character-by-character with requestAnimationFrame.
30m
None
IMP-03
Implement DEMO_PANELS map: node_id → async panel function. Wire into _queueNodeAnim so panel runs before canvas dot turns green.
1h
IMP-01
IMP-04
Build Worker Submission Form panel (REM-02): form HTML, prefilled_data from node config, typeField animation, submit click simulation.