Breach workflow
The breach workflow is two surfaces: the triage queue and the breach detail. The countdown is the centrepiece because the FCA deadline is the only thing that actually matters.
Live: lending-agent-oversight.vercel.app/demo/principal/breaches.
The triage queue
Section titled “The triage queue”Renders at /demo/principal/breaches. A filterable list of every open breach the principal firm is aware of.
What’s on the screen
Section titled “What’s on the screen”- Header with
Breach triage, count chip, and aFiled by AR | Filed by principalsegmented control. - Filter bar: severity (low / moderate / serious / critical), category (conduct, financial-crime, data-protection, complaints-handling, advice-suitability, disclosure, training-competence, other), status (received, notify-pending, notified, resolved, dismissed), notification window (immediate, 10 business days, 30 calendar days, reasonable period).
- Sort: by SUP 15 countdown ascending (default), date received descending, severity descending.
Each row is a card with:
- Severity badge (colour-coded against the family’s severity scale).
- Category chip and status chip.
- “Filed by AR” or “Filed by principal” pill.
- Title (one line, truncated).
- AR linked into AR detail.
- The SUP 15 countdown as a compact 3-node track: Received | Must notify by | Notified. The middle node ticks down in days and hours. Past the deadline, the card tints destructive.
- Date received, relative.
Click any card to open breach detail.
States
Section titled “States”- Empty. “No open breaches. Nothing to triage.”
- Filtered to nothing. “No breaches match. [Reset filters].”
- Loading. Server-rendered list, no skeleton.
The breach detail
Section titled “The breach detail”Renders at /demo/principal/breaches/[id].
What’s on the screen
Section titled “What’s on the screen”Top to bottom:
- Back link
← Breach triage queue. - Meta row: severity badge, category chip, status chip, “Filed by AR” or “Filed by principal”.
- Title in Fraunces, 24-30px medium.
- AR row: “Raised against [trading name] · FRN …”.
SUP 15 countdown timer
Section titled “SUP 15 countdown timer”A horizontal 3-node track with connecting line:
- Received (filled, with timestamp).
- Must notify by (highlighted, with the date and a live countdown). Past the deadline this node turns destructive.
- Notified (empty until recorded).
The countdown text below the track reads, for example, 2 days 4 hours remaining or Overdue by 1 day 7 hours. SUP 15 categories map to four windows: immediate (1 business day), 10 business days, 30 calendar days, and a reasonable period. The window applied to this breach is shown as a subtitle.
Body, two-column
Section titled “Body, two-column”Left column:
- Description card: the narrative facts of the breach.
- Customer impact card: a chip in one of
No customer impact,Potential impact,Actual, low impact,Actual, high impactwith severity-keyed tinting. - Root-cause taxonomy card: chips for any of training-gap, system-failure, process-omission, intentional-misconduct, third-party-error, documentation-quality, supervision-failure, control-bypass.
- Timeline card: ordered events with timestamps. “Reported by AR”, “Acknowledged by principal”, “FCA notification due”, “FCA notified” (when present).
Right column:
-
Take action card (amber-soft tinted, only while there’s a pending FCA notification):
Record FCA notificationprimary button. In the demo, clicking writes anotifiedFcaAttimestamp into the Zustand store, the timer fills, and the breach status flips. In production, this button requires step-up authentication and writes an audit-chain entry that cannot be undone. -
FCA notification recorded card (emerald, replaces the action card once the notification is filed): confirms
SUP 15 obligation discharged. Audit chain entry written. -
Reporting reference card: the breach id (mono tabular-nums), the SUP 15.3 category, the severity, and the assigned notification window (
1 business dayfor significant,30 daysfor material,Below thresholdotherwise). -
Next steps card: a four-step ordered checklist that auto-checks itself based on the breach’s status.
- File the SUP 15 notification —
Step-up auth required in production. - Request remediation evidence from the AR —
Triggers an AR-side required action. - Capture root-cause analysis —
Feeds the AR's risk-score breach input. - Compliance officer sign-off and close —
Audit-chain entry, breach moves to history.
Each step shows a filled emerald check when its state is reached and the label strikes through and dims. The list anchors the eye after the SUP 15 timer.
- File the SUP 15 notification —
Audit-chain integration
Section titled “Audit-chain integration”Every action on this page (acknowledge, record FCA notification, reassign, resolve, dismiss) writes an AuditEvent in the production design. The demo writes the same shape into the Zustand store and surfaces it on the timeline. The production design hashes each event into a per-tenant chain so the record cannot be silently rewritten.
States
Section titled “States”- Loading. Server-rendered with fixture; the countdown ticks once client-side.
- Action-pending (recording FCA notification). Primary button shows a spinner for 600ms, then transitions through a 200ms scale-up confirmation tick, then settles with the timer node filled.
- Already notified. Primary button replaces with
FCA notified at [timestamp]in muted text. - Past deadline. Countdown node tints destructive. A small banner above the timer reads “This breach is past the FCA notification deadline. Record the notification and explain the delay in the timeline.”
- Not found. If the breach id is not in the dataset or the live store, render a centred “Breach not found” with a link back to the queue.
- Error. Error boundary on the action panel; the breach facts render.
Responsive behaviour
Section titled “Responsive behaviour”- Mobile (< 640px). Triage queue rows become single-column cards with the SUP 15 track wrapping under the title. Detail page collapses to single-column; action panel moves below the body.
- Tablet (640-1024px). Two-column at narrow widths. Action panel widens.
- Desktop (> 1024px). Full layout. Detail max-width 1280px.
Components
Section titled “Components”components/principal/breach-triage-queue.tsxcomponents/principal/breach-detail.tsxcomponents/principal/breach-severity-badge.tsxcomponents/principal/fca-countdown-timer.tsx
How this connects to the rest of the demo
Section titled “How this connects to the rest of the demo”- The
Filed by ARrows include breaches the visitor created via the AR-side breach report form during the scripted walkthrough. The newly-filed breach lands at the top of the queue with the timer running from now. - The AR linked at the top of the breach detail routes to AR detail on the Breaches tab.
- The KPI tile “Breaches awaiting FCA notification” on the principal home deep-links into this queue with a pre-filtered status.
- For the regulatory mapping of SUP 15 categories to notification windows, see Regulatory · SUP 15 timing.