codeui-python 0.1.0__py3-none-any.whl → 0.1.1__py3-none-any.whl

codeui/server/static/js/minimap.js

@@ -0,0 +1,383 @@
+class MiniMap {
+    constructor(mainCanvas) {
+        this.mainCanvas = mainCanvas;
+        this.container = document.getElementById("graph-minimap-container");
+        this.dockBtn = document.getElementById("minimap-dock-btn");
+        this.canvas = document.getElementById("minimap-canvas");
+        this.countEl = document.getElementById("minimap-count");
+        this.dockCountEl = document.getElementById("minimap-dock-count");
+        this.tooltip = document.getElementById("minimap-tooltip");
+        this.ctx = this.canvas ? this.canvas.getContext("2d") : null;
+        this.cssWidth = 220;
+        this.cssHeight = 140;
+        this.isCollapsed = false;
+        this.isDragging = false;
+        this.lastMouse = { x: 0, y: 0 };
+        this.mapping = {
+            scale: 1,
+            offsetX: 0,
+            offsetY: 0,
+            vfX: 0,
+            vfY: 0,
+            vfW: 0,
+            vfH: 0,
+            boundsMinX: 0,
+            boundsMaxX: 0,
+            boundsMinY: 0,
+            boundsMaxY: 0
+        };
+
+        if (this.canvas) {
+            this.setupHeaderToggle();
+            this.resizeCanvas();
+            this.restoreState();
+        }
+    }
+
+    setupHeaderToggle() {
+        const header = this.container ? this.container.querySelector(".minimap-header") : null;
+        if (header) {
+            header.style.cursor = "pointer";
+            header.addEventListener("click", (e) => {
+                e.stopPropagation();
+                this.isCollapsed = !this.isCollapsed;
+                const wrapper = this.container.querySelector(".minimap-canvas-wrapper");
+                if (wrapper) {
+                    wrapper.style.display = this.isCollapsed ? "none" : "block";
+                }
+                if (!this.isCollapsed) {
+                    this.update();
+                }
+            });
+        }
+    }
+
+    restoreState() {
+        this.isCollapsed = false;
+        if (this.container) this.container.style.display = "flex";
+        if (this.dockBtn) this.dockBtn.style.display = "none";
+    }
+
+    collapse() {
+        this.isCollapsed = false;
+        if (this.container) this.container.style.display = "flex";
+    }
+
+    expand() {
+        this.isCollapsed = false;
+        if (this.container) this.container.style.display = "flex";
+        if (this.dockBtn) this.dockBtn.style.display = "none";
+        this.resizeCanvas();
+        this.update();
+    }
+
+    resizeCanvas() {
+        if (!this.canvas) return;
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = this.cssWidth * dpr;
+        this.canvas.height = this.cssHeight * dpr;
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.scale(dpr, dpr);
+    }
+
+    getMinimapPos(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+    }
+
+    isInsideViewfinder(x, y) {
+        const { vfX, vfY, vfW, vfH } = this.mapping;
+        const hitPad = 4;
+        return (
+            x >= vfX - hitPad &&
+            x <= vfX + vfW + hitPad &&
+            y >= vfY - hitPad &&
+            y <= vfY + vfH + hitPad
+        );
+    }
+
+    setupEvents() {
+        if (!this.canvas) return;
+
+        const onDown = (clientX, clientY) => {
+            const rect = this.canvas.getBoundingClientRect();
+            const posX = clientX - rect.left;
+            const posY = clientY - rect.top;
+
+            if (this.isInsideViewfinder(posX, posY)) {
+                this.isDragging = true;
+                this.lastMouse = { x: clientX, y: clientY };
+                this.canvas.style.cursor = "grabbing";
+            } else {
+                const worldX = (posX - this.mapping.offsetX) / this.mapping.scale;
+                const worldY = (posY - this.mapping.offsetY) / this.mapping.scale;
+                this.mainCanvas.panTo(worldX, worldY, false);
+                this.isDragging = true;
+                this.lastMouse = { x: clientX, y: clientY };
+                this.canvas.style.cursor = "grabbing";
+            }
+        };
+
+        const onMove = (clientX, clientY) => {
+            if (this.isDragging) {
+                const dx = (clientX - this.lastMouse.x) / this.mapping.scale;
+                const dy = (clientY - this.lastMouse.y) / this.mapping.scale;
+                this.mainCanvas.transform.x -= dx * this.mainCanvas.transform.k;
+                this.mainCanvas.transform.y -= dy * this.mainCanvas.transform.k;
+                this.lastMouse = { x: clientX, y: clientY };
+                if (this.tooltip) this.tooltip.style.display = "none";
+                return;
+            }
+
+            const rect = this.canvas.getBoundingClientRect();
+            const posX = clientX - rect.left;
+            const posY = clientY - rect.top;
+
+            if (this.isInsideViewfinder(posX, posY)) {
+                this.canvas.style.cursor = "grab";
+            } else {
+                this.canvas.style.cursor = "crosshair";
+            }
+
+            if (this.tooltip) {
+                let hoveredNode = null;
+                const nodes = this.mainCanvas.nodes || [];
+                for (let i = nodes.length - 1; i >= 0; i--) {
+                    const n = nodes[i];
+                    const nx = n.x * this.mapping.scale + this.mapping.offsetX;
+                    const ny = n.y * this.mapping.scale + this.mapping.offsetY;
+                    const d2 = (nx - posX) * (nx - posX) + (ny - posY) * (ny - posY);
+                    if (d2 <= 49) {
+                        hoveredNode = n;
+                        break;
+                    }
+                }
+                if (hoveredNode) {
+                    this.tooltip.textContent = hoveredNode.label || hoveredNode.id;
+                    const tipX = Math.max(6, Math.min(posX + 8, this.cssWidth - 90));
+                    const tipY = Math.max(4, posY - 26);
+                    this.tooltip.style.left = `${tipX}px`;
+                    this.tooltip.style.top = `${tipY}px`;
+                    this.tooltip.style.display = "block";
+                } else {
+                    this.tooltip.style.display = "none";
+                }
+            }
+        };
+
+        const onUp = () => {
+            this.isDragging = false;
+            this.canvas.style.cursor = "crosshair";
+        };
+
+        this.canvas.addEventListener("mousedown", e => {
+            e.preventDefault();
+            onDown(e.clientX, e.clientY);
+        });
+
+        window.addEventListener("mousemove", e => {
+            if (this.isDragging) {
+                onMove(e.clientX, e.clientY);
+            }
+        });
+
+        this.canvas.addEventListener("mousemove", e => {
+            if (!this.isDragging) {
+                onMove(e.clientX, e.clientY);
+            }
+        });
+
+        window.addEventListener("mouseup", onUp);
+        this.canvas.addEventListener("mouseleave", () => {
+            if (!this.isDragging && this.tooltip) {
+                this.tooltip.style.display = "none";
+            }
+        });
+
+        this.canvas.addEventListener("wheel", e => {
+            e.preventDefault();
+            const factor = e.deltaY < 0 ? 1.15 : 0.85;
+            this.mainCanvas.zoomBy(factor);
+        }, { passive: false });
+
+        this.canvas.addEventListener("touchstart", e => {
+            if (e.touches.length === 1) {
+                e.preventDefault();
+                onDown(e.touches[0].clientX, e.touches[0].clientY);
+            }
+        }, { passive: false });
+
+        this.canvas.addEventListener("touchmove", e => {
+            if (e.touches.length === 1) {
+                e.preventDefault();
+                onMove(e.touches[0].clientX, e.touches[0].clientY);
+            }
+        }, { passive: false });
+
+        this.canvas.addEventListener("touchend", onUp);
+        this.canvas.addEventListener("touchcancel", onUp);
+    }
+
+    update() {
+        if (!this.mainCanvas || !this.mainCanvas.nodes) return;
+        const nodes = this.mainCanvas.nodes;
+        const modeLabel = appState.graphMode === "files" ? "files" : "symbols";
+        const countText = `${nodes.length} ${modeLabel}`;
+        if (this.countEl && this.countEl.textContent !== countText) {
+            this.countEl.textContent = countText;
+        }
+        if (this.dockCountEl && this.dockCountEl.textContent !== `(${countText})`) {
+            this.dockCountEl.textContent = `(${countText})`;
+        }
+        if (this.isCollapsed || !this.ctx || !this.canvas) return;
+
+        const mainContainer = document.getElementById("canvas-container");
+        const mainW = mainContainer ? mainContainer.clientWidth || 800 : 800;
+        const mainH = mainContainer ? mainContainer.clientHeight || 600 : 600;
+        const k = this.mainCanvas.transform ? this.mainCanvas.transform.k || 1 : 1;
+        const tx = this.mainCanvas.transform ? this.mainCanvas.transform.x || 0 : 0;
+        const ty = this.mainCanvas.transform ? this.mainCanvas.transform.y || 0 : 0;
+
+        const visMinX = -tx / k;
+        const visMinY = -ty / k;
+        const visMaxX = (mainW - tx) / k;
+        const visMaxY = (mainH - ty) / k;
+
+        let nMinX = Infinity, nMaxX = -Infinity, nMinY = Infinity, nMaxY = -Infinity;
+        for (let i = 0; i < nodes.length; i++) {
+            const n = nodes[i];
+            if (isFinite(n.x) && isFinite(n.y)) {
+                if (n.x < nMinX) nMinX = n.x;
+                if (n.x > nMaxX) nMaxX = n.x;
+                if (n.y < nMinY) nMinY = n.y;
+                if (n.y > nMaxY) nMaxY = n.y;
+            }
+        }
+        if (nMinX === Infinity || nodes.length === 0) {
+            nMinX = -200; nMaxX = 200; nMinY = -150; nMaxY = 150;
+        }
+
+        const pad = 40;
+        const boundsMinX = Math.min(nMinX - pad, isFinite(visMinX) ? visMinX : -200);
+        const boundsMaxX = Math.max(nMaxX + pad, isFinite(visMaxX) ? visMaxX : 200);
+        const boundsMinY = Math.min(nMinY - pad, isFinite(visMinY) ? visMinY : -150);
+        const boundsMaxY = Math.max(nMaxY + pad, isFinite(visMaxY) ? visMaxY : 150);
+
+        const spanX = Math.max(80, boundsMaxX - boundsMinX);
+        const spanY = Math.max(60, boundsMaxY - boundsMinY);
+
+        const scaleX = (this.cssWidth - 14) / spanX;
+        const scaleY = (this.cssHeight - 14) / spanY;
+        const scale = Math.max(0.001, Math.min(scaleX, scaleY));
+
+        const midX = (boundsMinX + boundsMaxX) / 2;
+        const midY = (boundsMinY + boundsMaxY) / 2;
+
+        const offsetX = this.cssWidth / 2 - midX * scale;
+        const offsetY = this.cssHeight / 2 - midY * scale;
+
+        const vfX = isFinite(visMinX) ? visMinX * scale + offsetX : 0;
+        const vfY = isFinite(visMinY) ? visMinY * scale + offsetY : 0;
+        const vfW = isFinite(visMaxX) && isFinite(visMinX) ? (visMaxX - visMinX) * scale : this.cssWidth;
+        const vfH = isFinite(visMaxY) && isFinite(visMinY) ? (visMaxY - visMinY) * scale : this.cssHeight;
+
+        this.mapping = {
+            scale, offsetX, offsetY,
+            vfX, vfY, vfW, vfH,
+            boundsMinX, boundsMaxX, boundsMinY, boundsMaxY
+        };
+
+        this.ctx.clearRect(0, 0, this.cssWidth, this.cssHeight);
+
+        const themeColors = window.ThemeManager ? window.ThemeManager.getCanvasColors() : null;
+        const dotsColor = themeColors ? themeColors.minimapDots : "rgba(51, 65, 85, 0.35)";
+        const linksColor = themeColors ? themeColors.minimapLinks : "rgba(71, 85, 105, 0.35)";
+        const vfBg = themeColors ? themeColors.minimapViewfinder : "rgba(56, 189, 248, 0.12)";
+        const vfBorder = themeColors ? themeColors.minimapViewfinderBorder : "#38bdf8";
+
+        this.ctx.fillStyle = dotsColor;
+        for (let gx = 10; gx < this.cssWidth; gx += 20) {
+            for (let gy = 10; gy < this.cssHeight; gy += 20) {
+                this.ctx.fillRect(gx, gy, 1, 1);
+            }
+        }
+
+        const links = this.mainCanvas.links || [];
+        this.ctx.strokeStyle = linksColor;
+        this.ctx.lineWidth = 0.8;
+        this.ctx.beginPath();
+        for (let i = 0; i < links.length; i++) {
+            const l = links[i];
+            const sx = l.source.x * scale + offsetX;
+            const sy = l.source.y * scale + offsetY;
+            const targetX = l.target.x * scale + offsetX;
+            const targetY = l.target.y * scale + offsetY;
+            this.ctx.moveTo(sx, sy);
+            this.ctx.lineTo(targetX, targetY);
+        }
+        this.ctx.stroke();
+
+        const selNodeId = appState.selectedFileNodeId;
+        const unusedNodeIds = appState.unusedHighlightMode ? appState.getUnusedNodeIds() : null;
+
+        for (let i = 0; i < nodes.length; i++) {
+            const n = nodes[i];
+            const nx = n.x * scale + offsetX;
+            const ny = n.y * scale + offsetY;
+            const isSelected = selNodeId && n.id === selNodeId;
+
+            let color = appState.colorMode === "feature"
+                ? appState.getFeatureColor(n.feature)
+                : (appState.LAYER_COLORS[n.layer] || "#0284c7");
+
+            if (unusedNodeIds && unusedNodeIds.has(n.id) && !isSelected) {
+                color = "#94a3b8";
+            }
+
+            const r = isSelected ? 4 : 2.5;
+            this.ctx.beginPath();
+            this.ctx.arc(nx, ny, r, 0, Math.PI * 2);
+            this.ctx.fillStyle = color;
+            this.ctx.fill();
+
+            if (isSelected) {
+                this.ctx.beginPath();
+                this.ctx.arc(nx, ny, r + 2.5, 0, Math.PI * 2);
+                this.ctx.strokeStyle = vfBorder;
+                this.ctx.lineWidth = 1.5;
+                this.ctx.stroke();
+            }
+        }
+
+        this.ctx.fillStyle = vfBg;
+        this.ctx.fillRect(vfX, vfY, vfW, vfH);
+        this.ctx.strokeStyle = vfBorder;
+        this.ctx.lineWidth = 1.5;
+        this.ctx.strokeRect(vfX, vfY, vfW, vfH);
+
+        const cornerLen = Math.min(6, Math.max(2, Math.min(vfW, vfH) / 3));
+        if (cornerLen > 2) {
+            this.ctx.strokeStyle = "#ffffff";
+            this.ctx.lineWidth = 2;
+            this.ctx.beginPath();
+            this.ctx.moveTo(vfX, vfY + cornerLen);
+            this.ctx.lineTo(vfX, vfY);
+            this.ctx.lineTo(vfX + cornerLen, vfY);
+            this.ctx.moveTo(vfX + vfW - cornerLen, vfY);
+            this.ctx.lineTo(vfX + vfW, vfY);
+            this.ctx.lineTo(vfX + vfW, vfY + cornerLen);
+            this.ctx.moveTo(vfX, vfY + vfH - cornerLen);
+            this.ctx.lineTo(vfX, vfY + vfH);
+            this.ctx.lineTo(vfX + cornerLen, vfY + vfH);
+            this.ctx.moveTo(vfX + vfW - cornerLen, vfY + vfH);
+            this.ctx.lineTo(vfX + vfW, vfY + vfH);
+            this.ctx.lineTo(vfX + vfW, vfY + vfH - cornerLen);
+            this.ctx.stroke();
+        }
+    }
+}
+
+window.MiniMap = MiniMap;

