lifx-emulator 3.0.1__py3-none-any.whl → 3.1.0__py3-none-any.whl

{lifx_emulator-3.0.1.dist-info → lifx_emulator-3.1.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: lifx-emulator
-Version: 3.0.1
+Version: 3.1.0
 Summary: Standalone LIFX Emulator with CLI and HTTP management API
 Author-email: Avi Miller <me@dje.li>
 Maintainer-email: Avi Miller <me@dje.li>
@@ -12,13 +12,14 @@ Classifier: Framework :: Pytest
 Classifier: Intended Audience :: Developers
 Classifier: Natural Language :: English
 Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3.10
 Classifier: Programming Language :: Python :: 3.11
 Classifier: Programming Language :: Python :: 3.12
 Classifier: Programming Language :: Python :: 3.13
 Classifier: Programming Language :: Python :: 3.14
 Classifier: Topic :: Software Development :: Testing
 Classifier: Typing :: Typed
-Requires-Python: >=3.11
+Requires-Python: >=3.10
 Requires-Dist: cyclopts>=4.2.0
 Requires-Dist: fastapi>=0.115.0
 Requires-Dist: lifx-emulator-core>=2.4.0

{lifx_emulator-3.0.1.dist-info → lifx_emulator-3.1.0.dist-info}/RECORD

@@ -1,7 +1,7 @@
 lifx_emulator_app/__init__.py,sha256=AJahGiWKb8U8yLQbJX21takbf-SoxDxMOGxjJeM7M5c,222
 lifx_emulator_app/__main__.py,sha256=f_VwgZfwOdp3zQshv8JQqBX7gocE9ATZbZ3wQndlBvo,22060
 lifx_emulator_app/api/__init__.py,sha256=bpdhugx7PAop5IQhkKnWE-a1hfI9gJoJiNRG2CCWe5A,651
-lifx_emulator_app/api/app.py,sha256=_bltPTPyw9mmPVAPHm9sJytzsovq5bgE8-CDRulnWYQ,4892
+lifx_emulator_app/api/app.py,sha256=QyHSzb0BYk341PlWLIcgHJHOYnFetcG0FQsVlVY_OX8,5126
 lifx_emulator_app/api/models.py,sha256=fiX9hDmR1C12tzet-kGPmbaG_qiZfiprgy-uxwIcEsE,3970
 lifx_emulator_app/api/mappers/__init__.py,sha256=-lGAg-s16eTMl2_D-3bPu-EMqD2kaPzXHqSrKCnmW2w,156
 lifx_emulator_app/api/mappers/device_mapper.py,sha256=WAo-_PJ2kX3J4GUW_Sjoype1d_uaIh-PtXPfMUAujUY,4155
@@ -11,8 +11,9 @@ lifx_emulator_app/api/routers/monitoring.py,sha256=i82_s61caYd9UvMb4MqWPLP7LuFh5
 lifx_emulator_app/api/routers/scenarios.py,sha256=pWXTliY9MIk-DCxDOZ1cjeAFgHn79ExvY-6lj-yHPWk,9747
 lifx_emulator_app/api/services/__init__.py,sha256=cdKZItYE-KkMX44V9xJW_PHHnJoAw5I7Uw1a1YKHgMI,285
 lifx_emulator_app/api/services/device_service.py,sha256=A2rCuZ1aAJ1tThKM6BYorKAjlaDgDaFCT5C9KUHfAvc,6303
-lifx_emulator_app/api/templates/dashboard.html,sha256=h-PeOH_La5bVOUBcXmTY2leRlMdL8D8yJ-NCx3S16-A,33792
-lifx_emulator-3.0.1.dist-info/METADATA,sha256=SHfU2nVUc6ihUB8AYOjmMUG0YhVmJkzZILVKFeDMED8,3174
-lifx_emulator-3.0.1.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-lifx_emulator-3.0.1.dist-info/entry_points.txt,sha256=tNZHeJTPUXNxu_nuk99ArXLKgwYLhIVVxN7YiaiXBOA,66
-lifx_emulator-3.0.1.dist-info/RECORD,,
+lifx_emulator_app/api/static/dashboard.js,sha256=eJOtBzTLRPYmMVuft5GC8r7Ae6x_JWZs9nqrmKaOILA,20177
+lifx_emulator_app/api/templates/dashboard.html,sha256=6vqMpsAtCBXASHOLnXn3_uZ-U5r7-P3FPo8_NJiMitk,10194
+lifx_emulator-3.1.0.dist-info/METADATA,sha256=hOg5mr27_HE83CfaYyjaF_5N4BClqSa3iYQ8kLsr2ec,3225
+lifx_emulator-3.1.0.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
+lifx_emulator-3.1.0.dist-info/entry_points.txt,sha256=tNZHeJTPUXNxu_nuk99ArXLKgwYLhIVVxN7YiaiXBOA,66
+lifx_emulator-3.1.0.dist-info/RECORD,,

{lifx_emulator-3.0.1.dist-info → lifx_emulator-3.1.0.dist-info}/WHEEL

@@ -1,4 +1,4 @@
 Wheel-Version: 1.0
-Generator: hatchling 1.27.0
+Generator: hatchling 1.28.0
 Root-Is-Purelib: true
 Tag: py3-none-any

lifx_emulator_app/api/app.py

@@ -14,6 +14,7 @@ from typing import TYPE_CHECKING
 
 from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
 if TYPE_CHECKING:
@@ -25,8 +26,9 @@ from lifx_emulator_app.api.routers.scenarios import create_scenarios_router
 
 logger = logging.getLogger(__name__)
 
-# Template directory for web UI
+# Asset directories for web UI
 TEMPLATES_DIR = Path(__file__).parent / "templates"
+STATIC_DIR = Path(__file__).parent / "static"
 templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
 
 
@@ -102,6 +104,9 @@ The API is organized into three main routers:
         """Serve embedded web UI dashboard."""
         return templates.TemplateResponse(request, "dashboard.html")
 
+    # Mount static files for JS/CSS assets (cached by browsers)
+    app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+
     # Include routers with server dependency injection
     monitoring_router = create_monitoring_router(server)
     devices_router = create_devices_router(server)

lifx_emulator_app/api/static/dashboard.js

@@ -0,0 +1,588 @@
+/**
+ * LIFX Emulator Dashboard
+ * Real-time monitoring and device management interface
+ */
+
+'use strict';
+
+let updateInterval;
+
+// DOM helper: create element with optional class and text
+function createElement(tag, className, textContent) {
+    const el = document.createElement(tag);
+    if (className) el.className = className;
+    if (textContent !== undefined) el.textContent = textContent;
+    return el;
+}
+
+// DOM helper: create element with style
+function createStyledElement(tag, style, textContent) {
+    const el = document.createElement(tag);
+    if (style) el.style.cssText = style;
+    if (textContent !== undefined) el.textContent = textContent;
+    return el;
+}
+
+// Convert HSBK to RGB for display
+function hsbkToRgb(hsbk) {
+    const h = hsbk.hue / 65535;
+    const s = hsbk.saturation / 65535;
+    const v = hsbk.brightness / 65535;
+
+    let r, g, b;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+        case 0: r = v; g = t; b = p; break;
+        case 1: r = q; g = v; b = p; break;
+        case 2: r = p; g = v; b = t; break;
+        case 3: r = p; g = q; b = v; break;
+        case 4: r = t; g = p; b = v; break;
+        case 5: r = v; g = p; b = q; break;
+    }
+
+    const red = Math.round(r * 255);
+    const green = Math.round(g * 255);
+    const blue = Math.round(b * 255);
+    return `rgb(${red}, ${green}, ${blue})`;
+}
+
+function toggleZones(serial) {
+    const element = document.getElementById(`zones-${serial}`);
+    const toggle = document.getElementById(`zones-toggle-${serial}`);
+    if (element && toggle) {
+        const isShown = element.classList.toggle('show');
+        // Update toggle icon
+        toggle.textContent = isShown
+            ? toggle.textContent.replace('▸', '▾')
+            : toggle.textContent.replace('▾', '▸');
+        // Save state to localStorage
+        localStorage.setItem(`zones-${serial}`, isShown ? 'show' : 'hide');
+    }
+}
+
+function toggleMetadata(serial) {
+    const element = document.getElementById(`metadata-${serial}`);
+    const toggle = document.getElementById(`metadata-toggle-${serial}`);
+    if (element && toggle) {
+        const isShown = element.classList.toggle('show');
+        // Update toggle icon
+        toggle.textContent = isShown
+            ? toggle.textContent.replace('▸', '▾')
+            : toggle.textContent.replace('▾', '▸');
+        // Save state to localStorage
+        localStorage.setItem(`metadata-${serial}`, isShown ? 'show' : 'hide');
+    }
+}
+
+function restoreToggleStates(serial) {
+    // Restore zones toggle state
+    const zonesState = localStorage.getItem(`zones-${serial}`);
+    if (zonesState === 'show') {
+        const element = document.getElementById(`zones-${serial}`);
+        const toggle = document.getElementById(`zones-toggle-${serial}`);
+        if (element && toggle) {
+            element.classList.add('show');
+            toggle.textContent = toggle.textContent.replace('▸', '▾');
+        }
+    }
+
+    // Restore metadata toggle state
+    const metadataState = localStorage.getItem(`metadata-${serial}`);
+    if (metadataState === 'show') {
+        const element = document.getElementById(`metadata-${serial}`);
+        const toggle = document.getElementById(`metadata-toggle-${serial}`);
+        if (element && toggle) {
+            element.classList.add('show');
+            toggle.textContent = toggle.textContent.replace('▸', '▾');
+        }
+    }
+}
+
+// Create a stat display element
+function createStatElement(label, value) {
+    const stat = createElement('div', 'stat');
+    stat.appendChild(createElement('span', 'stat-label', label));
+    stat.appendChild(createElement('span', 'stat-value', String(value)));
+    return stat;
+}
+
+async function fetchStats() {
+    const statsContainer = document.getElementById('stats');
+    try {
+        const response = await fetch('/api/stats');
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const stats = await response.json();
+
+        const uptimeValue = Math.floor(stats.uptime_seconds);
+
+        // Clear and rebuild stats using DOM APIs
+        statsContainer.textContent = '';
+        statsContainer.appendChild(createStatElement('Uptime', uptimeValue + 's'));
+        statsContainer.appendChild(createStatElement('Devices', stats.device_count));
+        statsContainer.appendChild(createStatElement('Packets RX', stats.packets_received));
+        statsContainer.appendChild(createStatElement('Packets TX', stats.packets_sent));
+        statsContainer.appendChild(createStatElement('Errors', stats.error_count));
+
+        // Show/hide activity log based on server configuration
+        const activityCard = document.getElementById('activity-card');
+        if (activityCard) {
+            const displayValue = (
+                stats.activity_enabled ? 'block' : 'none'
+            );
+            activityCard.style.display = displayValue;
+        }
+
+        return stats.activity_enabled;
+    } catch (error) {
+        console.error('Failed to fetch stats:', error);
+
+        // Clear and show error using DOM APIs
+        statsContainer.textContent = '';
+        const stat = createElement('div', 'stat');
+        const label = createElement('span', 'stat-label', 'Error loading stats');
+        label.style.color = '#d32f2f';
+        stat.appendChild(label);
+        stat.appendChild(createElement('span', 'stat-value', error.message));
+        statsContainer.appendChild(stat);
+        return false;
+    }
+}
+
+// Create a metadata row element
+function createMetadataRow(label, value, valueStyle) {
+    const row = createElement('div', 'metadata-row');
+    row.appendChild(createElement('span', 'metadata-label', label));
+    const valueEl = createElement('span', 'metadata-value', value);
+    if (valueStyle) valueEl.style.cssText = valueStyle;
+    row.appendChild(valueEl);
+    return row;
+}
+
+// Create a badge element
+function createBadge(text, badgeClass) {
+    return createElement('span', `badge ${badgeClass}`, text);
+}
+
+// Create zone segment element for multizone strips
+function createZoneSegment(color) {
+    const segment = createElement('div', 'zone-segment');
+    segment.style.background = hsbkToRgb(color);
+    return segment;
+}
+
+// Create tile zone element for matrix devices
+function createTileZone(color) {
+    const zone = createElement('div', 'tile-zone');
+    zone.style.background = hsbkToRgb(color);
+    return zone;
+}
+
+// Build metadata section for a device
+function buildMetadataSection(dev) {
+    const container = document.createDocumentFragment();
+
+    // Metadata toggle
+    const toggle = createElement('div', 'metadata-toggle', '▸ Show metadata');
+    toggle.id = `metadata-toggle-${dev.serial}`;
+    toggle.addEventListener('click', () => toggleMetadata(dev.serial));
+    container.appendChild(toggle);
+
+    // Metadata display
+    const display = createElement('div', 'metadata-display');
+    display.id = `metadata-${dev.serial}`;
+
+    const uptimeSeconds = Math.floor(dev.uptime_ns / 1e9);
+    const firmware = `${dev.version_major}.${dev.version_minor}`;
+
+    // Build capabilities text
+    const capabilitiesMetadata = [];
+    if (dev.has_color) capabilitiesMetadata.push('Color');
+    if (dev.has_infrared) capabilitiesMetadata.push('Infrared');
+    if (dev.has_multizone) {
+        capabilitiesMetadata.push(`Multizone (${dev.zone_count} zones)`);
+    }
+    if (dev.has_extended_multizone) {
+        capabilitiesMetadata.push('Extended Multizone');
+    }
+    if (dev.has_matrix) {
+        capabilitiesMetadata.push(`Matrix (${dev.tile_count} tiles)`);
+    }
+    if (dev.has_hev) capabilitiesMetadata.push('HEV/Clean');
+    const capabilitiesText = capabilitiesMetadata.join(', ') || 'None';
+
+    display.appendChild(createMetadataRow('Firmware:', firmware));
+    display.appendChild(createMetadataRow('Vendor:', String(dev.vendor)));
+    display.appendChild(createMetadataRow('Product:', String(dev.product)));
+    display.appendChild(
+        createMetadataRow('Capabilities:', capabilitiesText, 'color: #4a9eff;')
+    );
+    display.appendChild(createMetadataRow('Group:', dev.group_label));
+    display.appendChild(createMetadataRow('Location:', dev.location_label));
+    display.appendChild(createMetadataRow('Uptime:', `${uptimeSeconds}s`));
+    display.appendChild(
+        createMetadataRow('WiFi Signal:', `${dev.wifi_signal.toFixed(1)} dBm`)
+    );
+
+    container.appendChild(display);
+    return container;
+}
+
+// Build zones/tiles section for a device
+function buildZonesSection(dev) {
+    const container = document.createDocumentFragment();
+
+    if (dev.has_multizone && dev.zone_colors && dev.zone_colors.length > 0) {
+        // Multizone strip display
+        const toggle = createElement(
+            'div', 'zones-toggle',
+            `▸ Show zones (${dev.zone_colors.length})`
+        );
+        toggle.id = `zones-toggle-${dev.serial}`;
+        toggle.addEventListener('click', () => toggleZones(dev.serial));
+        container.appendChild(toggle);
+
+        const display = createElement('div', 'zones-display');
+        display.id = `zones-${dev.serial}`;
+        const strip = createElement('div', 'zone-strip');
+        dev.zone_colors.forEach(color => {
+            strip.appendChild(createZoneSegment(color));
+        });
+        display.appendChild(strip);
+        container.appendChild(display);
+
+    } else if (dev.has_matrix && dev.tile_devices &&
+               dev.tile_devices.length > 0) {
+        // Tile matrix display
+        const toggle = createElement(
+            'div', 'zones-toggle',
+            `▸ Show tiles (${dev.tile_devices.length})`
+        );
+        toggle.id = `zones-toggle-${dev.serial}`;
+        toggle.addEventListener('click', () => toggleZones(dev.serial));
+        container.appendChild(toggle);
+
+        const display = createElement('div', 'zones-display');
+        display.id = `zones-${dev.serial}`;
+        const tilesContainer = createElement('div', 'tiles-container');
+
+        dev.tile_devices.forEach((tile, tileIndex) => {
+            const tileItem = createElement('div', 'tile-item');
+
+            // Tile label
+            const label = createStyledElement(
+                'div',
+                'font-size: 0.7em; color: #666; margin-bottom: 2px; text-align: center;',
+                `T${tileIndex + 1}`
+            );
+            tileItem.appendChild(label);
+
+            if (!tile.colors || tile.colors.length === 0) {
+                tileItem.appendChild(
+                    createStyledElement('div', 'color: #666;', 'No color data')
+                );
+            } else {
+                const width = tile.width || 8;
+                const height = tile.height || 8;
+                const totalZones = width * height;
+
+                const grid = createElement('div', 'tile-grid');
+                grid.style.gridTemplateColumns = `repeat(${width}, 8px)`;
+
+                tile.colors.slice(0, totalZones).forEach(color => {
+                    grid.appendChild(createTileZone(color));
+                });
+                tileItem.appendChild(grid);
+            }
+            tilesContainer.appendChild(tileItem);
+        });
+
+        display.appendChild(tilesContainer);
+        container.appendChild(display);
+
+    } else if (dev.has_color && dev.color) {
+        // Single color swatch
+        const wrapper = createStyledElement('div', 'margin-top: 4px;');
+        const swatch = createElement('span', 'color-swatch');
+        swatch.style.background = hsbkToRgb(dev.color);
+        wrapper.appendChild(swatch);
+        wrapper.appendChild(
+            createStyledElement('span', 'color: #888; font-size: 0.75em;', 'Current color')
+        );
+        container.appendChild(wrapper);
+    }
+
+    return container;
+}
+
+// Build a complete device card element
+function buildDeviceCard(dev) {
+    const device = createElement('div', 'device');
+
+    // Device header
+    const header = createElement('div', 'device-header');
+    const headerInfo = createElement('div');
+    headerInfo.appendChild(createElement('div', 'device-serial', dev.serial));
+    headerInfo.appendChild(createElement('div', 'device-label', dev.label));
+    header.appendChild(headerInfo);
+
+    const deleteBtn = createElement('button', 'btn btn-delete', 'Del');
+    deleteBtn.addEventListener('click', () => deleteDevice(dev.serial));
+    header.appendChild(deleteBtn);
+    device.appendChild(header);
+
+    // Badges section
+    const badgesDiv = createElement('div');
+
+    // Power badge
+    const powerClass = dev.power_level > 0 ? 'badge-power-on' : 'badge-power-off';
+    const powerText = dev.power_level > 0 ? 'ON' : 'OFF';
+    badgesDiv.appendChild(createBadge(powerText, powerClass));
+
+    // Product badge
+    badgesDiv.appendChild(createBadge(`P${dev.product}`, 'badge-capability'));
+
+    // Capability badges
+    if (dev.has_color) {
+        badgesDiv.appendChild(createBadge('color', 'badge-capability'));
+    }
+    if (dev.has_infrared) {
+        badgesDiv.appendChild(createBadge('IR', 'badge-capability'));
+    }
+    if (dev.has_extended_multizone) {
+        badgesDiv.appendChild(
+            createBadge(`extended-mz×${dev.zone_count}`, 'badge-extended-mz')
+        );
+    } else if (dev.has_multizone) {
+        badgesDiv.appendChild(
+            createBadge(`multizone×${dev.zone_count}`, 'badge-capability')
+        );
+    }
+    if (dev.has_matrix) {
+        badgesDiv.appendChild(
+            createBadge(`matrix×${dev.tile_count}`, 'badge-capability')
+        );
+    }
+    if (dev.has_hev) {
+        badgesDiv.appendChild(createBadge('HEV', 'badge-capability'));
+    }
+
+    device.appendChild(badgesDiv);
+
+    // Metadata section
+    device.appendChild(buildMetadataSection(dev));
+
+    // Zones section
+    device.appendChild(buildZonesSection(dev));
+
+    return device;
+}
+
+async function fetchDevices() {
+    const devicesContainer = document.getElementById('devices');
+    try {
+        const response = await fetch('/api/devices');
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const devices = await response.json();
+
+        document.getElementById('device-count').textContent = devices.length;
+
+        // Clear container
+        devicesContainer.textContent = '';
+
+        if (devices.length === 0) {
+            devicesContainer.appendChild(
+                createElement('div', 'no-devices', 'No devices emulated')
+            );
+            return;
+        }
+
+        // Build device cards using DOM APIs
+        devices.forEach(dev => {
+            devicesContainer.appendChild(buildDeviceCard(dev));
+        });
+
+        // Restore toggle states for all devices
+        devices.forEach(dev => restoreToggleStates(dev.serial));
+    } catch (error) {
+        console.error('Failed to fetch devices:', error);
+
+        // Clear and show error using DOM APIs
+        devicesContainer.textContent = '';
+        const errorDiv = createElement('div', 'no-devices', `Error loading devices: ${error.message}`);
+        errorDiv.style.color = '#d32f2f';
+        devicesContainer.appendChild(errorDiv);
+    }
+}
+
+// Build an activity item element
+function buildActivityItem(act) {
+    const item = createElement('div', 'activity-item');
+
+    const timestamp = act.timestamp * 1000;
+    const time = new Date(timestamp).toLocaleTimeString();
+    item.appendChild(createElement('span', 'activity-time', time));
+
+    const isRx = act.direction === 'rx';
+    const dirClass = isRx ? 'activity-rx' : 'activity-tx';
+    const dirLabel = isRx ? 'RX' : 'TX';
+    item.appendChild(createElement('span', dirClass, dirLabel));
+
+    item.appendChild(createElement('span', 'activity-packet', act.packet_name));
+
+    const device = act.device || act.target || 'N/A';
+    item.appendChild(createElement('span', 'device-serial', device));
+
+    item.appendChild(createStyledElement('span', 'color: #666', act.addr));
+
+    return item;
+}
+
+async function fetchActivity() {
+    const logElement = document.getElementById('activity-log');
+    try {
+        const response = await fetch('/api/activity');
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const activities = await response.json();
+
+        // Clear container
+        logElement.textContent = '';
+
+        if (activities.length === 0) {
+            logElement.appendChild(
+                createStyledElement('div', 'color: #666', 'No activity yet')
+            );
+            return;
+        }
+
+        // Build activity items using DOM APIs (reversed order)
+        activities.slice().reverse().forEach(act => {
+            logElement.appendChild(buildActivityItem(act));
+        });
+    } catch (error) {
+        console.error('Failed to fetch activity:', error);
+
+        // Clear and show error using DOM APIs
+        logElement.textContent = '';
+        const errorDiv = createElement('div', null, `Error loading activity: ${error.message}`);
+        errorDiv.style.color = '#d32f2f';
+        logElement.appendChild(errorDiv);
+    }
+}
+
+async function deleteDevice(serial) {
+    if (!confirm(`Delete device ${serial}?`)) return;
+
+    const response = await fetch(`/api/devices/${serial}`, {
+        method: 'DELETE'
+    });
+
+    if (response.ok) {
+        await updateAll();
+    } else {
+        alert('Failed to delete device');
+    }
+}
+
+async function removeAllDevices() {
+    const deviceCount = document.getElementById('device-count').textContent;
+    if (deviceCount === '0') {
+        alert('No devices to remove');
+        return;
+    }
+
+    const line1 = (
+        `Remove all ${deviceCount} device(s) from the server?\n\n`
+    );
+    const line2 = (
+        'This will stop all devices from ' +
+        'responding to LIFX protocol packets, '
+    );
+    const line3 = 'but will not delete persistent storage.';
+    const confirmMsg = line1 + line2 + line3;
+    if (!confirm(confirmMsg)) return;
+
+    const response = await fetch('/api/devices', {
+        method: 'DELETE'
+    });
+
+    if (response.ok) {
+        const result = await response.json();
+        alert(result.message);
+        await updateAll();
+    } else {
+        alert('Failed to remove all devices');
+    }
+}
+
+async function clearStorage() {
+    const confirmMsg = `Clear all persistent device state from storage?\n\n` +
+        `This will permanently delete all saved device state files. ` +
+        `Currently running devices will not be affected.\n\n` +
+        `This action cannot be undone.`;
+    if (!confirm(confirmMsg)) return;
+
+    const response = await fetch('/api/storage', {
+        method: 'DELETE'
+    });
+
+    if (response.ok) {
+        const result = await response.json();
+        alert(result.message);
+    } else if (response.status === 503) {
+        alert('Persistent storage is not enabled on this server');
+    } else {
+        alert('Failed to clear storage');
+    }
+}
+
+async function updateAll() {
+    const activityEnabled = await fetchStats();
+    const tasks = [fetchDevices()];
+    if (activityEnabled) {
+        tasks.push(fetchActivity());
+    }
+    await Promise.all(tasks);
+}
+
+// Initialize dashboard when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    // Set up add device form
+    const addDeviceForm = document.getElementById('add-device-form');
+    addDeviceForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const productId = parseInt(document.getElementById('product-id').value);
+
+        const response = await fetch('/api/devices', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ product_id: productId })
+        });
+
+        if (response.ok) {
+            await updateAll();
+        } else {
+            const error = await response.json();
+            alert(`Failed to create device: ${error.detail}`);
+        }
+    });
+
+    // Initial load
+    updateAll();
+
+    // Auto-refresh every 2 seconds
+    updateInterval = setInterval(updateAll, 2000);
+});

