termweb-dashboard 0.2.5 → 0.3.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 (12) hide show
  1. package/README.md +16 -5
  2. package/bin/cli.js +11 -1
  3. package/dist/app.bundle.js +34 -31
  4. package/dist/index.html +37 -6
  5. package/lib/metrics.js +540 -226
  6. package/lib/server.js +13 -4
  7. package/native/prebuilt/.gitkeep +0 -0
  8. package/native/prebuilt/metrics-darwin-arm64.node +0 -0
  9. package/native/prebuilt/metrics-darwin-x64.node +0 -0
  10. package/native/prebuilt/metrics-linux-arm64.node +0 -0
  11. package/native/prebuilt/metrics-linux-x64.node +0 -0
  12. package/package.json +4 -2
package/dist/index.html CHANGED
@@ -6,14 +6,21 @@
6
6
  <title>termweb-dashboard</title>
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
+ html, body {
10
+ height: 100%;
11
+ overflow: hidden;
12
+ }
9
13
  body {
10
14
  background: #1e1e1e;
11
15
  color: #cccccc;
12
16
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
17
  font-size: 13px;
18
+ display: flex;
19
+ flex-direction: column;
14
20
  }
15
21
  #header {
16
22
  height: 36px;
23
+ flex-shrink: 0;
17
24
  background: #252526;
18
25
  display: flex;
19
26
  align-items: center;
@@ -23,13 +30,18 @@
23
30
  #header h1 { font-size: 14px; font-weight: 600; flex: 1; }
24
31
  #header .info { font-size: 11px; color: #888; }
25
32
 
33
+ #main-dashboard {
34
+ flex: 1;
35
+ overflow: auto;
36
+ min-height: 0;
37
+ }
38
+
26
39
  #dashboard {
27
40
  display: grid;
28
41
  grid-template-columns: repeat(2, 1fr);
29
42
  gap: 16px;
30
43
  padding: 16px;
31
- height: calc(100vh - 36px - 32px);
32
- overflow: auto;
44
+ min-height: min-content;
33
45
  }
34
46
  .card {
35
47
  background: #252526;
@@ -138,8 +150,10 @@
138
150
  #process-fullscreen, #detail-fullscreen {
139
151
  display: none;
140
152
  flex-direction: column;
141
- height: calc(100vh - 36px - 32px);
153
+ flex: 1;
154
+ min-height: 0;
142
155
  padding: 16px;
156
+ overflow: auto;
143
157
  }
144
158
  .detail-header {
145
159
  margin-bottom: 16px;
@@ -253,17 +267,33 @@
253
267
  body:focus, [tabindex]:focus {
254
268
  outline: none;
255
269
  }
270
+ /* Only input elements should be focusable */
271
+ #detail-fullscreen *:not(input) {
272
+ -webkit-user-select: none;
273
+ user-select: none;
274
+ }
275
+ #detail-fullscreen .treemap-cell,
276
+ #detail-fullscreen .path-item,
277
+ #detail-fullscreen canvas {
278
+ pointer-events: auto;
279
+ cursor: pointer;
280
+ }
281
+ #detail-fullscreen .treemap-cell:focus,
282
+ #detail-fullscreen .path-item:focus,
283
+ #detail-fullscreen canvas:focus {
284
+ outline: none;
285
+ }
256
286
 
257
287
  /* Treemap styles */
258
288
  .distribution-chart {
259
289
  flex: 1;
260
290
  min-height: 150px;
261
- margin-top: 16px;
291
+ margin-top: 8px;
262
292
  }
263
293
  .treemap-label {
264
294
  font-size: 12px;
265
295
  color: #888;
266
- margin-bottom: 8px;
296
+ margin-bottom: 4px;
267
297
  text-transform: uppercase;
268
298
  letter-spacing: 0.5px;
269
299
  }
@@ -340,6 +370,7 @@
340
370
  /* Bottom hints bar */
341
371
  #hints {
342
372
  height: 32px;
373
+ flex-shrink: 0;
343
374
  background: #252526;
344
375
  border-top: 1px solid #3c3c3c;
345
376
  display: flex;
@@ -391,7 +422,7 @@
391
422
  flex-wrap: wrap;
392
423
  gap: 4px;
393
424
  font-size: 13px;
394
- margin-bottom: 12px;
425
+ margin-bottom: 0;
395
426
  padding: 8px 12px;
396
427
  background: #1e1e1e;
397
428
  border-radius: 4px;