tech-debt-visualizer 0.2.8 → 0.2.10

package/dist/reports/assets/report.css

@@ -106,30 +106,97 @@ body.dashboard-page {
   flex-shrink: 0;
 }
 
-.dashboard-score {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.2rem;
-  padding: 0.35rem 0.65rem;
+/* ——— Score block in header: really pop ——— */
+.dashboard-score-block {
+  padding: 0.5rem 0.9rem;
   border-radius: var(--radius);
+  font-weight: 700;
+}
+
+.dashboard-score-main {
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+
+.dashboard-score-value {
+  font-size: 1.75rem;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.dashboard-score-of {
+  font-size: 1rem;
   font-weight: 600;
+  opacity: 0.9;
+}
+
+.dashboard-score-label {
+  font-size: 0.95rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-left: 0.25rem;
 }
 
-.dashboard-score-value { font-size: 1.25rem; line-height: 1; }
-.dashboard-score-of { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
-.dashboard-score-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.35rem; opacity: 0.95; }
+.dashboard-score-desc {
+  margin: 0.35rem 0 0;
+  font-size: 13px;
+  line-height: 1.35;
+  font-weight: 600;
+  opacity: 0.95;
+  max-width: 320px;
+}
 
-.dashboard-score.tier-1 { background: rgba(229, 57, 53, 0.2); color: #ff8a80; font-weight: 700; }
-.dashboard-score.tier-2 { background: rgba(245, 124, 0, 0.2); color: #ffb74d; font-weight: 700; }
-.dashboard-score.tier-3 { background: rgba(249, 168, 37, 0.2); color: #ffd54f; font-weight: 700; }
-.dashboard-score.tier-4 { background: rgba(41, 182, 246, 0.2); color: #82b1ff; font-weight: 700; }
-.dashboard-score.tier-5 { background: rgba(67, 160, 71, 0.2); color: #81c784; font-weight: 700; }
+.dashboard-score-block.tier-1 {
+  background: rgba(229, 57, 53, 0.25);
+  color: #ff8a80;
+  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.3);
+}
+.dashboard-score-block.tier-2 {
+  background: rgba(245, 124, 0, 0.25);
+  color: #ffb74d;
+  box-shadow: 0 0 0 1px rgba(245, 124, 0, 0.3);
+}
+.dashboard-score-block.tier-3 {
+  background: rgba(249, 168, 37, 0.25);
+  color: #ffd54f;
+  box-shadow: 0 0 0 1px rgba(249, 168, 37, 0.3);
+}
+.dashboard-score-block.tier-4 {
+  background: rgba(41, 182, 246, 0.25);
+  color: #82b1ff;
+  box-shadow: 0 0 0 1px rgba(41, 182, 246, 0.3);
+}
+.dashboard-score-block.tier-5 {
+  background: rgba(67, 160, 71, 0.25);
+  color: #81c784;
+  box-shadow: 0 0 0 1px rgba(67, 160, 71, 0.3);
+}
 
 .dashboard-date {
   font-size: 12px;
   color: var(--text-muted);
 }
 
+/* ——— AI prompts button in header (between score and date) ——— */
+.btn-ai-prompts-header {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0.4rem 0.75rem;
+  background: var(--surface);
+  color: var(--link);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn-ai-prompts-header:hover {
+  background: rgba(87, 148, 242, 0.1);
+  border-color: var(--link);
+}
+
 /* ——— Main content: 2×2 grid, fills viewport, scroll inside cells ——— */
 .dashboard-main {
   flex: 1;
@@ -196,7 +263,7 @@ body.dashboard-page {
   .dashboard-main { padding: 0.5rem 0.75rem; }
 }
 
-/* ——— Footer: AI prompts button (Grafana-style, fits dashboard) ——— */
+/* ——— Footer (hidden when empty; button moved to header) ——— */
 .dashboard-footer {
   flex-shrink: 0;
   padding: 0.6rem 0 0;
@@ -205,6 +272,12 @@ body.dashboard-page {
   display: flex;
   align-items: center;
 }
+.dashboard-footer:empty {
+  display: none;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
 
 .btn-ai-prompts {
   font: inherit;
@@ -445,19 +518,32 @@ body.dashboard-page {
   .priority-inline { grid-template-columns: 1fr; }
 }
 
-/* ——— Heatmap panel (bottom-left) ——— */
+/* ——— Heatmap panel ——— */
 .panel-heatmap .panel-header-heatmap {
   display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  border-left: 2px solid var(--tier-3);
+}
+
+.panel-heatmap .panel-title { margin-right: 0.5rem; }
+
+.panel-heatmap-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.75rem 1.25rem;
 }
 
-.panel-heatmap .panel-header-heatmap {
-  border-left: 2px solid var(--tier-3);
+.panel-heatmap-row .panel-desc {
+  margin: 0;
+  flex: 0 1 auto;
+}
+
+.panel-heatmap-row .legend-inline {
+  margin: 0;
+  margin-left: auto;
 }
-.panel-heatmap .panel-title { margin-right: 0.5rem; }
-.panel-heatmap .panel-desc { margin: 0.15rem 0 0; flex-basis: 100%; }
 
 .panel-list .panel-header {
   border-left: 2px solid var(--link);
@@ -465,7 +551,6 @@ body.dashboard-page {
 
 .legend-inline {
   margin: 0;
-  margin-left: auto;
 }
 
 .panel-body-heatmap {

package/dist/reports/html.js

@@ -92,11 +92,15 @@ function buildHtml(run, title, darkMode, css, script) {
       <span class="dashboard-meta">${escapeHtml(run.repoPath)}</span>
     </div>
     <div class="dashboard-header-right">
-      <div class="dashboard-score tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} of 5">
-        <span class="dashboard-score-value">${cleanliness.tier}</span>
-        <span class="dashboard-score-of">/ 5</span>
-        <span class="dashboard-score-label">${escapeHtml(cleanliness.label)}</span>
+      <div class="dashboard-score-block tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} of 5">
+        <div class="dashboard-score-main">
+          <span class="dashboard-score-value">${cleanliness.tier}</span>
+          <span class="dashboard-score-of">of 5</span>
+          <span class="dashboard-score-label">${escapeHtml(cleanliness.label)}</span>
+        </div>
+        <p class="dashboard-score-desc">${escapeHtml(cleanliness.description)}</p>
       </div>
+      <button type="button" class="btn-ai-prompts btn-ai-prompts-header" id="btnAiPrompts">AI cleanup prompts</button>
       <span class="dashboard-date">${run.completedAt ?? run.startedAt}</span>
     </div>
   </header>
@@ -124,13 +128,15 @@ function buildHtml(run, title, darkMode, css, script) {
         <div class="panel panel-heatmap">
           <div class="panel-header panel-header-heatmap">
             <h2 class="panel-title">Files by debt</h2>
-            <p class="panel-desc">Size = complexity + churn. Color = severity. Click for details.</p>
-            <div class="legend legend-inline">
-              <span><span class="swatch swatch-crit"></span> Critical</span>
-              <span><span class="swatch swatch-high"></span> High</span>
-              <span><span class="swatch swatch-med"></span> Medium</span>
-              <span><span class="swatch swatch-low"></span> Low</span>
-              <span><span class="swatch swatch-none"></span> None</span>
+            <div class="panel-heatmap-row">
+              <p class="panel-desc">Size = complexity + churn. Color = severity. Click for details.</p>
+              <div class="legend legend-inline">
+                <span><span class="swatch swatch-crit"></span> Critical</span>
+                <span><span class="swatch swatch-high"></span> High</span>
+                <span><span class="swatch swatch-med"></span> Medium</span>
+                <span><span class="swatch swatch-low"></span> Low</span>
+                <span><span class="swatch swatch-none"></span> None</span>
+              </div>
             </div>
           </div>
           <div class="panel-body panel-body-heatmap">
@@ -179,9 +185,7 @@ function buildHtml(run, title, darkMode, css, script) {
       </div>
     </div>
 
-    <div class="dashboard-footer">
-      <button type="button" class="btn-ai-prompts" id="btnAiPrompts">AI cleanup prompts</button>
-    </div>
+    <div class="dashboard-footer"></div>
   </main>
 
   <div id="aiPromptsOverlay" class="overlay" aria-hidden="true">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tech-debt-visualizer",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Language-agnostic CLI that analyzes repos and generates interactive technical debt visualizations with AI-powered insights",
   "type": "module",
   "main": "dist/index.js",