guh wh

webui/src/controls/ControlContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
 import { controlReducer, initialControlState } from './controlReducer.js';
 import { computeDifferentialSpeeds, clamp } from './controlMath.js';
 import { useCommandPipeline } from './commandPipeline.js';
@@ -16,6 +16,7 @@ function clampServoAngle(config, value) {
 export function ControlSystemProvider({ children }) {
   const pipeline = useCommandPipeline();
   const [state, dispatch] = useReducer(controlReducer, initialControlState);
+  const servoAngleRef = useRef(initialControlState.camera.angle);
 
   useEffect(() => {
     dispatch({ type: 'control/set-rover', payload: pipeline.roverId });
@@ -31,6 +32,7 @@ export function ControlSystemProvider({ children }) {
     const config = pipeline.servoConfig;
     if (!config) {
       dispatch({ type: 'control/set-camera-config', payload: { config: null } });
+      servoAngleRef.current = null;
       return;
     }
     const min = typeof config.minAngle === 'number' ? config.minAngle : -45;
@@ -40,8 +42,14 @@ export function ControlSystemProvider({ children }) {
       type: 'control/set-camera-config',
       payload: { config, angle: clamp(base, min, max) },
     });
+    servoAngleRef.current = clamp(base, min, max);
   }, [pipeline.servoConfig]);
 
+  useEffect(() => {
+    servoAngleRef.current =
+      typeof state.camera.angle === 'number' ? state.camera.angle : servoAngleRef.current;
+  }, [state.camera.angle]);
+
   useEffect(() => {
     if (pipeline.roverId) {
       pipeline.enableSensorStream();
@@ -84,6 +92,7 @@ export function ControlSystemProvider({ children }) {
       const clamped = clampServoAngle(pipeline.servoConfig, value);
       dispatch({ type: 'control/set-camera-angle', payload: clamped });
       pipeline.sendServoAngle(clamped);
+      servoAngleRef.current = clamped;
     },
     [pipeline],
   );
@@ -94,14 +103,14 @@ export function ControlSystemProvider({ children }) {
       if (!config) return;
       const step = typeof delta === 'number' && delta !== 0 ? delta : config.nudgeDegrees || 1;
       const baseline =
-        typeof state.camera.angle === 'number'
-          ? state.camera.angle
+        typeof servoAngleRef.current === 'number'
+          ? servoAngleRef.current
           : typeof config.homeAngle === 'number'
           ? config.homeAngle
           : 0;
       setServoAngle(baseline + step);
     },
-    [pipeline.servoConfig, setServoAngle, state.camera.angle],
+    [pipeline.servoConfig, setServoAngle],
   );
 
   const goServoHome = useCallback(() => {

webui/src/controls/inputs/KeyboardInputManager.jsx

@@ -5,6 +5,30 @@ const SOURCE = 'keyboard';
 const ZERO_VECTOR = { x: 0, y: 0, boost: false };
 const ZERO_AUX = { main: 0, side: 0, vacuum: 0 };
 const SERVO_REPEAT_MS = 110;
+const KEY_ALIASES = {
+  '{': '[',
+  '}': ']',
+  ':': ';',
+  '"': "'",
+  '<': ',',
+  '>': '.',
+  '?': '/',
+  '|': '\\',
+  '_': '-',
+  '+': '=',
+};
+const CODE_ALIASES = {
+  BracketLeft: '[',
+  BracketRight: ']',
+  Backslash: '\\',
+  Semicolon: ';',
+  Quote: "'",
+  Comma: ',',
+  Period: '.',
+  Slash: '/',
+  Minus: '-',
+  Equal: '=',
+};
 
 function shouldIgnoreEvent(event) {
   const target = event.target;
@@ -18,15 +42,32 @@ function shouldIgnoreEvent(event) {
   );
 }
 
+function canonicalizeBinding(value) {
+  if (typeof value !== 'string') return '';
+  const lower = value.toLowerCase();
+  return KEY_ALIASES[lower] ?? lower;
+}
+
 function normalizeKeymap(keymap = {}) {
   const entries = Object.entries(keymap).map(([action, bindings]) => {
     const values = Array.isArray(bindings) ? bindings : [bindings];
-    const normalized = new Set(values.map((value) => String(value).toLowerCase()));
+    const normalized = new Set(values.map((value) => canonicalizeBinding(String(value))));
     return [action, normalized];
   });
   return Object.fromEntries(entries);
 }
 
+function canonicalizeEventKey(event) {
+  if (!event) return '';
+  const code = event.code;
+  if (code && CODE_ALIASES[code]) {
+    return CODE_ALIASES[code];
+  }
+  const key = event.key ?? '';
+  const lower = key.toLowerCase();
+  return KEY_ALIASES[lower] ?? lower;
+}
+
 function bindingHas(bindingSet, key) {
   if (!bindingSet || bindingSet.size === 0) return false;
   return bindingSet.has(key);
@@ -194,7 +235,7 @@ export default function KeyboardInputManager() {
   useEffect(() => {
     function handleKeyDown(event) {
       if (shouldIgnoreEvent(event)) return;
-      const key = event.key?.toLowerCase();
+      const key = canonicalizeEventKey(event);
       if (!key) return;
       if (actionKeys.has(key)) {
         event.preventDefault();
@@ -221,7 +262,7 @@ export default function KeyboardInputManager() {
     }
 
     function handleKeyUp(event) {
-      const key = event.key?.toLowerCase();
+      const key = canonicalizeEventKey(event);
       if (!key || !pressedKeysRef.current.has(key)) {
         if (bindingHas(keymap.cameraUp, key)) {
           cameraHoldRef.current.delete('up');