web_plsql 0.18.0 → 1.2.0

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 (74) hide show
  1. package/README.md +29 -9
  2. package/package.json +17 -7
  3. package/src/admin/client/charts.ts +598 -0
  4. package/src/admin/client/main.js +3 -0
  5. package/src/admin/client/tailwind.css +41 -0
  6. package/src/admin/favicon.svg +3 -0
  7. package/src/admin/index.html +529 -0
  8. package/src/admin/js/api.ts +170 -0
  9. package/src/admin/js/app.ts +614 -0
  10. package/src/admin/js/eslint.config.js +74 -0
  11. package/src/admin/js/schemas.ts +215 -0
  12. package/src/admin/js/templates/config.ts +147 -0
  13. package/src/admin/js/templates/errorRow.ts +21 -0
  14. package/src/admin/js/templates/index.ts +4 -0
  15. package/src/admin/js/templates/poolCard.ts +61 -0
  16. package/src/admin/js/templates/traceRow.ts +24 -0
  17. package/src/admin/js/tsconfig.json +24 -0
  18. package/src/admin/js/types.ts +336 -0
  19. package/src/admin/js/ui/components.ts +44 -0
  20. package/src/admin/js/ui/table.ts +173 -0
  21. package/src/admin/js/ui/theme.ts +93 -0
  22. package/src/admin/js/ui/views.ts +427 -0
  23. package/src/admin/js/util/format.ts +46 -0
  24. package/src/admin/js/util/metrics.ts +24 -0
  25. package/src/admin/lib/chart.bundle.css +1 -0
  26. package/src/admin/lib/chart.bundle.js +146 -0
  27. package/src/admin/style.css +1437 -0
  28. package/src/bin/load-test.js +202 -0
  29. package/src/handler/handlerAdmin.js +293 -0
  30. package/src/handler/plsql/cgi.js +1 -1
  31. package/src/handler/plsql/errorPage.js +31 -6
  32. package/src/handler/plsql/handlerPlSql.js +32 -6
  33. package/src/handler/plsql/owaPageStream.js +93 -0
  34. package/src/handler/plsql/parsePage.js +7 -3
  35. package/src/handler/plsql/procedure.js +221 -105
  36. package/src/handler/plsql/procedureNamed.js +34 -49
  37. package/src/handler/plsql/procedureSanitize.js +120 -45
  38. package/src/handler/plsql/procedureVariable.js +4 -2
  39. package/src/handler/plsql/request.js +8 -3
  40. package/src/handler/plsql/sendResponse.js +43 -5
  41. package/src/index.js +0 -1
  42. package/src/server/adminContext.js +23 -0
  43. package/src/server/config.js +1 -0
  44. package/src/server/server.js +130 -9
  45. package/src/types.js +7 -1
  46. package/src/util/cache.js +123 -0
  47. package/src/util/jsonLogger.js +47 -0
  48. package/src/util/shutdown.js +6 -2
  49. package/src/util/statsManager.js +368 -0
  50. package/src/util/trace.js +7 -6
  51. package/src/util/traceManager.js +68 -0
  52. package/src/version.js +1 -1
  53. package/types/admin/js/schemas.d.ts +384 -0
  54. package/types/admin/js/types.d.ts +312 -0
  55. package/types/handler/handlerAdmin.d.ts +79 -0
  56. package/types/handler/plsql/errorPage.d.ts +1 -0
  57. package/types/handler/plsql/handlerPlSql.d.ts +6 -1
  58. package/types/handler/plsql/owaPageStream.d.ts +28 -0
  59. package/types/handler/plsql/procedure.d.ts +4 -1
  60. package/types/handler/plsql/procedureNamed.d.ts +2 -5
  61. package/types/handler/plsql/procedureSanitize.d.ts +2 -5
  62. package/types/handler/plsql/procedureVariable.d.ts +1 -1
  63. package/types/handler/plsql/request.d.ts +3 -1
  64. package/types/handler/plsql/sendResponse.d.ts +1 -1
  65. package/types/index.d.ts +0 -1
  66. package/types/server/adminContext.d.ts +17 -0
  67. package/types/server/server.d.ts +5 -0
  68. package/types/types.d.ts +19 -1
  69. package/types/util/cache.d.ts +69 -0
  70. package/types/util/jsonLogger.d.ts +45 -0
  71. package/types/util/statsManager.d.ts +395 -0
  72. package/types/util/traceManager.d.ts +35 -0
  73. package/src/handler/handlerMetrics.js +0 -68
  74. package/types/handler/handlerMetrics.d.ts +0 -25
