momodebug 1.0.0

package/bin/momodebug.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+/**
+ * MomoDebug CLI - Performance Monitoring Dashboard
+ * Usage: npx momodebug
+ */
+
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+// Get the package directory (where this script lives)
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Set the package root for the server to find views/public
+process.env.MOMODEBUG_ROOT = join(__dirname, '..');
+
+// Import and run the server
+import('../src/index.js');

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "momodebug",
+  "version": "1.0.0",
+  "description": "Real-time performance monitoring dashboard for Android and iOS apps",
+  "main": "src/index.js",
+  "type": "module",
+  "bin": {
+    "momodebug": "./bin/momodebug.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "public"
+  ],
+  "scripts": {
+    "start": "node src/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "performance",
+    "monitoring",
+    "android",
+    "ios",
+    "debug",
+    "dashboard"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "ejs": "^3.1.10",
+    "express": "^5.2.1",
+    "express-ejs-layouts": "^2.5.1",
+    "uuid": "^13.0.0",
+    "ws": "^8.18.3"
+  }
+}

package/public/css/style.css

@@ -0,0 +1,292 @@
+:root {
+    --bg-dark: #080511;
+    --surface-dark: #0f0a1e;
+    --card-bg: rgba(20, 15, 40, 0.7);
+    --card-border: rgba(255, 255, 255, 0.1);
+    --text-primary: #ffffff;
+    --text-secondary: #9ea3b0;
+    --accent-purple: #a855f7;
+    --accent-blue: #3b82f6;
+    --accent-cyan: #06b6d4;
+    --status-ok: #22c55e;
+    --status-warning: #eab308;
+    --status-critical: #ef4444;
+    --glow: rgba(168, 85, 247, 0.4);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+    background-image:
+        radial-gradient(circle at 10% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 40%);
+    background-attachment: fixed;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2.5rem;
+}
+
+header {
+    margin-bottom: 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.logo-icon {
+    width: 44px;
+    height: 44px;
+    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
+    border-radius: 12px;
+    box-shadow: 0 0 20px var(--glow);
+}
+
+.logo h1 {
+    font-size: 1.75rem;
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    background: linear-gradient(to right, #fff, #9ea3b0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+nav {
+    display: flex;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.4rem;
+    border-radius: 12px;
+    border: 1px solid var(--card-border);
+}
+
+.nav-link {
+    color: var(--text-secondary);
+    text-decoration: none;
+    padding: 0.6rem 1.25rem;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-link.active {
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* Dashboard UI */
+.dashboard-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 2.5rem;
+}
+
+.live-status {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: var(--status-ok);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    background-color: currentColor;
+    border-radius: 50%;
+    box-shadow: 0 0 10px currentColor;
+    animation: pulse 2.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    50% {
+        opacity: 0.3;
+        transform: scale(1.4);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Metrics Cards */
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 2rem;
+}
+
+.glass {
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--card-border);
+    border-radius: 24px;
+    padding: 1.75rem;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.glass::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+}
+
+.metric-card:hover {
+    transform: translateY(-8px);
+    border-color: var(--accent-purple);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(168, 85, 247, 0.1);
+}
+
+.metric-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.metric-title {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.metric-value-container {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.metric-value {
+    font-size: 2.75rem;
+    font-weight: 800;
+    letter-spacing: -0.05em;
+    color: #fff;
+}
+
+.metric-unit {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* Chart Container */
+.chart-container {
+    height: 80px;
+    margin-top: auto;
+    width: 100%;
+}
+
+/* Specialized Card Styles */
+#card-fps .metric-value {
+    color: var(--status-ok);
+    text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
+}
+
+/* Table Styles */
+.comparison-table {
+    width: 100%;
+    border-spacing: 0;
+    margin-top: 2rem;
+}
+
+.comparison-table th {
+    padding: 1rem 1.5rem;
+    text-align: left;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.comparison-table td {
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.02);
+    border-top: 1px solid var(--card-border);
+}
+
+.comparison-table tr:first-child td {
+    border-top: none;
+}
+
+.status-badge {
+    padding: 0.5rem 1rem;
+    border-radius: 12px;
+    font-weight: 700;
+    font-size: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.status-ok {
+    background: rgba(34, 197, 94, 0.15);
+    color: #4ade80;
+}
+
+.status-warning {
+    background: rgba(234, 179, 8, 0.15);
+    color: #fbbf24;
+}
+
+.status-critical {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 1.5rem;
+    }
+
+    header {
+        flex-direction: column;
+        gap: 1.5rem;
+        align-items: flex-start;
+    }
+
+    .metrics-grid {
+        grid-template-columns: 1fr;
+    }
+}

package/public/js/dashboard.js

@@ -0,0 +1,99 @@
+const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+const ws = new WebSocket(`${protocol}//${window.location.host}?dashboard=true`);
+
+const charts = {};
+
+const metricConfigs = {
+    'cpu_ms': { label: 'CPU Time', color: '#a855f7' },
+    'memory_mb': { label: 'Memory (PSS)', color: '#3b82f6' },
+    'frame_ms': { label: 'Frame Time', color: '#06b6d4' },
+    'fps': { label: 'FPS', color: '#22c55e' },
+    'disk_read_kbps': { label: 'Disk Read', color: '#f59e0b' },
+    'disk_write_kbps': { label: 'Disk Write', color: '#ef4444' },
+    'network_total_mb': { label: 'Net Total', color: '#6366f1' }
+};
+
+// Initialize charts
+Object.entries(metricConfigs).forEach(([key, config]) => {
+    const ctx = document.getElementById(`chart-${key}`).getContext('2d');
+    charts[key] = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: Array(20).fill(''),
+            datasets: [{
+                data: Array(20).fill(0),
+                borderColor: config.color,
+                borderWidth: 2,
+                pointRadius: 0,
+                fill: true,
+                backgroundColor: `${config.color}20`,
+                tension: 0.4
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: {
+                x: { display: false },
+                y: {
+                    display: false,
+                    beginAtZero: true
+                }
+            },
+            animation: { duration: 0 }
+        }
+    });
+});
+
+ws.onopen = () => {
+    console.log('✅ Connected to metrics server');
+};
+
+ws.onmessage = (event) => {
+    const message = JSON.parse(event.data);
+
+    if (message.type === 'live_metric') {
+        const sample = message.data;
+        const valElement = document.getElementById(`val-${sample.metric}`);
+
+        if (valElement) {
+            animateValue(valElement, sample.value);
+
+            // Update Chart
+            const chart = charts[sample.metric];
+            if (chart) {
+                chart.data.datasets[0].data.push(sample.value);
+                chart.data.datasets[0].data.shift();
+                chart.update('none');
+            }
+
+            // Sync FPS if and only if frame_ms comes in (legacy fallback)
+            if (sample.metric === 'frame_ms') {
+                const fps = Math.round(1000 / sample.value);
+                const fpsVal = document.getElementById('val-fps');
+                if (fpsVal) {
+                    animateValue(fpsVal, fps);
+                    const fpsChart = charts['fps'];
+                    if (fpsChart) {
+                        fpsChart.data.datasets[0].data.push(fps);
+                        fpsChart.data.datasets[0].data.shift();
+                        fpsChart.update('none');
+                    }
+                }
+            }
+        }
+    }
+};
+
+function animateValue(obj, value) {
+    const rounded = Math.round(value * 10) / 10;
+    obj.innerText = rounded;
+}
+
+ws.onclose = () => {
+    console.log('❌ Disconnected from server');
+    setTimeout(() => {
+        window.location.reload();
+    }, 5000);
+};

package/src/adbObserver.js

@@ -0,0 +1,59 @@
+import { spawn } from 'child_process';
+import { broadcastToDashboards } from './websocket.js';
+
+export function startAdbObserver() {
+    console.log('🔌 Starting ADB Logcat Observer (PerfObserverSDK)...');
+
+    const adb = spawn('adb', ['logcat', '-s', 'PerfObserverSDK']);
+
+    adb.stdout.on('data', (data) => {
+        const lines = data.toString().split('\n');
+        for (const line of lines) {
+            if (line.includes('METRIC_UPDATE:')) {
+                try {
+                    const jsonStr = line.split('METRIC_UPDATE:')[1].trim();
+                    const rawData = JSON.parse(jsonStr);
+
+                    // Map ADB fields to internal metric names
+                    const mappings = {
+                        'fps': 'fps',
+                        'frameTimeMs': 'frame_ms',
+                        'cpuUsagePercent': 'cpu_ms',
+                        'memoryPssMb': 'memory_mb',
+                        'diskReadKbps': 'disk_read_kbps',
+                        'diskWriteKbps': 'disk_write_kbps',
+                        'networkTotalMb': 'network_total_mb'
+                    };
+
+                    Object.entries(mappings).forEach(([adbKey, metricName]) => {
+                        if (rawData[adbKey] !== undefined) {
+                            broadcastToDashboards({
+                                metric: metricName,
+                                value: rawData[adbKey],
+                                timestamp: rawData.timestamp,
+                                appVersion: rawData.appVersion || 'Live',
+                                scenario: rawData.scenario || 'Default',
+                                deviceClass: rawData.deviceClass || 'ADB'
+                            });
+                        }
+                    });
+
+                    console.log(`📈 ADB Bundle processed at ${rawData.timestamp}`);
+                } catch (e) {
+                    console.error('❌ Error parsing ADB logcat line:', e.message);
+                }
+            }
+        }
+    });
+
+    adb.stderr.on('data', (data) => {
+        console.error(`⚠️ ADB Error: ${data}`);
+    });
+
+    adb.on('close', (code) => {
+        console.log(`📡 ADB process exited with code ${code}. Restarting in 5s...`);
+        setTimeout(startAdbObserver, 5000);
+    });
+
+    return adb;
+}

package/src/index.js

@@ -0,0 +1,88 @@
+// Main unified server with Express and WebSocket
+import express from 'express';
+import { createServer } from 'http';
+import { exec } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import cors from 'cors';
+import expressLayouts from 'express-ejs-layouts';
+import { storage } from './storage.js';
+import { setupWebSocket } from './websocket.js';
+import { seedMockData } from './mockData.js';
+import { startAdbObserver } from './adbObserver.js';
+import { startIosObserver } from './iosObserver.js';
+import { startIosDeviceObserver } from './iosDeviceObserver.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Use package root when run via npx, otherwise use relative paths
+const packageRoot = process.env.MOMODEBUG_ROOT || path.join(__dirname, '..');
+
+const app = express();
+const httpServer = createServer(app);
+const PORT = process.env.PORT || 6969;
+
+// Setup Middleware
+app.use(cors());
+app.use(express.json());
+app.use(express.static(path.join(packageRoot, 'public')));
+
+// Set EJS as view engine
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views'));
+app.use(expressLayouts);
+app.set('layout', 'layout');
+
+// Dashboard route (SSR)
+app.get('/', (req, res) => {
+    const versions = storage.getVersions();
+    const scenarios = storage.getScenarios();
+    res.render('dashboard', {
+        versions,
+        scenarios,
+        title: 'Perf Observer | Realtime'
+    });
+});
+
+// Comparison route (SSR)
+app.get('/compare', (req, res) => {
+    const { from, to, scenario, deviceClass } = req.query;
+    const versions = storage.getVersions();
+    const scenarios = storage.getScenarios();
+
+    let comparisons = [];
+    if (from && to) {
+        comparisons = storage.compareVersions(from, to, scenario, deviceClass);
+    }
+
+    res.render('compare', {
+        from, to, scenario, deviceClass,
+        versions, scenarios, comparisons,
+        title: 'Perf Observer | Compare'
+    });
+});
+
+// API Routes (Legacy compat)
+app.get('/api/versions', (req, res) => res.json({ versions: storage.getVersions() }));
+app.get('/api/scenarios', (req, res) => res.json({ scenarios: storage.getScenarios() }));
+
+// Initialize WebSocket
+setupWebSocket(httpServer);
+
+// Seed initial data
+seedMockData();
+
+// Start observers
+startAdbObserver();           // Android (adb logcat)
+startIosObserver();           // iOS Simulator (simctl log stream)
+startIosDeviceObserver();     // iOS Real Device (idevicesyslog)
+
+// Start server
+httpServer.listen(PORT, () => {
+    console.log(`\n🚀 Unified Performance Server running at http://localhost:${PORT}`);
+    console.log(`📡 WebSocket listening for metrics from SDK\n`);
+
+    // Auto-open browser
+    exec(`open http://localhost:${PORT}`);
+});

package/src/iosDeviceObserver.js

@@ -0,0 +1,83 @@
+import { spawn } from 'child_process';
+import { broadcastToDashboards } from './websocket.js';
+
+export function startIosDeviceObserver() {
+    console.log('📱 Starting iOS Real Device Observer (idevicesyslog)...');
+
+    // Check if idevicesyslog is installed
+    const checkCmd = spawn('which', ['idevicesyslog']);
+
+    checkCmd.on('close', (code) => {
+        if (code !== 0) {
+            console.log('⚠️ idevicesyslog not found. Install with: brew install libimobiledevice');
+            console.log('   Real device observation will be skipped.');
+            return;
+        }
+
+        startDeviceSyslog();
+    });
+}
+
+function startDeviceSyslog() {
+    // Stream logs from connected iOS device
+    // Filter for PerfObserverSDK subsystem
+    const deviceLog = spawn('idevicesyslog', ['--process', 'ExampleApp']);
+
+    deviceLog.stdout.on('data', (data) => {
+        const output = data.toString();
+        const lines = output.split('\n');
+
+        for (const line of lines) {
+            if (line.includes('METRIC_UPDATE:')) {
+                try {
+                    // Extract only the JSON part using regex
+                    const match = line.match(/METRIC_UPDATE:\s*(\{.*\})/);
+                    if (!match) continue;
+
+                    const jsonStr = match[1];
+                    const rawData = JSON.parse(jsonStr);
+
+                    // Map fields (same as simulator)
+                    const mappings = {
+                        'fps': 'fps',
+                        'frameTimeMs': 'frame_ms',
+                        'cpuUsagePercent': 'cpu_ms',
+                        'memoryPssMb': 'memory_mb',
+                        'diskReadKbps': 'disk_read_kbps',
+                        'diskWriteKbps': 'disk_write_kbps',
+                        'networkTotalMb': 'network_total_mb'
+                    };
+
+                    Object.entries(mappings).forEach(([key, metricName]) => {
+                        if (rawData[key] !== undefined) {
+                            broadcastToDashboards({
+                                metric: metricName,
+                                value: rawData[key],
+                                timestamp: rawData.timestamp || Date.now(),
+                                appVersion: rawData.appVersion || 'iOS-Live',
+                                scenario: rawData.scenario || 'Default',
+                                deviceClass: rawData.deviceClass || 'iOS-Device'
+                            });
+                        }
+                    });
+
+                    console.log(`📱 iOS Device Metric processed at ${rawData.timestamp || 'now'}`);
+                } catch (e) {
+                    console.error('❌ Error parsing iOS device log:', e.message);
+                }
+            }
+        }
+    });
+
+    deviceLog.stderr.on('data', (data) => {
+        const err = data.toString();
+        if (!err.includes('No device found')) {
+            console.error(`⚠️ iOS Device Observer Error: ${err}`);
+        }
+    });
+
+    deviceLog.on('close', (code) => {
+        console.log(`📱 idevicesyslog exited with code ${code}. Restarting in 10s...`);
+        setTimeout(startDeviceSyslog, 10000);
+    });
+}

package/src/iosObserver.js

@@ -0,0 +1,94 @@
+import { spawn, exec } from 'child_process';
+import { broadcastToDashboards } from './websocket.js';
+
+export function startIosObserver() {
+    console.log('🍎 Starting iOS Simulator Observer (PerfObserverSDK)...');
+
+    // First check if any simulator is booted
+    exec('xcrun simctl list devices | grep Booted', (error, stdout, stderr) => {
+        if (error || !stdout.trim()) {
+            console.log('⚠️ No iOS Simulator is booted. Waiting for simulator...');
+            // Retry after 30 seconds
+            setTimeout(startIosObserver, 30000);
+            return;
+        }
+
+        console.log('✅ Found booted simulator, starting log stream...');
+        startLogStream();
+    });
+}
+
+function startLogStream() {
+    // Command to stream logs from the booted simulator
+    // Filter by subsystem (set in os_log) to capture SDK logs
+    const iosLog = spawn('xcrun', [
+        'simctl',
+        'spawn',
+        'booted',
+        'log',
+        'stream',
+        '--predicate',
+        'subsystem == "PerfObserverSDK"'
+    ]);
+
+    iosLog.stdout.on('data', (data) => {
+        const output = data.toString();
+        const lines = output.split('\n');
+
+        for (const line of lines) {
+            if (line.includes('METRIC_UPDATE:')) {
+                try {
+                    const jsonStr = line.split('METRIC_UPDATE:')[1].trim();
+                    const rawData = JSON.parse(jsonStr);
+
+                    // Map fields (same as Android for consistency)
+                    const mappings = {
+                        'fps': 'fps',
+                        'frameTimeMs': 'frame_ms',
+                        'cpuUsagePercent': 'cpu_ms',
+                        'memoryPssMb': 'memory_mb',
+                        'diskReadKbps': 'disk_read_kbps',
+                        'diskWriteKbps': 'disk_write_kbps',
+                        'networkTotalMb': 'network_total_mb'
+                    };
+
+                    Object.entries(mappings).forEach(([key, metricName]) => {
+                        if (rawData[key] !== undefined) {
+                            broadcastToDashboards({
+                                metric: metricName,
+                                value: rawData[key],
+                                timestamp: rawData.timestamp || Date.now(),
+                                appVersion: rawData.appVersion || 'iOS-Live',
+                                scenario: rawData.scenario || 'Default',
+                                deviceClass: rawData.deviceClass || 'iOS-Sim'
+                            });
+                        }
+                    });
+
+                    console.log(`🍎 iOS Metric processed at ${rawData.timestamp || 'now'}`);
+                } catch (e) {
+                    console.error('❌ Error parsing iOS log line:', e.message);
+                }
+            }
+        }
+    });
+
+    iosLog.stderr.on('data', (data) => {
+        const err = data.toString();
+        if (!err.includes('No devices are booted')) {
+            console.error(`⚠️ iOS Observer Error: ${err}`);
+        }
+    });
+
+    iosLog.on('close', (code) => {
+        if (code === 148 || code === 1) {
+            console.log('⚠️ Simulator stopped or not available. Waiting for simulator...');
+            setTimeout(startIosObserver, 30000);
+        } else {
+            console.log(`📡 iOS log process exited with code ${code}. Restarting in 10s...`);
+            setTimeout(startIosObserver, 10000);
+        }
+    });
+
+    return iosLog;
+}

package/src/mockData.js

@@ -0,0 +1,35 @@
+import { storage } from './storage.js';
+
+export function seedMockData() {
+    const versions = ['1.0.0', '1.1.0', '1.2.0'];
+    const scenarios = ['HOME_LOAD', 'FEED_SCROLL', 'IMAGE_GRID'];
+    const deviceClasses = ['high', 'mid', 'low'];
+    const metrics = ['cpu_ms', 'memory_mb', 'frame_ms'];
+
+    versions.forEach(v => {
+        scenarios.forEach(s => {
+            deviceClasses.forEach(dc => {
+                metrics.forEach(m => {
+                    // Generate 10 samples per group
+                    for (let i = 0; i < 10; i++) {
+                        const base = m === 'cpu_ms' ? 100 : (m === 'memory_mb' ? 150 : 16);
+                        // Add some drift for different versions
+                        const versionDrift = v === '1.2.0' ? 1.2 : 1.0;
+                        const value = base * versionDrift + (Math.random() * 20 - 10);
+
+                        storage.addSample({
+                            appVersion: v,
+                            scenario: s,
+                            deviceClass: dc,
+                            metric: m,
+                            value: value,
+                            timestamp: Date.now() - (Math.random() * 86400000)
+                        });
+                    }
+                });
+            });
+        });
+    });
+
+    console.log('✅ Mock data seeded for comparison');
+}

package/src/storage.js

@@ -0,0 +1,109 @@
+// In-memory storage and aggregation for performance metrics
+import { v4 as uuidv4 } from 'uuid';
+
+class StorageService {
+    constructor() {
+        this.samples = [];
+        this.aggregates = {}; // key: version_scenario_deviceClass_metric
+        this.versions = new Set();
+        this.scenarios = new Set();
+    }
+
+    addSample(sample) {
+        const id = uuidv4();
+        const enrichedSample = { ...sample, id, serverTimestamp: Date.now() };
+
+        this.samples.push(enrichedSample);
+        this.versions.add(sample.appVersion);
+        this.scenarios.add(sample.scenario);
+
+        this.updateAggregate(enrichedSample);
+        return enrichedSample;
+    }
+
+    updateAggregate(sample) {
+        const key = `${sample.appVersion}_${sample.scenario}_${sample.deviceClass}_${sample.metric}`;
+
+        if (!this.aggregates[key]) {
+            this.aggregates[key] = {
+                version: sample.appVersion,
+                scenario: sample.scenario,
+                deviceClass: sample.deviceClass,
+                metric: sample.metric,
+                values: [],
+                count: 0,
+                mean: 0,
+                p95: 0,
+                max: 0
+            };
+        }
+
+        const agg = this.aggregates[key];
+        agg.values.push(sample.value);
+        agg.count = agg.values.length;
+
+        // Simple moving average for performance (in real world we'd use better windowing)
+        agg.mean = agg.values.reduce((a, b) => a + b, 0) / agg.count;
+
+        // P95 calculation
+        const sorted = [...agg.values].sort((a, b) => a - b);
+        const p95Idx = Math.floor(sorted.length * 0.95);
+        agg.p95 = sorted[p95Idx];
+
+        agg.max = Math.max(...agg.values);
+    }
+
+    getVersions() {
+        return Array.from(this.versions).sort().reverse();
+    }
+
+    getScenarios() {
+        return Array.from(this.scenarios).sort();
+    }
+
+    getAggregatesForVersion(version) {
+        return Object.values(this.aggregates).filter(a => a.version === version);
+    }
+
+    compareVersions(fromVersion, toVersion, scenario = null, deviceClass = null) {
+        const fromAggs = this.getAggregatesForVersion(fromVersion);
+        const toAggs = this.getAggregatesForVersion(toVersion);
+
+        const comparisons = [];
+
+        toAggs.forEach(to => {
+            if (scenario && to.scenario !== scenario) return;
+            if (deviceClass && to.deviceClass !== deviceClass) return;
+
+            const from = fromAggs.find(f =>
+                f.scenario === to.scenario &&
+                f.deviceClass === to.deviceClass &&
+                f.metric === to.metric
+            );
+
+            if (from) {
+                const meanDelta = ((to.mean - from.mean) / from.mean) * 100;
+                const p95Delta = ((to.p95 - from.p95) / from.p95) * 100;
+                const maxDelta = ((to.max - from.max) / from.max) * 100;
+
+                let status = 'OK';
+                if (p95Delta > 20 || meanDelta > 15) status = 'WARNING';
+                if (p95Delta > 40 || meanDelta > 25) status = 'CRITICAL';
+
+                comparisons.push({
+                    metric: to.metric,
+                    scenario: to.scenario,
+                    deviceClass: to.deviceClass,
+                    from: { version: fromVersion, mean: from.mean, p95: from.p95, max: from.max },
+                    to: { version: toVersion, mean: to.mean, p95: to.p95, max: to.max },
+                    delta: { mean: meanDelta, p95: p95Delta, max: maxDelta },
+                    status
+                });
+            }
+        });
+
+        return comparisons;
+    }
+}
+
+export const storage = new StorageService();

package/src/views/compare.ejs

@@ -0,0 +1,96 @@
+<div class="filter-panel glass" style="padding: 1.5rem; border-radius: 16px;">
+    <form action="/compare" method="GET" style="display: flex; gap: 1rem; width: 100%;">
+        <div style="flex: 1;">
+            <label style="font-size: 0.75rem; color: var(--text-secondary); display: block; margin-bottom: 0.5rem;">From
+                Version</label>
+            <select name="from" style="width: 100%;">
+                <% versions.forEach(v=> { %>
+                    <option value="<%= v %>" <%=v===from ? 'selected' : '' %>><%= v %>
+                    </option>
+                    <% }) %>
+            </select>
+        </div>
+        <div style="flex: 1;">
+            <label style="font-size: 0.75rem; color: var(--text-secondary); display: block; margin-bottom: 0.5rem;">To
+                Version</label>
+            <select name="to" style="width: 100%;">
+                <% versions.forEach(v=> { %>
+                    <option value="<%= v %>" <%=v===to ? 'selected' : '' %>><%= v %>
+                    </option>
+                    <% }) %>
+            </select>
+        </div>
+        <div style="flex: 1;">
+            <label
+                style="font-size: 0.75rem; color: var(--text-secondary); display: block; margin-bottom: 0.5rem;">Scenario</label>
+            <select name="scenario" style="width: 100%;">
+                <option value="">All Scenarios</option>
+                <% scenarios.forEach(s=> { %>
+                    <option value="<%= s %>" <%=s===scenario ? 'selected' : '' %>><%= s %>
+                    </option>
+                    <% }) %>
+            </select>
+        </div>
+        <div style="display: flex; align-items: flex-end;">
+            <button type="submit" class="primary">Compare</button>
+        </div>
+    </form>
+</div>
+
+<% if (comparisons.length> 0) { %>
+    <div class="glass" style="padding: 1rem; border-radius: 16px; overflow: hidden;">
+        <table class="comparison-table">
+            <thead>
+                <tr>
+                    <th>Metric</th>
+                    <th>Scenario</th>
+                    <th>Device</th>
+                    <th>Base (Mean)</th>
+                    <th>Current (Mean)</th>
+                    <th>Delta</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+            <tbody>
+                <% comparisons.forEach(item=> { %>
+                    <tr>
+                        <td style="font-weight: 700;">
+                            <%= item.metric.split('_')[0].toUpperCase() %>
+                        </td>
+                        <td><span
+                                style="background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; font-size: 0.8rem;">
+                                <%= item.scenario %>
+                            </span></td>
+                        <td>
+                            <%= item.deviceClass.toUpperCase() %>
+                        </td>
+                        <td>
+                            <%= item.from.mean.toFixed(1) %>
+                        </td>
+                        <td style="font-weight: 600;">
+                            <%= item.to.mean.toFixed(1) %>
+                        </td>
+                        <td>
+                            <span class="delta <%= item.delta.mean > 0 ? 'up' : 'down' %>">
+                                <%= item.delta.mean> 0 ? '▲' : '▼' %> <%= Math.abs(item.delta.mean).toFixed(1) %>%
+                            </span>
+                        </td>
+                        <td>
+                            <span class="status-badge status-<%= item.status.toLowerCase() %>">
+                                <%= item.status %>
+                            </span>
+                        </td>
+                    </tr>
+                    <% }) %>
+            </tbody>
+        </table>
+    </div>
+    <% } else if (from && to) { %>
+        <div class="glass" style="padding: 3rem; text-align: center; border-radius: 16px;">
+            <p style="color: var(--text-secondary);">No data found for the selected versions.</p>
+        </div>
+        <% } else { %>
+            <div class="glass" style="padding: 3rem; text-align: center; border-radius: 16px;">
+                <p style="color: var(--text-secondary);">Select versions to start comparison.</p>
+            </div>
+            <% } %>

package/src/views/dashboard.ejs

@@ -0,0 +1,112 @@
+<div class="dashboard-header">
+    <div class="live-status">
+        <div class="dot"></div>
+        <span>Live Streaming Active</span>
+    </div>
+    <p style="color: var(--text-secondary); margin-top: 0.5rem;">Awaiting connections from Android SDK...</p>
+</div>
+
+<div class="metrics-grid">
+    <!-- CPU Card -->
+    <div class="metric-card glass" id="card-cpu_ms">
+        <div class="metric-header">
+            <span class="metric-title">⚡ CPU Time</span>
+            <div class="delta" id="delta-cpu_ms"></div>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-cpu_ms" class="metric-value">--</span>
+            <span class="metric-unit">ms</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-cpu_ms"></canvas>
+        </div>
+    </div>
+
+    <!-- Memory Card -->
+    <div class="metric-card glass" id="card-memory_mb">
+        <div class="metric-header">
+            <span class="metric-title">💾 Memory (PSS)</span>
+            <div class="delta" id="delta-memory_mb"></div>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-memory_mb" class="metric-value">--</span>
+            <span class="metric-unit">MB</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-memory_mb"></canvas>
+        </div>
+    </div>
+
+    <!-- Frame Card -->
+    <div class="metric-card glass" id="card-frame_ms">
+        <div class="metric-header">
+            <span class="metric-title">🎮 Frame Time</span>
+            <div class="delta" id="delta-frame_ms"></div>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-frame_ms" class="metric-value">--</span>
+            <span class="metric-unit">ms</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-frame_ms"></canvas>
+        </div>
+    </div>
+
+    <!-- FPS Card -->
+    <div class="metric-card glass" id="card-fps">
+        <div class="metric-header">
+            <span class="metric-title">🚀 Realtime FPS</span>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-fps" class="metric-value">--</span>
+            <span class="metric-unit">fps</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-fps"></canvas>
+        </div>
+    </div>
+
+    <!-- Disk Read Card -->
+    <div class="metric-card glass" id="card-disk_read_kbps">
+        <div class="metric-header">
+            <span class="metric-title">📥 Disk Read</span>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-disk_read_kbps" class="metric-value">--</span>
+            <span class="metric-unit">KB/s</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-disk_read_kbps"></canvas>
+        </div>
+    </div>
+
+    <!-- Disk Write Card -->
+    <div class="metric-card glass" id="card-disk_write_kbps">
+        <div class="metric-header">
+            <span class="metric-title">📤 Disk Write</span>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-disk_write_kbps" class="metric-value">--</span>
+            <span class="metric-unit">KB/s</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-disk_write_kbps"></canvas>
+        </div>
+    </div>
+
+    <!-- Network Total Card -->
+    <div class="metric-card glass" id="card-network_total_mb">
+        <div class="metric-header">
+            <span class="metric-title">🌐 Net Total</span>
+        </div>
+        <div class="metric-value-container">
+            <span id="val-network_total_mb" class="metric-value">--</span>
+            <span class="metric-unit">MB</span>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-network_total_mb"></canvas>
+        </div>
+    </div>
+</div>
+
+<script src="/js/dashboard.js"></script>

package/src/views/layout.ejs

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        <%= title %>
+    </title>
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <div class="logo-icon"></div>
+                <h1>PerfObserver</h1>
+            </div>
+            <nav>
+                <a href="/" class="nav-link <%= title.includes('Realtime') ? 'active' : '' %>">Realtime</a>
+                <a href="/compare" class="nav-link <%= title.includes('Compare') ? 'active' : '' %>">Comparison</a>
+            </nav>
+        </header>
+
+        <main>
+            <%- body %>
+        </main>
+    </div>
+</body>
+
+</html>

package/src/websocket.js

@@ -0,0 +1,62 @@
+// WebSocket handler for metrics ingestion and real-time dashboard updates
+import { WebSocketServer } from 'ws';
+import { storage } from './storage.js';
+
+const dashboardClients = new Set();
+
+export function broadcastToDashboards(data) {
+    const enrichedSample = storage.addSample(data);
+    const update = JSON.stringify({
+        type: 'live_metric',
+        data: enrichedSample
+    });
+
+    dashboardClients.forEach(client => {
+        if (client.readyState === 1) {
+            client.send(update);
+        } else {
+            console.log('❌ broadcastToDashboards failed');
+        }
+    });
+    return enrichedSample;
+}
+
+export function setupWebSocket(server) {
+    const wss = new WebSocketServer({ server });
+
+    wss.on('connection', (ws, req) => {
+        const isDashboard = req.url.includes('dashboard');
+
+        if (isDashboard) {
+            dashboardClients.add(ws);
+            console.log('🆕 Browser dashboard connected');
+        } else {
+            console.log('📱 Android device connected');
+        }
+
+        ws.on('message', (message) => {
+            try {
+                const event = JSON.parse(message);
+                if (event.type === 'metric') {
+                    // Broadcast to all connected dashboards
+                    broadcastToDashboards(event.data);
+                } else if (event.type === 'ping') {
+                    ws.send(JSON.stringify({ type: 'pong', timestamp: Date.now() }));
+                }
+            } catch (error) {
+                console.error('WebSocket message error:', error);
+            }
+        });
+
+        ws.on('close', () => {
+            if (isDashboard) {
+                dashboardClients.delete(ws);
+                console.log('❌ Browser dashboard disconnected');
+            } else {
+                console.log('❌ Android device disconnected');
+            }
+        });
+    });
+
+    return wss;
+}