tech-debt-visualizer 0.2.15 → 0.2.16

package/dist/reports/assets/report.css

@@ -74,17 +74,10 @@ body.dashboard-page::before {
     radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.08) 0%, transparent 40%),
     radial-gradient(circle at 80% 70%, rgba(77, 56, 235, 0.06) 0%, transparent 40%),
     radial-gradient(circle at 50% 50%, rgba(6, 255, 165, 0.04) 0%, transparent 50%);
-  animation: bgFloat 20s ease-in-out infinite;
   z-index: 0;
   pointer-events: none;
 }
 
-@keyframes bgFloat {
-  0%, 100% { transform: translate(0, 0) rotate(0deg); }
-  33% { transform: translate(30px, -30px) rotate(5deg); }
-  66% { transform: translate(-20px, 20px) rotate(-5deg); }
-}
-
 body.dashboard-page {
   padding-bottom: 0;
   height: 100vh;
@@ -188,9 +181,9 @@ body.dashboard-page {
 .dashboard-main {
   flex: 1;
   min-height: 0;
-  max-width: 1400px;
+  max-width: 100%;
   margin: 0 auto;
-  padding: 1.5rem 2.5rem;
+  padding: 0.5rem 0.75rem;
   width: 100%;
   overflow: hidden;
   display: flex;
@@ -205,7 +198,7 @@ body.dashboard-page {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto 1fr;
-  gap: 2rem;
+  gap: 0.5rem;
   align-items: stretch;
 }
 
@@ -237,24 +230,27 @@ body.dashboard-page {
 }
 
 @media (max-width: 900px) {
-  body.dashboard-page { height: auto; overflow: auto; }
+  body.dashboard-page { height: auto; overflow: auto; min-height: 100vh; }
+  .dashboard-main { padding: 0.5rem 0.75rem; min-height: 0; }
   .dashboard-grid-2x2 {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto auto;
     height: auto;
-    gap: 1.25rem;
+    gap: 0.5rem;
   }
-  .dashboard-cell-heatmap .panel-body-heatmap { min-height: 240px; }
-  .dashboard-cell-list .panel-body { min-height: 240px; }
-  .panel-score-pop .score-num { font-size: 3.5rem; }
-  .panel-score-pop .score-of { font-size: 1.5rem; }
+  .dashboard-cell-heatmap .panel-body-heatmap { min-height: 160px; }
+  .dashboard-cell-list .panel-body { min-height: 160px; }
+  .panel-score-pop .score-num { font-size: 2rem; }
+  .panel-score-pop .score-of { font-size: 0.9rem; }
 }
 
 @media (max-width: 560px) {
   .dashboard-header { padding: 0.5rem 0.75rem; }
-  .dashboard-main { padding: 0.75rem 1rem; }
-  .dashboard-grid-2x2 { gap: 1rem; }
-  #treemap { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
+  .dashboard-main { padding: 0.4rem 0.5rem; }
+  .dashboard-grid-2x2 { gap: 0.4rem; }
+  #treemap { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.3rem; }
+  .treemap-cell { padding: 0.25rem; }
+  .treemap-cell-name { font-size: 0.55rem; }
 }
 
 /* ——— Footer (hidden when empty; button moved to header) ——— */
@@ -442,7 +438,7 @@ body.dashboard-page {
   display: block;
 }
 
-/* ——— Panels: card look with hover and top accent ——— */
+/* ——— Panels: card look (no hover animation on main four) ——— */
 .panel {
   background: var(--bg-secondary);
   border: 1px solid var(--border-subtle);
@@ -450,35 +446,10 @@ body.dashboard-page {
   box-shadow: var(--shadow);
   overflow: hidden;
   position: relative;
-  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
-}
-
-.panel::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow));
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.6s ease;
-  z-index: 1;
-}
-
-.panel:hover {
-  transform: translateY(-5px);
-  border-color: rgba(255, 107, 53, 0.25);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 107, 53, 0.15);
-}
-
-.panel:hover::before {
-  transform: scaleX(1);
 }
 
 .panel-header {
-  padding: 1rem 1.25rem;
+  padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--border-subtle);
   background: rgba(0, 0, 0, 0.08);
   flex-shrink: 0;