package/src/admin/index.html ADDED
@@ -0,0 +1,529 @@
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>web_plsql Admin Console</title>
7
+ <link rel="icon" type="image/svg+xml" href="favicon.svg" />
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
9
+ <link rel="stylesheet" href="lib/chart.bundle.css" />
10
+ <link rel="stylesheet" href="style.css" />
11
+ </head>
12
+ <body class="dark">
13
+ <div class="app-container">
14
+ <aside class="sidebar">
15
+ <div class="logo">
16
+ <span class="material-symbols-rounded">database</span>
17
+ <div style="display: flex; flex-direction: column; line-height: 1">
18
+ <span>web_plsql</span>
19
+ <small id="sidebar-version" style="font-size: 0.65rem; opacity: 0.7; margin-top: 2px"></small>
20
+ </div>
21
+ </div>
22
+ <nav>
23
+ <button data-view="overview" class="active">
24
+ <span class="material-symbols-rounded">dashboard</span>
25
+ Overview
26
+ </button>
27
+ <button data-view="trace">
28
+ <span class="material-symbols-rounded">bolt</span>
29
+ Requests
30
+ </button>
31
+ <button data-view="errors">
32
+ <span class="material-symbols-rounded">error</span>
33
+ Errors
34
+ </button>
35
+ <button data-view="access">
36
+ <span class="material-symbols-rounded">list_alt</span>
37
+ Access Log
38
+ </button>
39
+ <button data-view="pools">
40
+ <span class="material-symbols-rounded">database</span>
41
+ Pools
42
+ </button>
43
+ <button data-view="stats">
44
+ <span class="material-symbols-rounded">query_stats</span>
45
+ Stats
46
+ </button>
47
+ <button data-view="config">
48
+ <span class="material-symbols-rounded">settings</span>
49
+ Configuration
50
+ </button>
51
+ <button data-view="system">
52
+ <span class="material-symbols-rounded">terminal</span>
53
+ System
54
+ </button>
55
+ </nav>
56
+ <div class="status-indicator">
57
+ <span id="server-status-dot" class="dot"></span>
58
+ <span id="server-status-text">Checking...</span>
59
+ </div>
60
+ </aside>
61
+ <main class="content">
62
+ <header class="main-header">
63
+ <h1 id="view-title"><span class="material-symbols-rounded">dashboard</span>Overview</h1>
64
+ <div class="header-toolbar">
65
+ <div class="auto-refresh-group">
66
+ <label for="auto-refresh-toggle">Auto-refresh</label>
67
+ <input type="checkbox" id="auto-refresh-toggle" checked />
68
+ <select id="refresh-interval">
69
+ <option value="1000">1s</option>
70
+ <option value="5000">5s</option>
71
+ <option value="10000" selected>10s</option>
72
+ <option value="30000">30s</option>
73
+ <option value="60000">1m</option>
74
+ </select>
75
+ <button
76
+ id="manual-refresh"
77
+ class="icon-btn icon-sm"
78
+ title="Refresh Now"
79
+ style="border: none; background: none; padding: 0; min-width: auto; min-height: auto; margin-left: 4px"
80
+ >
81
+ <span class="material-symbols-rounded" style="font-size: 20px">refresh</span>
82
+ </button>
83
+ </div>
84
+ <button id="theme-toggle-btn" class="icon-btn" title="Toggle Theme">
85
+ <span class="material-symbols-rounded">dark_mode</span>
86
+ </button>
87
+ </div>
88
+ </header>
89
+
90
+ <section id="view-overview" class="view">
91
+ <div class="metrics-grid">
92
+ <div class="card" title="Time since the server started">
93
+ <div class="card-header">
94
+ <span class="material-symbols-rounded">schedule</span>
95
+ <h3 title="Time since the server started">Uptime</h3>
96
+ </div>
97
+ <p id="uptime-val" title="Total uptime duration">0s</p>
98
+ <small id="start-time-val" title="Exact server start time">-</small>
99
+ </div>
100
+ <div class="card" title="Request throughput and response times">
101
+ <div class="card-header">
102
+ <span class="material-symbols-rounded">swap_vert</span>
103
+ <h3 title="Request throughput and response times">Requests</h3>
104
+ </div>
105
+ <div class="flex items-baseline gap-1 mb-2" title="Current and maximum requests per second">
106
+ <span id="req-per-sec" class="text-2xl font-bold text-bright">0.00</span>
107
+ <span class="text-xs text-main font-medium uppercase mr-2">cur /s</span>
108
+ <span class="text-main opacity-30 mr-2">/</span>
109
+ <span id="max-req-per-sec" class="text-2xl font-bold text-bright">0.00</span>
110
+ <span class="text-xs text-main font-medium uppercase">max /s</span>
111
+ </div>
112
+ <div class="flex gap-4">
113
+ <small class="text-main" title="Average response time">Avg: <span id="avg-resp-time" class="font-bold">0ms</span></small>
114
+ <small class="text-main" title="Maximum response time">Max: <span id="max-resp-time" class="font-bold">0ms</span></small>
115
+ </div>
116
+ </div>
117
+ <div class="card" title="Total number of requests that resulted in an error">
118
+ <div class="card-header">
119
+ <span class="material-symbols-rounded">report</span>
120
+ <h3 title="Total number of requests that resulted in an error">Errors</h3>
121
+ </div>
122
+ <p id="err-count" title="Total error count">0</p>
123
+ </div>
124
+ <div class="card" title="Efficiency of the internal cache">
125
+ <div class="card-header">
126
+ <span class="material-symbols-rounded">cached</span>
127
+ <h3 title="Efficiency of the internal cache">Cache Hit Rate</h3>
128
+ </div>
129
+ <p id="cache-hit-rate-val" title="Percentage of requests served from cache">0%</p>
130
+ <small
131
+ ><span id="cache-hits-val" title="Total cache hits">0</span> hits,
132
+ <span id="cache-misses-val" title="Total cache misses">0</span> misses</small
133
+ >
134
+ </div>
135
+ </div>
136
+
137
+ <div class="card" style="grid-column: span 2">
138
+ <div class="card-header">
139
+ <span class="material-symbols-rounded">monitoring</span>
140
+ <h3>TRAFFIC</h3>
141
+ <div class="header-toolbar ml-auto">
142
+ <select
143
+ id="chart-history-points"
144
+ class="btn-sm"
145
+ style="
146
+ background: var(--bg-hover);
147
+ border: 1px solid var(--border);
148
+ border-radius: 4px;
149
+ color: var(--text-main);
150
+ font-size: 0.75rem;
151
+ padding: 2px 4px;
152
+ "
153
+ >
154
+ <option value="60">Last 1 min</option>
155
+ <option value="300">Last 5 min</option>
156
+ <option value="600" selected>Last 10 min</option>
157
+ <option value="1800">Last 30 min</option>
158
+ <option value="3600">Last 1 hour</option>
159
+ <option value="7200">Last 2 hours</option>
160
+ <option value="43200">Last 12 hours</option>
161
+ <option value="86400">Last 24 hours</option>
162
+ </select>
163
+ </div>
164
+ </div>
165
+ <div class="chart-container">
166
+ <canvas id="traffic-chart"></canvas>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <section id="view-pools" class="view" style="display: none">
172
+ <div id="pools-container" class="pools-grid"></div>
173
+ <div class="card">
174
+ <div class="card-header">
175
+ <span class="material-symbols-rounded">analytics</span>
176
+ <h3>Pool Usage History</h3>
177
+ </div>
178
+ <div class="chart-container">
179
+ <canvas id="pool-chart"></canvas>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <section id="view-errors" class="view" style="display: none">
185
+ <div class="header-toolbar mb-4" style="justify-content: flex-start; gap: 12px">
186
+ <div class="search-group" style="flex: 1; max-width: 400px">
187
+ <span
188
+ class="material-symbols-rounded"
189
+ style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: 0.5"
190
+ >search</span
191
+ >
192
+ <input
193
+ type="text"
194
+ id="error-filter"
195
+ placeholder="Filter errors (URL, message, method)..."
196
+ class="input-sm"
197
+ style="width: 100%; padding-left: 32px"
198
+ />
199
+ </div>
200
+ <div class="flex items-center gap-2">
201
+ <label for="error-limit" class="text-xs text-main">Max entries:</label>
202
+ <input type="number" id="error-limit" value="100" min="1" max="5000" class="input-sm" style="width: 100px" />
203
+ </div>
204
+ <button id="error-load-btn" class="btn btn-sm btn-primary">
205
+ <span class="material-symbols-rounded" style="font-size: 18px">refresh</span>
206
+ Load Errors
207
+ </button>
208
+ </div>
209
+ <div class="table-container">
210
+ <table id="errors-table">
211
+ <thead></thead>
212
+ <tbody></tbody>
213
+ </table>
214
+ </div>
215
+ </section>
216
+
217
+ <section id="view-trace" class="view" style="display: none">
218
+ <div class="header-toolbar mb-4" style="justify-content: flex-start; gap: 12px">
219
+ <div class="search-group" style="flex: 1; max-width: 300px">
220
+ <span
221
+ class="material-symbols-rounded"
222
+ style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: 0.5"
223
+ >search</span
224
+ >
225
+ <input type="text" id="trace-filter" placeholder="Filter traces..." class="input-sm" style="width: 100%; padding-left: 32px" />
226
+ </div>
227
+ <div class="flex items-center gap-2">
228
+ <label for="trace-limit" class="text-xs text-main">Max entries:</label>
229
+ <input type="number" id="trace-limit" value="100" min="1" max="5000" class="input-sm" style="width: 80px" />
230
+ </div>
231
+ <button id="trace-load-btn" class="btn btn-sm btn-primary">
232
+ <span class="material-symbols-rounded" style="font-size: 18px">refresh</span>
233
+ Refresh
234
+ </button>
235
+ <button id="trace-clear-btn" class="btn btn-sm btn-danger">
236
+ <span class="material-symbols-rounded" style="font-size: 18px">delete</span>
237
+ Clear
238
+ </button>
239
+ <button
240
+ id="trace-status-toggle"
241
+ class="btn btn-sm px-4 py-2 rounded-lg text-sm font-bold transition-colors bg-white/10 text-white hover:bg-white/20"
242
+ >
243
+ Tracing: OFF
244
+ </button>
245
+ </div>
246
+ <div class="table-container">
247
+ <table id="trace-table">
248
+ <thead></thead>
249
+ <tbody></tbody>
250
+ </table>
251
+ </div>
252
+ </section>
253
+
254
+ <section id="view-access" class="view" style="display: none">
255
+ <div class="header-toolbar mb-4" style="justify-content: flex-start; gap: 12px">
256
+ <div class="search-group" style="flex: 1; max-width: 400px">
257
+ <span
258
+ class="material-symbols-rounded"
259
+ style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: 0.5"
260
+ >search</span
261
+ >
262
+ <input type="text" id="access-filter" placeholder="Filter logs..." class="input-sm" style="width: 100%; padding-left: 32px" />
263
+ </div>
264
+ <div class="flex items-center gap-2">
265
+ <label for="access-limit" class="text-xs text-main">Max entries:</label>
266
+ <input type="number" id="access-limit" value="100" min="1" max="5000" class="input-sm" style="width: 100px" />
267
+ </div>
268
+ <button id="access-load-btn" class="btn btn-sm btn-primary">
269
+ <span class="material-symbols-rounded" style="font-size: 18px">refresh</span>
270
+ Load Logs
271
+ </button>
272
+ <small id="access-log-range" class="text-main" style="margin-left: auto">No logs loaded</small>
273
+ </div>
274
+ <div class="terminal-container">
275
+ <pre id="access-log-view" class="terminal" title="Real-time access logs from the server"></pre>
276
+ </div>
277
+ </section>
278
+
279
+ <section id="view-stats" class="view" style="display: none">
280
+ <div class="header-toolbar mb-4" style="justify-content: space-between">
281
+ <div class="flex items-center gap-4">
282
+ <small id="stats-history-info" class="text-main">Showing latest historical data points</small>
283
+ <select
284
+ id="stats-row-limit"
285
+ class="btn-sm"
286
+ style="
287
+ background: var(--bg-hover);
288
+ border: 1px solid var(--border);
289
+ border-radius: 4px;
290
+ color: var(--text-main);
291
+ font-size: 0.75rem;
292
+ padding: 2px 8px;
293
+ "
294
+ >
295
+ <option value="20">Latest 20</option>
296
+ <option value="50" selected>Latest 50</option>
297
+ <option value="100">Latest 100</option>
298
+ <option value="200">Latest 200</option>
299
+ <option value="0">All Points</option>
300
+ </select>
301
+ </div>
302
+ </div>
303
+ <div class="table-container">
304
+ <table id="stats-table">
305
+ <thead>
306
+ <tr>
307
+ <th title="Timestamp of the interval">Timestamp</th>
308
+ <th title="Requests in this interval" class="text-center">Req</th>
309
+ <th title="Errors in this interval" class="text-center">Err</th>
310
+ <th title="Min Latency (ms)" class="text-right">Min</th>
311
+ <th title="Avg Latency (ms)" class="text-right">Avg</th>
312
+ <th title="95th Percentile Latency (ms)" class="text-right">P95</th>
313
+ <th title="99th Percentile Latency (ms)" class="text-right">P99</th>
314
+ <th title="Max Latency (ms)" class="text-right">Max</th>
315
+ <th title="CPU Usage (%)" class="text-right">CPU %</th>
316
+ <th title="Resident Set Size (MB)" class="text-right">RSS</th>
317
+ <th title="Heap Used (MB)" class="text-right">Heap</th>
318
+ </tr>
319
+ </thead>
320
+ <tbody></tbody>
321
+ </table>
322
+ </div>
323
+ </section>
324
+
325
+ <section id="view-config" class="view" style="display: none">
326
+ <div id="config-view"></div>
327
+ </section>
328
+
329
+ <section id="view-system" class="view view-system-compact" style="display: none">
330
+ <div class="metrics-grid mb-4">
331
+ <div class="card">
332
+ <div class="card-header">
333
+ <span class="material-symbols-rounded">info</span>
334
+ <h3>Server Information</h3>
335
+ </div>
336
+ <div class="text-sm text-main">
337
+ <div class="stat-row">
338
+ <span>Middleware Version</span>
339
+ <span id="middleware-version" class="font-mono text-accent font-bold">-</span>
340
+ </div>
341
+ <div class="stat-row">
342
+ <span>Node.js Version</span>
343
+ <span id="node-version" class="font-mono text-accent font-bold">-</span>
344
+ </div>
345
+ <div class="stat-row">
346
+ <span>Platform</span>
347
+ <span id="platform-info" class="text-accent font-bold">-</span>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ <div class="card">
352
+ <div class="card-header">
353
+ <span class="material-symbols-rounded">schedule</span>
354
+ <h3>Runtime</h3>
355
+ </div>
356
+ <div class="text-sm text-main">
357
+ <div class="stat-row">
358
+ <span>Server Uptime</span>
359
+ <span id="system-uptime" class="text-accent font-bold">-</span>
360
+ </div>
361
+ <div class="stat-row">
362
+ <span>Start Time</span>
363
+ <span id="system-start-time" class="text-accent font-bold">-</span>
364
+ </div>
365
+ <div class="stat-row">
366
+ <span>Status</span>
367
+ <span id="system-status" class="status-dot">
368
+ <span class="dot running"></span>
369
+ <span id="system-status-text" class="text-accent font-bold">-</span>
370
+ </span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ <div class="card">
375
+ <div class="card-header">
376
+ <span class="material-symbols-rounded">insights</span>
377
+ <h3>Activity</h3>
378
+ </div>
379
+ <div class="text-sm text-main">
380
+ <div class="stat-row">
381
+ <span>Total Requests</span>
382
+ <span id="total-requests" class="font-mono text-accent font-bold">-</span>
383
+ </div>
384
+ <div class="stat-row">
385
+ <span>Total Errors</span>
386
+ <span id="total-errors" class="font-mono text-danger font-bold">-</span>
387
+ </div>
388
+ <div class="stat-row">
389
+ <span>Active Pools</span>
390
+ <span id="active-pools" class="font-mono text-accent font-bold">-</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="metrics-grid">
397
+ <div class="card resource-card" title="Memory usage statistics for the Node.js process">
398
+ <div class="card-header">
399
+ <span class="material-symbols-rounded">memory</span>
400
+ <h3 title="Memory usage statistics for the Node.js process">Memory Usage</h3>
401
+ </div>
402
+ <div class="stat-container-wrapper text-sm text-main">
403
+ <div class="stat-container">
404
+ <div class="stat-row">
405
+ <span>Memory Usage (%)</span>
406
+ <span id="memory-percent" class="font-mono text-accent font-bold">-</span>
407
+ </div>
408
+ <div class="stat-row" title="Memory currently used by Node.js objects">
409
+ <span>Heap Used</span>
410
+ <div class="stat-values">
411
+ <span id="memory-heap-used" class="font-mono text-accent font-bold">-</span>
412
+ <small class="min-max">max: <span id="memory-heap-used-max">-</span></small>
413
+ </div>
414
+ </div>
415
+ <div class="stat-row" title="Total memory allocated for the heap">
416
+ <span>Heap Total</span>
417
+ <div class="stat-values">
418
+ <span id="memory-heap-total" class="font-mono text-accent font-bold">-</span>
419
+ <small class="min-max">max: <span id="memory-heap-total-max">-</span></small>
420
+ </div>
421
+ </div>
422
+ <div class="stat-row" title="Resident Set Size - total memory used by the process">
423
+ <span>RSS</span>
424
+ <div class="stat-values">
425
+ <span id="memory-rss" class="font-mono text-accent font-bold">-</span>
426
+ <small class="min-max">max: <span id="memory-rss-max">-</span></small>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ <div class="chart-container-mini">
432
+ <canvas id="memory-chart"></canvas>
433
+ </div>
434
+ </div>
435
+ <div class="card resource-card" title="CPU time consumed by the process">
436
+ <div class="card-header">
437
+ <span class="material-symbols-rounded">speed</span>
438
+ <h3 title="CPU time consumed by the process">CPU Usage</h3>
439
+ </div>
440
+ <div class="stat-container-wrapper text-sm text-main">
441
+ <div class="stat-container">
442
+ <div class="stat-row">
443
+ <span>CPU Usage (%)</span>
444
+ <span id="cpu-percent" class="font-mono text-accent font-bold">-</span>
445
+ </div>
446
+ <div class="stat-row" title="Time spent in user code">
447
+ <span>User</span>
448
+ <div class="stat-values">
449
+ <span id="cpu-user" class="font-mono text-accent font-bold">-</span>
450
+ <small class="min-max">max: <span id="cpu-user-max">-</span></small>
451
+ </div>
452
+ </div>
453
+ <div class="stat-row" title="Time spent in system (kernel) code">
454
+ <span>System</span>
455
+ <div class="stat-values">
456
+ <span id="cpu-system" class="font-mono text-accent font-bold">-</span>
457
+ <small class="min-max">max: <span id="cpu-system-max">-</span></small>
458
+ </div>
459
+ </div>
460
+ <div class="stat-row">
461
+ <span>Hardware</span>
462
+ <span id="cpu-cores-info" class="text-accent font-bold">-</span>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ <div class="chart-container-mini">
467
+ <canvas id="cpu-chart"></canvas>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="card danger-zone">
473
+ <h3 class="danger-zone-title">Danger Zone</h3>
474
+ <div style="display: flex; gap: 12px; margin-top: 16px">
475
+ <button id="btn-clear-all-cache" class="btn btn-sm btn-warning">Clear All Caches</button>
476
+ <button id="btn-pause" class="btn btn-sm btn-warning">Pause Server</button>
477
+ <button id="btn-resume" class="btn btn-sm btn-success" style="display: none">Resume Server</button>
478
+ <button id="btn-stop" class="btn btn-sm btn-danger">Stop Server</button>
479
+ </div>
480
+ </div>
481
+ </section>
482
+ </main>
483
+ </div>
484
+ <div id="error-modal" class="modal" style="display: none">
485
+ <div class="modal-content">
486
+ <div class="modal-header">
487
+ <h3>Error Details</h3>
488
+ <button class="icon-btn" onclick="document.getElementById('error-modal').style.display = 'none'">
489
+ <span class="material-symbols-rounded">close</span>
490
+ </button>
491
+ </div>
492
+ <div class="modal-body">
493
+ <pre id="error-detail-content" class="terminal" style="max-height: 70vh; overflow: auto"></pre>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <div id="trace-modal" class="modal" style="display: none">
499
+ <div class="modal-content">
500
+ <div class="modal-header">
501
+ <h3>Trace Details</h3>
502
+ <button class="icon-btn" onclick="document.getElementById('trace-modal').style.display = 'none'">
503
+ <span class="material-symbols-rounded">close</span>
504
+ </button>
505
+ </div>
506
+ <div class="modal-body">
507
+ <pre id="trace-detail-content" class="terminal" style="max-height: 70vh; overflow: auto"></pre>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <div id="offline-modal" class="modal" style="display: none">
513
+ <div class="modal-content" style="max-width: 400px; text-align: center">
514
+ <div class="modal-body" style="display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px">
515
+ <span class="material-symbols-rounded" style="font-size: 48px; color: var(--danger)">wifi_off</span>
516
+ <h3 style="margin: 0; font-size: 1.25rem; color: var(--text-bright)">Connection Lost</h3>
517
+ <p style="margin: 0; color: var(--text-main)">The server is unreachable. Please check your connection or server status.</p>
518
+ <p id="offline-countdown" style="margin: 0; color: var(--text-main); font-size: 0.875rem"></p>
519
+ <button id="btn-reconnect" class="btn btn-primary btn-lg w-full justify-center">
520
+ <span id="reconnect-icon" class="material-symbols-rounded">refresh</span>
521
+ <span id="reconnect-spinner" class="material-symbols-rounded animate-spin" style="display: none">sync</span>
522
+ <span id="reconnect-text">Try Reconnect</span>
523
+ </button>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ <script type="module" src="lib/chart.bundle.js"></script>
528
+ </body>
529
+ </html>