diff --git a/.dockerignore b/.dockerignore
index f26b729..2e4edce 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -35,7 +35,7 @@ data/
 .DS_Store
 Thumbs.db
 .claude
-sfm.code-workspace
+terra-view.code-workspace
 
 # Tests (optional)
 tests/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4bf82e8..3976fd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Changelog
 
-All notable changes to Seismo Fleet Manager will be documented in this file.
+All notable changes to Terra-View will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
@@ -54,7 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.4.1] - 2026-01-05
 ### Added
-- **SLM Integration**: Sound Level Meters are now manageable in SFM
+- **SLM Integration**: Sound Level Meters are now manageable in Terra-View
 
 ### Fixed
 - Fixed an issue where unit status was loading from a saved cache and not based on when it was actually heard from last. Unit status is now accurate.
diff --git a/README.md b/README.md
index e3d447b..90fdec4 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-# Seismo Fleet Manager v0.4.2
-Backend API and HTMX-powered web interface for managing a mixed fleet of seismographs and field modems. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard.
+# Terra-View v0.4.2
+Backend API and HTMX-powered web interface for Terra-View - a unified fleet management system. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard. Terra-View supports seismographs (SFM module), sound level meters, field modems, and other monitoring devices.
 
 ## Features
 
diff --git a/backend/main.py b/backend/main.py
index 6442ab3..6204e6e 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -31,8 +31,8 @@ ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 # Initialize FastAPI app
 VERSION = "0.4.2"
 app = FastAPI(
-    title="Seismo Fleet Manager",
-    description="Backend API for managing seismograph fleet status",
+    title="Terra-View",
+    description="Backend API for Terra-View fleet management system",
     version=VERSION
 )
 
@@ -516,7 +516,7 @@ async def devices_all_partial(request: Request):
 def health_check():
     """Health check endpoint"""
     return {
-        "message": f"Seismo Fleet Manager v{VERSION}",
+        "message": f"Terra-View v{VERSION}",
         "status": "running",
         "version": VERSION
     }
@@ -524,4 +524,6 @@ def health_check():
 
 if __name__ == "__main__":
     import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=8001)
+    import os
+    port = int(os.getenv("PORT", 8001))
+    uvicorn.run(app, host="0.0.0.0", port=port)
diff --git a/backend/routers/slm_dashboard.py b/backend/routers/slm_dashboard.py
index 3d9c0df..bcfe057 100644
--- a/backend/routers/slm_dashboard.py
+++ b/backend/routers/slm_dashboard.py
@@ -6,7 +6,7 @@ Provides API endpoints for the Sound Level Meters dashboard page.
 
 from fastapi import APIRouter, Request, Depends, Query
 from fastapi.templating import Jinja2Templates
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, JSONResponse
 from sqlalchemy.orm import Session
 from sqlalchemy import func
 from datetime import datetime, timedelta
@@ -60,14 +60,20 @@ async def get_slm_stats(request: Request, db: Session = Depends(get_db)):
 async def get_slm_units(
     request: Request,
     db: Session = Depends(get_db),
-    search: str = Query(None)
+    search: str = Query(None),
+    project: str = Query(None)
 ):
     """
     Get list of SLM units for the sidebar.
     Returns HTML partial with unit cards.
+    Supports filtering by search term and project.
     """
     query = db.query(RosterUnit).filter_by(device_type="sound_level_meter")
 
+    # Filter by project if provided
+    if project:
+        query = query.filter(RosterUnit.project_id == project)
+
     # Filter by search term if provided
     if search:
         search_term = f"%{search}%"
@@ -326,3 +332,55 @@ async def test_modem_connection(modem_id: str, db: Session = Depends(get_db)):
             "modem_id": modem_id,
             "detail": str(e)
         }
+
+
+@router.get("/diagnostics/{unit_id}", response_class=HTMLResponse)
+async def get_diagnostics(request: Request, unit_id: str, db: Session = Depends(get_db)):
+    """
+    Get compact diagnostics card for a specific SLM unit.
+    Returns HTML partial with key metrics only.
+    """
+    unit = db.query(RosterUnit).filter_by(id=unit_id, device_type="sound_level_meter").first()
+
+    if not unit:
+        return HTMLResponse(
+            content='<div class="p-6 text-center text-red-600">Unit not found</div>',
+            status_code=404
+        )
+
+    # Get modem info
+    modem = None
+    modem_ip = None
+    if unit.deployed_with_modem_id:
+        modem = db.query(RosterUnit).filter_by(id=unit.deployed_with_modem_id, device_type="modem").first()
+        if modem:
+            # Try modem_rx_host first (if it exists), then fall back to ip_address
+            modem_ip = getattr(modem, 'modem_rx_host', None) or modem.ip_address
+    elif unit.slm_host:
+        modem_ip = unit.slm_host
+
+    return templates.TemplateResponse("partials/slm_diagnostics_card.html", {
+        "request": request,
+        "unit": unit,
+        "modem": modem,
+        "modem_ip": modem_ip
+    })
+
+
+@router.get("/projects")
+async def get_projects(db: Session = Depends(get_db)):
+    """
+    Get list of unique projects from deployed SLMs.
+    Returns JSON array of project names.
+    """
+    projects = db.query(RosterUnit.project_id).filter(
+        RosterUnit.device_type == "sound_level_meter",
+        RosterUnit.deployed == True,
+        RosterUnit.retired == False,
+        RosterUnit.project_id.isnot(None)
+    ).distinct().order_by(RosterUnit.project_id).all()
+
+    # Extract project names from query result tuples
+    project_list = [p[0] for p in projects if p[0]]
+
+    return JSONResponse(content={"projects": project_list})
diff --git a/backend/routers/slmm.py b/backend/routers/slmm.py
index 1c73f5e..1385beb 100644
--- a/backend/routers/slmm.py
+++ b/backend/routers/slmm.py
@@ -1,7 +1,7 @@
 """
 SLMM (Sound Level Meter Manager) Proxy Router
 
-Proxies requests from SFM to the standalone SLMM backend service.
+Proxies requests from Terra-View to the standalone SLMM backend service.
 SLMM runs on port 8100 and handles NL43/NL53 sound level meter communication.
 """
 
@@ -72,7 +72,7 @@ async def proxy_websocket_stream(websocket: WebSocket, unit_id: str):
     Proxy WebSocket connections to SLMM's /stream endpoint.
 
     This allows real-time streaming of measurement data from NL43 devices
-    through the SFM unified interface.
+    through the Terra-View unified interface.
     """
     await websocket.accept()
     logger.info(f"WebSocket connection accepted for SLMM unit {unit_id}")
@@ -237,7 +237,7 @@ async def proxy_to_slmm(path: str, request: Request):
     """
     Proxy all requests to the SLMM backend service.
 
