@blueharford/scrypted-spatial-awareness 0.6.16 → 0.6.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueharford/scrypted-spatial-awareness",
-  "version": "0.6.16",
+  "version": "0.6.19",
   "description": "Cross-camera object tracking for Scrypted NVR with spatial awareness",
   "author": "Joshua Seidel <blueharford>",
   "license": "Apache-2.0",

package/src/core/topology-discovery.ts

@@ -105,7 +105,10 @@ For EACH landmark, estimate its DISTANCE from the camera:
 - Street/road
 - Neighbor's yard
 
-For each zone, estimate what percentage of the image it covers (0.0 to 1.0).
+For each zone, provide:
+- coverage: percentage of the image it covers (0.0 to 1.0)
+- distance: how far the CENTER of the zone is from camera ("close", "near", "medium", "far", "distant")
+- boundingBox: [x, y, width, height] in normalized coordinates (0-1) where the zone appears in the image
 
 ## 3. EDGES - What's at each edge of the frame:
 This helps understand what's just out of view.
@@ -123,8 +126,9 @@ Respond with ONLY valid JSON:
     {"name": "Large Oak Tree", "type": "feature", "distance": "far", "confidence": 0.85, "description": "Mature oak tree near property line, roughly 80 feet from camera"}
   ],
   "zones": [
-    {"name": "Front Yard", "type": "yard", "coverage": 0.5, "description": "Grass lawn with some bare patches"},
-    {"name": "Driveway", "type": "driveway", "coverage": 0.25, "description": "Concrete driveway leading to garage"}
+    {"name": "Front Yard", "type": "yard", "coverage": 0.5, "distance": "medium", "boundingBox": [0.2, 0.4, 0.6, 0.4], "description": "Grass lawn with some bare patches"},
+    {"name": "Driveway", "type": "driveway", "coverage": 0.25, "distance": "near", "boundingBox": [0.6, 0.5, 0.3, 0.4], "description": "Concrete driveway leading to garage"},
+    {"name": "Street", "type": "street", "coverage": 0.1, "distance": "distant", "boundingBox": [0.0, 0.1, 1.0, 0.15], "description": "Public road beyond property line"}
   ],
   "edges": {
     "top": "sky, tree canopy",
@@ -379,13 +383,28 @@ export class TopologyDiscoveryEngine {
       try {
         this.console.log(`[Discovery] Trying ${formatType} image format for ${cameraName}...`);
 
+        // Build prompt with camera context (height)
+        const cameraNode = this.topology ? findCamera(this.topology, cameraId) : null;
+        const mountHeight = cameraNode?.context?.mountHeight || 8;
+        const cameraRange = (cameraNode?.fov as any)?.range || 80;
+
+        // Add camera-specific context to the prompt
+        const contextPrefix = `CAMERA INFORMATION:
+- Camera Name: ${cameraName}
+- Mount Height: ${mountHeight} feet above ground
+- Approximate viewing range: ${cameraRange} feet
+
+Use the mount height to help estimate distances - objects at ground level will appear at different angles depending on distance from a camera mounted at ${mountHeight} feet.
+
+`;
+
         // Build multimodal message with provider-specific image format
         const result = await llm.getChatCompletion({
           messages: [
             {
               role: 'user',
               content: [
-                { type: 'text', text: SCENE_ANALYSIS_PROMPT },
+                { type: 'text', text: contextPrefix + SCENE_ANALYSIS_PROMPT },
                 buildImageContent(imageData, formatType),
               ],
             },
@@ -425,7 +444,8 @@ export class TopologyDiscoveryEngine {
                 coverage: typeof z.coverage === 'number' ? z.coverage : 0.5,
                 description: z.description || '',
                 boundingBox: z.boundingBox,
-              }));
+                distance: this.mapDistance(z.distance), // Parse distance for zones too
+              } as DiscoveredZone & { distance?: DistanceEstimate }));
             }
 
             if (parsed.edges && typeof parsed.edges === 'object') {
@@ -545,6 +565,27 @@ export class TopologyDiscoveryEngine {
     return 'medium'; // Default to medium if not specified
   }
 
+  /** Get default distance in feet based on zone type */
+  private getDefaultZoneDistance(zoneType: string): number {
+    switch (zoneType) {
+      case 'patio':
+      case 'walkway':
+        return 10; // Close zones
+      case 'driveway':
+      case 'parking':
+        return 25; // Near zones
+      case 'yard':
+      case 'garden':
+      case 'pool':
+        return 40; // Medium zones
+      case 'street':
+        return 100; // Far zones
+      case 'unknown':
+      default:
+        return 50; // Default to medium distance
+    }
+  }
+
   /** Try to parse JSON with recovery for truncated responses */
   private parseJsonWithRecovery(jsonStr: string, context: string): any {
     // First, try direct parse
@@ -867,6 +908,10 @@ export class TopologyDiscoveryEngine {
     // Generate zone suggestions (even for smaller coverage - 10% is enough)
     for (const zone of analysis.zones) {
       if (zone.coverage >= 0.1) {
+        // Calculate distance in feet from distance estimate (for zones with distance info)
+        const zoneWithDist = zone as DiscoveredZone & { distance?: DistanceEstimate };
+        const distanceFeet = zoneWithDist.distance ? distanceToFeet(zoneWithDist.distance) : this.getDefaultZoneDistance(zone.type);
+
         const suggestion: DiscoverySuggestion = {
           id: `zone_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
           type: 'zone',
@@ -874,10 +919,14 @@ export class TopologyDiscoveryEngine {
           sourceCameras: [analysis.cameraId],
           confidence: Math.min(0.9, 0.5 + zone.coverage), // Higher coverage = higher confidence
           status: 'pending',
-          zone: zone,
+          zone: {
+            ...zone,
+            // Include distance metadata for positioning
+            distanceFeet: distanceFeet,
+          } as any,
         };
         this.suggestions.set(suggestion.id, suggestion);
-        this.console.log(`[Discovery] Zone suggestion: ${zone.name} (${zone.type}, ${Math.round(zone.coverage * 100)}% coverage)`);
+        this.console.log(`[Discovery] Zone suggestion: ${zone.name} (${zone.type}, ${Math.round(zone.coverage * 100)}% coverage, ~${distanceFeet}ft)`);
       }
     }
   }

package/src/main.ts

@@ -1904,71 +1904,46 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
           const dirRad = (direction - 90) * Math.PI / 180;
           const halfFov = (fovAngle / 2) * Math.PI / 180;
 
-          // Use landmark TYPE to determine distance - some things are inherently far away
-          // regardless of where they appear in the camera frame
-          const landmarkType = suggestion.landmark.type;
-          const farTypes = ['neighbor', 'boundary', 'street']; // Always place at edge of FOV
-          const isFarType = farTypes.includes(landmarkType || '');
+          // Get floor plan scale (pixels per foot) - default 5
+          const floorPlanScale = topology.floorPlanScale || 5;
 
-          // Use bounding box if available for horizontal positioning
-          // boundingBox format: [x, y, width, height] normalized 0-1
-          const bbox = (suggestion.landmark as any).boundingBox as [number, number, number, number] | undefined;
+          // Use the ACTUAL distance from LLM analysis (distanceFeet) - this is the key fix!
+          // The LLM estimates distance based on object size, perspective, and camera context
+          const landmarkData = suggestion.landmark as any;
+          const distanceFeet = landmarkData.distanceFeet || 50; // Default 50ft if not set
+          const distanceInPixels = distanceFeet * floorPlanScale;
+
+          // Use bounding box for horizontal positioning within the FOV
+          const bbox = landmarkData.boundingBox as [number, number, number, number] | undefined;
 
           let angleOffset: number;
-          let distanceMultiplier: number;
 
           if (bbox && bbox.length >= 2) {
             // Use bounding box X for horizontal position in FOV
             const bboxCenterX = bbox[0] + (bbox[2] || 0) / 2; // 0 = left edge, 1 = right edge
-
             // Map X position to angle within FOV
             angleOffset = (bboxCenterX - 0.5) * 2 * halfFov;
-
-            // For distance: use TYPE first, then bbox Y as hint
-            if (isFarType) {
-              // Neighbors, boundaries, streets are BEYOND the camera's normal range
-              // Place at 150-200% of range to indicate they're distant background features
-              distanceMultiplier = 1.5 + Math.random() * 0.5; // 150-200% of range
-              this.console.log(`[Discovery] Far-type landmark "${landmarkType}" placed BEYOND FOV (${(distanceMultiplier * 100).toFixed(0)}% of range)`);
-            } else {
-              // For other types, use bbox Y as a hint (but cap minimum distance)
-              const bboxCenterY = bbox[1] + (bbox[3] || 0) / 2;
-              // Map Y to distance: 0 (top) = far, 1 (bottom) = closer (but not too close)
-              distanceMultiplier = Math.max(0.4, 0.9 - (bboxCenterY * 0.5));
-            }
-
-            this.console.log(`[Discovery] Using bounding box [${bbox.join(',')}] for horizontal position`);
+            this.console.log(`[Discovery] Using bounding box [${bbox.join(',')}] for horizontal angle offset`);
           } else {
-            // No bounding box - use type and spread pattern
+            // No bounding box - spread horizontally based on existing landmarks
             const cameraDeviceId = camera.deviceId;
             const existingFromCamera = (topology.landmarks || []).filter(l =>
               l.visibleFromCameras?.includes(cameraDeviceId) ||
               l.visibleFromCameras?.includes(camera.name)
             ).length;
-
             // Spread horizontally across FOV
             angleOffset = (existingFromCamera % 3 - 1) * halfFov * 0.6;
-
-            // Distance based on type
-            if (isFarType) {
-              // Neighbors, boundaries, streets are BEYOND the camera's normal range
-              distanceMultiplier = 1.5 + Math.random() * 0.5; // 150-200% of range
-              this.console.log(`[Discovery] Far-type landmark "${landmarkType}" (no bbox) placed BEYOND FOV`);
-            } else {
-              distanceMultiplier = 0.5 + (existingFromCamera % 2) * 0.3;
-              this.console.log(`[Discovery] No bounding box, using fallback spread (existing: ${existingFromCamera})`);
-            }
+            this.console.log(`[Discovery] No bounding box, spreading horizontally (existing: ${existingFromCamera})`);
           }
 
           const finalAngle = dirRad + angleOffset;
-          const distance = range * distanceMultiplier;
 
           position = {
-            x: camera.floorPlanPosition.x + Math.cos(finalAngle) * distance,
-            y: camera.floorPlanPosition.y + Math.sin(finalAngle) * distance,
+            x: camera.floorPlanPosition.x + Math.cos(finalAngle) * distanceInPixels,
+            y: camera.floorPlanPosition.y + Math.sin(finalAngle) * distanceInPixels,
           };
 
-          this.console.log(`[Discovery] Placing landmark "${suggestion.landmark.name}" in ${camera.name}'s FOV: dir=${direction}°, angle=${(angleOffset * 180 / Math.PI).toFixed(1)}°, dist=${distance.toFixed(0)}px`);
+          this.console.log(`[Discovery] Placing landmark "${suggestion.landmark.name}" at ${distanceFeet}ft (${distanceInPixels}px) from ${camera.name}: dir=${direction}°, angle=${(angleOffset * 180 / Math.PI).toFixed(1)}°`);
         } else {
           // Position in a grid pattern starting from center
           const landmarkCount = topology.landmarks?.length || 0;
@@ -2029,12 +2004,14 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
       const timestamp = Date.now();
 
       if (camera?.floorPlanPosition) {
-        // Get camera's FOV direction and range (cast to any for flexible access)
+        // Get camera's FOV direction (cast to any for flexible access)
         const fov = (camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 }) as any;
         const direction = fov.direction || 0;
-        const range = fov.range || 80;
         const fovAngle = fov.angle || 90;
 
+        // Get floor plan scale (pixels per foot)
+        const floorPlanScale = topology.floorPlanScale || 5;
+
         // Convert direction to radians (0 = up/north, 90 = right/east)
         const dirRad = (direction - 90) * Math.PI / 180;
         const halfFov = (fovAngle / 2) * Math.PI / 180;
@@ -2042,47 +2019,52 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         const camX = camera.floorPlanPosition.x;
         const camY = camera.floorPlanPosition.y;
 
-        // Use bounding box if available to position zone accurately within FOV
+        // Use distanceFeet from the zone metadata for accurate positioning
+        const zoneData = zone as any;
+        const distanceFeet = zoneData.distanceFeet || 40; // Default 40ft if not set
+        const distanceInPixels = distanceFeet * floorPlanScale;
+
+        // Zone size based on coverage (larger coverage = wider zone)
+        const zoneWidthFeet = Math.sqrt(zone.coverage) * 30; // e.g., 50% coverage = ~21ft wide
+        const zoneWidthPixels = zoneWidthFeet * floorPlanScale;
+        const zoneDepthPixels = (zone.coverage * 20) * floorPlanScale; // Depth based on coverage
+
+        // Use bounding box for horizontal positioning if available
         const bbox = zone.boundingBox; // [x, y, width, height] normalized 0-1
 
-        let innerRadius: number;
-        let outerRadius: number;
         let angleStart: number;
         let angleEnd: number;
+        let innerRadius: number;
+        let outerRadius: number;
 
         if (bbox && bbox.length >= 4) {
-          // Map bounding box to position within FOV
+          // Map bounding box X to angle within FOV
           const bboxLeft = bbox[0];
           const bboxRight = bbox[0] + bbox[2];
-          const bboxTop = bbox[1];
-          const bboxBottom = bbox[1] + bbox[3];
-
-          // Map X to angle within FOV (0 = left edge, 1 = right edge)
           angleStart = dirRad + (bboxLeft - 0.5) * 2 * halfFov;
           angleEnd = dirRad + (bboxRight - 0.5) * 2 * halfFov;
 
-          // Map Y to distance (0 = far, 1 = close)
-          innerRadius = range * (0.9 - bboxBottom * 0.6);
-          outerRadius = range * (0.9 - bboxTop * 0.6);
-
-          // Ensure min size
-          if (outerRadius - innerRadius < 20) {
-            outerRadius = innerRadius + 20;
-          }
+          // Use distanceFeet for depth, with a spread based on coverage
+          innerRadius = Math.max(distanceInPixels - zoneDepthPixels / 2, 10);
+          outerRadius = distanceInPixels + zoneDepthPixels / 2;
 
-          this.console.log(`[Discovery] Zone "${zone.name}" using bbox [${bbox.join(',')}] → angles ${(angleStart * 180 / Math.PI).toFixed(1)}° to ${(angleEnd * 180 / Math.PI).toFixed(1)}°`);
+          this.console.log(`[Discovery] Zone "${zone.name}" at ${distanceFeet}ft using bbox [${bbox.join(',')}]`);
         } else {
-          // Fallback: wedge-shaped zone offset by existing count
+          // Fallback: wedge-shaped zone covering portion of FOV
           const existingFromCamera = (topology.drawnZones || []).filter((z: any) =>
             z.linkedCameras?.includes(sourceCameras[0])
           ).length;
 
-          innerRadius = range * 0.3 + existingFromCamera * 20;
-          outerRadius = range * 0.8 + existingFromCamera * 20;
-          angleStart = dirRad - halfFov * 0.7;
-          angleEnd = dirRad + halfFov * 0.7;
+          // Spread horizontally based on existing zones
+          const offset = (existingFromCamera % 3 - 1) * halfFov * 0.5;
+          angleStart = dirRad + offset - halfFov * 0.3;
+          angleEnd = dirRad + offset + halfFov * 0.3;
+
+          // Use distanceFeet for depth
+          innerRadius = Math.max(distanceInPixels - zoneDepthPixels / 2, 10);
+          outerRadius = distanceInPixels + zoneDepthPixels / 2;
 
-          this.console.log(`[Discovery] Zone "${zone.name}" using fallback spread (existing: ${existingFromCamera})`);
+          this.console.log(`[Discovery] Zone "${zone.name}" at ${distanceFeet}ft using fallback spread`);
         }
 
         // Create arc polygon
@@ -2104,7 +2086,7 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
           });
         }
 
-        this.console.log(`[Discovery] Creating zone "${zone.name}" in ${camera.name}'s FOV: dir=${direction}°`);
+        this.console.log(`[Discovery] Creating zone "${zone.name}" at ${distanceFeet}ft (${distanceInPixels}px) from ${camera.name}`);
       } else {
         // Fallback: rectangular zone at default location
         const centerX = 300 + (topology.drawnZones?.length || 0) * 120;

package/src/models/topology.ts

@@ -238,7 +238,7 @@ export interface DrawnZone {
   /** Zone type */
   type: DrawnZoneType;
   /** Polygon points on floor plan (x, y coordinates) */
-  polygon: Point[];
+  polygon: FloorPlanPosition[];
   /** Custom color override (optional) */
   color?: string;
   /** Linked camera IDs that can see this zone */
@@ -354,6 +354,8 @@ export interface CameraTopology {
   floorPlan?: FloorPlanConfig;
   /** Pending AI landmark suggestions */
   pendingSuggestions?: LandmarkSuggestion[];
+  /** Floor plan scale in pixels per foot (for distance calculations) */
+  floorPlanScale?: number;
 }
 
 // ==================== Helper Functions ====================

package/src/ui/editor-html.ts

@@ -454,6 +454,7 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         const response = await fetch('../api/topology');
         if (response.ok) {
           topology = await response.json();
+          console.log('[Load] Loaded topology with', (topology.drawnZones || []).length, 'zones');
           if (!topology.drawings) topology.drawings = [];
           // Load floor plan scale if saved
           if (topology.floorPlanScale) {
@@ -971,14 +972,24 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     async function saveTopology() {
       try {
         setStatus('Saving...', 'warning');
+        console.log('[Save] Saving topology with', (topology.drawnZones || []).length, 'zones');
         const response = await fetch('../api/topology', {
           method: 'PUT',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(topology)
         });
-        if (response.ok) { setStatus('Saved successfully', 'success'); }
-        else { setStatus('Failed to save', 'error'); }
-      } catch (e) { console.error('Failed to save topology:', e); setStatus('Failed to save', 'error'); }
+        if (response.ok) {
+          console.log('[Save] Save successful');
+          setStatus('Saved successfully', 'success');
+        } else {
+          const errorText = await response.text();
+          console.error('[Save] Save failed:', response.status, errorText);
+          setStatus('Failed to save: ' + errorText, 'error');
+        }
+      } catch (e) {
+        console.error('Failed to save topology:', e);
+        setStatus('Failed to save', 'error');
+      }
     }
 
     function resizeCanvas() {
@@ -1632,8 +1643,12 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       const fov = camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 };
       // Convert stored pixel range to feet for display
       const rangeInFeet = Math.round(pixelsToFeet(fov.range || 80));
+      // Get mount height from context or default to 8
+      const mountHeight = camera.context?.mountHeight || 8;
       panel.innerHTML = '<h3>Camera Properties</h3>' +
         '<div class="form-group"><label>Name</label><input type="text" value="' + camera.name + '" onchange="updateCameraName(\\'' + camera.deviceId + '\\', this.value)"></div>' +
+        '<div class="form-group"><label>Mount Height (feet)</label><input type="number" value="' + mountHeight + '" min="1" max="40" step="0.5" onchange="updateCameraMountHeight(\\'' + camera.deviceId + '\\', this.value)"></div>' +
+        '<div style="font-size: 11px; color: #666; margin-top: -10px; margin-bottom: 10px;">Height affects distance estimation in discovery</div>' +
         '<div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isEntryPoint ? 'checked' : '') + ' onchange="updateCameraEntry(\\'' + camera.deviceId + '\\', this.checked)">Entry Point</label></div>' +
         '<div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isExitPoint ? 'checked' : '') + ' onchange="updateCameraExit(\\'' + camera.deviceId + '\\', this.checked)">Exit Point</label></div>' +
         '<h4 style="margin-top: 15px; margin-bottom: 10px; color: #888;">Field of View</h4>' +
@@ -1652,6 +1667,12 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     function updateCameraName(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.name = value; updateUI(); }
     function updateCameraEntry(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isEntryPoint = value; }
     function updateCameraExit(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isExitPoint = value; }
+    function updateCameraMountHeight(id, value) {
+      const camera = topology.cameras.find(c => c.deviceId === id);
+      if (!camera) return;
+      if (!camera.context) camera.context = {};
+      camera.context.mountHeight = parseFloat(value) || 8;
+    }
     function updateCameraFov(id, field, value) {
       const camera = topology.cameras.find(c => c.deviceId === id);
       if (!camera) return;
@@ -1768,9 +1789,13 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         polygon: currentZonePoints.map(pt => ({ x: pt.x, y: pt.y })),
       };
 
+      console.log('[Zone] Creating zone:', zone.name, 'with', zone.polygon.length, 'points');
+
       if (!topology.drawnZones) topology.drawnZones = [];
       topology.drawnZones.push(zone);
 
+      console.log('[Zone] Total zones now:', topology.drawnZones.length);
+
       // Reset state
       zoneDrawingMode = false;
       currentZonePoints = [];
@@ -1779,7 +1804,19 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       setTool('select');
       updateUI();
       render();
-      setStatus('Zone "' + zone.name + '" created with ' + zone.polygon.length + ' points', 'success');
+
+      console.log('[Zone] After updateUI/render, zones in topology:', (topology.drawnZones || []).length);
+
+      setStatus('Zone "' + zone.name + '" created - saving...', 'success');
+
+      // Auto-save after creating a zone
+      saveTopology().then(() => {
+        console.log('[Zone] Save completed, zones in topology:', (topology.drawnZones || []).length);
+        setStatus('Zone "' + zone.name + '" saved', 'success');
+      }).catch(err => {
+        console.error('Failed to auto-save zone:', err);
+        setStatus('Zone created but auto-save failed - click Save', 'warning');
+      });
     }
 
     function selectZone(id) {
@@ -1804,9 +1841,9 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         '<button class="btn btn-primary" onclick="deleteZone(\\'' + id + '\\')" style="background: #dc2626; width: 100%;">Delete Zone</button>';
     }
 
-    function updateZoneName(id, value) { const z = (topology.drawnZones || []).find(z => z.id === id); if (z) { z.name = value; updateUI(); render(); } }
-    function updateZoneType(id, value) { const z = (topology.drawnZones || []).find(z => z.id === id); if (z) { z.type = value; updateUI(); render(); } }
-    function updateZoneDesc(id, value) { const z = (topology.drawnZones || []).find(z => z.id === id); if (z) { z.description = value || undefined; } }
+    function updateZoneName(id, value) { const z = (topology.drawnZones || []).find(z => z.id === id); if (z) { z.name = value; updateUI(); render(); saveTopology(); } }
+    function updateZoneType(id, value) { const z = (topology.drawnZones || []).find(z => z.id === id); if (z) { z.type = value; updateUI(); render(); saveTopology(); } }
+    function updateZoneDesc(id, value) { const z = (topology.drawnZones || []).find(z => z.id === id); if (z) { z.description = value || undefined; saveTopology(); } }
     function deleteZone(id) {
       if (!confirm('Delete this zone?')) return;
       topology.drawnZones = (topology.drawnZones || []).filter(z => z.id !== id);
@@ -1814,7 +1851,8 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       document.getElementById('properties-panel').innerHTML = '<h3>Properties</h3><p style="color: #666;">Select an item to edit.</p>';
       updateUI();
       render();
-      setStatus('Zone deleted', 'success');
+      setStatus('Zone deleted - saving...', 'success');
+      saveTopology().then(() => setStatus('Zone deleted', 'success'));
     }
 
     function useBlankCanvas() {