// Nine scenes recreating the adviser portal happy path. // Pixel-fidelity to the codebase brief; data scrubbed to Bennett synthetic family. const { useState } = React; const S = window.SEED; // ===================================================================== // SCENE 1 — Adviser uploads source documents // ===================================================================== function Scene1Upload() { const bp = useBreakpoint(); const stack = bp !== 'desktop'; const docs = S.documents; const totalMB = (docs.reduce((a, d) => a + d.sizeBytes, 0) / 1024 / 1024).toFixed(1); return ( View history, Edit profile, ], }}>
{/* Client snapshot */}
Review due Risk profile: Growth 2 child dependants
{/* Upload card */}
AI extraction} style={{marginBottom:0}} />
{/* Drag zone */}
Drop files here, or browse
Or import from SharePoint · {S.firm.afsl} tenancy
{/* Files list */}
4 files queued · {totalMB} MB
{docs.map((d, i) => (
{d.name}
{(d.sizeBytes / 1024 / 1024).toFixed(1)} MB · {d.pages} pages
Ready
))}
Zero-retention · model pinned to claude-sonnet-4-6
Run extraction
{/* Footnote */}
What happens next. Files are virus-scanned by Defender for Storage, then sent in one batched call to Claude. Extraction takes 8–15 seconds. You'll review every value before anything reaches the client.
); } function DefList({ rows }) { const bp = useBreakpoint(); return (
{rows.map(([k, v], i) => (
0 ? 8 : 0 }}>{k}
{v}
 ))}
); } // ===================================================================== // SCENE 2 — Claude extracting (polling state) // ===================================================================== function Scene2Extracting() { const bp = useBreakpoint(); const stack = bp !== 'desktop'; const stage = 'extracting'; // queued, reading, extracting, building, done const stages = [ { id: 'queued', label: 'Queued', done: true, pct: 10 }, { id: 'reading', label: 'Reading documents', done: true, pct: 30 }, { id: 'extracting', label: 'Extracting details', done: false, pct: 65, active: true }, { id: 'building', label: 'Building form data', done: false, pct: 90 }, ]; const activePct = 65; return (
{/* Files being read */}
{S.documents.map((d, i) => (
{d.name}
{d.pages}p · {(d.sizeBytes/1024/1024).toFixed(1)}MB
))}
{/* Extraction progress */}
Extracting
Extracting details…
Reading prose and turning it into structured fields. The model returns JSON conforming to the fact-find schema.
{/* Progress bar */}
{/* Stage list */}
{stages.map((s, i) => (
0 ? `1px solid ${EPG.line}` : 'none', opacity: s.done || s.active ? 1 : 0.4, }}>
{s.done && }
{s.label}
{s.pct}%
))}
model: claude-sonnet-4-6 tool: extract_client est. cost: ~$0.08
); } // ===================================================================== // SCENE 3 — Extraction review (HERO — most detailed scene) // ===================================================================== function Scene3Review() { const bp = useBreakpoint(); const stack = bp !== 'desktop'; const [editingIncome, setEditingIncome] = useState(true); const [incomeValue, setIncomeValue] = useState('215000'); return ( Confirm, ] : [ Reject extraction, Confirm extraction, ], }}>
{/* LEFT — extraction sections */}
{/* Personal section (collapsed-ish, expanded by default) */} {/* Contact section */}
Collapsed for brevity.
 {/* Income & cashflow — the section with the LOW dot */} {/* LOW-CONFIDENCE row in edit mode */}
Salary income — Daniel
Bennett_SoA_2025.pdf · p3
{editingIncome ? (
$ setIncomeValue(e.target.value)} style={{ width: '100%', height: 36, padding: '0 12px 0 24px', border: `1.5px solid ${EPG.brand}`, borderRadius: EPG.radius, background: '#fff', fontFamily: EPG.sans, fontSize: 14, color: EPG.ink, outline: 'none', boxShadow: '0 0 0 3px rgba(29,85,99,0.12)', }} />
setEditingIncome(false)} icon="check">Save { setIncomeValue('195000'); setEditingIncome(false); }} icon="x">Cancel
Why low?  "Found on the 2025 SoA but contradicted by 2026 PAYG summary — chose the lower value."
) : ( )}
{/* Assets — collapsed */} {/* Debts — collapsed */} {/* Super — collapsed */} {/* Insurance — collapsed */}
{/* RIGHT — sidebar (sticky on desktop, inline below content on mobile/tablet) */}
// Confidence overview
5 low-confidence fields to check first — they cluster in section 4 (income).
// Source documents
{S.documents.map((d, i) => (
{d.name} p{d.pages}
))}
// Extraction metadata
MODEL
sonnet-4-6
LATENCY
11.4 s
TOKENS
21,319
COST
$0.08
Confirm extraction Reject extraction
); } function SectionAccordion({ title, subtitle, defaultOpen, warningCount, subFields, children }) { const [open, setOpen] = useState(defaultOpen); return (
{open && (
{children}
)}
); } function FieldRow({ label, value, confidence, source }) { const isLow = confidence === 'low'; return (
{label}
{value}
{source && ( {source} )}
); } // ===================================================================== // SCENE 4 — Adviser confirms; send-link dialog opens // ===================================================================== function Scene4Confirm() { const bp = useBreakpoint(); const stack = bp !== 'desktop'; const isMobile = bp === 'mobile'; return (
{/* Toast banner */}
Extraction confirmed. Draft submission sub-2104 created. audit · 3 fields changed · just now
{/* Dimmed page behind */}
Client snapshot
Upload new documents
{/* Modal — Send link */}
// Send for client confirmation

