feat(console): asset onboarding/retire, health, coverage + ETA layers; Summit.OS WS/HTTP integration - API: add POST /api/v1/nodes/register, DELETE /api/v1/nodes/{id}, GET /api/v1/coverage; normalize paths to /api/v1/* - State/WS: asset store w/ ONLINE→STALE→OFFLINE via heartbeats; singleton timer w/ cleanup; retire marks shared state; coverage refresh on coverage_updated - Map: coverage layer (client-side union via @turf/turf) + hover tooltip (id, DEM, updated_at); ETA isochrones for drones/UGVs w/ separate toggles; auto-zoom event; remove mock telemetry trails - UI: Add Tower inline form (optimistic zoom + coverage refresh); Retire action; toast notifications replace alert(); settings panel (DEM version, tower FOV presets, bitrate cap, geofence, mission risk gate) - Chore: add @turf/turf dependency; remove unused wsUrl Env: - NEXT_PUBLIC_API_URL, NEXT_PUBLIC_WS_URL, NEXT_PUBLIC_MQTT_WS_URL - Optional: NEXT_PUBLIC_DRONE_SPEED_MS, NEXT_PUBLIC_UGV_SPEED_MS, NEXT_PUBLIC_STALE_MIN, NEXT_PUBLIC_OFFLINE_MIN Refs: WildFire Ops implementation prompt

Author: kpres12

apps/console/package.json

@@ -30,7 +30,8 @@
     "lucide-react": "^0.303.0",
     "paho-mqtt": "^1.1.0",
     "recharts": "^2.8.0",
-    "date-fns": "^2.30.0"
+    "date-fns": "^2.30.0",
+    "@turf/turf": "^6.5.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",

apps/console/src/app/page.tsx

@@ -22,14 +22,17 @@ import {
   Menu,
   X,
   Layers,
-  Camera
+  Camera,
+  Settings
 } from 'lucide-react'
 import { AlertsPanel } from '../components/panels/AlertsPanel'
 import { DevicesPanel } from '../components/panels/DevicesPanel'
 import { MissionsPanel } from '../components/panels/MissionsPanel'
 import { DroneControlPanel } from '../components/controls/DroneControlPanel'
 import { KOFAMissionPanel } from '../components/controls/KOFAMissionPanel'
 import { VideoFeedPanel } from '../components/panels/VideoFeedPanel'
+import { SettingsPanel } from '../components/panels/SettingsPanel'
+import { ToastProvider } from '../components/ui/Toast'
 import { useSummitConnection } from '../hooks/useSummit'
 
 const queryClient = new QueryClient()
@@ -193,6 +196,7 @@ function HomePageContent() {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <ToastProvider>
       <div className="min-h-screen bg-dark-950 text-dark-100">
         {/* Tactical Header */}
         <div className="tactical-header border-b border-dark-700 bg-gradient-to-r from-dark-800 to-dark-900">
@@ -364,6 +368,15 @@ function HomePageContent() {
                   <Radio className="w-5 h-5 text-tactical-400" />
                   <span className="text-sm font-mono text-tactical-300">MISSIONS</span>
                 </button>
+                <button
+                  onClick={() => setActivePanel('settings')}
+                  className={`w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all ${
+                    activePanel === 'settings' ? 'bg-tactical-500/20 border border-tactical-500/30 shadow-glow' : 'hover:bg-dark-800'
+                  }`}
+                >
+                  <Settings className="w-5 h-5 text-tactical-400" />
+                  <span className="text-sm font-mono text-tactical-300">SETTINGS</span>
+                </button>
                 <button
                   onClick={() => setActivePanel('control')}
                   className={`w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all ${
@@ -641,6 +654,10 @@ function HomePageContent() {
 
                   {activePanel === 'devices' && <DevicesPanel />}
 
+                  {activePanel === 'settings' && (
+                    <SettingsPanel />
+                  )}
+                  
                   {activePanel === 'risk' && (
                     <div className="h-full flex flex-col">
                       <div className="px-4 py-3 border-b border-dark-700">
@@ -1102,6 +1119,7 @@ function HomePageContent() {
         </div>
 
       </div>
+      </ToastProvider>
     </QueryClientProvider>
   )
 }

apps/console/src/components/map/MapControls.tsx

@@ -1,15 +1,18 @@
 'use client'
 
-import React from 'react'
+import React, { useState } from 'react'
 import { NavigationControl, ScaleControl } from 'react-map-gl/maplibre'
-import { ZoomIn, ZoomOut, RotateCcw, Layers } from 'lucide-react'
+import { RotateCcw, Layers } from 'lucide-react'
 
 export interface MapControlsProps {
   onLayerToggle?: (layer: string, visible: boolean) => void
   onResetView?: () => void
 }
 
 export function MapControls({ onLayerToggle, onResetView }: MapControlsProps) {
+  const [coverage, setCoverage] = useState(true)
+  const [etaDrones, setEtaDrones] = useState(true)
+  const [etaUgvs, setEtaUgvs] = useState(true)
   return (
     <div className="absolute top-4 right-4 flex flex-col gap-2">
       <NavigationControl />
@@ -25,13 +28,23 @@ export function MapControls({ onLayerToggle, onResetView }: MapControlsProps) {
         </button>
       </div>
 
-      <div className="bg-white rounded-lg shadow-lg p-2">
-        <button
-          className="p-2 hover:bg-gray-100 rounded transition-colors"
-          title="Layer Controls"
-        >
+      <div className="bg-white rounded-lg shadow-lg p-3 space-y-2 min-w-[200px]">
+        <div className="flex items-center gap-2 text-sm">
           <Layers className="w-4 h-4" />
-        </button>
+          <span className="font-semibold">Layers</span>
+        </div>
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={coverage} onChange={(e) => { setCoverage(e.target.checked); onLayerToggle?.('coverage', e.target.checked) }} />
+          <span>Tower coverage</span>
+        </label>
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={etaDrones} onChange={(e) => { setEtaDrones(e.target.checked); onLayerToggle?.('eta-drones', e.target.checked) }} />
+          <span>Drone ETA (5/10/15)</span>
+        </label>
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={etaUgvs} onChange={(e) => { setEtaUgvs(e.target.checked); onLayerToggle?.('eta-ugvs', e.target.checked) }} />
+          <span>UGV ETA (5/10/15)</span>
+        </label>
       </div>
     </div>
   )