cockpit: 1..N digit hotkeys + cycle for the stream switcher

Bare digits 1..N select the Nth video stream and backtick cycles, at the cockpit
level, but only on a multi-stream node (the key otherwise passes through). The
gamepad D-pad left/right cycles too. Digits 1..9 are reserved from skill binding
so the switcher never collides with a bound slot.

Author: ajaym94

src/components/fly/CockpitView.tsx

@@ -64,6 +64,7 @@ import { useUiStore } from "@/stores/ui-store";
 import { useInputStore } from "@/stores/input-store";
 import { useSkillConfirmStore } from "@/stores/skill-confirm-store";
 import { useFlyModeStore } from "@/stores/fly-mode-store";
+import { useVideoStreamsStore } from "@/stores/video-streams-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import {
   DEFAULT_LOADOUT_ID,
@@ -329,6 +330,76 @@ export function CockpitView({ droneId }: CockpitViewProps) {
     return () => unsubscribe();
   }, [flyEnabled, toggleQuick]);
 
+  // Stream switcher hotkeys: bare digits 1..N select the Nth video stream and
+  // backtick cycles — but only on a multi-stream node (otherwise the key passes
+  // straight through). Handled at the cockpit level like the other reserved
+  // keys; digits are reserved from skill binding (chord.ts) so they never
+  // collide with a bound slot, and this works whether or not the skill layer is
+  // on (the switcher is a video feature).
+  useEffect(() => {
+    if (!droneId) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
+      const target = e.target;
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement ||
+        (target instanceof HTMLElement && target.isContentEditable)
+      ) {
+        return;
+      }
+      if (useSkillConfirmStore.getState().pending !== null) return;
+      if (editing || paletteOpen) return;
+      if (useFlyQuickSettingsStore.getState().isOpen) return;
+      const streams =
+        useVideoStreamsStore.getState().streamsByDrone[droneId] ?? [];
+      if (streams.length <= 1) return; // pass through on a single-stream node
+      const digit = /^(?:Digit|Numpad)([1-9])$/.exec(e.code);
+      if (digit) {
+        const index = Number(digit[1]);
+        if (index > streams.length) return; // no such stream → pass through
+        e.preventDefault();
+        useVideoStreamsStore.getState().selectStream(droneId, index);
+        return;
+      }
+      if (e.code === "Backquote") {
+        e.preventDefault();
+        useVideoStreamsStore.getState().cycleStream(droneId, 1);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [droneId, editing, paletteOpen]);
+
+  // Gamepad D-pad left/right cycles the video stream on a multi-stream node.
+  useEffect(() => {
+    if (!droneId) return;
+    const DPAD_LEFT = 14;
+    const DPAD_RIGHT = 15;
+    let prevL = useInputStore.getState().buttons[DPAD_LEFT] ?? false;
+    let prevR = useInputStore.getState().buttons[DPAD_RIGHT] ?? false;
+    const unsubscribe = useInputStore.subscribe((state) => {
+      const nowL = state.buttons[DPAD_LEFT] ?? false;
+      const nowR = state.buttons[DPAD_RIGHT] ?? false;
+      const streams =
+        useVideoStreamsStore.getState().streamsByDrone[droneId] ?? [];
+      if (
+        streams.length > 1 &&
+        useSkillConfirmStore.getState().pending === null
+      ) {
+        if (nowR && !prevR) {
+          useVideoStreamsStore.getState().cycleStream(droneId, 1);
+        } else if (nowL && !prevL) {
+          useVideoStreamsStore.getState().cycleStream(droneId, -1);
+        }
+      }
+      prevL = nowL;
+      prevR = nowR;
+    });
+    return () => unsubscribe();
+  }, [droneId]);
+
   // Reserved gamepad exit chord (Start): leaves immersive mode so a stick-only
   // operator always has a way back to the embedded tab.
   useEffect(() => {

src/lib/skills/__tests__/chord.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+
+import { canonicalChord, isReservedChord } from "@/lib/skills/chord";
+
+describe("chord digits — the stream-switcher hotkeys", () => {
+  it("canonicalizes a bare digit row key to '1'..'9'", () => {
+    for (let d = 1; d <= 9; d++) {
+      const e = new KeyboardEvent("keydown", { code: `Digit${d}`, key: String(d) });
+      expect(canonicalChord(e)).toBe(String(d));
+    }
+  });
+
+  it("canonicalizes numpad digits the same way", () => {
+    const e = new KeyboardEvent("keydown", { code: "Numpad5", key: "5" });
+    expect(canonicalChord(e)).toBe("5");
+  });
+
+  it("reserves bare digits 1..9 so no skill can bind them", () => {
+    for (let d = 1; d <= 9; d++) {
+      expect(isReservedChord(String(d))).toBe(true);
+    }
+  });
+
+  it("leaves modified digits and 0 bindable (only bare 1..9 are the switcher)", () => {
+    expect(isReservedChord("ctrl+1")).toBe(false);
+    expect(isReservedChord("shift+2")).toBe(false);
+    expect(isReservedChord("0")).toBe(false);
+  });
+});

src/lib/skills/chord.ts

@@ -56,6 +56,8 @@ export function canonicalChord(e: KeyboardEvent): string | null {
  *   - the FC param shortcuts (ctrl+s save, ctrl+shift+s flash, ctrl+r refresh;
  *     their meta equivalents are reserved as well since those handlers treat
  *     meta as ctrl)
+ *   - the bare digits 1..9, owned globally by the cockpit stream switcher (a
+ *     digit selects the Nth video stream), so a skill can never be bound to one
  */
 const RESERVED_CHORDS: ReadonlySet<string> = new Set([
   "escape",
@@ -67,6 +69,15 @@ const RESERVED_CHORDS: ReadonlySet<string> = new Set([
   "meta+shift+s",
   "ctrl+r",
   "meta+r",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
 ]);
 
 /** True when a chord is globally reserved and must not be bound to a slot. */