nuclie 1.0.0

package/dist/visual/client/renderer.js

@@ -0,0 +1,98 @@
+/**
+ * Nuclie Dependency Graph Renderer
+ * Implementation: Three.js (WebGL/WebGPU)
+ * Day 16: WebGPU Visualizer v2 Lock
+ */
+import * as THREE from 'three';
+export class GraphRenderer {
+    constructor(containerId) {
+        this.nodesMesh = null;
+        // Config
+        this.NODE_SIZE = 2;
+        this.COLOR_HUB = 0xff0000;
+        this.COLOR_LEAF = 0x00ff00;
+        const el = document.getElementById(containerId);
+        if (!el)
+            throw new Error(`Container #${containerId} not found`);
+        this.container = el;
+        // Init Three.js
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x000011); // Dark Blue/Black
+        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
+        this.camera.position.z = 1000;
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.container.appendChild(this.renderer.domElement);
+        // Lights
+        const ambientLight = new THREE.AmbientLight(0xbbbbbb);
+        this.scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
+        directionalLight.position.set(1, 1, 1);
+        this.scene.add(directionalLight);
+        // Resize Listener
+        window.addEventListener('resize', this.onWindowResize.bind(this));
+        // Start Loop
+        this.animate();
+    }
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+    /**
+     * Load Graph Data and generate GPU Instanced Mesh
+     * This is highly optimized for 10k+ nodes (1 draw call)
+     */
+    loadData(data) {
+        // Cleanup old
+        if (this.nodesMesh) {
+            this.scene.remove(this.nodesMesh);
+            this.nodesMesh.geometry.dispose();
+            this.nodesMesh.material.dispose();
+        }
+        const geometry = new THREE.SphereGeometry(this.NODE_SIZE, 8, 8); // Low poly spheres
+        const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
+        this.nodesMesh = new THREE.InstancedMesh(geometry, material, data.nodes.length);
+        const dummy = new THREE.Object3D();
+        const color = new THREE.Color();
+        for (let i = 0; i < data.nodes.length; i++) {
+            const node = data.nodes[i];
+            // Position (Mock random layout if not pre-calculated, usually pre-calc in Worker)
+            // In layout-engine we generate positions, here we apply them.
+            // Assuming data.nodes has x,y,z
+            const x = (Math.random() - 0.5) * 2000;
+            const y = (Math.random() - 0.5) * 2000;
+            const z = (Math.random() - 0.5) * 2000;
+            dummy.position.set(x, y, z);
+            dummy.updateMatrix();
+            this.nodesMesh.setMatrixAt(i, dummy.matrix);
+            // Color based on metrics
+            if (node.importers && node.importers.length > 50) {
+                color.setHex(this.COLOR_HUB);
+            }
+            else {
+                color.setHex(this.COLOR_LEAF);
+            }
+            this.nodesMesh.setColorAt(i, color);
+        }
+        this.nodesMesh.instanceMatrix.needsUpdate = true;
+        this.nodesMesh.instanceColor.needsUpdate = true;
+        this.scene.add(this.nodesMesh);
+    }
+    /**
+     * Highlight optimization hints (e.g. pulse red nodes)
+     */
+    highlightHints(hints) {
+        // Implementation: update instanceColor for specific IDs
+        console.log(`Highlighting ${hints.length} optimization opportunities`);
+    }
+    animate() {
+        requestAnimationFrame(this.animate.bind(this));
+        // Slow rotation
+        if (this.nodesMesh) {
+            this.nodesMesh.rotation.y += 0.001;
+        }
+        this.renderer.render(this.scene, this.camera);
+    }
+}

package/dist/visual/federation-editor.d.ts

@@ -0,0 +1 @@
+export declare function getEditorHtml(config: any): string;

package/dist/visual/federation-editor.js

