@blueharford/scrypted-spatial-awareness 0.1.11 → 0.1.14

package/out/main.nodejs.js

@@ -34350,14 +34350,44 @@ function socketOnError() {
  * Alert Manager
  * Generates and dispatches alerts based on tracking events
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.AlertManager = void 0;
-const sdk_1 = __importDefault(__webpack_require__(/*! @scrypted/sdk */ "./node_modules/@scrypted/sdk/dist/src/index.js"));
+const sdk_1 = __importStar(__webpack_require__(/*! @scrypted/sdk */ "./node_modules/@scrypted/sdk/dist/src/index.js"));
 const alert_1 = __webpack_require__(/*! ../models/alert */ "./src/models/alert.ts");
-const { systemManager } = sdk_1.default;
+const { systemManager, mediaManager } = sdk_1.default;
 class AlertManager {
     rules = [];
     recentAlerts = [];
@@ -34426,6 +34456,20 @@ class AlertManager {
         const notifierIds = rule.notifiers.length > 0
             ? rule.notifiers
             : this.getDefaultNotifiers();
+        // Try to get a thumbnail from the camera
+        let mediaObject;
+        const cameraId = alert.details.toCameraId || alert.details.cameraId;
+        if (cameraId) {
+            try {
+                const camera = systemManager.getDeviceById(cameraId);
+                if (camera && camera.interfaces?.includes(sdk_1.ScryptedInterface.Camera)) {
+                    mediaObject = await camera.takePicture();
+                }
+            }
+            catch (e) {
+                this.console.warn(`Failed to get thumbnail from camera ${cameraId}:`, e);
+            }
+        }
         for (const notifierId of notifierIds) {
             try {
                 const notifier = systemManager.getDeviceById(notifierId);
@@ -34441,8 +34485,8 @@ class AlertManager {
                         trackedObjectId: alert.trackedObjectId,
                         timestamp: alert.timestamp,
                     },
-                });
-                this.console.log(`Notification sent to ${notifierId}`);
+                }, mediaObject);
+                this.console.log(`Notification sent to ${notifierId}${mediaObject ? ' with thumbnail' : ''}`);
             }
             catch (e) {
                 this.console.error(`Failed to send notification to ${notifierId}:`, e);
@@ -34454,16 +34498,18 @@ class AlertManager {
      */
     getNotificationTitle(alert) {
         const prefix = alert.severity === 'critical' ? '🚨 ' :
-            alert.severity === 'warning' ? '⚠️ ' : 'ℹ️ ';
+            alert.severity === 'warning' ? '⚠️ ' : '';
         switch (alert.type) {
             case 'property_entry':
-                return `${prefix}Entry Detected`;
+                return `${prefix}🚶 Entry Detected`;
             case 'property_exit':
-                return `${prefix}Exit Detected`;
+                return `${prefix}🚶 Exit Detected`;
+            case 'movement':
+                return `${prefix}🚶 Movement Detected`;
             case 'unusual_path':
                 return `${prefix}Unusual Path`;
             case 'dwell_time':
-                return `${prefix}Extended Presence`;
+                return `${prefix}⏱️ Extended Presence`;
             case 'restricted_zone':
                 return `${prefix}Restricted Zone Alert`;
             case 'lost_tracking':
@@ -35117,6 +35163,7 @@ class TrackingEngine {
             // Check if this is a cross-camera transition
             const lastSighting = (0, tracked_object_1.getLastSighting)(tracked);
             if (lastSighting && lastSighting.cameraId !== sighting.cameraId) {
+                const transitDuration = sighting.timestamp - lastSighting.timestamp;
                 // Add journey segment
                 this.state.addJourney(tracked.globalId, {
                     fromCameraId: lastSighting.cameraId,
@@ -35125,12 +35172,23 @@ class TrackingEngine {
                     toCameraName: sighting.cameraName,
                     exitTime: lastSighting.timestamp,
                     entryTime: sighting.timestamp,
-                    transitDuration: sighting.timestamp - lastSighting.timestamp,
+                    transitDuration,
                     correlationConfidence: correlation.confidence,
                 });
                 this.console.log(`Object ${tracked.globalId.slice(0, 8)} transited: ` +
                     `${lastSighting.cameraName} → ${sighting.cameraName} ` +
                     `(confidence: ${(correlation.confidence * 100).toFixed(0)}%)`);
+                // Generate movement alert for cross-camera transition
+                await this.alertManager.checkAndAlert('movement', tracked, {
+                    fromCameraId: lastSighting.cameraId,
+                    fromCameraName: lastSighting.cameraName,
+                    toCameraId: sighting.cameraId,
+                    toCameraName: sighting.cameraName,
+                    transitTime: transitDuration,
+                    objectClass: sighting.detection.className,
+                    objectLabel: sighting.detection.label,
+                    detectionId: sighting.detectionId,
+                });
             }
             // Add sighting to tracked object
             this.state.addSighting(tracked.globalId, sighting);
@@ -35915,7 +35973,6 @@ exports.MqttPublisher = MqttPublisher;
 (__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-var __webpack_dirname__ = "src";
 
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -35962,8 +36019,7 @@ const alert_manager_1 = __webpack_require__(/*! ./alerts/alert-manager */ "./src
 const global_tracker_sensor_1 = __webpack_require__(/*! ./devices/global-tracker-sensor */ "./src/devices/global-tracker-sensor.ts");
 const tracking_zone_1 = __webpack_require__(/*! ./devices/tracking-zone */ "./src/devices/tracking-zone.ts");
 const mqtt_publisher_1 = __webpack_require__(/*! ./integrations/mqtt-publisher */ "./src/integrations/mqtt-publisher.ts");
-const fs = __importStar(__webpack_require__(/*! fs */ "fs"));
-const path = __importStar(__webpack_require__(/*! path */ "path"));
+const editor_html_1 = __webpack_require__(/*! ./ui/editor-html */ "./src/ui/editor-html.ts");
 const { deviceManager, systemManager } = sdk_1.default;
 const TRACKING_ZONE_PREFIX = 'tracking-zone:';
 const GLOBAL_TRACKER_ID = 'global-tracker';
@@ -36227,24 +36283,82 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
     // ==================== Settings Implementation ====================
     async getSettings() {
         const settings = await this.storageSettings.getSettings();
-        // Add topology editor button
+        // Topology editor button that opens modal overlay (appended to body for proper z-index)
+        const onclickCode = `(function(){var e=document.getElementById('sa-topology-modal');if(e)e.remove();var m=document.createElement('div');m.id='sa-topology-modal';m.style.cssText='position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:2147483647;display:flex;align-items:center;justify-content:center;';var c=document.createElement('div');c.style.cssText='width:95vw;height:92vh;max-width:1800px;background:#1a1a2e;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 25px 50px rgba(0,0,0,0.5);';var b=document.createElement('button');b.innerHTML='×';b.style.cssText='position:absolute;top:15px;right:15px;z-index:2147483647;background:#e94560;color:white;border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;';b.onclick=function(){m.remove();};var f=document.createElement('iframe');f.src='/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor';f.style.cssText='width:100%;height:100%;border:none;';c.appendChild(b);c.appendChild(f);m.appendChild(c);m.onclick=function(ev){if(ev.target===m)m.remove();};document.body.appendChild(m);})()`;
         settings.push({
-            key: 'openTopologyEditor',
-            title: 'Open Topology Editor',
-            type: 'button',
-            description: 'Configure camera relationships and transit paths with visual floor plan',
-            group: 'Cameras',
+            key: 'topologyEditor',
+            title: 'Topology Editor',
+            type: 'html',
+            value: `
+        <style>
+          .sa-open-btn {
+            background: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
+            color: white;
+            border: none;
+            padding: 14px 28px;
+            border-radius: 8px;
+            font-size: 15px;
+            font-weight: 600;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            transition: transform 0.2s, box-shadow 0.2s;
+          }
+          .sa-open-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(233, 69, 96, 0.4);
+          }
+          .sa-btn-container {
+            padding: 20px;
+            background: #16213e;
+            border-radius: 8px;
+            text-align: center;
+          }
+          .sa-btn-desc {
+            color: #888;
+            margin-bottom: 15px;
+            font-size: 14px;
+          }
+        </style>
+        <div class="sa-btn-container">
+          <p class="sa-btn-desc">Configure camera positions, connections, and transit times</p>
+          <button class="sa-open-btn" onclick="${onclickCode}">
+            <span>&#9881;</span> Open Topology Editor
+          </button>
+        </div>
+      `,
+            group: 'Topology',
         });
         // Add status display
         const activeCount = this.trackingState.getActiveCount();
+        const topologyJson = this.storage.getItem('topology');
+        let statusText = 'Not configured - add cameras and configure topology';
+        if (this.trackingEngine) {
+            statusText = `Active: Tracking ${activeCount} object${activeCount !== 1 ? 's' : ''}`;
+        }
+        else if (topologyJson) {
+            try {
+                const topology = JSON.parse(topologyJson);
+                if (topology.cameras && topology.cameras.length > 0) {
+                    // Topology exists but engine not running - try to start it
+                    statusText = `Configured (${topology.cameras.length} cameras) - Starting...`;
+                    // Restart the tracking engine asynchronously
+                    this.startTrackingEngine(topology).catch(e => {
+                        this.console.error('Failed to restart tracking engine:', e);
+                    });
+                }
+            }
+            catch (e) {
+                statusText = 'Error loading topology';
+            }
+        }
         settings.push({
             key: 'status',
             title: 'Tracking Status',
             type: 'string',
             readonly: true,
-            value: this.trackingEngine
-                ? `Active: Tracking ${activeCount} object${activeCount !== 1 ? 's' : ''}`
-                : 'Not configured - add cameras and configure topology',
+            value: statusText,
             group: 'Status',
         });
         // Add recent alerts summary
@@ -36259,14 +36373,77 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
                 group: 'Status',
             });
         }
+        // Add alert rules configuration UI
+        const alertRules = this.alertManager.getRules();
+        const rulesHtml = this.generateAlertRulesHtml(alertRules);
+        settings.push({
+            key: 'alertRulesEditor',
+            title: 'Alert Rules',
+            type: 'html',
+            value: rulesHtml,
+            group: 'Alerts',
+        });
         return settings;
     }
+    generateAlertRulesHtml(rules) {
+        const ruleRows = rules.map(rule => `
+      <tr data-rule-id="${rule.id}">
+        <td style="padding:8px;border-bottom:1px solid #333;">
+          <input type="checkbox" ${rule.enabled ? 'checked' : ''}
+                 onchange="(function(el){var rules=JSON.parse(localStorage.getItem('sa-temp-rules')||'[]');var r=rules.find(x=>x.id==='${rule.id}');if(r)r.enabled=el.checked;localStorage.setItem('sa-temp-rules',JSON.stringify(rules));})(this)" />
+        </td>
+        <td style="padding:8px;border-bottom:1px solid #333;color:#fff;">${rule.name}</td>
+        <td style="padding:8px;border-bottom:1px solid #333;color:#888;">${rule.type}</td>
+        <td style="padding:8px;border-bottom:1px solid #333;">
+          <span style="padding:2px 8px;border-radius:4px;font-size:12px;background:${rule.severity === 'critical' ? '#e94560' :
+            rule.severity === 'warning' ? '#f39c12' : '#3498db'};color:white;">${rule.severity}</span>
+        </td>
+        <td style="padding:8px;border-bottom:1px solid #333;color:#888;">${Math.round(rule.cooldown / 1000)}s</td>
+      </tr>
+    `).join('');
+        const initCode = `localStorage.setItem('sa-temp-rules',JSON.stringify(${JSON.stringify(rules)}))`;
+        const saveCode = `(function(){var rules=JSON.parse(localStorage.getItem('sa-temp-rules')||'[]');fetch('/endpoint/@blueharford/scrypted-spatial-awareness/api/alert-rules',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(rules)}).then(r=>r.json()).then(d=>{if(d.success)alert('Alert rules saved!');else alert('Error: '+d.error);}).catch(e=>alert('Error: '+e));})()`;
+        return `
+      <style>
+        .sa-rules-table { width:100%; border-collapse:collapse; margin-top:10px; }
+        .sa-rules-table th { text-align:left; padding:10px 8px; border-bottom:2px solid #e94560; color:#e94560; font-size:13px; }
+        .sa-save-rules-btn {
+          background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
+          color: white;
+          border: none;
+          padding: 10px 20px;
+          border-radius: 6px;
+          font-size: 14px;
+          font-weight: 600;
+          cursor: pointer;
+          margin-top: 15px;
+        }
+        .sa-save-rules-btn:hover { opacity: 0.9; }
+        .sa-rules-container { background:#16213e; border-radius:8px; padding:15px; }
+        .sa-rules-desc { color:#888; font-size:13px; margin-bottom:10px; }
+      </style>
+      <div class="sa-rules-container">
+        <p class="sa-rules-desc">Enable or disable alert types. Movement alerts notify you when someone moves between cameras.</p>
+        <table class="sa-rules-table">
+          <thead>
+            <tr>
+              <th style="width:40px;">On</th>
+              <th>Alert Type</th>
+              <th>Event</th>
+              <th>Severity</th>
+              <th>Cooldown</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${ruleRows}
+          </tbody>
+        </table>
+        <button class="sa-save-rules-btn" onclick="${saveCode}">Save Alert Rules</button>
+        <script>(function(){${initCode}})();</script>
+      </div>
+    `;
+    }
     async putSetting(key, value) {
-        if (key === 'openTopologyEditor') {
-            // The UI will handle opening the editor via HTTP
-            this.console.log('Topology editor requested - access via plugin HTTP endpoint');
-            return;
-        }
         await this.storageSettings.putSetting(key, value);
         // Handle setting changes that require engine restart
         if (key === 'trackedCameras' ||
@@ -36311,11 +36488,17 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
                 return this.handleJourneyRequest(globalId, response);
             }
             if (path.endsWith('/api/topology')) {
-                return this.handleTopologyRequest(request, response);
+                return await this.handleTopologyRequest(request, response);
             }
             if (path.endsWith('/api/alerts')) {
                 return this.handleAlertsRequest(request, response);
             }
+            if (path.endsWith('/api/alert-rules')) {
+                return this.handleAlertRulesRequest(request, response);
+            }
+            if (path.endsWith('/api/cameras')) {
+                return this.handleCamerasRequest(response);
+            }
             if (path.endsWith('/api/floor-plan')) {
                 return this.handleFloorPlanRequest(request, response);
             }
@@ -36387,7 +36570,7 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             });
         }
     }
-    handleTopologyRequest(request, response) {
+    async handleTopologyRequest(request, response) {
         if (request.method === 'GET') {
             const topologyJson = this.storage.getItem('topology');
             const topology = topologyJson ? JSON.parse(topologyJson) : (0, topology_1.createEmptyTopology)();
@@ -36399,7 +36582,7 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             try {
                 const topology = JSON.parse(request.body);
                 this.storage.setItem('topology', JSON.stringify(topology));
-                this.startTrackingEngine(topology);
+                await this.startTrackingEngine(topology);
                 response.send(JSON.stringify({ success: true }), {
                     headers: { 'Content-Type': 'application/json' },
                 });
@@ -36418,6 +36601,58 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             headers: { 'Content-Type': 'application/json' },
         });
     }
+    handleAlertRulesRequest(request, response) {
+        if (request.method === 'GET') {
+            const rules = this.alertManager.getRules();
+            response.send(JSON.stringify(rules), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        else if (request.method === 'PUT' || request.method === 'POST') {
+            try {
+                const rules = JSON.parse(request.body);
+                this.alertManager.setRules(rules);
+                response.send(JSON.stringify({ success: true }), {
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+            catch (e) {
+                response.send(JSON.stringify({ error: 'Invalid rules JSON' }), {
+                    code: 400,
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+        }
+    }
+    handleCamerasRequest(response) {
+        try {
+            // Get all devices with ObjectDetector interface
+            const cameras = [];
+            for (const id of Object.keys(systemManager.getSystemState())) {
+                try {
+                    const device = systemManager.getDeviceById(id);
+                    if (device && device.interfaces?.includes(sdk_1.ScryptedInterface.ObjectDetector)) {
+                        cameras.push({
+                            id: id,
+                            name: device.name || `Camera ${id}`,
+                        });
+                    }
+                }
+                catch (e) {
+                    // Skip devices that can't be accessed
+                }
+            }
+            response.send(JSON.stringify(cameras), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        catch (e) {
+            this.console.error('Error getting cameras:', e);
+            response.send(JSON.stringify([]), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
     handleFloorPlanRequest(request, response) {
         if (request.method === 'GET') {
             const imageData = this.storage.getItem('floorPlanImage');
@@ -36449,49 +36684,9 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
         }
     }
     serveEditorUI(response) {
-        // Try to read the editor HTML from the bundled file
-        try {
-            const editorPath = path.join(__webpack_dirname__, 'ui', 'editor.html');
-            const html = fs.readFileSync(editorPath, 'utf-8');
-            response.send(html, {
-                headers: { 'Content-Type': 'text/html' },
-            });
-        }
-        catch (e) {
-            this.console.error('Failed to load editor UI:', e);
-            // Fallback to basic UI
-            const html = `
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Spatial Awareness - Topology Editor</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 20px; background: #1a1a1a; color: #fff; }
-    h1 { margin-top: 0; }
-    .container { max-width: 1200px; margin: 0 auto; }
-    .btn { background: #0066cc; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>Spatial Awareness - Topology Editor</h1>
-    <p>Error loading visual editor. Configure topology via REST API: <code>PUT /api/topology</code></p>
-    <h3>Current Topology</h3>
-    <pre id="topology-json" style="background: #2a2a2a; padding: 15px; border-radius: 4px; overflow: auto;"></pre>
-  </div>
-  <script>
-    fetch('api/topology').then(r => r.json()).then(data => {
-      document.getElementById('topology-json').textContent = JSON.stringify(data, null, 2);
-    });
-  </script>
-</body>
-</html>`;
-            response.send(html, {
-                headers: { 'Content-Type': 'text/html' },
-            });
-        }
+        response.send(editor_html_1.EDITOR_HTML, {
+            headers: { 'Content-Type': 'text/html' },
+        });
     }
     serveStaticFile(path, response) {
         // Serve static files for the UI
@@ -36587,7 +36782,7 @@ function createDefaultRules() {
             conditions: [],
             severity: 'info',
             notifiers: [],
-            cooldown: 300000, // 5 minutes
+            cooldown: 60000, // 1 minute
         },
         {
             id: 'property-exit',
@@ -36597,7 +36792,17 @@ function createDefaultRules() {
             conditions: [],
             severity: 'info',
             notifiers: [],
-            cooldown: 300000,
+            cooldown: 60000,
+        },
+        {
+            id: 'movement',
+            name: 'Movement Between Cameras',
+            enabled: true,
+            type: 'movement',
+            conditions: [],
+            severity: 'info',
+            notifiers: [],
+            cooldown: 10000, // 10 seconds - we want frequent movement updates
         },
         {
             id: 'unusual-path',
@@ -36645,14 +36850,20 @@ function createDefaultRules() {
 }
 /** Generates a human-readable message for an alert */
 function generateAlertMessage(type, details) {
+    // Capitalize the object class for display (person -> Person, car -> Car, dog -> Dog)
+    const capitalize = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : 'Object';
     const objectDesc = details.objectLabel
-        ? `${details.objectClass} (${details.objectLabel})`
-        : details.objectClass || 'Object';
+        ? `${capitalize(details.objectClass || '')} (${details.objectLabel})`
+        : capitalize(details.objectClass || '');
     switch (type) {
         case 'property_entry':
             return `${objectDesc} entered property via ${details.cameraName || 'unknown camera'}`;
         case 'property_exit':
             return `${objectDesc} exited property via ${details.cameraName || 'unknown camera'}`;
+        case 'movement':
+            const transitSecs = details.transitTime ? Math.round(details.transitTime / 1000) : 0;
+            const transitStr = transitSecs > 0 ? ` (${transitSecs}s transit)` : '';
+            return `${objectDesc} moving from ${details.fromCameraName || 'unknown'} towards ${details.toCameraName || 'unknown'}${transitStr}`;
         case 'unusual_path':
             return `${objectDesc} took unusual path: ${details.actualPath || 'unknown'}`;
         case 'dwell_time':
@@ -37098,6 +37309,712 @@ class TrackingState {
 exports.TrackingState = TrackingState;
 
 
+/***/ },
+
+/***/ "./src/ui/editor-html.ts"
+/*!*******************************!*\
+  !*** ./src/ui/editor-html.ts ***!
+  \*******************************/
+(__unused_webpack_module, exports) {
+
+"use strict";
+
+/**
+ * Editor HTML embedded as a string for bundling
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.EDITOR_HTML = void 0;
+exports.EDITOR_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spatial Awareness - Topology Editor</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; }
+    .container { display: flex; height: 100vh; }
+    .sidebar { width: 300px; background: #16213e; border-right: 1px solid #0f3460; display: flex; flex-direction: column; overflow: hidden; }
+    .sidebar-header { padding: 20px; border-bottom: 1px solid #0f3460; }
+    .sidebar-header h1 { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
+    .sidebar-header p { font-size: 12px; color: #888; }
+    .sidebar-content { flex: 1; overflow-y: auto; padding: 15px; }
+    .section { margin-bottom: 20px; }
+    .section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #888; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
+    .btn { background: #0f3460; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: background 0.2s; }
+    .btn:hover { background: #1a4a7a; }
+    .btn-primary { background: #e94560; }
+    .btn-primary:hover { background: #ff6b6b; }
+    .btn-small { padding: 4px 8px; font-size: 11px; }
+    .camera-item, .connection-item { background: #0f3460; border-radius: 6px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: background 0.2s; }
+    .camera-item:hover, .connection-item:hover { background: #1a4a7a; }
+    .camera-item.selected, .connection-item.selected { outline: 2px solid #e94560; }
+    .camera-name { font-weight: 500; margin-bottom: 4px; }
+    .camera-info { font-size: 11px; color: #888; }
+    .editor { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+    .toolbar { background: #16213e; border-bottom: 1px solid #0f3460; padding: 10px 20px; display: flex; gap: 10px; align-items: center; }
+    .toolbar-group { display: flex; gap: 5px; padding-right: 15px; border-right: 1px solid #0f3460; margin-right: 5px; }
+    .toolbar-group:last-child { border-right: none; }
+    .canvas-container { flex: 1; position: relative; overflow: hidden; background: #0f0f1a; }
+    #floor-plan-canvas { position: absolute; top: 0; left: 0; }
+    .canvas-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #666; }
+    .canvas-placeholder h2 { margin-bottom: 15px; }
+    .properties-panel { width: 280px; background: #16213e; border-left: 1px solid #0f3460; overflow-y: auto; padding: 15px; }
+    .properties-panel h3 { font-size: 14px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #0f3460; }
+    .form-group { margin-bottom: 15px; }
+    .form-group label { display: block; font-size: 12px; color: #888; margin-bottom: 5px; }
+    .form-group input, .form-group select { width: 100%; padding: 8px 10px; background: #0f3460; border: 1px solid #1a4a7a; border-radius: 4px; color: #fff; font-size: 13px; }
+    .form-group input:focus, .form-group select:focus { outline: none; border-color: #e94560; }
+    .checkbox-group { display: flex; align-items: center; gap: 8px; }
+    .checkbox-group input[type="checkbox"] { width: auto; }
+    .transit-time-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
+    .transit-time-inputs input { text-align: center; }
+    .transit-time-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 10px; color: #666; text-align: center; }
+    .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center; }
+    .modal-overlay.active { display: flex; }
+    .modal { background: #16213e; border-radius: 8px; padding: 25px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
+    .modal h2 { margin-bottom: 20px; }
+    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
+    .upload-zone { border: 2px dashed #0f3460; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
+    .upload-zone:hover { border-color: #e94560; background: rgba(233, 69, 96, 0.1); }
+    .upload-zone input { display: none; }
+    .status-bar { background: #0f3460; padding: 8px 20px; font-size: 12px; color: #888; display: flex; justify-content: space-between; }
+    .status-indicator { display: flex; align-items: center; gap: 6px; }
+    .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; }
+    .status-dot.warning { background: #ff9800; }
+    .status-dot.error { background: #f44336; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h1>Spatial Awareness</h1>
+        <p>Topology Editor</p>
+      </div>
+      <div class="sidebar-content">
+        <div class="section">
+          <div class="section-title">
+            <span>Cameras</span>
+            <button class="btn btn-small" onclick="openAddCameraModal()">+ Add</button>
+          </div>
+          <div id="camera-list">
+            <div class="camera-item" style="color: #666; text-align: center; cursor: default;">No cameras configured</div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="section-title">
+            <span>Connections</span>
+            <button class="btn btn-small" onclick="openAddConnectionModal()">+ Add</button>
+          </div>
+          <div id="connection-list">
+            <div class="connection-item" style="color: #666; text-align: center; cursor: default;">No connections configured</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="editor">
+      <div class="toolbar">
+        <div class="toolbar-group">
+          <button class="btn" onclick="uploadFloorPlan()">Upload Image</button>
+          <button class="btn" onclick="useBlankCanvas()">Blank Canvas</button>
+        </div>
+        <div class="toolbar-group">
+          <button class="btn" id="tool-select" onclick="setTool('select')">Select</button>
+          <button class="btn" id="tool-wall" onclick="setTool('wall')">Draw Wall</button>
+          <button class="btn" id="tool-room" onclick="setTool('room')">Draw Room</button>
+          <button class="btn" id="tool-camera" onclick="setTool('camera')">Place Camera</button>
+          <button class="btn" id="tool-connect" onclick="setTool('connect')">Connect</button>
+        </div>
+        <div class="toolbar-group">
+          <button class="btn" onclick="clearDrawings()">Clear Drawings</button>
+        </div>
+        <div class="toolbar-group">
+          <button class="btn btn-primary" onclick="saveTopology()">Save</button>
+        </div>
+      </div>
+      <div class="canvas-container">
+        <canvas id="floor-plan-canvas"></canvas>
+        <div class="canvas-placeholder" id="canvas-placeholder">
+          <h2>Floor Plan Editor</h2>
+          <p>Upload an image or use a blank canvas to draw your floor plan</p>
+          <br>
+          <div style="display: flex; gap: 15px; justify-content: center;">
+            <button class="btn btn-primary" onclick="uploadFloorPlan()">Upload Image</button>
+            <button class="btn" onclick="useBlankCanvas()">Use Blank Canvas</button>
+          </div>
+        </div>
+      </div>
+      <div class="status-bar">
+        <div class="status-indicator">
+          <div class="status-dot" id="status-dot"></div>
+          <span id="status-text">Ready</span>
+        </div>
+        <div>
+          <span id="camera-count">0</span> cameras | <span id="connection-count">0</span> connections
+        </div>
+      </div>
+    </div>
+    <div class="properties-panel" id="properties-panel">
+      <h3>Properties</h3>
+      <p style="color: #666; font-size: 13px;">Select a camera or connection to edit its properties.</p>
+    </div>
+  </div>
+
+  <div class="modal-overlay" id="add-camera-modal">
+    <div class="modal">
+      <h2>Add Camera</h2>
+      <div class="form-group">
+        <label>Camera Device</label>
+        <select id="camera-device-select"><option value="">Loading cameras...</option></select>
+      </div>
+      <div class="form-group">
+        <label>Display Name</label>
+        <input type="text" id="camera-name-input" placeholder="e.g., Front Door Camera">
+      </div>
+      <div class="form-group">
+        <label class="checkbox-group">
+          <input type="checkbox" id="camera-entry-checkbox">
+          Entry Point (objects can enter property here)
+        </label>
+      </div>
+      <div class="form-group">
+        <label class="checkbox-group">
+          <input type="checkbox" id="camera-exit-checkbox">
+          Exit Point (objects can exit property here)
+        </label>
+      </div>
+      <div class="modal-actions">
+        <button class="btn" onclick="closeModal('add-camera-modal')">Cancel</button>
+        <button class="btn btn-primary" onclick="addCamera()">Add Camera</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-overlay" id="add-connection-modal">
+    <div class="modal">
+      <h2>Add Connection</h2>
+      <div class="form-group">
+        <label>Connection Name</label>
+        <input type="text" id="connection-name-input" placeholder="e.g., Driveway to Front Door">
+      </div>
+      <div class="form-group">
+        <label>From Camera</label>
+        <select id="connection-from-select"></select>
+      </div>
+      <div class="form-group">
+        <label>To Camera</label>
+        <select id="connection-to-select"></select>
+      </div>
+      <div class="form-group">
+        <label>Transit Time (seconds)</label>
+        <div class="transit-time-inputs">
+          <input type="number" id="transit-min" placeholder="Min" value="3">
+          <input type="number" id="transit-typical" placeholder="Typical" value="10">
+          <input type="number" id="transit-max" placeholder="Max" value="30">
+        </div>
+        <div class="transit-time-labels">
+          <span>Minimum</span>
+          <span>Typical</span>
+          <span>Maximum</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="checkbox-group">
+          <input type="checkbox" id="connection-bidirectional" checked>
+          Bidirectional (works both ways)
+        </label>
+      </div>
+      <div class="modal-actions">
+        <button class="btn" onclick="closeModal('add-connection-modal')">Cancel</button>
+        <button class="btn btn-primary" onclick="addConnection()">Add Connection</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-overlay" id="upload-modal">
+    <div class="modal">
+      <h2>Upload Floor Plan</h2>
+      <div class="upload-zone" onclick="document.getElementById('floor-plan-input').click()">
+        <p>Click to select an image<br><small>PNG, JPG, or SVG</small></p>
+        <input type="file" id="floor-plan-input" accept="image/*" onchange="handleFloorPlanUpload(event)">
+      </div>
+      <div class="modal-actions">
+        <button class="btn" onclick="closeModal('upload-modal')">Cancel</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let topology = { version: '1.0', cameras: [], connections: [], globalZones: [], floorPlan: null, drawings: [] };
+    let selectedItem = null;
+    let currentTool = 'select';
+    let floorPlanImage = null;
+    let availableCameras = [];
+    let isDrawing = false;
+    let drawStart = null;
+    let currentDrawing = null;
+    let blankCanvasMode = false;
+    const canvas = document.getElementById('floor-plan-canvas');
+    const ctx = canvas.getContext('2d');
+
+    async function init() {
+      await loadTopology();
+      await loadAvailableCameras();
+      resizeCanvas();
+      render();
+      updateUI();
+    }
+
+    async function loadTopology() {
+      try {
+        const response = await fetch('../api/topology');
+        if (response.ok) {
+          topology = await response.json();
+          if (!topology.drawings) topology.drawings = [];
+          if (topology.floorPlan?.imageData) {
+            await loadFloorPlanImage(topology.floorPlan.imageData);
+          } else if (topology.floorPlan?.type === 'blank') {
+            blankCanvasMode = true;
+          }
+        }
+      } catch (e) { console.error('Failed to load topology:', e); }
+    }
+
+    async function loadAvailableCameras() {
+      try {
+        const response = await fetch('../api/cameras');
+        if (response.ok) {
+          availableCameras = await response.json();
+        } else {
+          availableCameras = [];
+        }
+      } catch (e) {
+        console.error('Failed to load cameras:', e);
+        availableCameras = [];
+      }
+      updateCameraSelects();
+    }
+
+    async function saveTopology() {
+      try {
+        setStatus('Saving...', 'warning');
+        const response = await fetch('../api/topology', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(topology)
+        });
+        if (response.ok) { setStatus('Saved successfully', 'success'); }
+        else { setStatus('Failed to save', 'error'); }
+      } catch (e) { console.error('Failed to save topology:', e); setStatus('Failed to save', 'error'); }
+    }
+
+    function resizeCanvas() {
+      const container = canvas.parentElement;
+      canvas.width = container.clientWidth;
+      canvas.height = container.clientHeight;
+    }
+
+    function render() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Draw grid for blank canvas
+      if (blankCanvasMode && !floorPlanImage) {
+        document.getElementById('canvas-placeholder').style.display = 'none';
+        ctx.fillStyle = '#1a1a2e';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = '#2a2a4e';
+        ctx.lineWidth = 1;
+        const gridSize = 40;
+        for (let x = 0; x < canvas.width; x += gridSize) {
+          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke();
+        }
+        for (let y = 0; y < canvas.height; y += gridSize) {
+          ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
+        }
+      } else if (floorPlanImage) {
+        document.getElementById('canvas-placeholder').style.display = 'none';
+        const scale = Math.min(canvas.width / floorPlanImage.width, canvas.height / floorPlanImage.height) * 0.9;
+        const x = (canvas.width - floorPlanImage.width * scale) / 2;
+        const y = (canvas.height - floorPlanImage.height * scale) / 2;
+        ctx.drawImage(floorPlanImage, x, y, floorPlanImage.width * scale, floorPlanImage.height * scale);
+      } else {
+        document.getElementById('canvas-placeholder').style.display = 'block';
+      }
+
+      // Draw saved drawings (walls and rooms)
+      if (topology.drawings) {
+        for (const drawing of topology.drawings) {
+          if (drawing.type === 'wall') {
+            ctx.beginPath();
+            ctx.moveTo(drawing.x1, drawing.y1);
+            ctx.lineTo(drawing.x2, drawing.y2);
+            ctx.strokeStyle = '#888';
+            ctx.lineWidth = 4;
+            ctx.stroke();
+          } else if (drawing.type === 'room') {
+            ctx.strokeStyle = '#666';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(drawing.x, drawing.y, drawing.width, drawing.height);
+            ctx.fillStyle = 'rgba(100, 100, 150, 0.1)';
+            ctx.fillRect(drawing.x, drawing.y, drawing.width, drawing.height);
+            if (drawing.label) {
+              ctx.fillStyle = '#888';
+              ctx.font = '12px sans-serif';
+              ctx.textAlign = 'center';
+              ctx.fillText(drawing.label, drawing.x + drawing.width/2, drawing.y + drawing.height/2);
+            }
+          }
+        }
+      }
+
+      // Draw current drawing in progress
+      if (currentDrawing) {
+        if (currentDrawing.type === 'wall') {
+          ctx.beginPath();
+          ctx.moveTo(currentDrawing.x1, currentDrawing.y1);
+          ctx.lineTo(currentDrawing.x2, currentDrawing.y2);
+          ctx.strokeStyle = '#e94560';
+          ctx.lineWidth = 4;
+          ctx.stroke();
+        } else if (currentDrawing.type === 'room') {
+          ctx.strokeStyle = '#e94560';
+          ctx.lineWidth = 2;
+          ctx.strokeRect(currentDrawing.x, currentDrawing.y, currentDrawing.width, currentDrawing.height);
+        }
+      }
+      for (const conn of topology.connections) {
+        const fromCam = topology.cameras.find(c => c.deviceId === conn.fromCameraId);
+        const toCam = topology.cameras.find(c => c.deviceId === conn.toCameraId);
+        if (fromCam?.floorPlanPosition && toCam?.floorPlanPosition) {
+          drawConnection(fromCam.floorPlanPosition, toCam.floorPlanPosition, conn);
+        }
+      }
+      for (const camera of topology.cameras) {
+        if (camera.floorPlanPosition) { drawCamera(camera); }
+      }
+    }
+
+    function drawCamera(camera) {
+      const pos = camera.floorPlanPosition;
+      const isSelected = selectedItem?.type === 'camera' && selectedItem?.id === camera.deviceId;
+      ctx.beginPath();
+      ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
+      ctx.fillStyle = isSelected ? '#e94560' : '#0f3460';
+      ctx.fill();
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.fillStyle = '#fff';
+      ctx.font = '12px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('CAM', pos.x, pos.y);
+      ctx.fillText(camera.name, pos.x, pos.y + 35);
+    }
+
+    function drawConnection(from, to, conn) {
+      const isSelected = selectedItem?.type === 'connection' && selectedItem?.id === conn.id;
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(to.x, to.y);
+      ctx.strokeStyle = isSelected ? '#e94560' : '#4caf50';
+      ctx.lineWidth = isSelected ? 4 : 2;
+      ctx.stroke();
+      if (!conn.bidirectional) {
+        const angle = Math.atan2(to.y - from.y, to.x - from.x);
+        const midX = (from.x + to.x) / 2;
+        const midY = (from.y + to.y) / 2;
+        ctx.beginPath();
+        ctx.moveTo(midX, midY);
+        ctx.lineTo(midX - 10 * Math.cos(angle - 0.5), midY - 10 * Math.sin(angle - 0.5));
+        ctx.lineTo(midX - 10 * Math.cos(angle + 0.5), midY - 10 * Math.sin(angle + 0.5));
+        ctx.closePath();
+        ctx.fillStyle = isSelected ? '#e94560' : '#4caf50';
+        ctx.fill();
+      }
+    }
+
+    function uploadFloorPlan() { document.getElementById('upload-modal').classList.add('active'); }
+
+    async function handleFloorPlanUpload(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const imageData = e.target.result;
+        await loadFloorPlanImage(imageData);
+        topology.floorPlan = { imageData, width: floorPlanImage.width, height: floorPlanImage.height };
+        closeModal('upload-modal');
+        render();
+      };
+      reader.readAsDataURL(file);
+    }
+
+    function loadFloorPlanImage(imageData) {
+      return new Promise((resolve) => {
+        floorPlanImage = new Image();
+        floorPlanImage.onload = resolve;
+        floorPlanImage.src = imageData;
+      });
+    }
+
+    function openAddCameraModal() { document.getElementById('add-camera-modal').classList.add('active'); }
+
+    function addCamera() {
+      const deviceId = document.getElementById('camera-device-select').value;
+      if (!deviceId) {
+        alert('Please select a camera');
+        return;
+      }
+      const selectedCam = availableCameras.find(c => c.id === deviceId);
+      const customName = document.getElementById('camera-name-input').value;
+      const name = customName || (selectedCam ? selectedCam.name : 'New Camera');
+      const isEntry = document.getElementById('camera-entry-checkbox').checked;
+      const isExit = document.getElementById('camera-exit-checkbox').checked;
+      // Use pending position from click, or default to center
+      const pos = topology._pendingCameraPos || { x: canvas.width / 2 + Math.random() * 100 - 50, y: canvas.height / 2 + Math.random() * 100 - 50 };
+      delete topology._pendingCameraPos;
+      const camera = {
+        deviceId: deviceId,
+        nativeId: 'cam-' + Date.now(),
+        name,
+        isEntryPoint: isEntry,
+        isExitPoint: isExit,
+        trackClasses: ['person', 'car', 'animal'],
+        floorPlanPosition: pos
+      };
+      topology.cameras.push(camera);
+      closeModal('add-camera-modal');
+      // Clear form
+      document.getElementById('camera-name-input').value = '';
+      document.getElementById('camera-entry-checkbox').checked = false;
+      document.getElementById('camera-exit-checkbox').checked = false;
+      updateCameraSelects();
+      updateUI();
+      render();
+    }
+
+    function openAddConnectionModal() {
+      if (topology.cameras.length < 2) { alert('Add at least 2 cameras before creating connections'); return; }
+      updateCameraSelects();
+      document.getElementById('add-connection-modal').classList.add('active');
+    }
+
+    function updateCameraSelects() {
+      // Update camera device select (for adding new cameras)
+      const cameraDeviceSelect = document.getElementById('camera-device-select');
+      if (availableCameras.length > 0) {
+        const existingIds = topology.cameras.map(c => c.deviceId);
+        const available = availableCameras.filter(c => !existingIds.includes(c.id));
+        if (available.length > 0) {
+          cameraDeviceSelect.innerHTML = '<option value="">Select a camera...</option>' +
+            available.map(c => '<option value="' + c.id + '">' + c.name + '</option>').join('');
+        } else {
+          cameraDeviceSelect.innerHTML = '<option value="">All cameras already added</option>';
+        }
+      } else {
+        cameraDeviceSelect.innerHTML = '<option value="">No cameras with object detection found</option>';
+      }
+
+      // Update connection selects (for existing topology cameras)
+      const options = topology.cameras.map(c => '<option value="' + c.deviceId + '">' + c.name + '</option>').join('');
+      document.getElementById('connection-from-select').innerHTML = options;
+      document.getElementById('connection-to-select').innerHTML = options;
+    }
+
+    function addConnection() {
+      const name = document.getElementById('connection-name-input').value;
+      const fromId = document.getElementById('connection-from-select').value;
+      const toId = document.getElementById('connection-to-select').value;
+      const minTransit = parseInt(document.getElementById('transit-min').value) * 1000;
+      const typicalTransit = parseInt(document.getElementById('transit-typical').value) * 1000;
+      const maxTransit = parseInt(document.getElementById('transit-max').value) * 1000;
+      const bidirectional = document.getElementById('connection-bidirectional').checked;
+      if (fromId === toId) { alert('Please select different cameras'); return; }
+      const connection = {
+        id: 'conn-' + Date.now(),
+        fromCameraId: fromId,
+        toCameraId: toId,
+        name: name || fromId + ' to ' + toId,
+        exitZone: [],
+        entryZone: [],
+        transitTime: { min: minTransit, typical: typicalTransit, max: maxTransit },
+        bidirectional
+      };
+      topology.connections.push(connection);
+      closeModal('add-connection-modal');
+      updateUI();
+      render();
+    }
+
+    function updateUI() {
+      const cameraList = document.getElementById('camera-list');
+      if (topology.cameras.length === 0) {
+        cameraList.innerHTML = '<div class="camera-item" style="color: #666; text-align: center; cursor: default;">No cameras configured</div>';
+      } else {
+        cameraList.innerHTML = topology.cameras.map(c => '<div class="camera-item ' + (selectedItem?.type === 'camera' && selectedItem?.id === c.deviceId ? 'selected' : '') + '" onclick="selectCamera(\\'' + c.deviceId + '\\')"><div class="camera-name">CAM ' + c.name + '</div><div class="camera-info">' + (c.isEntryPoint ? 'Entry ' : '') + (c.isExitPoint ? 'Exit' : '') + '</div></div>').join('');
+      }
+      const connectionList = document.getElementById('connection-list');
+      if (topology.connections.length === 0) {
+        connectionList.innerHTML = '<div class="connection-item" style="color: #666; text-align: center; cursor: default;">No connections configured</div>';
+      } else {
+        connectionList.innerHTML = topology.connections.map(c => '<div class="connection-item ' + (selectedItem?.type === 'connection' && selectedItem?.id === c.id ? 'selected' : '') + '" onclick="selectConnection(\\'' + c.id + '\\')"><div class="camera-name">' + c.name + '</div><div class="camera-info">' + (c.transitTime.typical / 1000) + 's typical ' + (c.bidirectional ? '<->' : '->') + '</div></div>').join('');
+      }
+      document.getElementById('camera-count').textContent = topology.cameras.length;
+      document.getElementById('connection-count').textContent = topology.connections.length;
+    }
+
+    function selectCamera(deviceId) {
+      selectedItem = { type: 'camera', id: deviceId };
+      const camera = topology.cameras.find(c => c.deviceId === deviceId);
+      showCameraProperties(camera);
+      updateUI();
+      render();
+    }
+
+    function selectConnection(connId) {
+      selectedItem = { type: 'connection', id: connId };
+      const connection = topology.connections.find(c => c.id === connId);
+      showConnectionProperties(connection);
+      updateUI();
+      render();
+    }
+
+    function showCameraProperties(camera) {
+      const panel = document.getElementById('properties-panel');
+      panel.innerHTML = '<h3>Camera Properties</h3><div class="form-group"><label>Name</label><input type="text" value="' + camera.name + '" onchange="updateCameraName(\\'' + camera.deviceId + '\\', this.value)"></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isEntryPoint ? 'checked' : '') + ' onchange="updateCameraEntry(\\'' + camera.deviceId + '\\', this.checked)">Entry Point</label></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isExitPoint ? 'checked' : '') + ' onchange="updateCameraExit(\\'' + camera.deviceId + '\\', this.checked)">Exit Point</label></div><div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteCamera(\\'' + camera.deviceId + '\\')">Delete Camera</button></div>';
+    }
+
+    function showConnectionProperties(connection) {
+      const panel = document.getElementById('properties-panel');
+      panel.innerHTML = '<h3>Connection Properties</h3><div class="form-group"><label>Name</label><input type="text" value="' + connection.name + '" onchange="updateConnectionName(\\'' + connection.id + '\\', this.value)"></div><div class="form-group"><label>Transit Time (seconds)</label><div class="transit-time-inputs"><input type="number" value="' + (connection.transitTime.min / 1000) + '" onchange="updateTransitTime(\\'' + connection.id + '\\', \\'min\\', this.value)"><input type="number" value="' + (connection.transitTime.typical / 1000) + '" onchange="updateTransitTime(\\'' + connection.id + '\\', \\'typical\\', this.value)"><input type="number" value="' + (connection.transitTime.max / 1000) + '" onchange="updateTransitTime(\\'' + connection.id + '\\', \\'max\\', this.value)"></div><div class="transit-time-labels"><span>Min</span><span>Typical</span><span>Max</span></div></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (connection.bidirectional ? 'checked' : '') + ' onchange="updateConnectionBidi(\\'' + connection.id + '\\', this.checked)">Bidirectional</label></div><div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteConnection(\\'' + connection.id + '\\')">Delete Connection</button></div>';
+    }
+
+    function updateCameraName(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.name = value; updateUI(); }
+    function updateCameraEntry(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isEntryPoint = value; }
+    function updateCameraExit(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isExitPoint = value; }
+    function updateConnectionName(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.name = value; updateUI(); }
+    function updateTransitTime(id, field, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.transitTime[field] = parseInt(value) * 1000; }
+    function updateConnectionBidi(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.bidirectional = value; render(); }
+    function deleteCamera(id) { if (!confirm('Delete this camera?')) return; topology.cameras = topology.cameras.filter(c => c.deviceId !== id); topology.connections = topology.connections.filter(c => c.fromCameraId !== id && c.toCameraId !== id); selectedItem = null; document.getElementById('properties-panel').innerHTML = '<h3>Properties</h3><p style="color: #666;">Select a camera or connection.</p>'; updateUI(); render(); }
+    function deleteConnection(id) { if (!confirm('Delete this connection?')) return; topology.connections = topology.connections.filter(c => c.id !== id); selectedItem = null; document.getElementById('properties-panel').innerHTML = '<h3>Properties</h3><p style="color: #666;">Select a camera or connection.</p>'; updateUI(); render(); }
+    function setTool(tool) {
+      currentTool = tool;
+      setStatus('Tool: ' + tool, 'success');
+      document.querySelectorAll('.toolbar .btn').forEach(b => b.style.background = '');
+      const btn = document.getElementById('tool-' + tool);
+      if (btn) btn.style.background = '#e94560';
+    }
+
+    function useBlankCanvas() {
+      blankCanvasMode = true;
+      floorPlanImage = null;
+      topology.floorPlan = { type: 'blank', width: canvas.width, height: canvas.height };
+      render();
+      setStatus('Blank canvas ready - use Draw Wall or Draw Room tools', 'success');
+    }
+
+    function clearDrawings() {
+      if (!confirm('Clear all drawings (walls and rooms)?')) return;
+      topology.drawings = [];
+      render();
+      setStatus('Drawings cleared', 'success');
+    }
+
+    function closeModal(id) { document.getElementById(id).classList.remove('active'); }
+    function setStatus(text, type) { document.getElementById('status-text').textContent = text; const dot = document.getElementById('status-dot'); dot.className = 'status-dot'; if (type === 'warning') dot.classList.add('warning'); if (type === 'error') dot.classList.add('error'); }
+
+    let dragging = null;
+
+    canvas.addEventListener('mousedown', (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      if (currentTool === 'select') {
+        for (const camera of topology.cameras) {
+          if (camera.floorPlanPosition) {
+            const dist = Math.hypot(x - camera.floorPlanPosition.x, y - camera.floorPlanPosition.y);
+            if (dist < 25) { selectCamera(camera.deviceId); dragging = camera; return; }
+          }
+        }
+      } else if (currentTool === 'wall') {
+        isDrawing = true;
+        drawStart = { x, y };
+        currentDrawing = { type: 'wall', x1: x, y1: y, x2: x, y2: y };
+      } else if (currentTool === 'room') {
+        isDrawing = true;
+        drawStart = { x, y };
+        currentDrawing = { type: 'room', x: x, y: y, width: 0, height: 0 };
+      } else if (currentTool === 'camera') {
+        openAddCameraModal();
+        // Will position camera at click location after adding
+        topology._pendingCameraPos = { x, y };
+      }
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      if (dragging) {
+        dragging.floorPlanPosition.x = x;
+        dragging.floorPlanPosition.y = y;
+        render();
+      } else if (isDrawing && currentDrawing) {
+        if (currentDrawing.type === 'wall') {
+          currentDrawing.x2 = x;
+          currentDrawing.y2 = y;
+        } else if (currentDrawing.type === 'room') {
+          currentDrawing.width = x - drawStart.x;
+          currentDrawing.height = y - drawStart.y;
+        }
+        render();
+      }
+    });
+
+    canvas.addEventListener('mouseup', (e) => {
+      if (isDrawing && currentDrawing) {
+        if (!topology.drawings) topology.drawings = [];
+        // Normalize room coordinates if drawn backwards
+        if (currentDrawing.type === 'room') {
+          if (currentDrawing.width < 0) {
+            currentDrawing.x += currentDrawing.width;
+            currentDrawing.width = Math.abs(currentDrawing.width);
+          }
+          if (currentDrawing.height < 0) {
+            currentDrawing.y += currentDrawing.height;
+            currentDrawing.height = Math.abs(currentDrawing.height);
+          }
+          // Only add if room is big enough
+          if (currentDrawing.width > 20 && currentDrawing.height > 20) {
+            const label = prompt('Room name (optional):');
+            if (label) currentDrawing.label = label;
+            topology.drawings.push(currentDrawing);
+          }
+        } else if (currentDrawing.type === 'wall') {
+          // Only add if wall is long enough
+          const len = Math.hypot(currentDrawing.x2 - currentDrawing.x1, currentDrawing.y2 - currentDrawing.y1);
+          if (len > 20) {
+            topology.drawings.push(currentDrawing);
+          }
+        }
+        isDrawing = false;
+        currentDrawing = null;
+        render();
+      }
+      dragging = null;
+    });
+
+    window.addEventListener('resize', () => { resizeCanvas(); render(); });
+    init();
+  </script>
+</body>
+</html>`;
+
+
 /***/ },
 
 /***/ "assert"
@@ -37221,17 +38138,6 @@ module.exports = require("os");
 
 /***/ },
 
-/***/ "path"
-/*!***********************!*\
-  !*** external "path" ***!
-  \***********************/
-(module) {
-
-"use strict";
-module.exports = require("path");
-
-/***/ },
-
 /***/ "stream"
 /*!*************************!*\
   !*** external "stream" ***!