// RISK SUB-PLATFORMS — enriched implementations that override the 25-line
// stubs defined in RiskOpps.jsx. Loaded AFTER RiskOpps so the later
// window.Rk* assignments win.
//
// Each sub-platform gets:
// - KPI strip (3–5 headline metrics)
// - Chart / heatmap / distribution panel where the data supports it
// - Filterable/sortable table with empty-state fallback
// - Action row (Export, New, filter chips)
// - Telemetry hook on mount
//
// Coverage (14 of 25):
// Treatment — RkAppetite, RkControls, RkInsurance
// Indicators — RkKRI, RkIncidents, RkCyber, RkRegWatch
// Quant — RkTornado, RkVaR, RkReserves, RkStress
// Reporting — RkPortfolio, RkMaturity
// Governance — RkVendors, RkAttorneyProfiles
//
// The remaining stubs keep working (RkTriggers, RkPriority, RkBowTie,
// RkCommittee, RkReporter, RkEthicalWalls, RkClientRatings, RkSettlementTree,
// RkTreatments, RkMitigationEffect) because RiskOpps defined them first.
(function () {
const { useState, useMemo, useEffect } = React;
const T = window.ArbiterTokens;
const rk = window.rk;
const Icons = window.Icons || {};
const A = window.Arbiter || {};
// ── shared helpers ──────────────────────────────────────────────────────
const fmtMoney = n => n == null ? '—' :
'$' + (n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' :
n >= 1e3 ? (n / 1e3).toFixed(0) + 'K' : String(n));
const trackView = (id) => useEffect(() => { A.track?.('risk.subplatform.view', { id }); }, [id]);
// KPI strip — Bloomberg density, Apple elegance
const Kpi = ({ label, value, hint, color, right }) => (
{ e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(10,22,40,0.08), 0 0 0 1px var(--color-border-medium)'; }}
onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = ''; }}>
{label}
{value}
{right && {right}}
{hint &&
{hint}
}
{children}
);
const Card = ({ title, right, children, pad = true }) => (
{title}{right}
{children}
);
const TH = ({ children, w, r }) => (
{children} |
);
const TD = ({ children, mono, r, c, clamp }) => (
{children} |
);
const Pill = ({ children, color, strong }) => (
{children}
);
// Horizontal bar comparing current vs. threshold/target.
const BarMeter = ({ value, max, color, warn }) => {
const pct = Math.min(100, Math.max(0, (value / max) * 100));
const over = value > max;
const overColor = over ? (warn || '#C23030') : color;
return (
);
};
// Sparkline — n-point trend line
const Sparkline = ({ points, color = '#6E7D9E', w = 64, h = 18 }) => {
if (!points?.length) return null;
const min = Math.min(...points), max = Math.max(...points);
const span = max - min || 1;
const path = points.map((p, i) =>
`${i === 0 ? 'M' : 'L'} ${(i / (points.length - 1)) * w} ${h - ((p - min) / span) * h}`
).join(' ');
return (
);
};
// Stat distribution bar — counts by category
const Distribution = ({ counts, total, colors }) => (
{Object.entries(counts).map(([k, v]) => (
))}
{setSearch && (
setSearch(e.target.value)}
style={{ height: 28, border: `1px solid ${T.color.border.light}`,
borderRadius: 6, padding: '0 10px', fontSize: 12, fontFamily: T.font.family,
background: T.color.bg.card, color: T.color.text.primary, width: 200 }} />
)}
{filters}
{extra}
{rows && A.ExportButton && React.createElement(A.ExportButton, { rows, filename })}
{title}
;
// ════════════════════════════════════════════════════════════════════════
// TREATMENT — Appetite
// ════════════════════════════════════════════════════════════════════════
function RkAppetite() {
trackView('appetite');
const s = window.useRiskStore(['risk.updated', 'appetite.checked']);
const rows = s.appetiteThresholds;
const breach = rows.filter(r => r.status === 'breach').length;
const atLimit = rows.filter(r => r.status === 'at-limit').length;
const within = rows.filter(r => r.status === 'within').length;
const maxExposure = rows.reduce((a, r) => a + r.maxLoss, 0);
return (
{breach} breach{breach === 1 ? '' : 'es'}}>
{rows.map(a => (
{a.category}
target {a.target}
a.tolerance ? '#C23030' : T.color.text.secondary }}>
current {a.currentAvg} / tolerance {a.tolerance}
{fmtMoney(a.maxLoss)}
{a.status}
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// TREATMENT — Controls
// ════════════════════════════════════════════════════════════════════════
function RkControls() {
trackView('controls');
const s = window.useRiskStore(['control.tested']);
const [q, setQ] = useState('');
const [result, setResult] = useState('all');
const filtered = s.controlTests.filter(c =>
(result === 'all' || c.result === result) &&
(q === '' || (c.control + c.owner + c.riskId).toLowerCase().includes(q.toLowerCase()))
);
const effective = s.controlTests.filter(c => c.result === 'effective').length;
const partial = s.controlTests.filter(c => c.result === 'partial').length;
const ineffective = s.controlTests.filter(c => c.result === 'ineffective').length;
const effectiveness = Math.round((effective / s.controlTests.length) * 100);
const chip = (v, label) => (
);
return (
}>
{chip('all', 'All')}{chip('effective', 'Effective')}{chip('partial', 'Partial')}{chip('ineffective', 'Ineffective')}
} />
{filtered.length === 0 ? :
| ID | Control | Risk | Last tested | Next | Result | Owner | Findings |
|---|
{filtered.map(c => (
| {c.id} |
{c.control} |
{c.riskId} |
{c.lastTested} |
{c.nextTest} |
{c.result} |
{c.owner} |
{c.findings || '—'} |
))}
}
);
}
// ════════════════════════════════════════════════════════════════════════
// TREATMENT — Insurance
// ════════════════════════════════════════════════════════════════════════
function RkInsurance() {
trackView('insurance');
const s = window.useRiskStore(['insurance.noticed']);
const rows = s.insurancePolicies;
const totalLimit = rows.reduce((a, p) => a + p.limit, 0);
const totalPremium = rows.reduce((a, p) => a + p.annualPremium, 0);
const totalRetention = rows.reduce((a, p) => a + p.retention, 0);
const byType = rows.reduce((a, p) => ({ ...a, [p.type]: (a[p.type] || 0) + p.limit }), {});
const today = new Date('2026-04-23');
const expiringSoon = rows.filter(p => {
const d = new Date(p.expires); return (d - today) / 86400000 < 180;
}).length;
return (
| Carrier | Type | Limit | Retention | Premium | Expires | Risks |
{rows.map(p => (
| {p.carrier} |
{p.type} |
{fmtMoney(p.limit)} |
{fmtMoney(p.retention)} |
{fmtMoney(p.annualPremium)} |
{p.expires} |
{(p.coveredRisks || []).join(', ') || '—'} |
))}
{Object.entries(byType).sort((a,b)=>b[1]-a[1]).map(([type, lim]) => (
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// INDICATORS — KRI
// ════════════════════════════════════════════════════════════════════════
function RkKRI() {
trackView('kri');
const s = window.useRiskStore(['kri.checked', 'risk.updated']);
const rows = s.kriIndicators;
const breached = rows.filter(k => k.current > k.threshold);
const rising = rows.filter(k => k.trend === 'rising');
// synthetic 7-point history for sparkline
const synthHistory = (k) => Array.from({ length: 7 }, (_, i) => {
const trend = k.trend === 'rising' ? i * 0.06 : k.trend === 'declining' ? -i * 0.06 : 0;
const noise = Math.sin(i * 1.3 + k.id.length) * 0.03;
return k.current * (1 - trend + noise);
});
return (
r.related)).size} hint="unique risks tracked by KRIs" />
{rows.map(k => {
const over = k.current > k.threshold;
return (
{k.name}
{trendArrow(k.trend)}
{k.current}
/ {k.threshold}
{k.window} window
{k.related.length ? k.related.slice(0, 2).join(', ') + (k.related.length > 2 ? '…' : '') : '—'}
);
})}
);
}
// ════════════════════════════════════════════════════════════════════════
// INDICATORS — Incidents
// ════════════════════════════════════════════════════════════════════════
function RkIncidents() {
trackView('incidents');
const s = window.useRiskStore(['incident.logged']);
const [severity, setSeverity] = useState('all');
const rows = s.incidents.filter(i => severity === 'all' || i.severity === severity);
const nearMiss = s.incidents.filter(i => i.type === 'near-miss').length;
const incident = s.incidents.filter(i => i.type === 'incident').length;
const byRoot = s.incidents.reduce((a, i) => ({ ...a, [i.rootCause]: (a[i.rootCause] || 0) + 1 }), {});
const chip = (v, label) => (
);
return (
i.resolved).length} color="#1B7A4A" />
i.lessons).length} hint="continuous improvement inputs" />
{chip('all','All')}{chip('high','High')}{chip('medium','Medium')}{chip('low','Low')}
} />
{rows.length === 0 ?
:
| ID | Date | Type | Severity | Description | Risk | Lessons |
|---|
{rows.map(i => (
| {i.id} |
{i.date} |
{i.type} |
{i.severity} |
{i.description} |
{i.relatedRisk || '—'} |
{i.lessons || '—'} |
))}
}
{Object.entries(byRoot).sort((a,b)=>b[1]-a[1]).map(([root, n]) => (
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// INDICATORS — Cyber
// ════════════════════════════════════════════════════════════════════════
function RkCyber() {
trackView('cyber');
const s = window.useRiskStore();
const rows = s.cyberRegister;
const high = rows.filter(c => c.exposure === 'high').length;
const totalBreach = rows.reduce((a, c) => a + c.breachScore, 0);
const today = new Date('2026-04-23');
const stalePentest = rows.filter(c => (today - new Date(c.lastPenTest)) / 86400000 > 180).length;
return (
| Asset | Class | Vendor | Last pen-test | Exposure | Score | Mitigations |
|---|
{rows.map(c => (
| {c.asset} |
{c.classification} |
{c.vendor} |
{c.lastPenTest} |
{c.exposure} |
= 6 ? '#C23030' : c.breachScore >= 4 ? '#D97706' : '#1B7A4A' }}>{c.breachScore} |
{c.mitigations.join(', ')} |
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// INDICATORS — Regulatory Watch
// ════════════════════════════════════════════════════════════════════════
function RkRegWatch() {
trackView('regwatch');
const s = window.useRiskStore();
const rows = s.regulatoryWatch;
const today = new Date('2026-04-23');
const withDays = rows.map(r => ({ ...r, daysOut: Math.ceil((new Date(r.effective) - today) / 86400000) }))
.sort((a, b) => a.daysOut - b.daysOut);
const high = rows.filter(r => r.impact === 'high').length;
const soon = withDays.filter(r => r.daysOut > 0 && r.daysOut < 90).length;
return (
r.jurisdiction)).size} />
{withDays.map(r => (
{r.daysOut < 0 ? `${-r.daysOut}d past` : `${r.daysOut}d out`}
{r.rule}
effective {r.effective} · {r.area} · matters: {(r.matters || []).join(', ') || 'none'}
{r.impact}
{r.jurisdiction}
{r.status}
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// QUANT — Tornado (sensitivity)
// ════════════════════════════════════════════════════════════════════════
function RkTornado() {
trackView('tornado');
const s = window.useRiskStore();
const rows = [...s.sensitivityFactors].sort((a, b) => b.range - a.range);
const maxRange = Math.max(...rows.map(r => r.range));
const base = rows.reduce((a, r) => a + (r.low + r.high) / 2, 0) / rows.length;
return (
a + r.range, 0))} />
{rows.map(r => {
const span = (r.high - r.low);
const pct = (span / maxRange) * 100;
return (
{r.factor}
{fmtMoney(r.low)} → {fmtMoney(r.high)}
);
})}
);
}
// ════════════════════════════════════════════════════════════════════════
// QUANT — VaR / CVaR
// ════════════════════════════════════════════════════════════════════════
function RkVaR() {
trackView('var');
const s = window.useRiskStore();
const v = s.varResults;
return (
{/* crude bell + tail visualization */}
);
}
// ════════════════════════════════════════════════════════════════════════
// QUANT — Reserves (ASC 450)
// ════════════════════════════════════════════════════════════════════════
function RkReserves() {
trackView('reserves');
const s = window.useRiskStore();
const rows = s.reserves || [];
const total = rows.reduce((a, r) => a + (r.accrued || 0), 0);
const disclosed = rows.filter(r => r.disclosure === 'disclosed').length;
if (!rows.length) return ;
return (
| Matter | Classification | Accrued | Range low | Range high | Disclosure | As of |
|---|
{rows.map(r => (
| {r.matter} |
{r.classification} |
{fmtMoney(r.accrued)} |
{fmtMoney(r.low)} |
{fmtMoney(r.high)} |
{r.disclosure} |
{r.asOf || '—'} |
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// QUANT — Stress Tests
// ════════════════════════════════════════════════════════════════════════
function RkStress() {
trackView('stress');
const s = window.useRiskStore();
const rows = s.stressTests || [];
if (!rows.length) return ;
const maxImpact = Math.max(...rows.map(r => r.impact || 0));
return (
a+(r.probability||0),0) / rows.length * 100).toFixed(0) + '%'} />
{rows.map(r => (
{r.scenario}
{fmtMoney(r.impact)}
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// REPORTING — Portfolio
// ════════════════════════════════════════════════════════════════════════
function RkPortfolio() {
trackView('portfolio');
const s = window.useRiskStore(['risk.updated']);
const rows = s.clientPortfolios;
const totalLoss = rows.reduce((a, r) => a + r.expectedLoss, 0);
const highConc = rows.filter(r => r.concentration === 'high').length;
const maxScore = Math.max(...rows.map(r => r.aggregateScore));
return (
a + r.activeRisks, 0)} />
r.relationshipScore != null).reduce((a, r) => a + r.relationshipScore, 0) / rows.filter(r => r.relationshipScore != null).length).toFixed(1)} hint="1–10 partner survey" />
| Client | Matters | Active risks | Score | Expected loss | Concentration | Relationship |
|---|
{[...rows].sort((a,b)=>b.aggregateScore-a.aggregateScore).map(c => (
| {c.client} |
{c.matters} |
{c.activeRisks} |
60 ? '#C23030' : T.color.text.primary, minWidth: 32 }}>{c.aggregateScore}
60 ? '#C23030' : '#3B82F6'} />
|
{fmtMoney(c.expectedLoss)} |
{c.concentration} |
{c.relationshipScore ?? '—'} |
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// REPORTING — ERM Maturity
// ════════════════════════════════════════════════════════════════════════
function RkMaturity() {
trackView('maturity');
const s = window.useRiskStore();
const rows = s.ermMaturity;
const avg = rows.reduce((a, r) => a + r.current, 0) / rows.length;
const targetAvg = rows.reduce((a, r) => a + r.target, 0) / rows.length;
const gaps = rows.filter(r => r.current < r.target).length;
return (
{rows.map(r => {
const gap = r.target - r.current;
return (
{r.dimension}
{r.framework}
0 ? '#D97706' : '#1B7A4A', borderRadius: 7 }} />
{r.gap &&
gap — {r.gap}
}
0 ? '#D97706' : '#1B7A4A' }}>{r.current} / {r.target}
);
})}
v.status === 'active').length} color="#1B7A4A" />
| Vendor | Type | Specialty | Rating | Engagements | Last retained | Status | Open issues |
|---|
{rows.map(v => (
| {v.name} |
{v.type} |
{v.specialty} |
{stars(v.rating)}
{v.rating}
|
{v.engagements} |
{v.lastRetained} |
{v.status} |
{v.risks.join(', ') || '—'} |
))}
);
}
// ════════════════════════════════════════════════════════════════════════
// GOVERNANCE — Attorney Profiles
// ════════════════════════════════════════════════════════════════════════
function RkAttorneyProfiles() {
trackView('attorneys');
const s = window.useRiskStore();
const rows = s.attorneyProfiles;
const overUtil = rows.filter(a => a.utilization > 100).length;
const cleOut = rows.filter(a => !a.cleSuffiencies).length;
const malpractice = rows.reduce((a, r) => a + r.malpractice, 0);
const avgWin = (rows.filter(r => r.winRate != null).reduce((a, r) => a + r.winRate, 0) / rows.filter(r => r.winRate != null).length).toFixed(0);
return (
| Attorney | Role | Utilization | Realization | Win rate | CLE | Cyber training | Complaints |
|---|
{rows.map(a => {
const overU = a.utilization > 100;
return (
| {a.name} |
{a.role} |
|
|
{a.winRate ?? '—'}{a.winRate != null && '%'} |
{a.cleSuffiencies ? 'current' : 'deficient'} |
{a.cyberTraining} |
{a.complaints} |
);
})}
);
}
// ── Override exports (RiskOpps assigned first; we win on second assignment)
Object.assign(window, {
RkAppetite, RkControls, RkInsurance,
RkKRI, RkIncidents, RkCyber, RkRegWatch,
RkTornado, RkVaR, RkReserves, RkStress,
RkPortfolio, RkMaturity,
RkVendors, RkAttorneyProfiles,
});
// ── Re-define the hub wrappers so their sub-tab dispatch reads from
// window.* at render time instead of the module-local closures that
// RiskOpps.jsx captured. Without this, our overrides above never reach
// the render path.
const RkSubTabs = window.RkSubTabs;
const pick = (name, fallbackName) => window[name] || window[fallbackName];
function RiskTreatmentHub() {
const [sub, setSub] = useState('appetite');
const tabs = [
{ id: 'appetite', label: 'Appetite' },
{ id: 'controls', label: 'Controls' },
{ id: 'treatments', label: 'Treatments' },
{ id: 'insurance', label: 'Insurance' },
{ id: 'effect', label: 'Effectiveness' },
];
const map = {
appetite: window.RkAppetite,
controls: window.RkControls,
treatments: window.RkTreatments,
insurance: window.RkInsurance,
effect: window.RkMitigationEffect,
};
const Comp = map[sub] || (() => null);
return
;
}
function RiskIndicatorsHub() {
const [sub, setSub] = useState('kri');
const tabs = [
{ id: 'kri', label: 'KRIs' },
{ id: 'triggers', label: 'Triggers' },
{ id: 'regwatch', label: 'Regulatory' },
{ id: 'incidents', label: 'Incidents' },
{ id: 'cyber', label: 'Cyber' },
{ id: 'priority', label: 'Priority Queue' },
];
const map = {
kri: window.RkKRI, triggers: window.RkTriggers, regwatch: window.RkRegWatch,
incidents: window.RkIncidents, cyber: window.RkCyber, priority: window.RkPriority,
};
const Comp = map[sub] || (() => null);
return
;
}
function RiskQuantHub() {
const [sub, setSub] = useState('tornado');
const tabs = [
{ id: 'tornado', label: 'Tornado' },
{ id: 'var', label: 'VaR / CVaR' },
{ id: 'reserves', label: 'ASC 450' },
{ id: 'bowtie', label: 'Bow-Tie' },
{ id: 'stress', label: 'Stress Tests' },
];
const map = {
tornado: window.RkTornado, var: window.RkVaR, reserves: window.RkReserves,
bowtie: window.RkBowTie, stress: window.RkStress,
};
const Comp = map[sub] || (() => null);
return
;
}
function RiskReportingHub() {
const [sub, setSub] = useState('portfolio');
const tabs = [
{ id: 'portfolio', label: 'Portfolio' },
{ id: 'committee', label: 'Committee' },
{ id: 'templates', label: 'Templates' },
{ id: 'maturity', label: 'ERM Maturity' },
];
const map = {
portfolio: window.RkPortfolio, committee: window.RkCommittee,
templates: window.RkReporter, maturity: window.RkMaturity,
};
const Comp = map[sub] || (() => null);
return
;
}
function RiskGovernanceHub() {
const [sub, setSub] = useState('walls');
const tabs = [
{ id: 'walls', label: 'Ethical Walls' },
{ id: 'vendors', label: 'Vendors' },
{ id: 'clients', label: 'Client Ratings' },
{ id: 'attorneys', label: 'Attorney Profiles' },
{ id: 'settlement', label: 'Settlement Tree' },
];
const map = {
walls: window.RkEthicalWalls, vendors: window.RkVendors,
clients: window.RkClientRatings, attorneys: window.RkAttorneyProfiles,
settlement: window.RkSettlementTree,
};
const Comp = map[sub] || (() => null);
return
;
}
Object.assign(window, {
RiskTreatmentHub, RiskIndicatorsHub, RiskQuantHub,
RiskReportingHub, RiskGovernanceHub,
});
// Risk-specific commands
if (window.Arbiter?.CommandRegistry) {
const R = window.Arbiter.CommandRegistry;
[
['treatment', 'Risk: Treatment'],
['indicators', 'Risk: Indicators'],
['quant', 'Risk: Quantification'],
['reporting', 'Risk: Reporting'],
['governance', 'Risk: Governance'],
].forEach(([sub, label]) => R.register(`risk.${sub}`, {
label, group: 'Risk', keywords: 'risk ' + sub,
run: () => {
window.dispatchEvent(new CustomEvent('arbiter:navigate', { detail: { view: 'risk' } }));
// Consumer must listen for a secondary event to switch Risk sub-tab; here we
// just drop a toast that the section was requested.
window.Arbiter?.toast?.({ title: label, message: 'Section opened.' });
},
}));
}
})();