{meta.title}

{activeNode >= NODES.length - 1 ? '✓ run complete' : `executing · ${NODES[activeNode]?.name}`}

execution log · scrubbed of PII

{LOG.slice(0, activeNode + 1).map(([ts, body, k], i) => (

[{ts}] {body}

))} {payload && (

{payload.lang} {payload.label}

{payload.body}

)}

); } // ════════════════════════════════════════════════════════════════════ // DEMO 2 · agentic AI — narration-driven worker highlights // ════════════════════════════════════════════════════════════════════ function DemoAgents({ meta, focus, jumpTo }) { const initialQueue = [ { id:1, src:'support · email', body:'Refund request · order #18472' }, { id:2, src:'support · chat', body:'How do I cancel my subscription?' }, { id:3, src:'support · webform', body:'Login fails after password reset' }, { id:4, src:'support · email', body:'Wrong size — exchange for L' }, { id:5, src:'support · chat', body:'Tracking number not updating' }, ]; const WORKERS = ['classify','enrich','draft','dispatch']; const PANEL_TO_SEG = { queue: 0, classify: 1, enrich: 2, draft: 3, dispatch: 4, done: 5 }; const [queue, setQueue] = useStateD(initialQueue); const [busy, setBusy] = useStateD(new Set()); const [done, setDone] = useStateD([]); const counter = useRefD(initialQueue.length); // Light up the worker the narrator is currently describing const focusedWorker = focus && focus.worker; const focusedPanel = focus && focus.panel; // Per-worker classifier preview — surfaces what the agent is actually // deciding right now. Without it, the four pills read as abstract "AI". const cls = (meta.classifications && focusedWorker && meta.classifications[focusedWorker]) || null; const currentTicket = queue[0] || initialQueue[0]; useEffectD(() => { let cancelled = false; function tick() { if (cancelled) return; setQueue(q => { if (q.length === 0) return q; const next = q[0]; const rest = q.slice(1); WORKERS.forEach((w, i) => { setTimeout(() => !cancelled && setBusy(b => { const n = new Set(b); n.add(w); return n; }), i * 350); setTimeout(() => !cancelled && setBusy(b => { const n = new Set(b); n.delete(w); return n; }), i * 350 + 700); }); setTimeout(() => { if (cancelled) return; setDone(d => [{ ...next, status:'auto-resolved' }, ...d].slice(0, 4)); counter.current += 1; const fresh = [...initialQueue][counter.current % initialQueue.length]; setQueue(qq => qq.length < 4 ? [...qq, { ...fresh, id: counter.current * 10 + Math.random() }] : qq); }, WORKERS.length * 350 + 600); return rest; }); } tick(); const id = setInterval(tick, 3400); return () => { cancelled = true; clearInterval(id); }; }, []); return (

{meta.title}

{done.length} resolved · {queue.length} queued

jumpTo(PANEL_TO_SEG.queue)}>

inbound queue{queue.length}

{queue.map(t => (

{t.src}{t.body}

))}

{cls && currentTicket && (

{focusedWorker} {currentTicket.src}

“{currentTicket.body}”

{Object.entries(cls).map(([k, v]) => (

{k} {typeof v === 'number' && v < 1 ? v.toFixed(2) : String(v)}

))}

)}

{WORKERS.map(w => (

jumpTo(PANEL_TO_SEG[w])}>

step

{w}

))}

{busy.size > 0 ? '↻ executing…' : 'awaiting next ticket'}

jumpTo(PANEL_TO_SEG.done)}>

resolved{counter.current - queue.length}

