@vibecodeqa/cli 0.25.0 → 0.26.0

package/dist/report/pages.js

@@ -1,7 +1,7 @@
 /** Page renderers for the HTML report. */
 import { getCheckMeta } from "../check-meta.js";
 import { loadHistory } from "../history.js";
-import { generateArchSVG, generateDSM, generatePackageDiagram, generateSequenceDiagram } from "../runners/architecture.js";
+import { generateArchSVG, generateDSM, generateLayerDiagram, generatePackageDiagram, generateSequenceDiagram } from "../runners/architecture.js";
 import { det, e, gc, pc } from "./components.js";
 import { buildPyramid, buildRadar, buildRing, buildTimeline } from "./svg.js";
 // ── Overview ──────────────────────────────────────────────────────────
@@ -261,6 +261,7 @@ function renderArchSection(details) {
     if (containerSvg) {
         html += `<h3 style="margin-top:1.5rem">Container Diagram</h3><div class="arch-svg">${containerSvg}</div>`;
     }
+    html += `<h3 style="margin-top:1.5rem">Layer Diagram</h3><div class="arch-svg">${generateLayerDiagram(details)}</div>`;
     html += `<h3 style="margin-top:1.5rem">Dependency Graph</h3><div class="arch-svg">${generateArchSVG(details)}</div>`;
     html += `<h3 style="margin-top:1.5rem">Sequence Diagram</h3><div class="arch-svg">${generateSequenceDiagram(details)}</div>`;
     html += `<h3 style="margin-top:1.5rem">Package Diagram</h3><div class="arch-svg">${generatePackageDiagram(details)}</div>`;

package/dist/runners/architecture.d.ts

@@ -28,5 +28,6 @@ export declare function generateArchSVG(details: Record<string, unknown>): strin
 export declare function generateDSM(details: Record<string, unknown>): string;
 export declare function generatePackageDiagram(details: Record<string, unknown>): string;
 export declare function generateSequenceDiagram(details: Record<string, unknown>): string;
+export declare function generateLayerDiagram(details: Record<string, unknown>): string;
 export declare function generateContainerDiagram(cwd: string): string;
 export {};

package/dist/runners/architecture.js

@@ -640,80 +640,215 @@ export function generatePackageDiagram(details) {
     return `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:${W}px">${svg}</svg>`;
 }
 // ── Sequence Diagram ─────────────────────────────────────────────────
-// Traces the longest import chains from entry points, showing how a request
-// flows through the system. UML-style lifelines with arrows.
+// Shows the RUNTIME FLOW of the application — what calls what in order.
+// Detected by analyzing the entry point's exported function calls and
+// which modules they invoke. NOT just import chains.
+//
+// Participants = architectural roles (Entry, Detect, Runners, Score, Report, Output)
+// Messages = actual operations that happen at runtime
 export function generateSequenceDiagram(details) {
     const graph = details.graph;
     if (!graph || Object.keys(graph).length < 3)
         return "";
-    // Find entry points (files with 0 importers that aren't utility files)
+    // Find the entry point
     const entries = Object.entries(graph);
-    const entryPoints = entries
-        .filter(([path, info]) => {
+    const entryPoint = entries.find(([path, info]) => {
         const name = basename(path, extname(path));
         return info.importedBy.length === 0 && ["index", "main", "cli", "App", "app", "server"].includes(name);
-    })
-        .map(([p]) => p);
-    if (entryPoints.length === 0)
+    });
+    if (!entryPoint)
         return "";
-    // BFS from first entry point to find the longest chain (max 8 deep)
-    const entry = entryPoints[0];
-    const chain = findLongestChain(entry, graph, 8);
-    if (chain.length < 3)
+    // Determine architectural roles from directory structure
+    const roles = [];
+    const dirs = new Map();
+    for (const [, info] of entries) {
+        const dir = info.dir || ".";
+        dirs.set(dir, (dirs.get(dir) || 0) + 1);
+    }
+    // Build role list from actual structure
+    const entryName = basename(entryPoint[0], extname(entryPoint[0]));
+    roles.push({ name: entryName, dir: "entry", modules: 1 });
+    // Add directories as participants (sorted by dependency order)
+    const dirArr = [...dirs.entries()]
+        .filter(([d]) => d !== (entryPoint[1].dir || "."))
+        .sort((a, b) => {
+        // Sort by average fan-in (more depended-upon = earlier in flow)
+        const aFanIn = entries.filter(([, i]) => i.dir === a[0]).reduce((s, [, i]) => s + i.importedBy.length, 0) / a[1];
+        const bFanIn = entries.filter(([, i]) => i.dir === b[0]).reduce((s, [, i]) => s + i.importedBy.length, 0) / b[1];
+        return bFanIn - aFanIn; // most depended-on first
+    });
+    for (const [dir, count] of dirArr) {
+        const label = dir.replace("src/", "").replace("lib/", "") || "core";
+        roles.push({ name: label, dir, modules: count });
+    }
+    if (roles.length < 3)
+        return "";
+    const maxRoles = Math.min(roles.length, 6);
+    const displayRoles = roles.slice(0, maxRoles);
+    // Build messages: entry calls each role in order
+    // Detect what the entry imports from each directory
+    const messages = [];
+    const entryImports = entryPoint[1].imports;
+    for (let i = 1; i < displayRoles.length; i++) {
+        const role = displayRoles[i];
+        const importsFromRole = entryImports.filter((imp) => {
+            const impInfo = graph[imp];
+            return impInfo && (impInfo.dir || ".") === role.dir;
+        });
+        if (importsFromRole.length > 0) {
+            const funcNames = importsFromRole.map((p) => basename(p, extname(p))).slice(0, 2).join(", ");
+            messages.push({ from: 0, to: i, label: funcNames });
+        }
+    }
+    // Also show inter-role calls (report imports from runners, etc.)
+    for (let i = 1; i < displayRoles.length; i++) {
+        for (let j = 1; j < displayRoles.length; j++) {
+            if (i === j)
+                continue;
+            const fromDir = displayRoles[i].dir;
+            const toDir = displayRoles[j].dir;
+            const crossImports = entries.filter(([, info]) => (info.dir || ".") === fromDir && info.imports.some((imp) => graph[imp] && (graph[imp].dir || ".") === toDir));
+            if (crossImports.length > 0 && messages.length < 10) {
+                messages.push({ from: i, to: j, label: `${crossImports.length} calls` });
+            }
+        }
+    }
+    if (messages.length < 2)
         return "";
-    // Draw sequence diagram
-    const participants = chain.map((p) => basename(p, extname(p)));
-    const lifelineSpacing = 120;
-    const W = participants.length * lifelineSpacing + 40;
-    const messageH = 36;
-    const headerH = 50;
-    const H = headerH + (chain.length - 1) * messageH + 40;
+    // Draw UML sequence diagram
+    const lifelineSpacing = 130;
+    const W = displayRoles.length * lifelineSpacing + 40;
+    const messageH = 40;
+    const headerH = 55;
+    const H = headerH + messages.length * messageH + 30;
     let svg = "";
-    // Participant boxes (lifeline headers)
-    for (let i = 0; i < participants.length; i++) {
+    // Participant boxes
+    for (let i = 0; i < displayRoles.length; i++) {
         const x = 20 + i * lifelineSpacing + lifelineSpacing / 2;
-        const name = participants[i];
-        const boxW = Math.max(60, name.length * 7 + 16);
-        svg += `<rect x="${x - boxW / 2}" y="8" width="${boxW}" height="22" rx="4" fill="#ffffff08" stroke="#ffffff15"/>`;
-        svg += `<text x="${x}" y="23" text-anchor="middle" fill="#9ca3af" font-size="9" font-weight="600">${name}</text>`;
-        // Lifeline (dashed vertical)
-        svg += `<line x1="${x}" y1="30" x2="${x}" y2="${H - 10}" stroke="#ffffff10" stroke-width="1" stroke-dasharray="4,3"/>`;
-    }
-    // Arrows between lifelines (imports = calls)
-    for (let i = 0; i < chain.length - 1; i++) {
-        const fromX = 20 + i * lifelineSpacing + lifelineSpacing / 2;
-        const toX = 20 + (i + 1) * lifelineSpacing + lifelineSpacing / 2;
+        const role = displayRoles[i];
+        const label = role.name;
+        const subtitle = role.modules > 1 ? `(${role.modules})` : "";
+        const boxW = Math.max(70, label.length * 7 + 20);
+        svg += `<rect x="${x - boxW / 2}" y="6" width="${boxW}" height="${subtitle ? 30 : 22}" rx="4" fill="#ffffff08" stroke="#ffffff15"/>`;
+        svg += `<text x="${x}" y="20" text-anchor="middle" fill="#e5e5e5" font-size="9" font-weight="700">${label}</text>`;
+        if (subtitle)
+            svg += `<text x="${x}" y="31" text-anchor="middle" fill="#4b5563" font-size="7">${subtitle}</text>`;
+        svg += `<line x1="${x}" y1="${subtitle ? 36 : 28}" x2="${x}" y2="${H - 10}" stroke="#ffffff10" stroke-width="1" stroke-dasharray="4,3"/>`;
+    }
+    // Messages
+    for (let i = 0; i < messages.length; i++) {
+        const msg = messages[i];
+        const fromX = 20 + msg.from * lifelineSpacing + lifelineSpacing / 2;
+        const toX = 20 + msg.to * lifelineSpacing + lifelineSpacing / 2;
         const y = headerH + i * messageH;
-        // Arrow with target module name as label
-        svg += `<line x1="${fromX}" y1="${y}" x2="${toX - 6}" y2="${y}" stroke="#6d78d0" stroke-width="1.5" marker-end="url(#seq-arrow)"/>`;
-        const target = participants[i + 1];
-        svg += `<text x="${(fromX + toX) / 2}" y="${y - 6}" text-anchor="middle" fill="#6b7280" font-size="7">import ./${target}</text>`;
+        const isReturn = msg.to < msg.from;
+        const color = isReturn ? "#4b5563" : "#6d78d0";
+        const dash = isReturn ? ' stroke-dasharray="4,2"' : "";
+        svg += `<line x1="${fromX}" y1="${y}" x2="${toX + (toX > fromX ? -6 : 6)}" y2="${y}" stroke="${color}" stroke-width="1.5" marker-end="url(#seq-arrow)"${dash}/>`;
+        svg += `<text x="${(fromX + toX) / 2}" y="${y - 6}" text-anchor="middle" fill="#6b7280" font-size="7">${msg.label}</text>`;
     }
-    // Arrow marker
     const defs = `<defs><marker id="seq-arrow" viewBox="0 0 10 7" refX="10" refY="3.5" markerWidth="7" markerHeight="5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#6d78d0"/></marker></defs>`;
     return `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:${W}px">${defs}${svg}</svg>`;
 }
-function findLongestChain(start, graph, maxDepth) {
-    let longest = [start];
-    const visited = new Set([start]);
-    function dfs(node, path) {
-        if (path.length > longest.length)
-            longest = [...path];
-        if (path.length >= maxDepth)
-            return;
-        const info = graph[node];
-        if (!info)
-            return;
+// ── Layer Diagram ────────────────────────────────────────────────────
+// Detects application layers (MVC, Clean Architecture, etc.) from module behavior.
+// Layers are determined by fan-in/fan-out patterns + naming conventions.
+export function generateLayerDiagram(details) {
+    const graph = details.graph;
+    if (!graph || Object.keys(graph).length < 5)
+        return "";
+    const entries = Object.entries(graph);
+    const layerDefs = [
+        { id: "entry", label: "Entry / Controller", color: "#6d78d0" },
+        { id: "view", label: "View / Output", color: "#06b6d4" },
+        { id: "service", label: "Service / Logic", color: "#22c55e" },
+        { id: "data", label: "Data / IO", color: "#d97706" },
+        { id: "model", label: "Model / Types", color: "#8b5cf6" },
+    ];
+    const moduleLayer = new Map();
+    for (const [path, info] of entries) {
+        const name = basename(path, extname(path));
+        const fanIn = info.importedBy.length;
+        const fanOut = info.imports.length;
+        let layer = "service";
+        if (fanIn === 0 && fanOut > 5)
+            layer = "entry";
+        else if (fanIn > 10 && fanOut === 0)
+            layer = "model";
+        else if (fanIn > 5 && fanOut <= 1)
+            layer = "model";
+        else if (path.includes("report") || path.includes("html") || path.includes("svg") || path.includes("page") || path.includes("style") || path.includes("component"))
+            layer = "view";
+        else if (name === "types" || name === "check-meta" || path.includes("types"))
+            layer = "model";
+        else if (name === "exec" || name === "detect" || name.includes("fs-") || path.includes("history"))
+            layer = "data";
+        else if (path.includes("runner") || path.includes("check"))
+            layer = "service";
+        else if (fanOut > fanIn * 2)
+            layer = "entry";
+        moduleLayer.set(path, layer);
+    }
+    // Count modules per layer
+    const layerCounts = new Map();
+    for (const [path, layer] of moduleLayer) {
+        const arr = layerCounts.get(layer) || [];
+        arr.push(basename(path, extname(path)));
+        layerCounts.set(layer, arr);
+    }
+    // Count violations (imports going UP the stack)
+    const layerOrder = ["entry", "view", "service", "data", "model"];
+    let violations = 0;
+    let totalCrossLayer = 0;
+    for (const [path, info] of entries) {
+        const myLayer = moduleLayer.get(path);
+        const myIdx = layerOrder.indexOf(myLayer);
         for (const imp of info.imports) {
-            if (!visited.has(imp) && graph[imp]) {
-                visited.add(imp);
-                dfs(imp, [...path, imp]);
-                visited.delete(imp);
+            const impLayer = moduleLayer.get(imp);
+            if (impLayer && impLayer !== myLayer) {
+                totalCrossLayer++;
+                const impIdx = layerOrder.indexOf(impLayer);
+                if (impIdx < myIdx)
+                    violations++; // importing from layer ABOVE = violation
             }
         }
     }
-    dfs(start, [start]);
-    return longest;
+    // Draw
+    const W = 600;
+    const layerH = 50;
+    const gap = 6;
+    const padding = 20;
+    const activeLayers = layerDefs.filter((l) => (layerCounts.get(l.id)?.length || 0) > 0);
+    const H = padding * 2 + activeLayers.length * (layerH + gap) + 40;
+    let svg = "";
+    let y = padding;
+    // Title
+    svg += `<text x="${W / 2}" y="${y}" text-anchor="middle" fill="#9ca3af" font-size="10" font-weight="700">Application Layers</text>`;
+    y += 20;
+    for (const layer of activeLayers) {
+        const modules = layerCounts.get(layer.id) || [];
+        const moduleList = modules.slice(0, 8).join(", ") + (modules.length > 8 ? ` +${modules.length - 8}` : "");
+        // Layer band
+        svg += `<rect x="${padding}" y="${y}" width="${W - padding * 2}" height="${layerH}" rx="6" fill="${layer.color}10" stroke="${layer.color}40"/>`;
+        svg += `<text x="${padding + 12}" y="${y + 20}" fill="${layer.color}" font-size="10" font-weight="700">${layer.label}</text>`;
+        svg += `<text x="${padding + 12}" y="${y + 36}" fill="#6b7280" font-size="8">${moduleList}</text>`;
+        svg += `<text x="${W - padding - 12}" y="${y + 20}" text-anchor="end" fill="#4b5563" font-size="9">${modules.length}</text>`;
+        // Arrow down to next layer
+        if (activeLayers.indexOf(layer) < activeLayers.length - 1) {
+            const arrowY = y + layerH + gap / 2;
+            svg += `<line x1="${W / 2}" y1="${y + layerH}" x2="${W / 2}" y2="${arrowY + gap / 2}" stroke="#ffffff15" stroke-width="1" marker-end="url(#layer-arrow)"/>`;
+        }
+        y += layerH + gap;
+    }
+    // Violation indicator
+    if (violations > 0) {
+        svg += `<text x="${W / 2}" y="${y + 10}" text-anchor="middle" fill="var(--warn)" font-size="8">${violations} layer violation${violations > 1 ? "s" : ""} (imports going UP the stack)</text>`;
+    }
+    else {
+        svg += `<text x="${W / 2}" y="${y + 10}" text-anchor="middle" fill="var(--pass)" font-size="8">Clean layering — all dependencies flow downward</text>`;
+    }
+    const defs = `<defs><marker id="layer-arrow" viewBox="0 0 10 7" refX="5" refY="3.5" markerWidth="6" markerHeight="4" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#ffffff30"/></marker></defs>`;
+    return `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:${W}px">${defs}${svg}</svg>`;
 }
 // ── Container Diagram ────────────────────────────────────────────────
 // Auto-detects high-level system containers from config files:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibecodeqa/cli",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Code health scanner for the AI coding era. 21 checks, zero config, full report.",
   "type": "module",
   "bin": {