-    This allows SFM to act as a unified frontend for all device types,
+    This allows Terra-View to act as a unified frontend for all device types,
     while SLMM remains a standalone backend service.
     """
     # Build target URL
diff --git a/backend/static/offline-db.js b/backend/static/offline-db.js
index 61281f9..ceb1847 100644
--- a/backend/static/offline-db.js
+++ b/backend/static/offline-db.js
@@ -1,9 +1,9 @@
-/* IndexedDB wrapper for offline data storage in SFM */
+/* IndexedDB wrapper for offline data storage in Terra-View */
 /* Handles unit data, status snapshots, and pending edit queue */
 
 class OfflineDB {
   constructor() {
-    this.dbName = 'sfm-offline-db';
+    this.dbName = 'terra-view-offline-db';
     this.version = 1;
     this.db = null;
   }
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 2c24788..b69476a 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -1,10 +1,10 @@
-/* Service Worker for Seismo Fleet Manager PWA */
+/* Service Worker for Terra-View PWA */
 /* Network-first strategy with cache fallback for real-time data */
 
 const CACHE_VERSION = 'v1';
-const STATIC_CACHE = `sfm-static-${CACHE_VERSION}`;
-const DYNAMIC_CACHE = `sfm-dynamic-${CACHE_VERSION}`;
-const DATA_CACHE = `sfm-data-${CACHE_VERSION}`;
+const STATIC_CACHE = `terra-view-static-${CACHE_VERSION}`;
+const DYNAMIC_CACHE = `terra-view-dynamic-${CACHE_VERSION}`;
+const DATA_CACHE = `terra-view-data-${CACHE_VERSION}`;
 
 // Files to precache (critical app shell)
 const STATIC_FILES = [
@@ -137,7 +137,7 @@ async function networkFirstStrategy(request, cacheName) {
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Offline - SFM</title>
+          <title>Offline - Terra-View</title>
           <style>
             body {
               font-family: system-ui, -apple-system, sans-serif;
@@ -170,7 +170,7 @@ async function networkFirstStrategy(request, cacheName) {
         <body>
           <div class="container">
             <h1>📡 You're Offline</h1>
-            <p>SFM requires an internet connection for this page.</p>
+            <p>Terra-View requires an internet connection for this page.</p>
             <p>Please check your connection and try again.</p>
             <button onclick="location.reload()">Retry</button>
           </div>
@@ -285,7 +285,7 @@ async function syncPendingEdits() {
 // IndexedDB helpers (simplified versions - full implementations in offline-db.js)
 function openDatabase() {
   return new Promise((resolve, reject) => {
-    const request = indexedDB.open('sfm-offline-db', 1);
+    const request = indexedDB.open('terra-view-offline-db', 1);
 
     request.onerror = () => reject(request.error);
     request.onsuccess = () => resolve(request.result);
diff --git a/docker-compose.yml b/docker-compose.yml
index ddb9e1d..1c94b56 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,14 +4,14 @@ services:
   terra-view-prod:
     build: .
     container_name: terra-view
-    ports:
-      - "8001:8001"
+    network_mode: host
     volumes:
       - ./data:/app/data
     environment:
       - PYTHONUNBUFFERED=1
       - ENVIRONMENT=production
-      - SLMM_BASE_URL=http://slmm:8100
+      - PORT=8001
+      - SLMM_BASE_URL=http://localhost:8100
     restart: unless-stopped
     depends_on:
       - slmm
@@ -26,19 +26,21 @@ services:
   terra-view-dev:
     build: .
     container_name: terra-view-dev
-    ports:
-      - "1001:8001"
+    network_mode: host
     volumes:
       - ./data-dev:/app/data
     environment:
       - PYTHONUNBUFFERED=1
       - ENVIRONMENT=development
-      - SLMM_BASE_URL=http://slmm:8100
+      - PORT=1001
+      - SLMM_BASE_URL=http://localhost:8100
     restart: unless-stopped
     depends_on:
       - slmm
+    profiles:
+      - dev
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8001/health"]
+      test: ["CMD", "curl", "-f", "http://localhost:1001/health"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -50,8 +52,7 @@ services:
       context: ../../slmm
       dockerfile: Dockerfile
     container_name: slmm
-    ports:
-      - "8100:8100"
+    network_mode: host
     volumes:
       - ../../slmm/data:/app/data
     environment:
diff --git a/templates/partials/slm_diagnostics_card.html b/templates/partials/slm_diagnostics_card.html
new file mode 100644
index 0000000..b5a77a8
--- /dev/null
+++ b/templates/partials/slm_diagnostics_card.html
@@ -0,0 +1,206 @@
+<!-- Compact Diagnostics Card for {{ unit.id }} -->
+<div class="h-full flex flex-col p-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+        <div>
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ unit.id }}</h2>
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                {% if unit.slm_model %}{{ unit.slm_model }}{% endif %}
+                {% if unit.slm_serial_number %} • S/N: {{ unit.slm_serial_number }}{% endif %}
+            </p>
+        </div>
+
+        <!-- Status Badge -->
+        <span id="diag-status-badge" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">
+            Loading...
+        </span>
+    </div>
+
+    <!-- Connection Status -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 mb-4">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <svg class="w-5 h-5 text-gray-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M5.05 3.636a1 1 0 010 1.414 7 7 0 000 9.9 1 1 0 11-1.414 1.414 9 9 0 010-12.728 1 1 0 011.414 0zm9.9 0a1 1 0 011.414 0 9 9 0 010 12.728 1 1 0 11-1.414-1.414 7 7 0 000-9.9 1 1 0 010-1.414zM7.879 6.464a1 1 0 010 1.414 3 3 0 000 4.243 1 1 0 11-1.415 1.414 5 5 0 010-7.07 1 1 0 011.415 0zm4.242 0a1 1 0 011.415 0 5 5 0 010 7.072 1 1 0 01-1.415-1.415 3 3 0 000-4.242 1 1 0 010-1.415zM10 9a1 1 0 011 1v.01a1 1 0 11-2 0V10a1 1 0 011-1z" clip-rule="evenodd"/>
+                </svg>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Connection</span>
+            </div>
+            <div>
+                {% if modem %}
+                    <span class="text-sm text-gray-600 dark:text-gray-400">via {{ modem.id }}</span>
+                {% elif modem_ip %}
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Direct: {{ modem_ip }}</span>
+                {% else %}
+                    <span class="text-sm text-red-600 dark:text-red-400">Not configured</span>
+                {% endif %}
+                <span id="connection-status" class="ml-2 w-2 h-2 bg-gray-400 rounded-full inline-block"></span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Current Sound Levels -->
+    <div class="grid grid-cols-2 gap-3 mb-4">
+        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lp (Instant)</p>
+            <p id="diag-lp" class="text-2xl font-bold text-blue-600 dark:text-blue-400">--</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Leq (Average)</p>
+            <p id="diag-leq" class="text-2xl font-bold text-green-600 dark:text-green-400">--</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lmax (Max)</p>
+            <p id="diag-lmax" class="text-2xl font-bold text-red-600 dark:text-red-400">--</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lmin (Min)</p>
+            <p id="diag-lmin" class="text-2xl font-bold text-purple-600 dark:text-purple-400">--</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+    </div>
+
+    <!-- Battery and Power -->
+    <div class="grid grid-cols-2 gap-3 mb-4">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-xs text-gray-600 dark:text-gray-400">Battery</span>
+                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 2h8v12H6V4zm7 2a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1z"/>
+                </svg>
+            </div>
+            <div id="diag-battery-level" class="text-xl font-bold text-gray-900 dark:text-white">--</div>
+            <div class="mt-2 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                <div id="diag-battery-bar" class="bg-gray-400 h-2 rounded-full transition-all" style="width: 0%"></div>
+            </div>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-xs text-gray-600 dark:text-gray-400">Power</span>
+                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
+                </svg>
+            </div>
+            <div id="diag-power-source" class="text-lg font-semibold text-gray-900 dark:text-white">--</div>
+        </div>
+    </div>
+
+    <!-- Last Check-in -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 mb-6">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <svg class="w-5 h-5 text-gray-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+                </svg>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Last Check-in</span>
+            </div>
+            <div>
+                {% if unit.slm_last_check %}
+                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ unit.slm_last_check.strftime('%Y-%m-%d %H:%M:%S') }}</span>
+                {% else %}
+                    <span class="text-sm text-gray-500 dark:text-gray-500">Never</span>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Open Command Center Button -->
+    <div class="mt-auto">
+        <button onclick="openCommandCenter('{{ unit.id }}')"
+                class="w-full px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium flex items-center justify-center transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+            </svg>
+            Open Command Center
+        </button>
+    </div>
+</div>
+
+<script>
+(function() {
+    const diagUnitId = '{{ unit.id }}';
+
+    // Clear any existing connections before starting new ones
+    window.SLMConnectionManager.setCurrentUnit(diagUnitId);
+
+    function updateDiagnosticsData() {
+        fetch(`/api/slmm/${diagUnitId}/live`)
+            .then(response => response.json())
+            .then(result => {
+                if (result.status === 'ok' && result.data) {
+                    const data = result.data;
+
+                    // Update status badge
+                    const statusBadge = document.getElementById('diag-status-badge');
+                    if (statusBadge) {
+                        const isMeasuring = data.measurement_state === 'Start';
+                        if (isMeasuring) {
+                            statusBadge.className = 'px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 rounded-lg font-medium flex items-center';
+                            statusBadge.innerHTML = '<span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>Measuring';
+                        } else {
+                            statusBadge.className = 'px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium';
+                            statusBadge.textContent = 'Stopped';
+                        }
+                    }
+
+                    // Update sound levels
+                    ['lp', 'leq', 'lmax', 'lmin'].forEach(metric => {
+                        const el = document.getElementById(`diag-${metric}`);
+                        if (el) el.textContent = data[metric] || '--';
+                    });
+
+                    // Update battery
+                    const batteryEl = document.getElementById('diag-battery-level');
+                    const batteryBar = document.getElementById('diag-battery-bar');
+                    if (batteryEl && data.battery_level) {
+                        const level = parseInt(data.battery_level);
+                        batteryEl.textContent = `${level}%`;
+
+                        if (batteryBar) {
+                            batteryBar.style.width = `${level}%`;
+                            if (level > 50) {
+                                batteryBar.className = 'bg-green-500 h-2 rounded-full transition-all';
+                            } else if (level > 20) {
+                                batteryBar.className = 'bg-yellow-500 h-2 rounded-full transition-all';
+                            } else {
+                                batteryBar.className = 'bg-red-500 h-2 rounded-full transition-all';
+                            }
+                        }
+                    }
+
+                    // Update power source
+                    const powerEl = document.getElementById('diag-power-source');
+                    if (powerEl) powerEl.textContent = data.power_source || '--';
+
+                    // Update connection status
+                    const connStatus = document.getElementById('connection-status');
+                    if (connStatus) {
+                        connStatus.className = 'ml-2 w-2 h-2 bg-green-500 rounded-full inline-block';
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Failed to refresh diagnostics:', error);
+                const connStatus = document.getElementById('connection-status');
+                if (connStatus) {
+                    connStatus.className = 'ml-2 w-2 h-2 bg-red-500 rounded-full inline-block';
+                }
+            });
+    }
+
+    // Initial update
+    updateDiagnosticsData();
+
+    // Set up refresh interval and register it
+    const interval = setInterval(updateDiagnosticsData, 10000);
+    window.SLMConnectionManager.registerInterval(interval);
+
+    console.log(`Diagnostics card for ${diagUnitId} initialized`);
+})();
+</script>
diff --git a/templates/partials/slm_live_view.html b/templates/partials/slm_live_view.html
index c5ee656..b1b11f8 100644
--- a/templates/partials/slm_live_view.html
+++ b/templates/partials/slm_live_view.html
@@ -23,18 +23,31 @@
             {% endif %}
         </div>
 
-        <!-- Measurement Status Badge -->
-        <div>
-            {% if is_measuring %}
-                <span class="px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 rounded-lg font-medium flex items-center">
-                    <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
-                    Measuring
-                </span>
-            {% else %}
-                <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">
-                    Stopped
-                </span>
-            {% endif %}
+        <!-- Measurement Status Badge & Timer -->
+        <div class="flex flex-col items-end gap-2">
+            <div class="flex items-center gap-3">
+                <!-- Timer Display -->
+                <div id="measurement-timer" class="px-4 py-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                    <div class="flex items-center gap-2">
+                        <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+                        </svg>
+                        <span id="timer-display" class="text-xl font-mono font-bold text-blue-600 dark:text-blue-400">00:00:00</span>
+                    </div>
+                </div>
+
+                <!-- Status Badge -->
+                {% if is_measuring %}
+                    <span class="px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 rounded-lg font-medium flex items-center">
+                        <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
+                        Measuring
+                    </span>
+                {% else %}
+                    <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">
+                        Stopped
+                    </span>
+                {% endif %}
+            </div>
         </div>
     </div>
 
@@ -209,6 +222,171 @@
             </div>
         </div>
     </div>
+
+    <!-- Device Settings -->
+    <div class="mt-6">
+        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Device Settings</h3>
+
+        <!-- Clock Sync -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                    <svg class="w-5 h-5 text-gray-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+                    </svg>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Device Clock</span>
+                </div>
+                <button onclick="syncClockToNow()"
+                        class="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded flex items-center">
+                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                    Sync to Current Time
+                </button>
+            </div>
+
+            <div class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                Set the device clock manually or sync to your computer's current time. Device must be stopped to change clock.
+            </div>
+
+            <div class="flex gap-2">
+                <input type="datetime-local"
+                       id="clock-input"
+                       class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <button onclick="setDeviceClock()"
+                        class="px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded">
+                    Set Clock
+                </button>
+            </div>
+
+            <div id="clock-status" class="mt-2 text-xs hidden"></div>
+        </div>
+
+        <!-- Store Name (Index Number) -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 mt-3">
+            <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                    <svg class="w-5 h-5 text-gray-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
+                    </svg>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Store Name (Index)</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span id="store-name-display" class="text-sm font-mono text-gray-600 dark:text-gray-400">----</span>
+                    <span id="overwrite-indicator" class="text-xs px-2 py-1 rounded hidden"></span>
+                </div>
+            </div>
+
+            <div class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                Set the file index number (0000-9999) for the next measurement storage. <strong>Requirements:</strong> Device must be <strong>stopped</strong> and <strong>FTP must be disabled</strong> to change this setting.
+            </div>
+
+            <div id="overwrite-warning" class="hidden mb-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded">
+                <div class="flex items-start">
+                    <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                    </svg>
+                    <div class="flex-1">
+                        <p class="text-xs font-semibold text-yellow-800 dark:text-yellow-200">Data Already Exists</p>
+                        <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">Starting a measurement will overwrite existing data at this index. Consider using auto-increment to find an empty slot.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex gap-2">
+                <input type="number"
+                       id="store-name-input"
+                       min="0"
+                       max="9999"
+                       placeholder="0000"
+                       class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <button onclick="setStoreName()"
+                        class="px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded">
+                    Set Index
+                </button>
+                <button onclick="autoIncrementStoreName()"
+                        class="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded"
+                        title="Find next available index">
+                    Auto +
+                </button>
+            </div>
+
+            <div id="store-name-status" class="mt-2 text-xs hidden"></div>
+        </div>
+    </div>
+
+    <!-- Measurement Data Files -->
+    <div class="mt-6">
+        <div class="flex items-center justify-between mb-3">
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Measurement Data Files</h3>
+            <div class="flex gap-2">
+                <button id="enable-ftp-btn" onclick="enableFTP()" class="px-3 py-1 text-xs bg-green-600 hover:bg-green-700 text-white rounded hidden">
+                    Enable FTP
+                </button>
+                <button id="disable-ftp-btn" onclick="disableFTP()" class="px-3 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded hidden">
+                    Disable FTP
+                </button>
+                <button onclick="refreshFileList()"
+                        class="px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded flex items-center">
+                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                    Refresh
+                </button>
+            </div>
+        </div>
+
+        <!-- FTP Status Indicator -->
+        <div id="ftp-status" class="mb-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg hidden">
+            <div class="flex items-center text-sm text-yellow-800 dark:text-yellow-400">
+                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
+                </svg>
+                <span id="ftp-status-text">FTP server is disabled. Click "Enable FTP" to browse files.</span>
+            </div>
+            <button onclick="enableFTP()"
+                    class="mt-2 px-3 py-1 text-xs bg-yellow-600 hover:bg-yellow-700 text-white rounded">
+                Enable FTP
+            </button>
+        </div>
+
+        <!-- File Browser -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+            <!-- Current Path -->
+            <div class="px-4 py-2 bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700 flex items-center">
+                <svg class="w-4 h-4 text-gray-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
+                </svg>
+                <span id="current-path" class="text-sm text-gray-700 dark:text-gray-300 font-mono">/</span>
+            </div>
+
+            <!-- File List -->
+            <div id="file-list" class="divide-y divide-gray-200 dark:divide-gray-700 max-h-96 overflow-y-auto">
+                <div class="p-8 text-center text-gray-500 dark:text-gray-400">
+                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                    </svg>
+                    <p>Click "Refresh" to load files from the device</p>
+                </div>
+            </div>
+
+            <!-- Loading State -->
+            <div id="file-list-loading" class="p-8 text-center hidden">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-3"></div>
+                <p class="text-sm text-gray-500 dark:text-gray-400">Loading files...</p>
+            </div>
+
+            <!-- Error State -->
+            <div id="file-list-error" class="p-4 bg-red-50 dark:bg-red-900/20 border-t border-red-200 dark:border-red-800 hidden">
+                <div class="flex items-center text-sm text-red-800 dark:text-red-400">
+                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                    </svg>
+                    <span id="file-list-error-text">Failed to load files</span>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -236,9 +414,14 @@ function initializeChart() {
     if (window.liveChart && typeof window.liveChart.destroy === 'function') {
         console.log('Destroying existing chart');
         window.liveChart.destroy();
+        window.liveChart = null;
     }
 
     const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        console.error('Failed to get 2D context from canvas');
+        return;
+    }
     console.log('Creating new chart...');
 
     // Dark mode detection
@@ -246,7 +429,8 @@ function initializeChart() {
     const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
     const textColor = isDarkMode ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)';
 
-    window.liveChart = new Chart(ctx, {
+    try {
+        window.liveChart = new Chart(ctx, {
     type: 'line',
     data: {
         labels: [],
@@ -317,12 +501,33 @@ function initializeChart() {
     }
     });
 
-    console.log('Chart created successfully:', window.liveChart);
+        console.log('Chart created successfully:', window.liveChart);
+    } catch (error) {
+        console.error('Failed to create chart:', error);
+        // Display error message in the chart container
+        const container = canvas.parentElement;
+        if (container) {
+            container.innerHTML = `
+                <div class="flex items-center justify-center h-full text-sm text-red-600 dark:text-red-400">
+                    <div class="text-center">
+                        <svg class="w-8 h-8 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                        </svg>
+                        <p>Chart failed to load</p>
+                        <p class="text-xs mt-1">Try refreshing the page</p>
+                    </div>
+                </div>
+            `;
+        }
+    }
 }
 
 // Initialize chart when DOM is ready
 console.log('Executing initializeChart...');
-initializeChart();
+// Use a small delay to ensure DOM is fully ready
+setTimeout(() => {
+    initializeChart();
+}, 50);
 
 // WebSocket management (use global scope to avoid redeclaration)
 if (typeof window.currentWebSocket === 'undefined') {
@@ -455,13 +660,19 @@ async function controlUnit(unitId, action) {
         const result = await response.json();
 
         if (result.status === 'ok') {
-            // Reload the live view to update status
+            // Give device more time to change state before checking
+            // Start/Stop commands need time to propagate
+            setTimeout(() => {
+                checkMeasurementState();
+            }, 1500);
+
+            // Reload the live view to update all status displays
             setTimeout(() => {
                 htmx.ajax('GET', `/api/slm-dashboard/live-view/${unitId}`, {
                     target: '#live-view-panel',
                     swap: 'innerHTML'
                 });
-            }, 500);
+            }, 2000);
         } else {
             alert(`Error: ${result.detail || 'Unknown error'}`);
         }
@@ -472,9 +683,16 @@ async function controlUnit(unitId, action) {
 
 
 // Auto-refresh status every 30 seconds
-let refreshInterval;
-const REFRESH_INTERVAL_MS = 30000; // 30 seconds
-const unit_id = '{{ unit.id }}';
+if (typeof window.refreshInterval === 'undefined') {
+    window.refreshInterval = null;
+}
+if (typeof window.REFRESH_INTERVAL_MS === 'undefined') {
+    window.REFRESH_INTERVAL_MS = 30000; // 30 seconds
+}
+if (typeof window.unit_id === 'undefined' || window.unit_id !== '{{ unit.id }}') {
+    // Keep HTMX reloads from reusing the old unit id
+    window.unit_id = '{{ unit.id }}';
+}
 
 function updateDeviceStatus() {
     fetch(`/api/slmm/${unit_id}/live`)
@@ -542,7 +760,7 @@ function startAutoRefresh() {
     updateDeviceStatus();
 
     // Set up interval
-    refreshInterval = setInterval(updateDeviceStatus, REFRESH_INTERVAL_MS);
+    refreshInterval = setInterval(updateDeviceStatus, window.REFRESH_INTERVAL_MS);
     console.log('Auto-refresh started (30s interval)');
 }
 
@@ -556,6 +774,205 @@ function stopAutoRefresh() {
 }
 
 // Start auto-refresh when page loads
+
+
+// Backend-Synced Measurement Timer
+// Uses measurement_start_time from backend (tracked via state transitions)
+// This works even for manually-started measurements!
+if (typeof window.timerInterval === 'undefined') {
+    window.timerInterval = null;
+    window.measurementStartTime = null;  // ISO string from backend
+}
+if (typeof window.timerSource === 'undefined') {
+    window.timerSource = null;
+}
+if (typeof window.lastFtpErrorTime === 'undefined') {
+    window.lastFtpErrorTime = null;
+}
+
+// Format elapsed time as HH:MM:SS
+function formatElapsedTime(milliseconds) {
+    const totalSeconds = Math.floor(milliseconds / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+}
+
+// Update timer display based on backend measurement_start_time
+function updateTimerDisplay() {
+    const timerElement = document.getElementById('timer-display');
+    if (!timerElement) {
+        console.error('Timer display element not found!');
+        return;
+    }
+
+    if (!window.measurementStartTime) {
+        timerElement.textContent = '00:00:00';
+        return;
+    }
+
+    // Calculate elapsed time from backend-provided start time (UTC)
+    // Ensure the timestamp is treated as UTC by adding 'Z' if not present
+    let timestamp = window.measurementStartTime;
+    if (!timestamp.endsWith('Z') && !timestamp.includes('+')) {
+        timestamp = timestamp + 'Z';
+    }
+    const startTime = new Date(timestamp);
+    const elapsed = Date.now() - startTime.getTime();
+    const formattedTime = formatElapsedTime(elapsed);
+    timerElement.textContent = formattedTime;
+}
+
+// Sync timer with backend data (with FTP fallback)
+async function syncTimerWithBackend(measurementState, measurementStartTime) {
+    // Device returns "Start" when measuring, "Stop" when stopped
+    const isMeasuring = measurementState === 'Start';
+    const now = Date.now();
+
+    if (isMeasuring && measurementStartTime) {
+        // Measurement is running - check both backend and FTP timestamps
+        // Use whichever is earlier (older = actual measurement start)
+
+        // First check FTP for potentially older timestamp
+        const shouldSkipFtp = window.lastFtpErrorTime && (now - window.lastFtpErrorTime < 10000);
+        if (shouldSkipFtp) {
+            window.measurementStartTime = measurementStartTime;
+            window.timerSource = 'backend';
+            console.log('Timer using backend state (skipping FTP due to recent error):', measurementStartTime);
+        } else {
+            try {
+                const response = await fetch(`/api/slmm/${unit_id}/ftp/latest-measurement-time`);
+                const result = await response.json();
+
+                if (result.status === 'ok' && result.latest_timestamp) {
+                    const backendTime = new Date(measurementStartTime + 'Z');
+                    const ftpTime = new Date(result.latest_timestamp + 'Z');
+
+                    // Use the earlier timestamp (represents actual measurement start)
+                    if (ftpTime < backendTime) {
+                        window.measurementStartTime = result.latest_timestamp;
+                        window.timerSource = 'ftp';
+                        console.log('Timer synced with FTP folder (earlier):', result.latest_folder, '@', result.latest_timestamp);
+                    } else {
+                        window.measurementStartTime = measurementStartTime;
+                        window.timerSource = 'backend';
+                        console.log('Timer synced with backend state (earlier):', measurementStartTime);
+                    }
+                    window.lastFtpErrorTime = null;
+                } else {
+                    // No FTP timestamp, use backend
+                    window.measurementStartTime = measurementStartTime;
+                    window.timerSource = 'backend';
+                    console.log('Timer synced with backend state:', measurementStartTime);
+                }
+            } catch (error) {
+                console.error('Failed to check FTP timestamp:', error);
+                window.lastFtpErrorTime = now;
+                // Fallback to backend on error
+                window.measurementStartTime = measurementStartTime;
+                window.timerSource = 'backend';
+                console.log('Timer synced with backend state (FTP check failed):', measurementStartTime);
+            }
+        }
+
+        // Start interval if not already running
+        if (!window.timerInterval) {
+            window.timerInterval = setInterval(updateTimerDisplay, 1000);
+            console.log('Timer display started');
+        }
+
+        // Update display immediately
+        updateTimerDisplay();
+    } else if (isMeasuring && !measurementStartTime) {
+        // Device is measuring but backend doesn't have start time yet
+        // Try FTP fallback to get measurement start from latest folder timestamp
+        if (!window.measurementStartTime || window.timerSource !== 'ftp') {
+            console.log('Device measuring but no backend start time - checking FTP fallback...');
+            const skipFtp = window.lastFtpErrorTime && (Date.now() - window.lastFtpErrorTime < 10000);
+            if (!skipFtp) {
+                try {
+                    const response = await fetch(`/api/slmm/${unit_id}/ftp/latest-measurement-time`);
+                    const result = await response.json();
+
+                    if (result.status === 'ok' && result.latest_timestamp) {
+                        window.measurementStartTime = result.latest_timestamp;
+                        window.timerSource = 'ftp';
+                        console.log('Timer synced with FTP folder:', result.latest_folder, '@', result.latest_timestamp);
+
+                        // Start timer interval if not already running
+                        if (!window.timerInterval) {
+                            window.timerInterval = setInterval(updateTimerDisplay, 1000);
+                            console.log('Timer display started (FTP source)');
+                        }
+
+                        updateTimerDisplay();
+                        window.lastFtpErrorTime = null;
+                    } else {
+                        console.log('No FTP timestamp available');
+                    }
+                } catch (error) {
+                    console.error('Failed to get FTP timestamp:', error);
+                    window.lastFtpErrorTime = Date.now();
+                }
+            } else {
+                console.log('Skipping FTP fallback due to recent error');
+            }
+        }
+    } else {
+        // Not measuring - stop timer
+        if (window.timerInterval) {
+            clearInterval(window.timerInterval);
+            window.timerInterval = null;
+            console.log('Timer display stopped');
+        }
+        window.measurementStartTime = null;
+        window.timerSource = null;
+        document.getElementById('timer-display').textContent = '00:00:00';
+    }
+}
+
+// Check measurement state and sync timer
+async function checkMeasurementState() {
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/live`);
+        const result = await response.json();
+
+        if (result.status === 'ok' && result.data) {
+            await syncTimerWithBackend(
+                result.data.measurement_state,
+                result.data.measurement_start_time
+            );
+        }
+    } catch (error) {
+        console.error('Failed to check measurement state:', error);
+    }
+}
+
+// Initialize timer immediately (this partial is loaded via HTMX, so DOMContentLoaded may have already fired)
+if (typeof window.timerInitialized === 'undefined') {
+    window.timerInitialized = true;
+
+    // Execute initialization immediately
+    (async function() {
+        console.log('Timer initialization: Starting immediately');
+
+        // Check measurement state immediately
+        await checkMeasurementState();
+
+        // Load store name (index number)
+        await loadStoreName();
+
+        // Check FTP status and update buttons
+        await checkFTPStatus();
+
+        // Check measurement state periodically (every 5 seconds)
+        setInterval(checkMeasurementState, 5000);
+
+        console.log('Timer initialization: Complete, polling every 5 seconds');
+    })();
+}
 document.addEventListener('DOMContentLoaded', startAutoRefresh);
 
 // Cleanup on page unload
@@ -564,4 +981,510 @@ window.addEventListener('beforeunload', function() {
         window.currentWebSocket.close();
     }
 });
+
+
+// File Browser Functions
+if (typeof window.currentPath === 'undefined') {
+    window.currentPath = '/';
+}
+
+// Format file size
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// Format date
+function formatDate(dateStr) {
+    try {
+        const date = new Date(dateStr);
+        return date.toLocaleString();
+    } catch (e) {
+        return dateStr;
+    }
+}
+
+// Enable FTP on device
+async function enableFTP() {
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/ftp/enable`, {
+            method: 'POST'
+        });
+        const result = await response.json();
+
+        if (result.status === 'ok') {
+            document.getElementById('ftp-status').classList.add('hidden');
+            updateFTPButtons(true);
+            refreshFileList();
+        } else {
+            alert('Failed to enable FTP: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Failed to enable FTP: ' + error.message);
+    }
+}
+
+async function disableFTP() {
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/ftp/disable`, {
+            method: 'POST'
+        });
+        const result = await response.json();
+
+        if (result.status === 'ok') {
+            updateFTPButtons(false);
+            alert('FTP disabled. TCP commands are now available.');
+        } else {
+            alert('Failed to disable FTP: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Failed to disable FTP: ' + error.message);
+    }
+}
+
+function updateFTPButtons(ftpEnabled) {
+    const enableBtn = document.getElementById('enable-ftp-btn');
+    const disableBtn = document.getElementById('disable-ftp-btn');
+
+    console.log('updateFTPButtons called with ftpEnabled:', ftpEnabled);
+    console.log('Enable button element:', enableBtn);
+    console.log('Disable button element:', disableBtn);
+
+    if (enableBtn && disableBtn) {
+        if (ftpEnabled) {
+            enableBtn.classList.add('hidden');
+            disableBtn.classList.remove('hidden');
+            console.log('FTP is enabled - showing Disable FTP button');
+        } else {
+            enableBtn.classList.remove('hidden');
+            disableBtn.classList.add('hidden');
+            console.log('FTP is disabled - showing Enable FTP button');
+        }
+    } else {
+        console.error('FTP button elements not found in DOM');
+    }
+}
+
+async function checkFTPStatus() {
+    console.log('checkFTPStatus: Checking FTP status for unit_id:', unit_id);
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/ftp/status`);
+        const result = await response.json();
+
+        console.log('checkFTPStatus: Response:', result);
+
+        if (result.status === 'ok') {
+            console.log('checkFTPStatus: FTP enabled status:', result.ftp_enabled);
+            updateFTPButtons(result.ftp_enabled);
+        } else {
+            console.error('checkFTPStatus: Unexpected response status:', result.status);
+        }
+    } catch (error) {
+        console.error('checkFTPStatus: Failed to check FTP status:', error);
+    }
+}
+
+// Clock Management Functions
+async function syncClockToNow() {
+    const now = new Date();
+    // Format as YYYY-MM-DDTHH:mm for datetime-local input
+    const localDateTime = new Date(now.getTime() - (now.getTimezoneOffset() * 60000)).toISOString().slice(0, 16);
+
+    // Update the input field
+    document.getElementById('clock-input').value = localDateTime;
+
+    // Auto-submit
+    await setDeviceClock();
+}
+
+async function setDeviceClock() {
+    const clockInput = document.getElementById('clock-input');
+    const statusDiv = document.getElementById('clock-status');
+
+    if (!clockInput.value) {
+        showClockStatus('Please select a date and time', 'error');
+        return;
+    }
+
+    // Convert datetime-local to NL43 format: YYYY/MM/DD,HH:MM:SS
+    const dateTime = new Date(clockInput.value);
+    const nl43Format = dateTime.getFullYear() + '/' +
+                      String(dateTime.getMonth() + 1).padStart(2, '0') + '/' +
+                      String(dateTime.getDate()).padStart(2, '0') + ',' +
+                      String(dateTime.getHours()).padStart(2, '0') + ':' +
+                      String(dateTime.getMinutes()).padStart(2, '0') + ':' +
+                      String(dateTime.getSeconds()).padStart(2, '0');
+
+    showClockStatus('Setting device clock...', 'info');
+
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/clock`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ datetime: nl43Format })
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result.status === 'ok') {
+            showClockStatus('✓ Clock set successfully to ' + dateTime.toLocaleString(), 'success');
+        } else {
+            showClockStatus('✗ Failed: ' + (result.detail || 'Unknown error'), 'error');
+        }
+    } catch (error) {
+        showClockStatus('✗ Failed: ' + error.message, 'error');
+    }
+}
+
+function showClockStatus(message, type) {
+    const statusDiv = document.getElementById('clock-status');
+    statusDiv.textContent = message;
+    statusDiv.classList.remove('hidden', 'text-green-600', 'text-red-600', 'text-blue-600');
+
+    if (type === 'success') {
+        statusDiv.classList.add('text-green-600', 'dark:text-green-400');
+    } else if (type === 'error') {
+        statusDiv.classList.add('text-red-600', 'dark:text-red-400');
+    } else {
+        statusDiv.classList.add('text-blue-600', 'dark:text-blue-400');
+    }
+}
+
+// Store Name (Index) Management Functions
+async function loadStoreName() {
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/index-number`);
+        const result = await response.json();
+
+        if (response.ok && result.status === 'ok') {
+            const indexNum = result.index_number;
+            document.getElementById('store-name-display').textContent = indexNum;
+            document.getElementById('store-name-input').value = parseInt(indexNum);
+
+            // Check overwrite status after loading
+            await checkOverwriteStatus();
+        } else {
+            console.error('Failed to load store name:', result);
+        }
+    } catch (error) {
+        console.error('Error loading store name:', error);
+    }
+}
+
+async function setStoreName() {
+    const input = document.getElementById('store-name-input');
+    const statusDiv = document.getElementById('store-name-status');
+
+    const index = parseInt(input.value);
+
+    if (isNaN(index) || index < 0 || index > 9999) {
+        showStoreNameStatus('Please enter a number between 0 and 9999', 'error');
+        return;
+    }
+
+    showStoreNameStatus('Setting store name...', 'info');
+
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/index-number`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ index: index })
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result.status === 'ok') {
+            showStoreNameStatus('✓ Store name set successfully to ' + index.toString().padStart(4, '0'), 'success');
+            // Update display
+            document.getElementById('store-name-display').textContent = index.toString().padStart(4, '0');
+            // Check overwrite status for new index
+            await checkOverwriteStatus();
+        } else {
+            showStoreNameStatus('✗ Failed: ' + (result.detail || 'Unknown error'), 'error');
+        }
+    } catch (error) {
+        showStoreNameStatus('✗ Failed: ' + error.message, 'error');
+    }
+}
+
+function showStoreNameStatus(message, type) {
+    const statusDiv = document.getElementById('store-name-status');
+    statusDiv.textContent = message;
+    statusDiv.classList.remove('hidden', 'text-green-600', 'text-red-600', 'text-blue-600');
+
+    if (type === 'success') {
+        statusDiv.classList.add('text-green-600', 'dark:text-green-400');
+    } else if (type === 'error') {
+        statusDiv.classList.add('text-red-600', 'dark:text-red-400');
+    } else {
+        statusDiv.classList.add('text-blue-600', 'dark:text-blue-400');
+    }
+}
+
+// Check Overwrite Status
+async function checkOverwriteStatus() {
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/overwrite-check`);
+        const result = await response.json();
+
+        const warningDiv = document.getElementById('overwrite-warning');
+        const indicator = document.getElementById('overwrite-indicator');
+
+        if (response.ok && result.status === 'ok') {
+            if (result.will_overwrite) {
+                // Show warning
+                warningDiv.classList.remove('hidden');
+                indicator.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'dark:bg-green-900', 'dark:text-green-200');
+                indicator.classList.add('bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
+                indicator.textContent = 'Data Exists';
+            } else {
+                // Hide warning
+                warningDiv.classList.add('hidden');
+                indicator.classList.remove('hidden', 'bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
+                indicator.classList.add('bg-green-100', 'text-green-800', 'dark:bg-green-900', 'dark:text-green-200');
+                indicator.textContent = 'Safe';
+            }
+        } else {
+            // Hide on error
+            warningDiv.classList.add('hidden');
+            indicator.classList.add('hidden');
+        }
+    } catch (error) {
+        console.error('Error checking overwrite status:', error);
+    }
+}
+
+// Auto-increment to find next available index
+async function autoIncrementStoreName() {
+    showStoreNameStatus('Finding next available index...', 'info');
+
+    try {
+        const currentIndexResponse = await fetch(`/api/slmm/${unit_id}/index-number`);
+        const currentIndexResult = await currentIndexResponse.json();
+
+        if (!currentIndexResponse.ok || currentIndexResult.status !== 'ok') {
+            showStoreNameStatus('✗ Failed to get current index', 'error');
+            return;
+        }
+
+        let currentIndex = parseInt(currentIndexResult.index_number);
+        let foundEmpty = false;
+        let checkedCount = 0;
+        const maxChecks = 100; // Safety limit
+
+        // Start from next index
+        currentIndex++;
+
+        while (!foundEmpty && checkedCount < maxChecks && currentIndex <= 9999) {
+            // Set the index
+            const setResponse = await fetch(`/api/slmm/${unit_id}/index-number`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ index: currentIndex })
+            });
+
+            if (!setResponse.ok) {
+                currentIndex++;
+                checkedCount++;
+                continue;
+            }
+
+            // Check if data exists at this index
+            const checkResponse = await fetch(`/api/slmm/${unit_id}/overwrite-check`);
+            const checkResult = await checkResponse.json();
+
+            if (checkResponse.ok && checkResult.status === 'ok') {
+                if (!checkResult.will_overwrite) {
+                    // Found empty slot!
+                    foundEmpty = true;
+                    document.getElementById('store-name-display').textContent = currentIndex.toString().padStart(4, '0');
+                    document.getElementById('store-name-input').value = currentIndex;
+                    showStoreNameStatus(`✓ Found empty slot at index ${currentIndex.toString().padStart(4, '0')}`, 'success');
+                    await checkOverwriteStatus();
+                    break;
+                }
+            }
+
+            currentIndex++;
+            checkedCount++;
+        }
+
+        if (!foundEmpty) {
+            if (currentIndex > 9999) {
+                showStoreNameStatus('✗ No empty slots found (reached max 9999)', 'error');
+            } else {
+                showStoreNameStatus(`✗ No empty slot found in next ${maxChecks} indices`, 'error');
+            }
+        }
+    } catch (error) {
+        showStoreNameStatus('✗ Error: ' + error.message, 'error');
+    }
+}
+
+// Navigate to directory
+function navigateToDir(path) {
+    window.currentPath = path;
+    document.getElementById('current-path').textContent = path;
+    loadFiles(path);
+}
+
+// Go up one directory
+function navigateUp() {
+    const parts = window.currentPath.split('/').filter(p => p);
+    parts.pop();
+    const newPath = '/' + parts.join('/');
+    navigateToDir(newPath || '/');
+}
+
+// Download file
+async function downloadFile(path, filename) {
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/ftp/download`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ remote_path: path })
+        });
+
+        if (!response.ok) {
+            throw new Error('Download failed');
+        }
+
+        // Create blob and download
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+    } catch (error) {
+        alert('Failed to download file: ' + error.message);
+    }
+}
+
+// Load files from path
+async function loadFiles(path) {
+    const fileList = document.getElementById('file-list');
+    const loading = document.getElementById('file-list-loading');
+    const error = document.getElementById('file-list-error');
+    const ftpStatus = document.getElementById('ftp-status');
+
+    // Show loading state
+    fileList.classList.add('hidden');
+    loading.classList.remove('hidden');
+    error.classList.add('hidden');
+
+    try {
+        const response = await fetch(`/api/slmm/${unit_id}/ftp/files?path=${encodeURIComponent(path)}`);
+        const result = await response.json();
+
+        if (result.status === 'ok') {
+            ftpStatus.classList.add('hidden');
+            displayFiles(result.files || []);
+        } else {
+            throw new Error(result.detail || 'Failed to load files');
+        }
+    } catch (err) {
+        loading.classList.add('hidden');
+
+        // Check if it's an FTP disabled error
+        if (err.message.includes('FTP') || err.message.includes('502')) {
+            ftpStatus.classList.remove('hidden');
+            fileList.classList.remove('hidden');
+            fileList.innerHTML = '<div class="p-8 text-center text-gray-500 dark:text-gray-400">FTP is disabled on the device</div>';
+        } else {
+            error.classList.remove('hidden');
+            document.getElementById('file-list-error-text').textContent = err.message;
+            fileList.classList.remove('hidden');
+        }
+    }
+}
+
+// Display files in the list
+function displayFiles(files) {
+    const fileList = document.getElementById('file-list');
+    const loading = document.getElementById('file-list-loading');
+
+    loading.classList.add('hidden');
+    fileList.classList.remove('hidden');
+
+    if (files.length === 0) {
+        fileList.innerHTML = '<div class="p-8 text-center text-gray-500 dark:text-gray-400">No files found</div>';
+        return;
+    }
+
+    // Sort: directories first, then files
+    files.sort((a, b) => {
+        if (a.is_dir && !b.is_dir) return -1;
+        if (!a.is_dir && b.is_dir) return 1;
+        return a.name.localeCompare(b.name);
+    });
+
+    let html = '';
+
+    // Add "up" button if not at root
+    if (window.currentPath !== '/') {
+        html += `
+            <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center"
+                 onclick="navigateUp()">
+                <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+                </svg>
+                <span class="text-sm text-gray-700 dark:text-gray-300 font-medium">..</span>
+            </div>
+        `;
+    }
+
+    files.forEach(file => {
+        const icon = file.is_dir ?
+            '<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>' :
+            '<svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>';
+
+        const clickHandler = file.is_dir ?
+            `navigateToDir('${file.path}')` :
+            `downloadFile('${file.path}', '${file.name}')`;
+
+        html += `
+            <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center justify-between"
+                 onclick="${clickHandler}">
+                <div class="flex items-center flex-1 min-w-0">
+                    ${icon}
+                    <div class="ml-3 flex-1 min-w-0">
+                        <p class="text-sm text-gray-900 dark:text-white truncate">${file.name}</p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">
+                            ${file.is_dir ? 'Folder' : formatFileSize(file.size)}
+                            ${file.modified_timestamp ? ' • ' + formatDate(file.modified_timestamp) : ''}
+                        </p>
+                    </div>
+                </div>
+                ${!file.is_dir ? `
+                    <button onclick="event.stopPropagation(); downloadFile('${file.path}', '${file.name}')"
+                            class="ml-2 p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                        </svg>
+                    </button>
+                ` : ''}
+            </div>
+        `;
+    });
+
+    fileList.innerHTML = html;
+}
+
+// Refresh file list
+function refreshFileList() {
+    loadFiles(window.currentPath);
+}
 </script>
diff --git a/templates/sound_level_meters.html b/templates/sound_level_meters.html
index 0e48b7d..b00f27e 100644
--- a/templates/sound_level_meters.html
+++ b/templates/sound_level_meters.html
@@ -28,14 +28,28 @@
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Active Units</h2>
 
             <!-- Search/Filter -->
-            <div class="mb-4">
-                <input type="text"
+            <div class="mb-4 space-y-2">
+                <!-- Project Filter -->
+                <select id="project-filter"
+                        name="project"
+                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                        hx-get="/api/slm-dashboard/units"
+                        hx-trigger="change"
+                        hx-target="#slm-list"
+                        hx-include="#search-input, #project-filter">
+                    <option value="">All Projects</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+
+                <!-- Search Input -->
+                <input id="search-input"
+                       type="text"
                        placeholder="Search units..."
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                        hx-get="/api/slm-dashboard/units"
                        hx-trigger="keyup changed delay:300ms"
                        hx-target="#slm-list"
-                       hx-include="this"
+                       hx-include="#search-input, #project-filter"
                        name="search">
             </div>
 
@@ -93,9 +107,94 @@
     </div>
 </div>
 
+<!-- Command Center Modal -->
+<div id="command-center-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50">
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl w-full max-w-7xl max-h-[90vh] overflow-y-auto">
+            <div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between z-10">
+                <h2 class="text-xl font-bold text-gray-900 dark:text-white">Command Center</h2>
+                <button onclick="closeCommandCenter()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+            <div id="command-center-content" class="p-6">
+                <!-- Command center will load here -->
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
-// Function to select a unit and load live view
+// Global Connection Manager - ensures only one SLM connection at a time
+window.SLMConnectionManager = {
+    activeIntervals: [],
+    activeWebSocket: null,
+    currentUnitId: null,
+
+    // Clear all existing connections
+    clearAll: function() {
+        console.log('SLMConnectionManager: Clearing all connections');
+
+        // Clear all intervals
+        this.activeIntervals.forEach(interval => {
+            clearInterval(interval);
+        });
+        this.activeIntervals = [];
+
+        // Close WebSocket if exists
+        if (this.activeWebSocket) {
+            this.activeWebSocket.close();
+            this.activeWebSocket = null;
+        }
+
+        // Clear any global intervals that might exist
+        if (window.refreshInterval) {
+            clearInterval(window.refreshInterval);
+            window.refreshInterval = null;
+        }
+        if (window.timerInterval) {
+            clearInterval(window.timerInterval);
+            window.timerInterval = null;
+        }
+        if (window.diagRefreshInterval) {
+            clearInterval(window.diagRefreshInterval);
+            window.diagRefreshInterval = null;
+        }
+
+        console.log('SLMConnectionManager: All connections cleared');
+    },
+
+    // Register a new interval
+    registerInterval: function(intervalId) {
+        this.activeIntervals.push(intervalId);
+    },
+
+    // Register WebSocket
+    registerWebSocket: function(ws) {
+        if (this.activeWebSocket) {
+            this.activeWebSocket.close();
+        }
+        this.activeWebSocket = ws;
+    },
+
+    // Set current unit
+    setCurrentUnit: function(unitId) {
+        if (this.currentUnitId !== unitId) {
+            this.clearAll();
+            this.currentUnitId = unitId;
+        }
+    }
+};
+
+// Function to select a unit and load DIAGNOSTICS CARD (not full command center)
 function selectUnit(unitId) {
+    console.log(`Selecting unit: ${unitId}`);
+
+    // Clear all existing connections
+    window.SLMConnectionManager.clearAll();
+
     // Remove active state from all items
     document.querySelectorAll('.slm-unit-item').forEach(item => {
         item.classList.remove('bg-seismo-orange', 'text-white');
@@ -106,18 +205,58 @@ function selectUnit(unitId) {
     event.currentTarget.classList.remove('bg-gray-100', 'dark:bg-gray-700');
     event.currentTarget.classList.add('bg-seismo-orange', 'text-white');
 
-    // Load live view for this unit
-    htmx.ajax('GET', `/api/slm-dashboard/live-view/${unitId}`, {
+    // Load DIAGNOSTICS CARD (not full live view)
+    htmx.ajax('GET', `/api/slm-dashboard/diagnostics/${unitId}`, {
         target: '#live-view-panel',
         swap: 'innerHTML'
     });
 }
 
+// Open command center in modal
+function openCommandCenter(unitId) {
+    console.log(`Opening command center for: ${unitId}`);
+
+    // Clear diagnostics refresh before opening modal
+    window.SLMConnectionManager.clearAll();
+
+    const modal = document.getElementById('command-center-modal');
+    modal.classList.remove('hidden');
+
+    // Load full command center
+    htmx.ajax('GET', `/api/slm-dashboard/live-view/${unitId}`, {
+        target: '#command-center-content',
+        swap: 'innerHTML'
+    });
+}
+
+// Close command center modal
+function closeCommandCenter() {
+    console.log('Closing command center');
+
+    // Clear all command center connections
+    window.SLMConnectionManager.clearAll();
+
+    document.getElementById('command-center-modal').classList.add('hidden');
+
+    // Reload the diagnostics card for the currently selected unit
+    const activeUnit = document.querySelector('.slm-unit-item.bg-seismo-orange');
+    if (activeUnit) {
+        const unitIdMatch = activeUnit.getAttribute('onclick').match(/selectUnit\('(.+?)'\)/);
+        if (unitIdMatch) {
+            const unitId = unitIdMatch[1];
+            htmx.ajax('GET', `/api/slm-dashboard/diagnostics/${unitId}`, {
+                target: '#live-view-panel',
+                swap: 'innerHTML'
+            });
+        }
+    }
+}
+
 // Configuration modal functions
 function openConfigModal(unitId) {
     const modal = document.getElementById('config-modal');
     modal.classList.remove('hidden');
-    
+
     // Load configuration form via HTMX
     htmx.ajax('GET', `/api/slm-dashboard/config/${unitId}`, {
         target: '#config-modal-content',
@@ -129,121 +268,48 @@ function closeConfigModal() {
     document.getElementById('config-modal').classList.add('hidden');
 }
 
-// Close modal on escape key
+// Close modals on escape key
 document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
         closeConfigModal();
+        closeCommandCenter();
     }
 });
 
-// Close modal when clicking outside
+// Close modals when clicking outside
 document.getElementById('config-modal')?.addEventListener('click', function(e) {
     if (e.target === this) {
         closeConfigModal();
     }
 });
 
-// Initialize WebSocket for selected unit
-let currentWebSocket = null;
-
-function initLiveDataStream(unitId) {
-    // Close existing connection if any
-    if (currentWebSocket) {
-        currentWebSocket.close();
+document.getElementById('command-center-modal')?.addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeCommandCenter();
     }
+});
 
-    // WebSocket URL for SLMM backend via proxy
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${unitId}/live`;
-
-    currentWebSocket = new WebSocket(wsUrl);
-
-    currentWebSocket.onopen = function() {
-        console.log('WebSocket connected');
-        // Toggle button visibility
-        const startBtn = document.getElementById('start-stream-btn');
-        const stopBtn = document.getElementById('stop-stream-btn');
-        if (startBtn) startBtn.style.display = 'none';
-        if (stopBtn) stopBtn.style.display = 'flex';
-    };
-
-    currentWebSocket.onmessage = function(event) {
-        const data = JSON.parse(event.data);
-        updateLiveChart(data);
-        updateLiveMetrics(data);
-    };
-
-    currentWebSocket.onerror = function(error) {
-        console.error('WebSocket error:', error);
-    };
-
-    currentWebSocket.onclose = function() {
-        console.log('WebSocket closed');
-        // Toggle button visibility
-        const startBtn = document.getElementById('start-stream-btn');
-        const stopBtn = document.getElementById('stop-stream-btn');
-        if (startBtn) startBtn.style.display = 'flex';
-        if (stopBtn) stopBtn.style.display = 'none';
-    };
-}
-
-function stopLiveDataStream() {
-    if (currentWebSocket) {
-        currentWebSocket.close();
-        currentWebSocket = null;
-    }
-}
-
-// Update live chart with new data point
-let chartData = {
-    timestamps: [],
-    lp: [],
-    leq: []
-};
-
-function updateLiveChart(data) {
-    const now = new Date();
-    chartData.timestamps.push(now.toLocaleTimeString());
-    chartData.lp.push(parseFloat(data.lp || 0));
-    chartData.leq.push(parseFloat(data.leq || 0));
-
-    // Keep only last 60 data points (1 minute at 1 sample/sec)
-    if (chartData.timestamps.length > 60) {
-        chartData.timestamps.shift();
-        chartData.lp.shift();
-        chartData.leq.shift();
-    }
-
-    // Update chart (using Chart.js if available)
-    if (window.liveChart) {
-        window.liveChart.data.labels = chartData.timestamps;
-        window.liveChart.data.datasets[0].data = chartData.lp;
-        window.liveChart.data.datasets[1].data = chartData.leq;
-        window.liveChart.update('none'); // Update without animation for smooth real-time
-    }
-}
-
-function updateLiveMetrics(data) {
-    // Update metric displays
-    if (document.getElementById('live-lp')) {
-        document.getElementById('live-lp').textContent = data.lp || '--';
-    }
-    if (document.getElementById('live-leq')) {
-        document.getElementById('live-leq').textContent = data.leq || '--';
-    }
-    if (document.getElementById('live-lmax')) {
-        document.getElementById('live-lmax').textContent = data.lmax || '--';
-    }
-    if (document.getElementById('live-lmin')) {
-        document.getElementById('live-lmin').textContent = data.lmin || '--';
-    }
-}
+// Load projects for filter dropdown on page load
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('/api/slm-dashboard/projects')
+        .then(response => response.json())
+        .then(data => {
+            const projectFilter = document.getElementById('project-filter');
+            if (projectFilter && data.projects) {
+                data.projects.forEach(project => {
+                    const option = document.createElement('option');
+                    option.value = project;
+                    option.textContent = project;
+                    projectFilter.appendChild(option);
+                });
+            }
+        })
+        .catch(error => console.error('Failed to load projects:', error));
+});
 
 // Cleanup on page unload
 window.addEventListener('beforeunload', function() {
-    if (currentWebSocket) {
-        currentWebSocket.close();
-    }
+    window.SLMConnectionManager.clearAll();
 });
 </script>
 {% endblock %}
diff --git a/sfm.code-workspace b/terra-view.code-workspace
similarity index 100%
rename from sfm.code-workspace
rename to terra-view.code-workspace