@blueharford/scrypted-spatial-awareness 0.2.1 → 0.4.0

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;
@@ -35645,6 +35646,25 @@ class TrackingEngine {
     objectLastAlertTime = new Map();
     /** Callback for topology changes (e.g., landmark suggestions) */
     onTopologyChange;
+    // ==================== LLM Debouncing ====================
+    /** Last time LLM was called */
+    lastLlmCallTime = 0;
+    /** Queue of pending LLM requests (we only keep latest) */
+    llmDebounceTimer = null;
+    // ==================== Transit Time Learning ====================
+    /** Observed transit times for learning */
+    observedTransits = new Map();
+    /** Connection suggestions based on observed patterns */
+    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;
@@ -35738,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)) {
@@ -35776,9 +35800,28 @@ class TrackingEngine {
     recordAlertTime(globalId) {
         this.objectLastAlertTime.set(globalId, Date.now());
     }
-    /** Get spatial reasoning result for movement (uses RAG + LLM) */
+    /** Check if LLM call is allowed (rate limiting) */
+    isLlmCallAllowed() {
+        const debounceInterval = this.config.llmDebounceInterval || 0;
+        if (debounceInterval <= 0)
+            return true;
+        const timeSinceLastCall = Date.now() - this.lastLlmCallTime;
+        return timeSinceLastCall >= debounceInterval;
+    }
+    /** Record that an LLM call was made */
+    recordLlmCall() {
+        this.lastLlmCallTime = Date.now();
+    }
+    /** Get spatial reasoning result for movement (uses RAG + LLM) with debouncing and fallback */
     async getSpatialDescription(tracked, fromCameraId, toCameraId, transitTime, currentCameraId) {
+        const fallbackEnabled = this.config.llmFallbackEnabled ?? true;
+        const fallbackTimeout = this.config.llmFallbackTimeout ?? 3000;
         try {
+            // Check rate limiting - if not allowed, return null to use basic description
+            if (!this.isLlmCallAllowed()) {
+                this.console.log('LLM rate-limited, using basic notification');
+                return null;
+            }
             // Get snapshot from camera for LLM analysis (if LLM is enabled)
             let mediaObject;
             if (this.config.useLlmDescriptions) {
@@ -35787,9 +35830,28 @@ class TrackingEngine {
                     mediaObject = await camera.takePicture();
                 }
             }
+            // Record that we're making an LLM call
+            this.recordLlmCall();
             // Use spatial reasoning engine for rich context-aware description
-            const result = await this.spatialReasoning.generateMovementDescription(tracked, fromCameraId, toCameraId, transitTime, mediaObject);
-            // Optionally trigger landmark learning
+            // Apply timeout if fallback is enabled
+            let result;
+            if (fallbackEnabled && mediaObject) {
+                const timeoutPromise = new Promise((_, reject) => {
+                    setTimeout(() => reject(new Error('LLM timeout')), fallbackTimeout);
+                });
+                const descriptionPromise = this.spatialReasoning.generateMovementDescription(tracked, fromCameraId, toCameraId, transitTime, mediaObject);
+                try {
+                    result = await Promise.race([descriptionPromise, timeoutPromise]);
+                }
+                catch (timeoutError) {
+                    this.console.log('LLM timed out, using basic notification');
+                    return null;
+                }
+            }
+            else {
+                result = await this.spatialReasoning.generateMovementDescription(tracked, fromCameraId, toCameraId, transitTime, mediaObject);
+            }
+            // Optionally trigger landmark learning (background, non-blocking)
             if (this.config.enableLandmarkLearning && mediaObject) {
                 this.tryLearnLandmark(currentCameraId, mediaObject, tracked.className);
             }
@@ -35837,6 +35899,8 @@ class TrackingEngine {
                     transitDuration,
                     correlationConfidence: correlation.confidence,
                 });
+                // Record for transit time learning
+                this.recordObservedTransit(lastSighting.cameraId, sighting.cameraId, transitDuration);
                 this.console.log(`Object ${tracked.globalId.slice(0, 8)} transited: ` +
                     `${lastSighting.cameraName} → ${sighting.cameraName} ` +
                     `(confidence: ${(correlation.confidence * 100).toFixed(0)}%)`);
@@ -36025,6 +36089,669 @@ class TrackingEngine {
     getTrackedObject(globalId) {
         return this.state.getObject(globalId);
     }
+    // ==================== Transit Time Learning ====================
+    /** Record an observed transit time for learning */
+    recordObservedTransit(fromCameraId, toCameraId, transitTime) {
+        if (!this.config.enableTransitTimeLearning)
+            return;
+        const key = `${fromCameraId}->${toCameraId}`;
+        const observation = {
+            fromCameraId,
+            toCameraId,
+            transitTime,
+            timestamp: Date.now(),
+        };
+        // Add to observations
+        if (!this.observedTransits.has(key)) {
+            this.observedTransits.set(key, []);
+        }
+        const observations = this.observedTransits.get(key);
+        observations.push(observation);
+        // Keep only last 100 observations per connection
+        if (observations.length > 100) {
+            observations.shift();
+        }
+        // Check if we should update existing connection
+        const existingConnection = (0, topology_1.findConnection)(this.topology, fromCameraId, toCameraId);
+        if (existingConnection) {
+            this.maybeUpdateConnectionTransitTime(existingConnection, observations);
+        }
+        else if (this.config.enableConnectionSuggestions) {
+            // No existing connection - suggest one
+            this.maybeCreateConnectionSuggestion(fromCameraId, toCameraId, observations);
+        }
+    }
+    /** Update an existing connection's transit time based on observations */
+    maybeUpdateConnectionTransitTime(connection, observations) {
+        if (observations.length < 5)
+            return; // Need minimum observations
+        const times = observations.map(o => o.transitTime).sort((a, b) => a - b);
+        // Calculate percentiles
+        const newMin = times[Math.floor(times.length * 0.1)];
+        const newTypical = times[Math.floor(times.length * 0.5)];
+        const newMax = times[Math.floor(times.length * 0.9)];
+        // Only update if significantly different (>20% change)
+        const currentTypical = connection.transitTime.typical;
+        const percentChange = Math.abs(newTypical - currentTypical) / currentTypical;
+        if (percentChange > 0.2 && observations.length >= 10) {
+            this.console.log(`Updating transit time for ${connection.name}: ` +
+                `${Math.round(currentTypical / 1000)}s → ${Math.round(newTypical / 1000)}s (based on ${observations.length} observations)`);
+            connection.transitTime = {
+                min: newMin,
+                typical: newTypical,
+                max: newMax,
+            };
+            // Notify about topology change
+            if (this.onTopologyChange) {
+                this.onTopologyChange(this.topology);
+            }
+        }
+    }
+    /** Create or update a connection suggestion based on observations */
+    maybeCreateConnectionSuggestion(fromCameraId, toCameraId, observations) {
+        if (observations.length < this.MIN_OBSERVATIONS_FOR_SUGGESTION)
+            return;
+        const fromCamera = (0, topology_1.findCamera)(this.topology, fromCameraId);
+        const toCamera = (0, topology_1.findCamera)(this.topology, toCameraId);
+        if (!fromCamera || !toCamera)
+            return;
+        const key = `${fromCameraId}->${toCameraId}`;
+        const times = observations.map(o => o.transitTime).sort((a, b) => a - b);
+        // Calculate transit time suggestion
+        const suggestedMin = times[Math.floor(times.length * 0.1)] || times[0];
+        const suggestedTypical = times[Math.floor(times.length * 0.5)] || times[0];
+        const suggestedMax = times[Math.floor(times.length * 0.9)] || times[times.length - 1];
+        // Calculate confidence based on consistency and count
+        const avgTime = times.reduce((a, b) => a + b, 0) / times.length;
+        const variance = times.reduce((sum, t) => sum + Math.pow(t - avgTime, 2), 0) / times.length;
+        const stdDev = Math.sqrt(variance);
+        const coefficientOfVariation = stdDev / avgTime;
+        // Higher confidence with more observations and lower variance
+        const countFactor = Math.min(observations.length / 10, 1);
+        const consistencyFactor = Math.max(0, 1 - coefficientOfVariation);
+        const confidence = (countFactor * 0.6 + consistencyFactor * 0.4);
+        const suggestion = {
+            id: `suggest_${key}`,
+            fromCameraId,
+            fromCameraName: fromCamera.name,
+            toCameraId,
+            toCameraName: toCamera.name,
+            observedTransits: observations.slice(-10), // Keep last 10
+            suggestedTransitTime: {
+                min: suggestedMin,
+                typical: suggestedTypical,
+                max: suggestedMax,
+            },
+            confidence,
+            timestamp: Date.now(),
+        };
+        this.connectionSuggestions.set(key, suggestion);
+        if (observations.length === this.MIN_OBSERVATIONS_FOR_SUGGESTION) {
+            this.console.log(`New connection suggested: ${fromCamera.name} → ${toCamera.name} ` +
+                `(typical: ${Math.round(suggestedTypical / 1000)}s, confidence: ${Math.round(confidence * 100)}%)`);
+        }
+    }
+    /** Get pending connection suggestions */
+    getConnectionSuggestions() {
+        return Array.from(this.connectionSuggestions.values())
+            .filter(s => s.confidence >= 0.5) // Only suggest with reasonable confidence
+            .sort((a, b) => b.confidence - a.confidence);
+    }
+    /** Accept a connection suggestion, adding it to topology */
+    acceptConnectionSuggestion(suggestionId) {
+        const key = suggestionId.replace('suggest_', '');
+        const suggestion = this.connectionSuggestions.get(key);
+        if (!suggestion)
+            return null;
+        const fromCamera = (0, topology_1.findCamera)(this.topology, suggestion.fromCameraId);
+        const toCamera = (0, topology_1.findCamera)(this.topology, suggestion.toCameraId);
+        if (!fromCamera || !toCamera)
+            return null;
+        const connection = {
+            id: `conn-${Date.now()}`,
+            fromCameraId: suggestion.fromCameraId,
+            toCameraId: suggestion.toCameraId,
+            name: `${fromCamera.name} to ${toCamera.name}`,
+            exitZone: [],
+            entryZone: [],
+            transitTime: suggestion.suggestedTransitTime,
+            bidirectional: true, // Default to bidirectional
+        };
+        this.topology.connections.push(connection);
+        this.connectionSuggestions.delete(key);
+        // Notify about topology change
+        if (this.onTopologyChange) {
+            this.onTopologyChange(this.topology);
+        }
+        this.console.log(`Connection accepted: ${connection.name}`);
+        return connection;
+    }
+    /** Reject a connection suggestion */
+    rejectConnectionSuggestion(suggestionId) {
+        const key = suggestionId.replace('suggest_', '');
+        if (!this.connectionSuggestions.has(key))
+            return false;
+        this.connectionSuggestions.delete(key);
+        // Also clear observations so it doesn't get re-suggested immediately
+        this.observedTransits.delete(key);
+        return true;
+    }
+    // ==================== Live Tracking State ====================
+    /** Get current state of all tracked objects for live overlay */
+    getLiveTrackingState() {
+        const activeObjects = this.state.getActiveObjects();
+        const objects = activeObjects.map(tracked => {
+            const lastSighting = (0, tracked_object_1.getLastSighting)(tracked);
+            const camera = lastSighting ? (0, topology_1.findCamera)(this.topology, lastSighting.cameraId) : null;
+            return {
+                globalId: tracked.globalId,
+                className: tracked.className,
+                label: tracked.label,
+                lastCameraId: lastSighting?.cameraId || '',
+                lastCameraName: lastSighting?.cameraName || '',
+                lastSeen: tracked.lastSeen,
+                state: tracked.state,
+                cameraPosition: camera?.floorPlanPosition,
+            };
+        });
+        return {
+            objects,
+            timestamp: Date.now(),
+        };
+    }
+    /** Get journey path for visualization */
+    getJourneyPath(globalId) {
+        const tracked = this.state.getObject(globalId);
+        if (!tracked)
+            return null;
+        const segments = tracked.journey.map(j => {
+            const fromCamera = (0, topology_1.findCamera)(this.topology, j.fromCameraId);
+            const toCamera = (0, topology_1.findCamera)(this.topology, j.toCameraId);
+            return {
+                fromCamera: {
+                    id: j.fromCameraId,
+                    name: j.fromCameraName,
+                    position: fromCamera?.floorPlanPosition,
+                },
+                toCamera: {
+                    id: j.toCameraId,
+                    name: j.toCameraName,
+                    position: toCamera?.floorPlanPosition,
+                },
+                transitTime: j.transitDuration,
+                timestamp: j.entryTime,
+            };
+        });
+        const lastSighting = (0, tracked_object_1.getLastSighting)(tracked);
+        let currentLocation;
+        if (lastSighting) {
+            const camera = (0, topology_1.findCamera)(this.topology, lastSighting.cameraId);
+            currentLocation = {
+                cameraId: lastSighting.cameraId,
+                cameraName: lastSighting.cameraName,
+                position: camera?.floorPlanPosition,
+            };
+        }
+        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;
 
@@ -36732,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';
@@ -36806,6 +37534,41 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             description: 'Use LLM plugin (if installed) to generate descriptive alerts like "Man walking from garage towards front door"',
             group: 'AI & Spatial Reasoning',
         },
+        llmDebounceInterval: {
+            title: 'LLM Rate Limit (seconds)',
+            type: 'number',
+            defaultValue: 10,
+            description: 'Minimum time between LLM calls to prevent API overload (0 = no limit)',
+            group: 'AI & Spatial Reasoning',
+        },
+        llmFallbackEnabled: {
+            title: 'Fallback to Basic Notifications',
+            type: 'boolean',
+            defaultValue: true,
+            description: 'When LLM is rate-limited or slow, fall back to basic notifications immediately',
+            group: 'AI & Spatial Reasoning',
+        },
+        llmFallbackTimeout: {
+            title: 'LLM Timeout (seconds)',
+            type: 'number',
+            defaultValue: 3,
+            description: 'Maximum time to wait for LLM response before falling back to basic notification',
+            group: 'AI & Spatial Reasoning',
+        },
+        enableTransitTimeLearning: {
+            title: 'Learn Transit Times',
+            type: 'boolean',
+            defaultValue: true,
+            description: 'Automatically adjust connection transit times based on observed movement patterns',
+            group: 'AI & Spatial Reasoning',
+        },
+        enableConnectionSuggestions: {
+            title: 'Suggest Camera Connections',
+            type: 'boolean',
+            defaultValue: true,
+            description: 'Automatically suggest new camera connections based on observed movement patterns',
+            group: 'AI & Spatial Reasoning',
+        },
         enableLandmarkLearning: {
             title: 'Learn Landmarks from AI',
             type: 'boolean',
@@ -36965,6 +37728,11 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             loiteringThreshold: (this.storageSettings.values.loiteringThreshold || 3) * 1000,
             objectAlertCooldown: (this.storageSettings.values.objectAlertCooldown || 30) * 1000,
             useLlmDescriptions: this.storageSettings.values.useLlmDescriptions ?? true,
+            llmDebounceInterval: (this.storageSettings.values.llmDebounceInterval || 10) * 1000,
+            llmFallbackEnabled: this.storageSettings.values.llmFallbackEnabled ?? true,
+            llmFallbackTimeout: (this.storageSettings.values.llmFallbackTimeout || 3) * 1000,
+            enableTransitTimeLearning: this.storageSettings.values.enableTransitTimeLearning ?? true,
+            enableConnectionSuggestions: this.storageSettings.values.enableConnectionSuggestions ?? true,
             enableLandmarkLearning: this.storageSettings.values.enableLandmarkLearning ?? true,
             landmarkConfidenceThreshold: this.storageSettings.values.landmarkConfidenceThreshold ?? 0.7,
         };
@@ -37043,8 +37811,89 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
     // ==================== Settings Implementation ====================
     async getSettings() {
         const settings = await this.storageSettings.getSettings();
+        // 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',
+        });
         // 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',
@@ -37052,39 +37901,41 @@ 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>
       `,
@@ -37214,6 +38065,11 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             key === 'loiteringThreshold' ||
             key === 'objectAlertCooldown' ||
             key === 'useLlmDescriptions' ||
+            key === 'llmDebounceInterval' ||
+            key === 'llmFallbackEnabled' ||
+            key === 'llmFallbackTimeout' ||
+            key === 'enableTransitTimeLearning' ||
+            key === 'enableConnectionSuggestions' ||
             key === 'enableLandmarkLearning' ||
             key === 'landmarkConfidenceThreshold') {
             const topologyJson = this.storage.getItem('topology');
@@ -37289,27 +38145,85 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             if (path.endsWith('/api/infer-relationships')) {
                 return this.handleInferRelationshipsRequest(response);
             }
+            // Connection suggestions
+            if (path.endsWith('/api/connection-suggestions')) {
+                return this.handleConnectionSuggestionsRequest(request, response);
+            }
+            if (path.match(/\/api\/connection-suggestions\/[\w->]+\/(accept|reject)$/)) {
+                const parts = path.split('/');
+                const action = parts.pop();
+                const suggestionId = parts.pop();
+                return this.handleConnectionSuggestionActionRequest(suggestionId, action, response);
+            }
+            // Live tracking state
+            if (path.endsWith('/api/live-tracking')) {
+                return this.handleLiveTrackingRequest(response);
+            }
+            // Journey visualization
+            if (path.match(/\/api\/journey-path\/[\w-]+$/)) {
+                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.1.0',
+                version: '0.4.0',
                 endpoints: {
                     api: {
                         trackedObjects: '/api/tracked-objects',
                         journey: '/api/journey/{globalId}',
+                        journeyPath: '/api/journey-path/{globalId}',
                         topology: '/api/topology',
                         alerts: '/api/alerts',
                         floorPlan: '/api/floor-plan',
+                        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',
                     },
                 },
             }), {
@@ -37666,32 +38580,290 @@ class SpatialAwarenessPlugin extends sdk_1.ScryptedDeviceBase {
             headers: { 'Content-Type': 'application/json' },
         });
     }
-    serveEditorUI(response) {
-        response.send(editor_html_1.EDITOR_HTML, {
-            headers: { 'Content-Type': 'text/html' },
+    handleConnectionSuggestionsRequest(request, response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ suggestions: [] }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const suggestions = this.trackingEngine.getConnectionSuggestions();
+        response.send(JSON.stringify({
+            suggestions,
+            count: suggestions.length,
+        }), {
+            headers: { 'Content-Type': 'application/json' },
         });
     }
-    serveStaticFile(path, response) {
-        // Serve static files for the UI
-        response.send('Not found', { code: 404 });
-    }
-    // ==================== Readme Implementation ====================
-    async getReadmeMarkdown() {
-        return `
-# Spatial Awareness Plugin
-
-This plugin enables cross-camera object tracking across your entire NVR system.
-
-## Features
-
-- **Cross-Camera Tracking**: Correlate objects as they move between cameras
-- **Journey History**: Complete path history for each tracked object
-- **Entry/Exit Detection**: Know when objects enter or leave your property
-- **Visual Floor Plan**: Configure camera topology with a visual editor
-- **MQTT Integration**: Export tracking data to Home Assistant
-- **REST API**: Query tracked objects and journeys programmatically
-- **Smart Alerts**: Get notified about property entry/exit, unusual paths, and more
-
+    handleConnectionSuggestionActionRequest(suggestionId, action, response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        if (action === 'accept') {
+            const connection = this.trackingEngine.acceptConnectionSuggestion(suggestionId);
+            if (connection) {
+                // Save updated topology
+                const topology = this.trackingEngine.getTopology();
+                this.storage.setItem('topology', JSON.stringify(topology));
+                response.send(JSON.stringify({ success: true, connection }), {
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+            else {
+                response.send(JSON.stringify({ error: 'Suggestion not found' }), {
+                    code: 404,
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+        }
+        else if (action === 'reject') {
+            const success = this.trackingEngine.rejectConnectionSuggestion(suggestionId);
+            if (success) {
+                response.send(JSON.stringify({ success: true }), {
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+            else {
+                response.send(JSON.stringify({ error: 'Suggestion not found' }), {
+                    code: 404,
+                    headers: { 'Content-Type': 'application/json' },
+                });
+            }
+        }
+        else {
+            response.send(JSON.stringify({ error: 'Invalid action' }), {
+                code: 400,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    handleLiveTrackingRequest(response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ objects: [], timestamp: Date.now() }), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const liveState = this.trackingEngine.getLiveTrackingState();
+        response.send(JSON.stringify(liveState), {
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+    handleJourneyPathRequest(globalId, response) {
+        if (!this.trackingEngine) {
+            response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+                code: 500,
+                headers: { 'Content-Type': 'application/json' },
+            });
+            return;
+        }
+        const journeyPath = this.trackingEngine.getJourneyPath(globalId);
+        if (journeyPath) {
+            response.send(JSON.stringify(journeyPath), {
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        else {
+            response.send(JSON.stringify({ error: 'Object not found' }), {
+                code: 404,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+    }
+    // ==================== 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 });
+    }
+    // ==================== Readme Implementation ====================
+    async getReadmeMarkdown() {
+        return `
+# Spatial Awareness Plugin
+
+This plugin enables cross-camera object tracking across your entire NVR system.
+
+## Features
+
+- **Cross-Camera Tracking**: Correlate objects as they move between cameras
+- **Journey History**: Complete path history for each tracked object
+- **Entry/Exit Detection**: Know when objects enter or leave your property
+- **Visual Floor Plan**: Configure camera topology with a visual editor
+- **MQTT Integration**: Export tracking data to Home Assistant
+- **REST API**: Query tracked objects and journeys programmatically
+- **Smart Alerts**: Get notified about property entry/exit, unusual paths, and more
+
 ## Setup
 
 1. **Add Cameras**: Select cameras with object detection in the plugin settings
@@ -38249,6 +39421,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"
@@ -38615,6 +39864,23 @@ exports.EDITOR_HTML = `<!DOCTYPE html>
           </div>
           <div id="suggestions-list"></div>
         </div>
+        <div class="section" id="connection-suggestions-section" style="display: none;">
+          <div class="section-title">
+            <span>Connection Suggestions</span>
+            <button class="btn btn-small" onclick="loadConnectionSuggestions()">Refresh</button>
+          </div>
+          <div id="connection-suggestions-list"></div>
+        </div>
+        <div class="section" id="live-tracking-section">
+          <div class="section-title">
+            <span>Live Tracking</span>
+            <label class="checkbox-group" style="font-size: 11px; font-weight: normal; text-transform: none;">
+              <input type="checkbox" id="live-tracking-toggle" onchange="toggleLiveTracking(this.checked)">
+              Enable
+            </label>
+          </div>
+          <div id="live-tracking-list" style="max-height: 150px; overflow-y: auto;"></div>
+        </div>
       </div>
     </div>
     <div class="editor">
@@ -38805,6 +40071,12 @@ exports.EDITOR_HTML = `<!DOCTYPE html>
     let availableCameras = [];
     let landmarkTemplates = [];
     let pendingSuggestions = [];
+    let connectionSuggestions = [];
+    let liveTrackingData = { objects: [], timestamp: 0 };
+    let liveTrackingEnabled = false;
+    let liveTrackingInterval = null;
+    let selectedJourneyId = null;
+    let journeyPath = null;
     let isDrawing = false;
     let drawStart = null;
     let currentDrawing = null;
@@ -38817,6 +40089,7 @@ exports.EDITOR_HTML = `<!DOCTYPE html>
       await loadAvailableCameras();
       await loadLandmarkTemplates();
       await loadSuggestions();
+      await loadConnectionSuggestions();
       resizeCanvas();
       render();
       updateUI();
@@ -38916,22 +40189,148 @@ exports.EDITOR_HTML = `<!DOCTYPE html>
       } catch (e) { console.error('Failed to reject suggestion:', e); }
     }
 
-    function openAddLandmarkModal() {
-      updateLandmarkSuggestions();
-      document.getElementById('add-landmark-modal').classList.add('active');
+    // ==================== Connection Suggestions ====================
+    async function loadConnectionSuggestions() {
+      try {
+        const response = await fetch('../api/connection-suggestions');
+        if (response.ok) {
+          const data = await response.json();
+          connectionSuggestions = data.suggestions || [];
+          updateConnectionSuggestionsUI();
+        }
+      } catch (e) { console.error('Failed to load connection suggestions:', e); }
     }
 
-    function updateLandmarkSuggestions() {
-      const type = document.getElementById('landmark-type-select').value;
-      const template = landmarkTemplates.find(t => t.type === type);
-      const container = document.getElementById('landmark-templates');
-      if (template) {
-        container.innerHTML = template.suggestions.map(s =>
-          '<button class="btn btn-small" onclick="setLandmarkName(\\'' + s + '\\')" style="margin: 2px;">' + s + '</button>'
-        ).join('');
-      } else {
-        container.innerHTML = '<span style="color: #666; font-size: 12px;">No templates for this type</span>';
-      }
+    function updateConnectionSuggestionsUI() {
+      const section = document.getElementById('connection-suggestions-section');
+      const list = document.getElementById('connection-suggestions-list');
+      if (connectionSuggestions.length === 0) {
+        section.style.display = 'none';
+        return;
+      }
+      section.style.display = 'block';
+      list.innerHTML = connectionSuggestions.map(s =>
+        '<div class="camera-item" style="display: flex; justify-content: space-between; align-items: center;">' +
+        '<div><div class="camera-name">' + s.fromCameraName + ' → ' + s.toCameraName + '</div>' +
+        '<div class="camera-info">' + Math.round(s.suggestedTransitTime.typical / 1000) + 's typical, ' +
+        Math.round(s.confidence * 100) + '% confidence</div></div>' +
+        '<div style="display: flex; gap: 5px;">' +
+        '<button class="btn btn-small btn-primary" onclick="acceptConnectionSuggestion(\\'' + s.id + '\\')">Accept</button>' +
+        '<button class="btn btn-small" onclick="rejectConnectionSuggestion(\\'' + s.id + '\\')">Reject</button>' +
+        '</div></div>'
+      ).join('');
+    }
+
+    async function acceptConnectionSuggestion(id) {
+      try {
+        const response = await fetch('../api/connection-suggestions/' + encodeURIComponent(id) + '/accept', { method: 'POST' });
+        if (response.ok) {
+          const data = await response.json();
+          if (data.connection) {
+            topology.connections.push(data.connection);
+            updateUI();
+            render();
+          }
+          await loadConnectionSuggestions();
+          setStatus('Connection accepted', 'success');
+        }
+      } catch (e) { console.error('Failed to accept connection suggestion:', e); }
+    }
+
+    async function rejectConnectionSuggestion(id) {
+      try {
+        await fetch('../api/connection-suggestions/' + encodeURIComponent(id) + '/reject', { method: 'POST' });
+        await loadConnectionSuggestions();
+        setStatus('Connection suggestion rejected', 'success');
+      } catch (e) { console.error('Failed to reject connection suggestion:', e); }
+    }
+
+    // ==================== Live Tracking ====================
+    function toggleLiveTracking(enabled) {
+      liveTrackingEnabled = enabled;
+      if (enabled) {
+        loadLiveTracking();
+        liveTrackingInterval = setInterval(loadLiveTracking, 2000); // Poll every 2 seconds
+      } else {
+        if (liveTrackingInterval) {
+          clearInterval(liveTrackingInterval);
+          liveTrackingInterval = null;
+        }
+        liveTrackingData = { objects: [], timestamp: 0 };
+        selectedJourneyId = null;
+        journeyPath = null;
+        updateLiveTrackingUI();
+        render();
+      }
+    }
+
+    async function loadLiveTracking() {
+      try {
+        const response = await fetch('../api/live-tracking');
+        if (response.ok) {
+          liveTrackingData = await response.json();
+          updateLiveTrackingUI();
+          render();
+        }
+      } catch (e) { console.error('Failed to load live tracking:', e); }
+    }
+
+    function updateLiveTrackingUI() {
+      const list = document.getElementById('live-tracking-list');
+      if (liveTrackingData.objects.length === 0) {
+        list.innerHTML = '<div style="color: #666; font-size: 12px; text-align: center; padding: 10px;">No active objects</div>';
+        return;
+      }
+      list.innerHTML = liveTrackingData.objects.map(obj => {
+        const isSelected = selectedJourneyId === obj.globalId;
+        const ageSeconds = Math.round((Date.now() - obj.lastSeen) / 1000);
+        const ageStr = ageSeconds < 60 ? ageSeconds + 's ago' : Math.round(ageSeconds / 60) + 'm ago';
+        return '<div class="camera-item' + (isSelected ? ' selected' : '') + '" ' +
+          'onclick="selectTrackedObject(\\'' + obj.globalId + '\\')" ' +
+          'style="padding: 8px; cursor: pointer;">' +
+          '<div class="camera-name" style="font-size: 12px;">' +
+          (obj.className.charAt(0).toUpperCase() + obj.className.slice(1)) +
+          (obj.label ? ' (' + obj.label + ')' : '') + '</div>' +
+          '<div class="camera-info">' + obj.lastCameraName + ' • ' + ageStr + '</div>' +
+          '</div>';
+      }).join('');
+    }
+
+    async function selectTrackedObject(globalId) {
+      if (selectedJourneyId === globalId) {
+        // Deselect
+        selectedJourneyId = null;
+        journeyPath = null;
+      } else {
+        selectedJourneyId = globalId;
+        // Load journey path
+        try {
+          const response = await fetch('../api/journey-path/' + globalId);
+          if (response.ok) {
+            journeyPath = await response.json();
+          }
+        } catch (e) { console.error('Failed to load journey path:', e); }
+      }
+      updateLiveTrackingUI();
+      render();
+    }
+
+    function openAddLandmarkModal() {
+      updateLandmarkSuggestions();
+      document.getElementById('add-landmark-modal').classList.add('active');
+    }
+
+    function updateLandmarkSuggestions() {
+      const type = document.getElementById('landmark-type-select').value;
+      const template = landmarkTemplates.find(t => t.type === type);
+      const container = document.getElementById('landmark-templates');
+      if (template) {
+        container.innerHTML = template.suggestions.map(s =>
+          '<button class="btn btn-small" onclick="setLandmarkName(\\'' + s + '\\')" style="margin: 2px;">' + s + '</button>'
+        ).join('');
+      } else {
+        container.innerHTML = '<span style="color: #666; font-size: 12px;">No templates for this type</span>';
+      }
     }
 
     function setLandmarkName(name) {
@@ -39139,6 +40538,112 @@ exports.EDITOR_HTML = `<!DOCTYPE html>
       for (const camera of topology.cameras) {
         if (camera.floorPlanPosition) { drawCamera(camera); }
       }
+
+      // Draw journey path if selected
+      if (journeyPath && journeyPath.segments.length > 0) {
+        drawJourneyPath();
+      }
+
+      // Draw live tracking objects
+      if (liveTrackingEnabled && liveTrackingData.objects.length > 0) {
+        drawLiveTrackingObjects();
+      }
+    }
+
+    function drawJourneyPath() {
+      if (!journeyPath) return;
+
+      ctx.strokeStyle = '#ff6b6b';
+      ctx.lineWidth = 3;
+      ctx.setLineDash([8, 4]);
+
+      // Draw path segments
+      for (const segment of journeyPath.segments) {
+        if (segment.fromCamera.position && segment.toCamera.position) {
+          ctx.beginPath();
+          ctx.moveTo(segment.fromCamera.position.x, segment.fromCamera.position.y);
+          ctx.lineTo(segment.toCamera.position.x, segment.toCamera.position.y);
+          ctx.stroke();
+
+          // Draw timestamp indicator
+          const midX = (segment.fromCamera.position.x + segment.toCamera.position.x) / 2;
+          const midY = (segment.fromCamera.position.y + segment.toCamera.position.y) / 2;
+          ctx.fillStyle = 'rgba(255, 107, 107, 0.9)';
+          ctx.beginPath();
+          ctx.arc(midX, midY, 4, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+
+      ctx.setLineDash([]);
+
+      // Draw current location indicator
+      if (journeyPath.currentLocation?.position) {
+        const pos = journeyPath.currentLocation.position;
+        // Pulsing dot effect
+        const pulse = (Date.now() % 1000) / 1000;
+        const radius = 10 + pulse * 5;
+        const alpha = 1 - pulse * 0.5;
+
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(255, 107, 107, ' + alpha + ')';
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
+        ctx.fillStyle = '#ff6b6b';
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+
+    function drawLiveTrackingObjects() {
+      const objectColors = {
+        person: '#4caf50',
+        car: '#2196f3',
+        animal: '#ff9800',
+        default: '#9c27b0'
+      };
+
+      for (const obj of liveTrackingData.objects) {
+        if (!obj.cameraPosition) continue;
+
+        // Skip if this is the selected journey object (drawn separately with path)
+        if (obj.globalId === selectedJourneyId) continue;
+
+        const pos = obj.cameraPosition;
+        const color = objectColors[obj.className] || objectColors.default;
+        const ageSeconds = (Date.now() - obj.lastSeen) / 1000;
+
+        // Fade old objects
+        const alpha = Math.max(0.3, 1 - ageSeconds / 60);
+
+        // Draw object indicator
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, 12, 0, Math.PI * 2);
+        ctx.fillStyle = color.replace(')', ', ' + alpha + ')').replace('rgb', 'rgba');
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        // Draw class icon
+        ctx.fillStyle = 'rgba(255, 255, 255, ' + alpha + ')';
+        ctx.font = 'bold 10px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        const icon = obj.className === 'person' ? 'P' : obj.className === 'car' ? 'C' : obj.className === 'animal' ? 'A' : '?';
+        ctx.fillText(icon, pos.x, pos.y);
+
+        // Draw label below
+        if (obj.label) {
+          ctx.font = '9px sans-serif';
+          ctx.fillText(obj.label.slice(0, 10), pos.x, pos.y + 20);
+        }
+      }
     }
 
     function drawLandmark(landmark) {
@@ -39525,6 +41030,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"