@@ -487,9 +458,9 @@ body.dashboard-page {
 .panel-title {
   color: var(--text-muted);
   font-family: "Syne", sans-serif;
-  font-size: 0.95rem;
+  font-size: 0.8rem;
   font-weight: 700;
-  letter-spacing: 3px;
+  letter-spacing: 2px;
   text-transform: uppercase;
 }
 
@@ -509,7 +480,7 @@ body.dashboard-page {
 }
 
 .panel-body {
-  padding: 1.25rem 1.5rem;
+  padding: 0.65rem 0.85rem;
 }
 
 .panel-body-center {
@@ -528,14 +499,14 @@ body.dashboard-page {
 
 .panel-score .panel-body-score {
   text-align: center;
-  padding: 1rem 0.85rem;
+  padding: 0.5rem 0.65rem;
 }
 
 .score-numeric {
   display: flex;
   align-items: baseline;
   justify-content: center;
-  gap: 0.25rem;
+  gap: 0.4rem; /* space between number and "of 5" */
   margin-bottom: 0.5rem;
 }
 
@@ -596,35 +567,35 @@ body.dashboard-page {
 }
 
 .panel-score-pop .panel-body-score {
-  padding: 2rem 1.5rem;
+  padding: 0.6rem 0.75rem;
   position: relative;
 }
 
 .panel-score-pop .panel-header .panel-title {
-  font-size: 0.9rem;
-  letter-spacing: 4px;
+  font-size: 0.7rem;
+  letter-spacing: 2px;
   color: var(--text-muted);
   margin-bottom: 0;
 }
 
 .panel-score-pop .score-numeric {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 
 .panel-score-pop .score-num {
   font-family: "Syne", sans-serif;
-  font-size: 5rem;
+  font-size: 2.5rem;
   font-weight: 800;
   line-height: 1;
   background: linear-gradient(180deg, var(--accent-orange) 0%, var(--accent-red) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.4));
+  filter: drop-shadow(0 0 16px rgba(255, 107, 53, 0.3));
 }
 
 .panel-score-pop .score-of {
-  font-size: 2rem;
+  font-size: 1rem;
   font-weight: 700;
   color: var(--text-muted);
 }
@@ -632,32 +603,32 @@ body.dashboard-page {
 .panel-score-pop .score-label {
   display: inline-block;
   background: linear-gradient(135deg, var(--accent-orange), var(--accent-red));
-  padding: 0.5rem 1.25rem;
+  padding: 0.25rem 0.65rem;
   border-radius: 50px;
   font-family: "Syne", sans-serif;
-  font-size: 1rem;
+  font-size: 0.7rem;
   font-weight: 700;
-  letter-spacing: 1px;
+  letter-spacing: 0.5px;
   text-transform: uppercase;
-  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35);
-  margin-bottom: 0.5rem;
+  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
+  margin-bottom: 0.2rem;
   -webkit-text-fill-color: initial;
   color: #fff;
 }
 
 .panel-score-pop .score-desc {
-  font-size: 1rem;
+  font-size: 0.75rem;
   color: var(--text-muted);
   font-style: italic;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 
 .panel-score-pop .score-stats {
   display: flex;
   justify-content: center;
-  gap: 1.5rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   color: var(--text-dim);
 }
 
@@ -705,26 +676,26 @@ body.dashboard-page {
 .priority-inline {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-  margin-top: 1.25rem;
-  padding-top: 1.25rem;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
   border-top: 1px solid var(--border-subtle);
 }
 
 .priority-inline-col {
   background: rgba(255, 255, 255, 0.02);
-  border-radius: 16px;
-  padding: 1.25rem;
+  border-radius: 10px;
+  padding: 0.5rem 0.65rem;
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .priority-inline h4 {
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.25rem;
   font-family: "Syne", sans-serif;
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
   color: var(--accent-orange);
 }
 
@@ -735,11 +706,11 @@ body.dashboard-page {
 }
 
 .priority-inline .priority-list li {
-  padding: 0.5rem 0;
-  padding-left: 1.25rem;
+  padding: 0.2rem 0;
+  padding-left: 0.85rem;
   position: relative;
   color: var(--text-muted);
-  font-size: 0.9rem;
+  font-size: 0.7rem;
   border-bottom: none;
 }
 
@@ -790,8 +761,8 @@ body.dashboard-page {
 }
 
 .panel-body-heatmap {
-  padding: 1rem;
-  padding-top: 0.5rem;
+  padding: 0.4rem 0.65rem;
+  padding-top: 0.25rem;
 }
 
 .panel-body-heatmap #treemap {
@@ -815,13 +786,13 @@ body.dashboard-page {
   margin: 0;
 }
 
-/* ——— Treemap: file-item style (reference) ——— */
+/* ——— Treemap: file-item style (reference), keep hover animation ——— */
 #treemap {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 0.75rem;
-  min-height: 120px;
-  padding: 0.25rem 0;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 0.4rem;
+  min-height: 80px;
+  padding: 0.15rem 0;
 }
 
 .treemap-cell {
@@ -833,9 +804,9 @@ body.dashboard-page {
   justify-content: center;
   gap: 0;
   cursor: pointer;
-  padding: 0.75rem;
-  border: 2px solid transparent;
-  border-radius: 16px;
+  padding: 0.35rem;
+  border: 1px solid transparent;
+  border-radius: 10px;
   transition: transform 0.3s ease, border-color 0.3s ease;
 }
 
@@ -844,8 +815,8 @@ body.dashboard-page {
 }
 
 .treemap-cell-name {
-  font-size: 0.75rem;
-  line-height: 1.35;
+  font-size: 0.6rem;
+  line-height: 1.25;
   color: inherit;
   text-align: center;
   max-width: 100%;
@@ -911,38 +882,38 @@ body.dashboard-page {
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.4rem;
 }
 
 .debt-list li {
   border-bottom: none;
-  padding: 1.25rem;
+  padding: 0.5rem 0.65rem;
   cursor: pointer;
   transition: background 0.3s ease, border-left-width 0.3s ease;
   background: rgba(255, 255, 255, 0.02);
-  border-radius: 16px;
-  border-left: 4px solid var(--accent-orange);
+  border-radius: 10px;
+  border-left: 3px solid var(--accent-orange);
 }
 
 .debt-list li:last-child { border-bottom: none; }
 .debt-list li:hover {
   background: rgba(255, 255, 255, 0.04);
-  border-left-width: 6px;
+  border-left-width: 4px;
 }
 
 .debt-list .title {
   font-family: "Syne", sans-serif;
-  font-size: 1.05rem;
+  font-size: 0.8rem;
   font-weight: 700;
   color: var(--text);
-  margin-bottom: 0.35rem;
+  margin-bottom: 0.15rem;
 }
-.debt-list .meta { font-size: 0.8rem; color: var(--text-dim); display: block; margin-top: 0.25rem; font-family: "Space Mono", ui-monospace, monospace; }
+.debt-list .meta { font-size: 0.65rem; color: var(--text-dim); display: block; margin-top: 0.1rem; font-family: "Space Mono", ui-monospace, monospace; }
 .debt-list-explanation {
-  font-size: 0.9rem;
+  font-size: 0.7rem;
   color: var(--text-muted);
-  margin: 0.5rem 0 0;
-  line-height: 1.7;
+  margin: 0.25rem 0 0;
+  line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
@@ -1091,11 +1062,12 @@ body.dashboard-page {
 
 /* ——— LLM output / description ——— */
 .llm-output .llm-prose {
-  margin: 0 0 1rem;
-  line-height: 1.8;
+  margin: 0 0 0.5rem;
+  line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--text-muted);
+  font-size: 0.8rem;
 }
 
 .llm-output .llm-prose:last-child { margin-bottom: 0; }

package/package.json

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