tech-debt-visualizer 0.2.14 → 0.2.16
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.
- package/dist/reports/assets/report.css +306 -113
- package/dist/reports/html.js +1 -0
- package/package.json +1 -1
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
/* Technical Debt Report — Colorful dashboard, clean fit, scroll in sections */
|
|
2
2
|
:root {
|
|
3
|
-
--bg: #
|
|
3
|
+
--bg: #0a0a0f;
|
|
4
4
|
--bg-elevated: #111214;
|
|
5
|
-
--
|
|
6
|
-
--surface
|
|
5
|
+
--bg-secondary: #14141f;
|
|
6
|
+
--surface: #14141f;
|
|
7
|
+
--surface-hover: #1a1a2e;
|
|
7
8
|
--border: #2c3239;
|
|
8
|
-
--border-subtle:
|
|
9
|
-
--text: #
|
|
10
|
-
--text-muted: #
|
|
9
|
+
--border-subtle: rgba(255, 255, 255, 0.08);
|
|
10
|
+
--text: #ffffff;
|
|
11
|
+
--text-muted: #a0a0b8;
|
|
12
|
+
--text-dim: #6c6c8e;
|
|
11
13
|
--link: #5794f2;
|
|
14
|
+
--accent-orange: #ff6b35;
|
|
15
|
+
--accent-yellow: #ffd23f;
|
|
16
|
+
--accent-red: #ff3366;
|
|
17
|
+
--accent-green: #06ffa5;
|
|
18
|
+
--accent-blue: #4ecdc4;
|
|
12
19
|
--radius: 6px;
|
|
20
|
+
--radius-card: 24px;
|
|
13
21
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
22
|
+
--glow: 0 0 30px rgba(255, 107, 53, 0.2);
|
|
14
23
|
--tier-1: #e53935;
|
|
15
24
|
--tier-2: #f57c00;
|
|
16
25
|
--tier-3: #f9a825;
|
|
@@ -21,12 +30,14 @@
|
|
|
21
30
|
[data-theme="light"] {
|
|
22
31
|
--bg: #f4f5f5;
|
|
23
32
|
--bg-elevated: #fff;
|
|
33
|
+
--bg-secondary: #fff;
|
|
24
34
|
--surface: #fff;
|
|
25
|
-
--surface-hover: #
|
|
35
|
+
--surface-hover: #f0f1f3;
|
|
26
36
|
--border: #d8d9da;
|
|
27
37
|
--border-subtle: #e8e9ea;
|
|
28
38
|
--text: #1e2022;
|
|
29
39
|
--text-muted: #6b7077;
|
|
40
|
+
--text-dim: #8b9199;
|
|
30
41
|
--link: #3274d9;
|
|
31
42
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
32
43
|
--tier-1: #c62828;
|
|
@@ -40,13 +51,31 @@
|
|
|
40
51
|
|
|
41
52
|
body {
|
|
42
53
|
margin: 0;
|
|
43
|
-
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
54
|
+
font-family: "Space Mono", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
|
|
44
55
|
background: var(--bg);
|
|
45
56
|
color: var(--text);
|
|
46
57
|
min-height: 100vh;
|
|
47
58
|
font-size: 13px;
|
|
48
|
-
line-height: 1.
|
|
59
|
+
line-height: 1.6;
|
|
49
60
|
-webkit-font-smoothing: antialiased;
|
|
61
|
+
overflow-x: hidden;
|
|
62
|
+
position: relative;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Animated background gradient (behind main content only) */
|
|
66
|
+
body.dashboard-page::before {
|
|
67
|
+
content: "";
|
|
68
|
+
position: fixed;
|
|
69
|
+
top: -50%;
|
|
70
|
+
left: -50%;
|
|
71
|
+
width: 200%;
|
|
72
|
+
height: 200%;
|
|
73
|
+
background:
|
|
74
|
+
radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.08) 0%, transparent 40%),
|
|
75
|
+
radial-gradient(circle at 80% 70%, rgba(77, 56, 235, 0.06) 0%, transparent 40%),
|
|
76
|
+
radial-gradient(circle at 50% 50%, rgba(6, 255, 165, 0.04) 0%, transparent 50%);
|
|
77
|
+
z-index: 0;
|
|
78
|
+
pointer-events: none;
|
|
50
79
|
}
|
|
51
80
|
|
|
52
81
|
body.dashboard-page {
|
|
@@ -152,13 +181,15 @@ body.dashboard-page {
|
|
|
152
181
|
.dashboard-main {
|
|
153
182
|
flex: 1;
|
|
154
183
|
min-height: 0;
|
|
155
|
-
max-width:
|
|
184
|
+
max-width: 100%;
|
|
156
185
|
margin: 0 auto;
|
|
157
|
-
padding: 0.75rem
|
|
186
|
+
padding: 0.5rem 0.75rem;
|
|
158
187
|
width: 100%;
|
|
159
188
|
overflow: hidden;
|
|
160
189
|
display: flex;
|
|
161
190
|
flex-direction: column;
|
|
191
|
+
position: relative;
|
|
192
|
+
z-index: 1;
|
|
162
193
|
}
|
|
163
194
|
|
|
164
195
|
.dashboard-grid-2x2 {
|
|
@@ -167,7 +198,7 @@ body.dashboard-page {
|
|
|
167
198
|
display: grid;
|
|
168
199
|
grid-template-columns: 1fr 1fr;
|
|
169
200
|
grid-template-rows: auto 1fr;
|
|
170
|
-
gap: 0.
|
|
201
|
+
gap: 0.5rem;
|
|
171
202
|
align-items: stretch;
|
|
172
203
|
}
|
|
173
204
|
|
|
@@ -199,19 +230,27 @@ body.dashboard-page {
|
|
|
199
230
|
}
|
|
200
231
|
|
|
201
232
|
@media (max-width: 900px) {
|
|
202
|
-
body.dashboard-page { height: auto; overflow: auto; }
|
|
233
|
+
body.dashboard-page { height: auto; overflow: auto; min-height: 100vh; }
|
|
234
|
+
.dashboard-main { padding: 0.5rem 0.75rem; min-height: 0; }
|
|
203
235
|
.dashboard-grid-2x2 {
|
|
204
236
|
grid-template-columns: 1fr;
|
|
205
237
|
grid-template-rows: auto auto auto auto;
|
|
206
238
|
height: auto;
|
|
239
|
+
gap: 0.5rem;
|
|
207
240
|
}
|
|
208
|
-
.dashboard-cell-heatmap .panel-body-heatmap { min-height:
|
|
209
|
-
.dashboard-cell-list .panel-body { min-height:
|
|
241
|
+
.dashboard-cell-heatmap .panel-body-heatmap { min-height: 160px; }
|
|
242
|
+
.dashboard-cell-list .panel-body { min-height: 160px; }
|
|
243
|
+
.panel-score-pop .score-num { font-size: 2rem; }
|
|
244
|
+
.panel-score-pop .score-of { font-size: 0.9rem; }
|
|
210
245
|
}
|
|
211
246
|
|
|
212
247
|
@media (max-width: 560px) {
|
|
213
248
|
.dashboard-header { padding: 0.5rem 0.75rem; }
|
|
214
|
-
.dashboard-main { padding: 0.
|
|
249
|
+
.dashboard-main { padding: 0.4rem 0.5rem; }
|
|
250
|
+
.dashboard-grid-2x2 { gap: 0.4rem; }
|
|
251
|
+
#treemap { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.3rem; }
|
|
252
|
+
.treemap-cell { padding: 0.25rem; }
|
|
253
|
+
.treemap-cell-name { font-size: 0.55rem; }
|
|
215
254
|
}
|
|
216
255
|
|
|
217
256
|
/* ——— Footer (hidden when empty; button moved to header) ——— */
|
|
@@ -399,24 +438,30 @@ body.dashboard-page {
|
|
|
399
438
|
display: block;
|
|
400
439
|
}
|
|
401
440
|
|
|
402
|
-
/* ——— Panels:
|
|
441
|
+
/* ——— Panels: card look (no hover animation on main four) ——— */
|
|
403
442
|
.panel {
|
|
404
|
-
background: var(--
|
|
405
|
-
border: 1px solid var(--border);
|
|
406
|
-
border-radius: var(--radius);
|
|
443
|
+
background: var(--bg-secondary);
|
|
444
|
+
border: 1px solid var(--border-subtle);
|
|
445
|
+
border-radius: var(--radius-card);
|
|
407
446
|
box-shadow: var(--shadow);
|
|
408
447
|
overflow: hidden;
|
|
448
|
+
position: relative;
|
|
409
449
|
}
|
|
410
450
|
|
|
411
451
|
.panel-header {
|
|
412
|
-
padding: 0.
|
|
452
|
+
padding: 0.5rem 0.75rem;
|
|
413
453
|
border-bottom: 1px solid var(--border-subtle);
|
|
414
|
-
background: rgba(0, 0, 0, 0.
|
|
454
|
+
background: rgba(0, 0, 0, 0.08);
|
|
415
455
|
flex-shrink: 0;
|
|
416
456
|
}
|
|
417
457
|
|
|
418
458
|
.panel-title {
|
|
419
|
-
color: var(--text);
|
|
459
|
+
color: var(--text-muted);
|
|
460
|
+
font-family: "Syne", sans-serif;
|
|
461
|
+
font-size: 0.8rem;
|
|
462
|
+
font-weight: 700;
|
|
463
|
+
letter-spacing: 2px;
|
|
464
|
+
text-transform: uppercase;
|
|
420
465
|
}
|
|
421
466
|
|
|
422
467
|
[data-theme="light"] .panel-header {
|
|
@@ -425,10 +470,6 @@ body.dashboard-page {
|
|
|
425
470
|
|
|
426
471
|
.panel-title {
|
|
427
472
|
margin: 0;
|
|
428
|
-
font-size: 12px;
|
|
429
|
-
font-weight: 700;
|
|
430
|
-
letter-spacing: 0.02em;
|
|
431
|
-
text-transform: uppercase;
|
|
432
473
|
}
|
|
433
474
|
|
|
434
475
|
.panel-desc {
|
|
@@ -439,7 +480,7 @@ body.dashboard-page {
|
|
|
439
480
|
}
|
|
440
481
|
|
|
441
482
|
.panel-body {
|
|
442
|
-
padding: 0.85rem
|
|
483
|
+
padding: 0.65rem 0.85rem;
|
|
443
484
|
}
|
|
444
485
|
|
|
445
486
|
.panel-body-center {
|
|
@@ -458,14 +499,14 @@ body.dashboard-page {
|
|
|
458
499
|
|
|
459
500
|
.panel-score .panel-body-score {
|
|
460
501
|
text-align: center;
|
|
461
|
-
padding:
|
|
502
|
+
padding: 0.5rem 0.65rem;
|
|
462
503
|
}
|
|
463
504
|
|
|
464
505
|
.score-numeric {
|
|
465
506
|
display: flex;
|
|
466
507
|
align-items: baseline;
|
|
467
508
|
justify-content: center;
|
|
468
|
-
gap: 0.
|
|
509
|
+
gap: 0.4rem; /* space between number and "of 5" */
|
|
469
510
|
margin-bottom: 0.5rem;
|
|
470
511
|
}
|
|
471
512
|
|
|
@@ -509,50 +550,120 @@ body.dashboard-page {
|
|
|
509
550
|
font-weight: 600;
|
|
510
551
|
}
|
|
511
552
|
|
|
512
|
-
/* ———
|
|
553
|
+
/* ——— Hero-style score panel (reference look) ——— */
|
|
554
|
+
.panel-score-pop {
|
|
555
|
+
border: 2px solid rgba(255, 107, 53, 0.3);
|
|
556
|
+
box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.4);
|
|
557
|
+
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--surface-hover) 100%);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.panel-score-pop::before {
|
|
561
|
+
display: none;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.panel-score-pop:hover {
|
|
565
|
+
transform: none;
|
|
566
|
+
box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.4);
|
|
567
|
+
}
|
|
568
|
+
|
|
513
569
|
.panel-score-pop .panel-body-score {
|
|
514
|
-
padding:
|
|
570
|
+
padding: 0.6rem 0.75rem;
|
|
571
|
+
position: relative;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.panel-score-pop .panel-header .panel-title {
|
|
575
|
+
font-size: 0.7rem;
|
|
576
|
+
letter-spacing: 2px;
|
|
577
|
+
color: var(--text-muted);
|
|
578
|
+
margin-bottom: 0;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
.panel-score-pop .score-numeric {
|
|
582
|
+
margin-bottom: 0.25rem;
|
|
515
583
|
}
|
|
516
584
|
|
|
517
585
|
.panel-score-pop .score-num {
|
|
518
|
-
font-
|
|
519
|
-
font-
|
|
520
|
-
|
|
586
|
+
font-family: "Syne", sans-serif;
|
|
587
|
+
font-size: 2.5rem;
|
|
588
|
+
font-weight: 800;
|
|
589
|
+
line-height: 1;
|
|
590
|
+
background: linear-gradient(180deg, var(--accent-orange) 0%, var(--accent-red) 100%);
|
|
591
|
+
-webkit-background-clip: text;
|
|
592
|
+
-webkit-text-fill-color: transparent;
|
|
593
|
+
background-clip: text;
|
|
594
|
+
filter: drop-shadow(0 0 16px rgba(255, 107, 53, 0.3));
|
|
521
595
|
}
|
|
522
596
|
|
|
523
597
|
.panel-score-pop .score-of {
|
|
524
|
-
font-size:
|
|
598
|
+
font-size: 1rem;
|
|
525
599
|
font-weight: 700;
|
|
600
|
+
color: var(--text-muted);
|
|
526
601
|
}
|
|
527
602
|
|
|
528
603
|
.panel-score-pop .score-label {
|
|
529
|
-
|
|
530
|
-
|
|
604
|
+
display: inline-block;
|
|
605
|
+
background: linear-gradient(135deg, var(--accent-orange), var(--accent-red));
|
|
606
|
+
padding: 0.25rem 0.65rem;
|
|
607
|
+
border-radius: 50px;
|
|
608
|
+
font-family: "Syne", sans-serif;
|
|
609
|
+
font-size: 0.7rem;
|
|
610
|
+
font-weight: 700;
|
|
611
|
+
letter-spacing: 0.5px;
|
|
531
612
|
text-transform: uppercase;
|
|
532
|
-
|
|
533
|
-
margin-bottom: 0.
|
|
613
|
+
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
|
|
614
|
+
margin-bottom: 0.2rem;
|
|
615
|
+
-webkit-text-fill-color: initial;
|
|
616
|
+
color: #fff;
|
|
534
617
|
}
|
|
535
618
|
|
|
536
|
-
.panel-score-pop[data-tier="1"] .score-num,
|
|
537
|
-
.panel-score-pop[data-tier="1"] .score-label { color: var(--tier-1); }
|
|
538
|
-
.panel-score-pop[data-tier="2"] .score-num,
|
|
539
|
-
.panel-score-pop[data-tier="2"] .score-label { color: var(--tier-2); }
|
|
540
|
-
.panel-score-pop[data-tier="3"] .score-num,
|
|
541
|
-
.panel-score-pop[data-tier="3"] .score-label { color: var(--tier-3); }
|
|
542
|
-
.panel-score-pop[data-tier="4"] .score-num,
|
|
543
|
-
.panel-score-pop[data-tier="4"] .score-label { color: var(--tier-4); }
|
|
544
|
-
.panel-score-pop[data-tier="5"] .score-num,
|
|
545
|
-
.panel-score-pop[data-tier="5"] .score-label { color: var(--tier-5); }
|
|
546
|
-
|
|
547
619
|
.panel-score-pop .score-desc {
|
|
548
|
-
font-size:
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
margin-bottom: 0.5rem;
|
|
553
|
-
max-width: 280px;
|
|
620
|
+
font-size: 0.75rem;
|
|
621
|
+
color: var(--text-muted);
|
|
622
|
+
font-style: italic;
|
|
623
|
+
margin-bottom: 0.25rem;
|
|
554
624
|
}
|
|
555
625
|
|
|
626
|
+
.panel-score-pop .score-stats {
|
|
627
|
+
display: flex;
|
|
628
|
+
justify-content: center;
|
|
629
|
+
gap: 0.5rem;
|
|
630
|
+
flex-wrap: wrap;
|
|
631
|
+
font-size: 0.65rem;
|
|
632
|
+
color: var(--text-dim);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.panel-score-pop .score-stats::before {
|
|
636
|
+
content: "";
|
|
637
|
+
display: block;
|
|
638
|
+
width: 100%;
|
|
639
|
+
height: 0;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.panel-score-pop .score-stats {
|
|
643
|
+
margin-top: 0.25rem;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
/* Stats row with dots (injected by HTML is just text; we style as stat items) */
|
|
647
|
+
.panel-body-score .score-stats {
|
|
648
|
+
display: flex;
|
|
649
|
+
justify-content: center;
|
|
650
|
+
align-items: center;
|
|
651
|
+
gap: 1.25rem;
|
|
652
|
+
flex-wrap: wrap;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.panel-score-pop[data-tier="1"] .score-num { --accent-orange: #ff6b6b; --accent-red: #e53935; }
|
|
656
|
+
.panel-score-pop[data-tier="2"] .score-num { --accent-orange: #ff6b35; --accent-red: #ff3366; }
|
|
657
|
+
.panel-score-pop[data-tier="3"] .score-num { --accent-orange: #ffb347; --accent-red: #ffd23f; }
|
|
658
|
+
.panel-score-pop[data-tier="4"] .score-num { --accent-orange: #4ecdc4; --accent-red: #29b6f6; }
|
|
659
|
+
.panel-score-pop[data-tier="5"] .score-num { --accent-orange: #06ffa5; --accent-red: #43a047; }
|
|
660
|
+
|
|
661
|
+
.panel-score-pop[data-tier="1"] .score-label { background: linear-gradient(135deg, #ff6b6b, #e53935); }
|
|
662
|
+
.panel-score-pop[data-tier="2"] .score-label { background: linear-gradient(135deg, var(--accent-orange), var(--accent-red)); }
|
|
663
|
+
.panel-score-pop[data-tier="3"] .score-label { background: linear-gradient(135deg, #ffb347, #ffd23f); color: #1a1a1a; }
|
|
664
|
+
.panel-score-pop[data-tier="4"] .score-label { background: linear-gradient(135deg, #4ecdc4, #29b6f6); }
|
|
665
|
+
.panel-score-pop[data-tier="5"] .score-label { background: linear-gradient(135deg, #06ffa5, #43a047); }
|
|
666
|
+
|
|
556
667
|
/* ——— Description of problems panel (top-right) ——— */
|
|
557
668
|
.panel-empty {
|
|
558
669
|
margin: 0;
|
|
@@ -561,25 +672,54 @@ body.dashboard-page {
|
|
|
561
672
|
font-style: italic;
|
|
562
673
|
}
|
|
563
674
|
|
|
675
|
+
/* ——— Impact / priority section (reference impact-list) ——— */
|
|
564
676
|
.priority-inline {
|
|
565
677
|
display: grid;
|
|
566
678
|
grid-template-columns: 1fr 1fr;
|
|
567
|
-
gap: 0.
|
|
568
|
-
margin-top: 0.
|
|
569
|
-
padding-top: 0.
|
|
679
|
+
gap: 0.5rem;
|
|
680
|
+
margin-top: 0.5rem;
|
|
681
|
+
padding-top: 0.5rem;
|
|
570
682
|
border-top: 1px solid var(--border-subtle);
|
|
571
683
|
}
|
|
572
684
|
|
|
685
|
+
.priority-inline-col {
|
|
686
|
+
background: rgba(255, 255, 255, 0.02);
|
|
687
|
+
border-radius: 10px;
|
|
688
|
+
padding: 0.5rem 0.65rem;
|
|
689
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
690
|
+
}
|
|
691
|
+
|
|
573
692
|
.priority-inline h4 {
|
|
574
|
-
margin: 0 0 0.
|
|
575
|
-
font-
|
|
693
|
+
margin: 0 0 0.25rem;
|
|
694
|
+
font-family: "Syne", sans-serif;
|
|
695
|
+
font-size: 0.65rem;
|
|
576
696
|
font-weight: 700;
|
|
577
697
|
text-transform: uppercase;
|
|
578
|
-
letter-spacing:
|
|
698
|
+
letter-spacing: 1px;
|
|
699
|
+
color: var(--accent-orange);
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.priority-inline .priority-list {
|
|
703
|
+
margin: 0;
|
|
704
|
+
list-style: none;
|
|
705
|
+
padding: 0;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.priority-inline .priority-list li {
|
|
709
|
+
padding: 0.2rem 0;
|
|
710
|
+
padding-left: 0.85rem;
|
|
711
|
+
position: relative;
|
|
579
712
|
color: var(--text-muted);
|
|
713
|
+
font-size: 0.7rem;
|
|
714
|
+
border-bottom: none;
|
|
580
715
|
}
|
|
581
716
|
|
|
582
|
-
.priority-inline .priority-list {
|
|
717
|
+
.priority-inline .priority-list li::before {
|
|
718
|
+
content: "▸";
|
|
719
|
+
position: absolute;
|
|
720
|
+
left: 0;
|
|
721
|
+
color: var(--accent-orange);
|
|
722
|
+
}
|
|
583
723
|
|
|
584
724
|
@media (max-width: 600px) {
|
|
585
725
|
.priority-inline { grid-template-columns: 1fr; }
|
|
@@ -621,8 +761,8 @@ body.dashboard-page {
|
|
|
621
761
|
}
|
|
622
762
|
|
|
623
763
|
.panel-body-heatmap {
|
|
624
|
-
padding:
|
|
625
|
-
padding-top: 0.
|
|
764
|
+
padding: 0.4rem 0.65rem;
|
|
765
|
+
padding-top: 0.25rem;
|
|
626
766
|
}
|
|
627
767
|
|
|
628
768
|
.panel-body-heatmap #treemap {
|
|
@@ -646,62 +786,59 @@ body.dashboard-page {
|
|
|
646
786
|
margin: 0;
|
|
647
787
|
}
|
|
648
788
|
|
|
649
|
-
/* ——— Treemap:
|
|
789
|
+
/* ——— Treemap: file-item style (reference), keep hover animation ——— */
|
|
650
790
|
#treemap {
|
|
651
|
-
display:
|
|
652
|
-
|
|
653
|
-
gap:
|
|
654
|
-
min-height:
|
|
655
|
-
padding: 0.
|
|
791
|
+
display: grid;
|
|
792
|
+
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
|
|
793
|
+
gap: 0.4rem;
|
|
794
|
+
min-height: 80px;
|
|
795
|
+
padding: 0.15rem 0;
|
|
656
796
|
}
|
|
657
797
|
|
|
658
798
|
.treemap-cell {
|
|
659
|
-
|
|
799
|
+
aspect-ratio: 1;
|
|
660
800
|
flex: none;
|
|
661
801
|
display: flex;
|
|
662
802
|
flex-direction: column;
|
|
663
803
|
align-items: center;
|
|
664
|
-
|
|
804
|
+
justify-content: center;
|
|
805
|
+
gap: 0;
|
|
665
806
|
cursor: pointer;
|
|
666
|
-
padding: 0;
|
|
667
|
-
border:
|
|
668
|
-
|
|
807
|
+
padding: 0.35rem;
|
|
808
|
+
border: 1px solid transparent;
|
|
809
|
+
border-radius: 10px;
|
|
810
|
+
transition: transform 0.3s ease, border-color 0.3s ease;
|
|
669
811
|
}
|
|
670
812
|
|
|
671
813
|
.treemap-cell-block {
|
|
672
|
-
|
|
673
|
-
height: 40px;
|
|
674
|
-
flex-shrink: 0;
|
|
675
|
-
border-radius: 4px;
|
|
676
|
-
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
814
|
+
display: none;
|
|
677
815
|
}
|
|
678
816
|
|
|
679
817
|
.treemap-cell-name {
|
|
680
|
-
font-size:
|
|
681
|
-
line-height: 1.
|
|
682
|
-
color:
|
|
818
|
+
font-size: 0.6rem;
|
|
819
|
+
line-height: 1.25;
|
|
820
|
+
color: inherit;
|
|
683
821
|
text-align: center;
|
|
684
822
|
max-width: 100%;
|
|
685
823
|
overflow: hidden;
|
|
686
824
|
display: -webkit-box;
|
|
687
|
-
-webkit-line-clamp:
|
|
825
|
+
-webkit-line-clamp: 3;
|
|
826
|
+
line-clamp: 3;
|
|
688
827
|
-webkit-box-orient: vertical;
|
|
689
|
-
word-break: break-
|
|
828
|
+
word-break: break-word;
|
|
829
|
+
font-weight: 600;
|
|
690
830
|
}
|
|
691
831
|
|
|
692
|
-
.treemap-cell:hover
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
}
|
|
696
|
-
.treemap-cell:hover .treemap-cell-name {
|
|
697
|
-
color: var(--link);
|
|
832
|
+
.treemap-cell:hover {
|
|
833
|
+
transform: scale(1.05) rotate(-2deg);
|
|
834
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
698
835
|
}
|
|
699
836
|
|
|
700
|
-
.treemap-cell[data-severity="critical"]
|
|
701
|
-
.treemap-cell[data-severity="high"]
|
|
702
|
-
.treemap-cell[data-severity="medium"]
|
|
703
|
-
.treemap-cell[data-severity="low"]
|
|
704
|
-
.treemap-cell[data-severity="none"]
|
|
837
|
+
.treemap-cell[data-severity="critical"] { background: rgba(255, 51, 102, 0.2); color: var(--tier-1); }
|
|
838
|
+
.treemap-cell[data-severity="high"] { background: rgba(255, 107, 53, 0.2); color: var(--tier-2); }
|
|
839
|
+
.treemap-cell[data-severity="medium"] { background: rgba(255, 210, 63, 0.2); color: var(--tier-3); }
|
|
840
|
+
.treemap-cell[data-severity="low"] { background: rgba(6, 255, 165, 0.2); color: var(--tier-5); }
|
|
841
|
+
.treemap-cell[data-severity="none"] { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); }
|
|
705
842
|
|
|
706
843
|
.legend {
|
|
707
844
|
display: flex;
|
|
@@ -713,7 +850,7 @@ body.dashboard-page {
|
|
|
713
850
|
color: var(--text-muted);
|
|
714
851
|
}
|
|
715
852
|
|
|
716
|
-
.legend span { display: inline-flex; align-items: center; gap: 0.
|
|
853
|
+
.legend span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
|
|
717
854
|
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
|
|
718
855
|
.legend .swatch-crit { background: var(--tier-1); }
|
|
719
856
|
.legend .swatch-high { background: var(--tier-2); }
|
|
@@ -738,41 +875,69 @@ body.dashboard-page {
|
|
|
738
875
|
|
|
739
876
|
.priority-list li:last-child { border-bottom: none; }
|
|
740
877
|
|
|
741
|
-
/* ——— Debt list ——— */
|
|
878
|
+
/* ——— Debt list (file-detail style from reference) ——— */
|
|
742
879
|
.debt-list {
|
|
743
880
|
list-style: none;
|
|
744
881
|
padding: 0;
|
|
745
882
|
margin: 0;
|
|
883
|
+
display: flex;
|
|
884
|
+
flex-direction: column;
|
|
885
|
+
gap: 0.4rem;
|
|
746
886
|
}
|
|
747
887
|
|
|
748
888
|
.debt-list li {
|
|
749
|
-
border-bottom:
|
|
750
|
-
padding: 0.
|
|
889
|
+
border-bottom: none;
|
|
890
|
+
padding: 0.5rem 0.65rem;
|
|
751
891
|
cursor: pointer;
|
|
752
|
-
transition: background 0.
|
|
892
|
+
transition: background 0.3s ease, border-left-width 0.3s ease;
|
|
893
|
+
background: rgba(255, 255, 255, 0.02);
|
|
894
|
+
border-radius: 10px;
|
|
895
|
+
border-left: 3px solid var(--accent-orange);
|
|
753
896
|
}
|
|
754
897
|
|
|
755
898
|
.debt-list li:last-child { border-bottom: none; }
|
|
756
|
-
.debt-list li:hover {
|
|
899
|
+
.debt-list li:hover {
|
|
900
|
+
background: rgba(255, 255, 255, 0.04);
|
|
901
|
+
border-left-width: 4px;
|
|
902
|
+
}
|
|
757
903
|
|
|
758
|
-
.debt-list .title {
|
|
759
|
-
|
|
904
|
+
.debt-list .title {
|
|
905
|
+
font-family: "Syne", sans-serif;
|
|
906
|
+
font-size: 0.8rem;
|
|
907
|
+
font-weight: 700;
|
|
908
|
+
color: var(--text);
|
|
909
|
+
margin-bottom: 0.15rem;
|
|
910
|
+
}
|
|
911
|
+
.debt-list .meta { font-size: 0.65rem; color: var(--text-dim); display: block; margin-top: 0.1rem; font-family: "Space Mono", ui-monospace, monospace; }
|
|
760
912
|
.debt-list-explanation {
|
|
761
|
-
font-size:
|
|
913
|
+
font-size: 0.7rem;
|
|
762
914
|
color: var(--text-muted);
|
|
763
|
-
margin: 0.
|
|
915
|
+
margin: 0.25rem 0 0;
|
|
764
916
|
line-height: 1.4;
|
|
765
917
|
display: -webkit-box;
|
|
766
918
|
-webkit-line-clamp: 2;
|
|
919
|
+
line-clamp: 2;
|
|
767
920
|
-webkit-box-orient: vertical;
|
|
768
921
|
overflow: hidden;
|
|
769
922
|
}
|
|
770
923
|
.debt-list .insight { font-size: 13px; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
|
|
771
|
-
.debt-list-ratings { display: flex; align-items: center; gap: 1rem; margin: 0.
|
|
924
|
+
.debt-list-ratings { display: flex; align-items: center; gap: 1rem; margin: 0.35rem 0 0; flex-wrap: wrap; }
|
|
772
925
|
.debt-list-rating { display: inline-flex; align-items: center; gap: 0.35rem; }
|
|
773
926
|
.debt-list-rating-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
|
|
774
927
|
.debt-list-llm-none { color: var(--text-muted); font-size: 12px; }
|
|
775
928
|
|
|
929
|
+
.debt-list .badge {
|
|
930
|
+
padding: 0.25rem 0.6rem;
|
|
931
|
+
border-radius: 12px;
|
|
932
|
+
font-size: 0.7rem;
|
|
933
|
+
font-weight: 700;
|
|
934
|
+
letter-spacing: 1px;
|
|
935
|
+
}
|
|
936
|
+
.debt-list .badge-critical { background: rgba(255, 51, 102, 0.2); color: var(--tier-1); }
|
|
937
|
+
.debt-list .badge-high { background: rgba(255, 107, 53, 0.2); color: var(--tier-2); }
|
|
938
|
+
.debt-list .badge-medium { background: rgba(255, 210, 63, 0.2); color: var(--tier-3); }
|
|
939
|
+
.debt-list .badge-low { background: rgba(6, 255, 165, 0.2); color: var(--tier-5); }
|
|
940
|
+
|
|
776
941
|
/* Badges */
|
|
777
942
|
.badge {
|
|
778
943
|
display: inline-block;
|
|
@@ -895,15 +1060,43 @@ body.dashboard-page {
|
|
|
895
1060
|
#detail .panel .suggested-code .code-block { margin: 0.35rem 0 0; background: var(--surface); }
|
|
896
1061
|
#detail .panel .file-assessment .code-block { margin: 0.5rem 0 0; background: var(--surface); }
|
|
897
1062
|
|
|
898
|
-
/* ——— LLM output ——— */
|
|
1063
|
+
/* ——— LLM output / description ——— */
|
|
899
1064
|
.llm-output .llm-prose {
|
|
900
|
-
margin: 0 0 0.
|
|
901
|
-
line-height: 1.
|
|
1065
|
+
margin: 0 0 0.5rem;
|
|
1066
|
+
line-height: 1.5;
|
|
902
1067
|
white-space: pre-wrap;
|
|
903
1068
|
word-break: break-word;
|
|
904
|
-
color: var(--text);
|
|
1069
|
+
color: var(--text-muted);
|
|
1070
|
+
font-size: 0.8rem;
|
|
905
1071
|
}
|
|
906
1072
|
|
|
907
1073
|
.llm-output .llm-prose:last-child { margin-bottom: 0; }
|
|
908
1074
|
|
|
909
1075
|
.panel-llm .panel-body .llm-output { margin: 0; }
|
|
1076
|
+
|
|
1077
|
+
/* ——— Scrollbar (reference) ——— */
|
|
1078
|
+
.dashboard-main ::-webkit-scrollbar,
|
|
1079
|
+
.panel-body::-webkit-scrollbar,
|
|
1080
|
+
.overlay-prompt-wrap::-webkit-scrollbar {
|
|
1081
|
+
width: 8px;
|
|
1082
|
+
height: 8px;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.dashboard-main ::-webkit-scrollbar-track,
|
|
1086
|
+
.panel-body::-webkit-scrollbar-track,
|
|
1087
|
+
.overlay-prompt-wrap::-webkit-scrollbar-track {
|
|
1088
|
+
background: var(--bg);
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.dashboard-main ::-webkit-scrollbar-thumb,
|
|
1092
|
+
.panel-body::-webkit-scrollbar-thumb,
|
|
1093
|
+
.overlay-prompt-wrap::-webkit-scrollbar-thumb {
|
|
1094
|
+
background: var(--accent-orange);
|
|
1095
|
+
border-radius: 4px;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.dashboard-main ::-webkit-scrollbar-thumb:hover,
|
|
1099
|
+
.panel-body::-webkit-scrollbar-thumb:hover,
|
|
1100
|
+
.overlay-prompt-wrap::-webkit-scrollbar-thumb:hover {
|
|
1101
|
+
background: var(--accent-red);
|
|
1102
|
+
}
|
package/dist/reports/html.js
CHANGED
|
@@ -82,6 +82,7 @@ function buildHtml(run, title, darkMode, css, script) {
|
|
|
82
82
|
<meta name="twitter:card" content="summary" />
|
|
83
83
|
<meta name="twitter:title" content="${escapeHtml(title)} — ${cleanliness.tier}/5" />
|
|
84
84
|
<meta name="twitter:description" content="${escapeHtml(cleanliness.label)}: ${escapeHtml(cleanliness.description)}" />
|
|
85
|
+
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" />
|
|
85
86
|
<style>${css}</style>
|
|
86
87
|
</head>
|
|
87
88
|
<body class="dashboard-page">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tech-debt-visualizer",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.16",
|
|
4
4
|
"description": "Language-agnostic CLI that analyzes repos and generates interactive technical debt visualizations with AI-powered insights",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|