Send review link to Daniel Bennett

They'll get a magic link by email and a 6-digit SMS code to verify. No password, no app.

dashboard.advisory.example/form/9f3b7c2a1d8e
State change. Submission moves draft → sent. An email_sent audit row will be written.
Cancel Send link & SMS code
); } function Label({ children }) { return
{children}
; } function ReadOnlyField({ value, icon }) { return (
{icon && } {value}
); } // ===================================================================== // SCENE 5 — Client OTP entry // ===================================================================== function Scene5OTP() { const [code, setCode] = useState('428193'); const [trust, setTrust] = useState(true); return (

Enter your verification code

We sent a 6-digit code to +61 4** *** *678. It expires in 10 minutes.

setCode(e.target.value)} maxLength={6} inputMode="numeric" autoComplete="one-time-code" style={{ width: '100%', height: 56, padding: '0 14px', textAlign: 'center', border: `1.5px solid ${EPG.brand}`, borderRadius: EPG.radius, fontFamily: EPG.mono, fontSize: 28, fontWeight: 500, color: EPG.ink, letterSpacing: '0.4em', background: EPG.card, outline: 'none', boxShadow: '0 0 0 4px rgba(29,85,99,0.12)', }} /> Verify and continue
2 of 5 attempts
Sent on behalf of {S.firm.name} · {S.firm.afsl}
If you didn't expect this, ignore the email. Your link expires in 7 days.
); } // ===================================================================== // SCENE 6 — Client form (pre-filled, edits one value) // ===================================================================== function Scene6Form() { const bp = useBreakpoint(); const isMobile = bp === 'mobile'; return ( {/* Section stepper */}
04 of 10 · Income & cashflow 3 fields updated

Income & cashflow

We've filled in what we already know from your documents. Please check each field and update anything that's changed.

