nuclie 1.0.0

package/dist/visual/graph-visualizer.js

@@ -0,0 +1,282 @@
+/* global HTMLCanvasElement, CanvasRenderingContext2D, MouseEvent */
+/**
+ * WebGPU Graph Visualizer
+ * Interactive dependency graph visualization with drill-down
+ */
+export class GraphVisualizer {
+    constructor(config = {}) {
+        this.canvas = null;
+        this.ctx = null;
+        this.selectedNode = null;
+        this.hoveredNode = null;
+        this.config = {
+            width: 1200,
+            height: 800,
+            nodeRadius: 20,
+            maxNodes: 10000,
+            ...config
+        };
+    }
+    /**
+     * Initialize canvas for rendering
+     */
+    initialize(canvasId) {
+        if (typeof document === 'undefined') {
+            // Server-side or test environment
+            return;
+        }
+        this.canvas = document.getElementById(canvasId);
+        if (!this.canvas) {
+            throw new Error(`Canvas element with id "${canvasId}" not found`);
+        }
+        this.canvas.width = this.config.width;
+        this.canvas.height = this.config.height;
+        this.ctx = this.canvas.getContext('2d');
+        // Add event listeners for interactivity
+        this.canvas.addEventListener('click', this.handleClick.bind(this));
+        this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+    }
+    /**
+     * Calculate force-directed layout for nodes
+     */
+    calculateLayout(nodes, edges) {
+        const layout = {
+            nodes: [],
+            edges: []
+        };
+        // Initialize node positions randomly
+        const nodePositions = new Map();
+        nodes.forEach(node => {
+            nodePositions.set(node.id, {
+                x: Math.random() * this.config.width,
+                y: Math.random() * this.config.height
+            });
+        });
+        // Force-directed layout simulation (simplified)
+        const iterations = 50;
+        const repulsionForce = 5000;
+        const attractionForce = 0.01;
+        const damping = 0.9;
+        for (let iter = 0; iter < iterations; iter++) {
+            const forces = new Map();
+            // Initialize forces
+            nodes.forEach(node => {
+                forces.set(node.id, { x: 0, y: 0 });
+            });
+            // Repulsion between all nodes
+            for (let i = 0; i < nodes.length; i++) {
+                for (let j = i + 1; j < nodes.length; j++) {
+                    const node1 = nodes[i];
+                    const node2 = nodes[j];
+                    const pos1 = nodePositions.get(node1.id);
+                    const pos2 = nodePositions.get(node2.id);
+                    const dx = pos2.x - pos1.x;
+                    const dy = pos2.y - pos1.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy) || 1;
+                    const force = repulsionForce / (distance * distance);
+                    const fx = (dx / distance) * force;
+                    const fy = (dy / distance) * force;
+                    const f1 = forces.get(node1.id);
+                    const f2 = forces.get(node2.id);
+                    f1.x -= fx;
+                    f1.y -= fy;
+                    f2.x += fx;
+                    f2.y += fy;
+                }
+            }
+            // Attraction along edges
+            edges.forEach(edge => {
+                const pos1 = nodePositions.get(edge.from);
+                const pos2 = nodePositions.get(edge.to);
+                if (!pos1 || !pos2)
+                    return;
+                const dx = pos2.x - pos1.x;
+                const dy = pos2.y - pos1.y;
+                const distance = Math.sqrt(dx * dx + dy * dy) || 1;
+                const force = distance * attractionForce;
+                const fx = (dx / distance) * force;
+                const fy = (dy / distance) * force;
+                const f1 = forces.get(edge.from);
+                const f2 = forces.get(edge.to);
+                f1.x += fx;
+                f1.y += fy;
+                f2.x -= fx;
+                f2.y -= fy;
+            });
+            // Apply forces with damping
+            nodes.forEach(node => {
+                const pos = nodePositions.get(node.id);
+                const force = forces.get(node.id);
+                pos.x += force.x * damping;
+                pos.y += force.y * damping;
+                // Keep within bounds
+                pos.x = Math.max(this.config.nodeRadius, Math.min(this.config.width - this.config.nodeRadius, pos.x));
+                pos.y = Math.max(this.config.nodeRadius, Math.min(this.config.height - this.config.nodeRadius, pos.y));
+            });
+        }
+        // Build final layout
+        nodes.forEach(node => {
+            const pos = nodePositions.get(node.id);
+            layout.nodes.push({
+                id: node.id,
+                x: pos.x,
+                y: pos.y,
+                radius: this.config.nodeRadius
+            });
+        });
+        edges.forEach(edge => {
+            const from = nodePositions.get(edge.from);
+            const to = nodePositions.get(edge.to);
+            if (from && to) {
+                layout.edges.push({
+                    from: edge.from,
+                    to: edge.to,
+                    points: [from, to]
+                });
+            }
+        });
+        return layout;
+    }
+    /**
+     * Render the graph
+     */
+    render(nodes, edges, issues) {
+        if (!this.ctx)
+            return;
+        const layout = this.calculateLayout(nodes, edges);
+        // Clear canvas
+        this.ctx.clearRect(0, 0, this.config.width, this.config.height);
+        // Draw edges
+        this.ctx.strokeStyle = '#666';
+        this.ctx.lineWidth = 1;
+        layout.edges.forEach(edge => {
+            this.ctx.beginPath();
+            this.ctx.moveTo(edge.points[0].x, edge.points[0].y);
+            this.ctx.lineTo(edge.points[1].x, edge.points[1].y);
+            this.ctx.stroke();
+        });
+        // Draw nodes
+        const issueNodeIds = new Set(issues.flatMap(i => i.affectedNodes));
+        layout.nodes.forEach(node => {
+            const hasIssue = issueNodeIds.has(node.id);
+            const isSelected = node.id === this.selectedNode;
+            const isHovered = node.id === this.hoveredNode;
+            this.ctx.beginPath();
+            this.ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
+            // Color based on state
+            if (hasIssue) {
+                this.ctx.fillStyle = '#ff4444';
+            }
+            else if (isSelected) {
+                this.ctx.fillStyle = '#4444ff';
+            }
+            else if (isHovered) {
+                this.ctx.fillStyle = '#44ff44';
+            }
+            else {
+                this.ctx.fillStyle = '#888';
+            }
+            this.ctx.fill();
+            // Draw border
+            this.ctx.strokeStyle = isSelected || isHovered ? '#fff' : '#333';
+            this.ctx.lineWidth = isSelected || isHovered ? 3 : 1;
+            this.ctx.stroke();
+        });
+        // Draw labels for selected/hovered nodes
+        if (this.selectedNode || this.hoveredNode) {
+            const nodeId = this.selectedNode || this.hoveredNode;
+            const layoutNode = layout.nodes.find(n => n.id === nodeId);
+            const dataNode = nodes.find(n => n.id === nodeId);
+            if (layoutNode && dataNode) {
+                this.drawTooltip(layoutNode.x, layoutNode.y, dataNode, issues);
+            }
+        }
+    }
+    /**
+     * Draw tooltip for a node
+     */
+    drawTooltip(x, y, node, issues) {
+        if (!this.ctx)
+            return;
+        const nodeIssues = issues.filter(i => i.affectedNodes.includes(node.id));
+        const lines = [
+            `Path: ${node.path}`,
+            `Size: ${(node.size / 1024).toFixed(2)}KB`,
+            `Imports: ${node.imports.length}`,
+            `Imported by: ${node.importedBy.length}`
+        ];
+        if (nodeIssues.length > 0) {
+            lines.push('', 'Issues:');
+            nodeIssues.forEach(issue => {
+                lines.push(`- ${issue.message}`);
+                if (issue.fix) {
+                    lines.push(`  Fix: ${issue.fix}`);
+                }
+            });
+        }
+        const padding = 10;
+        const lineHeight = 16;
+        const maxWidth = Math.max(...lines.map(l => this.ctx.measureText(l).width));
+        const boxWidth = maxWidth + padding * 2;
+        const boxHeight = lines.length * lineHeight + padding * 2;
+        // Position tooltip
+        let tooltipX = x + 30;
+        let tooltipY = y - boxHeight / 2;
+        // Keep within bounds
+        if (tooltipX + boxWidth > this.config.width) {
+            tooltipX = x - boxWidth - 30;
+        }
+        if (tooltipY < 0)
+            tooltipY = 0;
+        if (tooltipY + boxHeight > this.config.height) {
+            tooltipY = this.config.height - boxHeight;
+        }
+        // Draw background
+        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
+        this.ctx.fillRect(tooltipX, tooltipY, boxWidth, boxHeight);
+        // Draw border
+        this.ctx.strokeStyle = '#fff';
+        this.ctx.lineWidth = 2;
+        this.ctx.strokeRect(tooltipX, tooltipY, boxWidth, boxHeight);
+        // Draw text
+        this.ctx.fillStyle = '#fff';
+        this.ctx.font = '12px monospace';
+        lines.forEach((line, i) => {
+            this.ctx.fillText(line, tooltipX + padding, tooltipY + padding + (i + 1) * lineHeight);
+        });
+    }
+    /**
+     * Handle click events
+     */
+    handleClick(event) {
+        if (!this.canvas)
+            return;
+        const rect = this.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        // Find clicked node
+        // This would need the current layout - simplified for now
+        this.selectedNode = this.hoveredNode;
+    }
+    /**
+     * Handle mouse move events
+     */
+    handleMouseMove(event) {
+        if (!this.canvas)
+            return;
+        const rect = this.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        // Find hovered node
+        // This would need the current layout - simplified for now
+        this.hoveredNode = null;
+    }
+    /**
+     * Export graph as image
+     */
+    exportAsImage() {
+        if (!this.canvas)
+            return null;
+        return this.canvas.toDataURL('image/png');
+    }
+}

