stateful night vision rework

webui/src/components/CameraServoPanel.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useControlSystem } from '../controls/index.js';
+import { formatKeyLabel } from '../controls/keymapUtils.js';
+import NightVisionControl from './NightVisionControl.jsx';
 
 const SLIDER_THROTTLE_MS = 150;
 
@@ -10,11 +12,15 @@ function formatDegrees(value) {
 
 export default function CameraServoPanel() {
   const {
-    state: { roverId, camera },
-    actions: { setServoAngle, nudgeServo, goServoHome },
+    state: { roverId, camera, keymap },
+    pipeline,
+    actions: { setServoAngle, nudgeServo, goServoHome, setNightVision },
   } = useControlSystem();
   const config = camera?.config;
   const enabled = Boolean(roverId && camera?.enabled && config);
+  const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
+  const nightVisionState = pipeline?.nightVisionState;
+  const nightVisionKey = formatKeyLabel(keymap?.nightVisionToggle?.[0]);
   const min = typeof config?.minAngle === 'number' ? config.minAngle : -30;
   const max = typeof config?.maxAngle === 'number' ? config.maxAngle : 30;
   const value =
@@ -24,7 +30,7 @@ export default function CameraServoPanel() {
         ? config.homeAngle
         : (min + max) / 2;
 
-  if (!enabled) return null;
+  if (!enabled && !nightVisionAvailable) return null;
 
   const [pendingAngle, setPendingAngle] = useState(value);
   const throttleRef = useRef(null);
@@ -80,30 +86,48 @@ export default function CameraServoPanel() {
     nudgeServo(delta);
   };
 
+  const handleNightVisionToggle = (nextOn) => {
+    if (!nightVisionAvailable) return;
+    setNightVision(nextOn);
+  };
+
   return (
     <section className="panel-section space-y-0.5 text-base">
-      <div className="flex items-center justify-between text-sm text-slate-300">
-        <span>Camera Tilt</span>
-        <span className="font-mono text-sm text-slate-100">{formatDegrees(value)}</span>
-      </div>
-      <div>
-        <input
-          type="range"
-          className="w-full accent-emerald-400"
-          min={min}
-          max={max}
-          step={0.5}
-          value={pendingAngle}
-          onChange={handleSlider}
-          onMouseUp={commitSlider}
-          onTouchEnd={commitSlider}
-          onPointerUp={commitSlider}
+      {enabled && (
+        <>
+          <div className="flex items-center justify-between text-sm text-slate-300">
+            <span>Camera Tilt</span>
+            <span className="font-mono text-sm text-slate-100">{formatDegrees(value)}</span>
+          </div>
+          <div>
+            <input
+              type="range"
+              className="w-full accent-emerald-400"
+              min={min}
+              max={max}
+              step={0.5}
+              value={pendingAngle}
+              onChange={handleSlider}
+              onMouseUp={commitSlider}
+              onTouchEnd={commitSlider}
+              onPointerUp={commitSlider}
+            />
+            <div className="mt-0 flex justify-between text-xs text-slate-400">
+              <span>{formatDegrees(min)}</span>
+              <span>{formatDegrees(max)}</span>
+            </div>
+          </div>
+        </>
+      )}
+      {nightVisionAvailable && (
+        <NightVisionControl
+          nightVisionOn={nightVisionState?.nightVisionOn}
+          disabled={!roverId}
+          onToggle={handleNightVisionToggle}
+          keyLabel={nightVisionKey}
+          className={enabled ? 'mt-1' : ''}
         />
-        <div className="mt-0 flex justify-between text-xs text-slate-400">
-          <span>{formatDegrees(min)}</span>
-          <span>{formatDegrees(max)}</span>
-        </div>
-      </div>
+      )}
       {/* <div className="flex gap-0.5 text-sm">
         <button type="button" className="flex-1 button-dark" onClick={() => handleNudge(-1)}>
           Tilt Down

webui/src/components/MobileControls.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useControlSystem } from '../controls/index.js';
 import { clampUnit } from '../controls/controlMath.js';
 import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
+import NightVisionControl from './NightVisionControl.jsx';
 
 const SOURCE = 'mobile-joystick';
 const JOYSTICK_RADIUS = 80;
@@ -134,7 +135,7 @@ function MobileJoystickPanel({ layout }) {
   const {
     state: { roverId, camera },
     pipeline,
-    actions: { setDriveVector, registerInputState, setServoAngle, toggleNightVision },
+    actions: { setDriveVector, registerInputState, setServoAngle, setNightVision },
   } = useControlSystem();
   const driveDockState = useDriveDockState(roverId);
   const dockedNotDriving = driveDockState.docked && !driveDockState.driving;
@@ -142,6 +143,7 @@ function MobileJoystickPanel({ layout }) {
   const cameraConfig = camera?.config;
   const cameraEnabled = Boolean(roverId && camera?.enabled && cameraConfig);
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
+  const nightVisionState = pipeline?.nightVisionState;
   const cameraMin = typeof cameraConfig?.minAngle === 'number' ? cameraConfig.minAngle : -45;
   const cameraMax = typeof cameraConfig?.maxAngle === 'number' ? cameraConfig.maxAngle : 45;
   const cameraValue =
@@ -198,6 +200,14 @@ function MobileJoystickPanel({ layout }) {
     setServoAngle(next);
   };
 
+  const handleNightVisionToggle = useCallback(
+    (nextOn) => {
+      if (!nightVisionAvailable) return;
+      setNightVision(nextOn);
+    },
+    [nightVisionAvailable, setNightVision],
+  );
+
   const fillClass = dockedNotDriving ? 'max-h-screen self-start' : '';
   const containerClass = `flex h-full flex-col gap-0.5 text-slate-100 ${fillClass}`;
 
@@ -206,16 +216,6 @@ function MobileJoystickPanel({ layout }) {
       <DriveDockAction layout="mobile" expand={dockedNotDriving} driveDockState={driveDockState} />
       {!dockedNotDriving ? (
         <>
-          {nightVisionAvailable && (
-            <button
-              type="button"
-              onClick={() => toggleNightVision()}
-              disabled={disabled}
-              className="bg-amber-600 px-0.5 py-1 text-sm font-semibold text-amber-50 transition hover:bg-amber-500 disabled:opacity-40"
-            >
-              Toggle Night Vision
-            </button>
-          )}
           {cameraEnabled && (
             <div className="bg-zinc-950 p-0.5 text-xs">
               <div className="flex items-center justify-between text-[0.75rem] text-slate-400">
@@ -233,6 +233,14 @@ function MobileJoystickPanel({ layout }) {
               />
             </div>
           )}
+          {nightVisionAvailable && (
+            <NightVisionControl
+              nightVisionOn={nightVisionState?.nightVisionOn}
+              disabled={disabled}
+              onToggle={handleNightVisionToggle}
+              className="mt-0.5"
+            />
+          )}
           <FloatingJoystick
             disabled={disabled}
             layout={layout}

webui/src/components/NightVisionControl.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useState } from 'react';
+
+function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
+export default function NightVisionControl({
+  nightVisionOn,
+  disabled,
+  onToggle,
+  keyLabel,
+  className = '',
+}) {
+  const [optimistic, setOptimistic] = useState(
+    isBoolean(nightVisionOn) ? nightVisionOn : null,
+  );
+
+  useEffect(() => {
+    if (isBoolean(nightVisionOn)) {
+      setOptimistic(nightVisionOn);
+    }
+  }, [nightVisionOn]);
+
+  const hasState = isBoolean(optimistic);
+  const displayOn = hasState ? optimistic : false;
+  const statusLabel = hasState ? (displayOn ? 'On' : 'Off') : '—';
+  const statusClasses = displayOn
+    ? 'bg-emerald-600 text-emerald-50'
+    : 'bg-slate-700 text-slate-200';
+
+  const handleToggle = () => {
+    if (disabled) return;
+    const next = hasState ? !displayOn : true;
+    setOptimistic(next);
+    onToggle?.(next);
+  };
+
+  const buttonClasses = useMemo(
+    () =>
+      [
+        'flex w-full items-center justify-between rounded bg-zinc-950 px-1 py-0.5 text-xs text-slate-300',
+        'transition hover:bg-zinc-900 disabled:opacity-50',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' '),
+    [className],
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={handleToggle}
+      disabled={disabled}
+      aria-pressed={displayOn}
+      className={buttonClasses}
+    >
+      <span className="text-slate-400">Night Vision</span>
+      <span className="flex items-center gap-1">
+        <span className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${statusClasses}`}>
+          {statusLabel}
+        </span>
+        {keyLabel ? (
+          <span className="rounded bg-slate-800 px-1 py-0.5 text-[0.6rem] font-semibold text-slate-200">
+            {keyLabel}
+          </span>
+        ) : null}
+      </span>
+    </button>
+  );
+}