Skip to content

Commit fea6321

Browse files
author
OneFineStarstuff
committed
feat(risk): add /risk page embedding interactive AI Risk Matrix and Governance Dashboard (static iframe srcDoc)
1 parent d454d20 commit fea6321

1 file changed

Lines changed: 102 additions & 0 deletions

File tree

‎next-app/app/risk/page.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
export const metadata = { title: 'AI Risk Navigator' };
2+
export default function RiskPage() {
3+
return (
4+
<main className="space-y-4">
5+
<h1 className="text-2xl font-semibold">Interactive 10-Stage AI Risk Matrix</h1>
6+
<p className="text-sm text-slate-600">Filterable matrix and governance dashboard demos.</p>
7+
<iframe srcDoc={RISK_HTML} className="h-[80vh] w-full rounded border" />
8+
</main>
9+
);
10+
}
11+
12+
const RISK_HTML = `<!DOCTYPE html>
13+
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
14+
<style>html,body{margin:0;padding:0}</style>
15+
</head><body>
16+
${MATRIX_SECTION}
17+
${GOV_DASHBOARD}
18+
</body></html>`;
19+
20+
const MATRIX_SECTION = `
21+
<div style="padding:16px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);">
22+
<div style="background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:16px;padding:16px;max-width:1400px;margin:0 auto;">
23+
<h2 style="margin:0 0 8px 0;color:#2c3e50;font-size:20px;font-weight:600;text-align:center">Interactive Cross-Stage AI Risk Matrix</h2>
24+
<div style="text-align:center;margin-bottom:8px">
25+
<button onclick="toggleColumn('persistent')" style="margin:0 4px;padding:6px 10px;border:none;border-radius:6px;background:#4a5568;color:#fff;cursor:pointer;font-size:12px">Toggle Persistent</button>
26+
<button onclick="toggleColumn('evolving')" style="margin:0 4px;padding:6px 10px;border:none;border-radius:6px;background:#4a5568;color:#fff;cursor:pointer;font-size:12px">Toggle Evolving</button>
27+
<button onclick="toggleColumn('emergent')" style="margin:0 4px;padding:6px 10px;border:none;border-radius:6px;background:#4a5568;color:#fff;cursor:pointer;font-size:12px">Toggle Emergent</button>
28+
</div>
29+
<table id="matrix" style="width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1)">
30+
<thead>
31+
<tr>
32+
<th style="background:#1a202c;color:#fff;padding:10px;font-size:13px;border:1px solid #4a5568">Development Stage</th>
33+
<th class="persistent" style="background:#1a202c;color:#fff;padding:10px;font-size:13px;border:1px solid #4a5568">Persistent Risks</th>
34+
<th class="evolving" style="background:#1a202c;color:#fff;padding:10px;font-size:13px;border:1px solid #4a5568">Evolving Risks</th>
35+
<th class="emergent" style="background:#1a202c;color:#fff;padding:10px;font-size:13px;border:1px solid #4a5568">Emergent Risks</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
${[1,2,3,4,5,6,7,8,9,10].map(n=>`<tr>
40+
<td style="padding:10px;border:1px solid #e2e8f0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600">Stage ${n}</td>
41+
<td class="persistent" style="padding:10px;border:1px solid #e2e8f0">Persistent risk ${n}</td>
42+
<td class="evolving" style="padding:10px;border:1px solid #e2e8f0">Evolving risk ${n}</td>
43+
<td class="emergent" style="padding:10px;border:1px solid #e2e8f0">Emergent risk ${n}</td>
44+
</tr>`).join('')}
45+
</tbody>
46+
</table>
47+
<div style="display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap">
48+
<span style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);padding:6px 10px;border-radius:16px"><span style="width:14px;height:14px;background:#38b2ac;border-radius:3px"></span>Persistent</span>
49+
<span style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);padding:6px 10px;border-radius:16px"><span style="width:14px;height:14px;background:#ed8936;border-radius:3px"></span>Evolving</span>
50+
<span style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);padding:6px 10px;border-radius:16px"><span style="width:14px;height:14px;background:#d53f8c;border-radius:3px"></span>Emergent</span>
51+
</div>
52+
</div>
53+
</div>
54+
<script>
55+
function toggleColumn(cls){
56+
const cells=[...document.querySelectorAll('#matrix .'+cls)];
57+
const isHidden=cells.every(td=>td.style.display==='none');
58+
cells.forEach(td=>td.style.display=isHidden?'table-cell':'none');
59+
}
60+
</script>
61+
`;
62+
63+
const GOV_DASHBOARD = `
64+
<div style="padding:16px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);">
65+
<div style="background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:16px;padding:16px;max-width:1400px;margin:12px auto;">
66+
<h2 style="margin:0 0 8px 0;color:#2c3e50;font-size:20px;font-weight:600;text-align:center">AGI/ASI Governance Dashboard (Lite)</h2>
67+
<div id="status" style="text-align:center;color:#475569;font-size:13px;margin-bottom:8px">Design Phase Active • 4 checkpoints scheduled</div>
68+
<div style="display:grid;grid-template-columns:1fr 340px;gap:16px">
69+
<div style="position:relative;min-height:360px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:16px">
70+
<div id="rings" style="position:relative;width:320px;height:320px;margin:0 auto">
71+
<div data-layer="context" style="position:absolute;top:4px;left:4px;width:312px;height:312px;border-radius:50%;border:3px solid #667eea;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#55a3ff,#667eea);color:#fff;font-weight:700">Context & Safeguards</div>
72+
<div data-layer="operational" style="position:absolute;top:34px;left:34px;width:252px;height:252px;border-radius:50%;border:3px solid #0984e3;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#74b9ff,#0984e3);color:#fff;font-weight:700">Operational Framework</div>
73+
<div data-layer="core" style="position:absolute;top:94px;left:94px;width:132px;height:132px;border-radius:50%;border:3px solid #ee5a24;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#ff6b6b,#ee5a24);color:#fff;font-weight:700">Core Elements</div>
74+
</div>
75+
</div>
76+
<div style="background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:16px">
77+
<div style="font-size:14px;font-weight:700;margin-bottom:6px">Layer Detail</div>
78+
<div id="layerTitle" style="font-size:13px;color:#334155;margin-bottom:6px">System Overview</div>
79+
<div style="font-size:12px;color:#475569;margin-bottom:6px">Aggregated Risk: <span id="aggRisk" style="font-weight:700;color:#16a34a">Low</span></div>
80+
<div style="font-size:12px;color:#475569;margin-bottom:6px">Governance: <span id="govBody">Safety Oversight Board</span></div>
81+
<div style="display:flex;gap:8px;margin-top:8px">
82+
<button onclick="alert('Exporting report...')" style="flex:1;padding:8px 10px;border:none;border-radius:8px;background:#667eea;color:#fff;font-weight:600">Export Report</button>
83+
<button onclick="alert('Scheduling review...')" style="flex:1;padding:8px 10px;border:none;border-radius:8px;background:#764ba2;color:#fff;font-weight:600">Schedule Review</button>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
<script>
90+
const layerRisks={core:'Medium',operational:'Medium',context:'High'};
91+
const govBodies={core:'Model Review Board & Algorithm Ethics Panel',operational:'System Integration Board',context:'Safety Oversight Board'};
92+
document.querySelectorAll('#rings [data-layer]').forEach(el=>{
93+
el.addEventListener('click',()=>{
94+
const layer=el.getAttribute('data-layer');
95+
document.getElementById('layerTitle').textContent = layer.charAt(0).toUpperCase()+layer.slice(1)+' Layer';
96+
document.getElementById('aggRisk').textContent = layerRisks[layer];
97+
document.getElementById('aggRisk').style.color = layerRisks[layer]==='High'?'#e11d48':(layerRisks[layer]==='Medium'?'#f59e0b':'#16a34a');
98+
document.getElementById('govBody').textContent = govBodies[layer];
99+
})
100+
})
101+
</script>
102+
`;

0 commit comments

Comments
 (0)