package/dist/visual/root-cause.d.ts

@@ -0,0 +1,83 @@
+import type { DependencyGraph } from '../resolve/graph.js';
+import type { BuildContext } from '../core/engine/types.js';
+/**
+ * Root Cause Analysis System
+ * Analyzes dependency graphs to identify root causes of build issues
+ */
+export interface RootCauseNode {
+    id: string;
+    path: string;
+    type: 'entry' | 'module' | 'dependency' | 'asset';
+    size: number;
+    imports: string[];
+    importedBy: string[];
+    issues: RootCauseIssue[];
+}
+export interface RootCauseIssue {
+    type: 'bundle-bloat' | 'unused-dep' | 'dead-code' | 'circular-dep' | 'duplicate-module';
+    severity: 'critical' | 'warning' | 'info';
+    message: string;
+    fix?: string;
+    affectedNodes: string[];
+}
+export interface GraphSlice {
+    nodes: Map<string, RootCauseNode>;
+    edges: Array<{
+        from: string;
+        to: string;
+    }>;
+    rootCause: RootCauseIssue;
+}
+export declare class RootCauseAnalyzer {
+    private graph;
+    private ctx;
+    private nodeCache;
+    constructor(graph: DependencyGraph, ctx: BuildContext);
+    /**
+     * Analyze graph for root causes
+     */
+    analyze(): RootCauseIssue[];
+    /**
+     * Create a graph slice for a specific issue
+     */
+    createSlice(issue: RootCauseIssue): GraphSlice;
+    /**
+     * Get path from entry to problematic module
+     */
+    getImportPath(targetId: string): string[];
+    /**
+     * Export graph data for visualization
+     */
+    exportForVisualization(): {
+        nodes: RootCauseNode[];
+        edges: Array<{
+            from: string;
+            to: string;
+        }>;
+        issues: RootCauseIssue[];
+    };
+    /**
+     * Detect bundle bloat issues
+     */
+    private detectBundleBloat;
+    /**
+     * Detect unused dependencies
+     */
+    private detectUnusedDependencies;
+    /**
+     * Detect circular dependencies
+     */
+    private detectCircularDependencies;
+    /**
+     * Detect duplicate modules
+     */
+    private detectDuplicateModules;
+    /**
+     * Get or create root cause node
+     */
+    private getOrCreateNode;
+}
+/**
+ * Export graph data in shareable format
+ */
+export declare function exportGraphData(analyzer: RootCauseAnalyzer): string;

