@blueharford/scrypted-spatial-awareness 0.3.0 → 0.4.1

package/out/main.nodejs.js

@@ -35627,6 +35627,7 @@ exports.TrackingEngine = void 0;
 const sdk_1 = __importStar(__webpack_require__(/*! @scrypted/sdk */ "./node_modules/@scrypted/sdk/dist/src/index.js"));
 const topology_1 = __webpack_require__(/*! ../models/topology */ "./src/models/topology.ts");
 const tracked_object_1 = __webpack_require__(/*! ../models/tracked-object */ "./src/models/tracked-object.ts");
+const training_1 = __webpack_require__(/*! ../models/training */ "./src/models/training.ts");
 const object_correlator_1 = __webpack_require__(/*! ./object-correlator */ "./src/core/object-correlator.ts");
 const spatial_reasoning_1 = __webpack_require__(/*! ./spatial-reasoning */ "./src/core/spatial-reasoning.ts");
 const { systemManager } = sdk_1.default;
@@ -35657,6 +35658,13 @@ class TrackingEngine {
     connectionSuggestions = new Map();
     /** Minimum observations before suggesting a connection */
     MIN_OBSERVATIONS_FOR_SUGGESTION = 3;
+    // ==================== Training Mode ====================
+    /** Current training session (null if not training) */
+    trainingSession = null;
+    /** Training configuration */
+    trainingConfig = training_1.DEFAULT_TRAINING_CONFIG;
+    /** Callback for training status updates */
+    onTrainingStatusUpdate;
     constructor(topology, state, alertManager, config, console) {
         this.topology = topology;
         this.state = state;
@@ -35750,6 +35758,10 @@ class TrackingEngine {
             // Skip low-confidence detections
             if (detection.score < 0.5)
                 continue;
+            // If in training mode, record trainer detections
+            if (this.isTrainingActive() && detection.className === 'person') {
+                this.recordTrainerDetection(cameraId, detection, detection.score);
+            }
             // Skip classes we're not tracking on this camera
             if (camera.trackClasses.length > 0 &&
                 !camera.trackClasses.includes(detection.className)) {
@@ -36282,6 +36294,464 @@ class TrackingEngine {
         }
         return { segments, currentLocation };
     }
+    // ==================== Training Mode Methods ====================
+    /** Set callback for training status updates */
+    setTrainingStatusCallback(callback) {
+        this.onTrainingStatusUpdate = callback;
+    }
+    /** Get current training session (if any) */
+    getTrainingSession() {
+        return this.trainingSession;
+    }
+    /** Check if training mode is active */
+    isTrainingActive() {
+        return this.trainingSession !== null && this.trainingSession.state === 'active';
+    }
+    /** Start a new training session */
+    startTrainingSession(trainerName, config) {
+        // End any existing session
+        if (this.trainingSession && this.trainingSession.state === 'active') {
+            this.endTrainingSession();
+        }
+        // Apply custom config
+        if (config) {
+            this.trainingConfig = { ...training_1.DEFAULT_TRAINING_CONFIG, ...config };
+        }
+        // Create new session
+        this.trainingSession = (0, training_1.createTrainingSession)(trainerName);
+        this.trainingSession.state = 'active';
+        this.console.log(`Training session started: ${this.trainingSession.id}`);
+        this.emitTrainingStatus();
+        return this.trainingSession;
+    }
+    /** Pause the current training session */
+    pauseTrainingSession() {
+        if (!this.trainingSession || this.trainingSession.state !== 'active') {
+            return false;
+        }
+        this.trainingSession.state = 'paused';
+        this.trainingSession.updatedAt = Date.now();
+        this.console.log('Training session paused');
+        this.emitTrainingStatus();
+        return true;
+    }
+    /** Resume a paused training session */
+    resumeTrainingSession() {
+        if (!this.trainingSession || this.trainingSession.state !== 'paused') {
+            return false;
+        }
+        this.trainingSession.state = 'active';
+        this.trainingSession.updatedAt = Date.now();
+        this.console.log('Training session resumed');
+        this.emitTrainingStatus();
+        return true;
+    }
+    /** End the current training session */
+    endTrainingSession() {
+        if (!this.trainingSession) {
+            return null;
+        }
+        this.trainingSession.state = 'completed';
+        this.trainingSession.completedAt = Date.now();
+        this.trainingSession.updatedAt = Date.now();
+        this.trainingSession.stats = (0, training_1.calculateTrainingStats)(this.trainingSession, this.topology.cameras.length);
+        this.console.log(`Training session completed: ${this.trainingSession.stats.camerasVisited} cameras, ` +
+            `${this.trainingSession.stats.transitsRecorded} transits, ` +
+            `${this.trainingSession.stats.landmarksMarked} landmarks`);
+        const session = this.trainingSession;
+        this.emitTrainingStatus();
+        return session;
+    }
+    /** Record that trainer was detected on a camera */
+    recordTrainerDetection(cameraId, detection, detectionConfidence) {
+        if (!this.trainingSession || this.trainingSession.state !== 'active') {
+            return;
+        }
+        // Only process person detections during training
+        if (detection.className !== 'person') {
+            return;
+        }
+        // Check confidence threshold
+        if (detectionConfidence < this.trainingConfig.minDetectionConfidence) {
+            return;
+        }
+        const camera = (0, topology_1.findCamera)(this.topology, cameraId);
+        const cameraName = camera?.name || cameraId;
+        const now = Date.now();
+        // Check if this is a new camera or same camera
+        if (this.trainingSession.currentCameraId === cameraId) {
+            // Update existing visit
+            const currentVisit = this.trainingSession.visits.find(v => v.cameraId === cameraId && v.departedAt === null);
+            if (currentVisit) {
+                currentVisit.detectionConfidence = Math.max(currentVisit.detectionConfidence, detectionConfidence);
+                if (detection.boundingBox) {
+                    currentVisit.boundingBox = detection.boundingBox;
+                }
+            }
+        }
+        else {
+            // This is a new camera - check for transition
+            if (this.trainingSession.currentCameraId && this.trainingSession.transitStartTime) {
+                // Complete the transit
+                const transitDuration = now - this.trainingSession.transitStartTime;
+                const fromCameraId = this.trainingSession.previousCameraId || this.trainingSession.currentCameraId;
+                const fromCamera = (0, topology_1.findCamera)(this.topology, fromCameraId);
+                // Mark departure from previous camera
+                const prevVisit = this.trainingSession.visits.find(v => v.cameraId === fromCameraId && v.departedAt === null);
+                if (prevVisit) {
+                    prevVisit.departedAt = this.trainingSession.transitStartTime;
+                }
+                // Check for overlap (both cameras detecting at same time)
+                const hasOverlap = this.checkTrainingOverlap(fromCameraId, cameraId, now);
+                // Record the transit
+                const transit = {
+                    id: `transit-${now}`,
+                    fromCameraId,
+                    toCameraId: cameraId,
+                    startTime: this.trainingSession.transitStartTime,
+                    endTime: now,
+                    transitSeconds: Math.round(transitDuration / 1000),
+                    hasOverlap,
+                };
+                this.trainingSession.transits.push(transit);
+                this.console.log(`Training transit: ${fromCamera?.name || fromCameraId} → ${cameraName} ` +
+                    `(${transit.transitSeconds}s${hasOverlap ? ', overlap detected' : ''})`);
+                // If overlap detected, record it
+                if (hasOverlap && this.trainingConfig.autoDetectOverlaps) {
+                    this.recordTrainingOverlap(fromCameraId, cameraId);
+                }
+            }
+            // Record new camera visit
+            const visit = {
+                cameraId,
+                cameraName,
+                arrivedAt: now,
+                departedAt: null,
+                trainerEmbedding: detection.embedding,
+                detectionConfidence,
+                boundingBox: detection.boundingBox,
+                floorPlanPosition: camera?.floorPlanPosition,
+            };
+            this.trainingSession.visits.push(visit);
+            // Update session state
+            this.trainingSession.previousCameraId = this.trainingSession.currentCameraId;
+            this.trainingSession.currentCameraId = cameraId;
+            this.trainingSession.transitStartTime = now;
+            // Store trainer embedding if not already captured
+            if (!this.trainingSession.trainerEmbedding && detection.embedding) {
+                this.trainingSession.trainerEmbedding = detection.embedding;
+            }
+        }
+        this.trainingSession.updatedAt = now;
+        this.trainingSession.stats = (0, training_1.calculateTrainingStats)(this.trainingSession, this.topology.cameras.length);
+        this.emitTrainingStatus();
+    }
+    /** Check if there's overlap between two cameras during training */
+    checkTrainingOverlap(fromCameraId, toCameraId, now) {
+        // Check if both cameras have recent visits overlapping in time
+        const fromVisit = this.trainingSession?.visits.find(v => v.cameraId === fromCameraId &&
+            (v.departedAt === null || v.departedAt > now - 5000) // Within 5 seconds
+        );
+        const toVisit = this.trainingSession?.visits.find(v => v.cameraId === toCameraId &&
+            v.arrivedAt <= now &&
+            v.arrivedAt >= now - 5000 // Arrived within last 5 seconds
+        );
+        return !!(fromVisit && toVisit);
+    }
+    /** Record a camera overlap detected during training */
+    recordTrainingOverlap(camera1Id, camera2Id) {
+        if (!this.trainingSession)
+            return;
+        // Check if we already have this overlap
+        const existingOverlap = this.trainingSession.overlaps.find(o => (o.camera1Id === camera1Id && o.camera2Id === camera2Id) ||
+            (o.camera1Id === camera2Id && o.camera2Id === camera1Id));
+        if (existingOverlap)
+            return;
+        const camera1 = (0, topology_1.findCamera)(this.topology, camera1Id);
+        const camera2 = (0, topology_1.findCamera)(this.topology, camera2Id);
+        // Calculate approximate position (midpoint of both camera positions)
+        let position = { x: 50, y: 50 };
+        if (camera1?.floorPlanPosition && camera2?.floorPlanPosition) {
+            position = {
+                x: (camera1.floorPlanPosition.x + camera2.floorPlanPosition.x) / 2,
+                y: (camera1.floorPlanPosition.y + camera2.floorPlanPosition.y) / 2,
+            };
+        }
+        const overlap = {
+            id: `overlap-${Date.now()}`,
+            camera1Id,
+            camera2Id,
+            position,
+            radius: 30, // Default radius
+            markedAt: Date.now(),
+        };
+        this.trainingSession.overlaps.push(overlap);
+        this.console.log(`Camera overlap detected: ${camera1?.name} ↔ ${camera2?.name}`);
+    }
+    /** Manually mark a landmark during training */
+    markTrainingLandmark(landmark) {
+        if (!this.trainingSession)
+            return null;
+        const newLandmark = {
+            ...landmark,
+            id: `landmark-${Date.now()}`,
+            markedAt: Date.now(),
+        };
+        this.trainingSession.landmarks.push(newLandmark);
+        this.trainingSession.updatedAt = Date.now();
+        this.trainingSession.stats = (0, training_1.calculateTrainingStats)(this.trainingSession, this.topology.cameras.length);
+        this.console.log(`Landmark marked: ${newLandmark.name} (${newLandmark.type})`);
+        this.emitTrainingStatus();
+        return newLandmark;
+    }
+    /** Manually mark a structure during training */
+    markTrainingStructure(structure) {
+        if (!this.trainingSession)
+            return null;
+        const newStructure = {
+            ...structure,
+            id: `structure-${Date.now()}`,
+            markedAt: Date.now(),
+        };
+        this.trainingSession.structures.push(newStructure);
+        this.trainingSession.updatedAt = Date.now();
+        this.trainingSession.stats = (0, training_1.calculateTrainingStats)(this.trainingSession, this.topology.cameras.length);
+        this.console.log(`Structure marked: ${newStructure.name} (${newStructure.type})`);
+        this.emitTrainingStatus();
+        return newStructure;
+    }
+    /** Confirm camera position on floor plan during training */
+    confirmCameraPosition(cameraId, position) {
+        if (!this.trainingSession)
+            return false;
+        // Update in current session
+        const visit = this.trainingSession.visits.find(v => v.cameraId === cameraId);
+        if (visit) {
+            visit.floorPlanPosition = position;
+        }
+        // Update in topology
+        const camera = (0, topology_1.findCamera)(this.topology, cameraId);
+        if (camera) {
+            camera.floorPlanPosition = position;
+            if (this.onTopologyChange) {
+                this.onTopologyChange(this.topology);
+            }
+        }
+        this.trainingSession.updatedAt = Date.now();
+        this.emitTrainingStatus();
+        return true;
+    }
+    /** Get training status for UI updates */
+    getTrainingStatus() {
+        if (!this.trainingSession)
+            return null;
+        const currentCamera = this.trainingSession.currentCameraId
+            ? (0, topology_1.findCamera)(this.topology, this.trainingSession.currentCameraId)
+            : null;
+        const previousCamera = this.trainingSession.previousCameraId
+            ? (0, topology_1.findCamera)(this.topology, this.trainingSession.previousCameraId)
+            : null;
+        // Generate suggestions for next actions
+        const suggestions = [];
+        const visitedCameras = new Set(this.trainingSession.visits.map(v => v.cameraId));
+        const unvisitedCameras = this.topology.cameras.filter(c => !visitedCameras.has(c.deviceId));
+        if (unvisitedCameras.length > 0) {
+            // Suggest nearest unvisited camera based on connections
+            const currentConnections = currentCamera
+                ? (0, topology_1.findConnectionsFrom)(this.topology, currentCamera.deviceId)
+                : [];
+            const connectedUnvisited = currentConnections
+                .map(c => c.toCameraId)
+                .filter(id => !visitedCameras.has(id));
+            if (connectedUnvisited.length > 0) {
+                const nextCam = (0, topology_1.findCamera)(this.topology, connectedUnvisited[0]);
+                if (nextCam) {
+                    suggestions.push(`Walk to ${nextCam.name}`);
+                }
+            }
+            else {
+                suggestions.push(`${unvisitedCameras.length} cameras not yet visited`);
+            }
+        }
+        if (this.trainingSession.visits.length >= 2 && this.trainingSession.landmarks.length === 0) {
+            suggestions.push('Consider marking some landmarks');
+        }
+        if (visitedCameras.size >= this.topology.cameras.length) {
+            suggestions.push('All cameras visited! You can end training.');
+        }
+        const status = {
+            sessionId: this.trainingSession.id,
+            state: this.trainingSession.state,
+            currentCamera: currentCamera ? {
+                id: currentCamera.deviceId,
+                name: currentCamera.name,
+                detectedAt: this.trainingSession.visits.find(v => v.cameraId === currentCamera.deviceId && !v.departedAt)?.arrivedAt || Date.now(),
+                confidence: this.trainingSession.visits.find(v => v.cameraId === currentCamera.deviceId && !v.departedAt)?.detectionConfidence || 0,
+            } : undefined,
+            activeTransit: this.trainingSession.transitStartTime && previousCamera ? {
+                fromCameraId: previousCamera.deviceId,
+                fromCameraName: previousCamera.name,
+                startTime: this.trainingSession.transitStartTime,
+                elapsedSeconds: Math.round((Date.now() - this.trainingSession.transitStartTime) / 1000),
+            } : undefined,
+            stats: this.trainingSession.stats,
+            suggestions,
+        };
+        return status;
+    }
+    /** Emit training status update to callback */
+    emitTrainingStatus() {
+        if (this.onTrainingStatusUpdate) {
+            const status = this.getTrainingStatus();
+            if (status) {
+                this.onTrainingStatusUpdate(status);
+            }
+        }
+    }
+    /** Apply training results to topology */
+    applyTrainingToTopology() {
+        const result = {
+            camerasAdded: 0,
+            connectionsCreated: 0,
+            connectionsUpdated: 0,
+            landmarksAdded: 0,
+            zonesCreated: 0,
+            warnings: [],
+            success: false,
+        };
+        if (!this.trainingSession) {
+            result.warnings.push('No training session to apply');
+            return result;
+        }
+        try {
+            // 1. Update camera positions from training visits
+            for (const visit of this.trainingSession.visits) {
+                const camera = (0, topology_1.findCamera)(this.topology, visit.cameraId);
+                if (camera && visit.floorPlanPosition) {
+                    if (!camera.floorPlanPosition) {
+                        camera.floorPlanPosition = visit.floorPlanPosition;
+                        result.camerasAdded++;
+                    }
+                }
+            }
+            // 2. Create or update connections from training transits
+            for (const transit of this.trainingSession.transits) {
+                const existingConnection = (0, topology_1.findConnection)(this.topology, transit.fromCameraId, transit.toCameraId);
+                if (existingConnection) {
+                    // Update existing connection with observed transit time
+                    const transitMs = transit.transitSeconds * 1000;
+                    existingConnection.transitTime = {
+                        min: Math.min(existingConnection.transitTime.min, transitMs * 0.7),
+                        typical: transitMs,
+                        max: Math.max(existingConnection.transitTime.max, transitMs * 1.3),
+                    };
+                    result.connectionsUpdated++;
+                }
+                else {
+                    // Create new connection
+                    const fromCamera = (0, topology_1.findCamera)(this.topology, transit.fromCameraId);
+                    const toCamera = (0, topology_1.findCamera)(this.topology, transit.toCameraId);
+                    if (fromCamera && toCamera) {
+                        const transitMs = transit.transitSeconds * 1000;
+                        const newConnection = {
+                            id: `conn-training-${Date.now()}-${result.connectionsCreated}`,
+                            fromCameraId: transit.fromCameraId,
+                            toCameraId: transit.toCameraId,
+                            name: `${fromCamera.name} to ${toCamera.name}`,
+                            exitZone: [], // Will be refined in topology editor
+                            entryZone: [], // Will be refined in topology editor
+                            transitTime: {
+                                min: transitMs * 0.7,
+                                typical: transitMs,
+                                max: transitMs * 1.3,
+                            },
+                            bidirectional: true,
+                        };
+                        this.topology.connections.push(newConnection);
+                        result.connectionsCreated++;
+                    }
+                }
+            }
+            // 3. Add landmarks from training
+            for (const trainLandmark of this.trainingSession.landmarks) {
+                // Map training landmark type to topology landmark type
+                const typeMapping = {
+                    mailbox: 'feature',
+                    garage: 'structure',
+                    shed: 'structure',
+                    tree: 'feature',
+                    gate: 'access',
+                    door: 'access',
+                    driveway: 'access',
+                    pathway: 'access',
+                    garden: 'feature',
+                    pool: 'feature',
+                    deck: 'structure',
+                    patio: 'structure',
+                    other: 'feature',
+                };
+                // Convert training landmark to topology landmark
+                const landmark = {
+                    id: trainLandmark.id,
+                    name: trainLandmark.name,
+                    type: typeMapping[trainLandmark.type] || 'feature',
+                    position: trainLandmark.position,
+                    visibleFromCameras: trainLandmark.visibleFromCameras.length > 0
+                        ? trainLandmark.visibleFromCameras
+                        : undefined,
+                    description: trainLandmark.description,
+                };
+                if (!this.topology.landmarks) {
+                    this.topology.landmarks = [];
+                }
+                this.topology.landmarks.push(landmark);
+                result.landmarksAdded++;
+            }
+            // 4. Create zones from overlaps
+            for (const overlap of this.trainingSession.overlaps) {
+                const camera1 = (0, topology_1.findCamera)(this.topology, overlap.camera1Id);
+                const camera2 = (0, topology_1.findCamera)(this.topology, overlap.camera2Id);
+                if (camera1 && camera2) {
+                    // Create global zone for overlap area
+                    const zoneName = `${camera1.name}/${camera2.name} Overlap`;
+                    const existingZone = this.topology.globalZones?.find(z => z.name === zoneName);
+                    if (!existingZone) {
+                        if (!this.topology.globalZones) {
+                            this.topology.globalZones = [];
+                        }
+                        // Create camera zone mappings (placeholder zones to be refined in editor)
+                        const cameraZones = [
+                            { cameraId: overlap.camera1Id, zone: [] },
+                            { cameraId: overlap.camera2Id, zone: [] },
+                        ];
+                        this.topology.globalZones.push({
+                            id: `zone-overlap-${overlap.id}`,
+                            name: zoneName,
+                            type: 'dwell', // Overlap zones are good for tracking dwell time
+                            cameraZones,
+                        });
+                        result.zonesCreated++;
+                    }
+                }
+            }
+            // Notify about topology change
+            if (this.onTopologyChange) {
+                this.onTopologyChange(this.topology);
+            }
+            result.success = true;
+            this.console.log(`Training applied: ${result.connectionsCreated} connections created, ` +
+                `${result.connectionsUpdated} updated, ${result.landmarksAdded} landmarks added`);
+        }
+        catch (e) {
+            result.warnings.push(`Error applying training: ${e}`);
+        }
+        return result;
+    }
+    /** Clear the current training session without applying */
+    clearTrainingSession() {
+        this.trainingSession = null;
+        this.emitTrainingStatus();
+    }
 }
 exports.TrackingEngine = TrackingEngine;
 
@@ -36989,6 +37459,7 @@ const global_tracker_sensor_1 = __webpack_require__(/*! ./devices/global-tracker
 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 editor_html_1 = __webpack_require__(/*! ./ui/editor-html */ "./src/ui/editor-html.ts");
+const training_html_1 = __webpack_require__(/*! ./ui/training-html */ "./src/ui/training-html.ts");
 const { deviceManager, systemManager } = sdk_1.default;
 const TRACKING_ZONE_PREFIX = 'tracking-zone:';
 const GLOBAL_TRACKER_ID = 'global-tracker';
@@ -37339,9 +37810,98 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
     }
     // ==================== Settings Implementation ====================
     async getSettings() {
-        const settings = await this.storageSettings.getSettings();
+        const baseSettings = await this.storageSettings.getSettings();
+        // Build settings in desired order
+        const settings = [];
+        // Helper to find and add settings from baseSettings by group
+        const addGroup = (group) => {
+            baseSettings.filter(s => s.group === group).forEach(s => settings.push(s));
+        };
+        // ==================== 1. Getting Started ====================
+        // Training Mode button that opens mobile-friendly training UI in modal
+        const trainingOnclickCode = `(function(){var e=document.getElementById('sa-training-modal');if(e)e.remove();var m=document.createElement('div');m.id='sa-training-modal';m.style.cssText='position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:2147483647;display:flex;align-items:center;justify-content:center;';var c=document.createElement('div');c.style.cssText='width:min(420px,95vw);height:92vh;max-height:900px;background:#121212;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 8px 32px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);';var b=document.createElement('button');b.innerHTML='×';b.style.cssText='position:absolute;top:8px;right:8px;z-index:2147483647;background:rgba(255,255,255,0.1);color:white;border:none;width:32px;height:32px;border-radius:4px;font-size:18px;cursor:pointer;line-height:1;';b.onclick=function(){m.remove();};var f=document.createElement('iframe');f.src='/endpoint/@blueharford/scrypted-spatial-awareness/ui/training';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: 'trainingMode',
+            title: 'Training Mode',
+            type: 'html',
+            value: `
+        <style>
+          .sa-training-container {
+            padding: 16px;
+            background: rgba(255,255,255,0.03);
+            border-radius: 4px;
+            border: 1px solid rgba(255,255,255,0.08);
+          }
+          .sa-training-title {
+            color: #4fc3f7;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 8px;
+            font-family: inherit;
+          }
+          .sa-training-desc {
+            color: rgba(255,255,255,0.6);
+            margin-bottom: 12px;
+            font-size: 13px;
+            line-height: 1.5;
+            font-family: inherit;
+          }
+          .sa-training-btn {
+            background: #4fc3f7;
+            color: #000;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: background 0.2s;
+            font-family: inherit;
+          }
+          .sa-training-btn:hover {
+            background: #81d4fa;
+          }
+          .sa-training-steps {
+            color: rgba(255,255,255,0.5);
+            font-size: 12px;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid rgba(255,255,255,0.05);
+            font-family: inherit;
+          }
+          .sa-training-steps ol {
+            margin: 6px 0 0 16px;
+            padding: 0;
+          }
+          .sa-training-steps li {
+            margin-bottom: 2px;
+          }
+        </style>
+        <div class="sa-training-container">
+          <div class="sa-training-title">Guided Property Training</div>
+          <p class="sa-training-desc">Walk your property while the system learns your camera layout, transit times, and landmarks automatically.</p>
+          <button class="sa-training-btn" onclick="${trainingOnclickCode}">
+            Start Training Mode
+          </button>
+          <div class="sa-training-steps">
+            <strong>How it works:</strong>
+            <ol>
+              <li>Start training and walk to each camera</li>
+              <li>System auto-detects you and records transit times</li>
+              <li>Mark landmarks as you encounter them</li>
+              <li>Apply results to generate your topology</li>
+            </ol>
+          </div>
+        </div>
+      `,
+            group: 'Getting Started',
+        });
+        // ==================== 2. Topology ====================
         // 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);})()`;
+        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.85);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:#121212;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 8px 32px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);';var b=document.createElement('button');b.innerHTML='×';b.style.cssText='position:absolute;top:8px;right:8px;z-index:2147483647;background:rgba(255,255,255,0.1);color:white;border:none;width:32px;height:32px;border-radius:4px;font-size:18px;cursor:pointer;line-height:1;';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: 'topologyEditor',
             title: 'Topology Editor',
@@ -37349,44 +37909,49 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             value: `
         <style>
           .sa-open-btn {
-            background: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
-            color: white;
+            background: #4fc3f7;
+            color: #000;
             border: none;
-            padding: 14px 28px;
-            border-radius: 8px;
-            font-size: 15px;
-            font-weight: 600;
+            padding: 10px 20px;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
             cursor: pointer;
             display: inline-flex;
             align-items: center;
-            gap: 10px;
-            transition: transform 0.2s, box-shadow 0.2s;
+            gap: 8px;
+            transition: background 0.2s;
+            font-family: inherit;
           }
           .sa-open-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(233, 69, 96, 0.4);
+            background: #81d4fa;
           }
           .sa-btn-container {
-            padding: 20px;
-            background: #16213e;
-            border-radius: 8px;
+            padding: 16px;
+            background: rgba(255,255,255,0.03);
+            border-radius: 4px;
             text-align: center;
+            border: 1px solid rgba(255,255,255,0.08);
           }
           .sa-btn-desc {
-            color: #888;
-            margin-bottom: 15px;
-            font-size: 14px;
+            color: rgba(255,255,255,0.6);
+            margin-bottom: 12px;
+            font-size: 13px;
+            font-family: inherit;
           }
         </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
+            Open Topology Editor
           </button>
         </div>
       `,
             group: 'Topology',
         });
