Merge PR #28: feat: add channel history buffer system

Resolved conflicts in PreferencesStore.tsx (added SetKeyboard action
alongside existing SetHaptics) and preferences.tsx (added KeyboardTab
alongside existing HapticsTab).

Author: ctoth

src/App.tsx

@@ -46,6 +46,7 @@ import {
   GMCPRedirect, // Added
   GMCPRoom, // Added
 } from "./gmcp";
+import { useChannelHistory } from "./hooks/useChannelHistory";
 import { FileTransferOffer, useClientEvent } from "./hooks/useClientEvent";
 import {
   McpAwnsPing,
@@ -61,6 +62,7 @@ function App() {
   const [showFileTransfer, setShowFileTransfer] = useState<boolean>(false);
   const [fileTransferExpanded, setFileTransferExpanded] =
     useState<boolean>(false);
+  useChannelHistory(client);
   const players = useClientEvent<"userlist">(client, "userlist", []) || [];
   const outRef = React.useRef<OutputWindow | null>(null);
   const inRef = React.useRef<HTMLTextAreaElement | null>(null);

src/PreferencesStore.tsx

@@ -31,6 +31,12 @@ export type EditorPreferences = {
   accessibilityMode: boolean;
 };
 
+export type NavigationKeyScheme = "jkli" | "wasd" | "dvorak-rh" | "dvorak-lh";
+
+export type KeyboardPreferences = {
+  navigationKeyScheme: NavigationKeyScheme;
+};
+
 export type MidiPreferences = {
   enabled: boolean;
   lastInputDeviceId?: string;
@@ -49,6 +55,7 @@ export type PrefState = {
   sound: SoundPreferences;
   channels?: { [channelId: string]: ChannelPreferences };
   editor: EditorPreferences;
+  keyboard: KeyboardPreferences;
   midi: MidiPreferences;
   haptics: HapticsPreferences;
 };
@@ -60,6 +67,7 @@ export enum PrefActionType {
   SetChannels = "SET_CHANNELS",
   SetEditorAutocompleteEnabled = "SET_EDITOR_AUTOCOMPLETE_ENABLED",
   SetEditorAccessibilityMode = "SET_EDITOR_ACCESSIBILITY_MODE",
+  SetKeyboard = "SET_KEYBOARD",
   SetMidi = "SET_MIDI",
   SetHaptics = "SET_HAPTICS",
 }
@@ -71,6 +79,7 @@ export type PrefAction =
   | { type: PrefActionType.SetChannels; data: { [channelId: string]: ChannelPreferences } }
   | { type: PrefActionType.SetEditorAutocompleteEnabled; data: boolean }
   | { type: PrefActionType.SetEditorAccessibilityMode; data: boolean }
+  | { type: PrefActionType.SetKeyboard; data: KeyboardPreferences }
   | { type: PrefActionType.SetMidi; data: MidiPreferences }
   | { type: PrefActionType.SetHaptics; data: HapticsPreferences };
 
@@ -121,6 +130,9 @@ class PreferencesStore {
         autocompleteEnabled: true,
         accessibilityMode: true,
       },
+      keyboard: {
+        navigationKeyScheme: "jkli",
+      },
       midi: {
         enabled: false,
       },
@@ -144,6 +156,7 @@ class PreferencesStore {
       sound: { ...initial.sound, ...stored.sound },
       channels: stored.channels ? { ...initial.channels, ...stored.channels } : initial.channels,
       editor: { ...initial.editor, ...stored.editor },
+      keyboard: { ...initial.keyboard, ...stored.keyboard },
       midi: { ...initial.midi, ...stored.midi },
       haptics: { ...initial.haptics, ...cleanHaptics },
     };
@@ -163,6 +176,8 @@ class PreferencesStore {
         return { ...state, editor: { ...state.editor, autocompleteEnabled: action.data } };
       case PrefActionType.SetEditorAccessibilityMode:
         return { ...state, editor: { ...state.editor, accessibilityMode: action.data } };
+      case PrefActionType.SetKeyboard:
+        return { ...state, keyboard: action.data };
       case PrefActionType.SetMidi:
         return { ...state, midi: action.data };
       case PrefActionType.SetHaptics:

src/components/input.tsx

@@ -202,6 +202,14 @@ const CommandInput = ({ onSend, inputRef, client }: Props) => {
     } else if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
+    } else if (e.altKey && (
+      e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight" ||
+      "ijklwasdchtnoe,".includes(e.key.toLowerCase()) ||
+      "IJKLWASDCHTNOE".split("").some(c => e.code === `Key${c}`) || e.code === "Comma"
+    )) {
+      e.preventDefault();
+    } else if (e.altKey && e.code === "Space") {
+      e.preventDefault();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       const prevCommand = commandHistory.navigateUp(currentInputText);

src/components/preferences.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { PrefActionType } from "../PreferencesStore";
+import { PrefActionType, NavigationKeyScheme } from "../PreferencesStore";
 import { usePreferences } from "../hooks/usePreferences";
 import { useVoices } from "../hooks/useVoices";
 import { midiService, MidiDevice } from "../MidiService";
@@ -170,7 +170,7 @@ const PreviewButton: React.FC = () => {
       if (!isMounted.current) return; // Don't proceed if unmounted
 
       const utterance = new SpeechSynthesisUtterance("This is a preview of the selected voice settings.");
-      
+
       // Find the selected voice
       const voices = speechSynthesis.getVoices();
       console.log("Available voices:", voices.map(v => v.name));
@@ -354,7 +354,7 @@ const MidiTab: React.FC = () => {
       </label>
       <br />
       <br />
-      
+
       {state.midi.enabled && (
         <p style={{ color: "#666", fontSize: "0.9em" }}>
           Device selection and management is available in the MIDI tab when connected to a server.
@@ -430,12 +430,42 @@ const HapticsTab: React.FC = () => {
   );
 };
 
+const KeyboardTab: React.FC = () => {
+  const [state, dispatch] = usePreferences();
+
+  return (
+    <div>
+      <label>
+        Buffer Navigation Keys:
+        <select
+          value={state.keyboard.navigationKeyScheme}
+          onChange={(e) =>
+            dispatch({
+              type: PrefActionType.SetKeyboard,
+              data: { navigationKeyScheme: e.target.value as NavigationKeyScheme },
+            })
+          }
+        >
+          <option value="jkli">JKLI (QWERTY right-hand)</option>
+          <option value="wasd">WASD (QWERTY left-hand)</option>
+          <option value="dvorak-rh">HTNC (Dvorak right-hand)</option>
+          <option value="dvorak-lh">,OAE (Dvorak left-hand)</option>
+        </select>
+      </label>
+      <p style={{ color: "#666", fontSize: "0.9em", marginTop: "0.5em" }}>
+        Arrow keys always work in addition to the selected scheme.
+      </p>
+    </div>
+  );
+};
+
 const Preferences: React.FC = () => {
   const tabs = [
     { label: "General", content: <GeneralTab /> },
     { label: "Speech", content: <SpeechTab /> },
     { label: "Sounds", content: <SoundsTab /> },
     { label: "Editor", content: <EditorTab /> },
+    { label: "Keyboard", content: <KeyboardTab /> },
     { label: "MIDI", content: <MidiTab /> },
     { label: "Haptics", content: <HapticsTab /> },
   ];