@vibedrift/cli 0.4.2 → 0.4.3

package/dist/index.js

@@ -6802,7 +6802,7 @@ function buildAiSummaryWidget(result) {
   return `<section class="section" style="margin-bottom:32px">
   <div style="background:rgba(255,208,0,0.03);border:1px solid var(--border);border-radius:0;padding:24px 28px;position:relative;overflow:hidden">
     <div style="position:absolute;top:0;left:0;width:3px;height:100%;background:var(--border)"></div>
-    <div style="display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap">
+    <div class="score-layout" style="display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap">
       <div style="flex:1;min-width:280px">
         <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
           <span style="font-size:16px">&#129302;</span>
@@ -6844,7 +6844,7 @@ function buildScoreSection(result) {
   }).join("");
   return `<section class="section">
   <div class="label">SCORE OVERVIEW</div>
-  <div style="display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap">
+  <div class="score-layout" style="display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap">
     <div style="text-align:center;min-width:120px">
       <div class="mono" style="font-size:72px;font-weight:800;color:${color};line-height:1">${compositeScore}</div>
       <div class="mono" style="font-size:16px;color:var(--text-tertiary)">/ ${maxCompositeScore}</div>
@@ -6858,7 +6858,7 @@ function buildRadarSection(result) {
   const cats = getDriftCats(result);
   const n = cats.length;
   if (n === 0) return "";
-  const cx = 180, cy = 180, r = 140, step = 2 * Math.PI / n;
+  const cx = 260, cy = 200, r = 130, step = 2 * Math.PI / n;
   let grid = "", dots = "", labels = "";
   const pts = [];
   for (const ring of [0.25, 0.5, 0.75, 1]) {
@@ -6875,14 +6875,14 @@ function buildRadarSection(result) {
     const px = cx + r * ratio * Math.cos(a), py = cy + r * ratio * Math.sin(a);
     pts.push(`${px},${py}`);
     dots += `<circle cx="${px}" cy="${py}" r="5" fill="var(--text-secondary)" stroke="var(--bg-page)" stroke-width="2"/>`;
-    const labelDist = r + 30;
+    const labelDist = r + 35;
     const lx = cx + labelDist * Math.cos(a), ly = cy + labelDist * Math.sin(a);
     const anchor = Math.abs(Math.cos(a)) < 0.3 ? "middle" : Math.cos(a) > 0 ? "start" : "end";
     const { color: catColor } = gradeFor(cats[i].score, cats[i].max);
     labels += `<text x="${lx}" y="${ly - 7}" fill="${catColor}" font-size="12" font-weight="600" font-family="-apple-system,sans-serif" text-anchor="${anchor}" dominant-baseline="middle">${esc(cats[i].shortName)}</text>`;
     labels += `<text x="${lx}" y="${ly + 8}" fill="#5A6A7E" font-size="11" font-weight="500" font-family="'SF Mono',Consolas,monospace" text-anchor="${anchor}" dominant-baseline="middle">${cats[i].score}/${cats[i].max} ${cats[i].findings > 0 ? "(" + cats[i].findings + " issues)" : ""}</text>`;
   }
-  const radar = `<svg viewBox="0 0 360 360" style="width:100%;max-width:420px;height:auto;margin:0 auto;display:block">${grid}<polygon points="${pts.join(" ")}" fill="rgba(255,208,0,0.04)" stroke="rgba(255,208,0,0.3)" stroke-width="1.5"/>${dots}${labels}</svg>`;
+  const radar = `<svg viewBox="0 0 520 440" style="width:100%;max-width:560px;height:auto;margin:0 auto;display:block">${grid}<polygon points="${pts.join(" ")}" fill="rgba(255,208,0,0.04)" stroke="rgba(255,208,0,0.3)" stroke-width="1.5"/>${dots}${labels}</svg>`;
   const weakest = [...cats].sort((a, b) => {
     const pctA = a.max > 0 ? a.score / a.max : 1;
     const pctB = b.max > 0 ? b.score / b.max : 1;
@@ -7475,9 +7475,73 @@ th[data-sort]:hover { color: var(--text-primary); }
 ::-webkit-scrollbar-thumb { background: #3A3A3D; }
 ::-webkit-scrollbar-thumb:hover { background: #555; }
 @media (max-width: 768px) {
-  .page { padding: 20px 14px; }
-  .score-layout { flex-direction: column !important; }
+  .page { padding: 16px 10px; }
+  .section { margin-bottom: 28px; }
+  .label { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 10px; }
+
+  /* Score hero: stack vertically */
+  .score-layout { flex-direction: column !important; gap: 16px !important; }
+  .score-layout > div { min-width: 0 !important; width: 100% !important; }
+
+  /* Category bars: stack, remove min-widths */
+  .score-layout [style*="min-width:300px"],
+  .score-layout [style*="min-width:280px"],
+  .score-layout [style*="min-width:200px"],
+  .score-layout [style*="min-width:120px"] {
+    min-width: 0 !important; width: 100% !important;
+  }
+
+  /* Radar chart: constrain to viewport */
+  svg[viewBox] { max-width: 100% !important; }
+
+  /* Strongest/Weakest cards: 2-col, tighter */
+  .section > div[style*="display:flex"][style*="gap:12px"] {
+    gap: 8px !important;
+  }
+  .section > div[style*="display:flex"] > div[style*="min-width:160px"] {
+    min-width: 0 !important; flex: 1 !important;
+  }
+
+  /* Findings list: tighter padding */
+  details > div { padding: 8px 10px !important; }
+  details summary { padding: 10px 12px !important; font-size: 13px !important; }
+
+  /* File ranking table: horizontal scroll */
+  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
+  table th, table td { padding: 5px 8px !important; font-size: 11px !important; }
+
+  /* Code snippets: wrap text */
+  pre, code { white-space: pre-wrap !important; word-break: break-word !important; font-size: 12px !important; }
+
+  /* Drift coherence bars: full width */
+  .section div[style*="display:flex"][style*="gap:40px"] {
+    flex-direction: column !important; gap: 16px !important;
+  }
+
+  /* Summary + AI section: stack */
+  .section div[style*="display:flex"][style*="gap:20px"] {
+    flex-direction: column !important; gap: 12px !important;
+  }
+
+  /* Sticky header: tighter padding */
+  .sticky-header { padding: 0 12px; font-size: 12px; }
   .sticky-project { display: none !important; }
+
+  /* Export buttons: smaller */
+  .export-btn { padding: 5px 10px; font-size: 11px; }
+
+  /* Code DNA / ML sections: reduce gap */
+  .section div[style*="gap:10px"] { gap: 6px !important; }
+
+  /* Hide long file paths, truncate */
+  td[data-scroll-to] { max-width: 140px !important; }
+}
+@media (max-width: 480px) {
+  .page { padding: 12px 8px; }
+  body { font-size: 13px; }
+  .label { font-size: 9px; }
+  .sticky-header { height: 38px; }
+  table th, table td { padding: 4px 6px !important; font-size: 10px !important; }
 }
 @media print {
   body { background: #fff; color: #111; font-size: 11px; line-height: 1.4; }