From 5d2aaa802b5eabc1c03a6f79a1dfb8d7c565e14c Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Tue, 3 Mar 2026 16:19:33 -0800
Subject: [PATCH] Move controls to top

---
 .../src/components/PacketVisualizer3D.tsx     | 52 +++++++++----------
 frontend/src/components/VisualizerView.tsx    |  2 +-
 tests/test_websocket_route.py                 |  5 ++
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/PacketVisualizer3D.tsx b/frontend/src/components/PacketVisualizer3D.tsx
index bf61602..02f2e0a 100644
--- a/frontend/src/components/PacketVisualizer3D.tsx
+++ b/frontend/src/components/PacketVisualizer3D.tsx
@@ -1720,12 +1720,30 @@ export function PacketVisualizer3D({
       )}
 
       {/* Options */}
-      <div className="absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10">
+      <div
+        className={`absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10 transition-opacity ${!showControls ? 'opacity-40 hover:opacity-100' : ''}`}
+      >
         <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-2">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <Checkbox
+                checked={showControls}
+                onCheckedChange={(c) => setShowControls(c === true)}
+              />
+              <span title="Toggle legends and controls visibility">Show controls</span>
+            </label>
+            {onFullScreenChange && (
+              <label className="flex items-center gap-2 cursor-pointer">
+                <Checkbox
+                  checked={!fullScreen}
+                  onCheckedChange={(c) => onFullScreenChange(c !== true)}
+                />
+                <span title="Show or hide the packet feed sidebar">Show packet feed sidebar</span>
+              </label>
+            )}
+          </div>
           {showControls && (
             <>
-              <div>Nodes: {data.stats.nodes}</div>
-              <div>Links: {data.stats.links}</div>
               <div className="border-t border-border pt-2 mt-1 flex flex-col gap-2">
                 <label className="flex items-center gap-2 cursor-pointer">
                   <Checkbox
@@ -1888,32 +1906,12 @@ export function PacketVisualizer3D({
                   Clear &amp; Reset
                 </button>
               </div>
+              <div className="border-t border-border pt-2 mt-1">
+                <div>Nodes: {data.stats.nodes}</div>
+                <div>Links: {data.stats.links}</div>
+              </div>
             </>
           )}
-          <div
-            className={
-              !showControls
-                ? 'flex flex-col gap-2'
-                : 'border-t border-border pt-2 mt-1 flex flex-col gap-2'
-            }
-          >
-            <label className="flex items-center gap-2 cursor-pointer">
-              <Checkbox
-                checked={showControls}
-                onCheckedChange={(c) => setShowControls(c === true)}
-              />
-              <span title="Toggle legends and controls visibility">Show controls</span>
-            </label>
-            {onFullScreenChange && (
-              <label className="flex items-center gap-2 cursor-pointer">
-                <Checkbox
-                  checked={!fullScreen}
-                  onCheckedChange={(c) => onFullScreenChange(c !== true)}
-                />
-                <span title="Show or hide the packet feed sidebar">Show packet feed sidebar</span>
-              </label>
-            )}
-          </div>
         </div>
       </div>
 
diff --git a/frontend/src/components/VisualizerView.tsx b/frontend/src/components/VisualizerView.tsx
index faee2b0..a548e14 100644
--- a/frontend/src/components/VisualizerView.tsx
+++ b/frontend/src/components/VisualizerView.tsx
@@ -49,7 +49,7 @@ export function VisualizerView({ packets, contacts, config }: VisualizerViewProp
     <div ref={containerRef} className="flex flex-col h-full bg-background">
       {/* Header */}
       <div className="flex justify-between items-center px-4 py-3 border-b border-border font-medium text-lg">
-        <span>Mesh Visualizer</span>
+        <span>{paneFullScreen ? 'RemoteTerm MeshCore Visualizer' : 'Mesh Visualizer'}</span>
         <button
           className="hidden md:inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           onClick={toggleFullScreen}
diff --git a/tests/test_websocket_route.py b/tests/test_websocket_route.py
index fdb735f..93cc3ef 100644
--- a/tests/test_websocket_route.py
+++ b/tests/test_websocket_route.py
@@ -43,6 +43,7 @@ class TestWebSocketEndpoint:
             mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
             mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
             mock_settings.database_path = "/tmp/test.db"
+            mock_settings.disable_bots = False
 
             from app.main import app
 
@@ -76,6 +77,7 @@ class TestWebSocketEndpoint:
             mock_health_rm.connection_info = None
             mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
             mock_settings.database_path = "/tmp/test.db"
+            mock_settings.disable_bots = False
 
             from app.main import app
 
@@ -105,6 +107,7 @@ class TestWebSocketEndpoint:
             mock_health_rm.connection_info = "TCP: 192.168.1.1:4000"
             mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
             mock_settings.database_path = "/tmp/test.db"
+            mock_settings.disable_bots = False
 
             from app.main import app
 
@@ -135,6 +138,7 @@ class TestWebSocketEndpoint:
             mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
             mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
             mock_settings.database_path = "/tmp/test.db"
+            mock_settings.disable_bots = False
 
             from app.main import app
 
@@ -165,6 +169,7 @@ class TestWebSocketEndpoint:
             mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
             mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
             mock_settings.database_path = "/tmp/test.db"
+            mock_settings.disable_bots = False
 
             from app.main import app