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>
+  );
+}

webui/src/controls/ControlContext.jsx

@@ -312,10 +312,23 @@ export function ControlSystemProvider({ children }) {
     [pipeline],
   );
 
+  const setNightVision = useCallback(
+    (nightVisionOn) => {
+      if (!pipeline.nightVision) return;
+      if (typeof nightVisionOn === 'boolean') {
+        const action = nightVisionOn ? 'off' : 'on';
+        pipeline.sendNightVision(action);
+      } else {
+        pipeline.sendNightVision('toggle');
+      }
+      recordControlIntent();
+    },
+    [pipeline, recordControlIntent],
+  );
+
   const toggleNightVision = useCallback(() => {
-    pipeline.sendNightVision('toggle');
-    recordControlIntent();
-  }, [pipeline, recordControlIntent]);
+    setNightVision();
+  }, [setNightVision]);
 
   const setSongNote = useCallback(
     (note) => {
@@ -354,6 +367,7 @@ export function ControlSystemProvider({ children }) {
         stopAllMotion,
         sendOiCommand,
         setSensorStream,
+        setNightVision,
         toggleNightVision,
         updateKeyBinding,
         resetKeyBindings,
@@ -376,6 +390,7 @@ export function ControlSystemProvider({ children }) {
       stopAllMotion,
       sendOiCommand,
       setSensorStream,
+      setNightVision,
       toggleNightVision,
       updateKeyBinding,
       resetKeyBindings,

webui/src/controls/commandPipeline.js

@@ -32,6 +32,8 @@ export function useCommandPipeline(options = {}) {
     return rosterEntry.nightVision;
   }, [rosterEntry]);
 
+  const nightVisionState = useMemo(() => rosterEntry?.nightVision?.state ?? null, [rosterEntry]);
+
   const emitCommand = useCallback(
     (payload, cb) => {
       if (!roverId) return;
@@ -202,6 +204,7 @@ export function useCommandPipeline(options = {}) {
       rosterEntry,
       servoConfig,
       nightVision,
+      nightVisionState,
       emitCommand,
       enableSensorStream,
       sendDriveDirect,
@@ -217,6 +220,7 @@ export function useCommandPipeline(options = {}) {
       rosterEntry,
       servoConfig,
       nightVision,
+      nightVisionState,
       emitCommand,
       enableSensorStream,
       sendDriveDirect,

webui/src/controls/inputs/GamepadInputManager.jsx

@@ -8,6 +8,7 @@ import {
   getPadSignature,
 } from './gamepadBindings.js';
 import { subscribeGamepadHub } from './gamepadHub.js';
+import { isTextEntryActive } from './inputFocusUtils.js';
 
 const SOURCE = 'gamepad';
 const ZERO_VECTOR = { x: 0, y: 0, boost: false };
@@ -154,6 +155,21 @@ export default function GamepadInputManager() {
         return;
       }
 
+      if (isTextEntryActive()) {
+        if (!areVectorsEqual(lastVectorRef.current, ZERO_VECTOR)) {
+          lastVectorRef.current = ZERO_VECTOR;
+          setDriveVector(ZERO_VECTOR, { source: SOURCE });
+        }
+        if (!areAuxEqual(lastAuxRef.current, ZERO_AUX)) {
+          lastAuxRef.current = ZERO_AUX;
+          setAuxMotors(ZERO_AUX);
+        }
+        buttonStateRef.current = new Map();
+        reverseStateRef.current = { main: false, side: false };
+        registerInputState(SOURCE, { connected: true, blocked: true });
+        return;
+      }
+
       ensureProfile(activePad);
       const signature = activePad.signature;
       const profile =

webui/src/controls/inputs/KeyboardInputManager.jsx

@@ -3,6 +3,7 @@ import { useControlSystem } from '../ControlContext.jsx';
 import { useChat } from '../../context/ChatContext.jsx';
 import { useSession } from '../../context/SessionContext.jsx';
 import { normalizeKeymapEntries, tokensForEvent } from '../keymapUtils.js';
+import { isTextInputElement } from './inputFocusUtils.js';
 import { useSettingsNamespace } from '../../settings/index.js';
 import { INPUT_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
 import {
@@ -55,15 +56,7 @@ function mapTiltIntervalToSpeed(interval) {
 }
 
 function shouldIgnoreEvent(event) {
-  const target = event.target;
-  if (!target) return false;
-  const tag = target.tagName;
-  return (
-    tag === 'INPUT' ||
-    tag === 'TEXTAREA' ||
-    target.isContentEditable ||
-    tag === 'SELECT'
-  );
+  return isTextInputElement(event?.target);
 }
 
 function bindingActive(bindingSet, keys) {
@@ -395,12 +388,12 @@ export default function KeyboardInputManager() {
       resetAll();
     }
 
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('keydown', handleKeyDown, { capture: true });
+    window.addEventListener('keyup', handleKeyUp, { capture: true });
     window.addEventListener('blur', handleBlur);
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('keydown', handleKeyDown, { capture: true });
+      window.removeEventListener('keyup', handleKeyUp, { capture: true });
       window.removeEventListener('blur', handleBlur);
     };
   }, [

webui/src/controls/inputs/inputFocusUtils.js

@@ -0,0 +1,30 @@
+const TEXT_INPUT_TYPES = new Set([
+  '',
+  'text',
+  'search',
+  'email',
+  'password',
+  'url',
+  'tel',
+  'number',
+  'date',
+  'datetime-local',
+  'month',
+  'time',
+  'week',
+]);
+
+export function isTextInputElement(target) {
+  if (!target || target.nodeType !== 1) return false;
+  const tag = target.tagName;
+  if (tag === 'TEXTAREA') return true;
+  if (target.isContentEditable) return true;
+  if (tag !== 'INPUT') return false;
+  const type = target.type ? target.type.toLowerCase() : '';
+  return TEXT_INPUT_TYPES.has(type);
+}
+
+export function isTextEntryActive() {
+  if (typeof document === 'undefined') return false;
+  return isTextInputElement(document.activeElement);
+}