{done.map((t, i) => (

✓ {t.status}{t.body}

))}

); } // ════════════════════════════════════════════════════════════════════ // DEMO 3 · CRM pipeline — focused column glows // ════════════════════════════════════════════════════════════════════ function DemoCRM({ meta, focus, jumpTo }) { const NAMES = ['Sophie K.','Marcus L.','Aisha P.','Lukas R.','Diego M.','Wren T.','Bea C.','Jade O.','Noah W.','Pia G.']; const VALUES = ['$ 1.8M','$ 2.4M','$ 980k','$ 1.2M','$ 1.6M','$ 2.1M','$ 760k','$ 1.4M','$ 2.9M','$ 1.05M']; const initials = (n) => n.split(' ').map(w => w[0]).join('').slice(0, 2); function mkLead(i, col) { return { id: i + '-' + Math.random().toString(36).slice(2, 7), name: NAMES[i % NAMES.length], val: VALUES[i % VALUES.length], // AI fit score, 60–98. Stays stable across moves so the lead // "keeps its identity" as it walks across the kanban. score: 60 + (Math.floor(Math.random() * 39)), col }; } const [cols, setCols] = useStateD(() => ([ [mkLead(0, 0), mkLead(1, 0), mkLead(2, 0)], [mkLead(3, 1), mkLead(4, 1), mkLead(5, 1)], [mkLead(6, 2), mkLead(7, 2)], [mkLead(8, 3), mkLead(9, 3), mkLead(0, 3)], ])); const counter = useRefD(10); useEffectD(() => { function tick() { setCols(prev => { const next = prev.map(c => [...c]); const movable = next.slice(0, 3).map((c, i) => c.length > 0 ? i : -1).filter(i => i >= 0); if (movable.length) { const from = movable[Math.floor(Math.random() * movable.length)]; const lead = next[from].shift(); if (lead) { lead.col = from + 1; next[from + 1] = [lead, ...next[from + 1]].slice(0, 4); } } if (next[0].length < 3) next[0].push(mkLead(counter.current++, 0)); if (next[3].length > 4) next[3] = next[3].slice(0, 4); return next; }); } const id = setInterval(tick, 1800); return () => clearInterval(id); }, []); const TITLES = [ { n:'01 · NEW', k:'inbound' }, { n:'02 · SCORED', k:'enriched' }, { n:'03 · VIEWING', k:'booked' }, { n:'04 · CLOSED', k:'won this Q' }, ]; const focusedCol = focus && typeof focus.col === 'number' ? focus.col : null; return (

{meta.title}

auto-enriched · auto-routed · auto-booked ▲ +4 this wk

{cols.map((leads, i) => (

jumpTo(i)}>

{TITLES[i].n}{leads.length}

{leads.map(lead => (

{initials(lead.name)}

{lead.name} = 80 ? 'hot' : (lead.score >= 70 ? 'warm' : 'cool'))}>{lead.score}

{TITLES[i].k} {lead.val}

))}

); } // ════════════════════════════════════════════════════════════════════ // DEMO 4 · Chatbot // ════════════════════════════════════════════════════════════════════ function DemoChat({ meta, focus, jumpTo }) { const SCRIPT = [ { role:'bot', text:"Hi — I'm Nex. Ask me about pricing, what we build, or book a 15-min map call." }, { role:'user', text:"Do you handle real-estate workflows?" }, { role:'bot', text:"Yes — REA enquiry → AI score → CRM → SMS confirmation. Typical run: 11.2s. Want the live demo or pricing?" }, { role:'user', text:"What's it cost?" }, { role:'bot', text:"From A$2,400 one-off (Spark) — ships in ~2 weeks, you own the code. Or A$1,800/mo on Flow for ongoing builds." }, { role:'user', text:"Book me a 15-min map." }, { role:'bot', text:"On it — paid scoping call ($50 USD, fully credited if you build). Pick a time?", quicks: true }, ]; const PANEL_TO_SEG = { session: 0, chat: 1, book: 2, handoff: 3 }; const focusedPanel = focus && focus.panel; const [msgs, setMsgs] = useStateD([]); const [typing, setTyping] = useStateD(false); useEffectD(() => { let cancelled = false; let i = 0; function next() { if (cancelled) return; if (i >= SCRIPT.length) { setTimeout(() => { if (!cancelled) { setMsgs([]); i = 0; setTimeout(next, 600); } }, 5000); return; } const s = SCRIPT[i]; if (s.role === 'bot') { setTyping(true); setTimeout(() => { if (cancelled) return; setTyping(false); setMsgs(m => [...m, s]); i++; setTimeout(next, 900); }, 950 + s.text.length * 8); } else { setTimeout(() => { if (cancelled) return; setMsgs(m => [...m, s]); i++; setTimeout(next, 700); }, 1100); } } setTimeout(next, 400); return () => { cancelled = true; }; }, []); const last = msgs[msgs.length - 1]; return (

