tech-debt-visualizer 0.2.14 → 0.2.15
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 +326 -105
- 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,38 @@
|
|
|
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
|
+
animation: bgFloat 20s ease-in-out infinite;
|
|
78
|
+
z-index: 0;
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@keyframes bgFloat {
|
|
83
|
+
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
84
|
+
33% { transform: translate(30px, -30px) rotate(5deg); }
|
|
85
|
+
66% { transform: translate(-20px, 20px) rotate(-5deg); }
|
|
50
86
|
}
|
|
51
87
|
|
|
52
88
|
body.dashboard-page {
|
|
@@ -152,13 +188,15 @@ body.dashboard-page {
|
|
|
152
188
|
.dashboard-main {
|
|
153
189
|
flex: 1;
|
|
154
190
|
min-height: 0;
|
|
155
|
-
max-width:
|
|
191
|
+
max-width: 1400px;
|
|
156
192
|
margin: 0 auto;
|
|
157
|
-
padding:
|
|
193
|
+
padding: 1.5rem 2.5rem;
|
|
158
194
|
width: 100%;
|
|
159
195
|
overflow: hidden;
|
|
160
196
|
display: flex;
|
|
161
197
|
flex-direction: column;
|
|
198
|
+
position: relative;
|
|
199
|
+
z-index: 1;
|
|
162
200
|
}
|
|
163
201
|
|
|
164
202
|
.dashboard-grid-2x2 {
|
|
@@ -167,7 +205,7 @@ body.dashboard-page {
|
|
|
167
205
|
display: grid;
|
|
168
206
|
grid-template-columns: 1fr 1fr;
|
|
169
207
|
grid-template-rows: auto 1fr;
|
|
170
|
-
gap:
|
|
208
|
+
gap: 2rem;
|
|
171
209
|
align-items: stretch;
|
|
172
210
|
}
|
|
173
211
|
|
|
@@ -204,14 +242,19 @@ body.dashboard-page {
|
|
|
204
242
|
grid-template-columns: 1fr;
|
|
205
243
|
grid-template-rows: auto auto auto auto;
|
|
206
244
|
height: auto;
|
|
245
|
+
gap: 1.25rem;
|
|
207
246
|
}
|
|
208
247
|
.dashboard-cell-heatmap .panel-body-heatmap { min-height: 240px; }
|
|
209
248
|
.dashboard-cell-list .panel-body { min-height: 240px; }
|
|
249
|
+
.panel-score-pop .score-num { font-size: 3.5rem; }
|
|
250
|
+
.panel-score-pop .score-of { font-size: 1.5rem; }
|
|
210
251
|
}
|
|
211
252
|
|
|
212
253
|
@media (max-width: 560px) {
|
|
213
254
|
.dashboard-header { padding: 0.5rem 0.75rem; }
|
|
214
|
-
.dashboard-main { padding: 0.
|
|
255
|
+
.dashboard-main { padding: 0.75rem 1rem; }
|
|
256
|
+
.dashboard-grid-2x2 { gap: 1rem; }
|
|
257
|
+
#treemap { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
|
|
215
258
|
}
|
|
216
259
|
|
|
217
260
|
/* ——— Footer (hidden when empty; button moved to header) ——— */
|
|
@@ -399,24 +442,55 @@ body.dashboard-page {
|
|
|
399
442
|
display: block;
|
|
400
443
|
}
|
|
401
444
|
|
|
402
|
-
/* ——— Panels:
|
|
445
|
+
/* ——— Panels: card look with hover and top accent ——— */
|
|
403
446
|
.panel {
|
|
404
|
-
background: var(--
|
|
405
|
-
border: 1px solid var(--border);
|
|
406
|
-
border-radius: var(--radius);
|
|
447
|
+
background: var(--bg-secondary);
|
|
448
|
+
border: 1px solid var(--border-subtle);
|
|
449
|
+
border-radius: var(--radius-card);
|
|
407
450
|
box-shadow: var(--shadow);
|
|
408
451
|
overflow: hidden;
|
|
452
|
+
position: relative;
|
|
453
|
+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.panel::before {
|
|
457
|
+
content: "";
|
|
458
|
+
position: absolute;
|
|
459
|
+
top: 0;
|
|
460
|
+
left: 0;
|
|
461
|
+
right: 0;
|
|
462
|
+
height: 3px;
|
|
463
|
+
background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow));
|
|
464
|
+
transform: scaleX(0);
|
|
465
|
+
transform-origin: left;
|
|
466
|
+
transition: transform 0.6s ease;
|
|
467
|
+
z-index: 1;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.panel:hover {
|
|
471
|
+
transform: translateY(-5px);
|
|
472
|
+
border-color: rgba(255, 107, 53, 0.25);
|
|
473
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 107, 53, 0.15);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.panel:hover::before {
|
|
477
|
+
transform: scaleX(1);
|
|
409
478
|
}
|
|
410
479
|
|
|
411
480
|
.panel-header {
|
|
412
|
-
padding:
|
|
481
|
+
padding: 1rem 1.25rem;
|
|
413
482
|
border-bottom: 1px solid var(--border-subtle);
|
|
414
|
-
background: rgba(0, 0, 0, 0.
|
|
483
|
+
background: rgba(0, 0, 0, 0.08);
|
|
415
484
|
flex-shrink: 0;
|
|
416
485
|
}
|
|
417
486
|
|
|
418
487
|
.panel-title {
|
|
419
|
-
color: var(--text);
|
|
488
|
+
color: var(--text-muted);
|
|
489
|
+
font-family: "Syne", sans-serif;
|
|
490
|
+
font-size: 0.95rem;
|
|
491
|
+
font-weight: 700;
|
|
492
|
+
letter-spacing: 3px;
|
|
493
|
+
text-transform: uppercase;
|
|
420
494
|
}
|
|
421
495
|
|
|
422
496
|
[data-theme="light"] .panel-header {
|
|
@@ -425,10 +499,6 @@ body.dashboard-page {
|
|
|
425
499
|
|
|
426
500
|
.panel-title {
|
|
427
501
|
margin: 0;
|
|
428
|
-
font-size: 12px;
|
|
429
|
-
font-weight: 700;
|
|
430
|
-
letter-spacing: 0.02em;
|
|
431
|
-
text-transform: uppercase;
|
|
432
502
|
}
|
|
433
503
|
|
|
434
504
|
.panel-desc {
|
|
@@ -439,7 +509,7 @@ body.dashboard-page {
|
|
|
439
509
|
}
|
|
440
510
|
|
|
441
511
|
.panel-body {
|
|
442
|
-
padding:
|
|
512
|
+
padding: 1.25rem 1.5rem;
|
|
443
513
|
}
|
|
444
514
|
|
|
445
515
|
.panel-body-center {
|
|
@@ -509,50 +579,120 @@ body.dashboard-page {
|
|
|
509
579
|
font-weight: 600;
|
|
510
580
|
}
|
|
511
581
|
|
|
512
|
-
/* ———
|
|
582
|
+
/* ——— Hero-style score panel (reference look) ——— */
|
|
583
|
+
.panel-score-pop {
|
|
584
|
+
border: 2px solid rgba(255, 107, 53, 0.3);
|
|
585
|
+
box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.4);
|
|
586
|
+
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--surface-hover) 100%);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.panel-score-pop::before {
|
|
590
|
+
display: none;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.panel-score-pop:hover {
|
|
594
|
+
transform: none;
|
|
595
|
+
box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.4);
|
|
596
|
+
}
|
|
597
|
+
|
|
513
598
|
.panel-score-pop .panel-body-score {
|
|
514
|
-
padding: 1.
|
|
599
|
+
padding: 2rem 1.5rem;
|
|
600
|
+
position: relative;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.panel-score-pop .panel-header .panel-title {
|
|
604
|
+
font-size: 0.9rem;
|
|
605
|
+
letter-spacing: 4px;
|
|
606
|
+
color: var(--text-muted);
|
|
607
|
+
margin-bottom: 0;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.panel-score-pop .score-numeric {
|
|
611
|
+
margin-bottom: 0.75rem;
|
|
515
612
|
}
|
|
516
613
|
|
|
517
614
|
.panel-score-pop .score-num {
|
|
518
|
-
font-
|
|
519
|
-
font-
|
|
520
|
-
|
|
615
|
+
font-family: "Syne", sans-serif;
|
|
616
|
+
font-size: 5rem;
|
|
617
|
+
font-weight: 800;
|
|
618
|
+
line-height: 1;
|
|
619
|
+
background: linear-gradient(180deg, var(--accent-orange) 0%, var(--accent-red) 100%);
|
|
620
|
+
-webkit-background-clip: text;
|
|
621
|
+
-webkit-text-fill-color: transparent;
|
|
622
|
+
background-clip: text;
|
|
623
|
+
filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.4));
|
|
521
624
|
}
|
|
522
625
|
|
|
523
626
|
.panel-score-pop .score-of {
|
|
524
|
-
font-size:
|
|
627
|
+
font-size: 2rem;
|
|
525
628
|
font-weight: 700;
|
|
629
|
+
color: var(--text-muted);
|
|
526
630
|
}
|
|
527
631
|
|
|
528
632
|
.panel-score-pop .score-label {
|
|
529
|
-
|
|
530
|
-
|
|
633
|
+
display: inline-block;
|
|
634
|
+
background: linear-gradient(135deg, var(--accent-orange), var(--accent-red));
|
|
635
|
+
padding: 0.5rem 1.25rem;
|
|
636
|
+
border-radius: 50px;
|
|
637
|
+
font-family: "Syne", sans-serif;
|
|
638
|
+
font-size: 1rem;
|
|
639
|
+
font-weight: 700;
|
|
640
|
+
letter-spacing: 1px;
|
|
531
641
|
text-transform: uppercase;
|
|
532
|
-
|
|
533
|
-
margin-bottom: 0.
|
|
642
|
+
box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35);
|
|
643
|
+
margin-bottom: 0.5rem;
|
|
644
|
+
-webkit-text-fill-color: initial;
|
|
645
|
+
color: #fff;
|
|
534
646
|
}
|
|
535
647
|
|
|
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
648
|
.panel-score-pop .score-desc {
|
|
548
|
-
font-size:
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
649
|
+
font-size: 1rem;
|
|
650
|
+
color: var(--text-muted);
|
|
651
|
+
font-style: italic;
|
|
652
|
+
margin-bottom: 0.75rem;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.panel-score-pop .score-stats {
|
|
656
|
+
display: flex;
|
|
657
|
+
justify-content: center;
|
|
658
|
+
gap: 1.5rem;
|
|
659
|
+
flex-wrap: wrap;
|
|
660
|
+
font-size: 0.85rem;
|
|
661
|
+
color: var(--text-dim);
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
.panel-score-pop .score-stats::before {
|
|
665
|
+
content: "";
|
|
666
|
+
display: block;
|
|
667
|
+
width: 100%;
|
|
668
|
+
height: 0;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.panel-score-pop .score-stats {
|
|
672
|
+
margin-top: 0.25rem;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
/* Stats row with dots (injected by HTML is just text; we style as stat items) */
|
|
676
|
+
.panel-body-score .score-stats {
|
|
677
|
+
display: flex;
|
|
678
|
+
justify-content: center;
|
|
679
|
+
align-items: center;
|
|
680
|
+
gap: 1.25rem;
|
|
681
|
+
flex-wrap: wrap;
|
|
554
682
|
}
|
|
555
683
|
|
|
684
|
+
.panel-score-pop[data-tier="1"] .score-num { --accent-orange: #ff6b6b; --accent-red: #e53935; }
|
|
685
|
+
.panel-score-pop[data-tier="2"] .score-num { --accent-orange: #ff6b35; --accent-red: #ff3366; }
|
|
686
|
+
.panel-score-pop[data-tier="3"] .score-num { --accent-orange: #ffb347; --accent-red: #ffd23f; }
|
|
687
|
+
.panel-score-pop[data-tier="4"] .score-num { --accent-orange: #4ecdc4; --accent-red: #29b6f6; }
|
|
688
|
+
.panel-score-pop[data-tier="5"] .score-num { --accent-orange: #06ffa5; --accent-red: #43a047; }
|
|
689
|
+
|
|
690
|
+
.panel-score-pop[data-tier="1"] .score-label { background: linear-gradient(135deg, #ff6b6b, #e53935); }
|
|
691
|
+
.panel-score-pop[data-tier="2"] .score-label { background: linear-gradient(135deg, var(--accent-orange), var(--accent-red)); }
|
|
692
|
+
.panel-score-pop[data-tier="3"] .score-label { background: linear-gradient(135deg, #ffb347, #ffd23f); color: #1a1a1a; }
|
|
693
|
+
.panel-score-pop[data-tier="4"] .score-label { background: linear-gradient(135deg, #4ecdc4, #29b6f6); }
|
|
694
|
+
.panel-score-pop[data-tier="5"] .score-label { background: linear-gradient(135deg, #06ffa5, #43a047); }
|
|
695
|
+
|
|
556
696
|
/* ——— Description of problems panel (top-right) ——— */
|
|
557
697
|
.panel-empty {
|
|
558
698
|
margin: 0;
|
|
@@ -561,25 +701,54 @@ body.dashboard-page {
|
|
|
561
701
|
font-style: italic;
|
|
562
702
|
}
|
|
563
703
|
|
|
704
|
+
/* ——— Impact / priority section (reference impact-list) ——— */
|
|
564
705
|
.priority-inline {
|
|
565
706
|
display: grid;
|
|
566
707
|
grid-template-columns: 1fr 1fr;
|
|
567
|
-
gap:
|
|
568
|
-
margin-top:
|
|
569
|
-
padding-top:
|
|
708
|
+
gap: 1.5rem;
|
|
709
|
+
margin-top: 1.25rem;
|
|
710
|
+
padding-top: 1.25rem;
|
|
570
711
|
border-top: 1px solid var(--border-subtle);
|
|
571
712
|
}
|
|
572
713
|
|
|
714
|
+
.priority-inline-col {
|
|
715
|
+
background: rgba(255, 255, 255, 0.02);
|
|
716
|
+
border-radius: 16px;
|
|
717
|
+
padding: 1.25rem;
|
|
718
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
719
|
+
}
|
|
720
|
+
|
|
573
721
|
.priority-inline h4 {
|
|
574
|
-
margin: 0 0 0.
|
|
575
|
-
font-
|
|
722
|
+
margin: 0 0 0.75rem;
|
|
723
|
+
font-family: "Syne", sans-serif;
|
|
724
|
+
font-size: 0.85rem;
|
|
576
725
|
font-weight: 700;
|
|
577
726
|
text-transform: uppercase;
|
|
578
|
-
letter-spacing:
|
|
727
|
+
letter-spacing: 2px;
|
|
728
|
+
color: var(--accent-orange);
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.priority-inline .priority-list {
|
|
732
|
+
margin: 0;
|
|
733
|
+
list-style: none;
|
|
734
|
+
padding: 0;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.priority-inline .priority-list li {
|
|
738
|
+
padding: 0.5rem 0;
|
|
739
|
+
padding-left: 1.25rem;
|
|
740
|
+
position: relative;
|
|
579
741
|
color: var(--text-muted);
|
|
742
|
+
font-size: 0.9rem;
|
|
743
|
+
border-bottom: none;
|
|
580
744
|
}
|
|
581
745
|
|
|
582
|
-
.priority-inline .priority-list {
|
|
746
|
+
.priority-inline .priority-list li::before {
|
|
747
|
+
content: "▸";
|
|
748
|
+
position: absolute;
|
|
749
|
+
left: 0;
|
|
750
|
+
color: var(--accent-orange);
|
|
751
|
+
}
|
|
583
752
|
|
|
584
753
|
@media (max-width: 600px) {
|
|
585
754
|
.priority-inline { grid-template-columns: 1fr; }
|
|
@@ -646,62 +815,59 @@ body.dashboard-page {
|
|
|
646
815
|
margin: 0;
|
|
647
816
|
}
|
|
648
817
|
|
|
649
|
-
/* ——— Treemap:
|
|
818
|
+
/* ——— Treemap: file-item style (reference) ——— */
|
|
650
819
|
#treemap {
|
|
651
|
-
display:
|
|
652
|
-
|
|
653
|
-
gap:
|
|
820
|
+
display: grid;
|
|
821
|
+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
822
|
+
gap: 0.75rem;
|
|
654
823
|
min-height: 120px;
|
|
655
824
|
padding: 0.25rem 0;
|
|
656
825
|
}
|
|
657
826
|
|
|
658
827
|
.treemap-cell {
|
|
659
|
-
|
|
828
|
+
aspect-ratio: 1;
|
|
660
829
|
flex: none;
|
|
661
830
|
display: flex;
|
|
662
831
|
flex-direction: column;
|
|
663
832
|
align-items: center;
|
|
664
|
-
|
|
833
|
+
justify-content: center;
|
|
834
|
+
gap: 0;
|
|
665
835
|
cursor: pointer;
|
|
666
|
-
padding: 0;
|
|
667
|
-
border:
|
|
668
|
-
|
|
836
|
+
padding: 0.75rem;
|
|
837
|
+
border: 2px solid transparent;
|
|
838
|
+
border-radius: 16px;
|
|
839
|
+
transition: transform 0.3s ease, border-color 0.3s ease;
|
|
669
840
|
}
|
|
670
841
|
|
|
671
842
|
.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);
|
|
843
|
+
display: none;
|
|
677
844
|
}
|
|
678
845
|
|
|
679
846
|
.treemap-cell-name {
|
|
680
|
-
font-size:
|
|
681
|
-
line-height: 1.
|
|
682
|
-
color:
|
|
847
|
+
font-size: 0.75rem;
|
|
848
|
+
line-height: 1.35;
|
|
849
|
+
color: inherit;
|
|
683
850
|
text-align: center;
|
|
684
851
|
max-width: 100%;
|
|
685
852
|
overflow: hidden;
|
|
686
853
|
display: -webkit-box;
|
|
687
|
-
-webkit-line-clamp:
|
|
854
|
+
-webkit-line-clamp: 3;
|
|
855
|
+
line-clamp: 3;
|
|
688
856
|
-webkit-box-orient: vertical;
|
|
689
|
-
word-break: break-
|
|
857
|
+
word-break: break-word;
|
|
858
|
+
font-weight: 600;
|
|
690
859
|
}
|
|
691
860
|
|
|
692
|
-
.treemap-cell:hover
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
}
|
|
696
|
-
.treemap-cell:hover .treemap-cell-name {
|
|
697
|
-
color: var(--link);
|
|
861
|
+
.treemap-cell:hover {
|
|
862
|
+
transform: scale(1.05) rotate(-2deg);
|
|
863
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
698
864
|
}
|
|
699
865
|
|
|
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"]
|
|
866
|
+
.treemap-cell[data-severity="critical"] { background: rgba(255, 51, 102, 0.2); color: var(--tier-1); }
|
|
867
|
+
.treemap-cell[data-severity="high"] { background: rgba(255, 107, 53, 0.2); color: var(--tier-2); }
|
|
868
|
+
.treemap-cell[data-severity="medium"] { background: rgba(255, 210, 63, 0.2); color: var(--tier-3); }
|
|
869
|
+
.treemap-cell[data-severity="low"] { background: rgba(6, 255, 165, 0.2); color: var(--tier-5); }
|
|
870
|
+
.treemap-cell[data-severity="none"] { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); }
|
|
705
871
|
|
|
706
872
|
.legend {
|
|
707
873
|
display: flex;
|
|
@@ -713,7 +879,7 @@ body.dashboard-page {
|
|
|
713
879
|
color: var(--text-muted);
|
|
714
880
|
}
|
|
715
881
|
|
|
716
|
-
.legend span { display: inline-flex; align-items: center; gap: 0.
|
|
882
|
+
.legend span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
|
|
717
883
|
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
|
|
718
884
|
.legend .swatch-crit { background: var(--tier-1); }
|
|
719
885
|
.legend .swatch-high { background: var(--tier-2); }
|
|
@@ -738,41 +904,69 @@ body.dashboard-page {
|
|
|
738
904
|
|
|
739
905
|
.priority-list li:last-child { border-bottom: none; }
|
|
740
906
|
|
|
741
|
-
/* ——— Debt list ——— */
|
|
907
|
+
/* ——— Debt list (file-detail style from reference) ——— */
|
|
742
908
|
.debt-list {
|
|
743
909
|
list-style: none;
|
|
744
910
|
padding: 0;
|
|
745
911
|
margin: 0;
|
|
912
|
+
display: flex;
|
|
913
|
+
flex-direction: column;
|
|
914
|
+
gap: 1rem;
|
|
746
915
|
}
|
|
747
916
|
|
|
748
917
|
.debt-list li {
|
|
749
|
-
border-bottom:
|
|
750
|
-
padding:
|
|
918
|
+
border-bottom: none;
|
|
919
|
+
padding: 1.25rem;
|
|
751
920
|
cursor: pointer;
|
|
752
|
-
transition: background 0.
|
|
921
|
+
transition: background 0.3s ease, border-left-width 0.3s ease;
|
|
922
|
+
background: rgba(255, 255, 255, 0.02);
|
|
923
|
+
border-radius: 16px;
|
|
924
|
+
border-left: 4px solid var(--accent-orange);
|
|
753
925
|
}
|
|
754
926
|
|
|
755
927
|
.debt-list li:last-child { border-bottom: none; }
|
|
756
|
-
.debt-list li:hover {
|
|
928
|
+
.debt-list li:hover {
|
|
929
|
+
background: rgba(255, 255, 255, 0.04);
|
|
930
|
+
border-left-width: 6px;
|
|
931
|
+
}
|
|
757
932
|
|
|
758
|
-
.debt-list .title {
|
|
759
|
-
|
|
933
|
+
.debt-list .title {
|
|
934
|
+
font-family: "Syne", sans-serif;
|
|
935
|
+
font-size: 1.05rem;
|
|
936
|
+
font-weight: 700;
|
|
937
|
+
color: var(--text);
|
|
938
|
+
margin-bottom: 0.35rem;
|
|
939
|
+
}
|
|
940
|
+
.debt-list .meta { font-size: 0.8rem; color: var(--text-dim); display: block; margin-top: 0.25rem; font-family: "Space Mono", ui-monospace, monospace; }
|
|
760
941
|
.debt-list-explanation {
|
|
761
|
-
font-size:
|
|
942
|
+
font-size: 0.9rem;
|
|
762
943
|
color: var(--text-muted);
|
|
763
|
-
margin: 0.
|
|
764
|
-
line-height: 1.
|
|
944
|
+
margin: 0.5rem 0 0;
|
|
945
|
+
line-height: 1.7;
|
|
765
946
|
display: -webkit-box;
|
|
766
947
|
-webkit-line-clamp: 2;
|
|
948
|
+
line-clamp: 2;
|
|
767
949
|
-webkit-box-orient: vertical;
|
|
768
950
|
overflow: hidden;
|
|
769
951
|
}
|
|
770
952
|
.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.
|
|
953
|
+
.debt-list-ratings { display: flex; align-items: center; gap: 1rem; margin: 0.35rem 0 0; flex-wrap: wrap; }
|
|
772
954
|
.debt-list-rating { display: inline-flex; align-items: center; gap: 0.35rem; }
|
|
773
955
|
.debt-list-rating-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
|
|
774
956
|
.debt-list-llm-none { color: var(--text-muted); font-size: 12px; }
|
|
775
957
|
|
|
958
|
+
.debt-list .badge {
|
|
959
|
+
padding: 0.25rem 0.6rem;
|
|
960
|
+
border-radius: 12px;
|
|
961
|
+
font-size: 0.7rem;
|
|
962
|
+
font-weight: 700;
|
|
963
|
+
letter-spacing: 1px;
|
|
964
|
+
}
|
|
965
|
+
.debt-list .badge-critical { background: rgba(255, 51, 102, 0.2); color: var(--tier-1); }
|
|
966
|
+
.debt-list .badge-high { background: rgba(255, 107, 53, 0.2); color: var(--tier-2); }
|
|
967
|
+
.debt-list .badge-medium { background: rgba(255, 210, 63, 0.2); color: var(--tier-3); }
|
|
968
|
+
.debt-list .badge-low { background: rgba(6, 255, 165, 0.2); color: var(--tier-5); }
|
|
969
|
+
|
|
776
970
|
/* Badges */
|
|
777
971
|
.badge {
|
|
778
972
|
display: inline-block;
|
|
@@ -895,15 +1089,42 @@ body.dashboard-page {
|
|
|
895
1089
|
#detail .panel .suggested-code .code-block { margin: 0.35rem 0 0; background: var(--surface); }
|
|
896
1090
|
#detail .panel .file-assessment .code-block { margin: 0.5rem 0 0; background: var(--surface); }
|
|
897
1091
|
|
|
898
|
-
/* ——— LLM output ——— */
|
|
1092
|
+
/* ——— LLM output / description ——— */
|
|
899
1093
|
.llm-output .llm-prose {
|
|
900
|
-
margin: 0 0
|
|
901
|
-
line-height: 1.
|
|
1094
|
+
margin: 0 0 1rem;
|
|
1095
|
+
line-height: 1.8;
|
|
902
1096
|
white-space: pre-wrap;
|
|
903
1097
|
word-break: break-word;
|
|
904
|
-
color: var(--text);
|
|
1098
|
+
color: var(--text-muted);
|
|
905
1099
|
}
|
|
906
1100
|
|
|
907
1101
|
.llm-output .llm-prose:last-child { margin-bottom: 0; }
|
|
908
1102
|
|
|
909
1103
|
.panel-llm .panel-body .llm-output { margin: 0; }
|
|
1104
|
+
|
|
1105
|
+
/* ——— Scrollbar (reference) ——— */
|
|
1106
|
+
.dashboard-main ::-webkit-scrollbar,
|
|
1107
|
+
.panel-body::-webkit-scrollbar,
|
|
1108
|
+
.overlay-prompt-wrap::-webkit-scrollbar {
|
|
1109
|
+
width: 8px;
|
|
1110
|
+
height: 8px;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
.dashboard-main ::-webkit-scrollbar-track,
|
|
1114
|
+
.panel-body::-webkit-scrollbar-track,
|
|
1115
|
+
.overlay-prompt-wrap::-webkit-scrollbar-track {
|
|
1116
|
+
background: var(--bg);
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.dashboard-main ::-webkit-scrollbar-thumb,
|
|
1120
|
+
.panel-body::-webkit-scrollbar-thumb,
|
|
1121
|
+
.overlay-prompt-wrap::-webkit-scrollbar-thumb {
|
|
1122
|
+
background: var(--accent-orange);
|
|
1123
|
+
border-radius: 4px;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
.dashboard-main ::-webkit-scrollbar-thumb:hover,
|
|
1127
|
+
.panel-body::-webkit-scrollbar-thumb:hover,
|
|
1128
|
+
.overlay-prompt-wrap::-webkit-scrollbar-thumb:hover {
|
|
1129
|
+
background: var(--accent-red);
|
|
1130
|
+
}
|
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.15",
|
|
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",
|