Fairgo · Wave N investor demo polish

Shared references

Tokens, motion, iconography, video placeholder

showcase.css

Showcase layer tokens (gradients, hero radii, depth surfaces, motion primitives) + component patterns. Source-of-truth for Phase C globals.css port.

REFERENCE

Iconography (lucide-react)

20+ icons across 5 metaphor groups — product modules, case lifecycle, voice + AI, adviser/admin, trust + transparency.

COMPONENT

VideoPlaceholder

Reusable inline player skeleton. 16:9, halo, gradient overlay, caption, optional duration pill. Used on 5 demo surfaces.

The 11 demo surfaces

Investor demo flow — landing → ship

Step 01

Public landing

Hero VideoPlaceholder beside H1, animated count-up on stats, lucide icons. No layout changes — your existing landing look-and-feel stays.

Step 02

Pricing

Premium tier cards with subtle gradient borders, recommended-tier badge, tinted trust-block footer with three reassurance icons.

Step 03

Login

Split-pane: animated brand panel + quote chip on the left, polished form with lucide leading icons + focus rings on the right.

Step 04

Consumer dashboard

VoiceCard hero with gradient halo, inline VideoPlaceholder under the mic, animated greeting, status-coloured My-cases rows, hover-lift toolkit modules.

Step 05

Resolve intake

Premium intake card with 3-step progress (Speak → Refine → Generate), AI-thinking animation during SSE, polished waveform.

Step 06

Letter result

Success scale-in (no confetti), gradient header strip with case short_id, inline VideoPlaceholder "What happens next", citation cards with provenance pills.

Step 07

Consumer case detail

Timeline with iconography per event type, draft preview on a depth-tinted surface, gradient submit CTA, polished CaseShortIdLabel.

Step 08

Adviser cases queue

Workload chip becomes a small dial visualisation, queue rows with richer iconography, accent-gradient eyebrow on the "Available to claim" panel.

Step 09

Adviser case detail

Case context panel on tinted depth surface, inline VideoPlaceholder "How to handle this case in 60s", lucide draft toolbar, polished notes thread.

Step 10

Tenant-admin dashboard

KPI tiles with subtle gradient borders + animated count-up, lucide quick-actions row, gradient hero strip with greeting + tenant name.

Step 11

Tenant-admin reports

Sparkline cards with gradient stroke, hover-tip values, gradient legend chips, inline VideoPlaceholder "Reading your dashboard in 60s" above.

Wave O — Shield, Insights & multi-agent submission

Extends the demo with the multi-agent capability of submitting drafted complaint letters direct to institutions, plus Shield (debt/hardship) and Insights (CDR-fed evidence)

Three modules, one coherent system. Insights produces the evidence; Shield turns it into hardship/debt action; the multi-agent submission spine sends the letter direct to the institution with a signed Authority to Act, watches the IDR clock, and helps escalate to AFCA if the bank doesn't respond. 16 new mocks. Source plan: projects/product/fairgo-shield-insights-multi-agent-submission-plan.md. Three design docs: multi-agent submission · Shield · Insights.

Multi-agent submission spine — direct send, IDR clock, AFCA escalation

Step 12

Multi-agent live trace (consumer)

Live trace card driven by the named-agent SSE stream. Three states: Working / Paused / Done. Smoothed/optimistic progress, named-agent emoji chips, no DAG, no token counts.

Step 13

Adviser inspector pane

LangSmith-style log groups. Six agent rows with collapsed details, expanded only for retried/failed. Tokens + timing in mono. Drawer previews are abstracted/redacted — never raw prompts.

Step 14

Send-to-institution gate

Single-page 3-panel storyboard for the consumer's final send authorisation: review letter → sign Authority to Act → confirm recipient + send. The literal Jane Smith via FairGo <cases+ABC123@fairgo.me> sender is shown.

Step 15

Submission tracker

USPS-style timeline with you-are-here pulse. Three stacked states demonstrate the canonical IDR colour rule: green when comfortably within the window, amber when nearing deadline (AFCA prompt fades in), red ONLY when overdue.

Step 16

Adviser send surface

Approval card with safety-summary chips. Two-mode CTA: "Approve & release send gate to Jane" (primary) or "Approve & release manual forward" (fallback). Adviser approves and releases — never dispatches.

Step 17

AFCA escalation packet

Pre-filled AFCA Connect form preview + 6-item evidence bundle + lodge guidance. Red used ONLY in the top overdue context strip; the rest is calm and instructional.

Shield — debt & hardship action

Step 18

Shield hardship intake

4-step wizard. Voice mic hero (mirrors #04). 📋 Story Checker fills the form as you speak. CDR pre-fill chip when transactions are connected. Vulnerability detector passed-state shown.

Step 19

Section 72 letter

Hardship variation request to Westpac. Distinct NCC §72 marker style (brand teal) vs AFCA marker style (ok green). HardshipDeadlineBadge tone-paused — clock starts on send, never before.

Step 20

Debt-collection red flags

Two-lane detector. Lane A: contact incidents grouped by severity (unlawful → improper → borderline → ok) with per-item Add to complaint toggles. Lane B: statute-barred debt detector with per-item "Create response letter" CTAs.

Step 21

Action plan + vulnerability handoff

Sticky-top vulnerability support card (interrupt-not-modal) — minimised state shown alongside full state. Five crisis-line tiles. 2-step confirm before "I'm OK to continue". Action plan with deadline pills.

Insights — CDR-fed evidence, comparison, PDS analysis

Step 22

The 11-step demo, refined.