{meta.title}

grounded in your pricing · docs · case studies

jumpTo(PANEL_TO_SEG.chat)}>

Nexconcierge · grounded

live

{msgs.map((m, i) => { // Source chips appear under bot replies — the visible audit // trail for what the chatbot was grounded in. We index by the // running count of bot messages, not the global index, so // chips stay correctly associated as the script replays. const botIdx = msgs.slice(0, i + 1).filter(x => x.role === 'bot').length - 1; const srcs = m.role === 'bot' && meta.sources && meta.sources[botIdx]; return (

{m.text}

{srcs && (

grounded in {srcs.map((s, j) => {s})}

)}

); })} {typing && (

)}

{last && last.quicks && (

)}

jumpTo(PANEL_TO_SEG.session)}>
Session

grounded.match · 0.91 confidence

intentbook · pricing

verticalreal estate

price tierspark · A$2.4k

sourcespricing · case · faq

jumpTo(PANEL_TO_SEG.handoff)}>
Hand-off

to human when intent · book or quote ≥ A$10k

channelslack · #sales

latency< 1 biz day

{last && last.quicks && (
jumpTo(PANEL_TO_SEG.book)}>
Booking initialised

→ Cal.com hold placed

slotTue 10:00 AEST

paymentStripe · $50 USD

)}

); } // ════════════════════════════════════════════════════════════════════ // DEMO 5 · Document AI (invoice OCR → Xero) — scan progress follows // narration; clicking a panel jumps to its segment // ════════════════════════════════════════════════════════════════════ function DemoDoc({ meta, focus, jumpTo }) { const ROWS = 9; const FIELDS = [ { key:'invoice no.', val:'INV-2847', conf:'0.99', group:'header-fields' }, { key:'vendor', val:'Office Group Pty Ltd', conf:'0.98', group:'header-fields' }, { key:'date', val:'12 / 15 / 26', conf:'0.99', group:'header-fields' }, { key:'subtotal', val:'$ 350.00', conf:'0.99', group:'totals' }, { key:'tax · gst', val:'$ 39.40', conf:'0.99', group:'totals' }, { key:'total', val:'$ 389.40', conf:'0.99', group:'totals' }, ]; // Map narration field-target to a normalised scan progress (0..1). const PROG = { 'header': 0.18, 'header-fields': 0.42, 'totals': 0.78, 'posted': 0.98, 'approval': 0.98 }; const PANEL_TO_SEG = { 'header': 0, 'header-fields': 1, 'totals': 2, 'posted': 3, 'approval': 4 }; const focusedField = focus && focus.field; const targetT = focusedField && PROG[focusedField] != null ? PROG[focusedField] : 0; const [t, setT] = useStateD(0); // Tween t toward targetT for a smooth scan beam motion. useEffectD(() => { let raf; function frame() { setT(prev => { const delta = targetT - prev; if (Math.abs(delta) < 0.002) return targetT; return prev + delta * 0.06; }); raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [targetT]); const scanProgress = Math.min(t / 0.85, 1); const scanTop = `${6 + scanProgress * 86}%`; const allDone = t > 0.9; return (

{meta.title}
{allDone ? 'posted to xero · ✓ approved < $500' : 'scanning…'}

jumpTo(PANEL_TO_SEG['header'])}>

Office Group Pty Ltd

Supplier ID 41824753921 · Service account

INV-2847

12 Dec 2026

Bill to

NexFlow Pty Ltd · support@nex-flow.io

itemqtyunittotal
{[ {n:'Ergonomic mesh chair · X4 Pro', q:2, u:'$ 129.00', t:'$ 258.00'}, {n:'Standing desk converter', q:1, u:'$ 68.00', t:'$ 68.00'}, {n:'Cable management tray', q:3, u:'$ 8.00', t:'$ 24.00'}, ].map((li, i) => { const rowAt = 0.30 + (i / 4) * 0.32; return (
rowAt ? 'scanned' : '')}> {li.n} {li.q} {li.u} {li.t}
); })}
0.72 ? 'scanned' : '')}> subtotal$ 350.00

0.80 ? 'scanned' : '')}> GST · 10%$ 39.40

0.85 ? 'scanned' : '')}> total due$ 389.40

