@myop/cli 0.1.3 → 0.1.5

package/dist/commands/dev/management-website/app.js

@@ -0,0 +1,790 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+// Initialize data
+let components = []; // Array of {id, path, name}
+let origins = [];
+let totalRequests = 0;
+let localRequests = 0;
+let proxiedRequests = 0;
+let requestLog = [];
+let componentLines = new Map(); // Map of componentId -> {origin, servedLocally, count}
+
+// Drag state
+let draggedElement = null;
+let dragOffset = { x: 0, y: 0 };
+let nodePositions = new Map(); // Store custom positions for nodes
+let expandedLabels = new Set(); // Track which component labels are expanded
+
+// Zoom and pan state
+let zoomLevel = 1;
+let panX = 0;
+let panY = 0;
+let isPanning = false;
+let panStart = { x: 0, y: 0 };
+
+// Connect to SSE
+const eventSource = new EventSource('/events');
+
+eventSource.onmessage = (event) => {
+    const data = JSON.parse(event.data);
+
+    if (data.type === 'components') {
+        components = data.components;
+        updateComponentsList();
+        renderArchitecture();
+    } else if (data.type === 'origins') {
+        origins = data.origins;
+        renderArchitecture();
+    } else if (data.type === 'requestLog') {
+        requestLog = data.log;
+        updateActivityLog();
+        updateStats();
+    } else if (data.type === 'request') {
+        handleNewRequest(data);
+    }
+};
+
+eventSource.onerror = () => {
+    console.error('SSE connection lost, will retry...');
+};
+
+// Drag functions
+function startDrag(evt, nodeId) {
+    draggedElement = nodeId;
+    const svg = document.getElementById('architecture-svg');
+    const pt = svg.createSVGPoint();
+    pt.x = evt.clientX;
+    pt.y = evt.clientY;
+    const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+    const currentPos = nodePositions.get(nodeId) || getDefaultPosition(nodeId);
+    dragOffset.x = svgP.x - currentPos.x;
+    dragOffset.y = svgP.y - currentPos.y;
+
+    evt.preventDefault();
+}
+
+function drag(evt) {
+    if (!draggedElement) return;
+
+    const svg = document.getElementById('architecture-svg');
+    const pt = svg.createSVGPoint();
+    pt.x = evt.clientX;
+    pt.y = evt.clientY;
+    const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+    const newX = svgP.x - dragOffset.x;
+    const newY = svgP.y - dragOffset.y;
+
+    nodePositions.set(draggedElement, { x: newX, y: newY });
+
+    // Update node position
+    const node = document.querySelector(`[data-node-id="${draggedElement}"]`);
+    if (node) {
+        node.setAttribute('transform', `translate(${newX}, ${newY})`);
+    }
+
+    // Redraw lines
+    redrawRequestLines();
+
+    evt.preventDefault();
+}
+
+function endDrag(evt) {
+    draggedElement = null;
+    evt.preventDefault();
+}
+
+function getDefaultPosition(nodeId) {
+    // Return default positions based on nodeId
+    const svgHeight = parseInt(document.getElementById('architecture-svg').style.height) || 800;
+    const originCount = origins.length;
+    const verticalSpacing = 150;
+    const originX = 100;
+    const localServerX = 100 + 350;
+    const remoteServerX = 100 + 700;
+    const centerY = svgHeight / 2;
+
+    if (nodeId === 'local-server') {
+        return { x: localServerX, y: centerY };
+    } else if (nodeId === 'remote-server') {
+        return { x: remoteServerX, y: centerY };
+    } else if (nodeId.startsWith('origin-')) {
+        const index = parseInt(nodeId.replace('origin-', ''));
+        return { x: originX, y: 100 + (index * verticalSpacing) };
+    }
+    return { x: 0, y: 0 };
+}
+
+// Add global mouse event listeners
+document.addEventListener('mousemove', drag);
+document.addEventListener('mouseup', endDrag);
+
+// Zoom and pan functions
+function updateViewBox() {
+    const svg = document.getElementById('architecture-svg');
+    const svgHeight = parseInt(svg.style.height) || 800;
+    const svgWidth = 1400;
+
+    const viewBoxWidth = svgWidth / zoomLevel;
+    const viewBoxHeight = svgHeight / zoomLevel;
+    const viewBoxX = panX;
+    const viewBoxY = panY;
+
+    svg.setAttribute('viewBox', `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`);
+
+    // Update zoom level display
+    document.getElementById('zoom-level').textContent = `${Math.round(zoomLevel * 100)}%`;
+}
+
+function zoomIn() {
+    zoomLevel = Math.min(zoomLevel * 1.2, 5);
+    updateViewBox();
+}
+
+function zoomOut() {
+    zoomLevel = Math.max(zoomLevel / 1.2, 0.5);
+    updateViewBox();
+}
+
+function resetZoom() {
+    zoomLevel = 1;
+    panX = 0;
+    panY = 0;
+    updateViewBox();
+}
+
+function handleWheel(e) {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? 0.9 : 1.1;
+    zoomLevel = Math.max(0.5, Math.min(5, zoomLevel * delta));
+    updateViewBox();
+}
+
+function startPan(e) {
+    if (draggedElement) return; // Don't pan if dragging a node
+    isPanning = true;
+    const svg = document.getElementById('architecture-svg');
+    svg.classList.add('panning');
+    panStart.x = e.clientX + panX;
+    panStart.y = e.clientY + panY;
+}
+
+function pan(e) {
+    if (!isPanning) return;
+    panX = panStart.x - e.clientX;
+    panY = panStart.y - e.clientY;
+    updateViewBox();
+}
+
+function endPan() {
+    if (isPanning) {
+        isPanning = false;
+        const svg = document.getElementById('architecture-svg');
+        svg.classList.remove('panning');
+    }
+}
+
+// Setup zoom controls
+document.getElementById('zoom-in').addEventListener('click', zoomIn);
+document.getElementById('zoom-out').addEventListener('click', zoomOut);
+document.getElementById('zoom-reset').addEventListener('click', resetZoom);
+
+// Setup wheel zoom
+const svg = document.getElementById('architecture-svg');
+svg.addEventListener('wheel', handleWheel, { passive: false });
+
+// Setup pan on SVG (only when not dragging nodes)
+svg.addEventListener('mousedown', (e) => {
+    if (e.target === svg || e.target.closest('.request-line') || e.target.closest('.connection-line')) {
+        startPan(e);
+    }
+});
+document.addEventListener('mousemove', pan);
+document.addEventListener('mouseup', endPan);
+
+function renderArchitecture() {
+    const svg = document.getElementById('architecture-svg');
+    svg.innerHTML = '';
+
+    const originCount = Math.max(1, origins.length);
+
+    // Professional layout with more space
+    const nodeWidth = 200;
+    const nodeHeight = 80;
+    const horizontalSpacing = 350;
+    const verticalSpacing = 150;
+
+    // Calculate canvas size based on content
+    const canvasWidth = 1400;
+    const svgHeight = Math.max(800, originCount * verticalSpacing + 200);
+
+    svg.setAttribute('viewBox', `0 0 ${canvasWidth} ${svgHeight}`);
+    svg.setAttribute('width', canvasWidth);
+    svg.setAttribute('height', svgHeight);
+    svg.style.height = svgHeight + 'px';
+    svg.style.width = '100%';
+
+    // Position nodes in clear columns
+    const originX = 100;
+    const localServerX = 100 + horizontalSpacing;
+    const remoteServerX = 100 + horizontalSpacing * 2;
+    const centerY = svgHeight / 2;
+
+    // Draw connection lines to local server
+    const linesGroup = document.createElementNS(SVG_NS, 'g');
+    linesGroup.setAttribute('id', 'connection-lines');
+    svg.appendChild(linesGroup);
+
+    // Draw grid lines for visual reference
+    const gridGroup = document.createElementNS(SVG_NS, 'g');
+    gridGroup.setAttribute('opacity', '0.1');
+    for (let i = 0; i < canvasWidth; i += 100) {
+        const line = document.createElementNS(SVG_NS, 'line');
+        line.setAttribute('x1', i);
+        line.setAttribute('y1', 0);
+        line.setAttribute('x2', i);
+        line.setAttribute('y2', svgHeight);
+        line.setAttribute('stroke', '#858585');
+        line.setAttribute('stroke-width', '1');
+        gridGroup.appendChild(line);
+    }
+    svg.appendChild(gridGroup);
+
+    // Draw origin nodes (left column)
+    origins.forEach((origin, index) => {
+        const nodeId = `origin-${index}`;
+        const defaultY = 100 + (index * verticalSpacing);
+        const pos = nodePositions.get(nodeId) || { x: originX, y: defaultY };
+
+        // Origin node group
+        const g = document.createElementNS(SVG_NS, 'g');
+        g.setAttribute('class', 'node draggable');
+        g.setAttribute('transform', `translate(${pos.x}, ${pos.y})`);
+        g.setAttribute('data-origin', origin.url);
+        g.setAttribute('data-node-id', nodeId);
+        g.style.cursor = 'move';
+        g.onmousedown = (e) => startDrag(e, nodeId);
+
+        // Node background with shadow effect
+        const shadow = document.createElementNS(SVG_NS, 'rect');
+        shadow.setAttribute('width', nodeWidth);
+        shadow.setAttribute('height', nodeHeight);
+        shadow.setAttribute('rx', '8');
+        shadow.setAttribute('fill', '#000000');
+        shadow.setAttribute('opacity', '0.3');
+        shadow.setAttribute('transform', 'translate(4, 4)');
+        g.appendChild(shadow);
+
+        const rect = document.createElementNS(SVG_NS, 'rect');
+        rect.setAttribute('class', 'node-rect');
+        rect.setAttribute('width', nodeWidth);
+        rect.setAttribute('height', nodeHeight);
+        rect.setAttribute('rx', '8');
+        rect.setAttribute('fill', '#1e1e1e');
+        rect.setAttribute('stroke', '#007acc');
+        rect.setAttribute('stroke-width', '3');
+        g.appendChild(rect);
+
+        // Header section
+        const headerRect = document.createElementNS(SVG_NS, 'rect');
+        headerRect.setAttribute('width', nodeWidth);
+        headerRect.setAttribute('height', '30');
+        headerRect.setAttribute('rx', '8');
+        headerRect.setAttribute('fill', '#007acc');
+        headerRect.setAttribute('opacity', '0.2');
+        g.appendChild(headerRect);
+
+        // Title
+        const text1 = document.createElementNS(SVG_NS, 'text');
+        text1.setAttribute('x', '12');
+        text1.setAttribute('y', '20');
+        text1.setAttribute('fill', '#4fc3f7');
+        text1.setAttribute('font-size', '11');
+        text1.setAttribute('font-weight', 'bold');
+        text1.textContent = 'REQUEST ORIGIN';
+        text1.style.pointerEvents = 'none';
+        g.appendChild(text1);
+
+        // Origin label
+        const text2 = document.createElementNS(SVG_NS, 'text');
+        text2.setAttribute('x', '12');
+        text2.setAttribute('y', '48');
+        text2.setAttribute('fill', '#cccccc');
+        text2.setAttribute('font-size', '13');
+        text2.setAttribute('font-weight', '600');
+        text2.textContent = truncateText(origin.label, 25);
+        text2.style.pointerEvents = 'none';
+        g.appendChild(text2);
+
+        // Request count
+        const text3 = document.createElementNS(SVG_NS, 'text');
+        text3.setAttribute('x', '12');
+        text3.setAttribute('y', '66');
+        text3.setAttribute('fill', '#858585');
+        text3.setAttribute('font-size', '10');
+        text3.textContent = `${origin.requestCount} total requests`;
+        text3.style.pointerEvents = 'none';
+        g.appendChild(text3);
+
+        // Status indicator
+        const statusCircle = document.createElementNS(SVG_NS, 'circle');
+        statusCircle.setAttribute('cx', nodeWidth - 12);
+        statusCircle.setAttribute('cy', '20');
+        statusCircle.setAttribute('r', '5');
+        statusCircle.setAttribute('fill', '#4ec9b0');
+        statusCircle.style.pointerEvents = 'none';
+        g.appendChild(statusCircle);
+
+        svg.appendChild(g);
+    });
+
+    // Local Server (center column)
+    const localPos = nodePositions.get('local-server') || { x: localServerX, y: centerY };
+
+    const localG = document.createElementNS(SVG_NS, 'g');
+    localG.setAttribute('class', 'node draggable');
+    localG.setAttribute('transform', `translate(${localPos.x}, ${localPos.y})`);
+    localG.setAttribute('data-node-id', 'local-server');
+    localG.style.cursor = 'move';
+    localG.onmousedown = (e) => startDrag(e, 'local-server');
+
+    // Shadow
+    const localShadow = document.createElementNS(SVG_NS, 'rect');
+    localShadow.setAttribute('width', nodeWidth);
+    localShadow.setAttribute('height', nodeHeight);
+    localShadow.setAttribute('rx', '8');
+    localShadow.setAttribute('fill', '#000000');
+    localShadow.setAttribute('opacity', '0.3');
+    localShadow.setAttribute('transform', 'translate(4, 4)');
+    localG.appendChild(localShadow);
+
+    const localRect = document.createElementNS(SVG_NS, 'rect');
+    localRect.setAttribute('class', 'node-rect');
+    localRect.setAttribute('width', nodeWidth);
+    localRect.setAttribute('height', nodeHeight);
+    localRect.setAttribute('rx', '8');
+    localRect.setAttribute('fill', '#1e1e1e');
+    localRect.setAttribute('stroke', '#4ec9b0');
+    localRect.setAttribute('stroke-width', '3');
+    localG.appendChild(localRect);
+
+    // Header
+    const localHeader = document.createElementNS(SVG_NS, 'rect');
+    localHeader.setAttribute('width', nodeWidth);
+    localHeader.setAttribute('height', '30');
+    localHeader.setAttribute('rx', '8');
+    localHeader.setAttribute('fill', '#4ec9b0');
+    localHeader.setAttribute('opacity', '0.2');
+    localG.appendChild(localHeader);
+
+    const localTitle = document.createElementNS(SVG_NS, 'text');
+    localTitle.setAttribute('x', '12');
+    localTitle.setAttribute('y', '20');
+    localTitle.setAttribute('fill', '#4ec9b0');
+    localTitle.setAttribute('font-size', '11');
+    localTitle.setAttribute('font-weight', 'bold');
+    localTitle.textContent = 'LOCAL DEV SERVER';
+    localTitle.style.pointerEvents = 'none';
+    localG.appendChild(localTitle);
+
+    const localLabel = document.createElementNS(SVG_NS, 'text');
+    localLabel.setAttribute('x', '12');
+    localLabel.setAttribute('y', '48');
+    localLabel.setAttribute('fill', '#cccccc');
+    localLabel.setAttribute('font-size', '13');
+    localLabel.setAttribute('font-weight', '600');
+    localLabel.textContent = `localhost:${window.PORT}`;
+    localLabel.style.pointerEvents = 'none';
+    localG.appendChild(localLabel);
+
+    const localCount = document.createElementNS(SVG_NS, 'text');
+    localCount.setAttribute('x', '12');
+    localCount.setAttribute('y', '66');
+    localCount.setAttribute('fill', '#858585');
+    localCount.setAttribute('font-size', '10');
+    localCount.textContent = `${components.length} components loaded`;
+    localCount.style.pointerEvents = 'none';
+    localG.appendChild(localCount);
+
+    const localStatus = document.createElementNS(SVG_NS, 'circle');
+    localStatus.setAttribute('cx', nodeWidth - 12);
+    localStatus.setAttribute('cy', '20');
+    localStatus.setAttribute('r', '5');
+    localStatus.setAttribute('fill', '#4ec9b0');
+    localStatus.style.pointerEvents = 'none';
+    localG.appendChild(localStatus);
+
+    svg.appendChild(localG);
+
+    // Remote Server (right column)
+    const remotePos = nodePositions.get('remote-server') || { x: remoteServerX, y: centerY };
+    const remoteG = document.createElementNS(SVG_NS, 'g');
+    remoteG.setAttribute('class', 'node draggable');
+    remoteG.setAttribute('transform', `translate(${remotePos.x}, ${remotePos.y})`);
+    remoteG.setAttribute('data-node-id', 'remote-server');
+    remoteG.style.cursor = 'move';
+    remoteG.onmousedown = (e) => startDrag(e, 'remote-server');
+
+    // Shadow
+    const remoteShadow = document.createElementNS(SVG_NS, 'rect');
+    remoteShadow.setAttribute('width', nodeWidth);
+    remoteShadow.setAttribute('height', nodeHeight);
+    remoteShadow.setAttribute('rx', '8');
+    remoteShadow.setAttribute('fill', '#000000');
+    remoteShadow.setAttribute('opacity', '0.3');
+    remoteShadow.setAttribute('transform', 'translate(4, 4)');
+    remoteG.appendChild(remoteShadow);
+
+    const remoteRect = document.createElementNS(SVG_NS, 'rect');
+    remoteRect.setAttribute('class', 'node-rect');
+    remoteRect.setAttribute('width', nodeWidth);
+    remoteRect.setAttribute('height', nodeHeight);
+    remoteRect.setAttribute('rx', '8');
+    remoteRect.setAttribute('fill', '#1e1e1e');
+    remoteRect.setAttribute('stroke', '#dcdcaa');
+    remoteRect.setAttribute('stroke-width', '3');
+    remoteG.appendChild(remoteRect);
+
+    // Header
+    const remoteHeader = document.createElementNS(SVG_NS, 'rect');
+    remoteHeader.setAttribute('width', nodeWidth);
+    remoteHeader.setAttribute('height', '30');
+    remoteHeader.setAttribute('rx', '8');
+    remoteHeader.setAttribute('fill', '#dcdcaa');
+    remoteHeader.setAttribute('opacity', '0.2');
+    remoteG.appendChild(remoteHeader);
+
+    const remoteTitle = document.createElementNS(SVG_NS, 'text');
+    remoteTitle.setAttribute('x', '12');
+    remoteTitle.setAttribute('y', '20');
+    remoteTitle.setAttribute('fill', '#dcdcaa');
+    remoteTitle.setAttribute('font-size', '11');
+    remoteTitle.setAttribute('font-weight', 'bold');
+    remoteTitle.textContent = 'CLOUD SERVER';
+    remoteTitle.style.pointerEvents = 'none';
+    remoteG.appendChild(remoteTitle);
+
+    const remoteLabel = document.createElementNS(SVG_NS, 'text');
+    remoteLabel.setAttribute('x', '12');
+    remoteLabel.setAttribute('y', '48');
+    remoteLabel.setAttribute('fill', '#cccccc');
+    remoteLabel.setAttribute('font-size', '13');
+    remoteLabel.setAttribute('font-weight', '600');
+    remoteLabel.textContent = 'cloud.myop.dev';
+    remoteLabel.style.pointerEvents = 'none';
+    remoteG.appendChild(remoteLabel);
+
+    const remoteInfo = document.createElementNS(SVG_NS, 'text');
+    remoteInfo.setAttribute('x', '12');
+    remoteInfo.setAttribute('y', '66');
+    remoteInfo.setAttribute('fill', '#858585');
+    remoteInfo.setAttribute('font-size', '10');
+    remoteInfo.textContent = 'Production environment';
+    remoteInfo.style.pointerEvents = 'none';
+    remoteG.appendChild(remoteInfo);
+
+    const remoteStatus = document.createElementNS(SVG_NS, 'circle');
+    remoteStatus.setAttribute('cx', nodeWidth - 12);
+    remoteStatus.setAttribute('cy', '20');
+    remoteStatus.setAttribute('r', '5');
+    remoteStatus.setAttribute('fill', '#dcdcaa');
+    remoteStatus.style.pointerEvents = 'none';
+    remoteG.appendChild(remoteStatus);
+
+    svg.appendChild(remoteG);
+
+    // Redraw all request lines
+    redrawRequestLines();
+}
+
+function redrawRequestLines() {
+    const svg = document.getElementById('architecture-svg');
+    const linesGroup = document.getElementById('connection-lines');
+    if (!linesGroup) return;
+
+    // Clear existing request lines and labels
+    svg.querySelectorAll('.request-line, .request-label, .connection-line').forEach(el => el.remove());
+
+    const svgHeight = parseInt(svg.style.height) || 800;
+    const centerY = svgHeight / 2;
+    const localServerX = 100 + 350;
+    const remoteServerX = 100 + 700;
+
+    // Get actual node positions
+    const localServerPos = nodePositions.get('local-server') || { x: localServerX, y: centerY };
+    const remoteServerPos = nodePositions.get('remote-server') || { x: remoteServerX, y: centerY };
+
+    // Draw static connection from local to remote using actual positions
+    const lineToRemote = document.createElementNS(SVG_NS, 'path');
+    lineToRemote.setAttribute('class', 'connection-line');
+    const connStartX = localServerPos.x + 200;
+    const connStartY = localServerPos.y + 40;
+    const connEndX = remoteServerPos.x;
+    const connEndY = remoteServerPos.y + 40;
+    const connMidX = (connStartX + connEndX) / 2;
+    lineToRemote.setAttribute('d', `M ${connStartX} ${connStartY} C ${connMidX} ${connStartY}, ${connMidX} ${connEndY}, ${connEndX} ${connEndY}`);
+    lineToRemote.setAttribute('stroke', '#3e3e42');
+    lineToRemote.setAttribute('stroke-width', '1');
+    lineToRemote.setAttribute('stroke-dasharray', '5 5');
+    lineToRemote.setAttribute('fill', 'none');
+    lineToRemote.setAttribute('opacity', '0.5');
+    svg.insertBefore(lineToRemote, linesGroup.nextSibling);
+
+    // Group component lines by origin to calculate proper offsets
+    const linesByOrigin = new Map();
+    componentLines.forEach((compData, key) => {
+        const origin = compData.origin;
+        if (!linesByOrigin.has(origin)) {
+            linesByOrigin.set(origin, []);
+        }
+        linesByOrigin.get(origin).push({ key, compData });
+    });
+
+    // Draw lines for each component
+    componentLines.forEach((compData, key) => {
+        const originIndex = origins.findIndex(o => o.url === compData.origin);
+        if (originIndex === -1) return;
+
+        const nodeId = `origin-${originIndex}`;
+        const originPos = nodePositions.get(nodeId) || getDefaultPosition(nodeId);
+
+        const color = compData.servedLocally ? '#4ec9b0' : '#dcdcaa';
+        const componentId = compData.componentId;
+
+        // Calculate vertical offset for this line within its origin
+        const originLines = linesByOrigin.get(compData.origin);
+        const lineIndexInOrigin = originLines.findIndex(l => l.key === key);
+        const totalLinesForOrigin = originLines.length;
+
+        // Center the lines vertically around the origin's center point
+        const lineSpacing = 25; // Increased from 12 to 25 for better separation
+        const totalHeight = (totalLinesForOrigin - 1) * lineSpacing;
+        const startOffset = -totalHeight / 2;
+        const yOffset = startOffset + (lineIndexInOrigin * lineSpacing);
+
+        // Line from origin to local server (connect from right edge of origin to left edge of local)
+        const line1 = document.createElementNS(SVG_NS, 'path');
+        line1.setAttribute('class', 'request-line');
+        const startX = originPos.x + 200; // Right edge of origin node
+        const startY = originPos.y + 40 + yOffset; // Middle of node + offset
+        const endX = localServerPos.x; // Left edge of local server
+        const endY = localServerPos.y + 40 + yOffset; // Middle of node + offset
+
+        // Create curved path for professional look
+        const midX = (startX + endX) / 2;
+        line1.setAttribute('d', `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`);
+        line1.setAttribute('stroke', color);
+        line1.setAttribute('stroke-width', '2.5');
+        line1.setAttribute('fill', 'none');
+        line1.setAttribute('opacity', '0.8');
+        svg.insertBefore(line1, linesGroup.nextSibling);
+
+        // Component label on the line
+        const labelMidX = (startX + endX) / 2;
+        const labelMidY = startY;
+
+        const labelKey = `${key}-1`;
+        const isExpanded = expandedLabels.has(labelKey);
+        const labelText = isExpanded
+            ? (compData.count > 1 ? `${componentId} (${compData.count})` : componentId)
+            : (compData.count > 1 ? `${truncateText(componentId, 8)} (${compData.count})` : truncateText(componentId, 10));
+        const labelWidth = Math.max(80, labelText.length * 6.5);
+
+        const labelGroup = document.createElementNS(SVG_NS, 'g');
+        labelGroup.setAttribute('class', 'request-label');
+        labelGroup.style.cursor = 'pointer';
+        labelGroup.onclick = (e) => {
+            e.stopPropagation();
+            if (expandedLabels.has(labelKey)) {
+                expandedLabels.delete(labelKey);
+            } else {
+                expandedLabels.add(labelKey);
+            }
+            redrawRequestLines();
+        };
+
+        const labelBg = document.createElementNS(SVG_NS, 'rect');
+        labelBg.setAttribute('x', labelMidX - labelWidth / 2);
+        labelBg.setAttribute('y', labelMidY - 12);
+        labelBg.setAttribute('width', labelWidth);
+        labelBg.setAttribute('height', '20');
+        labelBg.setAttribute('rx', '3');
+        labelBg.setAttribute('fill', '#1e1e1e');
+        labelBg.setAttribute('fill-opacity', '0.95');
+        labelBg.setAttribute('stroke', color);
+        labelBg.setAttribute('stroke-width', '1.5');
+        labelGroup.appendChild(labelBg);
+
+        const label = document.createElementNS(SVG_NS, 'text');
+        label.setAttribute('x', labelMidX);
+        label.setAttribute('y', labelMidY + 3);
+        label.setAttribute('text-anchor', 'middle');
+        label.setAttribute('fill', '#cccccc');
+        label.setAttribute('font-size', '10');
+        label.setAttribute('font-weight', '600');
+        label.style.pointerEvents = 'none';
+        label.textContent = labelText;
+        labelGroup.appendChild(label);
+
+        svg.appendChild(labelGroup);
+
+        // If proxied to remote, draw line to remote
+        if (!compData.servedLocally) {
+            const line2 = document.createElementNS(SVG_NS, 'path');
+            line2.setAttribute('class', 'request-line');
+
+            const start2X = localServerPos.x + 200; // Right edge of local server
+            const start2Y = localServerPos.y + 40 + yOffset;
+            const end2X = remoteServerPos.x; // Left edge of remote server
+            const end2Y = remoteServerPos.y + 40 + yOffset;
+
+            const mid2X = (start2X + end2X) / 2;
+            line2.setAttribute('d', `M ${start2X} ${start2Y} C ${mid2X} ${start2Y}, ${mid2X} ${end2Y}, ${end2X} ${end2Y}`);
+            line2.setAttribute('stroke', color);
+            line2.setAttribute('stroke-width', '2.5');
+            line2.setAttribute('fill', 'none');
+            line2.setAttribute('opacity', '0.8');
+            svg.insertBefore(line2, linesGroup.nextSibling);
+
+            // Label on remote line
+            const labelMidX2 = (start2X + end2X) / 2;
+            const labelMidY2 = start2Y;
+
+            const labelKey2 = `${key}-2`;
+            const isExpanded2 = expandedLabels.has(labelKey2);
+            const labelText2 = isExpanded2
+                ? (compData.count > 1 ? `${componentId} (${compData.count})` : componentId)
+                : (compData.count > 1 ? `${truncateText(componentId, 8)} (${compData.count})` : truncateText(componentId, 10));
+            const labelWidth2 = Math.max(80, labelText2.length * 6.5);
+
+            const labelGroup2 = document.createElementNS(SVG_NS, 'g');
+            labelGroup2.setAttribute('class', 'request-label');
+            labelGroup2.style.cursor = 'pointer';
+            labelGroup2.onclick = (e) => {
+                e.stopPropagation();
+                if (expandedLabels.has(labelKey2)) {
+                    expandedLabels.delete(labelKey2);
+                } else {
+                    expandedLabels.add(labelKey2);
+                }
+                redrawRequestLines();
+            };
+
+            const labelBg2 = document.createElementNS(SVG_NS, 'rect');
+            labelBg2.setAttribute('x', labelMidX2 - labelWidth2 / 2);
+            labelBg2.setAttribute('y', labelMidY2 - 12);
+            labelBg2.setAttribute('width', labelWidth2);
+            labelBg2.setAttribute('height', '20');
+            labelBg2.setAttribute('rx', '3');
+            labelBg2.setAttribute('fill', '#1e1e1e');
+            labelBg2.setAttribute('fill-opacity', '0.95');
+            labelBg2.setAttribute('stroke', color);
+            labelBg2.setAttribute('stroke-width', '1.5');
+            labelGroup2.appendChild(labelBg2);
+
+            const label2 = document.createElementNS(SVG_NS, 'text');
+            label2.setAttribute('x', labelMidX2);
+            label2.setAttribute('y', labelMidY2 + 3);
+            label2.setAttribute('text-anchor', 'middle');
+            label2.setAttribute('fill', '#cccccc');
+            label2.setAttribute('font-size', '10');
+            label2.setAttribute('font-weight', '600');
+            label2.style.pointerEvents = 'none';
+            label2.textContent = labelText2;
+            labelGroup2.appendChild(label2);
+
+            svg.appendChild(labelGroup2);
+        }
+    });
+}
+
+function truncateText(text, maxLen) {
+    return text.length > maxLen ? text.substring(0, maxLen - 3) + '...' : text;
+}
+
+function updateComponentsList() {
+    const list = document.getElementById('components');
+
+    if (components.length === 0) {
+        list.innerHTML = '<div class="empty-state">No components registered</div>';
+    } else {
+        list.innerHTML = components.map(comp => {
+            const displayName = comp.name ? `<span style="color: #4fc3f7; font-weight: 600;">${comp.name}</span>` : '';
+            return `<li class="component-item">
+                <a href="/view/${comp.id}/">${comp.id}</a>
+                ${displayName ? `<div style="margin-top: 2px;">${displayName}</div>` : ''}
+                <div class="component-path">${comp.path}</div>
+            </li>`;
+        }).join('');
+    }
+}
+
+function updateActivityLog() {
+    const log = document.getElementById('activity-log');
+
+    if (requestLog.length === 0) {
+        log.innerHTML = '<div class="empty-state">No activity logged</div>';
+    } else {
+        const recentLog = requestLog.slice(-20).reverse();
+        log.innerHTML = recentLog.map(entry => {
+            const time = new Date(entry.timestamp).toLocaleTimeString();
+            const iconClass = entry.servedLocally ? 'log-icon success' : 'log-icon warning';
+            const icon = entry.servedLocally ? '●' : '◆';
+            const status = entry.servedLocally ? 'LOCAL' : 'PROXY';
+
+            return `
+                <div class="log-entry">
+                    <div class="${iconClass}">${icon}</div>
+                    <div class="log-content">
+                        <div class="log-component">${entry.componentId}</div>
+                        <div class="log-status">[${status}] from <span class="log-origin">${entry.originLabel || 'Unknown'}</span></div>
+                        <div class="log-time">${time}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+}
+
+function updateStats() {
+    totalRequests = requestLog.length;
+    localRequests = requestLog.filter(r => r.servedLocally).length;
+    proxiedRequests = requestLog.filter(r => !r.servedLocally).length;
+
+    document.getElementById('total-requests').textContent = totalRequests;
+    document.getElementById('local-requests').textContent = localRequests;
+    document.getElementById('proxied-requests').textContent = proxiedRequests;
+    document.getElementById('origins-count').textContent = origins.length;
+}
+
+function handleNewRequest(data) {
+    requestLog.push(data);
+    updateActivityLog();
+    updateStats();
+
+    // Track component requests
+    const key = `${data.origin}|${data.componentId}`;
+    if (componentLines.has(key)) {
+        // Increment count for existing component
+        componentLines.get(key).count++;
+    } else {
+        // Add new component line
+        componentLines.set(key, {
+            origin: data.origin,
+            componentId: data.componentId,
+            servedLocally: data.servedLocally,
+            count: 1
+        });
+    }
+
+    // Redraw lines
+    redrawRequestLines();
+}
+
+// Initial render
+renderArchitecture();
+updateComponentsList();
+updateActivityLog();
+updateStats();
+updateViewBox();