lifx_emulator_app/api/templates/dashboard.html

@@ -352,548 +352,6 @@
         </div>
     </div>
 
-    <script>
-        let updateInterval;
-
-        // Convert HSBK to RGB for display
-        function hsbkToRgb(hsbk) {
-            const h = hsbk.hue / 65535;
-            const s = hsbk.saturation / 65535;
-            const v = hsbk.brightness / 65535;
-
-            let r, g, b;
-            const i = Math.floor(h * 6);
-            const f = h * 6 - i;
-            const p = v * (1 - s);
-            const q = v * (1 - f * s);
-            const t = v * (1 - (1 - f) * s);
-
-            switch (i % 6) {
-                case 0: r = v; g = t; b = p; break;
-                case 1: r = q; g = v; b = p; break;
-                case 2: r = p; g = v; b = t; break;
-                case 3: r = p; g = q; b = v; break;
-                case 4: r = t; g = p; b = v; break;
-                case 5: r = v; g = p; b = q; break;
-            }
-
-            const red = Math.round(r * 255);
-            const green = Math.round(g * 255);
-            const blue = Math.round(b * 255);
-            return `rgb(${red}, ${green}, ${blue})`;
-        }
-
-        function toggleZones(serial) {
-            const element = document.getElementById(`zones-${serial}`);
-            const toggle = document.getElementById(`zones-toggle-${serial}`);
-            if (element && toggle) {
-                const isShown = element.classList.toggle('show');
-                // Update toggle icon
-                toggle.textContent = isShown
-                    ? toggle.textContent.replace('▸', '▾')
-                    : toggle.textContent.replace('▾', '▸');
-                // Save state to localStorage
-                localStorage.setItem(`zones-${serial}`, isShown ? 'show' : 'hide');
-            }
-        }
-
-        function toggleMetadata(serial) {
-            const element = document.getElementById(`metadata-${serial}`);
-            const toggle = document.getElementById(`metadata-toggle-${serial}`);
-            if (element && toggle) {
-                const isShown = element.classList.toggle('show');
-                // Update toggle icon
-                toggle.textContent = isShown
-                    ? toggle.textContent.replace('▸', '▾')
-                    : toggle.textContent.replace('▾', '▸');
-                // Save state to localStorage
-                localStorage.setItem(`metadata-${serial}`, isShown ? 'show' : 'hide');
-            }
-        }
-
-        function restoreToggleStates(serial) {
-            // Restore zones toggle state
-            const zonesState = localStorage.getItem(`zones-${serial}`);
-            if (zonesState === 'show') {
-                const element = document.getElementById(`zones-${serial}`);
-                const toggle = document.getElementById(`zones-toggle-${serial}`);
-                if (element && toggle) {
-                    element.classList.add('show');
-                    toggle.textContent = toggle.textContent.replace('▸', '▾');
-                }
-            }
-
-            // Restore metadata toggle state
-            const metadataState = localStorage.getItem(`metadata-${serial}`);
-            if (metadataState === 'show') {
-                const element = document.getElementById(`metadata-${serial}`);
-                const toggle = document.getElementById(`metadata-toggle-${serial}`);
-                if (element && toggle) {
-                    element.classList.add('show');
-                    toggle.textContent = toggle.textContent.replace('▸', '▾');
-                }
-            }
-        }
-
-        async function fetchStats() {
-            try {
-                const response = await fetch('/api/stats');
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                const stats = await response.json();
-
-                const uptimeValue = Math.floor(stats.uptime_seconds);
-                const statsHtml = `
-                    <div class="stat">
-                        <span class="stat-label">Uptime</span>
-                        <span class="stat-value">${uptimeValue}s</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Devices</span>
-                        <span class="stat-value">${stats.device_count}</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Packets RX</span>
-                        <span class="stat-value">${stats.packets_received}</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Packets TX</span>
-                        <span class="stat-value">${stats.packets_sent}</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Errors</span>
-                        <span class="stat-value">${stats.error_count}</span>
-                    </div>
-                `;
-                document.getElementById('stats').innerHTML = statsHtml;
-
-                // Show/hide activity log based on server configuration
-                const activityCard = document.getElementById('activity-card');
-                if (activityCard) {
-                    const displayValue = (
-                        stats.activity_enabled ? 'block' : 'none'
-                    );
-                    activityCard.style.display = displayValue;
-                }
-
-                return stats.activity_enabled;
-            } catch (error) {
-                console.error('Failed to fetch stats:', error);
-                const errorLabelStyle = 'color: #d32f2f;';
-                const errorHtml = `
-                    <div class="stat">
-                        <span class="stat-label" style="${errorLabelStyle}">
-                            Error loading stats
-                        </span>
-                        <span class="stat-value">${error.message}</span>
-                    </div>
-                `;
-                document.getElementById('stats').innerHTML = errorHtml;
-                return false;
-            }
-        }
-
-        async function fetchDevices() {
-            try {
-                const response = await fetch('/api/devices');
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                const devices = await response.json();
-
-                document.getElementById('device-count').textContent = devices.length;
-
-                if (devices.length === 0) {
-                    const noDevicesHtml = (
-                        '<div class="no-devices">No devices emulated</div>'
-                    );
-                    document.getElementById('devices').innerHTML = noDevicesHtml;
-                    return;
-                }
-
-                const devicesHtml = devices.map(dev => {
-                const capabilities = [];
-                const capabilityBadges = [];
-
-                if (dev.has_color) capabilities.push('color');
-                if (dev.has_infrared) capabilities.push('IR');
-
-                // Show extended-mz badge instead of multizone when both are present
-                if (dev.has_extended_multizone) {
-                    const badgeHtml = (
-                        '<span class="badge badge-extended-mz">' +
-                        `extended-mz×${dev.zone_count}</span>`
-                    );
-                    capabilityBadges.push(badgeHtml);
-                } else if (dev.has_multizone) {
-                    capabilities.push(`multizone×${dev.zone_count}`);
-                }
-
-                if (dev.has_matrix) capabilities.push(`matrix×${dev.tile_count}`);
-                if (dev.has_hev) capabilities.push('HEV');
-
-                const powerBadge = dev.power_level > 0
-                    ? '<span class="badge badge-power-on">ON</span>'
-                    : '<span class="badge badge-power-off">OFF</span>';
-
-                // Generate capabilities list for metadata
-                const capabilitiesMetadata = [];
-                if (dev.has_color) capabilitiesMetadata.push('Color');
-                if (dev.has_infrared) {
-                    capabilitiesMetadata.push('Infrared');
-                }
-                if (dev.has_multizone) {
-                    capabilitiesMetadata.push(
-                        `Multizone (${dev.zone_count} zones)`
-                    );
-                }
-                if (dev.has_extended_multizone) {
-                    capabilitiesMetadata.push('Extended Multizone');
-                }
-                if (dev.has_matrix) {
-                    capabilitiesMetadata.push(
-                        `Matrix (${dev.tile_count} tiles)`
-                    );
-                }
-                if (dev.has_hev) capabilitiesMetadata.push('HEV/Clean');
-                const capabilitiesText = (
-                    capabilitiesMetadata.join(', ') || 'None'
-                );
-
-                // Generate metadata display
-                const uptimeSeconds = Math.floor(dev.uptime_ns / 1e9);
-                const metaToggleId = `metadata-toggle-${dev.serial}`;
-                const metaToggleClick = `toggleMetadata('${dev.serial}')`;
-                const metadataHtml = `
-                    <div
-                        class="metadata-toggle"
-                        id="${metaToggleId}"
-                        onclick="${metaToggleClick}"
-                    >
-                        ▸ Show metadata
-                    </div>
-                    <div id="metadata-${dev.serial}" class="metadata-display">
-                        <div class="metadata-row">
-                            <span class="metadata-label">Firmware:</span>
-                            <span class="metadata-value">
-                                ${dev.version_major}.${dev.version_minor}
-                            </span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Vendor:</span>
-                            <span class="metadata-value">${dev.vendor}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Product:</span>
-                            <span class="metadata-value">${dev.product}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Capabilities:</span>
-                            <span
-                                class="metadata-value"
-                                style="color: #4a9eff;"
-                            >${capabilitiesText}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Group:</span>
-                            <span class="metadata-value">${dev.group_label}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Location:</span>
-                            <span class="metadata-value">${dev.location_label}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Uptime:</span>
-                            <span class="metadata-value">${uptimeSeconds}s</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">WiFi Signal:</span>
-                            <span class="metadata-value">
-                                ${dev.wifi_signal.toFixed(1)} dBm
-                            </span>
-                        </div>
-                    </div>
-                `;
-
-                // Generate zones display
-                let zonesHtml = '';
-                if (dev.has_multizone && dev.zone_colors &&
-                    dev.zone_colors.length > 0
-                ) {
-                    const zoneSegments = dev.zone_colors.map(color => {
-                        const rgb = hsbkToRgb(color);
-                        const bgStyle = `background: ${rgb};`;
-                        return `<div class="zone-segment" style="${bgStyle}"></div>`;
-                    }).join('');
-
-                    const zoneCount = dev.zone_colors.length;
-                    const toggleId = `zones-toggle-${dev.serial}`;
-                    const toggleClick = `toggleZones('${dev.serial}')`;
-                    zonesHtml = `
-                        <div
-                            class="zones-toggle"
-                            id="${toggleId}"
-                            onclick="${toggleClick}"
-                        >
-                            ▸ Show zones (${zoneCount})
-                        </div>
-                        <div id="zones-${dev.serial}" class="zones-display">
-                            <div class="zone-strip">${zoneSegments}</div>
-                        </div>
-                    `;
-                } else if (dev.has_matrix && dev.tile_devices &&
-                           dev.tile_devices.length > 0) {
-                    // Render actual tile zones
-                    const tilesHtml = dev.tile_devices.map((tile, tileIndex) => {
-                        if (!tile.colors || tile.colors.length === 0) {
-                            return '<div style="color: #666;">No color data</div>';
-                        }
-
-                        const width = tile.width || 8;
-                        const height = tile.height || 8;
-                        const totalzones = width * height;
-
-                        // Create grid of zones
-                        const slicedColors = tile.colors.slice(0, totalzones);
-                        const zonesHtml = slicedColors.map(color => {
-                            const rgb = hsbkToRgb(color);
-                            const bgStyle = `background: ${rgb};`;
-                            return `<div class="tile-zone" style="${bgStyle}"></div>`;
-                        }).join('');
-
-                        const labelStyle = (
-                            'font-size: 0.7em; color: #666; ' +
-                            'margin-bottom: 2px; text-align: center;'
-                        );
-                        const gridStyle = (
-                            `grid-template-columns: repeat(${width}, 8px);`
-                        );
-                        return `
-                            <div class="tile-item">
-                                <div style="${labelStyle}">
-                                    T${tileIndex + 1}
-                                </div>
-                                <div class="tile-grid" style="${gridStyle}">
-                                    ${zonesHtml}
-                                </div>
-                            </div>
-                        `;
-                    }).join('');
-
-                    const tileCount = dev.tile_devices.length;
-                    const toggleId = `zones-toggle-${dev.serial}`;
-                    const toggleClick = `toggleZones('${dev.serial}')`;
-                    zonesHtml = `
-                        <div
-                            class="zones-toggle"
-                            id="${toggleId}"
-                            onclick="${toggleClick}"
-                        >
-                            ▸ Show tiles (${tileCount})
-                        </div>
-                        <div id="zones-${dev.serial}" class="zones-display">
-                            <div class="tiles-container">
-                                ${tilesHtml}
-                            </div>
-                        </div>
-                    `;
-                } else if (dev.has_color && dev.color) {
-                    const rgb = hsbkToRgb(dev.color);
-                    const swatchStyle = `background: ${rgb};`;
-                    const textStyle = 'color: #888; font-size: 0.75em;';
-                    zonesHtml = `
-                        <div style="margin-top: 4px;">
-                            <span class="color-swatch" style="${swatchStyle}"></span>
-                            <span style="${textStyle}">Current color</span>
-                        </div>
-                    `;
-                }
-
-                return `
-                    <div class="device">
-                        <div class="device-header">
-                            <div>
-                                <div class="device-serial">${dev.serial}</div>
-                                <div class="device-label">${dev.label}</div>
-                            </div>
-                            <button
-                                class="btn btn-delete"
-                                onclick="deleteDevice('${dev.serial}')"
-                            >Del</button>
-                        </div>
-                        <div>
-                            ${powerBadge}
-                            <span class="badge badge-capability">P${dev.product}</span>
-                            ${capabilities.map(c => (
-                                `<span class="badge badge-capability">${c}</span>`
-                            )).join('')}
-                            ${capabilityBadges.join('')}
-                        </div>
-                        ${metadataHtml}
-                        ${zonesHtml}
-                    </div>
-                `;
-                }).join('');
-
-                document.getElementById('devices').innerHTML = devicesHtml;
-
-                // Restore toggle states for all devices
-                devices.forEach(dev => restoreToggleStates(dev.serial));
-            } catch (error) {
-                console.error('Failed to fetch devices:', error);
-                const errorStyle = 'color: #d32f2f;';
-                const errorHtml = (
-                    `<div class="no-devices" style="${errorStyle}">` +
-                    `Error loading devices: ${error.message}</div>`
-                );
-                document.getElementById('devices').innerHTML = errorHtml;
-            }
-        }
-
-        async function fetchActivity() {
-            try {
-                const response = await fetch('/api/activity');
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                const activities = await response.json();
-
-                const activityHtml = activities.slice().reverse().map(act => {
-                    const timestamp = act.timestamp * 1000;
-                    const time = new Date(timestamp).toLocaleTimeString();
-                    const isRx = act.direction === 'rx';
-                    const dirClass = isRx ? 'activity-rx' : 'activity-tx';
-                    const dirLabel = isRx ? 'RX' : 'TX';
-                    const device = act.device || act.target || 'N/A';
-
-                    return `
-                        <div class="activity-item">
-                            <span class="activity-time">${time}</span>
-                            <span class="${dirClass}">${dirLabel}</span>
-                            <span class="activity-packet">${act.packet_name}</span>
-                            <span class="device-serial">${device}</span>
-                            <span style="color: #666">${act.addr}</span>
-                        </div>
-                    `;
-                }).join('');
-
-                const noActivity = '<div style="color: #666">No activity yet</div>';
-                const logElement = document.getElementById('activity-log');
-                logElement.innerHTML = activityHtml || noActivity;
-            } catch (error) {
-                console.error('Failed to fetch activity:', error);
-                const errorStyle = 'color: #d32f2f;';
-                const errorHtml = (
-                    `<div style="${errorStyle}">` +
-                    `Error loading activity: ${error.message}</div>`
-                );
-                document.getElementById('activity-log').innerHTML = errorHtml;
-            }
-        }
-
-        async function deleteDevice(serial) {
-            if (!confirm(`Delete device ${serial}?`)) return;
-
-            const response = await fetch(`/api/devices/${serial}`, {
-                method: 'DELETE'
-            });
-
-            if (response.ok) {
-                await updateAll();
-            } else {
-                alert('Failed to delete device');
-            }
-        }
-
-        async function removeAllDevices() {
-            const deviceCount = document.getElementById('device-count').textContent;
-            if (deviceCount === '0') {
-                alert('No devices to remove');
-                return;
-            }
-
-            const line1 = (
-                `Remove all ${deviceCount} device(s) from the server?\\n\\n`
-            );
-            const line2 = (
-                'This will stop all devices from ' +
-                'responding to LIFX protocol packets, '
-            );
-            const line3 = 'but will not delete persistent storage.';
-            const confirmMsg = line1 + line2 + line3;
-            if (!confirm(confirmMsg)) return;
-
-            const response = await fetch('/api/devices', {
-                method: 'DELETE'
-            });
-
-            if (response.ok) {
-                const result = await response.json();
-                alert(result.message);
-                await updateAll();
-            } else {
-                alert('Failed to remove all devices');
-            }
-        }
-
-        async function clearStorage() {
-            const confirmMsg = `Clear all persistent device state from storage?\\n\\n` +
-                `This will permanently delete all saved device state files. ` +
-                `Currently running devices will not be affected.\\n\\n` +
-                `This action cannot be undone.`;
-            if (!confirm(confirmMsg)) return;
-
-            const response = await fetch('/api/storage', {
-                method: 'DELETE'
-            });
-
-            if (response.ok) {
-                const result = await response.json();
-                alert(result.message);
-            } else if (response.status === 503) {
-                alert('Persistent storage is not enabled on this server');
-            } else {
-                alert('Failed to clear storage');
-            }
-        }
-
-        const addDeviceForm = document.getElementById('add-device-form');
-        addDeviceForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-
-            const productId = parseInt(document.getElementById('product-id').value);
-
-            const response = await fetch('/api/devices', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ product_id: productId })
-            });
-
-            if (response.ok) {
-                await updateAll();
-            } else {
-                const error = await response.json();
-                alert(`Failed to create device: ${error.detail}`);
-            }
-        });
-
-        async function updateAll() {
-            const activityEnabled = await fetchStats();
-            const tasks = [fetchDevices()];
-            if (activityEnabled) {
-                tasks.push(fetchActivity());
-            }
-            await Promise.all(tasks);
-        }
-
-        // Initial load
-        updateAll();
-
-        // Auto-refresh every 2 seconds
-        updateInterval = setInterval(updateAll, 2000);
-    </script>
+    <script src="/static/dashboard.js"></script>
 </body>
 </html>