@vibedrift/cli 0.5.5 → 0.5.7

package/dist/index.js

@@ -7414,8 +7414,12 @@ function buildCoherenceMatrix(files) {
   }
   const colCount = categories.length + 3;
   const alignedRows = aligned.slice(0, 3).map((f) => fileRow(f)).join("");
-  const collapsedAligned = aligned.length > 3 ? `<tr><td colspan="${colCount}" style="padding:6px 12px;font-size:12px;color:var(--text-tertiary);cursor:pointer" data-collapse="aligned-rest">&middot;&middot;&middot; ${aligned.length - 3} more at 100% &middot;&middot;&middot;</td></tr>
-       <tbody id="aligned-rest" style="display:none">${aligned.slice(3).map((f) => fileRow(f)).join("")}</tbody>` : "";
+  const collapsedAligned = aligned.length > 3 ? `<tr><td colspan="${colCount}" style="padding:0"><details style="margin:0">
+         <summary style="cursor:pointer;padding:8px 16px;font-size:12px;color:var(--text-tertiary);list-style:none;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.02)">
+           <span class="chevron">&#9654;</span> ${aligned.length - 3} more files at 100% alignment
+         </summary>
+         <table style="width:100%;border-collapse:collapse">${aligned.slice(3).map((f) => fileRow(f)).join("")}</table>
+       </details></td></tr>` : "";
   const singleIssueDrifting = /* @__PURE__ */ new Map();
   const multiIssueDrifting = [];
   for (const f of drifting) {
@@ -7432,9 +7436,12 @@ function buildCoherenceMatrix(files) {
   for (const [devKey, files2] of singleIssueDrifting) {
     if (files2.length >= 4) {
       driftingRows += fileRow(files2[0]);
-      const collapseId = `single-dev-${devKey.replace(/[^a-zA-Z0-9]/g, "-")}`;
-      driftingRows += `<tr><td colspan="${colCount}" style="padding:4px 12px;font-size:12px;color:var(--text-tertiary);cursor:pointer" data-collapse="${collapseId}">&middot;&middot;&middot; ${files2.length - 1} more files with same issue (${esc(devKey)}) &middot;&middot;&middot;</td></tr>`;
-      driftingRows += `<tbody id="${collapseId}" style="display:none">${files2.slice(1).map((f) => fileRow(f)).join("")}</tbody>`;
+      driftingRows += `<tr><td colspan="${colCount}" style="padding:0"><details style="margin:0">
+        <summary style="cursor:pointer;padding:8px 16px;font-size:12px;color:var(--text-tertiary);list-style:none;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.02)">
+          <span class="chevron">&#9654;</span> ${files2.length - 1} more files with same issue <span style="color:var(--drift-orange)">(${esc(devKey)})</span>
+        </summary>
+        <table style="width:100%;border-collapse:collapse">${files2.slice(1).map((f) => fileRow(f)).join("")}</table>
+      </details></td></tr>`;
     } else {
       driftingRows += files2.map((f) => fileRow(f)).join("");
     }
@@ -7675,25 +7682,37 @@ function buildDeviatingBlocks(d) {
     if (!devByPattern.has(key)) devByPattern.set(key, []);
     devByPattern.get(key).push(df);
   }
+  const expectedNote = `<span style="font-size:11px;color:var(--text-tertiary);font-weight:400">expected: ${esc(d.dominantPattern)}</span>`;
   if (isConvention && d.deviatingFiles.length > 4) {
     return [...devByPattern.entries()].map(([pattern, files]) => {
-      const fileList = files.map((df) => esc(df.path)).join("</div><div style='padding:1px 0'>");
-      const collapseId = `conv-${pattern.replace(/[^a-zA-Z0-9]/g, "-")}-${Math.random().toString(36).slice(2, 6)}`;
-      return `<div style="background:var(--tint-orange);border-left:3px solid var(--drift-orange);border-radius:0;padding:12px 16px;margin:8px 0">
-        <div class="label" style="color:var(--drift-orange);margin-bottom:4px">DRIFT &mdash; ${esc(pattern)} &mdash; ${files.length} files</div>
-        <div style="cursor:pointer;font-size:12px;color:var(--text-secondary);margin-top:6px" data-collapse="${collapseId}">&#9654; Show ${files.length} files</div>
-        <div id="${collapseId}" style="display:none;padding:6px 0" class="mono" style="font-size:12px;color:var(--text-secondary)"><div style="padding:1px 0">${fileList}</div></div>
+      const fileList = files.map((df) => `<div style="padding:2px 0;font-size:12px;color:var(--text-secondary)" class="mono">${esc(df.path)}</div>`).join("");
+      return `<div style="background:var(--tint-orange);border-left:3px solid var(--drift-orange);border-radius:0;margin:8px 0">
+        <details>
+          <summary style="cursor:pointer;padding:12px 16px;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap">
+            <span class="chevron">&#9654;</span>
+            <span class="label" style="color:var(--drift-orange);margin:0">DRIFT &mdash; ${esc(pattern)}</span>
+            ${expectedNote}
+            <span style="font-size:12px;color:var(--text-tertiary);margin-left:auto">${files.length} files</span>
+          </summary>
+          <div style="padding:4px 16px 12px">${fileList}</div>
+        </details>
       </div>`;
     }).join("");
   }
-  return d.deviatingFiles.slice(0, 4).map((df) => {
+  return d.deviatingFiles.slice(0, 6).map((df) => {
     const evidence = df.evidence.slice(0, 3).map(
       (e) => `<div style="background:var(--bg-code);padding:6px 12px;border-radius:0;margin:4px 0;overflow-x:auto" class="mono"><span style="color:var(--text-tertiary);margin-right:12px;user-select:none">${e.line}</span>${esc(e.code.slice(0, 120))}</div>`
     ).join("");
-    return `<div style="background:var(--tint-orange);border-left:3px solid var(--drift-orange);border-radius:0;padding:12px 16px;margin:8px 0">
-      <div class="label" style="color:var(--drift-orange);margin-bottom:4px">DRIFT &mdash; ${esc(df.detectedPattern)}</div>
-      <div class="mono" style="font-size:12px;color:var(--text-secondary);margin-bottom:6px">${esc(df.path)}</div>
-      ${evidence}
+    return `<div style="background:var(--tint-orange);border-left:3px solid var(--drift-orange);border-radius:0;margin:8px 0">
+      <details>
+        <summary style="cursor:pointer;padding:10px 16px;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap">
+          <span class="chevron">&#9654;</span>
+          <span class="label" style="color:var(--drift-orange);margin:0">DRIFT &mdash; ${esc(df.detectedPattern)}</span>
+          <span class="mono" style="font-size:12px;color:var(--text-secondary);margin-left:8px">${esc(df.path)}</span>
+          <span style="font-size:11px;color:var(--text-tertiary);margin-left:auto">expected: <span style="color:var(--intent-green)">${esc(d.dominantPattern)}</span></span>
+        </summary>
+        <div style="padding:4px 16px 12px">${evidence}</div>
+      </details>
     </div>`;
   }).join("");
 }
@@ -7728,13 +7747,16 @@ function buildDistributionBar(d) {
   </div>`;
 }
 function buildDriftFindings(result) {
-  const driftCats = ["architectural_consistency", "security_posture", "semantic_duplication", "naming_conventions", "phantom_scaffolding"];
+  const driftCats = ["architectural_consistency", "security_posture", "semantic_duplication", "naming_conventions", "phantom_scaffolding", "import_style", "export_style", "async_patterns"];
   const catLabels = {
     architectural_consistency: "Architectural contradictions",
     security_posture: "Security posture gaps",
     semantic_duplication: "Semantic duplication",
     naming_conventions: "Convention drift",
-    phantom_scaffolding: "Phantom scaffolding"
+    phantom_scaffolding: "Phantom scaffolding",
+    import_style: "Import style drift",
+    export_style: "Export style drift",
+    async_patterns: "Async pattern drift"
   };
   const groups = driftCats.map((cat) => ({
     cat,
@@ -7761,18 +7783,21 @@ function buildDriftFindings(result) {
       const rec = recText ? `<div style="margin-top:12px;padding:10px 16px;background:var(--tint-cyan);border-left:3px solid var(--border);border-radius:0;font-size:14px;line-height:1.6;color:var(--text-primary)">
         <span style="color:var(--text-secondary);font-weight:700;margin-right:4px">&rarr;</span> ${esc(recText)}
       </div>` : "";
-      return `<div style="background:var(--bg-surface);border-radius:0;padding:20px 24px;margin-bottom:10px;border:1px solid var(--border)">
-        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap">
+      return `<details style="background:var(--bg-surface);border-radius:0;margin-bottom:10px;border:1px solid var(--border)">
+        <summary style="cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none">
+          <span class="chevron">&#9654;</span>
           <span class="sev-badge" style="background:${sevColor(d.severity)}">${sevLabel(d.severity)}</span>
-          <span style="font-size:15px;font-weight:500;color:var(--text-primary);flex:1">${esc(d.finding)}</span>
+          <span style="font-size:14px;font-weight:500;color:var(--text-primary);flex:1">${esc(d.finding)}</span>
           <span class="mono" style="font-size:12px;color:var(--text-tertiary)">${d.dominantCount}/${d.totalRelevantFiles}</span>
+        </summary>
+        <div style="padding:4px 20px 20px">
+          ${domBlock}
+          ${devBlocks}
+          ${distBar}
+          ${rec}
+          ${closeSplitQualifier}
         </div>
-        ${domBlock}
-        ${devBlocks}
-        ${distBar}
-        ${rec}
-        ${closeSplitQualifier}
-      </div>`;
+      </details>`;
     }).join("");
     return `<details ${gi === 0 ? "open" : ""} style="margin-bottom:8px">
       <summary style="cursor:pointer;padding:12px 18px;background:var(--bg-surface);border-radius:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-primary);list-style:none;border:1px solid var(--border)">