@vitronai/alethia 0.8.0 → 0.8.2

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.
@@ -4,263 +4,703 @@
4
4
  <meta charset="utf-8">
5
5
  <title>SIEM — Incident Response Console</title>
6
6
  <style>
7
+ :root {
8
+ --bg-0: #0a0d12;
9
+ --bg-1: #11141b;
10
+ --bg-2: #181c25;
11
+ --bg-3: #20242f;
12
+ --line: #262b37;
13
+ --line-soft: #1c2029;
14
+ --ink: #e6e9ef;
15
+ --ink-muted: #9ba3b3;
16
+ --ink-faint: #6e7689;
17
+ --ink-dim: #4d5466;
18
+ --crit: #f87171;
19
+ --crit-soft: rgba(248,113,113,.12);
20
+ --high: #fb923c;
21
+ --high-soft: rgba(251,146,60,.12);
22
+ --med: #fbbf24;
23
+ --med-soft: rgba(251,191,36,.12);
24
+ --low: #60a5fa;
25
+ --low-soft: rgba(96,165,250,.12);
26
+ --ok: #34d399;
27
+ --ok-soft: rgba(52,211,153,.12);
28
+ }
29
+
7
30
  * { box-sizing: border-box; margin: 0; padding: 0; }
8
- body { font-family: 'SF Mono', 'Fira Code', monospace; background: #080c14; color: #c8d6e5; min-height: 100vh; padding: 1rem; font-size: 0.85rem; }
9
- .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a2744; padding-bottom: 0.8rem; margin-bottom: 1rem; }
10
- .header h1 { font-size: 1.1rem; color: #e2e8f0; font-weight: 600; }
11
- .severity-critical { color: #ff4444; font-weight: 700; animation: pulse 1.5s ease-in-out infinite; }
12
- @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
13
- .severity-high { color: #ff8c00; }
14
- .severity-medium { color: #ffd700; }
15
- .severity-low { color: #00bfff; }
16
- .status-bar { display: flex; gap: 2rem; color: #5a7a9e; font-size: 0.75rem; }
17
- .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
18
- .panel { background: #0d1525; border: 1px solid #1a2744; border-radius: 8px; padding: 1rem; }
19
- .panel h2 { font-size: 0.9rem; color: #7eb8da; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
20
- .alert-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #111d30; }
21
- .alert-row:last-child { border-bottom: none; }
22
- .alert-info { display: flex; flex-direction: column; gap: 0.15rem; }
23
- .alert-id { color: #5a7a9e; font-size: 0.7rem; }
24
- .alert-msg { color: #c8d6e5; }
25
- .alert-source { color: #5a7a9e; font-size: 0.7rem; }
26
- .actions { display: flex; gap: 0.4rem; }
27
- 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; }
28
- button:hover { border-color: #3a8fd4; }
29
- .btn-acknowledge { border-color: #00bfff; color: #00bfff; }
30
- .btn-escalate { border-color: #ff8c00; color: #ff8c00; }
31
- .btn-isolate { border-color: #ff4444; color: #ff4444; }
32
- .btn-quarantine { border-color: #ff4444; color: #ff4444; background: #1a0808; }
33
- .log-feed { max-height: 200px; overflow-y: auto; font-size: 0.75rem; }
34
- .log-entry { padding: 0.2rem 0; display: flex; gap: 0.6rem; }
35
- .log-ts { color: #3a5570; min-width: 80px; }
36
- .log-level-crit { color: #ff4444; }
37
- .log-level-warn { color: #ffd700; }
38
- .log-level-info { color: #00bfff; }
39
- .ioc-list { list-style: none; }
40
- .ioc-item { padding: 0.4rem 0; border-bottom: 1px solid #111d30; display: flex; justify-content: space-between; }
41
- .ioc-value { color: #ff8c00; }
42
- .ioc-type { color: #5a7a9e; font-size: 0.7rem; }
43
- .timeline { list-style: none; position: relative; padding-left: 1.2rem; }
44
- .timeline::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: #1a2744; }
45
- .timeline li { padding: 0.4rem 0; position: relative; }
46
- .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; }
47
- .timeline li.active::before { background: #ff4444; border-color: #ff4444; box-shadow: 0 0 6px #ff4444; }
48
- .host-card { background: #111d30; border: 1px solid #1a2744; border-radius: 6px; padding: 0.6rem; margin-bottom: 0.5rem; }
49
- .host-name { color: #e2e8f0; font-weight: 600; }
50
- .host-ip { color: #5a7a9e; }
51
- .host-status { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
52
- .host-compromised { background: #1a0808; color: #ff4444; border: 1px solid #ff4444; }
53
- .host-at-risk { background: #1a1400; color: #ffd700; border: 1px solid #ffd700; }
54
- .host-clean { background: #001a0a; color: #00cc66; border: 1px solid #00cc66; }
55
- .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
31
+ html { color-scheme: dark; }
32
+ body {
33
+ font-family: ui-sans-serif, -apple-system, system-ui, "Inter", sans-serif;
34
+ background:
35
+ radial-gradient(1100px 600px at 0% -10%, rgba(248,113,113,.08), transparent 55%),
36
+ radial-gradient(900px 500px at 105% 110%, rgba(251,146,60,.05), transparent 55%),
37
+ var(--bg-0);
38
+ background-attachment: fixed;
39
+ color: var(--ink);
40
+ min-height: 100vh;
41
+ -webkit-font-smoothing: antialiased;
42
+ letter-spacing: -.005em;
43
+ font-size: 13.5px;
44
+ }
45
+
46
+ .topbar {
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: space-between;
50
+ padding: 12px 20px;
51
+ border-bottom: 1px solid var(--line-soft);
52
+ background: rgba(10,13,18,.7);
53
+ backdrop-filter: saturate(140%) blur(8px);
54
+ position: sticky;
55
+ top: 0;
56
+ z-index: 5;
57
+ }
58
+ .brand {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ font-weight: 600;
63
+ }
64
+ .brand-mark {
65
+ width: 26px; height: 26px;
66
+ border-radius: 7px;
67
+ background: linear-gradient(135deg, var(--crit), #dc2626);
68
+ display: grid;
69
+ place-items: center;
70
+ box-shadow: 0 4px 14px rgba(248,113,113,.3), inset 0 1px 0 rgba(255,255,255,.2);
71
+ }
72
+ .brand-mark svg { color: #fff; }
73
+ .brand-name { letter-spacing: -.01em; }
74
+ .brand-eyebrow { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
75
+
76
+ .crit-badge {
77
+ display: inline-flex;
78
+ align-items: center;
79
+ gap: 6px;
80
+ padding: 5px 11px;
81
+ border-radius: 999px;
82
+ background: var(--crit-soft);
83
+ border: 1px solid rgba(248,113,113,.35);
84
+ color: var(--crit);
85
+ font-size: 11.5px;
86
+ font-weight: 700;
87
+ letter-spacing: .07em;
88
+ text-transform: uppercase;
89
+ }
90
+ .crit-badge::before {
91
+ content: "";
92
+ width: 7px; height: 7px;
93
+ border-radius: 50%;
94
+ background: var(--crit);
95
+ box-shadow: 0 0 8px var(--crit);
96
+ animation: pulse 1.4s ease-in-out infinite;
97
+ }
98
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
99
+
100
+ .container {
101
+ max-width: 1180px;
102
+ margin: 0 auto;
103
+ padding: 20px;
104
+ }
105
+
106
+ .meta-bar {
107
+ display: flex;
108
+ gap: 16px;
109
+ flex-wrap: wrap;
110
+ padding: 10px 14px;
111
+ background: var(--bg-1);
112
+ border: 1px solid var(--line);
113
+ border-radius: 10px;
114
+ margin-bottom: 16px;
115
+ font-size: 12px;
116
+ color: var(--ink-muted);
117
+ }
118
+ .meta-bar strong { color: var(--ink); font-weight: 600; }
119
+ .meta-bar .meta-item { display: flex; align-items: center; gap: 8px; }
120
+ .meta-bar .meta-item::before {
121
+ content: ""; width: 5px; height: 5px;
122
+ border-radius: 50%;
123
+ background: var(--ink-faint);
124
+ }
125
+
126
+ .response-banner {
127
+ display: none;
128
+ padding: 11px 14px;
129
+ border-radius: 10px;
130
+ margin-bottom: 16px;
131
+ font-size: 13px;
132
+ font-weight: 500;
133
+ align-items: center;
134
+ gap: 10px;
135
+ }
136
+ .response-banner.visible { display: flex; }
137
+ .response-banner.ok {
138
+ background: var(--ok-soft);
139
+ border: 1px solid rgba(52,211,153,.3);
140
+ color: var(--ok);
141
+ }
142
+ .response-banner.warn {
143
+ background: var(--med-soft);
144
+ border: 1px solid rgba(251,191,36,.3);
145
+ color: var(--med);
146
+ }
147
+ .response-banner svg { flex-shrink: 0; }
148
+
149
+ .grid {
150
+ display: grid;
151
+ grid-template-columns: 1fr 1fr;
152
+ gap: 14px;
153
+ }
154
+ .panel {
155
+ position: relative;
156
+ background: var(--bg-1);
157
+ border: 1px solid var(--line);
158
+ border-radius: 12px;
159
+ padding: 16px;
160
+ box-shadow:
161
+ inset 0 1px 0 rgba(255,255,255,.03),
162
+ 0 2px 6px rgba(0,0,0,.18);
163
+ }
164
+ .panel-head {
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: space-between;
168
+ margin-bottom: 12px;
169
+ }
170
+ .panel-head h2 {
171
+ font-size: 11.5px;
172
+ font-weight: 600;
173
+ letter-spacing: .08em;
174
+ text-transform: uppercase;
175
+ color: var(--ink-muted);
176
+ display: flex;
177
+ align-items: center;
178
+ gap: 7px;
179
+ }
180
+ .panel-head h2 .icon-dot {
181
+ width: 6px; height: 6px;
182
+ border-radius: 50%;
183
+ background: var(--crit);
184
+ box-shadow: 0 0 8px var(--crit);
185
+ }
186
+ .panel-head .pill {
187
+ font-size: 10.5px;
188
+ padding: 2px 8px;
189
+ border-radius: 999px;
190
+ background: var(--bg-3);
191
+ color: var(--ink-faint);
192
+ font-weight: 500;
193
+ }
194
+
195
+ /* Severity pills */
196
+ .sev {
197
+ display: inline-flex;
198
+ align-items: center;
199
+ gap: 5px;
200
+ padding: 2px 8px;
201
+ border-radius: 999px;
202
+ font-size: 10.5px;
203
+ font-weight: 700;
204
+ letter-spacing: .05em;
205
+ text-transform: uppercase;
206
+ }
207
+ .sev.crit { background: var(--crit-soft); color: var(--crit); border: 1px solid rgba(248,113,113,.35); }
208
+ .sev.high { background: var(--high-soft); color: var(--high); border: 1px solid rgba(251,146,60,.35); }
209
+ .sev.med { background: var(--med-soft); color: var(--med); border: 1px solid rgba(251,191,36,.35); }
210
+ .sev.low { background: var(--low-soft); color: var(--low); border: 1px solid rgba(96,165,250,.35); }
211
+
212
+ /* Alert rows */
213
+ .alert-row {
214
+ display: flex;
215
+ gap: 12px;
216
+ padding: 12px;
217
+ margin-bottom: 8px;
218
+ border-radius: 10px;
219
+ border: 1px solid var(--line);
220
+ background: var(--bg-2);
221
+ transition: border-color .15s, background .15s;
222
+ }
223
+ .alert-row:hover { border-color: #34394a; background: var(--bg-3); }
224
+ .alert-row:last-child { margin-bottom: 0; }
225
+ .alert-row.is-critical { border-left: 3px solid var(--crit); }
226
+ .alert-row.is-high { border-left: 3px solid var(--high); }
227
+ .alert-row.is-med { border-left: 3px solid var(--med); }
228
+ .alert-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
229
+ .alert-id-row { display: flex; align-items: center; gap: 8px; }
230
+ .alert-id { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: -.01em; }
231
+ .alert-msg { font-size: 13px; color: var(--ink); line-height: 1.45; }
232
+ .alert-source {
233
+ font-size: 11px;
234
+ color: var(--ink-faint);
235
+ display: flex;
236
+ align-items: center;
237
+ gap: 6px;
238
+ flex-wrap: wrap;
239
+ }
240
+ .alert-source .src-tag {
241
+ padding: 1px 6px;
242
+ border-radius: 3px;
243
+ background: var(--bg-3);
244
+ color: var(--ink-muted);
245
+ font-family: ui-monospace, monospace;
246
+ font-size: 10.5px;
247
+ }
248
+ .alert-actions {
249
+ display: flex;
250
+ gap: 6px;
251
+ align-items: flex-start;
252
+ flex-shrink: 0;
253
+ }
254
+
255
+ button {
256
+ font: inherit;
257
+ cursor: pointer;
258
+ transition: background .15s, border-color .15s, color .15s, transform .08s;
259
+ }
260
+ button:active:not([disabled]) { transform: translateY(1px); }
261
+ .btn {
262
+ padding: 5px 11px;
263
+ border-radius: 7px;
264
+ border: 1px solid var(--line);
265
+ background: var(--bg-2);
266
+ color: var(--ink-muted);
267
+ font-size: 11.5px;
268
+ font-weight: 600;
269
+ }
270
+ .btn:hover:not([disabled]) { background: var(--bg-3); border-color: #3a3f51; color: var(--ink); }
271
+ .btn[disabled] { cursor: default; opacity: .85; }
272
+ .btn-acknowledge { border-color: rgba(96,165,250,.4); color: var(--low); }
273
+ .btn-acknowledge:hover:not([disabled]) { background: var(--low-soft); border-color: var(--low); }
274
+ .btn-escalate { border-color: rgba(251,146,60,.4); color: var(--high); }
275
+ .btn-escalate:hover:not([disabled]) { background: var(--high-soft); border-color: var(--high); }
276
+ .btn-isolate { border-color: rgba(248,113,113,.4); color: var(--crit); }
277
+ .btn-isolate:hover { background: var(--crit-soft); border-color: var(--crit); }
278
+ .btn-quarantine {
279
+ border-color: rgba(248,113,113,.4);
280
+ color: var(--crit);
281
+ background: rgba(248,113,113,.04);
282
+ }
283
+ .btn-quarantine:hover { background: var(--crit-soft); border-color: var(--crit); }
284
+ .btn-done { border-color: rgba(52,211,153,.4); color: var(--ok); }
285
+
286
+ /* Hosts */
287
+ .host-card {
288
+ padding: 12px;
289
+ border-radius: 10px;
290
+ border: 1px solid var(--line);
291
+ background: var(--bg-2);
292
+ margin-bottom: 8px;
293
+ transition: border-color .15s, background .15s;
294
+ }
295
+ .host-card:hover { background: var(--bg-3); border-color: #34394a; }
296
+ .host-card:last-child { margin-bottom: 0; }
297
+ .host-row { display: flex; justify-content: space-between; align-items: center; }
298
+ .host-name {
299
+ font-weight: 600;
300
+ color: var(--ink);
301
+ font-size: 13px;
302
+ letter-spacing: -.01em;
303
+ }
304
+ .host-ip {
305
+ font-family: ui-monospace, monospace;
306
+ font-size: 11px;
307
+ color: var(--ink-faint);
308
+ margin-left: 6px;
309
+ }
310
+ .host-status {
311
+ padding: 3px 9px;
312
+ border-radius: 999px;
313
+ font-size: 10.5px;
314
+ font-weight: 700;
315
+ letter-spacing: .05em;
316
+ text-transform: uppercase;
317
+ }
318
+ .host-compromised { background: var(--crit-soft); color: var(--crit); border: 1px solid rgba(248,113,113,.4); }
319
+ .host-at-risk { background: var(--med-soft); color: var(--med); border: 1px solid rgba(251,191,36,.4); }
320
+ .host-clean { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(52,211,153,.4); }
321
+ .host-actions { display: flex; gap: 6px; margin-top: 10px; }
322
+
323
+ /* IOCs */
324
+ .ioc-row {
325
+ display: flex;
326
+ justify-content: space-between;
327
+ align-items: center;
328
+ padding: 9px 0;
329
+ border-bottom: 1px solid var(--line-soft);
330
+ }
331
+ .ioc-row:last-child { border-bottom: none; }
332
+ .ioc-value {
333
+ font-family: ui-monospace, monospace;
334
+ font-size: 12px;
335
+ color: var(--high);
336
+ }
337
+ .ioc-type {
338
+ font-size: 10.5px;
339
+ color: var(--ink-faint);
340
+ padding: 2px 8px;
341
+ border-radius: 999px;
342
+ background: var(--bg-2);
343
+ border: 1px solid var(--line);
344
+ }
345
+
346
+ /* Timeline */
347
+ .timeline {
348
+ position: relative;
349
+ padding-left: 18px;
350
+ }
351
+ .timeline::before {
352
+ content: "";
353
+ position: absolute;
354
+ left: 4px;
355
+ top: 4px;
356
+ bottom: 4px;
357
+ width: 1px;
358
+ background: linear-gradient(to bottom, var(--line) 0%, var(--crit) 50%, var(--line) 100%);
359
+ }
360
+ .tl-item {
361
+ position: relative;
362
+ padding: 7px 0;
363
+ font-size: 12.5px;
364
+ color: var(--ink);
365
+ }
366
+ .tl-item::before {
367
+ content: "";
368
+ position: absolute;
369
+ left: -18px;
370
+ top: 11px;
371
+ width: 8px;
372
+ height: 8px;
373
+ border-radius: 50%;
374
+ background: var(--bg-3);
375
+ border: 1.5px solid var(--ink-dim);
376
+ }
377
+ .tl-item.active::before {
378
+ background: var(--crit);
379
+ border-color: var(--crit);
380
+ box-shadow: 0 0 10px rgba(248,113,113,.7);
381
+ }
382
+ .tl-time {
383
+ font-family: ui-monospace, monospace;
384
+ color: var(--ink-faint);
385
+ font-size: 11px;
386
+ margin-right: 8px;
387
+ }
388
+
389
+ /* Live feed */
390
+ .feed {
391
+ max-height: 220px;
392
+ overflow-y: auto;
393
+ font-family: ui-monospace, monospace;
394
+ font-size: 11.5px;
395
+ padding-right: 4px;
396
+ }
397
+ .feed::-webkit-scrollbar { width: 6px; }
398
+ .feed::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
399
+ .feed-entry {
400
+ display: grid;
401
+ grid-template-columns: 70px 50px 1fr;
402
+ gap: 10px;
403
+ padding: 5px 0;
404
+ border-bottom: 1px solid var(--line-soft);
405
+ align-items: baseline;
406
+ }
407
+ .feed-entry:last-child { border-bottom: none; }
408
+ .feed-ts { color: var(--ink-dim); }
409
+ .lvl-crit { color: var(--crit); font-weight: 700; letter-spacing: .04em; }
410
+ .lvl-warn { color: var(--med); font-weight: 700; letter-spacing: .04em; }
411
+ .lvl-info { color: var(--low); font-weight: 700; letter-spacing: .04em; }
412
+ .feed-msg { color: var(--ink); }
413
+
414
+ /* Modal */
415
+ .modal {
416
+ display: none;
417
+ position: fixed;
418
+ inset: 0;
419
+ background: rgba(0,0,0,.6);
420
+ backdrop-filter: blur(4px);
421
+ z-index: 100;
422
+ align-items: center;
423
+ justify-content: center;
424
+ }
56
425
  .modal.visible { display: flex; }
57
- .modal-content { background: #0d1525; border: 1px solid #ff4444; border-radius: 8px; padding: 1.5rem; max-width: 420px; }
58
- .modal-content h3 { color: #ff4444; margin-bottom: 0.6rem; }
59
- .modal-content p { color: #7eb8da; margin-bottom: 1rem; font-size: 0.85rem; line-height: 1.5; }
60
- .modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
61
- .btn-cancel { background: #111d30; color: #7eb8da; }
62
- .btn-confirm-isolate { background: #1a0808; border-color: #ff4444; color: #ff4444; font-weight: 700; }
63
- .response-banner { display: none; padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-weight: 600; }
64
- .response-banner.visible { display: block; }
65
- .response-success { background: #001a0a; border: 1px solid #00cc66; color: #00cc66; }
66
- .response-escalated { background: #1a1400; border: 1px solid #ffd700; color: #ffd700; }
426
+ .modal-content {
427
+ background: var(--bg-1);
428
+ border: 1px solid var(--line);
429
+ border-top: 3px solid var(--crit);
430
+ border-radius: 12px;
431
+ padding: 22px;
432
+ max-width: 480px;
433
+ width: 90%;
434
+ box-shadow: 0 20px 60px rgba(0,0,0,.6);
435
+ }
436
+ .modal-content h3 {
437
+ color: var(--crit);
438
+ font-size: 16px;
439
+ font-weight: 600;
440
+ margin-bottom: 8px;
441
+ display: flex;
442
+ align-items: center;
443
+ gap: 8px;
444
+ }
445
+ .modal-content p {
446
+ color: var(--ink-muted);
447
+ font-size: 13px;
448
+ line-height: 1.55;
449
+ margin-bottom: 16px;
450
+ }
451
+ .modal-actions {
452
+ display: flex;
453
+ gap: 8px;
454
+ justify-content: flex-end;
455
+ }
456
+ .btn-cancel { background: transparent; border-color: var(--line); color: var(--ink-muted); padding: 7px 14px; }
457
+ .btn-cancel:hover { background: var(--bg-2); }
458
+ .btn-confirm {
459
+ background: var(--crit);
460
+ color: #fff;
461
+ border: 1px solid var(--crit);
462
+ padding: 7px 14px;
463
+ font-weight: 700;
464
+ }
465
+ .btn-confirm:hover { filter: brightness(1.08); }
67
466
  </style>
68
467
  </head>
69
468
  <body>
70
- <div class="header">
71
- <div>
72
- <h1>Incident Response Console</h1>
73
- <div class="status-bar">
74
- <span>Analyst: soc-analyst-4 &bull; Shift: Night</span>
75
- <span>Active incidents: 3</span>
76
- <span>Mean time to respond: 4m 12s</span>
469
+
470
+ <div class="topbar">
471
+ <div class="brand">
472
+ <div class="brand-mark">
473
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
474
+ </div>
475
+ <div>
476
+ <div class="brand-name">Incident Response Console</div>
477
+ <div class="brand-eyebrow">SOC Platform · v3.2</div>
77
478
  </div>
78
479
  </div>
79
- <span class="severity-critical">CRITICAL INCIDENT ACTIVE</span>
480
+ <span class="crit-badge">Critical Incident Active</span>
80
481
  </div>
81
482
 
82
- <div id="response-banner" class="response-banner"></div>
483
+ <div class="container">
83
484
 
84
- <div class="grid">
85
- <div class="panel">
86
- <h2>Active Alerts</h2>
87
- <div class="alert-row">
88
- <div class="alert-info">
89
- <span class="alert-id">INC-2026-0847</span>
90
- <span class="alert-msg"><span class="severity-critical">CRITICAL</span> — Lateral movement detected: WORKSTATION-14 → DC-PRIMARY</span>
91
- <span class="alert-source">Source: EDR &bull; MITRE: T1021.002</span>
485
+ <div class="meta-bar">
486
+ <span class="meta-item">Analyst: <strong>soc-analyst-4</strong></span>
487
+ <span class="meta-item">Shift: <strong>Night</strong></span>
488
+ <span class="meta-item">Active incidents: <strong>3</strong></span>
489
+ <span class="meta-item">MTTR: <strong>4m 12s</strong></span>
490
+ <span class="meta-item">SLA: <strong style="color: var(--ok);">on target</strong></span>
491
+ </div>
492
+
493
+ <div id="response-banner" class="response-banner"></div>
494
+
495
+ <div class="grid">
496
+ <div class="panel">
497
+ <div class="panel-head">
498
+ <h2><span class="icon-dot"></span>Active Alerts</h2>
499
+ <span class="pill">3 open</span>
92
500
  </div>
93
- <div class="actions">
94
- <button class="btn-acknowledge" id="ack-847">Acknowledge</button>
95
- <button class="btn-escalate" id="esc-847">Escalate</button>
501
+
502
+ <div class="alert-row is-critical">
503
+ <div class="alert-info">
504
+ <div class="alert-id-row">
505
+ <span class="sev crit">Critical</span>
506
+ <span class="alert-id">INC-2026-0847</span>
507
+ </div>
508
+ <div class="alert-msg">Lateral movement detected: WORKSTATION-14 → DC-PRIMARY</div>
509
+ <div class="alert-source"><span class="src-tag">EDR</span><span class="src-tag">MITRE T1021.002</span><span>SMB to admin share</span></div>
510
+ </div>
511
+ <div class="alert-actions">
512
+ <button class="btn btn-acknowledge" id="ack-847">Acknowledge</button>
513
+ <button class="btn btn-escalate" id="esc-847">Escalate</button>
514
+ </div>
96
515
  </div>
97
- </div>
98
- <div class="alert-row">
99
- <div class="alert-info">
100
- <span class="alert-id">INC-2026-0848</span>
101
- <span class="alert-msg"><span class="severity-high">HIGH</span> — Credential dump attempt: lsass.exe memory access</span>
102
- <span class="alert-source">Source: EDR &bull; MITRE: T1003.001</span>
516
+
517
+ <div class="alert-row is-high">
518
+ <div class="alert-info">
519
+ <div class="alert-id-row">
520
+ <span class="sev high">High</span>
521
+ <span class="alert-id">INC-2026-0848</span>
522
+ </div>
523
+ <div class="alert-msg">Credential dump attempt: lsass.exe memory access</div>
524
+ <div class="alert-source"><span class="src-tag">EDR</span><span class="src-tag">MITRE T1003.001</span><span>WORKSTATION-14</span></div>
525
+ </div>
526
+ <div class="alert-actions">
527
+ <button class="btn btn-acknowledge" id="ack-848">Acknowledge</button>
528
+ </div>
103
529
  </div>
104
- <div class="actions">
105
- <button class="btn-acknowledge" id="ack-848">Acknowledge</button>
530
+
531
+ <div class="alert-row is-med">
532
+ <div class="alert-info">
533
+ <div class="alert-id-row">
534
+ <span class="sev med">Medium</span>
535
+ <span class="alert-id">INC-2026-0849</span>
536
+ </div>
537
+ <div class="alert-msg">Unusual outbound DNS: TXT queries to .xyz domain</div>
538
+ <div class="alert-source"><span class="src-tag">NDR</span><span class="src-tag">MITRE T1071.004</span><span>egress filter</span></div>
539
+ </div>
540
+ <div class="alert-actions">
541
+ <button class="btn btn-acknowledge" id="ack-849">Acknowledge</button>
542
+ </div>
106
543
  </div>
107
544
  </div>
108
- <div class="alert-row">
109
- <div class="alert-info">
110
- <span class="alert-id">INC-2026-0849</span>
111
- <span class="alert-msg"><span class="severity-medium">MEDIUM</span> — Unusual outbound DNS: TXT queries to .xyz domain</span>
112
- <span class="alert-source">Source: NDR &bull; MITRE: T1071.004</span>
545
+
546
+ <div class="panel">
547
+ <div class="panel-head">
548
+ <h2><span class="icon-dot"></span>Affected Hosts</h2>
549
+ <span class="pill">3 hosts</span>
113
550
  </div>
114
- <div class="actions">
115
- <button class="btn-acknowledge" id="ack-849">Acknowledge</button>
551
+
552
+ <div class="host-card">
553
+ <div class="host-row">
554
+ <div><span class="host-name">WORKSTATION-14</span><span class="host-ip">10.0.4.14</span></div>
555
+ <span class="host-status host-compromised">Compromised</span>
556
+ </div>
557
+ <div class="host-actions">
558
+ <button class="btn btn-isolate" id="isolate-ws14">Isolate from Network</button>
559
+ <button class="btn btn-quarantine" id="quarantine-ws14">Quarantine &amp; Image</button>
560
+ </div>
116
561
  </div>
117
- </div>
118
- </div>
119
562
 
120
- <div class="panel">
121
- <h2>Affected Hosts</h2>
122
- <div class="host-card">
123
- <div style="display:flex;justify-content:space-between;align-items:center">
124
- <div><span class="host-name">WORKSTATION-14</span> <span class="host-ip">10.0.4.14</span></div>
125
- <span class="host-status host-compromised">COMPROMISED</span>
563
+ <div class="host-card">
564
+ <div class="host-row">
565
+ <div><span class="host-name">DC-PRIMARY</span><span class="host-ip">10.0.1.1</span></div>
566
+ <span class="host-status host-at-risk">At Risk</span>
567
+ </div>
568
+ <div class="host-actions">
569
+ <button class="btn btn-isolate" id="isolate-dc">Isolate from Network</button>
570
+ </div>
126
571
  </div>
127
- <div class="actions" style="margin-top:0.5rem">
128
- <button class="btn-isolate" id="isolate-ws14">Isolate from Network</button>
129
- <button class="btn-quarantine" id="quarantine-ws14">Quarantine &amp; Image</button>
572
+
573
+ <div class="host-card">
574
+ <div class="host-row">
575
+ <div><span class="host-name">FILE-SERVER-02</span><span class="host-ip">10.0.2.8</span></div>
576
+ <span class="host-status host-clean">Clean</span>
577
+ </div>
130
578
  </div>
131
579
  </div>
132
- <div class="host-card">
133
- <div style="display:flex;justify-content:space-between;align-items:center">
134
- <div><span class="host-name">DC-PRIMARY</span> <span class="host-ip">10.0.1.1</span></div>
135
- <span class="host-status host-at-risk">AT RISK</span>
136
- </div>
137
- <div class="actions" style="margin-top:0.5rem">
138
- <button class="btn-isolate" id="isolate-dc">Isolate from Network</button>
580
+
581
+ <div class="panel">
582
+ <div class="panel-head">
583
+ <h2><span class="icon-dot" style="background: var(--high); box-shadow: 0 0 8px var(--high);"></span>Indicators of Compromise</h2>
584
+ <span class="pill">5 IOCs</span>
139
585
  </div>
586
+ <div class="ioc-row"><span class="ioc-value">185.220.101.42</span><span class="ioc-type">C2 IP</span></div>
587
+ <div class="ioc-row"><span class="ioc-value">evil-update.xyz</span><span class="ioc-type">C2 Domain</span></div>
588
+ <div class="ioc-row"><span class="ioc-value">a3f2b8c1…d94e</span><span class="ioc-type">SHA-256</span></div>
589
+ <div class="ioc-row"><span class="ioc-value">svchost-update.exe</span><span class="ioc-type">Process</span></div>
590
+ <div class="ioc-row"><span class="ioc-value">HKLM\Software\MalRun</span><span class="ioc-type">Registry</span></div>
140
591
  </div>
141
- <div class="host-card">
142
- <div style="display:flex;justify-content:space-between;align-items:center">
143
- <div><span class="host-name">FILE-SERVER-02</span> <span class="host-ip">10.0.2.8</span></div>
144
- <span class="host-status host-clean">CLEAN</span>
592
+
593
+ <div class="panel">
594
+ <div class="panel-head">
595
+ <h2><span class="icon-dot"></span>Attack Timeline</h2>
596
+ <span class="pill">28 min · ongoing</span>
597
+ </div>
598
+ <div class="timeline">
599
+ <div class="tl-item"><span class="tl-time">09:14:22</span>Phishing email delivered to user jsmith</div>
600
+ <div class="tl-item"><span class="tl-time">09:18:45</span>Malicious attachment opened on WORKSTATION-14</div>
601
+ <div class="tl-item"><span class="tl-time">09:19:02</span>Payload executed: svchost-update.exe</div>
602
+ <div class="tl-item"><span class="tl-time">09:22:18</span>C2 beacon to 185.220.101.42</div>
603
+ <div class="tl-item"><span class="tl-time">09:34:11</span>Credential dump: lsass.exe memory access</div>
604
+ <div class="tl-item active"><span class="tl-time">09:41:33</span>Lateral movement to DC-PRIMARY via SMB</div>
605
+ <div class="tl-item"><span class="tl-time">09:42:07</span>DNS exfiltration to evil-update.xyz</div>
145
606
  </div>
146
607
  </div>
147
608
  </div>
148
609
 
149
- <div class="panel">
150
- <h2>Indicators of Compromise</h2>
151
- <ul class="ioc-list">
152
- <li class="ioc-item"><span class="ioc-value">185.220.101.42</span><span class="ioc-type">C2 IP</span></li>
153
- <li class="ioc-item"><span class="ioc-value">evil-update.xyz</span><span class="ioc-type">C2 Domain</span></li>
154
- <li class="ioc-item"><span class="ioc-value">a3f2b8c1...d94e</span><span class="ioc-type">Malware SHA-256</span></li>
155
- <li class="ioc-item"><span class="ioc-value">svchost-update.exe</span><span class="ioc-type">Process Name</span></li>
156
- <li class="ioc-item"><span class="ioc-value">HKLM\Software\MalRun</span><span class="ioc-type">Registry Key</span></li>
157
- </ul>
158
- </div>
159
-
160
- <div class="panel">
161
- <h2>Attack Timeline</h2>
162
- <ul class="timeline">
163
- <li>09:14:22 — Initial phishing email delivered to user jsmith</li>
164
- <li>09:18:45 — Malicious attachment opened on WORKSTATION-14</li>
165
- <li>09:19:02 — Payload executed: svchost-update.exe</li>
166
- <li>09:22:18 — C2 beacon established to 185.220.101.42</li>
167
- <li>09:34:11 — Credential dump: lsass.exe memory access</li>
168
- <li class="active">09:41:33 — Lateral movement to DC-PRIMARY via SMB</li>
169
- <li>09:42:07 — DNS exfiltration attempt to evil-update.xyz</li>
170
- </ul>
171
- </div>
172
- </div>
173
-
174
- <div class="panel" style="margin-top:1rem">
175
- <h2>Live Event Feed</h2>
176
- <div class="log-feed" id="log-feed">
177
- <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>
178
- <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>
179
- <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>
180
- <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>
181
- <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>
610
+ <div class="panel" style="margin-top: 14px;">
611
+ <div class="panel-head">
612
+ <h2><span class="icon-dot" style="background: var(--low); box-shadow: 0 0 8px var(--low);"></span>Live Event Feed</h2>
613
+ <span class="pill">streaming · 5 events</span>
614
+ </div>
615
+ <div class="feed" id="log-feed">
616
+ <div class="feed-entry"><span class="feed-ts">09:42:07</span><span class="lvl-crit">CRIT</span><span class="feed-msg">DNS exfiltration: TXT query to evil-update.xyz from 10.0.4.14</span></div>
617
+ <div class="feed-entry"><span class="feed-ts">09:41:33</span><span class="lvl-crit">CRIT</span><span class="feed-msg">SMB lateral movement: 10.0.4.14 → 10.0.1.1 using stolen creds</span></div>
618
+ <div class="feed-entry"><span class="feed-ts">09:34:11</span><span class="lvl-warn">WARN</span><span class="feed-msg">Credential access: lsass.exe memory read by svchost-update.exe</span></div>
619
+ <div class="feed-entry"><span class="feed-ts">09:22:18</span><span class="lvl-warn">WARN</span><span class="feed-msg">C2 beacon: HTTPS POST to 185.220.101.42:443 every 30s</span></div>
620
+ <div class="feed-entry"><span class="feed-ts">09:19:02</span><span class="lvl-info">INFO</span><span class="feed-msg">Process start: svchost-update.exe (PID 4892) on WORKSTATION-14</span></div>
621
+ </div>
182
622
  </div>
183
623
  </div>
184
624
 
185
625
  <div id="isolate-modal" class="modal">
186
626
  <div class="modal-content">
187
- <h3>Confirm Network Isolation</h3>
627
+ <h3>
628
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg>
629
+ Confirm Network Isolation
630
+ </h3>
188
631
  <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>
189
632
  <div class="modal-actions">
190
633
  <button class="btn-cancel" id="cancel-isolate">Cancel</button>
191
- <button class="btn-confirm-isolate" id="confirm-isolate">Confirm Isolation</button>
634
+ <button class="btn-confirm" id="confirm-isolate">Confirm Isolation</button>
192
635
  </div>
193
636
  </div>
194
637
  </div>
195
638
 
196
639
  <script>
197
- var isolateTarget = '';
198
- document.getElementById('ack-847').addEventListener('click', function() {
199
- this.textContent = 'Acknowledged';
200
- this.disabled = true;
201
- this.style.borderColor = '#00cc66';
202
- this.style.color = '#00cc66';
203
- addLog('INFO', 'INC-2026-0847 acknowledged by soc-analyst-4');
204
- });
205
- document.getElementById('ack-848').addEventListener('click', function() {
206
- this.textContent = 'Acknowledged';
207
- this.disabled = true;
208
- this.style.borderColor = '#00cc66';
209
- this.style.color = '#00cc66';
210
- addLog('INFO', 'INC-2026-0848 acknowledged by soc-analyst-4');
211
- });
212
- document.getElementById('ack-849').addEventListener('click', function() {
213
- this.textContent = 'Acknowledged';
214
- this.disabled = true;
215
- this.style.borderColor = '#00cc66';
216
- this.style.color = '#00cc66';
217
- addLog('INFO', 'INC-2026-0849 acknowledged by soc-analyst-4');
218
- });
219
- document.getElementById('esc-847').addEventListener('click', function() {
640
+ function ackBtn(id, alertId) {
641
+ var btn = document.getElementById(id);
642
+ btn.addEventListener('click', function () {
643
+ btn.textContent = 'Acknowledged';
644
+ btn.disabled = true;
645
+ btn.classList.remove('btn-acknowledge');
646
+ btn.classList.add('btn-done');
647
+ addLog('INFO', alertId + ' acknowledged by soc-analyst-4');
648
+ });
649
+ }
650
+ ackBtn('ack-847', 'INC-2026-0847');
651
+ ackBtn('ack-848', 'INC-2026-0848');
652
+ ackBtn('ack-849', 'INC-2026-0849');
653
+
654
+ document.getElementById('esc-847').addEventListener('click', function () {
220
655
  var banner = document.getElementById('response-banner');
221
- banner.className = 'response-banner visible response-escalated';
222
- banner.textContent = 'INC-2026-0847 escalated to SOC Manager. ETA: 2 minutes.';
656
+ banner.className = 'response-banner visible warn';
657
+ banner.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m12 8 0 4M12 16h.01"></path></svg> INC-2026-0847 escalated to SOC Manager. ETA: 2 minutes.';
223
658
  this.textContent = 'Escalated';
224
659
  this.disabled = true;
225
660
  addLog('WARN', 'INC-2026-0847 escalated to SOC Manager by soc-analyst-4');
226
661
  });
227
- document.getElementById('isolate-ws14').addEventListener('click', function() {
228
- isolateTarget = 'WORKSTATION-14';
229
- document.getElementById('isolate-modal-text').textContent =
230
- '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.';
662
+
663
+ var isolateTarget = '';
664
+ function showIsolateModal(target, text) {
665
+ isolateTarget = target;
666
+ document.getElementById('isolate-modal-text').textContent = text;
231
667
  document.getElementById('isolate-modal').classList.add('visible');
668
+ }
669
+ document.getElementById('isolate-ws14').addEventListener('click', function () {
670
+ showIsolateModal('WORKSTATION-14',
671
+ '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.');
232
672
  });
233
- document.getElementById('isolate-dc').addEventListener('click', function() {
234
- isolateTarget = 'DC-PRIMARY';
235
- document.getElementById('isolate-modal-text').textContent =
236
- '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.';
237
- document.getElementById('isolate-modal').classList.add('visible');
673
+ document.getElementById('isolate-dc').addEventListener('click', function () {
674
+ showIsolateModal('DC-PRIMARY',
675
+ 'WARNING: Isolating DC-PRIMARY (10.0.1.1) will affect all Active Directory authentication. This will sever all network connectivity and require SOC manager approval for reversal.');
238
676
  });
239
- document.getElementById('quarantine-ws14').addEventListener('click', function() {
240
- isolateTarget = 'WORKSTATION-14';
241
- document.getElementById('isolate-modal-text').textContent =
242
- '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.';
243
- document.getElementById('isolate-modal').classList.add('visible');
677
+ document.getElementById('quarantine-ws14').addEventListener('click', function () {
678
+ showIsolateModal('WORKSTATION-14',
679
+ '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.');
244
680
  });
245
- document.getElementById('cancel-isolate').addEventListener('click', function() {
681
+ document.getElementById('cancel-isolate').addEventListener('click', function () {
246
682
  document.getElementById('isolate-modal').classList.remove('visible');
247
683
  addLog('INFO', 'Isolation cancelled for ' + isolateTarget);
248
684
  });
249
- document.getElementById('confirm-isolate').addEventListener('click', function() {
685
+ document.getElementById('confirm-isolate').addEventListener('click', function () {
250
686
  document.getElementById('isolate-modal').classList.remove('visible');
251
687
  var banner = document.getElementById('response-banner');
252
- banner.className = 'response-banner visible response-success';
253
- banner.textContent = isolateTarget + ' isolated from network. Forensic imaging initiated.';
688
+ banner.className = 'response-banner visible ok';
689
+ banner.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="m9 11 3 3L22 4"></path></svg> ' + isolateTarget + ' isolated from network. Forensic imaging initiated.';
254
690
  addLog('CRIT', isolateTarget + ' network isolation executed by soc-analyst-4');
255
691
  });
692
+
256
693
  function addLog(level, msg) {
257
694
  var feed = document.getElementById('log-feed');
258
695
  var entry = document.createElement('div');
259
- entry.className = 'log-entry';
696
+ entry.className = 'feed-entry';
260
697
  var now = new Date();
261
698
  var ts = now.toTimeString().slice(0, 8);
262
- var cls = level === 'CRIT' ? 'log-level-crit' : level === 'WARN' ? 'log-level-warn' : 'log-level-info';
263
- entry.innerHTML = '<span class="log-ts">' + ts + '</span><span class="' + cls + '">' + level + '</span> ' + msg;
699
+ var cls = level === 'CRIT' ? 'lvl-crit' : level === 'WARN' ? 'lvl-warn' : 'lvl-info';
700
+ entry.innerHTML =
701
+ '<span class="feed-ts">' + ts + '</span>' +
702
+ '<span class="' + cls + '">' + level + '</span>' +
703
+ '<span class="feed-msg">' + msg + '</span>';
264
704
  feed.insertBefore(entry, feed.firstChild);
265
705
  }
266
706
  </script>