@vitronai/alethia 0.3.7 → 0.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +40 -12
  2. package/demo/README.md +26 -30
  3. package/demo/admin-panel.html +128 -0
  4. package/demo/agent-oversight.html +237 -0
  5. package/demo/crypto-readiness.html +237 -0
  6. package/demo/financial-dashboard.html +97 -0
  7. package/demo/incident-response.html +267 -0
  8. package/demo/threat-intel.html +301 -0
  9. package/dist/index.js +1 -1
  10. package/package.json +1 -1
  11. package/demo/cookie-banner.html +0 -66
  12. package/demo/ecommerce.html +0 -88
  13. package/demo/form-validation.html +0 -113
  14. package/demo/signup-form.html +0 -70
  15. package/demo/spa-loading.html +0 -64
  16. package/demo/todo-app.html +0 -51
package/demo/crypto-readiness.html ADDED
@@ -0,0 +1,237 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Post-Quantum Cryptographic Readiness Assessment</title>
5
+ <style>
6
+ * { box-sizing: border-box; margin: 0; padding: 0; }
7
+ body { font-family: 'SF Mono', 'Fira Code', monospace; background: #080c14; color: #c8d6e5; min-height: 100vh; padding: 1rem; font-size: 0.85rem; }
8
+ .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a2744; padding-bottom: 0.8rem; margin-bottom: 1rem; }
9
+ h1 { font-size: 1.1rem; color: #e2e8f0; }
10
+ .classification { background: #7f1d1d; color: #fca5a5; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; }
11
+ .mandate-bar { padding: 0.6rem 1rem; border-radius: 6px; background: #111d30; border: 1px solid #3a8fd4; margin-bottom: 1rem; font-size: 0.8rem; color: #7eb8da; }
12
+ .mandate-bar strong { color: #00bfff; }
13
+ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
14
+ .panel { background: #0d1525; border: 1px solid #1a2744; border-radius: 8px; padding: 1rem; }
15
+ .panel h2 { font-size: 0.85rem; color: #7eb8da; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
16
+ .full-width { grid-column: 1 / -1; }
17
+ .score-ring { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
18
+ .score-value { font-size: 3rem; font-weight: 700; }
19
+ .score-good { color: #00cc66; }
20
+ .score-warn { color: #ffd700; }
21
+ .score-fail { color: #ff4444; }
22
+ .score-label { color: #5a7a9e; font-size: 0.9rem; }
23
+ .check-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #111d30; }
24
+ .check-pass { color: #00cc66; font-weight: 600; }
25
+ .check-fail { color: #ff4444; font-weight: 600; }
26
+ .check-warn { color: #ffd700; font-weight: 600; }
27
+ .check-detail { color: #5a7a9e; font-size: 0.75rem; }
28
+ .system-card { background: #111d30; border: 1px solid #1a2744; border-radius: 6px; padding: 0.8rem; margin-bottom: 0.5rem; }
29
+ .system-name { color: #e2e8f0; font-weight: 600; }
30
+ .system-status { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
31
+ .pqc-ready { background: #001a0a; color: #00cc66; border: 1px solid #00cc66; }
32
+ .pqc-partial { background: #1a1400; color: #ffd700; border: 1px solid #ffd700; }
33
+ .pqc-vulnerable { background: #1a0808; color: #ff4444; border: 1px solid #ff4444; }
34
+ .algo-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
35
+ .algo-table th { text-align: left; padding: 0.4rem; color: #5a7a9e; border-bottom: 1px solid #1a2744; font-size: 0.7rem; text-transform: uppercase; }
36
+ .algo-table td { padding: 0.4rem; border-bottom: 1px solid #111d30; }
37
+ .algo-deprecated { color: #ff4444; text-decoration: line-through; }
38
+ .algo-approved { color: #00cc66; }
39
+ .algo-transition { color: #ffd700; }
40
+ button { padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid #1a2744; background: #111d30; color: #7eb8da; cursor: pointer; font: inherit; font-size: 0.72rem; }
41
+ .btn-migrate { border-color: #00bfff; color: #00bfff; }
42
+ .btn-revoke { border-color: #ff4444; color: #ff4444; }
43
+ .btn-audit { border-color: #00cc66; color: #00cc66; }
44
+ .actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
45
+ .timeline-item { padding: 0.4rem 0; border-bottom: 1px solid #111d30; font-size: 0.78rem; }
46
+ .timeline-date { color: #5a7a9e; display: inline-block; min-width: 90px; }
47
+ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
48
+ .modal.visible { display: flex; }
49
+ .modal-content { background: #0d1525; border: 1px solid #ff4444; border-radius: 8px; padding: 1.5rem; max-width: 460px; }
50
+ .modal-content h3 { color: #ff4444; margin-bottom: 0.6rem; }
51
+ .modal-content p { color: #7eb8da; margin-bottom: 1rem; line-height: 1.6; font-size: 0.85rem; }
52
+ .modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
53
+ .response-banner { display: none; padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-weight: 600; font-size: 0.8rem; }
54
+ .response-banner.visible { display: block; }
55
+ .cert-card { background: #111d30; border: 1px solid #1a2744; border-radius: 6px; padding: 0.6rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; align-items: center; }
56
+ .cert-info { display: flex; flex-direction: column; gap: 0.1rem; }
57
+ .cert-cn { color: #e2e8f0; }
58
+ .cert-algo { font-size: 0.7rem; }
59
+ .cert-expiry { color: #5a7a9e; font-size: 0.7rem; }
60
+ </style>
61
+ </head>
62
+ <body>
63
+ <div class="header">
64
+ <div>
65
+ <h1>Post-Quantum Cryptographic Readiness</h1>
66
+ <span style="color:#5a7a9e;font-size:0.75rem">Assessment ID: PQC-2026-047 &bull; Scope: All production systems &bull; Assessor: crypto-team-lead</span>
67
+ </div>
68
+ <span class="classification">SECRET</span>
69
+ </div>
70
+
71
+ <div class="mandate-bar">
72
+ <strong>NSM-10 Compliance Deadline: January 2030</strong> — All national security systems must migrate to quantum-resistant cryptography. Current readiness: <strong style="color:#ffd700">62%</strong>
73
+ </div>
74
+
75
+ <div id="response-banner" class="response-banner"></div>
76
+
77
+ <div class="grid">
78
+ <div class="panel">
79
+ <h2>Overall Readiness Score</h2>
80
+ <div class="score-ring">
81
+ <span class="score-value score-warn">62%</span>
82
+ <div>
83
+ <div class="score-label">Post-Quantum Ready</div>
84
+ <div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.3rem">
85
+ 18 of 29 systems migrated<br>
86
+ 4 systems in transition<br>
87
+ 7 systems using deprecated algorithms
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <div class="check-row"><span>ML-KEM (Kyber) key exchange</span><span class="check-pass">18 systems</span></div>
92
+ <div class="check-row"><span>ML-DSA (Dilithium) signatures</span><span class="check-warn">14 systems</span></div>
93
+ <div class="check-row"><span>SLH-DSA (SPHINCS+) backup</span><span class="check-fail">3 systems</span></div>
94
+ <div class="check-row"><span>Hybrid TLS 1.3 + PQC</span><span class="check-warn">9 systems</span></div>
95
+ <div class="check-row"><span>RSA-2048 still in use</span><span class="check-fail">7 systems — MUST MIGRATE</span></div>
96
+ </div>
97
+
98
+ <div class="panel">
99
+ <h2>System Inventory</h2>
100
+ <div class="system-card">
101
+ <div style="display:flex;justify-content:space-between;align-items:center">
102
+ <span class="system-name">PKI Root CA</span>
103
+ <span class="system-status pqc-ready">PQC READY</span>
104
+ </div>
105
+ <div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.2rem">ML-DSA-65 signatures, ML-KEM-768 key encapsulation</div>
106
+ </div>
107
+ <div class="system-card">
108
+ <div style="display:flex;justify-content:space-between;align-items:center">
109
+ <span class="system-name">VPN Gateway Cluster</span>
110
+ <span class="system-status pqc-partial">HYBRID MODE</span>
111
+ </div>
112
+ <div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.2rem">TLS 1.3 + ML-KEM hybrid, RSA fallback for legacy clients</div>
113
+ </div>
114
+ <div class="system-card">
115
+ <div style="display:flex;justify-content:space-between;align-items:center">
116
+ <span class="system-name">Email Gateway (S/MIME)</span>
117
+ <span class="system-status pqc-vulnerable">VULNERABLE</span>
118
+ </div>
119
+ <div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.2rem">RSA-2048 certificates — harvest-now-decrypt-later risk</div>
120
+ <div class="actions">
121
+ <button class="btn-migrate" id="migrate-email">Initiate Migration</button>
122
+ <button class="btn-revoke" id="revoke-email">Revoke RSA Certs</button>
123
+ </div>
124
+ </div>
125
+ <div class="system-card">
126
+ <div style="display:flex;justify-content:space-between;align-items:center">
127
+ <span class="system-name">SCADA Control Network</span>
128
+ <span class="system-status pqc-vulnerable">VULNERABLE</span>
129
+ </div>
130
+ <div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.2rem">Legacy ECDSA-P256 — no PQC path without firmware upgrade</div>
131
+ <div class="actions">
132
+ <button class="btn-audit" id="audit-scada">Full Audit</button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="panel">
138
+ <h2>Algorithm Inventory</h2>
139
+ <table class="algo-table">
140
+ <thead><tr><th>Algorithm</th><th>Usage</th><th>Status</th><th>Replacement</th></tr></thead>
141
+ <tbody>
142
+ <tr><td class="algo-deprecated">RSA-2048</td><td>7 systems</td><td class="check-fail">DEPRECATED</td><td>ML-DSA-65</td></tr>
143
+ <tr><td class="algo-deprecated">ECDSA P-256</td><td>4 systems</td><td class="check-fail">DEPRECATED</td><td>ML-DSA-44</td></tr>
144
+ <tr><td class="algo-transition">ECDH P-384</td><td>4 systems</td><td class="check-warn">TRANSITION</td><td>ML-KEM-768</td></tr>
145
+ <tr><td class="algo-approved">ML-KEM-768</td><td>18 systems</td><td class="check-pass">APPROVED</td><td>—</td></tr>
146
+ <tr><td class="algo-approved">ML-DSA-65</td><td>14 systems</td><td class="check-pass">APPROVED</td><td>—</td></tr>
147
+ <tr><td class="algo-approved">SLH-DSA-128s</td><td>3 systems</td><td class="check-pass">APPROVED</td><td>—</td></tr>
148
+ </tbody>
149
+ </table>
150
+ </div>
151
+
152
+ <div class="panel">
153
+ <h2>Certificates at Risk</h2>
154
+ <div class="cert-card">
155
+ <div class="cert-info">
156
+ <span class="cert-cn">CN=mail.agency.gov</span>
157
+ <span class="cert-algo algo-deprecated">RSA-2048 / SHA-256</span>
158
+ <span class="cert-expiry">Expires: 2027-03-15</span>
159
+ </div>
160
+ <button class="btn-revoke" id="revoke-mail">Revoke</button>
161
+ </div>
162
+ <div class="cert-card">
163
+ <div class="cert-info">
164
+ <span class="cert-cn">CN=vpn-legacy.agency.gov</span>
165
+ <span class="cert-algo algo-deprecated">RSA-2048 / SHA-256</span>
166
+ <span class="cert-expiry">Expires: 2026-11-30</span>
167
+ </div>
168
+ <button class="btn-revoke" id="revoke-vpn">Revoke</button>
169
+ </div>
170
+ <div class="cert-card">
171
+ <div class="cert-info">
172
+ <span class="cert-cn">CN=scada.internal</span>
173
+ <span class="cert-algo algo-deprecated">ECDSA P-256 / SHA-256</span>
174
+ <span class="cert-expiry">Expires: 2028-06-01</span>
175
+ </div>
176
+ <button class="btn-revoke" id="revoke-scada">Revoke</button>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="panel full-width">
181
+ <h2>Migration Timeline</h2>
182
+ <div class="timeline-item"><span class="timeline-date">2026-Q1</span> <span class="check-pass">COMPLETE</span> — PKI Root CA migrated to ML-DSA-65</div>
183
+ <div class="timeline-item"><span class="timeline-date">2026-Q2</span> <span class="check-pass">COMPLETE</span> — VPN gateways upgraded to hybrid TLS 1.3 + ML-KEM</div>
184
+ <div class="timeline-item"><span class="timeline-date">2026-Q3</span> <span class="check-warn">IN PROGRESS</span> — Email gateway S/MIME migration to ML-DSA</div>
185
+ <div class="timeline-item"><span class="timeline-date">2027-Q1</span> <span style="color:#5a7a9e">PLANNED</span> — Legacy client RSA fallback removal</div>
186
+ <div class="timeline-item"><span class="timeline-date">2027-Q3</span> <span style="color:#5a7a9e">PLANNED</span> — SCADA firmware upgrade for PQC support</div>
187
+ <div class="timeline-item"><span class="timeline-date">2029-Q4</span> <span style="color:#5a7a9e">DEADLINE</span> — NSM-10 full compliance required</div>
188
+ </div>
189
+ </div>
190
+
191
+ <div id="action-modal" class="modal">
192
+ <div class="modal-content">
193
+ <h3 id="modal-title">Confirm Action</h3>
194
+ <p id="modal-text"></p>
195
+ <div class="modal-actions">
196
+ <button id="cancel-action" style="background:#111d30;color:#7eb8da;border-color:#1a2744">Cancel</button>
197
+ <button class="btn-revoke" id="confirm-action" style="font-weight:700">Confirm</button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <script>
203
+ function showModal(title, text) {
204
+ document.getElementById('modal-title').textContent = title;
205
+ document.getElementById('modal-text').textContent = text;
206
+ document.getElementById('action-modal').classList.add('visible');
207
+ }
208
+ document.getElementById('cancel-action').addEventListener('click', function() {
209
+ document.getElementById('action-modal').classList.remove('visible');
210
+ });
211
+ document.getElementById('confirm-action').addEventListener('click', function() {
212
+ document.getElementById('action-modal').classList.remove('visible');
213
+ var banner = document.getElementById('response-banner');
214
+ banner.className = 'response-banner visible';
215
+ banner.style.background = '#001a0a';
216
+ banner.style.border = '1px solid #00cc66';
217
+ banner.style.color = '#00cc66';
218
+ banner.textContent = 'Action executed. Audit record created.';
219
+ });
220
+ document.getElementById('migrate-email').addEventListener('click', function() {
221
+ showModal('Initiate PQC Migration', 'This will begin the migration of the email gateway from RSA-2048 to ML-DSA-65 certificates. All existing S/MIME certificates will be re-issued. Users will need to re-enroll. Estimated downtime: 4 hours.');
222
+ });
223
+ document.getElementById('revoke-email').addEventListener('click', function() {
224
+ showModal('Revoke RSA Certificates', 'This will immediately revoke all RSA-2048 certificates for the email gateway. Email signing and encryption will be unavailable until PQC certificates are issued. This action is irreversible.');
225
+ });
226
+ document.getElementById('audit-scada').addEventListener('click', function() {
227
+ showModal('Full SCADA Cryptographic Audit', 'This will initiate a comprehensive audit of all cryptographic primitives used by the SCADA control network. The audit will scan firmware, certificates, key stores, and protocol configurations. Estimated duration: 6 hours.');
228
+ });
229
+ document.querySelectorAll('.btn-revoke').forEach(function(btn) {
230
+ if (btn.id === 'confirm-action') return;
231
+ btn.addEventListener('click', function() {
232
+ showModal('Revoke Certificate', 'This will immediately revoke this certificate and publish it to the CRL. Any systems relying on this certificate will lose TLS/authentication capability until a replacement is issued. This action is irreversible and requires CISO approval.');
233
+ });
234
+ });
235
+ </script>
236
+ </body>
237
+ </html>
package/demo/financial-dashboard.html ADDED
@@ -0,0 +1,97 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Trading Platform — Risk Monitor</title>
5
+ <style>
6
+ * { box-sizing: border-box; margin: 0; padding: 0; }
7
+ body { font-family: -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; padding: 1.5rem; }
8
+ h1 { font-size: 1.4rem; margin-bottom: 0.3rem; }
9
+ .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 1.5rem; }
10
+ .risk-banner { padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-weight: 600; }
11
+ .risk-low { background: #14532d; border: 1px solid #22c55e; color: #86efac; }
12
+ .risk-medium { background: #78350f; border: 1px solid #f59e0b; color: #fde68a; }
13
+ .risk-high { background: #7f1d1d; border: 1px solid #ef4444; color: #fca5a5; }
14
+ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
15
+ .metric { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1rem; }
16
+ .metric-label { color: #64748b; font-size: 0.8rem; margin-bottom: 0.3rem; }
17
+ .metric-value { font-size: 1.6rem; font-weight: 700; }
18
+ .metric-value.positive { color: #34d399; }
19
+ .metric-value.negative { color: #f87171; }
20
+ .metric-value.neutral { color: #3b82f6; }
21
+ .positions { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.2rem; margin-bottom: 1.5rem; }
22
+ .positions h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
23
+ table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
24
+ th { text-align: left; padding: 0.5rem; color: #64748b; border-bottom: 1px solid #1e293b; }
25
+ td { padding: 0.5rem; border-bottom: 1px solid #0f172a; }
26
+ .pnl-positive { color: #34d399; }
27
+ .pnl-negative { color: #f87171; }
28
+ .trade-actions { display: flex; gap: 1rem; margin-top: 1rem; }
29
+ .trade-btn { padding: 0.6rem 1.2rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
30
+ .btn-buy { background: #14532d; color: #86efac; }
31
+ .btn-sell { background: #7f1d1d; color: #fca5a5; }
32
+ .btn-liquidate { background: #991b1b; color: white; }
33
+ .compliance { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.2rem; }
34
+ .compliance h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
35
+ .check-item { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #0f172a; }
36
+ .check-pass { color: #34d399; }
37
+ .check-fail { color: #f87171; }
38
+ .check-warn { color: #fbbf24; }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <h1>Risk Monitor</h1>
43
+ <p class="subtitle">Live · Last update: 2 seconds ago · Market: NYSE · Session: Pre-market</p>
44
+
45
+ <div id="risk-banner" class="risk-banner risk-medium" role="alert">
46
+ RISK LEVEL: MEDIUM — Portfolio exposure approaching limit (82% of max)
47
+ </div>
48
+
49
+ <div class="metrics">
50
+ <div class="metric">
51
+ <div class="metric-label">Portfolio Value</div>
52
+ <div class="metric-value neutral">$4.2M</div>
53
+ </div>
54
+ <div class="metric">
55
+ <div class="metric-label">Day P&L</div>
56
+ <div class="metric-value positive">+$127,430</div>
57
+ </div>
58
+ <div class="metric">
59
+ <div class="metric-label">Open Positions</div>
60
+ <div class="metric-value neutral">14</div>
61
+ </div>
62
+ <div class="metric">
63
+ <div class="metric-label">Margin Used</div>
64
+ <div class="metric-value negative">82%</div>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="positions">
69
+ <h2>Open Positions</h2>
70
+ <table>
71
+ <thead>
72
+ <tr><th>Symbol</th><th>Qty</th><th>Avg Cost</th><th>Current</th><th>P&L</th><th>Risk</th></tr>
73
+ </thead>
74
+ <tbody>
75
+ <tr><td>AAPL</td><td>5,000</td><td>$178.42</td><td>$182.15</td><td class="pnl-positive">+$18,650</td><td>Low</td></tr>
76
+ <tr><td>TSLA</td><td>2,000</td><td>$245.80</td><td>$238.20</td><td class="pnl-negative">-$15,200</td><td>Medium</td></tr>
77
+ <tr><td>NVDA</td><td>1,500</td><td>$890.00</td><td>$912.50</td><td class="pnl-positive">+$33,750</td><td>Low</td></tr>
78
+ <tr><td>GME</td><td>10,000</td><td>$28.40</td><td>$24.15</td><td class="pnl-negative">-$42,500</td><td>High</td></tr>
79
+ </tbody>
80
+ </table>
81
+ <div class="trade-actions">
82
+ <button class="trade-btn btn-buy" id="buy-btn">Buy</button>
83
+ <button class="trade-btn btn-sell" id="sell-btn">Sell Position</button>
84
+ <button class="trade-btn btn-liquidate" id="liquidate-btn">Liquidate All</button>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="compliance">
89
+ <h2>Compliance Checks</h2>
90
+ <div class="check-item"><span>Position concentration limit (< 25%)</span><span class="check-pass">PASS</span></div>
91
+ <div class="check-item"><span>Margin requirement (< 85%)</span><span class="check-warn">WARNING — 82%</span></div>
92
+ <div class="check-item"><span>Daily loss limit (< $100K)</span><span class="check-pass">PASS</span></div>
93
+ <div class="check-item"><span>Restricted securities check</span><span class="check-pass">CLEAR</span></div>
94
+ <div class="check-item"><span>Pre-trade risk approval</span><span class="check-fail">REQUIRED for trades > $500K</span></div>
95
+ </div>
96
+ </body>
97
+ </html>
package/demo/incident-response.html ADDED
@@ -0,0 +1,267 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>SIEM — Incident Response Console</title>
5
+ <style>
6
+ * { box-sizing: border-box; margin: 0; padding: 0; }
7
+ body { font-family: 'SF Mono', 'Fira Code', monospace; background: #080c14; color: #c8d6e5; min-height: 100vh; padding: 1rem; font-size: 0.85rem; }
8
+ .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a2744; padding-bottom: 0.8rem; margin-bottom: 1rem; }
9
+ .header h1 { font-size: 1.1rem; color: #e2e8f0; font-weight: 600; }
10
+ .severity-critical { color: #ff4444; font-weight: 700; animation: pulse 1.5s ease-in-out infinite; }
11
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
12
+ .severity-high { color: #ff8c00; }
13
+ .severity-medium { color: #ffd700; }
14
+ .severity-low { color: #00bfff; }
15
+ .status-bar { display: flex; gap: 2rem; color: #5a7a9e; font-size: 0.75rem; }
16
+ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
17
+ .panel { background: #0d1525; border: 1px solid #1a2744; border-radius: 8px; padding: 1rem; }
18
+ .panel h2 { font-size: 0.9rem; color: #7eb8da; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
19
+ .alert-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #111d30; }
20
+ .alert-row:last-child { border-bottom: none; }
21
+ .alert-info { display: flex; flex-direction: column; gap: 0.15rem; }
22
+ .alert-id { color: #5a7a9e; font-size: 0.7rem; }
23
+ .alert-msg { color: #c8d6e5; }
24
+ .alert-source { color: #5a7a9e; font-size: 0.7rem; }
25
+ .actions { display: flex; gap: 0.4rem; }
26
+ button { padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid #1a2744; background: #111d30; color: #7eb8da; cursor: pointer; font: inherit; font-size: 0.75rem; }
27
+ button:hover { border-color: #3a8fd4; }
28
+ .btn-acknowledge { border-color: #00bfff; color: #00bfff; }
29
+ .btn-escalate { border-color: #ff8c00; color: #ff8c00; }
30
+ .btn-isolate { border-color: #ff4444; color: #ff4444; }
31
+ .btn-quarantine { border-color: #ff4444; color: #ff4444; background: #1a0808; }
32
+ .log-feed { max-height: 200px; overflow-y: auto; font-size: 0.75rem; }
33
+ .log-entry { padding: 0.2rem 0; display: flex; gap: 0.6rem; }
34
+ .log-ts { color: #3a5570; min-width: 80px; }
35
+ .log-level-crit { color: #ff4444; }
36
+ .log-level-warn { color: #ffd700; }
37
+ .log-level-info { color: #00bfff; }
38
+ .ioc-list { list-style: none; }
39
+ .ioc-item { padding: 0.4rem 0; border-bottom: 1px solid #111d30; display: flex; justify-content: space-between; }
40
+ .ioc-value { color: #ff8c00; }
41
+ .ioc-type { color: #5a7a9e; font-size: 0.7rem; }
42
+ .timeline { list-style: none; position: relative; padding-left: 1.2rem; }
43
+ .timeline::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: #1a2744; }
44
+ .timeline li { padding: 0.4rem 0; position: relative; }
45
+ .timeline li::before { content: ''; position: absolute; left: -1.2rem; top: 0.55rem; width: 8px; height: 8px; border-radius: 50%; background: #1a2744; border: 1px solid #3a5570; }
46
+ .timeline li.active::before { background: #ff4444; border-color: #ff4444; box-shadow: 0 0 6px #ff4444; }
47
+ .host-card { background: #111d30; border: 1px solid #1a2744; border-radius: 6px; padding: 0.6rem; margin-bottom: 0.5rem; }
48
+ .host-name { color: #e2e8f0; font-weight: 600; }
49
+ .host-ip { color: #5a7a9e; }
50
+ .host-status { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
51
+ .host-compromised { background: #1a0808; color: #ff4444; border: 1px solid #ff4444; }
52
+ .host-at-risk { background: #1a1400; color: #ffd700; border: 1px solid #ffd700; }
53
+ .host-clean { background: #001a0a; color: #00cc66; border: 1px solid #00cc66; }
54
+ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
55
+ .modal.visible { display: flex; }
56
+ .modal-content { background: #0d1525; border: 1px solid #ff4444; border-radius: 8px; padding: 1.5rem; max-width: 420px; }
57
+ .modal-content h3 { color: #ff4444; margin-bottom: 0.6rem; }
58
+ .modal-content p { color: #7eb8da; margin-bottom: 1rem; font-size: 0.85rem; line-height: 1.5; }
59
+ .modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
60
+ .btn-cancel { background: #111d30; color: #7eb8da; }
61
+ .btn-confirm-isolate { background: #1a0808; border-color: #ff4444; color: #ff4444; font-weight: 700; }
62
+ .response-banner { display: none; padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-weight: 600; }
63
+ .response-banner.visible { display: block; }
64
+ .response-success { background: #001a0a; border: 1px solid #00cc66; color: #00cc66; }
65
+ .response-escalated { background: #1a1400; border: 1px solid #ffd700; color: #ffd700; }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <div class="header">
70
+ <div>
71
+ <h1>Incident Response Console</h1>
72
+ <div class="status-bar">
73
+ <span>Analyst: soc-analyst-4 &bull; Shift: Night</span>
74
+ <span>Active incidents: 3</span>
75
+ <span>Mean time to respond: 4m 12s</span>
76
+ </div>
77
+ </div>
78
+ <span class="severity-critical">CRITICAL INCIDENT ACTIVE</span>
79
+ </div>
80
+
81
+ <div id="response-banner" class="response-banner"></div>
82
+
83
+ <div class="grid">
84
+ <div class="panel">
85
+ <h2>Active Alerts</h2>
86
+ <div class="alert-row">
87
+ <div class="alert-info">
88
+ <span class="alert-id">INC-2026-0847</span>
89
+ <span class="alert-msg"><span class="severity-critical">CRITICAL</span> — Lateral movement detected: WORKSTATION-14 → DC-PRIMARY</span>
90
+ <span class="alert-source">Source: EDR &bull; MITRE: T1021.002</span>
91
+ </div>
92
+ <div class="actions">
93
+ <button class="btn-acknowledge" id="ack-847">Acknowledge</button>
94
+ <button class="btn-escalate" id="esc-847">Escalate</button>
95
+ </div>
96
+ </div>
97
+ <div class="alert-row">
98
+ <div class="alert-info">
99
+ <span class="alert-id">INC-2026-0848</span>
100
+ <span class="alert-msg"><span class="severity-high">HIGH</span> — Credential dump attempt: lsass.exe memory access</span>
101
+ <span class="alert-source">Source: EDR &bull; MITRE: T1003.001</span>
102
+ </div>
103
+ <div class="actions">
104
+ <button class="btn-acknowledge" id="ack-848">Acknowledge</button>
105
+ </div>
106
+ </div>
107
+ <div class="alert-row">
108
+ <div class="alert-info">
109
+ <span class="alert-id">INC-2026-0849</span>
110
+ <span class="alert-msg"><span class="severity-medium">MEDIUM</span> — Unusual outbound DNS: TXT queries to .xyz domain</span>
111
+ <span class="alert-source">Source: NDR &bull; MITRE: T1071.004</span>
112
+ </div>
113
+ <div class="actions">
114
+ <button class="btn-acknowledge" id="ack-849">Acknowledge</button>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="panel">
120
+ <h2>Affected Hosts</h2>
121
+ <div class="host-card">
122
+ <div style="display:flex;justify-content:space-between;align-items:center">
123
+ <div><span class="host-name">WORKSTATION-14</span> <span class="host-ip">10.0.4.14</span></div>
124
+ <span class="host-status host-compromised">COMPROMISED</span>
125
+ </div>
126
+ <div class="actions" style="margin-top:0.5rem">
127
+ <button class="btn-isolate" id="isolate-ws14">Isolate from Network</button>
128
+ <button class="btn-quarantine" id="quarantine-ws14">Quarantine &amp; Image</button>
129
+ </div>
130
+ </div>
131
+ <div class="host-card">
132
+ <div style="display:flex;justify-content:space-between;align-items:center">
133
+ <div><span class="host-name">DC-PRIMARY</span> <span class="host-ip">10.0.1.1</span></div>
134
+ <span class="host-status host-at-risk">AT RISK</span>
135
+ </div>
136
+ <div class="actions" style="margin-top:0.5rem">
137
+ <button class="btn-isolate" id="isolate-dc">Isolate from Network</button>
138
+ </div>
139
+ </div>
140
+ <div class="host-card">
141
+ <div style="display:flex;justify-content:space-between;align-items:center">
142
+ <div><span class="host-name">FILE-SERVER-02</span> <span class="host-ip">10.0.2.8</span></div>
143
+ <span class="host-status host-clean">CLEAN</span>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="panel">
149
+ <h2>Indicators of Compromise</h2>
150
+ <ul class="ioc-list">
151
+ <li class="ioc-item"><span class="ioc-value">185.220.101.42</span><span class="ioc-type">C2 IP</span></li>
152
+ <li class="ioc-item"><span class="ioc-value">evil-update.xyz</span><span class="ioc-type">C2 Domain</span></li>
153
+ <li class="ioc-item"><span class="ioc-value">a3f2b8c1...d94e</span><span class="ioc-type">Malware SHA-256</span></li>
154
+ <li class="ioc-item"><span class="ioc-value">svchost-update.exe</span><span class="ioc-type">Process Name</span></li>
155
+ <li class="ioc-item"><span class="ioc-value">HKLM\Software\MalRun</span><span class="ioc-type">Registry Key</span></li>
156
+ </ul>
157
+ </div>
158
+
159
+ <div class="panel">
160
+ <h2>Attack Timeline</h2>
161
+ <ul class="timeline">
162
+ <li>09:14:22 — Initial phishing email delivered to user jsmith</li>
163
+ <li>09:18:45 — Malicious attachment opened on WORKSTATION-14</li>
164
+ <li>09:19:02 — Payload executed: svchost-update.exe</li>
165
+ <li>09:22:18 — C2 beacon established to 185.220.101.42</li>
166
+ <li>09:34:11 — Credential dump: lsass.exe memory access</li>
167
+ <li class="active">09:41:33 — Lateral movement to DC-PRIMARY via SMB</li>
168
+ <li>09:42:07 — DNS exfiltration attempt to evil-update.xyz</li>
169
+ </ul>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="panel" style="margin-top:1rem">
174
+ <h2>Live Event Feed</h2>
175
+ <div class="log-feed" id="log-feed">
176
+ <div class="log-entry"><span class="log-ts">09:42:07</span><span class="log-level-crit">CRIT</span> DNS exfiltration: TXT query to evil-update.xyz from 10.0.4.14</div>
177
+ <div class="log-entry"><span class="log-ts">09:41:33</span><span class="log-level-crit">CRIT</span> SMB lateral movement: 10.0.4.14 → 10.0.1.1 using stolen creds</div>
178
+ <div class="log-entry"><span class="log-ts">09:34:11</span><span class="log-level-warn">WARN</span> Credential access: lsass.exe memory read by svchost-update.exe</div>
179
+ <div class="log-entry"><span class="log-ts">09:22:18</span><span class="log-level-warn">WARN</span> C2 beacon: HTTPS POST to 185.220.101.42:443 every 30s</div>
180
+ <div class="log-entry"><span class="log-ts">09:19:02</span><span class="log-level-info">INFO</span> Process start: svchost-update.exe (PID 4892) on WORKSTATION-14</div>
181
+ </div>
182
+ </div>
183
+
184
+ <div id="isolate-modal" class="modal">
185
+ <div class="modal-content">
186
+ <h3>Confirm Network Isolation</h3>
187
+ <p id="isolate-modal-text">This will immediately sever all network connectivity for the target host. Active sessions will be terminated. This action is logged and requires SOC manager approval for reversal.</p>
188
+ <div class="modal-actions">
189
+ <button class="btn-cancel" id="cancel-isolate">Cancel</button>
190
+ <button class="btn-confirm-isolate" id="confirm-isolate">Confirm Isolation</button>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <script>
196
+ var isolateTarget = '';
197
+ document.getElementById('ack-847').addEventListener('click', function() {
198
+ this.textContent = 'Acknowledged';
199
+ this.disabled = true;
200
+ this.style.borderColor = '#00cc66';
201
+ this.style.color = '#00cc66';
202
+ addLog('INFO', 'INC-2026-0847 acknowledged by soc-analyst-4');
203
+ });
204
+ document.getElementById('ack-848').addEventListener('click', function() {
205
+ this.textContent = 'Acknowledged';
206
+ this.disabled = true;
207
+ this.style.borderColor = '#00cc66';
208
+ this.style.color = '#00cc66';
209
+ addLog('INFO', 'INC-2026-0848 acknowledged by soc-analyst-4');
210
+ });
211
+ document.getElementById('ack-849').addEventListener('click', function() {
212
+ this.textContent = 'Acknowledged';
213
+ this.disabled = true;
214
+ this.style.borderColor = '#00cc66';
215
+ this.style.color = '#00cc66';
216
+ addLog('INFO', 'INC-2026-0849 acknowledged by soc-analyst-4');
217
+ });
218
+ document.getElementById('esc-847').addEventListener('click', function() {
219
+ var banner = document.getElementById('response-banner');
220
+ banner.className = 'response-banner visible response-escalated';
221
+ banner.textContent = 'INC-2026-0847 escalated to SOC Manager. ETA: 2 minutes.';
222
+ this.textContent = 'Escalated';
223
+ this.disabled = true;
224
+ addLog('WARN', 'INC-2026-0847 escalated to SOC Manager by soc-analyst-4');
225
+ });
226
+ document.getElementById('isolate-ws14').addEventListener('click', function() {
227
+ isolateTarget = 'WORKSTATION-14';
228
+ document.getElementById('isolate-modal-text').textContent =
229
+ 'This will immediately sever all network connectivity for WORKSTATION-14 (10.0.4.14). Active sessions will be terminated. This action is logged and requires SOC manager approval for reversal.';
230
+ document.getElementById('isolate-modal').classList.add('visible');
231
+ });
232
+ document.getElementById('isolate-dc').addEventListener('click', function() {
233
+ isolateTarget = 'DC-PRIMARY';
234
+ document.getElementById('isolate-modal-text').textContent =
235
+ 'WARNING: Isolating DC-PRIMARY (10.0.1.1) will affect all Active Directory authentication. This will immediately sever all network connectivity. This action is logged and requires SOC manager approval for reversal.';
236
+ document.getElementById('isolate-modal').classList.add('visible');
237
+ });
238
+ document.getElementById('quarantine-ws14').addEventListener('click', function() {
239
+ isolateTarget = 'WORKSTATION-14';
240
+ document.getElementById('isolate-modal-text').textContent =
241
+ 'This will isolate WORKSTATION-14, capture a forensic disk image, and quarantine the host for analysis. The host will be offline until forensic review is complete.';
242
+ document.getElementById('isolate-modal').classList.add('visible');
243
+ });
244
+ document.getElementById('cancel-isolate').addEventListener('click', function() {
245
+ document.getElementById('isolate-modal').classList.remove('visible');
246
+ addLog('INFO', 'Isolation cancelled for ' + isolateTarget);
247
+ });
248
+ document.getElementById('confirm-isolate').addEventListener('click', function() {
249
+ document.getElementById('isolate-modal').classList.remove('visible');
250
+ var banner = document.getElementById('response-banner');
251
+ banner.className = 'response-banner visible response-success';
252
+ banner.textContent = isolateTarget + ' isolated from network. Forensic imaging initiated.';
253
+ addLog('CRIT', isolateTarget + ' network isolation executed by soc-analyst-4');
254
+ });
255
+ function addLog(level, msg) {
256
+ var feed = document.getElementById('log-feed');
257
+ var entry = document.createElement('div');
258
+ entry.className = 'log-entry';
259
+ var now = new Date();
260
+ var ts = now.toTimeString().slice(0, 8);
261
+ var cls = level === 'CRIT' ? 'log-level-crit' : level === 'WARN' ? 'log-level-warn' : 'log-level-info';
262
+ entry.innerHTML = '<span class="log-ts">' + ts + '</span><span class="' + cls + '">' + level + '</span> ' + msg;
263
+ feed.insertBefore(entry, feed.firstChild);
264
+ }
265
+ </script>
266
+ </body>
267
+ </html>