make logs opt-in and remove them from /

webui/src/App.jsx

@@ -15,7 +15,6 @@ import {
 } from './controls/index.js';
 import RoomCameraPanel from './components/RoomCameraPanel/index.jsx';
 import KinectPanel from './components/KinectPanel/index.jsx';
-import LogPanel from './components/LogPanel/index.jsx';
 import DriverVideo from './components/DriverVideo/index.jsx';
 import RightPaneTabs from './components/RightPaneTabs/index.jsx';
 import ModeGateOverlay from './components/ModeGateOverlay/index.jsx';
@@ -82,7 +81,6 @@ function DesktopLayout({ layout, onOpenHelpOverlay }) {
         <DriverVideo />
         <PiHostStatsCard />
         <TelemetryPanel />
-        {/* <LogPanel /> */}
       </div>
       <div className={`flex min-w-0 flex-1 flex-col ${themeGapClass} overflow-y-auto`}>
         <GlobalObjectiveBanner layout={layout} />
@@ -174,7 +172,6 @@ function MobileFeatureTabs({
           <TabPanel id="settings">
             <div className={themeStackClass}>
               <SettingsPanel />
-              <LogPanel />
             </div>
           </TabPanel>
         </TabPanels>

webui/src/components/LogPanel/index.jsx

@@ -2,12 +2,45 @@
 // Purpose: Defines the Log Panel module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { useSessionSelector } from '../../context/SessionContext.jsx';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useSocket } from '../../context/SocketContext.jsx';
 import CardFrame from '../CardFrame/index.jsx';
 
 export default function LogPanel() {
+  const socket = useSocket();
   const logs = useSessionSelector((state) => state.logs);
   const rendered = useMemo(() => logs.slice().reverse(), [logs]);
+
+  useEffect(() => {
+    const subscribe = () => {
+      socket.emit('log:subscribe');
+    };
+
+    /*
+      Server logs are noisy enough that receiving them globally can make normal
+      driving views pay for a diagnostic tool they are not using. The panel owns
+      the subscription because it is the visible consumer: when a route or tab
+      unmounts this component, the server can stop sending log traffic to this
+      browser entirely instead of merely hiding the rendered rows.
+
+      The connect listener matters because Socket.IO rooms are attached to the
+      current server-side socket instance. A reconnect gives the browser a fresh
+      room membership, so the mounted panel must ask for the log room again.
+    */
+    subscribe();
+    socket.on('connect', subscribe);
+
+    return () => {
+      /*
+        Unsubscribing on unmount keeps inactive tab panels and non-log routes
+        from continuing to receive high-volume log entries after the operator
+        has navigated away from the diagnostic view.
+      */
+      socket.off('connect', subscribe);
+      socket.emit('log:unsubscribe');
+    };
+  }, [socket]);
+
   return (
     <CardFrame title="Server logs" bodyClassName="space-y-0.5 text-base">
       <div className="surface h-64 overflow-y-auto font-mono text-xs">