Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
9.7 kB · 380 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381// 2D Canvas Process Tree Visualization// Dense, responsive, real-time process tree view
(function() { 'use strict';
const isVSCode = typeof acquireVsCodeApi === 'function';
// Color schemes const colorSchemes = { dark: { bg: '#181318', fg: '#fff', fgMuted: '#666', accent: '#ff69b4', online: '#0f0', line: 'rgba(255, 255, 255, 0.15)', nodeStroke: 'rgba(255, 255, 255, 0.3)', categories: { editor: '#b05070', tui: '#ff5294', bridge: '#6c757f', db: '#ffb84b', proxy: '#6bbd9f', ai: '#ff95db', shell: '#6c77ff', dev: '#6c757f', ide: '#6bbd9f', lsp: '#889098', kernel: '#889fff' } }, light: { bg: '#fcf7c5', fg: '#281e5a', fgMuted: '#806060', accent: '#006400', online: '#006400', line: 'rgba(0, 0, 0, 0.15)', nodeStroke: 'rgba(0, 0, 0, 0.3)', categories: { editor: '#804050', tui: '#d02070', bridge: '#202530', db: '#a08020', proxy: '#206050', ai: '#c05090', shell: '#004080', dev: '#202530', ide: '#206050', lsp: '#606068', kernel: '#387adf' } } };
let currentTheme = document.body.dataset.theme || 'dark'; let scheme = colorSchemes[currentTheme];
// Canvas setup const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let width, height; let dpr = window.devicePixelRatio || 1;
function resizeCanvas() { width = canvas.clientWidth; height = canvas.clientHeight; canvas.width = width * dpr; canvas.height = height * dpr; ctx.scale(dpr, dpr); } resizeCanvas(); window.addEventListener('resize', resizeCanvas);
// View transform (pan & zoom) let offsetX = 0, offsetY = 0, scale = 1; let isDragging = false, dragStartX = 0, dragStartY = 0;
// Process tree data let processTree = []; let nodeMap = new Map(); // pid -> node info
// Layout constants const NODE_RADIUS = 6; const NODE_SPACING_X = 180; const NODE_SPACING_Y = 30; const INDENT = 20;
// Build tree structure from flat process list function buildTree(processes) { if (!processes || !processes.length) return [];
const byPid = new Map(); const children = new Map();
processes.forEach(p => { byPid.set(String(p.pid), p); children.set(String(p.pid), []); });
let roots = []; processes.forEach(p => { const ppid = String(p.ppid); if (ppid && byPid.has(ppid) && ppid !== String(p.pid)) { children.get(ppid).push(p); } else { roots.push(p); } });
// Layout tree with coordinates nodeMap.clear(); let yOffset = 20;
function layoutNode(proc, depth, parentY) { const pid = String(proc.pid); const x = depth * INDENT; const y = yOffset; yOffset += NODE_SPACING_Y;
const node = { pid, name: proc.name || proc.command || `PID ${pid}`, cpu: proc.cpu || 0, mem: proc.mem || 0, category: proc.category || 'shell', x, y, depth, parentY, children: [] };
nodeMap.set(pid, node);
const kids = children.get(pid) || []; kids.forEach(child => { const childNode = layoutNode(child, depth + 1, y); if (childNode) node.children.push(childNode); });
return node; }
return roots.map(r => layoutNode(r, 0, null)).filter(Boolean); }
// Draw the tree function draw() { ctx.clearRect(0, 0, width, height);
ctx.save(); ctx.translate(offsetX, offsetY); ctx.scale(scale, scale);
// Draw connections first nodeMap.forEach(node => { if (node.parentY !== null) { ctx.strokeStyle = scheme.line; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(node.x, node.y); ctx.lineTo(node.x - INDENT, node.parentY); ctx.stroke(); } });
// Draw nodes nodeMap.forEach(node => { const color = scheme.categories[node.category] || scheme.categories.shell;
// Node circle ctx.fillStyle = color; ctx.strokeStyle = scheme.nodeStroke; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(node.x, node.y, NODE_RADIUS, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
// Node label ctx.fillStyle = scheme.fg; ctx.font = '11px monospace'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.fillText(node.name, node.x + NODE_RADIUS + 6, node.y);
// CPU/MEM info if (node.cpu > 0.1 || node.mem > 0) { ctx.fillStyle = scheme.fgMuted; ctx.font = '9px monospace'; const info = `${node.cpu.toFixed(1)}% • ${node.mem.toFixed(0)}MB`; ctx.fillText(info, node.x + NODE_RADIUS + 6, node.y + 11); } });
ctx.restore(); }
// Mouse interaction let hoveredNode = null;
function screenToWorld(screenX, screenY) { return { x: (screenX - offsetX) / scale, y: (screenY - offsetY) / scale }; }
function findNodeAt(worldX, worldY) { for (const [pid, node] of nodeMap) { const dx = worldX - node.x; const dy = worldY - node.y; if (Math.sqrt(dx * dx + dy * dy) <= NODE_RADIUS + 2) { return node; } } return null; }
canvas.addEventListener('mousedown', e => { isDragging = true; dragStartX = e.clientX - offsetX; dragStartY = e.clientY - offsetY; canvas.style.cursor = 'grabbing'; });
canvas.addEventListener('mousemove', e => { const rect = canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top;
if (isDragging) { offsetX = e.clientX - dragStartX; offsetY = e.clientY - dragStartY; draw(); } else { const world = screenToWorld(mouseX, mouseY); const node = findNodeAt(world.x, world.y);
if (node !== hoveredNode) { hoveredNode = node; if (node) { showTooltip(e.clientX, e.clientY, node); canvas.style.cursor = 'pointer'; } else { hideTooltip(); canvas.style.cursor = 'default'; } } } });
canvas.addEventListener('mouseup', () => { isDragging = false; canvas.style.cursor = 'default'; });
canvas.addEventListener('mouseleave', () => { isDragging = false; hideTooltip(); canvas.style.cursor = 'default'; });
canvas.addEventListener('wheel', e => { e.preventDefault(); const delta = e.deltaY > 0 ? 0.9 : 1.1; const newScale = Math.max(0.1, Math.min(5, scale * delta));
const rect = canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top;
offsetX = mouseX - (mouseX - offsetX) * (newScale / scale); offsetY = mouseY - (mouseY - offsetY) * (newScale / scale); scale = newScale;
draw(); });
// Tooltip const tooltip = document.getElementById('tooltip');
function showTooltip(x, y, node) { tooltip.style.display = 'block'; tooltip.style.left = (x + 10) + 'px'; tooltip.style.top = (y + 10) + 'px'; tooltip.textContent = `${node.name}\nPID: ${node.pid}\nCPU: ${node.cpu.toFixed(1)}%\nMem: ${node.mem.toFixed(0)} MB`; }
function hideTooltip() { tooltip.style.display = 'none'; }
// Update from WebSocket data function updateViz(processData) { if (!processData?.interesting) return;
const processes = processData.interesting; document.getElementById('process-count').textContent = `${processes.length} processes`;
processTree = buildTree(processes); draw(); }
// WebSocket connection let ws; function connectWS() { const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'; const port = location.port || (protocol === 'wss:' ? '443' : '80'); const wsUrl = `${protocol}//${location.hostname}:${port}/process-tree-ws`;
try { ws = new WebSocket(wsUrl);
ws.onopen = () => { console.log('Connected to process tree'); document.getElementById('status-dot').classList.add('online'); };
ws.onclose = () => { document.getElementById('status-dot').classList.remove('online'); setTimeout(connectWS, 2000); };
ws.onmessage = (e) => { try { const data = JSON.parse(e.data); if (data.system) { document.getElementById('uptime').textContent = data.system.uptime?.formatted || '—'; document.getElementById('cpu-info').textContent = `${data.system.cpus || 0} CPUs`; const m = data.system.memory; document.getElementById('mem-info').textContent = `${m?.used || 0} / ${m?.total || 0} MB`; } updateViz(data.processes); } catch (err) { console.error('Parse error:', err); } }; } catch (err) { console.error('WebSocket error:', err); setTimeout(connectWS, 2000); } }
// Theme toggle function toggleTheme() { currentTheme = currentTheme === 'dark' ? 'light' : 'dark'; scheme = colorSchemes[currentTheme]; document.body.dataset.theme = currentTheme; draw(); }
// Reset view function resetView() { offsetX = 0; offsetY = 0; scale = 1; draw(); }
// Export API window.ProcessTree2D = { toggleTheme, resetView, updateViz };
// Start connectWS();
// Animation loop for smooth updates function animate() { // Could add animation logic here requestAnimationFrame(animate); } animate();
})();