Hugging Face's logo

Spaces:
eaglelandsonce
/
5GAnimation
Running

App Files Community
eaglelandsonce commited on
Commit
e3ba9ee
Β·
verified Β·
1 Parent(s): 7072f89

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +812 -18
index.html CHANGED
@@ -1,19 +1,813 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>T-Mobile 5G Core Β· NOC Command Center</title>
7
+ <style>
8
+ :root {
9
+ --magenta: #E20074;
10
+ --magenta-dark: #a8004f;
11
+ --magenta-glow: rgba(226,0,116,0.4);
12
+ --bg: #060810;
13
+ --panel: #0b0f1e;
14
+ --panel-border: #1a2040;
15
+ --text: #e0e8ff;
16
+ --text-dim: #6a7a9a;
17
+ --green: #00ff88;
18
+ --green-glow: rgba(0,255,136,0.3);
19
+ --yellow: #ffd700;
20
+ --orange: #ff8c00;
21
+ --red: #ff2244;
22
+ --red-glow: rgba(255,34,68,0.4);
23
+ --cyan: #00d4ff;
24
+ --gold: #fbbf24;
25
+ --font: 'Courier New', monospace;
26
+ }
27
+ * { box-sizing: border-box; margin: 0; padding: 0; }
28
+ body {
29
+ background: var(--bg);
30
+ color: var(--text);
31
+ font-family: var(--font);
32
+ height: 100vh;
33
+ display: flex;
34
+ flex-direction: column;
35
+ overflow: hidden;
36
+ }
37
+
38
+ /* HEADER */
39
+ header {
40
+ background: linear-gradient(90deg, #0d0018 0%, #1a0030 50%, #0d0018 100%);
41
+ border-bottom: 2px solid var(--magenta);
42
+ padding: 6px 16px;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: space-between;
46
+ flex-shrink: 0;
47
+ box-shadow: 0 0 24px var(--magenta-glow);
48
+ }
49
+ .logo { display: flex; align-items: center; gap: 10px; }
50
+ .logo-tm { font-size: 24px; font-weight: 900; color: var(--magenta); text-shadow: 0 0 16px var(--magenta-glow); letter-spacing: -1px; }
51
+ .logo-sub { font-size: 10px; color: var(--text-dim); line-height: 1.4; }
52
+ .logo-sub span { color: var(--cyan); }
53
+ .header-stats { display: flex; gap: 20px; }
54
+ .hstat { text-align: center; }
55
+ .hstat-val { font-size: 16px; font-weight: bold; color: var(--cyan); text-shadow: 0 0 8px rgba(0,212,255,0.5); }
56
+ .hstat-lbl { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
57
+ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green-glow); animation: pdot 1.5s ease-in-out infinite; }
58
+ @keyframes pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
59
+ .system-time { font-size: 10px; color: var(--text-dim); }
60
+
61
+ /* MAIN GRID */
62
+ main { display: grid; grid-template-columns: 1fr 300px 320px; flex: 1; overflow: hidden; }
63
+
64
+ .panel { border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; overflow: hidden; }
65
+ .panel:last-child { border-right: none; }
66
+ .panel-header {
67
+ background: linear-gradient(90deg, rgba(226,0,116,0.08), transparent);
68
+ border-bottom: 1px solid var(--panel-border);
69
+ padding: 6px 12px; font-size: 9px; text-transform: uppercase;
70
+ letter-spacing: 2px; color: var(--magenta); flex-shrink: 0;
71
+ display: flex; align-items: center; gap: 6px;
72
+ }
73
+ .panel-header::before { content:''; width:5px; height:5px; background:var(--magenta); border-radius:1px; box-shadow:0 0 6px var(--magenta-glow); }
74
+
75
+ /* TOPOLOGY */
76
+ #topology-panel { background: var(--panel); }
77
+ #topology-svg { flex: 1; width: 100%; }
78
+
79
+ /* ORCHESTRATOR CARD */
80
+ #orchestrator-card {
81
+ margin: 6px 8px 4px;
82
+ background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(226,0,116,0.06));
83
+ border: 1px solid var(--gold);
84
+ border-radius: 8px;
85
+ padding: 8px 10px;
86
+ flex-shrink: 0;
87
+ box-shadow: 0 0 16px rgba(251,191,36,0.1);
88
+ }
89
+ .orch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
90
+ .orch-icon {
91
+ width: 28px; height: 28px; border-radius: 6px;
92
+ background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(226,0,116,0.2));
93
+ border: 1.5px solid var(--gold);
94
+ display: flex; align-items: center; justify-content: center;
95
+ font-size: 14px; flex-shrink: 0;
96
+ }
97
+ .orch-name { font-size: 11px; font-weight: bold; color: var(--gold); }
98
+ .orch-role { font-size: 8px; color: var(--text-dim); }
99
+ .orch-badge {
100
+ margin-left: auto; font-size: 8px; padding: 2px 6px; border-radius: 10px;
101
+ font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
102
+ background: rgba(251,191,36,0.15); color: var(--gold); border: 1px solid var(--gold);
103
+ }
104
+ #orch-decision {
105
+ font-size: 9px; color: var(--text-dim); line-height: 1.4;
106
+ min-height: 12px; font-style: italic;
107
+ }
108
+ #orch-decision span { color: var(--gold); font-style: normal; }
109
+
110
+ /* AGENT LIST */
111
+ #agent-panel { background: var(--panel); overflow: hidden; }
112
+ #agent-list { flex: 1; overflow-y: auto; padding: 3px 8px; display: flex; flex-direction: column; gap: 3px; }
113
+ #agent-list::-webkit-scrollbar { width: 3px; }
114
+ #agent-list::-webkit-scrollbar-thumb { background: var(--magenta-dark); border-radius: 2px; }
115
+
116
+ .agent-card {
117
+ background: rgba(255,255,255,0.025);
118
+ border: 1px solid var(--panel-border);
119
+ border-radius: 5px; padding: 5px 9px;
120
+ transition: border-color 0.3s, box-shadow 0.3s;
121
+ flex-shrink: 0;
122
+ }
123
+ .agent-card.working { border-color: var(--magenta); box-shadow: 0 0 10px rgba(226,0,116,0.12); }
124
+ .agent-card.resolving{ border-color: var(--yellow); box-shadow: 0 0 10px rgba(255,215,0,0.12); }
125
+ .agent-card.done { border-color: var(--green); box-shadow: 0 0 10px var(--green-glow); }
126
+
127
+ .agent-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
128
+ .agent-avatar {
129
+ width: 24px; height: 24px; border-radius: 50%;
130
+ display: flex; align-items: center; justify-content: center;
131
+ font-size: 8px; font-weight: bold; flex-shrink: 0; border: 1.5px solid;
132
+ }
133
+ .agent-name { font-size: 11px; font-weight: bold; color: var(--text); }
134
+ .agent-spec { font-size: 8px; color: var(--text-dim); }
135
+ .agent-badge {
136
+ margin-left: auto; font-size: 8px; padding: 1px 6px; border-radius: 8px;
137
+ font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
138
+ }
139
+ .badge-idle { background: rgba(106,122,154,0.15); color: var(--text-dim); border: 1px solid #2a3050; }
140
+ .badge-analyzing { background: rgba(226,0,116,0.15); color: var(--magenta); border: 1px solid var(--magenta); animation: bb 1s infinite; }
141
+ .badge-resolving { background: rgba(255,215,0,0.15); color: var(--yellow); border: 1px solid var(--yellow); animation: bb 0.7s infinite; }
142
+ .badge-done { background: rgba(0,255,136,0.15); color: var(--green); border: 1px solid var(--green); }
143
+ @keyframes bb { 0%,100%{opacity:1} 50%{opacity:0.4} }
144
+
145
+ .agent-task { font-size: 9px; color: var(--text-dim); margin-bottom: 4px; min-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
146
+ .progress-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
147
+ .progress-fill { height: 100%; border-radius: 2px; width: 0%; transition: width 0.3s linear; }
148
+ .fill-a { background: linear-gradient(90deg, var(--magenta), #ff66b3); }
149
+ .fill-r { background: linear-gradient(90deg, var(--yellow), #ffaa00); }
150
+ .fill-d { background: linear-gradient(90deg, var(--green), #00cc66); }
151
+
152
+ /* ERROR QUEUE */
153
+ #error-queue-section { border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; height: 140px; flex-shrink: 0; }
154
+ #eq-header { padding: 4px 12px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; }
155
+ #queue-count { font-size: 13px; font-weight: bold; color: var(--red); text-shadow: 0 0 8px var(--red-glow); }
156
+ #error-queue { flex: 1; overflow-y: auto; padding: 3px 8px; }
157
+ #error-queue::-webkit-scrollbar { width: 3px; }
158
+ #error-queue::-webkit-scrollbar-thumb { background: #2a1030; border-radius: 2px; }
159
+
160
+ .queue-item { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 3px; margin-bottom: 2px; font-size: 9px; animation: slideIn 0.3s ease; border-left: 2px solid; }
161
+ @keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
162
+ .queue-item.CRITICAL { border-color: var(--red); background: rgba(255,34,68,0.05); }
163
+ .queue-item.HIGH { border-color: var(--orange); background: rgba(255,140,0,0.05); }
164
+ .queue-item.MEDIUM { border-color: var(--yellow); background: rgba(255,215,0,0.05); }
165
+ .queue-item.LOW { border-color: var(--text-dim); background: rgba(255,255,255,0.02); }
166
+ .sev-badge { font-size: 7px; font-weight: bold; padding: 1px 4px; border-radius: 2px; flex-shrink: 0; }
167
+ .sev-CRITICAL { background: rgba(255,34,68,0.25); color: var(--red); }
168
+ .sev-HIGH { background: rgba(255,140,0,0.25); color: var(--orange); }
169
+ .sev-MEDIUM { background: rgba(255,215,0,0.25); color: var(--yellow); }
170
+ .sev-LOW { background: rgba(106,122,154,0.2); color: var(--text-dim); }
171
+ .queue-nf { color: var(--cyan); font-weight: bold; }
172
+
173
+ /* METRICS PANEL */
174
+ #metrics-panel { background: var(--panel); overflow: hidden; }
175
+ #kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--panel-border); border-bottom: 1px solid var(--panel-border); flex-shrink: 0; }
176
+ .kpi-card { background: var(--panel); padding: 8px 12px; position: relative; overflow: hidden; }
177
+ .kpi-card::after { content:''; position:absolute; bottom:0;left:0;right:0;height:1px; background: linear-gradient(90deg,transparent,var(--magenta),transparent); opacity:0.25; }
178
+ .kpi-val { font-size: 19px; font-weight: bold; color: var(--cyan); text-shadow: 0 0 8px rgba(0,212,255,0.4); line-height: 1; }
179
+ .kpi-val.danger { color: var(--red); text-shadow: 0 0 8px var(--red-glow); }
180
+ .kpi-val.warn { color: var(--yellow); text-shadow: 0 0 8px rgba(255,215,0,0.4); }
181
+ .kpi-lbl { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
182
+ .kpi-trend { position:absolute; top:8px; right:10px; font-size:12px; }
183
+ canvas.sparkline { display:block; margin-top:3px; opacity:0.7; }
184
+
185
+ #event-log-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
186
+ #el-header { padding: 5px 12px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; }
187
+ #event-log { flex: 1; overflow-y: auto; padding: 4px 8px; font-size: 9px; line-height: 1.6; }
188
+ #event-log::-webkit-scrollbar { width: 3px; }
189
+ #event-log::-webkit-scrollbar-thumb { background: #1a2040; border-radius: 2px; }
190
+ .log-entry { display: flex; gap: 6px; padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.02); animation: fadeIn 0.4s ease; }
191
+ @keyframes fadeIn { from{opacity:0} to{opacity:1} }
192
+ .log-time { color: var(--text-dim); flex-shrink: 0; }
193
+ .log-type-ERROR { color: var(--red); }
194
+ .log-type-WARN { color: var(--orange); }
195
+ .log-type-RESOLVE { color: var(--green); }
196
+ .log-type-INFO { color: var(--cyan); }
197
+ .log-type-ORCH { color: var(--gold); }
198
+ .log-msg { color: var(--text); flex: 1; }
199
+
200
+ /* SVG */
201
+ .link-line { stroke-dasharray: 6 4; animation: flow 1.5s linear infinite; }
202
+ @keyframes flow { to { stroke-dashoffset: -20; } }
203
+
204
+ /* Scanlines */
205
+ body::after {
206
+ content:''; position:fixed; top:0;left:0;right:0;bottom:0; pointer-events:none; z-index:9999;
207
+ background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px);
208
+ }
209
+ </style>
210
+ </head>
211
+ <body>
212
+
213
+ <header>
214
+ <div class="logo">
215
+ <div class="logo-tm">T&#8209;Mobile</div>
216
+ <div class="logo-sub"><span>5G CORE NETWORK</span><br>NOC COMMAND CENTER</div>
217
+ </div>
218
+ <div class="header-stats">
219
+ <div class="hstat"><div class="hstat-val" id="h-ues">0</div><div class="hstat-lbl">Active UEs</div></div>
220
+ <div class="hstat"><div class="hstat-val" id="h-throughput">0</div><div class="hstat-lbl">Gbps</div></div>
221
+ <div class="hstat"><div class="hstat-val" id="h-latency">0</div><div class="hstat-lbl">Latency ms</div></div>
222
+ <div class="hstat"><div class="hstat-val" id="h-resolved">0</div><div class="hstat-lbl">Resolved</div></div>
223
+ <div class="hstat"><div class="hstat-val" id="h-errors">0</div><div class="hstat-lbl">Active Errors</div></div>
224
+ </div>
225
+ <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px">
226
+ <div style="display:flex;align-items:center;gap:6px;font-size:10px">
227
+ <div class="pulse-dot"></div>
228
+ <span style="color:var(--green)">SYSTEM OPERATIONAL</span>
229
+ </div>
230
+ <div class="system-time" id="system-time">--:--:--</div>
231
+ </div>
232
+ </header>
233
+
234
+ <main>
235
+
236
+ <!-- PANEL 1: TOPOLOGY -->
237
+ <div class="panel" id="topology-panel">
238
+ <div class="panel-header">5G Core Network Topology</div>
239
+ <svg id="topology-svg" viewBox="0 0 700 560" preserveAspectRatio="xMidYMid meet">
240
+ <defs>
241
+ <filter id="glow-g"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
242
+ <filter id="glow-r"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
243
+ <filter id="glow-o"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
244
+ <radialGradient id="bg-grad" cx="50%" cy="50%" r="50%">
245
+ <stop offset="0%" stop-color="#0a1428"/><stop offset="100%" stop-color="#060810"/>
246
+ </radialGradient>
247
+ </defs>
248
+ <rect width="700" height="560" fill="url(#bg-grad)"/>
249
+ <g stroke="#1a2040" stroke-width="0.5" opacity="0.3">
250
+ <line x1="0" y1="140" x2="700" y2="140"/><line x1="0" y1="280" x2="700" y2="280"/>
251
+ <line x1="0" y1="420" x2="700" y2="420"/><line x1="175" y1="0" x2="175" y2="560"/>
252
+ <line x1="350" y1="0" x2="350" y2="560"/><line x1="525" y1="0" x2="525" y2="560"/>
253
+ </g>
254
+ <g id="links-layer"></g>
255
+ <g id="nodes-layer"></g>
256
+ <g transform="translate(12,514)">
257
+ <circle cx="5" cy="5" r="4" fill="#0d1a30" stroke="#00ff88" stroke-width="1.5"/>
258
+ <text x="13" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">Healthy</text>
259
+ <circle cx="65" cy="5" r="4" fill="#2a0010" stroke="#ff2244" stroke-width="1.5"/>
260
+ <text x="73" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">Alert</text>
261
+ <line x1="112" y1="5" x2="134" y2="5" stroke="#00d4ff" stroke-width="1.5" stroke-dasharray="4 2"/>
262
+ <text x="138" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">Data Flow</text>
263
+ <rect x="200" y="0" width="8" height="10" fill="none" stroke="#e20074" stroke-width="1" rx="1"/>
264
+ <text x="212" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">5G gNB</text>
265
+ </g>
266
+ </svg>
267
+ </div>
268
+
269
+ <!-- PANEL 2: ORCHESTRATOR + AGENTS + QUEUE -->
270
+ <div class="panel" id="agent-panel">
271
+ <div class="panel-header">AI Agent Dispatch</div>
272
+
273
+ <!-- ORCHESTRATOR -->
274
+ <div id="orchestrator-card">
275
+ <div class="orch-top">
276
+ <div class="orch-icon">🧠</div>
277
+ <div>
278
+ <div class="orch-name">NEXUS ORCHESTRATOR</div>
279
+ <div class="orch-role">Priority Routing Β· Agent Coordination Β· Escalation</div>
280
+ </div>
281
+ <div class="orch-badge" id="orch-badge">ACTIVE</div>
282
+ </div>
283
+ <div id="orch-decision">Monitoring network for anomalies…</div>
284
+ </div>
285
+
286
+ <div id="agent-list"></div>
287
+
288
+ <div id="error-queue-section">
289
+ <div id="eq-header">
290
+ <span>Priority Queue</span>
291
+ <span id="queue-count">0</span>
292
+ </div>
293
+ <div id="error-queue"></div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- PANEL 3: METRICS + LOG -->
298
+ <div class="panel" id="metrics-panel">
299
+ <div class="panel-header">NOC Live Metrics</div>
300
+ <div id="kpi-grid">
301
+ <div class="kpi-card">
302
+ <div class="kpi-val" id="kpi-ues">9,847</div>
303
+ <div class="kpi-lbl">Active UEs</div>
304
+ <div class="kpi-trend">πŸ“Ά</div>
305
+ <canvas class="sparkline" id="spark-ues" width="130" height="20"></canvas>
306
+ </div>
307
+ <div class="kpi-card">
308
+ <div class="kpi-val" id="kpi-throughput">142.3</div>
309
+ <div class="kpi-lbl">Throughput Gbps</div>
310
+ <div class="kpi-trend">⬆</div>
311
+ <canvas class="sparkline" id="spark-tp" width="130" height="20"></canvas>
312
+ </div>
313
+ <div class="kpi-card">
314
+ <div class="kpi-val" id="kpi-latency">8.2</div>
315
+ <div class="kpi-lbl">Avg Latency ms</div>
316
+ <div class="kpi-trend">⬇</div>
317
+ <canvas class="sparkline" id="spark-lat" width="130" height="20"></canvas>
318
+ </div>
319
+ <div class="kpi-card">
320
+ <div class="kpi-val" id="kpi-loss">0.03</div>
321
+ <div class="kpi-lbl">Packet Loss %</div>
322
+ <div class="kpi-trend">πŸ“‰</div>
323
+ <canvas class="sparkline" id="spark-loss" width="130" height="20"></canvas>
324
+ </div>
325
+ <div class="kpi-card">
326
+ <div class="kpi-val" id="kpi-qd">0</div>
327
+ <div class="kpi-lbl">Queue Depth</div>
328
+ <div class="kpi-trend">⏳</div>
329
+ <canvas class="sparkline" id="spark-qd" width="130" height="20"></canvas>
330
+ </div>
331
+ <div class="kpi-card">
332
+ <div class="kpi-val" id="kpi-mttr">β€”</div>
333
+ <div class="kpi-lbl">MTTR sec</div>
334
+ <div class="kpi-trend">πŸ”§</div>
335
+ <canvas class="sparkline" id="spark-mttr" width="130" height="20"></canvas>
336
+ </div>
337
+ </div>
338
+ <div id="event-log-section">
339
+ <div id="el-header">Event Log</div>
340
+ <div id="event-log"></div>
341
+ </div>
342
+ </div>
343
+
344
+ </main>
345
+
346
+ <script>
347
+ // ═══════════════════════════════════════════════════
348
+ // T-MOBILE 5G NOC SIMULATOR β€” with NEXUS Orchestrator
349
+ // ═══════════════════════════════════════════════════
350
+
351
+ // ── NETWORK FUNCTIONS ───────────────────────────────
352
+ const NF_NODES = [
353
+ { id:'NRF', label:'NRF', sub:'Network Repository', x:350, y:80, color:'#7b68ee' },
354
+ { id:'AMF', label:'AMF', sub:'Access & Mobility', x:200, y:185, color:'#00d4ff' },
355
+ { id:'SMF', label:'SMF', sub:'Session Management', x:500, y:185, color:'#00aaff' },
356
+ { id:'AUSF', label:'AUSF', sub:'Auth Server', x:130, y:310, color:'#ff9500' },
357
+ { id:'UDM', label:'UDM', sub:'Unified Data Mgmt', x:270, y:310, color:'#ff7bac' },
358
+ { id:'PCF', label:'PCF', sub:'Policy Control', x:430, y:310, color:'#a78bfa' },
359
+ { id:'UPF', label:'UPF', sub:'User Plane', x:570, y:310, color:'#34d399' },
360
+ { id:'gNB1', label:'gNB', sub:'Tower North', x:120, y:450, color:'#e20074', isGNB:true },
361
+ { id:'gNB2', label:'gNB', sub:'Tower Central', x:350, y:470, color:'#e20074', isGNB:true },
362
+ { id:'gNB3', label:'gNB', sub:'Tower South', x:580, y:450, color:'#e20074', isGNB:true },
363
+ ];
364
+ const LINKS = [
365
+ ['NRF','AMF'],['NRF','SMF'],['NRF','PCF'],['NRF','UDM'],
366
+ ['AMF','AUSF'],['AMF','UDM'],['AMF','SMF'],
367
+ ['SMF','UPF'],['SMF','PCF'],['UPF','PCF'],
368
+ ['AMF','gNB1'],['AMF','gNB2'],
369
+ ['SMF','gNB3'],['UPF','gNB2'],['UPF','gNB3'],['AUSF','gNB1'],
370
+ ];
371
+
372
+ // ── ERROR TYPES ─────────────────────────────────────
373
+ // domain = which agent specialization handles this best
374
+ const ERROR_TYPES = [
375
+ { type:'Handover Failure', nf:'AMF', severity:'CRITICAL', resolveTime:[8,13], domain:'mobility',
376
+ fixes:['Rerouting UE via AMF backup path','Resyncing N2 interface handover context','Triggering conditional handover'] },
377
+ { type:'Auth Timeout', nf:'AUSF', severity:'HIGH', resolveTime:[5,10], domain:'auth',
378
+ fixes:['Refreshing 5G-AKA auth vector','Re-issuing SUCI decryption request','Resetting AUSF session timer'] },
379
+ { type:'Session Drop', nf:'SMF', severity:'HIGH', resolveTime:[6,11], domain:'session',
380
+ fixes:['Re-establishing PDU session','Reallocating UPF tunnel endpoint','Restoring N4 session context'] },
381
+ { type:'Slice Overload', nf:'PCF', severity:'MEDIUM', resolveTime:[4,9], domain:'policy',
382
+ fixes:['Rebalancing eMBB slice policy','Throttling non-priority slice traffic','Scaling PCF policy instances'] },
383
+ { type:'UPF Packet Loss', nf:'UPF', severity:'HIGH', resolveTime:[7,12], domain:'dataplane',
384
+ fixes:['Flushing UPF buffer overflow','Rerouting GTP-U tunnels to backup UPF','Applying QoS flow marking fix'] },
385
+ { type:'NRF Discovery Fail', nf:'NRF', severity:'MEDIUM', resolveTime:[3,7], domain:'registry',
386
+ fixes:['Refreshing NF profile registration','Forcing NRF cache flush','Re-registering SMF/AMF NF profiles'] },
387
+ { type:'Subscriber Profile Miss', nf:'UDM', severity:'LOW', resolveTime:[3,6], domain:'auth',
388
+ fixes:['Re-syncing UDR subscriber profile','Pushing MSISDN mapping update','Replicating HLR data to UDM'] },
389
+ { type:'gNB Link Degradation', nf:'gNB1', severity:'CRITICAL', resolveTime:[9,15], domain:'radio',
390
+ fixes:['Activating backup X2/Xn interface','Forcing beam handoff on degraded cell','Rerouting via adjacent gNB'] },
391
+ { type:'QoS Breach', nf:'PCF', severity:'MEDIUM', resolveTime:[5,9], domain:'policy',
392
+ fixes:['Updating 5QI flow priority rules','Applying guaranteed bitrate enforcement','Resetting QoS profile for UEs'] },
393
+ { type:'Core Link Congestion', nf:'UPF', severity:'CRITICAL', resolveTime:[8,14], domain:'dataplane',
394
+ fixes:['Activating traffic shaping on N9','Failover to secondary UPF cluster','Draining congested GTP tunnel pool'] },
395
+ ];
396
+
397
+ // ── AGENT DEFINITIONS ───────────────────────────────
398
+ // Each agent has a primary specialization domain
399
+ const AGENT_DEFS = [
400
+ { id:'ARIA-1', color:'#e20074', bg:'rgba(226,0,116,0.12)', border:'#e20074', spec:'mobility', specLabel:'Mobility/AMF' },
401
+ { id:'NOVA-2', color:'#00d4ff', bg:'rgba(0,212,255,0.12)', border:'#00d4ff', spec:'dataplane', specLabel:'Data Plane/UPF' },
402
+ { id:'ZION-3', color:'#a78bfa', bg:'rgba(167,139,250,0.12)',border:'#a78bfa', spec:'auth', specLabel:'Auth/AUSF/UDM' },
403
+ { id:'ECHO-4', color:'#34d399', bg:'rgba(52,211,153,0.12)', border:'#34d399', spec:'session', specLabel:'Session/SMF' },
404
+ { id:'FLUX-5', color:'#ff9500', bg:'rgba(255,149,0,0.12)', border:'#ff9500', spec:'policy', specLabel:'Policy/PCF' },
405
+ { id:'APEX-6', color:'#ff7bac', bg:'rgba(255,123,172,0.12)',border:'#ff7bac', spec:'radio', specLabel:'Radio/gNB' },
406
+ ];
407
+
408
+ // ── SEVERITY SCORING ────────────────────────────────
409
+ const SEV_SCORE = { CRITICAL:100, HIGH:60, MEDIUM:30, LOW:10 };
410
+
411
+ // ── STATE ───────────────────────────────────────────
412
+ let agents = AGENT_DEFS.map(d => ({
413
+ ...d, status:'idle', task:null, progress:0,
414
+ startTime:null, taskStartTime:null,
415
+ analyzeTime:0, resolveTime:0, resolveTimeActual:0
416
+ }));
417
+
418
+ let errorQueue = []; // unassigned, priority-sorted
419
+ let errorIdCounter = 1000;
420
+ let resolvedCount = 0;
421
+ let totalResolveTime = 0;
422
+ let nodeStates = {};
423
+ NF_NODES.forEach(n => nodeStates[n.id] = 'healthy');
424
+
425
+ const SPARK_LEN = 30;
426
+ let sparkData = { ues:[], throughput:[], latency:[], loss:[], qd:[], mttr:[] };
427
+ for (let k in sparkData) sparkData[k] = Array(SPARK_LEN).fill(0);
428
+
429
+ // ── TOPOLOGY BUILD ──────────────────────────────────
430
+ function hexPts(r) {
431
+ return Array.from({length:6},(_,i)=>{
432
+ const a = Math.PI/3*i - Math.PI/6;
433
+ return `${r*Math.cos(a)},${r*Math.sin(a)}`;
434
+ }).join(' ');
435
+ }
436
+
437
+ function buildTopology() {
438
+ const LL = document.getElementById('links-layer');
439
+ const NL = document.getElementById('nodes-layer');
440
+ LINKS.forEach(([a,b]) => {
441
+ const na = NF_NODES.find(n=>n.id===a), nb = NF_NODES.find(n=>n.id===b);
442
+ if(!na||!nb) return;
443
+ const l = svgEl('line',{x1:na.x,y1:na.y,x2:nb.x,y2:nb.y,
444
+ stroke:'#1a3060','stroke-width':'1.5',class:'link-line','stroke-dasharray':'6 4',id:`link-${a}-${b}`});
445
+ LL.appendChild(l);
446
+ });
447
+ NF_NODES.forEach(node => {
448
+ const g = svgEl('g',{transform:`translate(${node.x},${node.y})`,id:`node-${node.id}`,class:'nf-hex'});
449
+ if(node.isGNB) {
450
+ const tg = svgEl('g',{});
451
+ [1,2,3].forEach(i=>{
452
+ const r2=i*12, arc=svgEl('path',{
453
+ d:`M${-r2} -10 A${r2} ${r2} 0 0 1 ${r2} -10`,
454
+ stroke:node.color,'stroke-width':'1.2',fill:'none',
455
+ opacity:String(0.8-i*0.2),'stroke-dasharray':'3 2'
456
+ });
457
+ const an=svgAnim('opacity',`${0.8-i*0.2};0.15;${0.8-i*0.2}`,`${1.4+i*0.3}s`);
458
+ arc.appendChild(an); tg.appendChild(arc);
459
+ });
460
+ tg.appendChild(svgEl('rect',{x:'-6',y:'-10',width:'12',height:'30',rx:'2',
461
+ fill:'rgba(226,0,116,0.07)',stroke:node.color,'stroke-width':'1.5'}));
462
+ g.appendChild(tg);
463
+ } else {
464
+ const hex=svgEl('polygon',{points:hexPts(33),fill:'#0d1a30',stroke:node.color,'stroke-width':'2',filter:'url(#glow-g)'});
465
+ g.appendChild(hex);
466
+ // pulse ring
467
+ const p=svgEl('circle',{cx:'0',cy:'0',r:'37',fill:'none',stroke:node.color,'stroke-width':'0.8',opacity:'0'});
468
+ p.appendChild(svgAnim('opacity','0.5;0','2s'));
469
+ p.appendChild(svgAnim('r','36;52','2s'));
470
+ g.appendChild(p);
471
+ }
472
+ const t=svgEl('text',{'text-anchor':'middle',y:node.isGNB?'14':'4','font-family':'Courier New',
473
+ 'font-size':node.isGNB?'9':'10','font-weight':'bold',fill:node.color});
474
+ t.textContent=node.label; g.appendChild(t);
475
+ const s=svgEl('text',{'text-anchor':'middle',y:node.isGNB?'26':'17','font-family':'Courier New','font-size':'8',fill:'#6a7a9a'});
476
+ s.textContent=node.sub; g.appendChild(s);
477
+ NL.appendChild(g);
478
+ });
479
+ }
480
+
481
+ function svgEl(tag, attrs) {
482
+ const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
483
+ for(const [k,v] of Object.entries(attrs)) el.setAttribute(k,v);
484
+ return el;
485
+ }
486
+ function svgAnim(attr, values, dur='2s') {
487
+ const a = document.createElementNS('http://www.w3.org/2000/svg','animate');
488
+ a.setAttribute('attributeName',attr); a.setAttribute('values',values);
489
+ a.setAttribute('dur',dur); a.setAttribute('repeatCount','indefinite');
490
+ return a;
491
+ }
492
+
493
+ function setNodeState(nfId, state) {
494
+ const rid = (nfId==='gNB')?`gNB${Math.ceil(Math.random()*3)}`:nfId;
495
+ const g = document.getElementById(`node-${rid}`);
496
+ if(!g) return rid;
497
+ const poly = g.querySelector('polygon');
498
+ const node = NF_NODES.find(n=>n.id===rid);
499
+ if(state==='alert') {
500
+ if(poly){poly.setAttribute('fill','#2a0010');poly.setAttribute('stroke','#ff2244');poly.setAttribute('filter','url(#glow-r)');}
501
+ const t=g.querySelector('text'); if(t) t.setAttribute('fill','#ff2244');
502
+ LINKS.forEach(([a,b])=>{
503
+ if(a===rid||b===rid){ const l=document.getElementById(`link-${a}-${b}`); if(l) l.setAttribute('stroke','#ff2244'); }
504
+ });
505
+ } else if(node) {
506
+ if(poly){poly.setAttribute('fill','#0d1a30');poly.setAttribute('stroke',node.color);poly.setAttribute('filter','url(#glow-g)');}
507
+ const t=g.querySelector('text'); if(t) t.setAttribute('fill',node.color);
508
+ LINKS.forEach(([a,b])=>{
509
+ if(a===rid||b===rid){ const l=document.getElementById(`link-${a}-${b}`); if(l) l.setAttribute('stroke','#1a3060'); }
510
+ });
511
+ }
512
+ return rid;
513
+ }
514
+
515
+ // ── BUILD AGENT CARDS ────────────────────────────────
516
+ function buildAgentCards() {
517
+ const list = document.getElementById('agent-list');
518
+ list.innerHTML = '';
519
+ agents.forEach((ag, i) => {
520
+ const c = document.createElement('div');
521
+ c.className = 'agent-card'; c.id = `ac-${i}`;
522
+ c.innerHTML = `
523
+ <div class="agent-top">
524
+ <div class="agent-avatar" style="background:${ag.bg};border-color:${ag.border};color:${ag.color}">${ag.id.slice(0,2)}</div>
525
+ <div><div class="agent-name">${ag.id}</div><div class="agent-spec">${ag.specLabel}</div></div>
526
+ <div class="agent-badge badge-idle" id="ab-${i}">IDLE</div>
527
+ </div>
528
+ <div class="agent-task" id="at-${i}">Monitoring network…</div>
529
+ <div class="progress-bar"><div class="progress-fill fill-a" id="ap-${i}" style="width:0%"></div></div>`;
530
+ list.appendChild(c);
531
+ });
532
+ }
533
+
534
+ function updateAgentCard(i) {
535
+ const ag=agents[i];
536
+ const c=document.getElementById(`ac-${i}`);
537
+ const b=document.getElementById(`ab-${i}`);
538
+ const t=document.getElementById(`at-${i}`);
539
+ const p=document.getElementById(`ap-${i}`);
540
+ c.className='agent-card';
541
+ if(ag.status==='idle'){
542
+ b.className='agent-badge badge-idle'; b.textContent='IDLE';
543
+ t.textContent='Monitoring network…'; p.style.width='0%'; p.className='progress-fill fill-a';
544
+ } else if(ag.status==='analyzing'){
545
+ c.classList.add('working'); b.className='agent-badge badge-analyzing'; b.textContent='ANALYZING';
546
+ t.textContent=`β–Ά ${ag.task.type} on ${ag.task.nf}`;
547
+ p.className='progress-fill fill-a'; p.style.width=`${ag.progress}%`;
548
+ } else if(ag.status==='resolving'){
549
+ c.classList.add('resolving'); b.className='agent-badge badge-resolving'; b.textContent='RESOLVING';
550
+ t.textContent=`βš™ ${ag.task.fix}`;
551
+ p.className='progress-fill fill-r'; p.style.width=`${ag.progress}%`;
552
+ } else if(ag.status==='done'){
553
+ c.classList.add('done'); b.className='agent-badge badge-done'; b.textContent='RESOLVED';
554
+ t.textContent=`βœ“ Fixed in ${ag.resolveTimeActual.toFixed(1)}s`;
555
+ p.className='progress-fill fill-d'; p.style.width='100%';
556
+ }
557
+ }
558
+
559
+ // ── ORCHESTRATOR ───��─────────────────────────────────
560
+ // Priority: CRITICAL first, then by arrival order; also prefer specialist agents
561
+
562
+ const ORCH_THOUGHTS = [
563
+ (e,a)=>`Routing <span>${e.severity}</span> "${e.type}" β†’ ${a.id} (${a.specLabel} specialist)`,
564
+ (e,a)=>`<span>NEXUS</span>: ${a.id} is best match for ${e.nf} domain β€” dispatching`,
565
+ (e,a)=>`Priority score <span>${SEV_SCORE[e.severity]}</span> β€” assigning ${e.type} to ${a.id}`,
566
+ (e,a)=>`<span>Specialist match</span>: ${a.id} handles ${e.domain} β€” deploying now`,
567
+ ];
568
+
569
+ function orchSetDecision(text) {
570
+ document.getElementById('orch-decision').innerHTML = text;
571
+ }
572
+
573
+ function orchestratorTick() {
574
+ // Sort queue: CRITICAL > HIGH > MEDIUM > LOW, then by id (arrival order)
575
+ errorQueue.sort((a,b)=> {
576
+ const ds = SEV_SCORE[b.severity] - SEV_SCORE[a.severity];
577
+ return ds !== 0 ? ds : a.id - b.id;
578
+ });
579
+
580
+ // Re-render queue in priority order
581
+ rerenderQueue();
582
+
583
+ // For each unassigned error (highest priority first), find best idle agent
584
+ for(const err of errorQueue) {
585
+ if(err.assignedTo) continue;
586
+
587
+ // Find best idle agent: prefer specialist, fallback to any idle
588
+ let best = agents.find(a=> a.status==='idle' && a.spec===err.domain);
589
+ if(!best) best = agents.find(a=> a.status==='idle');
590
+ if(!best) continue; // all agents busy
591
+
592
+ // Dispatch
593
+ const now = Date.now();
594
+ err.assignedTo = best.id;
595
+ best.status = 'analyzing';
596
+ best.task = err;
597
+ best.startTime = now;
598
+ best.taskStartTime = now;
599
+ const range = err.resolveTimeRange;
600
+ const total = range[0] + Math.random()*(range[1]-range[0]);
601
+ best.analyzeTime = total * 0.4;
602
+ best.resolveTime = total * 0.6;
603
+ best.progress = 0;
604
+
605
+ // Orchestrator message
606
+ const thought = ORCH_THOUGHTS[Math.floor(Math.random()*ORCH_THOUGHTS.length)](err, best);
607
+ orchSetDecision(thought);
608
+
609
+ removeQueueItem(err.id);
610
+ errorQueue = errorQueue.filter(e=>e.id!==err.id);
611
+ updateQueueCount();
612
+
613
+ addLog('ORCH', `NEXUS dispatched #${err.id} (${err.severity}) β†’ ${best.id} [${best.specLabel}]`);
614
+ addLog('INFO', `[${best.id}] Assigned: ${err.type} on ${err.nf}`);
615
+ updateAgentCard(agents.indexOf(best));
616
+ }
617
+ }
618
+
619
+ // ── AGENT TICK ────────────────────────────────────────
620
+ function agentTick() {
621
+ const now = Date.now();
622
+ agents.forEach((ag, i) => {
623
+ if(ag.status==='analyzing') {
624
+ const elapsed=(now-ag.startTime)/1000;
625
+ ag.progress = Math.min(49, (elapsed/ag.analyzeTime)*49);
626
+ if(elapsed>=ag.analyzeTime) {
627
+ ag.status='resolving'; ag.startTime=now;
628
+ ag.task.fix = ag.task.fixes[Math.floor(Math.random()*ag.task.fixes.length)];
629
+ addLog('WARN',`[${ag.id}] Applying fix: ${ag.task.fix}`);
630
+ }
631
+ updateAgentCard(i);
632
+ } else if(ag.status==='resolving') {
633
+ const elapsed=(now-ag.startTime)/1000;
634
+ ag.progress = 50 + Math.min(49,(elapsed/ag.resolveTime)*49);
635
+ if(elapsed>=ag.resolveTime) {
636
+ const tt=(now-ag.taskStartTime)/1000;
637
+ ag.resolveTimeActual=tt; ag.status='done'; ag.progress=100;
638
+ setNodeState(ag.task.resolvedNfId||ag.task.nf,'healthy');
639
+ resolvedCount++; totalResolveTime+=tt;
640
+ sparkData.mttr.push(totalResolveTime/resolvedCount); sparkData.mttr.shift();
641
+ addLog('RESOLVE',`[${ag.id}] RESOLVED #${ag.task.id} β€” ${ag.task.type} (${tt.toFixed(1)}s)`);
642
+ document.getElementById('h-resolved').textContent = resolvedCount;
643
+ updateAgentCard(i);
644
+ orchSetDecision(`<span>βœ“ RESOLVED</span> β€” ${ag.id} closed #${ag.task.id} in ${tt.toFixed(1)}s Β· Standing by for next dispatch`);
645
+ setTimeout(()=>{ ag.status='idle'; ag.task=null; ag.progress=0; updateAgentCard(i); },2000);
646
+ } else { updateAgentCard(i); }
647
+ }
648
+ });
649
+ }
650
+
651
+ // ── ERROR GENERATOR ────────────────────────────────────
652
+ function generateError() {
653
+ const tmpl = ERROR_TYPES[Math.floor(Math.random()*ERROR_TYPES.length)];
654
+ const err = {
655
+ id: errorIdCounter++,
656
+ type: tmpl.type, nf: tmpl.nf, severity: tmpl.severity,
657
+ resolveTimeRange: tmpl.resolveTime, fixes: tmpl.fixes,
658
+ domain: tmpl.domain, timestamp: new Date(), assignedTo: null,
659
+ };
660
+ errorQueue.push(err);
661
+ const rid = setNodeState(err.nf,'alert');
662
+ err.resolvedNfId = rid;
663
+ renderQueueItem(err);
664
+ updateQueueCount();
665
+ addLog('ERROR',`[${err.id}] ${err.severity} β€” ${err.type} on ${err.nf}`);
666
+ }
667
+
668
+ let queueDirty = false;
669
+ function renderQueueItem(err) {
670
+ const q = document.getElementById('error-queue');
671
+ const item = document.createElement('div');
672
+ item.className=`queue-item ${err.severity}`; item.id=`qi-${err.id}`;
673
+ item.dataset.sevScore = SEV_SCORE[err.severity];
674
+ item.innerHTML=`
675
+ <span class="sev-badge sev-${err.severity}">${err.severity}</span>
676
+ <span class="queue-nf">${err.nf}</span>
677
+ <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${err.type}</span>
678
+ <span style="color:#6a7a9a;flex-shrink:0">${fmtTime(err.timestamp)}</span>`;
679
+ q.insertBefore(item,q.firstChild);
680
+ while(q.children.length>20) q.removeChild(q.lastChild);
681
+ queueDirty=true;
682
+ }
683
+
684
+ function rerenderQueue() {
685
+ if(!queueDirty) return;
686
+ // Re-sort DOM items by sev score descending
687
+ const q = document.getElementById('error-queue');
688
+ const items = Array.from(q.children);
689
+ items.sort((a,b)=> (b.dataset.sevScore||0)-(a.dataset.sevScore||0));
690
+ items.forEach(el=>q.appendChild(el));
691
+ queueDirty=false;
692
+ }
693
+
694
+ function removeQueueItem(id) {
695
+ const el=document.getElementById(`qi-${id}`);
696
+ if(el){el.style.opacity='0';el.style.transition='opacity 0.25s';setTimeout(()=>el.remove(),250);}
697
+ }
698
+ function updateQueueCount() {
699
+ const c=errorQueue.filter(e=>!e.assignedTo).length;
700
+ document.getElementById('queue-count').textContent=c;
701
+ document.getElementById('kpi-qd').textContent=c;
702
+ const el=document.getElementById('kpi-qd');
703
+ el.className='kpi-val'+(c>4?' danger':c>2?' warn':'');
704
+ }
705
+
706
+ // ── KPI METRICS ────────────────────────────────────────
707
+ let kpiNoise={ues:0,tp:0,lat:0,loss:0};
708
+ function updateKPIs() {
709
+ const busy=agents.filter(a=>a.status!=='idle').length;
710
+ const qd=errorQueue.filter(e=>!e.assignedTo).length;
711
+ kpiNoise.ues+=( Math.random()-0.5)*60; kpiNoise.ues=Math.max(-900,Math.min(900,kpiNoise.ues));
712
+ kpiNoise.tp+=(Math.random()-0.5)*2.5; kpiNoise.tp=Math.max(-25,Math.min(25,kpiNoise.tp));
713
+ kpiNoise.lat+=(Math.random()-0.5)*0.6; kpiNoise.lat=Math.max(-2,Math.min(2,kpiNoise.lat));
714
+ kpiNoise.loss+=(Math.random()-0.5)*0.006; kpiNoise.loss=Math.max(-0.02,Math.min(0.02,kpiNoise.loss));
715
+
716
+ const ues=Math.round(9800+kpiNoise.ues);
717
+ const tp=Math.max(80,142+kpiNoise.tp-busy*3-qd*1.5);
718
+ const lat=Math.max(2,8.2+kpiNoise.lat+busy*2.5+qd*1.3);
719
+ const loss=Math.max(0,0.03+kpiNoise.loss+busy*0.04+qd*0.015);
720
+
721
+ document.getElementById('kpi-ues').textContent=ues.toLocaleString();
722
+ document.getElementById('kpi-throughput').textContent=tp.toFixed(1);
723
+ const latE=document.getElementById('kpi-latency'); latE.textContent=lat.toFixed(1);
724
+ latE.className='kpi-val'+(lat>20?' danger':lat>12?' warn':'');
725
+ const lossE=document.getElementById('kpi-loss'); lossE.textContent=loss.toFixed(3);
726
+ lossE.className='kpi-val'+(loss>0.1?' danger':loss>0.05?' warn':'');
727
+ document.getElementById('h-ues').textContent=(ues/1000).toFixed(1)+'K';
728
+ document.getElementById('h-throughput').textContent=tp.toFixed(0);
729
+ document.getElementById('h-latency').textContent=lat.toFixed(1);
730
+ document.getElementById('h-errors').textContent=busy+qd;
731
+ if(resolvedCount>0) document.getElementById('kpi-mttr').textContent=(totalResolveTime/resolvedCount).toFixed(1);
732
+
733
+ sparkData.ues.push(ues); sparkData.ues.shift();
734
+ sparkData.throughput.push(tp); sparkData.throughput.shift();
735
+ sparkData.latency.push(lat); sparkData.latency.shift();
736
+ sparkData.loss.push(loss); sparkData.loss.shift();
737
+ sparkData.qd.push(qd); sparkData.qd.shift();
738
+
739
+ drawSpark('spark-ues',sparkData.ues,'#00d4ff');
740
+ drawSpark('spark-tp',sparkData.throughput,'#00ff88');
741
+ drawSpark('spark-lat',sparkData.latency,lat>15?'#ff2244':lat>10?'#ffd700':'#00d4ff');
742
+ drawSpark('spark-loss',sparkData.loss,loss>0.08?'#ff2244':'#00d4ff');
743
+ drawSpark('spark-qd',sparkData.qd,'#ff8c00');
744
+ if(resolvedCount>0) drawSpark('spark-mttr',sparkData.mttr,'#a78bfa');
745
+ }
746
+
747
+ function drawSpark(id,data,color) {
748
+ const c=document.getElementById(id); if(!c) return;
749
+ const ctx=c.getContext('2d'),W=c.width,H=c.height;
750
+ ctx.clearRect(0,0,W,H);
751
+ const v=data.filter(x=>x>0); if(v.length<2) return;
752
+ const mn=Math.min(...v)*0.95, mx=Math.max(...v)*1.05, rng=mx-mn||1;
753
+ const step=W/(data.length-1);
754
+ ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=1.5; ctx.shadowColor=color; ctx.shadowBlur=4;
755
+ data.forEach((val,i)=>{
756
+ if(!val) return;
757
+ const x=i*step, y=H-((val-mn)/rng)*(H-2)-1;
758
+ i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
759
+ });
760
+ ctx.stroke();
761
+ ctx.lineTo(W,H); ctx.lineTo(0,H); ctx.closePath();
762
+ const g=ctx.createLinearGradient(0,0,0,H);
763
+ g.addColorStop(0,color+'33'); g.addColorStop(1,color+'00');
764
+ ctx.fillStyle=g; ctx.fill();
765
+ }
766
+
767
+ // ── EVENT LOG ───────────────────────────────────────────
768
+ function addLog(type,msg) {
769
+ const log=document.getElementById('event-log');
770
+ const e=document.createElement('div'); e.className='log-entry';
771
+ e.innerHTML=`<span class="log-time">${fmtTime(new Date())}</span><span class="log-type-${type}">[${type}]</span><span class="log-msg">${msg}</span>`;
772
+ log.insertBefore(e,log.firstChild);
773
+ while(log.children.length>80) log.removeChild(log.lastChild);
774
+ }
775
+ function fmtTime(d){return d.toTimeString().substring(0,8);}
776
+ function updateClock(){
777
+ document.getElementById('system-time').textContent=new Date().toISOString().replace('T',' ').substring(0,19)+' UTC';
778
+ }
779
+
780
+ // ── INIT ────────────────────────────────────────────────
781
+ function init() {
782
+ buildTopology();
783
+ buildAgentCards();
784
+ for(let i=0;i<SPARK_LEN;i++){
785
+ sparkData.ues[i]=9500+Math.random()*600;
786
+ sparkData.throughput[i]=130+Math.random()*20;
787
+ sparkData.latency[i]=7+Math.random()*2;
788
+ sparkData.loss[i]=0.02+Math.random()*0.02;
789
+ }
790
+ addLog('INFO','T-Mobile 5G NOC Command Center initialized');
791
+ addLog('ORCH','NEXUS Orchestrator online β€” priority routing active');
792
+ addLog('INFO','6 specialist agents deployed and ready');
793
+ addLog('INFO','Error detection system active β€” monitoring all NFs');
794
+
795
+ // Error generation
796
+ function scheduleError(){ setTimeout(()=>{ generateError(); scheduleError(); },2000+Math.random()*3500); }
797
+ scheduleError();
798
+
799
+ // Orchestrator runs every 500ms (decides assignments)
800
+ setInterval(orchestratorTick, 500);
801
+ // Agent progress tick every 200ms
802
+ setInterval(agentTick, 200);
803
+ // KPI every 800ms
804
+ setInterval(updateKPIs, 800);
805
+ // Clock every second
806
+ setInterval(updateClock, 1000);
807
+ updateClock();
808
+ }
809
+
810
+ window.addEventListener('load', init);
811
+ </script>
812
+ </body>
813
  </html>