tech-debt-visualizer 0.2.10 → 0.2.11

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.
@@ -106,74 +106,25 @@ body.dashboard-page {
106
106
  flex-shrink: 0;
107
107
  }
108
108
 
109
- /* ——— Score block in header: really pop ——— */
110
- .dashboard-score-block {
111
- padding: 0.5rem 0.9rem;
112
- border-radius: var(--radius);
113
- font-weight: 700;
114
- }
115
-
116
- .dashboard-score-main {
117
- display: flex;
109
+ /* ——— Header score: simple strip (same as before) ——— */
110
+ .dashboard-score {
111
+ display: inline-flex;
118
112
  align-items: baseline;
119
- gap: 0.3rem;
120
- flex-wrap: wrap;
121
- }
122
-
123
- .dashboard-score-value {
124
- font-size: 1.75rem;
125
- line-height: 1;
126
- letter-spacing: -0.03em;
127
- }
128
-
129
- .dashboard-score-of {
130
- font-size: 1rem;
113
+ gap: 0.2rem;
114
+ padding: 0.35rem 0.65rem;
115
+ border-radius: var(--radius);
131
116
  font-weight: 600;
132
- opacity: 0.9;
133
- }
134
-
135
- .dashboard-score-label {
136
- font-size: 0.95rem;
137
- font-weight: 800;
138
- text-transform: uppercase;
139
- letter-spacing: 0.06em;
140
- margin-left: 0.25rem;
141
117
  }
142
118
 
143
- .dashboard-score-desc {
144
- margin: 0.35rem 0 0;
145
- font-size: 13px;
146
- line-height: 1.35;
147
- font-weight: 600;
148
- opacity: 0.95;
149
- max-width: 320px;
150
- }
119
+ .dashboard-score-value { font-size: 1.25rem; line-height: 1; }
120
+ .dashboard-score-of { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
121
+ .dashboard-score-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.35rem; opacity: 0.95; }
151
122
 
152
- .dashboard-score-block.tier-1 {
153
- background: rgba(229, 57, 53, 0.25);
154
- color: #ff8a80;
155
- box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.3);
156
- }
157
- .dashboard-score-block.tier-2 {
158
- background: rgba(245, 124, 0, 0.25);
159
- color: #ffb74d;
160
- box-shadow: 0 0 0 1px rgba(245, 124, 0, 0.3);
161
- }
162
- .dashboard-score-block.tier-3 {
163
- background: rgba(249, 168, 37, 0.25);
164
- color: #ffd54f;
165
- box-shadow: 0 0 0 1px rgba(249, 168, 37, 0.3);
166
- }
167
- .dashboard-score-block.tier-4 {
168
- background: rgba(41, 182, 246, 0.25);
169
- color: #82b1ff;
170
- box-shadow: 0 0 0 1px rgba(41, 182, 246, 0.3);
171
- }
172
- .dashboard-score-block.tier-5 {
173
- background: rgba(67, 160, 71, 0.25);
174
- color: #81c784;
175
- box-shadow: 0 0 0 1px rgba(67, 160, 71, 0.3);
176
- }
123
+ .dashboard-score.tier-1 { background: rgba(229, 57, 53, 0.2); color: #ff8a80; font-weight: 700; }
124
+ .dashboard-score.tier-2 { background: rgba(245, 124, 0, 0.2); color: #ffb74d; font-weight: 700; }
125
+ .dashboard-score.tier-3 { background: rgba(249, 168, 37, 0.2); color: #ffd54f; font-weight: 700; }
126
+ .dashboard-score.tier-4 { background: rgba(41, 182, 246, 0.2); color: #82b1ff; font-weight: 700; }
127
+ .dashboard-score.tier-5 { background: rgba(67, 160, 71, 0.2); color: #81c784; font-weight: 700; }
177
128
 
178
129
  .dashboard-date {
179
130
  font-size: 12px;
@@ -423,7 +374,7 @@ body.dashboard-page {
423
374
  text-align: center;
424
375
  }
425
376
 
426
- /* ——— Score panel (top-left): numeric score, tier accent ——— */
377
+ /* ——— Score panel (top-left): tier accent ——— */
427
378
  .panel-score {
428
379
  border-left: 3px solid var(--link);
429
380
  }
@@ -486,6 +437,50 @@ body.dashboard-page {
486
437
  font-weight: 600;
487
438
  }
488
439
 
440
+ /* ——— Top-left score panel: make it pop ——— */
441
+ .panel-score-pop .panel-body-score {
442
+ padding: 1.25rem 1rem;
443
+ }
444
+
445
+ .panel-score-pop .score-num {
446
+ font-size: 2.75rem;
447
+ font-weight: 900;
448
+ letter-spacing: -0.05em;
449
+ }
450
+
451
+ .panel-score-pop .score-of {
452
+ font-size: 1.1rem;
453
+ font-weight: 700;
454
+ }
455
+
456
+ .panel-score-pop .score-label {
457
+ font-size: 1.15rem;
458
+ font-weight: 800;
459
+ text-transform: uppercase;
460
+ letter-spacing: 0.08em;
461
+ margin-bottom: 0.35rem;
462
+ }
463
+
464
+ .panel-score-pop[data-tier="1"] .score-num,
465
+ .panel-score-pop[data-tier="1"] .score-label { color: var(--tier-1); }
466
+ .panel-score-pop[data-tier="2"] .score-num,
467
+ .panel-score-pop[data-tier="2"] .score-label { color: var(--tier-2); }
468
+ .panel-score-pop[data-tier="3"] .score-num,
469
+ .panel-score-pop[data-tier="3"] .score-label { color: var(--tier-3); }
470
+ .panel-score-pop[data-tier="4"] .score-num,
471
+ .panel-score-pop[data-tier="4"] .score-label { color: var(--tier-4); }
472
+ .panel-score-pop[data-tier="5"] .score-num,
473
+ .panel-score-pop[data-tier="5"] .score-label { color: var(--tier-5); }
474
+
475
+ .panel-score-pop .score-desc {
476
+ font-size: 14px;
477
+ font-weight: 600;
478
+ line-height: 1.45;
479
+ color: var(--text);
480
+ margin-bottom: 0.5rem;
481
+ max-width: 280px;
482
+ }
483
+
489
484
  /* ——— Description of problems panel (top-right) ——— */
490
485
  .panel-empty {
491
486
  margin: 0;
@@ -92,13 +92,10 @@ function buildHtml(run, title, darkMode, css, script) {
92
92
  <span class="dashboard-meta">${escapeHtml(run.repoPath)}</span>
93
93
  </div>
94
94
  <div class="dashboard-header-right">
95
- <div class="dashboard-score-block tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} of 5">
96
- <div class="dashboard-score-main">
97
- <span class="dashboard-score-value">${cleanliness.tier}</span>
98
- <span class="dashboard-score-of">of 5</span>
99
- <span class="dashboard-score-label">${escapeHtml(cleanliness.label)}</span>
100
- </div>
101
- <p class="dashboard-score-desc">${escapeHtml(cleanliness.description)}</p>
95
+ <div class="dashboard-score tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} of 5">
96
+ <span class="dashboard-score-value">${cleanliness.tier}</span>
97
+ <span class="dashboard-score-of">/ 5</span>
98
+ <span class="dashboard-score-label">${escapeHtml(cleanliness.label)}</span>
102
99
  </div>
103
100
  <button type="button" class="btn-ai-prompts btn-ai-prompts-header" id="btnAiPrompts">AI cleanup prompts</button>
104
101
  <span class="dashboard-date">${run.completedAt ?? run.startedAt}</span>
@@ -108,7 +105,7 @@ function buildHtml(run, title, darkMode, css, script) {
108
105
  <main class="dashboard-main">
109
106
  <div class="dashboard-grid-2x2">
110
107
  <div class="dashboard-cell dashboard-cell-score">
111
- <div class="panel panel-score" data-tier="${cleanliness.tier}">
108
+ <div class="panel panel-score panel-score-pop" data-tier="${cleanliness.tier}">
112
109
  <div class="panel-header">
113
110
  <h2 class="panel-title">Technical Debt Cleanliness Score</h2>
114
111
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tech-debt-visualizer",
3
- "version": "0.2.10",
3
+ "version": "0.2.11",
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",