horn pass

webui/src/components/CameraServoPanel.jsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useControlSystem } from '../controls/index.js';
 import { formatKeyLabel } from '../controls/keymapUtils.js';
 import NightVisionControl from './NightVisionControl.jsx';
+import HornControl from './HornControl.jsx';
 
 const SLIDER_THROTTLE_MS = 150;
 
@@ -14,13 +15,15 @@ export default function CameraServoPanel() {
   const {
     state: { roverId, camera, keymap },
     pipeline,
-    actions: { setServoAngle, nudgeServo, goServoHome, setNightVision },
+    actions: { setServoAngle, nudgeServo, goServoHome, setNightVision, startHorn, stopHorn },
   } = useControlSystem();
   const config = camera?.config;
   const enabled = Boolean(roverId && camera?.enabled && config);
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
   const nightVisionState = pipeline?.nightVisionState;
+  const hornAvailable = Boolean(roverId && pipeline?.horn);
   const nightVisionKey = formatKeyLabel(keymap?.nightVisionToggle?.[0]);
+  const hornKey = formatKeyLabel(keymap?.hornHonk?.[0]);
   const min = typeof config?.minAngle === 'number' ? config.minAngle : -30;
   const max = typeof config?.maxAngle === 'number' ? config.maxAngle : 30;
   const value =
@@ -30,7 +33,7 @@ export default function CameraServoPanel() {
         ? config.homeAngle
         : (min + max) / 2;
 
-  if (!enabled && !nightVisionAvailable) return null;
+  if (!enabled && !nightVisionAvailable && !hornAvailable) return null;
 
   const [pendingAngle, setPendingAngle] = useState(value);
   const throttleRef = useRef(null);
@@ -101,6 +104,14 @@ export default function CameraServoPanel() {
           keyLabel={nightVisionKey}
         />
       )}
+      {hornAvailable && (
+        <HornControl
+          disabled={!roverId}
+          onStart={startHorn}
+          onStop={stopHorn}
+          keyLabel={hornKey}
+        />
+      )}
       {enabled && (
         <>
           <div className="flex items-center justify-between text-sm text-slate-300">

webui/src/components/ControlSummary.jsx

@@ -7,6 +7,7 @@ import TopDownMap from './TopDownMap.jsx';
 import RoverRoster from './RoverRoster.jsx';
 import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
 import NightVisionControl from './NightVisionControl.jsx';
+import HornControl from './HornControl.jsx';
 
 export function RoverRosterPanel({ title = 'Rovers' }) {
   const { session, requestControl } = useSession();
@@ -76,13 +77,14 @@ export function InlineCameraTilt({ keymap }) {
   const {
     state: { roverId, camera },
     pipeline,
-    actions: { setServoAngle, setNightVision },
+    actions: { setServoAngle, setNightVision, startHorn, stopHorn },
   } = useControlSystem();
 
   const config = camera?.config;
   const enabled = Boolean(roverId && camera?.enabled && config);
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
   const nightVisionState = pipeline?.nightVisionState;
+  const hornAvailable = Boolean(roverId && pipeline?.horn);
   const min = typeof config?.minAngle === 'number' ? config.minAngle : -30;
   const max = typeof config?.maxAngle === 'number' ? config.maxAngle : 30;
   const value =
@@ -113,10 +115,11 @@ export function InlineCameraTilt({ keymap }) {
     draggingRef.current = false;
   };
 
-  if (!enabled && !nightVisionAvailable) return null;
+  if (!enabled && !nightVisionAvailable && !hornAvailable) return null;
   const upLabel = formatKeyLabel(keymap?.cameraUp?.[0]);
   const downLabel = formatKeyLabel(keymap?.cameraDown?.[0]);
   const nightVisionLabel = formatKeyLabel(keymap?.nightVisionToggle?.[0]);
+  const hornLabel = formatKeyLabel(keymap?.hornHonk?.[0]);
 
   return (
     <div className="surface space-y-0.5 p-0 text-sm text-slate-200">
@@ -128,6 +131,9 @@ export function InlineCameraTilt({ keymap }) {
           keyLabel={nightVisionLabel}
         />
       )}
+      {hornAvailable && (
+        <HornControl disabled={!roverId} onStart={startHorn} onStop={stopHorn} keyLabel={hornLabel} />
+      )}
       {enabled && (
         <div className="space-y-0.5 px-1 py-1">
           <div className="flex items-center justify-between text-xs text-slate-300">

webui/src/components/HornControl.jsx

@@ -0,0 +1,72 @@
+import { useMemo, useState } from 'react';
+
+export default function HornControl({
+  disabled,
+  onStart,
+  onStop,
+  keyLabel,
+  className = '',
+}) {
+  const [pressed, setPressed] = useState(false);
+
+  const buttonClasses = useMemo(() => {
+    const base =
+      'group flex w-full items-center justify-between rounded-xl border-2 px-1 py-0.75 text-xs font-semibold';
+    const active = 'border-rose-300/70 bg-rose-800 text-rose-50 hover:bg-rose-700';
+    const inactive = 'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800';
+    return [base, pressed ? active : inactive, 'disabled:opacity-50', className]
+      .filter(Boolean)
+      .join(' ');
+  }, [className, pressed]);
+
+  const start = () => {
+    if (disabled) return;
+    if (!pressed) {
+      setPressed(true);
+      onStart?.();
+    }
+  };
+
+  const stop = () => {
+    if (pressed) {
+      setPressed(false);
+      onStop?.();
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onPointerDown={(event) => {
+        event.preventDefault();
+        start();
+      }}
+      onPointerUp={(event) => {
+        event.preventDefault();
+        stop();
+      }}
+      onPointerLeave={stop}
+      onPointerCancel={stop}
+      onBlur={stop}
+      disabled={disabled}
+      aria-pressed={pressed}
+      className={buttonClasses}
+    >
+      <span className="flex items-center gap-0.5">
+        <span>Horn</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>
+      <span
+        className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${
+          pressed ? 'bg-rose-400 text-rose-950' : 'bg-slate-700 text-slate-200'
+        }`}
+      >
+        {pressed ? 'HONK' : 'Hold'}
+      </span>
+    </button>
+  );
+}

webui/src/components/HornSettings.jsx

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSettingsNamespace } from '../settings/index.js';
+import { HORN_SETTINGS_DEFAULTS } from '../settings/namespaces.js';
+
+function clampFreq(value) {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return 0;
+  if (num <= 0) return 0;
+  return Math.min(5000, Math.round(num));
+}
+
+export default function HornSettings() {
+  const { value: hornSettings, save: saveHornSettings } = useSettingsNamespace(
+    'horn',
+    HORN_SETTINGS_DEFAULTS,
+  );
+  const [waveform, setWaveform] = useState(hornSettings?.waveform || HORN_SETTINGS_DEFAULTS.waveform);
+  const [freqs, setFreqs] = useState(() => {
+    const base = Array.isArray(hornSettings?.freqs) ? hornSettings.freqs : HORN_SETTINGS_DEFAULTS.freqs;
+    return [...base, 0, 0, 0, 0].slice(0, 4).map((f) => clampFreq(f));
+  });
+
+  useEffect(() => {
+    setWaveform(hornSettings?.waveform || HORN_SETTINGS_DEFAULTS.waveform);
+    if (Array.isArray(hornSettings?.freqs)) {
+      setFreqs([...hornSettings.freqs, 0, 0, 0, 0].slice(0, 4).map((f) => clampFreq(f)));
+    }
+  }, [hornSettings?.freqs, hornSettings?.waveform]);
+
+  const formattedWaveform = useMemo(
+    () => (waveform === 'sine' ? 'sine' : 'saw'),
+    [waveform],
+  );
+
+  const updateWaveform = useCallback(
+    (event) => {
+      const next = event.target.value === 'sine' ? 'sine' : 'saw';
+      setWaveform(next);
+      saveHornSettings((current) => ({ ...(current ?? {}), waveform: next }));
+    },
+    [saveHornSettings],
+  );
+
+  const updateFreq = useCallback(
+    (index, value) => {
+      setFreqs((prev) => {
+        const next = [...prev];
+        next[index] = clampFreq(value);
+        saveHornSettings((current) => ({ ...(current ?? {}), freqs: next }));
+        return next;
+      });
+    },
+    [saveHornSettings],
+  );
+
+  return (
+    <section className="panel-section space-y-0.5 text-sm">
+      <p className="text-slate-400">Horn</p>
+      <label className="flex items-center justify-between gap-0.5 text-slate-200">
+        <span>Waveform</span>
+        <select value={formattedWaveform} onChange={updateWaveform} className="field-input text-sm">
+          <option value="saw">Saw</option>
+          <option value="sine">Sine</option>
+        </select>
+      </label>
+      <div className="grid grid-cols-2 gap-0.5">
+        {freqs.map((freq, idx) => (
+          <label key={`horn-freq-${idx}`} className="surface-muted flex items-center justify-between gap-0.5">
+            <span className="text-[0.7rem] text-slate-300">Freq {idx + 1}</span>
+            <input
+              type="number"
+              min={0}
+              max={5000}
+              step={1}
+              value={freq}
+              onChange={(event) => updateFreq(idx, event.target.value)}
+              className="w-20 rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-right text-[0.75rem] font-mono text-slate-100"
+            />
+          </label>
+        ))}
+      </div>
+      <p className="text-xs text-slate-500">Set a frequency to 0 to disable that oscillator.</p>
+    </section>
+  );
+}

webui/src/components/KeymapSettings.jsx

@@ -22,6 +22,7 @@ const KEY_ACTIONS = [
   { id: 'cameraUp', label: 'Camera Up', group: 'Camera' },
   { id: 'cameraDown', label: 'Camera Down', group: 'Camera' },
   { id: 'nightVisionToggle', label: 'Toggle Night Vision', group: 'Camera' },
+  { id: 'hornHonk', label: 'Horn (Hold)', group: 'Audio' },
   { id: 'driveMacro', label: 'Drive Macro', group: 'Macros' },
   { id: 'dockMacro', label: 'Dock Macro', group: 'Macros' },
   { id: 'chatFocus', label: 'Toggle Chat', group: 'Chat' },

webui/src/components/MobileControls.jsx

@@ -3,6 +3,7 @@ import { useControlSystem } from '../controls/index.js';
 import { clampUnit } from '../controls/controlMath.js';
 import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
 import NightVisionControl from './NightVisionControl.jsx';
+import HornControl from './HornControl.jsx';
 
 const SOURCE = 'mobile-joystick';
 const JOYSTICK_RADIUS = 80;
@@ -135,7 +136,7 @@ function MobileJoystickPanel({ layout }) {
   const {
     state: { roverId, camera },
     pipeline,
-    actions: { setDriveVector, registerInputState, setServoAngle, setNightVision },
+    actions: { setDriveVector, registerInputState, setServoAngle, setNightVision, startHorn, stopHorn },
   } = useControlSystem();
   const driveDockState = useDriveDockState(roverId);
   const dockedNotDriving = driveDockState.docked && !driveDockState.driving;
@@ -144,6 +145,7 @@ function MobileJoystickPanel({ layout }) {
   const cameraEnabled = Boolean(roverId && camera?.enabled && cameraConfig);
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
   const nightVisionState = pipeline?.nightVisionState;
+  const hornAvailable = Boolean(roverId && pipeline?.horn);
   const cameraMin = typeof cameraConfig?.minAngle === 'number' ? cameraConfig.minAngle : -45;
   const cameraMax = typeof cameraConfig?.maxAngle === 'number' ? cameraConfig.maxAngle : 45;
   const cameraValue =
@@ -223,6 +225,9 @@ function MobileJoystickPanel({ layout }) {
               onToggle={handleNightVisionToggle}
             />
           )}
+          {hornAvailable && (
+            <HornControl disabled={disabled} onStart={startHorn} onStop={stopHorn} />
+          )}
           {cameraEnabled && (
             <div className="bg-zinc-950 p-0.5 text-xs">
               <div className="flex items-center justify-between text-[0.75rem] text-slate-400">

webui/src/components/SettingsPanel.jsx

@@ -8,6 +8,7 @@ import OvercurrentLimiterPanel from './OvercurrentLimiterPanel.jsx';
 import Tabs, { Tab, TabList, TabPanel, TabPanels } from './Tabs.jsx';
 import SessionSnapshot from './SessionSnapshot.jsx';
 import SocketLogPanel from './SocketLogPanel.jsx';
+import HornSettings from './HornSettings.jsx';
 import { useHudMapSetting } from '../hooks/useHudMapSetting.js';
 import { useSettingsNamespace } from '../settings/index.js';
 import { useSocket } from '../context/SocketContext.jsx';
@@ -67,6 +68,7 @@ export default function SettingsPanel() {
         <TabPanel id="keybindings">
           <div className="space-y-0.5">
             <KeymapSettings />
+            <HornSettings />
           </div>
         </TabPanel>
         <TabPanel id="controller">