{/* Daniel's income — prefilled, unchanged after adviser correction */} {/* Anna's income — prefilled, unchanged */} {/* Gov benefits — MODIFIED by client (was $5,840 → now $0) */} {/* New goal — BLANK FILLED */} {/* Essential expenses — unchanged */} {/* Lifestyle expenses — unchanged */}
Surplus this year: {aud(215000 + 125000 - 0 - 78400 - 32100)} before tax, super and debt repayments.
{/* Navigation */}
Assets {!isMobile &&
Next: Debts
} Continue
); } function FormField({ label, value, state, hint }) { const s = { 'prefilled-unchanged': { bg: '#fff', bd: EPG.line, tone: null }, 'prefilled-modified': { bg: EPG.amberBg, bd: EPG.amber + '66', tone: 'warning', toneLabel: 'Modified' }, 'blank-filled': { bg: EPG.greenBg, bd: 'rgba(47,122,74,0.35)', tone: 'success', toneLabel: 'New' }, }[state]; return (
{s.tone && {s.toneLabel}}
{value}
{hint &&
{hint}
}
); } // ===================================================================== // SCENE 7 — Adviser cockpit (money audit + agenda) // ===================================================================== function Scene7Cockpit() { const bp = useBreakpoint(); const stack = bp !== 'desktop'; const isMobile = bp === 'mobile'; const money = { income: 340000, essential: 78400, lifestyle: 32100, surplus: 229500, assets: 1985500, liabilities: 722400, super_balance: 283000, investable: 70000, }; return ( Revert overrides, Send for signature, ], }}>
{/* MAIN COLUMN */}
{/* Money audit */}
Reviewed
{/* Agenda section */}
{/* RIGHT — scope + warnings + send (sticky on desktop only) */}
// Scope of advice
{[ { l: 'Cash flow management', c: true }, { l: 'Debt management', c: true }, { l: 'Risk management', c: false }, { l: 'Investment (incl. super)', c: true }, { l: 'Social security / Aged care', c: false }, { l: 'Estate planning', c: false }, { l: 'SMSF', c: false }, ].map((it, i) => ( ))}
// General warnings
All six warnings must be acknowledged before the fact-find can be sent for signature.
{[1,2,3,4,5,6].map(i => (
{i <= 5 ? '✓' : i}
))}
1 warning still to acknowledge.
// Pin & send
Send for e-signature
Confirming snapshots a pinned_view_model. Later override edits won't change what gets signed.
Confirm & send to Bennett
); } function Stat({ label, value, green, red, prominent }) { const color = green ? EPG.green : red ? EPG.red : EPG.ink; return (
{label}
{aud(value)}
); } function AgendaSection({ num, title, items, collapsed, tickedCount }) { const tickedNum = items ? items.filter(i => i.checked).length : null; return (
s{num}
{title}
{items ? `${tickedNum} of ${items.length} ticked` : tickedCount}
{!collapsed && items && (
{items.map(item => ( ))}
)}
); } function CheckRow({ label, checked, small, id }) { return ( ); } // ===================================================================== // SCENE 8 — E-signature (signer flow on PDF) // ===================================================================== function Scene8Signature() { const bp = useBreakpoint(); const isMobile = bp === 'mobile'; const isTablet = bp === 'tablet'; const stack = bp !== 'desktop'; return (
{/* Top strip */}
{!isMobile && (
Daniel Bennett signing on behalf of Bennett review
)}
{!isMobile && Download bundle} {isMobile ? '' : 'Decline'}
{/* Doc tabs */}
{[ { l: 'Fact Find', active: true, pages: '1–5' }, { l: 'Statement of Advice', active: false, pages: '6–18' }, { l: 'Fee Disclosure', active: false, pages: '19' }, { l: 'Payment Authority', active: false, pages: '20' }, ].map((t, i) => (
{t.l} p{t.pages}
))}
{/* Main viewer area */}
{/* Page thumbs — desktop only */} {!stack && (
{[1,2,3,4,5].map(p => (
{p === 3 && (
)}
p{p}
))}
)} {/* PDF canvas */}
{/* PDF page */}
{/* Faux PDF content */}
Bennett Family — Fact Find Confirmation
Financial Advisory Firm · AFSL ##### · 21 May 2026
Acknowledgement
{/* Signature field — FILLED */}
Daniel Bennett Signed
Signer: Daniel Bennett
21/05/2026
Date
{/* Signature field — UNFILLED for Anna, highlighted */}
Signer: Anna Bennett
—
Date
{/* Signer side panel — sidebar on desktop, full-width below PDF on stacked layouts */}
// Signers
// Progress
9 of 14 fields complete
Submit signed bundle
ETA s10 compliant.
Audit page is appended on submit.
); } function FakePdfPara({ short }) { const lines = short ? 2 : 4; const widths = ['96%','92%','98%','78%']; return (
{Array.from({ length: lines }).map((_, i) => (
))}
); } function SignerRow({ name, email, status, color }) { const isDone = status === 'signed'; return (
{name}
{email}
{isDone ? '✓ signed' : 'awaiting'}
); } // ===================================================================== // SCENE 9 — Audit log (demo ending) // ===================================================================== function Scene9Audit() { const bp = useBreakpoint(); const isMobile = bp === 'mobile'; const isTablet = bp === 'tablet'; const filterCols = isMobile ? 'repeat(2, 1fr)' : isTablet ? 'repeat(3, 1fr)' : 'repeat(5, 1fr) auto'; return ( Export CSV, ], }}> {/* Filters */}
Apply
Filter: entity_id = client/Bennett · 12 results · last 7 days
{/* Audit table */}
{S.auditChain.map((row, i) => { const isLast = i === S.auditChain.length - 1; return ( ); })}
Timestamp Actor Action Entity IP Metadata
{formatAest(row.timestamp)}
{relTime(row.offsetDays)}
{row.actorName}
 {row.action}
{row.entity}
{row.ip}
{Object.keys(row.meta).length} keys 
{JSON.stringify(row.meta, null, 2)}
Page 1 of 1 · 12 total · 50 per page
Prev Next
One vertical thread. Filter to a client and you see the entire story from extraction through signature, in order, on one page. A compliance review is a date range and a filter, not a forensic exercise.
); } function FilterField({ label, value, highlight }) { return (
{label}
{value}
); } function Th({ children, width }) { return ( {children} ); } function Td({ children }) { return {children}; } function ActorAvatar({ type, name }) { const initials = name.split(' ').map(p => p[0]).join('').slice(0,2); const bg = type === 'adviser' ? EPG.brand : type === 'client' ? EPG.gold : EPG.muted; return (
{initials}
); } function ActorChip({ type }) { return {type}; } function relTime(days) { if (days === 0) return 'just now'; if (days === 1) return 'yesterday'; return `${days}d ago`; } // ===================================================================== // EXPORT // ===================================================================== Object.assign(window, { Scene1Upload, Scene2Extracting, Scene3Review, Scene4Confirm, Scene5OTP, Scene6Form, Scene7Cockpit, Scene8Signature, Scene9Audit, });