codeui/server/static/js/sidebar.js

@@ -0,0 +1,268 @@
+/**
+ * Explorer Sidebar Controller for CodeUI.
+ */
+class Sidebar {
+    static currentTab = "files";
+    static collapsed = true;
+
+    static init() {
+        this.collapsed = true;
+        const sidebar = document.getElementById("sidebar");
+        const dockBtn = document.getElementById("btn-dock-sidebar");
+        if (sidebar) sidebar.classList.add("collapsed");
+        if (dockBtn) dockBtn.style.display = "flex";
+        if (window.mainCanvas) {
+            setTimeout(() => window.mainCanvas.handleResize(), 100);
+        }
+    }
+
+    static switchTab(tabName) {
+        this.currentTab = tabName;
+        document.querySelectorAll(".sidebar-tabs .tab-btn").forEach(btn => {
+            const active = btn.getAttribute("onclick")?.includes(`'${tabName}'`);
+            btn.classList.toggle("active", !!active);
+        });
+        this.renderCurrentTab();
+    }
+
+    static toggleSidebar() {
+        this.collapsed = !this.collapsed;
+        const sidebar = document.getElementById("sidebar");
+        const dockBtn = document.getElementById("btn-dock-sidebar");
+        if (sidebar) sidebar.classList.toggle("collapsed", this.collapsed);
+        if (dockBtn) dockBtn.style.display = this.collapsed ? "flex" : "none";
+        if (window.mainCanvas) {
+            setTimeout(() => window.mainCanvas.handleResize(), 200);
+        }
+    }
+
+    static renderCurrentTab() {
+        const container = document.getElementById("sidebar-tab-content");
+        if (!container || !window.appState) return;
+
+        const q = (appState.searchQuery || "").toLowerCase();
+        const graph = appState.rawGraph || {};
+
+        if (this.currentTab === "files") {
+            const files = (graph.files || []).filter(f => !q || f.toLowerCase().includes(q));
+            if (files.length === 0) {
+                container.innerHTML = `<div class="empty-state" style="padding:16px; text-align:center; color:var(--text-dim); font-size:0.75rem;">No files found matching filter</div>`;
+                return;
+            }
+            const info = graph.files_info || {};
+            let html = `<div class="file-card-list">`;
+            files.forEach(f => {
+                const meta = info[f] || {};
+                const layer = meta.layer || "other";
+                const isSelected = appState.selectedFileNodeId === f;
+                html += `
+                    <div class="sidebar-item file-card ${isSelected ? 'selected' : ''}" data-id="${f}" onclick="Sidebar.onFileCardClick('${f}')">
+                        <div class="file-title" style="display:flex; align-items:center; gap:6px; font-weight:600; font-size:0.8rem; color:var(--text-main);">
+                            <span class="file-icon">📄</span>
+                            <span class="file-name" title="${f}">${f.split('/').pop()}</span>
+                        </div>
+                        <div class="file-meta" style="display:flex; justify-content:space-between; align-items:center; margin-top:4px;">
+                            <span class="badge layer-${layer}" style="font-size:0.65rem; padding:1px 5px; border-radius:4px; text-transform:uppercase; background:var(--bg-surface); border:1px solid var(--border-subtle); color:var(--text-muted);">${layer}</span>
+                            <span class="file-path" style="font-size:0.68rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px;" title="${f}">${f}</span>
+                        </div>
+                    </div>
+                `;
+            });
+            html += `</div>`;
+            container.innerHTML = html;
+        } else if (this.currentTab === "features") {
+            const info = graph.files_info || {};
+            const featureMap = {};
+            (graph.files || []).forEach(f => {
+                if (q && !f.toLowerCase().includes(q)) return;
+                const feat = info[f]?.feature || "root";
+                if (!featureMap[feat]) featureMap[feat] = [];
+                featureMap[feat].push(f);
+            });
+
+            const entries = Object.entries(featureMap);
+            if (entries.length === 0) {
+                container.innerHTML = `<div class="empty-state" style="padding:16px; text-align:center; color:var(--text-dim); font-size:0.75rem;">No features found</div>`;
+                return;
+            }
+
+            let html = `<div class="feature-group-list">`;
+            entries.forEach(([feat, fList]) => {
+                const featColor = appState.getFeatureColor(feat);
+                html += `
+                    <div class="feature-group" style="margin-bottom:12px;">
+                        <div class="feature-header" style="display:flex; align-items:center; justify-content:space-between; padding:6px 8px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:6px; margin-bottom:4px; font-size:0.75rem; font-weight:700;">
+                            <div style="display:flex; align-items:center; gap:6px;">
+                                <span class="legend-shape" style="background:${featColor}; display:inline-block; width:10px; height:10px; border-radius:50%;"></span>
+                                <span class="feature-name" style="color:var(--text-main);">${feat}</span>
+                            </div>
+                            <span class="count-badge" style="background:var(--bg-base); padding:1px 6px; border-radius:10px; font-size:0.68rem; color:var(--text-muted);">${fList.length}</span>
+                        </div>
+                        <div class="feature-files">
+                            ${fList.map(f => `
+                                <div class="sidebar-item file-card" data-id="${f}" style="padding:4px 8px; margin:2px 0;" onclick="Sidebar.onFileCardClick('${f}')">
+                                    <span class="file-name" style="font-size:0.75rem; color:var(--text-main);">${f.split('/').pop()}</span>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            });
+            html += `</div>`;
+            container.innerHTML = html;
+        } else if (this.currentTab === "defects") {
+            const allFindings = appState.defectsData || [];
+            const apiDriftCount = allFindings.filter(d => d.rule_id === "api_drift").length;
+            const defectsCount = allFindings.length - apiDriftCount;
+
+            if (!this.defectSubFilter) this.defectSubFilter = "all";
+
+            const defects = allFindings.filter(d => {
+                if (this.defectSubFilter === "api_drift" && d.rule_id !== "api_drift") return false;
+                if (this.defectSubFilter === "defects" && d.rule_id === "api_drift") return false;
+                return !q || d.rule_id.toLowerCase().includes(q) || (d.message || "").toLowerCase().includes(q);
+            });
+
+            let html = `
+                <div class="defect-filter-bar" style="display:flex; gap:4px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap; align-items:center;">
+                    <button class="secondary ${this.defectSubFilter === 'all' ? 'active' : ''}" style="font-size:0.68rem; padding:2px 6px;" onclick="Sidebar.setDefectSubFilter('all')">All (${allFindings.length})</button>
+                    <button class="secondary ${this.defectSubFilter === 'defects' ? 'active' : ''}" style="font-size:0.68rem; padding:2px 6px;" onclick="Sidebar.setDefectSubFilter('defects')">Defects (${defectsCount})</button>
+                    <button class="secondary ${this.defectSubFilter === 'api_drift' ? 'active' : ''}" style="font-size:0.68rem; padding:2px 6px; color:var(--accent);" onclick="Sidebar.setDefectSubFilter('api_drift')">🌊 API Drift (${apiDriftCount})</button>
+                    <button class="secondary" style="font-size:0.65rem; padding:2px 6px; color:var(--accent); border-color:var(--border-subtle); margin-left:auto;" onclick="App.setApiBaseline()" title="Capture public symbols baseline snapshot">📸 Set Baseline</button>
+                </div>
+            `;
+
+            if (defects.length === 0) {
+                html += `<div class="empty-state" style="padding:16px; text-align:center; color:var(--text-dim); font-size:0.75rem;">No findings or API drift issues detected under current filter</div>`;
+                container.innerHTML = html;
+                return;
+            }
+
+            html += `<div class="defects-card-list">`;
+            defects.forEach(d => {
+                const loc = d.location || {};
+                const fId = loc.file_id || "unknown";
+                const line = loc.start_line || 1;
+                const isDrift = d.rule_id === "api_drift";
+                const badgeColor = isDrift ? "var(--accent)" : "var(--danger)";
+                const badgeLabel = isDrift ? "🌊 API Drift" : `⚠️ ${d.rule_id}`;
+                const safeMsg = (d.message || "").replace(/'/g, "\\'");
+                const symbolId = d.symbol_id || "";
+                html += `
+                    <div class="sidebar-item defect-card" style="padding:8px; border:1px solid ${isDrift ? 'var(--accent)' : 'var(--border-subtle)'}; border-radius:6px; margin-bottom:6px; background:var(--bg-surface); cursor:pointer;" onclick="Sidebar.openDefectLocation('${fId}', ${line}, '${symbolId}', '${safeMsg}')">
+                        <div class="defect-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
+                            <span class="defect-rule" style="font-weight:700; font-size:0.75rem; color:${badgeColor};">${badgeLabel}</span>
+                            <span class="defect-loc" style="font-size:0.68rem; color:var(--text-dim);">${fId.split('/').pop()}:${line}</span>
+                        </div>
+                        <div class="defect-msg" style="font-size:0.72rem; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">${d.message}</div>
+                        ${d.fix_hint ? `<div style="font-size:0.65rem; color:var(--accent); margin-top:4px; font-style:italic;">💡 ${d.fix_hint}</div>` : ''}
+                    </div>
+                `;
+            });
+            html += `</div>`;
+            container.innerHTML = html;
+        } else if (this.currentTab === "stats") {
+            const filesCount = (graph.files || []).length;
+            const symbolsCount = (graph.symbols || []).length;
+            const edgesCount = (graph.edges || []).length;
+            const allFindings = appState.defectsData || [];
+            const defectsCount = allFindings.filter(d => d.rule_id !== "api_drift").length;
+            const apiDriftCount = allFindings.filter(d => d.rule_id === "api_drift").length;
+
+            const layerCounts = {};
+            const info = graph.files_info || {};
+            (graph.files || []).forEach(f => {
+                const l = info[f]?.layer || "other";
+                layerCounts[l] = (layerCounts[l] || 0) + 1;
+            });
+
+            let html = `
+                <div class="stats-panel" style="padding:8px;">
+                    <div class="stats-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
+                        <div class="stat-card" style="background:var(--bg-surface); padding:8px; border-radius:6px; border:1px solid var(--border-subtle); text-align:center;">
+                            <div class="stat-num" style="font-size:1.1rem; font-weight:800; color:var(--primary);">${filesCount}</div>
+                            <div class="stat-label" style="font-size:0.68rem; color:var(--text-dim);">Files</div>
+                        </div>
+                        <div class="stat-card" style="background:var(--bg-surface); padding:8px; border-radius:6px; border:1px solid var(--border-subtle); text-align:center;">
+                            <div class="stat-num" style="font-size:1.1rem; font-weight:800; color:var(--primary);">${symbolsCount}</div>
+                            <div class="stat-label" style="font-size:0.68rem; color:var(--text-dim);">Symbols</div>
+                        </div>
+                        <div class="stat-card" style="background:var(--bg-surface); padding:8px; border-radius:6px; border:1px solid var(--border-subtle); text-align:center;">
+                            <div class="stat-num" style="font-size:1.1rem; font-weight:800; color:var(--primary);">${edgesCount}</div>
+                            <div class="stat-label" style="font-size:0.68rem; color:var(--text-dim);">Edges</div>
+                        </div>
+                        <div class="stat-card" style="background:var(--bg-surface); padding:8px; border-radius:6px; border:1px solid var(--border-subtle); text-align:center;">
+                            <div class="stat-num" style="font-size:1.1rem; font-weight:800; color:var(--danger);">${defectsCount}</div>
+                            <div class="stat-label" style="font-size:0.68rem; color:var(--text-dim);">Defects</div>
+                        </div>
+                        <div class="stat-card" style="background:var(--bg-surface); padding:8px; border-radius:6px; border:1px solid var(--border-subtle); grid-column: span 2; text-align:center;">
+                            <div class="stat-num" style="font-size:1.1rem; font-weight:800; color:var(--accent);">${apiDriftCount}</div>
+                            <div class="stat-label" style="font-size:0.68rem; color:var(--text-dim);">Public API Drift Warnings</div>
+                        </div>
+                    </div>
+                    <div style="margin-top:16px; font-weight:700; font-size:0.8rem; color:var(--text-muted);">Layers Distribution</div>
+                    <div class="layers-list" style="margin-top:8px;">
+            `;
+            Object.entries(layerCounts).forEach(([l, count]) => {
+                const color = appState.LAYER_COLORS[l] || "var(--text-dim)";
+                html += `
+                    <div class="layer-stat-row" style="display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:0.75rem;">
+                        <span><span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:${color}; margin-right:6px;"></span>${l}</span>
+                        <span style="color:var(--text-muted); font-weight:600;">${count} files</span>
+                    </div>
+                `;
+            });
+            html += `</div></div>`;
+            container.innerHTML = html;
+        }
+    }
+
+    static setDefectSubFilter(sub) {
+        this.defectSubFilter = sub;
+        this.renderCurrentTab();
+    }
+
+    static highlightSelectedCard(nodeId) {
+        this.clearSelection();
+        if (!nodeId) return;
+        const cards = document.querySelectorAll(`.sidebar-item[data-id="${nodeId}"]`);
+        cards.forEach(card => {
+            card.classList.add("selected");
+            card.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        });
+    }
+
+    static clearSelection() {
+        document.querySelectorAll(".sidebar-item.selected").forEach(c => c.classList.remove("selected"));
+    }
+
+    static onFileCardClick(fileId) {
+        appState.selectedFileNodeId = fileId;
+        this.highlightSelectedCard(fileId);
+        if (window.mainCanvas) {
+            window.mainCanvas.selectAndCenterNode(fileId);
+        }
+    }
+
+    static openDefectLocation(fileId, line = 1, symbol = null, message = "") {
+        let targetSymbol = symbol && symbol.length > 0 ? symbol : null;
+        if (!targetSymbol && appState.rawGraph?.symbols) {
+            const fileSyms = appState.rawGraph.symbols.filter(s => {
+                const sFile = s.location?.file_id;
+                return sFile === fileId || sFile?.endsWith("/" + fileId) || fileId.endsWith("/" + sFile);
+            });
+            const match = fileSyms.find(s =>
+                s.location &&
+                s.location.start_line <= line &&
+                (s.location.end_line || s.location.start_line) >= line
+            );
+            if (match) targetSymbol = match.id;
+        }
+
+        if (window.SubGraphManager) {
+            SubGraphManager.openWindow(fileId, targetSymbol, line, message, "graph");
+        }
+    }
+}
+
+window.Sidebar = Sidebar;