fix: Wire up VDL2 agent mode, fix dashboard layout gap and stats strip sizing

- Add VDL2 to syncModeUI setter map and allModes array in agents.js
  so agent state sync works for VDL2
- Fix dashboard bottom gap by using flex layout on body instead of
  hardcoded calc(100dvh - 160px) height
- Match source stat font-size to other stats (14px) for consistent
  strip sizing
- Add left-sidebars wrapper, VDL2 agent mode support, mutual sidebar
  collapse, and ACARS/VDL2 modeNames in index.html

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

static/css/adsb_dashboard.css

@@ -31,8 +31,11 @@ body {
     font-family: var(--font-sans);
     background: var(--bg-dark);
     color: var(--text-primary);
-    min-height: 100vh;
-    overflow-x: hidden;
+    height: 100dvh;
+    height: 100vh; /* Fallback */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 /* Animated radar sweep background */
@@ -227,16 +230,14 @@ body {
 }
 
 /* Main dashboard grid - Mobile first */
-/* Header ~52px + Nav 44px + Stats strip ~55px = ~151px, using 160px for safety */
 .dashboard {
     position: relative;
     z-index: 10;
     display: flex;
     flex-direction: column;
     gap: 0;
-    height: calc(100dvh - 160px);
-    height: calc(100vh - 160px); /* Fallback */
-    min-height: 400px;
+    flex: 1;
+    min-height: 0;
 }
 
 /* Tablet: Two-column layout */
@@ -249,13 +250,29 @@ body {
     }
 }
 
-/* Desktop: Full layout with ACARS */
+/* Desktop: Full layout with ACARS/VDL2 + map + sidebar */
 @media (min-width: 1024px) {
     .dashboard {
         grid-template-columns: auto 1fr 300px;
     }
 }
 
+/* Left sidebars wrapper (ACARS + VDL2) */
+.left-sidebars {
+    display: none;
+}
+
+@media (min-width: 1024px) {
+    .left-sidebars {
+        display: flex;
+        flex-direction: row;
+        grid-column: 1;
+        grid-row: 1;
+        height: 100%;
+        overflow: hidden;
+    }
+}
+
 /* ACARS sidebar (left of map) - Collapsible */
 .acars-sidebar {
     display: none;
@@ -267,12 +284,10 @@ body {
     min-height: 0;
 }
 
-/* Show ACARS sidebar on desktop */
-@media (min-width: 1024px) {
-    .acars-sidebar {
-        display: flex;
-        max-height: calc(100dvh - 160px);
-    }
+/* Show ACARS sidebar inside wrapper */
+.left-sidebars .acars-sidebar {
+    display: flex;
+    height: 100%;
 }
 
 .acars-collapse-btn {
@@ -430,11 +445,10 @@ body {
     min-height: 0;
 }
 
-@media (min-width: 1024px) {
-    .vdl2-sidebar {
-        display: flex;
-        max-height: calc(100dvh - 160px);
-    }
+/* Show VDL2 sidebar inside wrapper */
+.left-sidebars .vdl2-sidebar {
+    display: flex;
+    height: 100%;
 }
 
 .vdl2-collapse-btn {
@@ -652,6 +666,8 @@ body {
     position: relative;
     flex: 1;
     min-height: 300px;
+    min-width: 0;
+    overflow: hidden;
 }
 
 @media (min-width: 768px) {
@@ -1453,7 +1469,7 @@ body {
         display: flex !important;
         flex-direction: column !important;
         height: auto !important;
-        min-height: calc(100dvh - 160px);
+        min-height: 400px;
         overflow-y: auto !important;
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
@@ -1654,7 +1670,7 @@ body {
 }
 
 .strip-stat.source-stat .strip-value {
-    font-size: 11px;
+    font-size: 14px;
 }
 
 .strip-stat.session-stat {

static/js/core/agents.js

@@ -423,7 +423,7 @@ async function syncAgentModeStates(agentId) {
                 });
 
                 // Also check modes that might need to be marked as stopped
-                const allModes = ['sensor', 'pager', 'adsb', 'wifi', 'bluetooth', 'ais', 'dsc', 'acars', 'aprs', 'rtlamr', 'tscm', 'satellite', 'listening_post'];
+                const allModes = ['sensor', 'pager', 'adsb', 'wifi', 'bluetooth', 'ais', 'dsc', 'acars', 'vdl2', 'aprs', 'rtlamr', 'tscm', 'satellite', 'listening_post'];
                 allModes.forEach(mode => {
                     if (!agentRunningModes.includes(mode)) {
                         syncModeUI(mode, false, agentId);
@@ -704,6 +704,7 @@ function syncModeUI(mode, isRunning, agentId = null) {
         'wifi': 'setWiFiRunning',
         'bluetooth': 'setBluetoothRunning',
         'acars': 'setAcarsRunning',
+        'vdl2': 'setVdl2Running',
         'listening_post': 'setListeningPostRunning'
     };
 
@@ -865,12 +866,12 @@ function connectAgentStream(mode, onMessage) {
     }
 
     let streamUrl;
-    if (currentAgent === 'local') {
-        streamUrl = `/${mode}/stream`;
-    } else {
-        // For remote agents, proxy SSE through controller
-        streamUrl = `/controller/agents/${currentAgent}/${mode}/stream`;
-    }
+    if (currentAgent === 'local') {
+        streamUrl = `/${mode}/stream`;
+    } else {
+        // For remote agents, proxy SSE through controller
+        streamUrl = `/controller/agents/${currentAgent}/${mode}/stream`;
+    }
 
     agentEventSource = new EventSource(streamUrl);
 
@@ -878,7 +879,7 @@ function connectAgentStream(mode, onMessage) {
         try {
             const data = JSON.parse(event.data);
 
-            onMessage(data);
+            onMessage(data);
         } catch (e) {
             console.error('Error parsing SSE message:', e);
         }