@@ -0,0 +1,231 @@
+export function getEditorHtml(config) {
+    const remotes = config.federation?.remotes || {};
+    const exposes = config.federation?.exposes || {};
+    const shared = config.federation?.shared || {};
+    return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nuclie Federation Editor</title>
+    <style>
+        :root {
+            --bg: #0f172a;
+            --surface: #1e293b;
+            --primary: #3b82f6;
+            --text: #f8fafc;
+            --text-dim: #94a3b8;
+            --border: #334155;
+        }
+        body {
+            font-family: 'Inter', system-ui, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            margin: 0;
+            display: flex;
+            height: 100vh;
+        }
+        .sidebar {
+            width: 300px;
+            background: var(--surface);
+            border-right: 1px solid var(--border);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .main {
+            flex: 1;
+            padding: 40px;
+            overflow-y: auto;
+        }
+        h1, h2, h3 { margin: 0; }
+        .card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 16px;
+        }
+        .section-title {
+            color: var(--text-dim);
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 10px;
+        }
+        .item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 4px;
+            margin-bottom: 8px;
+            cursor: grab;
+        }
+        .item:active { cursor: grabbing; }
+        .badge {
+            background: var(--primary);
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+        }
+        .drop-zone {
+            border: 2px dashed var(--border);
+            border-radius: 8px;
+            padding: 40px;
+            text-align: center;
+            color: var(--text-dim);
+            transition: all 0.2s;
+        }
+        .drop-zone.drag-over {
+            border-color: var(--primary);
+            background: rgba(59, 130, 246, 0.1);
+            color: var(--primary);
+        }
+        input {
+            background: var(--bg);
+            border: 1px solid var(--border);
+            color: var(--text);
+            padding: 8px;
+            border-radius: 4px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        button {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+        }
+        button:hover { opacity: 0.9; }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <div>
+            <h1>Federation</h1>
+            <p style="color: var(--text-dim); font-size: 0.875rem;">Visual Editor</p>
+        </div>
+        
+        <div>
+            <div class="section-title">Configured Remotes</div>
+            <div id="remotes-list">
+                ${Object.entries(remotes).map(([name, url]) => `
+                    <div class="item" draggable="true" data-type="remote" data-name="${name}" data-url="${url}">
+                        <span>${name}</span>
+                        <span class="badge">Remote</span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+
+        <div>
+            <div class="section-title">Exposed Modules</div>
+            <div id="exposes-list">
+                ${Object.entries(exposes).map(([key, path]) => `
+                    <div class="item">
+                        <span>${key}</span>
+                        <span style="color: var(--text-dim); font-size: 0.75rem;">${path}</span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    </div>
+
+    <div class="main">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
+            <h2>Dependency Graph</h2>
+            <button onclick="saveConfig()">Save Changes</button>
+        </div>
+
+        <div class="drop-zone" id="canvas">
+            <h3>Drag Remotes Here to Link</h3>
+            <p>Visualize relationships between Host and Remotes</p>
+            <div id="graph-container" style="margin-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;">
+                <!-- Graph Nodes will appear here -->
+            </div>
+        </div>
+
+        <div style="margin-top: 40px;">
+            <h3>Shared Dependencies</h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px;">
+                ${Object.entries(shared).map(([pkg, opts]) => `
+                    <div class="card">
+                        <strong>${pkg}</strong>
+                        <div style="margin-top: 8px; font-size: 0.875rem; color: var(--text-dim);">
+                            <div>Singleton: ${opts.singleton ? 'Yes' : 'No'}</div>
+                            <div>Version: ${opts.requiredVersion || '*'}</div>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Simple Drag and Drop Logic
+        const draggables = document.querySelectorAll('[draggable="true"]');
+        const canvas = document.getElementById('canvas');
+        const graphContainer = document.getElementById('graph-container');
+
+        draggables.forEach(draggable => {
+            draggable.addEventListener('dragstart', () => {
+                draggable.classList.add('dragging');
+            });
+
+            draggable.addEventListener('dragend', () => {
+                draggable.classList.remove('dragging');
+            });
+        });
+
+        canvas.addEventListener('dragover', e => {
+            e.preventDefault();
+            canvas.classList.add('drag-over');
+        });
+
+        canvas.addEventListener('dragleave', () => {
+            canvas.classList.remove('drag-over');
+        });
+
+        canvas.addEventListener('drop', e => {
+            e.preventDefault();
+            canvas.classList.remove('drag-over');
+            const dragging = document.querySelector('.dragging');
+            if (dragging) {
+                const name = dragging.dataset.name;
+                const url = dragging.dataset.url;
+                addNodeToGraph(name, url);
+            }
+        });
+
+        function addNodeToGraph(name, url) {
+            const node = document.createElement('div');
+            node.className = 'card';
+            node.style.minWidth = '200px';
+            node.innerHTML = \`
+                <div style="display:flex; justify-content:space-between; align-items:center;">
+                    <strong>\${name}</strong>
+                    <button style="padding: 2px 6px; font-size: 12px; background: #ef4444;" onclick="this.parentElement.parentElement.remove()">×</button>
+                </div>
+                <div style="font-size: 12px; color: #94a3b8; margin-top: 4px;">\${url}</div>
+                <div style="margin-top: 10px; font-size: 12px; color: #22c55e;">● Linked</div>
+            \`;
+            graphContainer.appendChild(node);
+        }
+
+        function saveConfig() {
+            alert('Config saved! (Simulation)');
+            // In real app, POST to /__nuclie/api/federation/save
+        }
+    </script>
+</body>
+</html>
+    `;
+}

package/dist/visual/graph-engine.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Nuclie Dependency Graph Visualizer Engine
+ * Logic Layer for WebGPU Visualizer
+ * Day 16: WebGPU Visualizer v2 Lock
+ */
+export interface HelperNode {
+    id: string;
+    size: number;
+    importers: string[];
+    imported: string[];
+    centrality?: number;
+    shakeable?: boolean;
+}
+export interface OptimizationHint {
+    type: 'split' | 'shake' | 'duplicate';
+    nodeId: string;
+    message: string;
+    impact: 'high' | 'medium' | 'low';
+}
+export declare class VisualizerEngine {
+    nodes: Map<string, HelperNode>;
+    constructor(nodes: HelperNode[]);
+    /**
+     * Calculate Graph Metrics (Centrality, Depth)
+     * O(N) pass
+     */
+    analyze(): OptimizationHint[];
+    /**
+     * Generate WebGPU-ready buffer data (Mock)
+     * Flattens graph into Float32Arrays for position/color
+     */
+    generateLayoutData(): {
+        nodeCount: number;
+        edgeCount: number;
+        positionBuffer: Float32Array<ArrayBuffer>;
+        colorBuffer: Float32Array<ArrayBuffer>;
+    };
+}

package/dist/visual/graph-engine.js

@@ -0,0 +1,64 @@
+/**
+ * Nuclie Dependency Graph Visualizer Engine
+ * Logic Layer for WebGPU Visualizer
+ * Day 16: WebGPU Visualizer v2 Lock
+ */
+export class VisualizerEngine {
+    constructor(nodes) {
+        this.nodes = new Map(nodes.map(n => [n.id, n]));
+    }
+    /**
+     * Calculate Graph Metrics (Centrality, Depth)
+     * O(N) pass
+     */
+    analyze() {
+        const hints = [];
+        for (const [id, node] of this.nodes) {
+            // 1. Centrality (In-degree)
+            const inDegree = node.importers.length;
+            node.centrality = inDegree;
+            // 2. Identify "Hubs" (High impact split candidates)
+            // If a node is imported by many (>50) and large (>50KB)
+            if (inDegree > 50 && node.size > 50000) {
+                hints.push({
+                    type: 'split',
+                    nodeId: id,
+                    message: `Hub detected: Imported by ${inDegree} modules. Consider lazy loading.`,
+                    impact: 'high'
+                });
+            }
+            // 3. Identify Shakeable (Leaf nodes with 0 importers - entry points excepted)
+            // If not entry point and 0 importers -> Dead code?
+            // (Assuming we provided full graph including entry points)
+            if (inDegree === 0 && !id.includes('index') && !id.includes('main')) {
+                hints.push({
+                    type: 'shake',
+                    nodeId: id,
+                    message: 'Orphan module detected (0 importers). Verify if entry point.',
+                    impact: 'medium'
+                });
+            }
+            // 4. Duplicate Packages (e.g. lodash vs lodash-es)
+            if (id.includes('node_modules')) {
+                // Implementation would be more complex regex
+            }
+        }
+        return hints;
+    }
+    /**
+     * Generate WebGPU-ready buffer data (Mock)
+     * Flattens graph into Float32Arrays for position/color
+     */
+    generateLayoutData() {
+        // In a real app, this runs Force-Directed Simulation (d3-force or similar)
+        // For 10k nodes, we'd do this in a Worker or Compute Shader.
+        // Here we just return the size to prove we processed it.
+        return {
+            nodeCount: this.nodes.size,
+            edgeCount: Array.from(this.nodes.values()).reduce((acc, n) => acc + n.imported.length, 0),
+            // Mock buffer sizes
+            positionBuffer: new Float32Array(this.nodes.size * 3), // x,y,z
+            colorBuffer: new Float32Array(this.nodes.size * 3) // r,g,b
+        };
+    }
+}

package/dist/visual/graph-ui.d.ts

@@ -0,0 +1,2 @@
+import { DependencyGraph } from '../resolve/graph.js';
+export declare function getGraphUIHtml(graph: DependencyGraph): string;

package/dist/visual/graph-ui.js

@@ -0,0 +1,119 @@
+export function getGraphUIHtml(graph) {
+    const nodes = Array.from(graph.nodes.values()).map(n => ({
+        id: n.id,
+        label: n.path.split('/').pop(),
+        type: n.type,
+        color: n.type === 'css' || n.type === 'css-module' ? '#264de4' : '#f7df1e'
+    }));
+    const links = [];
+    graph.nodes.forEach(node => {
+        node.edges.forEach(edge => {
+            links.push({
+                source: edge.from,
+                target: edge.to,
+                kind: edge.kind
+            });
+        });
+    });
+    const data = JSON.stringify({ nodes, links });
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Nuclie Graph Visualizer</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        body { margin: 0; background: #1a1a1a; color: white; font-family: sans-serif; overflow: hidden; }
+        #graph { width: 100vw; height: 100vh; }
+        .node { stroke: #fff; stroke-width: 1.5px; }
+        .link { stroke: #999; stroke-opacity: 0.6; }
+        .label { font-size: 10px; fill: #eee; pointer-events: none; }
+        #info { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 4px; pointer-events: none; }
+    </style>
+</head>
+<body>
+    <div id="info">Nuclie Dependency Graph</div>
+    <div id="graph"></div>
+    <script>
+        const data = ${data};
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+
+        const svg = d3.select("#graph").append("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .call(d3.zoom().on("zoom", (event) => {
+                container.attr("transform", event.transform);
+            }));
+
+        const container = svg.append("g");
+
+        const simulation = d3.forceSimulation(data.nodes)
+            .force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
+            .force("charge", d3.forceManyBody().strength(-300))
+            .force("center", d3.forceCenter(width / 2, height / 2));
+
+        const link = container.append("g")
+            .attr("class", "links")
+            .selectAll("line")
+            .data(data.links)
+            .enter().append("line")
+            .attr("class", "link");
+
+        const node = container.append("g")
+            .attr("class", "nodes")
+            .selectAll("circle")
+            .data(data.nodes)
+            .enter().append("circle")
+            .attr("class", "node")
+            .attr("r", 8)
+            .attr("fill", d => d.color)
+            .call(d3.drag()
+                .on("start", dragstarted)
+                .on("drag", dragged)
+                .on("end", dragended));
+
+        const label = container.append("g")
+            .selectAll("text")
+            .data(data.nodes)
+            .enter().append("text")
+            .attr("class", "label")
+            .text(d => d.label);
+
+        simulation.on("tick", () => {
+            link
+                .attr("x1", d => d.source.x)
+                .attr("y1", d => d.source.y)
+                .attr("x2", d => d.target.x)
+                .attr("y2", d => d.target.y);
+
+            node
+                .attr("cx", d => d.x)
+                .attr("cy", d => d.y);
+
+            label
+                .attr("x", d => d.x + 10)
+                .attr("y", d => d.y + 3);
+        });
+
+        function dragstarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+
+        function dragended(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+    </script>
+</body>
+</html>
+    `;
+}

package/dist/visual/graph-visualizer.d.ts

@@ -0,0 +1,69 @@
+/**
+ * WebGPU Graph Visualizer
+ * Interactive dependency graph visualization with drill-down
+ */
+import type { RootCauseNode, RootCauseIssue } from './root-cause.js';
+export interface VisualizationConfig {
+    width: number;
+    height: number;
+    nodeRadius: number;
+    maxNodes: number;
+}
+export interface GraphLayout {
+    nodes: Array<{
+        id: string;
+        x: number;
+        y: number;
+        radius: number;
+    }>;
+    edges: Array<{
+        from: string;
+        to: string;
+        points: Array<{
+            x: number;
+            y: number;
+        }>;
+    }>;
+}
+export declare class GraphVisualizer {
+    private config;
+    private canvas;
+    private ctx;
+    private selectedNode;
+    private hoveredNode;
+    constructor(config?: Partial<VisualizationConfig>);
+    /**
+     * Initialize canvas for rendering
+     */
+    initialize(canvasId: string): void;
+    /**
+     * Calculate force-directed layout for nodes
+     */
+    calculateLayout(nodes: RootCauseNode[], edges: Array<{
+        from: string;
+        to: string;
+    }>): GraphLayout;
+    /**
+     * Render the graph
+     */
+    render(nodes: RootCauseNode[], edges: Array<{
+        from: string;
+        to: string;
+    }>, issues: RootCauseIssue[]): void;
+    /**
+     * Draw tooltip for a node
+     */
+    private drawTooltip;
+    /**
+     * Handle click events
+     */
+    private handleClick;
+    /**
+     * Handle mouse move events
+     */
+    private handleMouseMove;
+    /**
+     * Export graph as image
+     */
+    exportAsImage(): string | null;
+}