package/dist/visual/root-cause.js

@@ -0,0 +1,265 @@
+export class RootCauseAnalyzer {
+    constructor(graph, ctx) {
+        this.nodeCache = new Map();
+        this.graph = graph;
+        this.ctx = ctx;
+    }
+    /**
+     * Analyze graph for root causes
+     */
+    analyze() {
+        const issues = [];
+        // Detect bundle bloat
+        issues.push(...this.detectBundleBloat());
+        // Detect unused dependencies
+        issues.push(...this.detectUnusedDependencies());
+        // Detect circular dependencies
+        issues.push(...this.detectCircularDependencies());
+        // Detect duplicate modules
+        issues.push(...this.detectDuplicateModules());
+        return issues;
+    }
+    /**
+     * Create a graph slice for a specific issue
+     */
+    createSlice(issue) {
+        const nodes = new Map();
+        const edges = [];
+        // Build subgraph for affected nodes
+        for (const nodeId of issue.affectedNodes) {
+            const node = this.getOrCreateNode(nodeId);
+            if (node) {
+                nodes.set(nodeId, node);
+                // Add edges
+                for (const importId of node.imports) {
+                    if (issue.affectedNodes.includes(importId)) {
+                        edges.push({ from: nodeId, to: importId });
+                    }
+                }
+            }
+        }
+        return { nodes, edges, rootCause: issue };
+    }
+    /**
+     * Get path from entry to problematic module
+     */
+    getImportPath(targetId) {
+        const visited = new Set();
+        const path = [];
+        const dfs = (nodeId) => {
+            if (visited.has(nodeId))
+                return false;
+            visited.add(nodeId);
+            path.push(nodeId);
+            if (nodeId === targetId)
+                return true;
+            const node = this.graph.nodes.get(nodeId);
+            if (node && node.edges) {
+                for (const edge of node.edges) {
+                    if (dfs(edge.to))
+                        return true;
+                }
+            }
+            path.pop();
+            return false;
+        };
+        // Start from entry points
+        for (const [nodeId, node] of this.graph.nodes) {
+            if (node.metadata?.isEntry) {
+                if (dfs(nodeId))
+                    break;
+            }
+        }
+        return path;
+    }
+    /**
+     * Export graph data for visualization
+     */
+    exportForVisualization() {
+        const nodes = [];
+        const edges = [];
+        for (const [nodeId, graphNode] of this.graph.nodes) {
+            const node = this.getOrCreateNode(nodeId);
+            if (node) {
+                nodes.push(node);
+                for (const depId of node.imports) {
+                    edges.push({ from: nodeId, to: depId });
+                }
+            }
+        }
+        return {
+            nodes,
+            edges,
+            issues: this.analyze()
+        };
+    }
+    /**
+     * Detect bundle bloat issues
+     */
+    detectBundleBloat() {
+        const issues = [];
+        const sizeThreshold = 100 * 1024; // 100KB
+        for (const [nodeId, node] of this.graph.nodes) {
+            const size = node.metadata?.size || 0;
+            if (size > sizeThreshold) {
+                issues.push({
+                    type: 'bundle-bloat',
+                    severity: 'warning',
+                    message: `Large module detected: ${node.path} (${(size / 1024).toFixed(2)}KB)`,
+                    fix: 'Consider code splitting or lazy loading this module',
+                    affectedNodes: [nodeId]
+                });
+            }
+        }
+        return issues;
+    }
+    /**
+     * Detect unused dependencies
+     */
+    detectUnusedDependencies() {
+        const issues = [];
+        const referenced = new Set();
+        // Mark all referenced modules
+        for (const [, node] of this.graph.nodes) {
+            if (node.edges) {
+                node.edges.forEach(edge => referenced.add(edge.to));
+            }
+        }
+        // Find unreferenced modules (except entries)
+        for (const [nodeId, node] of this.graph.nodes) {
+            if (!node.metadata?.isEntry && !referenced.has(nodeId)) {
+                issues.push({
+                    type: 'unused-dep',
+                    severity: 'info',
+                    message: `Unused module: ${node.path}`,
+                    fix: 'Remove this module if it\'s not needed',
+                    affectedNodes: [nodeId]
+                });
+            }
+        }
+        return issues;
+    }
+    /**
+     * Detect circular dependencies
+     */
+    detectCircularDependencies() {
+        const issues = [];
+        // Iterative DFS for cycle detection (Safe for 10k+ nodes)
+        const visiting = new Set(); // Nodes currently in the recursion stack (current path)
+        const visited = new Set(); // Nodes completely processed (no cycles found from them)
+        // Stack holds [nodeId, edgeIndex] to simulate recursion
+        const stack = [];
+        const path = []; // Current path from startNodeId to current node
+        for (const [startNodeId] of this.graph.nodes) {
+            if (visited.has(startNodeId))
+                continue;
+            // Start a new DFS traversal from startNodeId
+            stack.length = 0;
+            path.length = 0;
+            visiting.clear(); // Clear visiting for each new DFS tree traversal
+            stack.push({ id: startNodeId, edgeIndex: 0 });
+            visiting.add(startNodeId);
+            path.push(startNodeId);
+            while (stack.length > 0) {
+                const current = stack[stack.length - 1];
+                const node = this.graph.nodes.get(current.id);
+                // If no edges or all edges visited, backtrack
+                if (!node || !node.edges || current.edgeIndex >= node.edges.length) {
+                    visiting.delete(current.id);
+                    visited.add(current.id); // Mark as fully visited
+                    path.pop();
+                    stack.pop();
+                    continue;
+                }
+                // Process next edge
+                const edge = node.edges[current.edgeIndex];
+                current.edgeIndex++; // Advance for next time we see this node
+                const neighborId = edge.to;
+                if (visiting.has(neighborId)) {
+                    // Found cycle! neighborId is an ancestor in the current path
+                    const cycleStart = path.indexOf(neighborId);
+                    const cycle = path.slice(cycleStart);
+                    issues.push({
+                        type: 'circular-dep',
+                        severity: 'warning',
+                        message: `Circular dependency detected: ${cycle.map(id => {
+                            const node = this.graph.nodes.get(id);
+                            return node?.path || id;
+                        }).join(' → ')}`,
+                        fix: 'Refactor to remove circular dependency',
+                        affectedNodes: cycle
+                    });
+                    continue;
+                }
+                if (!visited.has(neighborId)) {
+                    stack.push({ id: neighborId, edgeIndex: 0 });
+                    visiting.add(neighborId);
+                    path.push(neighborId);
+                }
+            }
+        }
+        return issues;
+    }
+    /**
+     * Detect duplicate modules
+     */
+    detectDuplicateModules() {
+        const issues = [];
+        const pathMap = new Map();
+        // Group by normalized path
+        for (const [nodeId, node] of this.graph.nodes) {
+            const normalizedPath = node.path.replace(/\\/g, '/');
+            const ids = pathMap.get(normalizedPath) || [];
+            ids.push(nodeId);
+            pathMap.set(normalizedPath, ids);
+        }
+        // Find duplicates
+        for (const [path, ids] of pathMap) {
+            if (ids.length > 1) {
+                issues.push({
+                    type: 'duplicate-module',
+                    severity: 'warning',
+                    message: `Duplicate module detected: ${path} (${ids.length} instances)`,
+                    fix: 'Ensure consistent module resolution',
+                    affectedNodes: ids
+                });
+            }
+        }
+        return issues;
+    }
+    /**
+     * Get or create root cause node
+     */
+    getOrCreateNode(nodeId) {
+        if (this.nodeCache.has(nodeId)) {
+            return this.nodeCache.get(nodeId);
+        }
+        const graphNode = this.graph.nodes.get(nodeId);
+        if (!graphNode)
+            return null;
+        const node = {
+            id: nodeId,
+            path: graphNode.path,
+            type: graphNode.metadata?.isEntry ? 'entry' : 'module',
+            size: graphNode.metadata?.size || 0,
+            imports: graphNode.edges?.map(e => e.to) || [],
+            importedBy: [],
+            issues: []
+        };
+        // Find importers
+        for (const [otherId, otherNode] of this.graph.nodes) {
+            if (otherNode.edges?.some(e => e.to === nodeId)) {
+                node.importedBy.push(otherId);
+            }
+        }
+        this.nodeCache.set(nodeId, node);
+        return node;
+    }
+}
+/**
+ * Export graph data in shareable format
+ */
+export function exportGraphData(analyzer) {
+    const data = analyzer.exportForVisualization();
+    return JSON.stringify(data, null, 2);
+}