+        // ==================== 3. Cameras ====================
+        addGroup('Cameras');
+        // ==================== 4. Status ====================
         // Add status display
         const activeCount = this.trackingState.getActiveCount();
         const topologyJson = this.storage.getItem('topology');
@@ -37430,6 +37995,12 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
                 group: 'Status',
             });
         }
+        // ==================== 5. Tracking ====================
+        addGroup('Tracking');
+        // ==================== 6. AI & Spatial Reasoning ====================
+        addGroup('AI & Spatial Reasoning');
+        // ==================== 7. Alerts ====================
+        addGroup('Alerts');
         // Add alert rules configuration UI
         const alertRules = this.alertManager.getRules();
         const rulesHtml = this.generateAlertRulesHtml(alertRules);
@@ -37440,6 +38011,8 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             value: rulesHtml,
             group: 'Alerts',
         });
+        // ==================== 8. MQTT Integration ====================
+        addGroup('MQTT Integration');
         return settings;
     }
     generateAlertRulesHtml(rules) {
@@ -37610,17 +38183,42 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
                 const globalId = path.split('/').pop();
                 return this.handleJourneyPathRequest(globalId, response);
             }
+            // Training Mode endpoints
+            if (path.endsWith('/api/training/start')) {
+                return this.handleTrainingStartRequest(request, response);
+            }
+            if (path.endsWith('/api/training/pause')) {
+                return this.handleTrainingPauseRequest(response);
+            }
+            if (path.endsWith('/api/training/resume')) {
+                return this.handleTrainingResumeRequest(response);
+            }
+            if (path.endsWith('/api/training/end')) {
+                return this.handleTrainingEndRequest(response);
+            }
+            if (path.endsWith('/api/training/status')) {
+                return this.handleTrainingStatusRequest(response);
+            }
+            if (path.endsWith('/api/training/landmark')) {
+                return this.handleTrainingLandmarkRequest(request, response);
+            }
+            if (path.endsWith('/api/training/apply')) {
+                return this.handleTrainingApplyRequest(response);
+            }
             // UI Routes
             if (path.endsWith('/ui/editor') || path.endsWith('/ui/editor/')) {
                 return this.serveEditorUI(response);
             }
