Live demo

The demo is at lending-agent-oversight.vercel.app. No sign-up. No backend. Three principal-firm skins, two persona views, ten scripted steps.

Two modes

The demo runs in two modes, switched from the chrome’s mode toggle.

• Scripted mode (default). The walkthrough overlay leads the visitor through the supervision loop in ten steps. Each step has a CTA. Walking off the script puts the overlay into a paused state. Coming back into the path resumes it.
• Free-explore mode. The walkthrough overlay disappears. All routes are reachable from the navigation. The persona and skin switchers behave normally. Use this once you’ve seen the script and want to dig in.

The skin switcher

Three principal firms ship with the demo. Each defines its own brand colour, FCA register number, regulatory rubric, and AR fixture set.

Skin	Vertical	Rubric	FRN	ARs	Brand
Heritage Mortgage Network	Residential mortgage broking	MCOB	412803	124	Indigo
Crown GI Collective	General insurance broking	ICOBS	528471	87	Forest emerald
Pinpoint Credit Network	Consumer credit broking	CONC	631920	198	Plum

Skin selection is read from the URL (?skin=heritage and so on), falls back to localStorage, then to the Heritage default. Switching skins re-renders fixtures and rubric. The platform under all three is the same.

The persona switcher

Top-right of the demo chrome. A segmented control: Principal | AR. Click to flip.

The first persona switch in scripted mode opens a confirmation modal: “You are now the AR. Same skin, same network, different shoes.” Subsequent switches in free-explore are toast-only. Subliminal cue on the AR side: the top strip is taller (96px vs 80px), and the greeting typography switches to Fraunces. Different shoes.

The ten-step scripted tour

flowchart LR
    S1[1. Marketing landing]
    S2[2. Principal home]
    S3[3. AR register]
    S4[4. AR detail]
    S5[5. AR home]
    S6[6. MI return]
    S7[7. Breach report]
    S8[8. Triage queue]
    S9[9. File review]
    S10[10. Annual packet]

    S1 --> S2 --> S3 --> S4 --> S5
    S5 --> S6 --> S7 --> S8 --> S9 --> S10

    classDef principal fill:#312E81,color:#fff,stroke:#312E81
    classDef ar fill:#f59e0b,color:#000,stroke:#f59e0b
    class S1,S2,S3,S4,S8,S9,S10 principal
    class S5,S6,S7 ar

Steps in order:

1. Welcome at /. The marketing landing. Click “See it in action” to enter the demo.
2. Read the network at a glance at /demo/principal. KPI tiles, top-10 risk table, 90-day breach heatmap. The picture you can’t get from a spreadsheet.
3. Filter to the critical band at /demo/principal/register. 124 ARs (on Heritage). Click the Critical chip in the filter bar, then click into the top row.
4. The deep view of one AR at /demo/principal/register/[arId]. Risk gauge, permissions, breach history, file reviews, MI returns, conduct events. The persona switcher pulses, prompting the flip.
5. Now you’re the AR at /demo/ar. Required actions, own risk score, comms from the principal.
6. Quarterly MI return at /demo/ar/mi. Volumes, complaints, breaches, conduct events. Submit.
7. File a breach at /demo/ar/breaches/new. The AR side of SUP 15. Pick a type, self-assess severity, add facts. Submit. The clock starts.
8. Back on the principal side at /demo/principal/breaches. The breach you just filed sits at the top of the triage queue with a live SUP 15 countdown.
9. Run a file review at /demo/principal/reviews. Sampling has surfaced a case. Score the rubric, close the review.
10. Sign off the annual packet at /demo/principal/annual-reviews/[arId]. Risk trajectory, breaches, file reviews, MI trend, conduct events, director sign-off. Loop closed.

The scripted state lives in Zustand and persists across reloads. Closing the tab and coming back puts you on the same step.

Free-explore moves to try

Once the script has played:

• Switch to Crown GI Collective and rerun the AR register. Notice how the rubric on file reviews swaps to ICOBS and the breach taxonomy stays consistent across the platform.
• Switch to Pinpoint Credit Network and look at the heatmap density. 198 ARs is the largest fixture set; the 90-day window is busier.
• Stay on Heritage and open a non-Pemberton AR to see a clean record state.
• Open the breach triage queue with the SUP 15 timer in the immediate (1 business day) window to see the destructive-tinted countdown.
• Run a file review on an AR with a clean breach record but an overdue last review, and watch the time-since-review input dominate the recomputed risk score.

Reduced motion

The demo respects prefers-reduced-motion. Hero cycling, gauge fills, sparkline draws, walkthrough pulses, and whileInView reveals all collapse to instant transitions. Surface mounts, modal entrances, and persona-switch confirmations remain (legibility-essential), but skip their animation duration.

Reading the URL

The demo encodes state in the URL where it can:

• ?skin=heritage|crown|pinpoint selects the skin.
• ?mode=scripted|explore selects the mode.
• The persona is on the path itself: /demo/principal/... vs /demo/ar/....

Bookmarkable. Shareable. Replay a specific point in the tour by sending the URL.