{/* Field-highlight box: a faint indigo rectangle that tracks the scan beam, calling out which region is currently being captured. Hidden once the run completes. */} {t < 0.92 && (
)}

extracted fields {allDone ? '✓ verified' : 'live'}
{FIELDS.map((f, i) => { const visible = (f.group === 'header-fields' && t >= PROG['header-fields'] - 0.10) || (f.group === 'totals' && t >= PROG['totals'] - 0.10); const done = (f.group === 'header-fields' && t >= PROG['header-fields']) || (f.group === 'totals' && t >= PROG['totals']); const isFxd = focusedField === f.group; return (
jumpTo(PANEL_TO_SEG[f.group])}>

{f.key}

{f.val}

{f.conf}
); })}
jumpTo(PANEL_TO_SEG['posted'])}>
✓

Posted to Xero · auto-approved

amount < $500 threshold · Slack #finance notified

); } // ════════════════════════════════════════════════════════════════════ // DEMO 6 · Reporting / dashboard — focused panel glows // ════════════════════════════════════════════════════════════════════ function DemoReport({ meta, focus, jumpTo }) { const KPIS = [ { k:'revenue · MTD', d:'+12.4%', base:48720, scale:120 }, { k:'orders · today', d:'+4', base:147, scale:6 }, { k:'leads · this wk', d:'+22%', base:84, scale:3 }, { k:'NPS · last 100', d:'+3', base:72, scale:1 }, ]; const PANEL_TO_SEG = { kpis: 0, bars: 2, gauge: 3 }; const focusedPanel = focus && focus.panel; const [tick, setTick] = useStateD(0); const [bars, setBars] = useStateD(() => Array.from({ length: 14 }, () => Math.random() * 0.5 + 0.3)); const [gv, setGv] = useStateD(0.74); useEffectD(() => { const id = setInterval(() => { setTick(t => t + 1); setBars(prev => prev.map((v) => Math.max(0.15, Math.min(1, v + (Math.random() - 0.45) * 0.18)))); setGv(g => Math.max(0.4, Math.min(0.96, g + (Math.random() - 0.5) * 0.06))); }, 1100); return () => clearInterval(id); }, []); const C = 2 * Math.PI * 64; const offset = C - C * gv; return (

{meta.title}
delivered to inbox · slack · pdf

jumpTo(PANEL_TO_SEG.kpis)}> {KPIS.map((kpi, ki) => { const v = kpi.base + (tick % 7) * kpi.scale * 0.6; const formatted = (kpi.k.startsWith('revenue') ? '$ ' : '') + Math.round(v).toLocaleString(); // Synthesise a 14-point sparkline per KPI, seeded by index so each // KPI has its own stable trend curve. The last point follows // `tick` so the line breathes in sync with the rest of the demo. const pts = Array.from({length: 14}, (_, j) => { const phase = (j / 13) * Math.PI * 2 + ki; return 0.5 + Math.sin(phase + tick * 0.4) * 0.18 + Math.sin(phase * 0.6 + ki) * 0.12; }); const w = 78, h = 22; const path = pts.map((p, j) => { const x = (j / (pts.length - 1)) * w; const y = h - p * h; return (j === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1); }).join(' '); const last = pts[pts.length - 1]; return (
{kpi.k}
{formatted}
▲ {kpi.d}
); })}

jumpTo(PANEL_TO_SEG.bars)}>
orders · 14 dayslive

{bars.map((v, i) => (
))}

last sync · just now ▲ 18% wow source · stripe · ga · xero

jumpTo(PANEL_TO_SEG.gauge)}>
automation coveragetarget 80%

{Math.round(gv * 100)}%

of ops automated

); } // ── Mount helper ──────────────────────────────────────────────────── function DemoRoot() { const [open, setOpen] = useStateD(null); const [opts, setOpts] = useStateD({}); const close = () => { setOpen(null); setOpts({}); }; useEffectD(() => { window.NF_ServiceDemos = { openDemo: (id, nextOpts) => { setOpen(id); setOpts(nextOpts || {}); }, closeDemo: close, }; return () => { delete window.NF_ServiceDemos; }; }, []); if (!open) return null; return ; } window.NF_DemoRoot = DemoRoot;