+            if (path.endsWith('/ui/training') || path.endsWith('/ui/training/')) {
+                return this.serveTrainingUI(response);
+            }
             if (path.includes('/ui/')) {
                 return this.serveStaticFile(path, response);
             }
             // Default: return info page
             response.send(JSON.stringify({
                 name: 'Spatial Awareness Plugin',
-                version: '0.3.0',
+                version: '0.4.0',
                 endpoints: {
                     api: {
                         trackedObjects: '/api/tracked-objects',
@@ -37632,9 +38230,19 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
                         liveTracking: '/api/live-tracking',
                         connectionSuggestions: '/api/connection-suggestions',
                         landmarkSuggestions: '/api/landmark-suggestions',
+                        training: {
+                            start: '/api/training/start',
+                            pause: '/api/training/pause',
+                            resume: '/api/training/resume',
+                            end: '/api/training/end',
+                            status: '/api/training/status',
+                            landmark: '/api/training/landmark',
+                            apply: '/api/training/apply',
+                        },
                     },
                     ui: {
                         editor: '/ui/editor',
+                        training: '/ui/training',
                     },
                 },
             }), {
@@ -38085,11 +38693,175 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             });
         }
     }
+    // ==================== Training Mode Handlers ====================
+    handleTrainingStartRequest(request, response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running. Configure topology first.' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        try {
+            let config;
+            let trainerName;
+            if (request.body) {
+                const body = JSON.parse(request.body);
+                trainerName = body.trainerName;
+                config = body.config;
+            }
+            const session = this.trackingEngine.startTrainingSession(trainerName, config);
+            response.send(JSON.stringify(session), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        catch (e) {
+            response.send(JSON.stringify({ error: e.message }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleTrainingPauseRequest(response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const success = this.trackingEngine.pauseTrainingSession();
+        if (success) {
+            response.send(JSON.stringify({ success: true }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        else {
+            response.send(JSON.stringify({ error: 'No active training session to pause' }), {
+                code: 400,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleTrainingResumeRequest(response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const success = this.trackingEngine.resumeTrainingSession();
+        if (success) {
+            response.send(JSON.stringify({ success: true }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        else {
+            response.send(JSON.stringify({ error: 'No paused training session to resume' }), {
+                code: 400,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleTrainingEndRequest(response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const session = this.trackingEngine.endTrainingSession();
+        if (session) {
+            response.send(JSON.stringify(session), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        else {
+            response.send(JSON.stringify({ error: 'No training session to end' }), {
+                code: 400,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleTrainingStatusRequest(response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ state: 'idle', stats: null }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const status = this.trackingEngine.getTrainingStatus();
+        if (status) {
+            response.send(JSON.stringify(status), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        else {
+            response.send(JSON.stringify({ state: 'idle', stats: null }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleTrainingLandmarkRequest(request, response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        try {
+            const body = JSON.parse(request.body);
+            const landmark = this.trackingEngine.markTrainingLandmark(body);
+            if (landmark) {
+                response.send(JSON.stringify({ success: true, landmark }), {
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+            else {
+                response.send(JSON.stringify({ error: 'No active training session' }), {
+                    code: 400,
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+        }
+        catch (e) {
+            response.send(JSON.stringify({ error: 'Invalid request body' }), {
+                code: 400,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleTrainingApplyRequest(response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const result = this.trackingEngine.applyTrainingToTopology();
+        if (result.success) {
+            // Save the updated topology
+            const topology = this.trackingEngine.getTopology();
+            this.storage.setItem('topology', JSON.stringify(topology));
+        }
+        response.send(JSON.stringify(result), {
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
     serveEditorUI(response) {
         response.send(editor_html_1.EDITOR_HTML, {
             headers: { 'Content-Type': 'text/html' },
         });
     }
+    serveTrainingUI(response) {
+        response.send(training_html_1.TRAINING_HTML, {
+            headers: { 'Content-Type': 'text/html' },
+        });
+    }
     serveStaticFile(path, response) {
         // Serve static files for the UI
         response.send('Not found', { code: 404 });
@@ -38668,6 +39440,83 @@ function getJourneySummary(tracked) {
 }
 
 
+/***/ },
+
+/***/ "./src/models/training.ts"
+/*!********************************!*\
+  !*** ./src/models/training.ts ***!
+  \********************************/
+(__unused_webpack_module, exports) {
+
+"use strict";
+
+/**
+ * Training Mode Types
+ *
+ * These types support the guided training system where a user physically
+ * walks around their property to train the system on camera positions,
+ * transit times, overlaps, landmarks, and structures.
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.DEFAULT_TRAINING_CONFIG = void 0;
+exports.createTrainingSession = createTrainingSession;
+exports.calculateTrainingStats = calculateTrainingStats;
+/** Default training configuration */
+exports.DEFAULT_TRAINING_CONFIG = {
+    minDetectionConfidence: 0.7,
+    maxTransitWait: 120, // 2 minutes
+    autoDetectOverlaps: true,
+    autoSuggestLandmarks: true,
+    minOverlapDuration: 2, // 2 seconds
+};
+/** Create a new empty training session */
+function createTrainingSession(trainerName) {
+    const now = Date.now();
+    return {
+        id: `training-${now}-${Math.random().toString(36).substr(2, 9)}`,
+        state: 'idle',
+        startedAt: now,
+        updatedAt: now,
+        trainerName,
+        visits: [],
+        transits: [],
+        landmarks: [],
+        overlaps: [],
+        structures: [],
+        stats: {
+            totalDuration: 0,
+            camerasVisited: 0,
+            transitsRecorded: 0,
+            landmarksMarked: 0,
+            overlapsDetected: 0,
+            structuresMarked: 0,
+            averageTransitTime: 0,
+            coveragePercentage: 0,
+        },
+    };
+}
+/** Calculate session statistics */
+function calculateTrainingStats(session, totalCameras) {
+    const uniqueCameras = new Set(session.visits.map(v => v.cameraId));
+    const transitTimes = session.transits.map(t => t.transitSeconds);
+    const avgTransit = transitTimes.length > 0
+        ? transitTimes.reduce((a, b) => a + b, 0) / transitTimes.length
+        : 0;
+    return {
+        totalDuration: (session.completedAt || Date.now()) - session.startedAt,
+        camerasVisited: uniqueCameras.size,
+        transitsRecorded: session.transits.length,
+        landmarksMarked: session.landmarks.length,
+        overlapsDetected: session.overlaps.length,
+        structuresMarked: session.structures.length,
+        averageTransitTime: Math.round(avgTransit),
+        coveragePercentage: totalCameras > 0
+            ? Math.round((uniqueCameras.size / totalCameras) * 100)
+            : 0,
+    };
+}
+
+
 /***/ },
 
 /***/ "./src/state/tracking-state.ts"
@@ -40200,6 +41049,1026 @@ exports.EDITOR_HTML = `<!DOCTYPE html>
 </html>`;
 
 
+/***/ },
+
+/***/ "./src/ui/training-html.ts"
+/*!*********************************!*\
+  !*** ./src/ui/training-html.ts ***!
+  \*********************************/
+(__unused_webpack_module, exports) {
+
+"use strict";
+
+/**
+ * Training Mode UI - Mobile-optimized walkthrough interface
+ * Designed for phone use while walking around property
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.TRAINING_HTML = void 0;
+exports.TRAINING_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <title>Spatial Awareness - Training Mode</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+    html, body { height: 100%; overflow: hidden; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #121212;
+      color: rgba(255,255,255,0.87);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Header */
+    .header {
+      background: rgba(255,255,255,0.03);
+      padding: 12px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+    }
+    .header h1 { font-size: 16px; font-weight: 500; }
+    .header-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+    }
+    .status-badge {
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+    .status-badge.idle { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
+    .status-badge.active { background: #4fc3f7; color: #000; animation: pulse 2s infinite; }
+    .status-badge.paused { background: #ffb74d; color: #000; }
+    .status-badge.completed { background: #81c784; color: #000; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+
+    /* Main content area */
+    .main-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      overflow-y: auto;
+      gap: 12px;
+    }
+
+    /* Camera detection card */
+    .detection-card {
+      background: rgba(255,255,255,0.03);
+      border-radius: 8px;
+      padding: 16px;
+      border: 1px solid rgba(255,255,255,0.08);
+      transition: all 0.3s;
+    }
+    .detection-card.detecting {
+      border-color: #4fc3f7;
+      background: rgba(79, 195, 247, 0.1);
+    }
+    .detection-card.in-transit {
+      border-color: #ffb74d;
+      background: rgba(255, 183, 77, 0.1);
+    }
+
+    .detection-icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 8px;
+      background: rgba(255,255,255,0.05);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 12px;
+      font-size: 28px;
+    }
+    .detection-card.detecting .detection-icon {
+      background: #4fc3f7;
+      animation: detectPulse 1.5s infinite;
+    }
+    @keyframes detectPulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.03); }
+    }
+
+    .detection-title {
+      font-size: 18px;
+      font-weight: 500;
+      text-align: center;
+      margin-bottom: 4px;
+    }
+    .detection-subtitle {
+      font-size: 13px;
+      color: rgba(255,255,255,0.5);
+      text-align: center;
+    }
+    .detection-confidence {
+      margin-top: 8px;
+      text-align: center;
+      font-size: 12px;
+      color: rgba(255,255,255,0.4);
+    }
+
+    /* Transit timer */
+    .transit-timer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 12px;
+      padding: 10px;
+      background: rgba(0,0,0,0.2);
+      border-radius: 6px;
+    }
+    .transit-timer-icon { font-size: 18px; }
+    .transit-timer-text { font-size: 16px; font-weight: 500; }
+    .transit-timer-from { font-size: 12px; color: rgba(255,255,255,0.5); }
+
+    /* Stats grid */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+    }
+    .stat-item {
+      background: rgba(255,255,255,0.03);
+      border-radius: 6px;
+      padding: 12px 8px;
+      text-align: center;
+      border: 1px solid rgba(255,255,255,0.05);
+    }
+    .stat-value {
+      font-size: 24px;
+      font-weight: 500;
+      color: #4fc3f7;
+    }
+    .stat-label {
+      font-size: 10px;
+      color: rgba(255,255,255,0.4);
+      text-transform: uppercase;
+      margin-top: 2px;
+    }
+
+    /* Progress bar */
+    .progress-section {
+      background: rgba(255,255,255,0.03);
+      border-radius: 6px;
+      padding: 12px;
+      border: 1px solid rgba(255,255,255,0.05);
+    }
+    .progress-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      font-size: 13px;
+    }
+    .progress-bar {
+      height: 6px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: #4fc3f7;
+      border-radius: 3px;
+      transition: width 0.5s;
+    }
+
+    /* Suggestions */
+    .suggestions-section {
+      background: rgba(79, 195, 247, 0.08);
+      border: 1px solid rgba(79, 195, 247, 0.2);
+      border-radius: 6px;
+      padding: 12px;
+    }
+    .suggestions-title {
+      font-size: 11px;
+      text-transform: uppercase;
+      color: #4fc3f7;
+      margin-bottom: 6px;
+      font-weight: 500;
+    }
+    .suggestion-item {
+      font-size: 13px;
+      padding: 6px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+      color: rgba(255,255,255,0.7);
+    }
+    .suggestion-item:last-child { border-bottom: none; }
+    .suggestion-item::before {
+      content: "→ ";
+      color: #4fc3f7;
+    }
+
+    /* Action buttons */
+    .action-buttons {
+      display: flex;
+      gap: 8px;
+      padding: 8px 0;
+    }
+    .btn {
+      flex: 1;
+      padding: 14px 16px;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+    .btn:active { transform: scale(0.98); }
+    .btn-primary { background: #4fc3f7; color: #000; }
+    .btn-secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.87); }
+    .btn-danger { background: #ef5350; color: #fff; }
+    .btn-warning { background: #ffb74d; color: #000; }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    /* Full-width button */
+    .btn-full { flex: none; width: 100%; }
+
+    /* Mark landmark/structure panel */
+    .mark-panel {
+      background: rgba(255,255,255,0.03);
+      border-radius: 6px;
+      padding: 16px;
+      border: 1px solid rgba(255,255,255,0.05);
+    }
+    .mark-panel-title {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 12px;
+    }
+    .mark-type-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 6px;
+      margin-bottom: 12px;
+    }
+    .mark-type-btn {
+      padding: 10px 6px;
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 6px;
+      background: transparent;
+      color: rgba(255,255,255,0.7);
+      font-size: 10px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .mark-type-btn.selected {
+      border-color: #4fc3f7;
+      background: rgba(79, 195, 247, 0.15);
+      color: #fff;
+    }
+    .mark-type-btn .icon { font-size: 18px; margin-bottom: 2px; display: block; }
+
+    /* Input field */
+    .input-group { margin-bottom: 12px; }
+    .input-group label {
+      display: block;
+      font-size: 12px;
+      color: rgba(255,255,255,0.5);
+      margin-bottom: 4px;
+    }
+    .input-group input {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 6px;
+      background: rgba(0,0,0,0.2);
+      color: #fff;
+      font-size: 14px;
+    }
+    .input-group input:focus {
+      outline: none;
+      border-color: #4fc3f7;
+    }
+
+    /* History list */
+    .history-section {
+      background: rgba(255,255,255,0.03);
+      border-radius: 6px;
+      padding: 12px;
+      max-height: 180px;
+      overflow-y: auto;
+      border: 1px solid rgba(255,255,255,0.05);
+    }
+    .history-title {
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .history-item {
+      padding: 8px;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+      font-size: 13px;
+    }
+    .history-item:last-child { border-bottom: none; }
+    .history-item-time {
+      font-size: 10px;
+      color: rgba(255,255,255,0.4);
+    }
+    .history-item-camera { color: #4fc3f7; font-weight: 500; }
+    .history-item-transit { color: #ffb74d; }
+
+    /* Bottom action bar */
+    .bottom-bar {
+      background: rgba(255,255,255,0.03);
+      padding: 12px 16px;
+      padding-bottom: max(12px, env(safe-area-inset-bottom));
+      border-top: 1px solid rgba(255,255,255,0.08);
+    }
+
+    /* Tabs */
+    .tabs {
+      display: flex;
+      background: rgba(0,0,0,0.2);
+      border-radius: 6px;
+      padding: 3px;
+      margin-bottom: 12px;
+    }
+    .tab {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      background: transparent;
+      color: rgba(255,255,255,0.5);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 0.2s;
+    }
+    .tab.active {
+      background: rgba(255,255,255,0.08);
+      color: rgba(255,255,255,0.87);
+    }
+
+    /* Tab content */
+    .tab-content { display: none; }
+    .tab-content.active { display: block; }
+
+    /* Apply results modal */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.85);
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+    }
+    .modal-overlay.active { display: flex; }
+    .modal {
+      background: #1e1e1e;
+      border-radius: 8px;
+      padding: 20px;
+      max-width: 360px;
+      width: 100%;
+      border: 1px solid rgba(255,255,255,0.1);
+    }
+    .modal h2 { font-size: 18px; margin-bottom: 12px; font-weight: 500; }
+    .modal-result-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      font-size: 13px;
+    }
+    .modal-result-value { color: #4fc3f7; font-weight: 500; }
+    .modal-buttons { display: flex; gap: 8px; margin-top: 16px; }
+
+    /* Idle state */
+    .idle-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 32px 16px;
+    }
+    .idle-icon {
+      font-size: 56px;
+      margin-bottom: 16px;
+      opacity: 0.7;
+    }
+    .idle-title {
+      font-size: 20px;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+    .idle-desc {
+      font-size: 14px;
+      color: rgba(255,255,255,0.5);
+      max-width: 280px;
+      line-height: 1.5;
+    }
+    .idle-instructions {
+      margin-top: 24px;
+      text-align: left;
+      background: rgba(255,255,255,0.03);
+      border-radius: 6px;
+      padding: 16px;
+      border: 1px solid rgba(255,255,255,0.05);
+    }
+    .idle-instructions h3 {
+      font-size: 12px;
+      margin-bottom: 10px;
+      color: #4fc3f7;
+      font-weight: 500;
+    }
+    .idle-instructions ol {
+      padding-left: 18px;
+      font-size: 13px;
+      line-height: 1.8;
+      color: rgba(255,255,255,0.6);
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>Training Mode</h1>
+    <div class="header-status">
+      <span class="status-badge" id="status-badge">Idle</span>
+    </div>
+  </div>
+
+  <!-- Idle State -->
+  <div class="main-content" id="idle-content">
+    <div class="idle-content">
+      <div class="idle-icon">🚶</div>
+      <div class="idle-title">Train Your System</div>
+      <div class="idle-desc">Walk around your property to teach the system about camera positions, transit times, and landmarks.</div>
+
+      <div class="idle-instructions">
+        <h3>How it works:</h3>
+        <ol>
+          <li>Tap <strong>Start Training</strong> below</li>
+          <li>Walk to each camera on your property</li>
+          <li>The system detects you automatically</li>
+          <li>Mark landmarks as you encounter them</li>
+          <li>End training when you're done</li>
+        </ol>
+      </div>
+    </div>
+
+    <div class="bottom-bar">
+      <button class="btn btn-primary btn-full" onclick="startTraining()">
+        ▶ Start Training
+      </button>
+    </div>
+  </div>
+
+  <!-- Active Training State -->
+  <div class="main-content" id="active-content" style="display: none;">
+    <!-- Detection Card -->
+    <div class="detection-card" id="detection-card">
+      <div class="detection-icon" id="detection-icon">👤</div>
+      <div class="detection-title" id="detection-title">Waiting for detection...</div>
+      <div class="detection-subtitle" id="detection-subtitle">Walk to any camera to begin</div>
+      <div class="detection-confidence" id="detection-confidence"></div>
+
+      <div class="transit-timer" id="transit-timer" style="display: none;">
+        <span class="transit-timer-icon">⏱</span>
+        <span class="transit-timer-text" id="transit-time">0s</span>
+        <span class="transit-timer-from" id="transit-from"></span>
+      </div>
+    </div>
+
+    <!-- Tabs -->
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('status')">Status</button>
+      <button class="tab" onclick="switchTab('mark')">Mark</button>
+      <button class="tab" onclick="switchTab('history')">History</button>
+    </div>
+
+    <!-- Status Tab -->
+    <div class="tab-content active" id="tab-status">
+      <!-- Stats -->
+      <div class="stats-grid">
+        <div class="stat-item">
+          <div class="stat-value" id="stat-cameras">0</div>
+          <div class="stat-label">Cameras</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="stat-transits">0</div>
+          <div class="stat-label">Transits</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value" id="stat-landmarks">0</div>
+          <div class="stat-label">Landmarks</div>
+        </div>
+      </div>
+
+      <!-- Progress -->
+      <div class="progress-section" style="margin-top: 15px;">
+        <div class="progress-header">
+          <span>Coverage</span>
+          <span id="progress-percent">0%</span>
+        </div>
+        <div class="progress-bar">
+          <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
+        </div>
+      </div>
+
+      <!-- Suggestions -->
+      <div class="suggestions-section" style="margin-top: 15px;" id="suggestions-section">
+        <div class="suggestions-title">Suggestions</div>
+        <div id="suggestions-list">
+          <div class="suggestion-item">Start walking to a camera</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mark Tab -->
+    <div class="tab-content" id="tab-mark">
+      <div class="mark-panel">
+        <div class="mark-panel-title">Mark a Landmark</div>
+        <div class="mark-type-grid" id="landmark-type-grid">
+          <button class="mark-type-btn selected" data-type="mailbox" onclick="selectLandmarkType('mailbox')">
+            <span class="icon">📬</span>
+            Mailbox
+          </button>
+          <button class="mark-type-btn" data-type="garage" onclick="selectLandmarkType('garage')">
+            <span class="icon">🏠</span>
+            Garage
+          </button>
+          <button class="mark-type-btn" data-type="shed" onclick="selectLandmarkType('shed')">
+            <span class="icon">🏚</span>
+            Shed
+          </button>
+          <button class="mark-type-btn" data-type="tree" onclick="selectLandmarkType('tree')">
+            <span class="icon">🌳</span>
+            Tree
+          </button>
+          <button class="mark-type-btn" data-type="gate" onclick="selectLandmarkType('gate')">
+            <span class="icon">🚪</span>
+            Gate
+          </button>
+          <button class="mark-type-btn" data-type="driveway" onclick="selectLandmarkType('driveway')">
+            <span class="icon">🛣</span>
+            Driveway
+          </button>
+          <button class="mark-type-btn" data-type="pool" onclick="selectLandmarkType('pool')">
+            <span class="icon">🏊</span>
+            Pool
+          </button>
+          <button class="mark-type-btn" data-type="other" onclick="selectLandmarkType('other')">
+            <span class="icon">📍</span>
+            Other
+          </button>
+        </div>
+
+        <div class="input-group">
+          <label>Landmark Name</label>
+          <input type="text" id="landmark-name" placeholder="e.g., Front Mailbox">
+        </div>
+
+        <button class="btn btn-primary btn-full" onclick="markLandmark()">
+          📍 Mark Landmark Here
+        </button>
+      </div>
+    </div>
+
+    <!-- History Tab -->
+    <div class="tab-content" id="tab-history">
+      <div class="history-section">
+        <div class="history-title">
+          <span>Recent Activity</span>
+          <span id="history-count">0 events</span>
+        </div>
+        <div id="history-list">
+          <div class="history-item" style="color: rgba(255,255,255,0.4); text-align: center;">
+            No activity yet
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Actions -->
+    <div class="bottom-bar">
+      <div class="action-buttons">
+        <button class="btn btn-warning" id="pause-btn" onclick="togglePause()">
+          ⏸ Pause
+        </button>
+        <button class="btn btn-danger" onclick="endTraining()">
+          ⏹ End
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Completed State -->
+  <div class="main-content" id="completed-content" style="display: none;">
+    <div class="idle-content">
+      <div class="idle-icon">✅</div>
+      <div class="idle-title">Training Complete!</div>
+      <div class="idle-desc">Review the results and apply them to your topology.</div>
+    </div>
+
+    <!-- Final Stats -->
+    <div class="stats-grid">
+      <div class="stat-item">
+        <div class="stat-value" id="final-cameras">0</div>
+        <div class="stat-label">Cameras</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value" id="final-transits">0</div>
+        <div class="stat-label">Transits</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value" id="final-landmarks">0</div>
+        <div class="stat-label">Landmarks</div>
+      </div>
+    </div>
+
+    <div class="stats-grid" style="margin-top: 10px;">
+      <div class="stat-item">
+        <div class="stat-value" id="final-overlaps">0</div>
+        <div class="stat-label">Overlaps</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value" id="final-avg-transit">0s</div>
+        <div class="stat-label">Avg Transit</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value" id="final-coverage">0%</div>
+        <div class="stat-label">Coverage</div>
+      </div>
+    </div>
+
+    <div class="bottom-bar" style="margin-top: auto;">
+      <div class="action-buttons">
+        <button class="btn btn-secondary" onclick="resetTraining()">
+          ↻ Start Over
+        </button>
+        <button class="btn btn-primary" onclick="applyTraining()">
+          ✓ Apply Results
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Apply Results Modal -->
+  <div class="modal-overlay" id="results-modal">
+    <div class="modal">
+      <h2>Training Applied!</h2>
+      <div id="results-content">
+        <div class="modal-result-item">
+          <span>Connections Created</span>
+          <span class="modal-result-value" id="result-connections">0</span>
+        </div>
+        <div class="modal-result-item">
+          <span>Connections Updated</span>
+          <span class="modal-result-value" id="result-updated">0</span>
+        </div>
+        <div class="modal-result-item">
+          <span>Landmarks Added</span>
+          <span class="modal-result-value" id="result-landmarks">0</span>
+        </div>
+        <div class="modal-result-item">
+          <span>Zones Created</span>
+          <span class="modal-result-value" id="result-zones">0</span>
+        </div>
+      </div>
+      <div class="modal-buttons">
+        <button class="btn btn-secondary" style="flex: 1;" onclick="closeResultsModal()">Close</button>
+        <button class="btn btn-primary" style="flex: 1;" onclick="openEditor()">Open Editor</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let trainingState = 'idle'; // idle, active, paused, completed
+    let session = null;
+    let pollInterval = null;
+    let transitInterval = null;
+    let selectedLandmarkType = 'mailbox';
+    let historyItems = [];
+
+    // Initialize
+    async function init() {
+      // Check if there's an existing session
+      const status = await fetchTrainingStatus();
+      if (status && (status.state === 'active' || status.state === 'paused')) {
+        session = status;
+        trainingState = status.state;
+        updateUI();
+        startPolling();
+      }
+    }
+
+    // API calls
+    async function fetchTrainingStatus() {
+      try {
+        const response = await fetch('../api/training/status');
+        if (response.ok) {
+          return await response.json();
+        }
+      } catch (e) { console.error('Failed to fetch status:', e); }
+      return null;
+    }
+
+    async function startTraining() {
+      try {
+        const response = await fetch('../api/training/start', { method: 'POST' });
+        if (response.ok) {
+          session = await response.json();
+          trainingState = 'active';
+          updateUI();
+          startPolling();
+          addHistoryItem('Training started', 'start');
+        }
+      } catch (e) {
+        console.error('Failed to start training:', e);
+        alert('Failed to start training. Please try again.');
+      }
+    }
+
+    async function togglePause() {
+      const endpoint = trainingState === 'active' ? 'pause' : 'resume';
+      try {
+        const response = await fetch('../api/training/' + endpoint, { method: 'POST' });
+        if (response.ok) {
+          trainingState = trainingState === 'active' ? 'paused' : 'active';
+          updateUI();
+          addHistoryItem('Training ' + (trainingState === 'paused' ? 'paused' : 'resumed'), 'control');
+        }
+      } catch (e) { console.error('Failed to toggle pause:', e); }
+    }
+
+    async function endTraining() {
+      if (!confirm('End training session?')) return;
+      try {
+        const response = await fetch('../api/training/end', { method: 'POST' });
+        if (response.ok) {
+          session = await response.json();
+          trainingState = 'completed';
+          stopPolling();
+          updateUI();
+        }
+      } catch (e) { console.error('Failed to end training:', e); }
+    }
+
+    async function applyTraining() {
+      try {
+        const response = await fetch('../api/training/apply', { method: 'POST' });
+        if (response.ok) {
+          const result = await response.json();
+          document.getElementById('result-connections').textContent = result.connectionsCreated;
+          document.getElementById('result-updated').textContent = result.connectionsUpdated;
+          document.getElementById('result-landmarks').textContent = result.landmarksAdded;
+          document.getElementById('result-zones').textContent = result.zonesCreated;
+          document.getElementById('results-modal').classList.add('active');
+        }
+      } catch (e) {
+        console.error('Failed to apply training:', e);
+        alert('Failed to apply training results.');
+      }
+    }
+
+    function closeResultsModal() {
+      document.getElementById('results-modal').classList.remove('active');
+    }
+
+    function openEditor() {
+      window.location.href = '../ui/editor';
+    }
+
+    function resetTraining() {
+      trainingState = 'idle';
+      session = null;
+      historyItems = [];
+      updateUI();
+    }
+
+    async function markLandmark() {
+      const name = document.getElementById('landmark-name').value.trim();
+      if (!name) {
+        alert('Please enter a landmark name');
+        return;
+      }
+
+      const currentCameraId = session?.currentCamera?.id;
+      const visibleFromCameras = currentCameraId ? [currentCameraId] : [];
+
+      try {
+        const response = await fetch('../api/training/landmark', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name,
+            type: selectedLandmarkType,
+            visibleFromCameras,
+            position: { x: 50, y: 50 }, // Will be refined when applied
+          })
+        });
+        if (response.ok) {
+          document.getElementById('landmark-name').value = '';
+          addHistoryItem('Marked: ' + name + ' (' + selectedLandmarkType + ')', 'landmark');
+          // Refresh status
+          const status = await fetchTrainingStatus();
+          if (status) {
+            session = status;
+            updateStatsUI();
+          }
+        }
+      } catch (e) { console.error('Failed to mark landmark:', e); }
+    }
+
+    function selectLandmarkType(type) {
+      selectedLandmarkType = type;
+      document.querySelectorAll('.mark-type-btn').forEach(btn => {
+        btn.classList.toggle('selected', btn.dataset.type === type);
+      });
+    }
+
+    // Polling
+    function startPolling() {
+      if (pollInterval) clearInterval(pollInterval);
+      pollInterval = setInterval(async () => {
+        const status = await fetchTrainingStatus();
+        if (status) {
+          session = status;
+          updateDetectionUI();
+          updateStatsUI();
+          updateSuggestionsUI();
+        }
+      }, 1000);
+    }
+
+    function stopPolling() {
+      if (pollInterval) {
+        clearInterval(pollInterval);
+        pollInterval = null;
+      }
+      if (transitInterval) {
+        clearInterval(transitInterval);
+        transitInterval = null;
+      }
+    }
+
+    // UI Updates
+    function updateUI() {
+      // Show/hide content sections
+      document.getElementById('idle-content').style.display = trainingState === 'idle' ? 'flex' : 'none';
+      document.getElementById('active-content').style.display = (trainingState === 'active' || trainingState === 'paused') ? 'flex' : 'none';
+      document.getElementById('completed-content').style.display = trainingState === 'completed' ? 'flex' : 'none';
+
+      // Update status badge
+      const badge = document.getElementById('status-badge');
+      badge.textContent = trainingState.charAt(0).toUpperCase() + trainingState.slice(1);
+      badge.className = 'status-badge ' + trainingState;
+
+      // Update pause button
+      const pauseBtn = document.getElementById('pause-btn');
+      if (pauseBtn) {
+        pauseBtn.innerHTML = trainingState === 'paused' ? '▶ Resume' : '⏸ Pause';
+      }
+
+      // Update completed stats
+      if (trainingState === 'completed' && session) {
+        document.getElementById('final-cameras').textContent = session.stats?.camerasVisited || 0;
+        document.getElementById('final-transits').textContent = session.stats?.transitsRecorded || 0;
+        document.getElementById('final-landmarks').textContent = session.stats?.landmarksMarked || 0;
+        document.getElementById('final-overlaps').textContent = session.stats?.overlapsDetected || 0;
+        document.getElementById('final-avg-transit').textContent = (session.stats?.averageTransitTime || 0) + 's';
+        document.getElementById('final-coverage').textContent = (session.stats?.coveragePercentage || 0) + '%';
+      }
+    }
+
+    function updateDetectionUI() {
+      if (!session) return;
+
+      const card = document.getElementById('detection-card');
+      const icon = document.getElementById('detection-icon');
+      const title = document.getElementById('detection-title');
+      const subtitle = document.getElementById('detection-subtitle');
+      const confidence = document.getElementById('detection-confidence');
+      const transitTimer = document.getElementById('transit-timer');
+
+      if (session.currentCamera) {
+        // Detected on a camera
+        card.className = 'detection-card detecting';
+        icon.textContent = '📷';
+        title.textContent = session.currentCamera.name;
+        subtitle.textContent = 'You are visible on this camera';
+        confidence.textContent = 'Confidence: ' + Math.round(session.currentCamera.confidence * 100) + '%';
+        transitTimer.style.display = 'none';
+
+        // Check for new camera detection to add to history
+        const lastHistoryCamera = historyItems.find(h => h.type === 'camera');
+        if (!lastHistoryCamera || lastHistoryCamera.cameraId !== session.currentCamera.id) {
+          addHistoryItem('Detected on: ' + session.currentCamera.name, 'camera', session.currentCamera.id);
+        }
+      } else if (session.activeTransit) {
+        // In transit
+        card.className = 'detection-card in-transit';
+        icon.textContent = '🚶';
+        title.textContent = 'In Transit';
+        subtitle.textContent = 'Walking to next camera...';
+        confidence.textContent = '';
+        transitTimer.style.display = 'flex';
+        document.getElementById('transit-from').textContent = 'from ' + session.activeTransit.fromCameraName;
+
+        // Start transit timer if not already running
+        if (!transitInterval) {
+          transitInterval = setInterval(() => {
+            if (session?.activeTransit) {
+              document.getElementById('transit-time').textContent = session.activeTransit.elapsedSeconds + 's';
+            }
+          }, 1000);
+        }
+      } else {
+        // Waiting
+        card.className = 'detection-card';
+        icon.textContent = '👤';
+        title.textContent = 'Waiting for detection...';
+        subtitle.textContent = 'Walk to any camera to begin';
+        confidence.textContent = '';
+        transitTimer.style.display = 'none';
+
+        if (transitInterval) {
+          clearInterval(transitInterval);
+          transitInterval = null;
+        }
+      }
+    }
+
+    function updateStatsUI() {
+      if (!session?.stats) return;
+
+      document.getElementById('stat-cameras').textContent = session.stats.camerasVisited;
+      document.getElementById('stat-transits').textContent = session.stats.transitsRecorded;
+      document.getElementById('stat-landmarks').textContent = session.stats.landmarksMarked;
+      document.getElementById('progress-percent').textContent = session.stats.coveragePercentage + '%';
+      document.getElementById('progress-fill').style.width = session.stats.coveragePercentage + '%';
+    }
+
+    function updateSuggestionsUI() {
+      if (!session?.suggestions || session.suggestions.length === 0) return;
+
+      const list = document.getElementById('suggestions-list');
+      list.innerHTML = session.suggestions.map(s =>
+        '<div class="suggestion-item">' + s + '</div>'
+      ).join('');
+    }
+
+    function addHistoryItem(text, type, cameraId) {
+      const time = new Date().toLocaleTimeString();
+      historyItems.unshift({ text, type, time, cameraId });
+      if (historyItems.length > 50) historyItems.pop();
+
+      const list = document.getElementById('history-list');
+      document.getElementById('history-count').textContent = historyItems.length + ' events';
+
+      list.innerHTML = historyItems.map(item => {
+        let className = '';
+        if (item.type === 'camera') className = 'history-item-camera';
+        if (item.type === 'transit') className = 'history-item-transit';
+        return '<div class="history-item"><span class="' + className + '">' + item.text + '</span>' +
+               '<div class="history-item-time">' + item.time + '</div></div>';
+      }).join('');
+    }
+
+    function switchTab(tabName) {
+      document.querySelectorAll('.tab').forEach(tab => {
+        tab.classList.toggle('active', tab.textContent.toLowerCase() === tabName);
+      });
+      document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.toggle('active', content.id === 'tab-' + tabName);
+      });
+    }
+
+    // Initialize on load
+    init();
+  </script>
+</body>
+</html>`;
+
+
 /***/ },
 
 /***/ "assert"