systemlens 1.0.0

package/web/app.js

@@ -0,0 +1,352 @@
+// ─── SystemLens Web Dashboard ────────────────────────────────────
+// Real-time WebSocket client that renders system analysis beautifully
+
+(() => {
+    'use strict';
+
+    // ─── State ─────────────────────────────────────────────
+    let ws = null;
+    let reconnectTimer = null;
+    let cpuHistory = [];
+    let memHistory = [];
+    let currentTab = 'cpu';
+    let latestData = null;
+    const MAX_SPARKLINE = 30;
+
+    // ─── DOM References ────────────────────────────────────
+    const $ = (id) => document.getElementById(id);
+
+    // ─── WebSocket Connection ──────────────────────────────
+    function connect() {
+        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${location.host}`);
+
+        ws.onopen = () => {
+            updateConnectionStatus('connected');
+            if (reconnectTimer) {
+                clearTimeout(reconnectTimer);
+                reconnectTimer = null;
+            }
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                latestData = data;
+                render(data);
+            } catch (e) {
+                console.error('Parse error:', e);
+            }
+        };
+
+        ws.onclose = () => {
+            updateConnectionStatus('disconnected');
+            reconnectTimer = setTimeout(connect, 3000);
+        };
+
+        ws.onerror = () => {
+            updateConnectionStatus('disconnected');
+        };
+    }
+
+    function updateConnectionStatus(status) {
+        const dot = document.querySelector('.status-dot');
+        const text = document.querySelector('.status-text');
+
+        dot.className = `status-dot ${status}`;
+        text.textContent = status === 'connected' ? 'Live' :
+            status === 'disconnected' ? 'Reconnecting...' : 'Connecting...';
+    }
+
+    // ─── Main Render Function ─────────────────────────────
+    function render(data) {
+        const { analysis, explanation, suggestions, snapshot } = data;
+
+        updateTimestamp();
+        renderHealth(explanation.health, explanation.headline);
+        renderMetrics(analysis, snapshot);
+        renderExplanation(explanation.explanation);
+        renderCauseEffect(explanation.causeAndEffect);
+        renderProcesses(analysis.rawProcesses);
+        renderDevInsights(explanation.devInsights);
+        renderPatterns(explanation.patternNarrative);
+        renderSuggestions(suggestions);
+        updateSparklines(analysis);
+        updateDataPoints();
+    }
+
+    // ─── Timestamp ─────────────────────────────────────────
+    function updateTimestamp() {
+        $('last-update').textContent = new Date().toLocaleTimeString();
+    }
+
+    // ─── Health Banner ─────────────────────────────────────
+    function renderHealth(health, headline) {
+        const banner = $('health-banner');
+        banner.className = `health-banner ${health.status}`;
+        $('health-emoji').textContent = health.emoji;
+        $('health-label').textContent = health.label;
+        $('health-desc').textContent = health.description;
+        $('health-headline').textContent = headline;
+    }
+
+    // ─── Metrics Cards ─────────────────────────────────────
+    function renderMetrics(analysis, snapshot) {
+        const { cpu, memory, process: pa } = analysis;
+
+        // CPU
+        updateMetricCard('cpu', cpu.overall, '%', {
+            details: `User: ${cpu.details.user}% │ System: ${cpu.details.system}% │ Idle: ${cpu.details.idle}%`,
+        });
+
+        // Memory
+        updateMetricCard('memory', memory.usedPercent, '%', {
+            details: `Used: ${memory.details.formatted.used} │ Free: ${memory.details.formatted.free} │ Total: ${memory.details.formatted.total}`,
+        });
+
+        // Disk
+        if (snapshot?.disk?.filesystems?.length > 0) {
+            const rootFs = snapshot.disk.filesystems.find(f => f.mount === '/') || snapshot.disk.filesystems[0];
+            if (rootFs) {
+                updateMetricCard('disk', rootFs.usedPercent, '%', {
+                    details: `Used: ${rootFs.formatted.used} │ Free: ${rootFs.formatted.available} │ Total: ${rootFs.formatted.size}`,
+                });
+            }
+        }
+
+        // Processes
+        const procCard = $('process-value');
+        procCard.textContent = snapshot?.processes?.total || '--';
+        procCard.className = 'metric-value';
+        $('process-details').querySelector('span').textContent =
+            `Running: ${snapshot?.processes?.running || '--'} │ Sleeping: ${snapshot?.processes?.sleeping || '--'}`;
+
+        // Hog tags
+        const cpuHogsTag = $('cpu-hogs-tag');
+        const memHogsTag = $('mem-hogs-tag');
+        cpuHogsTag.textContent = `${pa.summary.cpuHogCount} CPU Hogs`;
+        cpuHogsTag.className = pa.summary.cpuHogCount > 0 ? 'sub-tag alert' : 'sub-tag';
+        memHogsTag.textContent = `${pa.summary.memHogCount} Mem Hogs`;
+        memHogsTag.className = pa.summary.memHogCount > 0 ? 'sub-tag alert' : 'sub-tag';
+    }
+
+    function updateMetricCard(id, value, suffix, opts) {
+        const valueEl = $(`${id}-value`);
+        const barEl = $(`${id}-bar`);
+        const detailsEl = $(`${id}-details`);
+
+        // Update value
+        valueEl.textContent = `${value}${suffix}`;
+
+        // Color class
+        let colorClass = 'green';
+        if (value >= 80) colorClass = 'red';
+        else if (value >= 60) colorClass = 'yellow';
+        else if (value >= 40) colorClass = 'orange';
+        valueEl.className = `metric-value ${colorClass}`;
+
+        // Bar
+        barEl.style.width = `${value}%`;
+        barEl.className = `metric-bar${value >= 80 ? ' critical' : value >= 60 ? ' warning' : ''}`;
+
+        // Details
+        if (opts.details && detailsEl) {
+            detailsEl.querySelector('span').textContent = opts.details;
+        }
+    }
+
+    // ─── Sparklines ────────────────────────────────────────
+    function updateSparklines(analysis) {
+        cpuHistory.push(analysis.cpu.overall);
+        memHistory.push(analysis.memory.usedPercent);
+
+        if (cpuHistory.length > MAX_SPARKLINE) cpuHistory.shift();
+        if (memHistory.length > MAX_SPARKLINE) memHistory.shift();
+
+        renderSparkline('cpu-sparkline', cpuHistory);
+        renderSparkline('memory-sparkline', memHistory);
+    }
+
+    function renderSparkline(containerId, data) {
+        const container = $(containerId);
+        if (!container) return;
+
+        const max = Math.max(...data, 1);
+
+        container.innerHTML = data.map(v => {
+            const height = Math.max(2, (v / 100) * 28);
+            const color = v >= 80 ? 'var(--red)' : v >= 60 ? 'var(--yellow)' : v >= 40 ? 'var(--cyan)' : 'var(--green)';
+            return `<div class="sparkline-bar" style="height:${height}px; background:${color};"></div>`;
+        }).join('');
+    }
+
+    // ─── Explanation ───────────────────────────────────────
+    function renderExplanation(text) {
+        if (!text) return;
+        const body = $('explanation-body');
+        const paragraphs = text.split('\n\n');
+        body.innerHTML = paragraphs.map(p => `<p>${escapeHtml(p)}</p>`).join('');
+    }
+
+    // ─── Cause & Effect ───────────────────────────────────
+    function renderCauseEffect(chains) {
+        const panel = $('cause-panel');
+        const body = $('cause-body');
+
+        if (!chains || chains.length === 0) {
+            panel.style.display = 'none';
+            return;
+        }
+
+        panel.style.display = '';
+        body.innerHTML = chains.map(chain => `
+      <div class="cause-chain">
+        <div class="cause-label cause">${chain.emoji} Cause</div>
+        <div class="cause-text">${escapeHtml(chain.cause)}</div>
+        <div class="cause-label effect">→ Effect</div>
+        <div class="cause-text">${escapeHtml(chain.effect)}</div>
+        <div class="cause-label consequence">→ Consequence</div>
+        <div class="cause-text">${escapeHtml(chain.consequence)}</div>
+      </div>
+    `).join('');
+    }
+
+    // ─── Processes Table ──────────────────────────────────
+    function renderProcesses(rawProcesses) {
+        if (!rawProcesses) return;
+
+        const procs = currentTab === 'cpu' ? rawProcesses.topByCpu : rawProcesses.topByMemory;
+        const table = $('process-table');
+
+        let html = `
+      <div class="process-row header">
+        <span>PID</span>
+        <span>Name</span>
+        <span>Category</span>
+        <span>CPU%</span>
+        <span>MEM%</span>
+        <span>Memory</span>
+      </div>
+    `;
+
+        for (const proc of (procs || []).slice(0, 10)) {
+            const cpuColor = proc.cpu >= 30 ? 'color-red' : proc.cpu >= 15 ? 'color-yellow' : '';
+            const memColor = proc.mem >= 20 ? 'color-red' : proc.mem >= 10 ? 'color-yellow' : '';
+
+            html += `
+        <div class="process-row">
+          <span class="process-pid">${proc.pid}</span>
+          <span class="process-name" title="${escapeHtml(proc.command || proc.name)}">${escapeHtml(proc.name)}</span>
+          <span class="process-category">${proc.classification?.label || '❓ Other'}</span>
+          <span class="process-cpu ${cpuColor}">${proc.cpu}%</span>
+          <span class="process-mem ${memColor}">${proc.mem}%</span>
+          <span class="process-mem-size">${proc.memRssFormatted || ''}</span>
+        </div>
+      `;
+        }
+
+        table.innerHTML = html;
+    }
+
+    // ─── Dev Insights ─────────────────────────────────────
+    function renderDevInsights(insights) {
+        const panel = $('dev-panel');
+        const body = $('dev-body');
+
+        if (!insights || insights.length === 0) {
+            panel.style.display = 'none';
+            return;
+        }
+
+        panel.style.display = '';
+        body.innerHTML = insights.map(i => `
+      <div class="dev-insight">
+        <span class="dev-insight-emoji">${i.emoji}</span>
+        <span class="dev-insight-text">${escapeHtml(i.insight)}</span>
+      </div>
+    `).join('');
+    }
+
+    // ─── Patterns ─────────────────────────────────────────
+    function renderPatterns(patterns) {
+        const panel = $('patterns-panel');
+        const body = $('patterns-body');
+
+        if (!patterns || patterns.length === 0) {
+            panel.style.display = 'none';
+            return;
+        }
+
+        panel.style.display = '';
+        body.innerHTML = patterns.map(p => `
+      <div class="pattern-item">${escapeHtml(p)}</div>
+    `).join('');
+    }
+
+    // ─── Suggestions ──────────────────────────────────────
+    function renderSuggestions(suggestions) {
+        const body = $('suggestions-body');
+
+        if (!suggestions || suggestions.length === 0) {
+            body.innerHTML = `
+        <div class="no-suggestions">
+          <span class="no-suggestions-emoji">✨</span>
+          No action needed — system is running well!
+        </div>
+      `;
+            return;
+        }
+
+        body.innerHTML = suggestions.map((s, i) => `
+      <div class="suggestion-item">
+        <div class="suggestion-header">
+          <span class="suggestion-emoji">${s.emoji}</span>
+          <span class="suggestion-action">${i + 1}. ${escapeHtml(s.action)}</span>
+          <span class="suggestion-impact ${s.impact}">${s.impact}</span>
+        </div>
+        <div class="suggestion-reason">${escapeHtml(s.reason)}</div>
+        <div class="suggestion-meta">
+          <span>Category: ${escapeHtml(s.category)}</span>
+        </div>
+      </div>
+    `).join('');
+    }
+
+    // ─── Data Points Counter ──────────────────────────────
+    function updateDataPoints() {
+        $('data-points').textContent = `${cpuHistory.length} data points`;
+    }
+
+    // ─── Tab Switching ────────────────────────────────────
+    function initTabs() {
+        const tabs = document.querySelectorAll('#process-tabs .tab');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                tabs.forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                currentTab = tab.dataset.tab;
+                if (latestData) renderProcesses(latestData.analysis.rawProcesses);
+            });
+        });
+    }
+
+    // ─── Utility ──────────────────────────────────────────
+    function escapeHtml(text) {
+        if (!text) return '';
+        const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+        return String(text).replace(/[&<>"']/g, m => map[m]);
+    }
+
+    // ─── Init ─────────────────────────────────────────────
+    function init() {
+        initTabs();
+        connect();
+    }
+
+    // Start when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

package/web/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SystemLens — Intelligent System Explainer</title>
+  <meta name="description"
+    content="An intelligent system explainer that converts raw metrics into human-readable insights. Understand why your system is slow, not just what the numbers are.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <!-- ─── Background Glow Effects ─── -->
+  <div class="bg-glow bg-glow-1"></div>
+  <div class="bg-glow bg-glow-2"></div>
+  <div class="bg-glow bg-glow-3"></div>
+
+  <!-- ─── Header ─── -->
+  <header class="header" id="header">
+    <div class="header-left">
+      <div class="logo">
+        <span class="logo-icon">🔬</span>
+        <h1 class="logo-text">System<span class="logo-accent">Lens</span></h1>
+      </div>
+      <span class="header-tagline">Intelligent System Explainer — CreatedBYNJ5.0</span>
+    </div>
+    <div class="header-right">
+      <div class="connection-status" id="connection-status">
+        <span class="status-dot"></span>
+        <span class="status-text">Connecting...</span>
+      </div>
+      <div class="last-update" id="last-update">--:--:--</div>
+    </div>
+  </header>
+
+  <!-- ─── Health Banner ─── -->
+  <section class="health-banner" id="health-banner">
+    <div class="health-content">
+      <span class="health-emoji" id="health-emoji">⏳</span>
+      <div class="health-text">
+        <h2 class="health-label" id="health-label">Analyzing System...</h2>
+        <p class="health-desc" id="health-desc">Collecting initial data. Please wait a moment.</p>
+      </div>
+    </div>
+    <div class="health-headline" id="health-headline"></div>
+  </section>
+
+  <!-- ─── Main Grid ─── -->
+  <main class="dashboard">
+    <!-- ─── Metrics Cards ─── -->
+    <section class="metrics-row" id="metrics-section">
+      <!-- CPU Card -->
+      <div class="metric-card" id="cpu-card">
+        <div class="metric-header">
+          <span class="metric-icon">⚡</span>
+          <span class="metric-title">CPU Usage</span>
+        </div>
+        <div class="metric-value" id="cpu-value">--%</div>
+        <div class="metric-bar-container">
+          <div class="metric-bar" id="cpu-bar" style="width: 0%"></div>
+        </div>
+        <div class="metric-details" id="cpu-details">
+          <span>User: --% │ System: --% │ Idle: --%</span>
+        </div>
+        <div class="metric-sparkline" id="cpu-sparkline"></div>
+      </div>
+
+      <!-- Memory Card -->
+      <div class="metric-card" id="memory-card">
+        <div class="metric-header">
+          <span class="metric-icon">🧠</span>
+          <span class="metric-title">Memory</span>
+        </div>
+        <div class="metric-value" id="memory-value">--%</div>
+        <div class="metric-bar-container">
+          <div class="metric-bar" id="memory-bar" style="width: 0%"></div>
+        </div>
+        <div class="metric-details" id="memory-details">
+          <span>Used: -- │ Free: -- │ Total: --</span>
+        </div>
+        <div class="metric-sparkline" id="memory-sparkline"></div>
+      </div>
+
+      <!-- Disk Card -->
+      <div class="metric-card" id="disk-card">
+        <div class="metric-header">
+          <span class="metric-icon">💾</span>
+          <span class="metric-title">Disk</span>
+        </div>
+        <div class="metric-value" id="disk-value">--%</div>
+        <div class="metric-bar-container">
+          <div class="metric-bar" id="disk-bar" style="width: 0%"></div>
+        </div>
+        <div class="metric-details" id="disk-details">
+          <span>Used: -- │ Free: -- │ Total: --</span>
+        </div>
+      </div>
+
+      <!-- Processes Card -->
+      <div class="metric-card" id="process-card">
+        <div class="metric-header">
+          <span class="metric-icon">📊</span>
+          <span class="metric-title">Processes</span>
+        </div>
+        <div class="metric-value" id="process-value">--</div>
+        <div class="metric-details" id="process-details">
+          <span>Running: -- │ Sleeping: --</span>
+        </div>
+        <div class="metric-sub" id="process-sub">
+          <span class="sub-tag" id="cpu-hogs-tag">0 CPU Hogs</span>
+          <span class="sub-tag" id="mem-hogs-tag">0 Mem Hogs</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ─── Two-Column Layout ─── -->
+    <div class="two-columns">
+      <!-- ─── Left Column: Explanation ─── -->
+      <div class="column-left">
+        <!-- Explanation Panel -->
+        <section class="panel explanation-panel" id="explanation-panel">
+          <div class="panel-header">
+            <span class="panel-icon">💬</span>
+            <h3 class="panel-title">What's Happening</h3>
+          </div>
+          <div class="panel-body" id="explanation-body">
+            <p class="placeholder-text">Waiting for analysis data...</p>
+          </div>
+        </section>
+
+        <!-- Cause & Effect Panel -->
+        <section class="panel cause-panel" id="cause-panel" style="display: none;">
+          <div class="panel-header">
+            <span class="panel-icon">🔗</span>
+            <h3 class="panel-title">Cause & Effect</h3>
+          </div>
+          <div class="panel-body" id="cause-body"></div>
+        </section>
+
+        <!-- Patterns Panel -->
+        <section class="panel patterns-panel" id="patterns-panel" style="display: none;">
+          <div class="panel-header">
+            <span class="panel-icon">📈</span>
+            <h3 class="panel-title">Trends & Patterns</h3>
+          </div>
+          <div class="panel-body" id="patterns-body"></div>
+        </section>
+
+        <!-- Dev Insights Panel -->
+        <section class="panel dev-panel" id="dev-panel" style="display: none;">
+          <div class="panel-header">
+            <span class="panel-icon">🛠️</span>
+            <h3 class="panel-title">Developer Insights</h3>
+          </div>
+          <div class="panel-body" id="dev-body"></div>
+        </section>
+      </div>
+
+      <!-- ─── Right Column: Processes + Suggestions ─── -->
+      <div class="column-right">
+        <!-- Processes Table -->
+        <section class="panel processes-panel" id="processes-panel">
+          <div class="panel-header">
+            <span class="panel-icon">🔍</span>
+            <h3 class="panel-title">Top Processes</h3>
+            <div class="panel-tabs" id="process-tabs">
+              <button class="tab active" data-tab="cpu">By CPU</button>
+              <button class="tab" data-tab="memory">By Memory</button>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div class="process-table" id="process-table">
+              <div class="table-placeholder">Loading processes...</div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Suggestions Panel -->
+        <section class="panel suggestions-panel" id="suggestions-panel">
+          <div class="panel-header">
+            <span class="panel-icon">✅</span>
+            <h3 class="panel-title">Suggested Actions</h3>
+          </div>
+          <div class="panel-body" id="suggestions-body">
+            <p class="placeholder-text">Waiting for analysis data...</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  </main>
+
+  <!-- ─── Footer ─── -->
+  <footer class="footer">
+    <span>🔬 SystemLens — CreatedBYNJ5.0</span>
+    <span class="footer-sep">│</span>
+    <span>Refreshes every 3s</span>
+    <span class="footer-sep">│</span>
+    <span id="data-points">0 data points</span>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+
+</html>