feat(chat): hold Space in the empty composer for Claude Code's voice mode

changelog.d/chat-hold-space-claude-voice.md

@@ -0,0 +1,5 @@
+### Added
+- Settings → Voice → Hold Space for Claude Code voice: in a Claude Code pane's empty chat composer,
+  holding Space starts Claude Code's own push-to-talk voice mode, as it does in the terminal, and
+  Enter then submits the transcript from Claude Code's input. A tap still types a space. Off by
+  default; Claude Code listens on the server PC's microphone.

src/components/Composer.tsx

@@ -66,6 +66,7 @@ import { useT } from "../lib/i18n.ts";
 import { offersRetry, userFailure, type UserFailure } from "../lib/userError.ts";
 import { AttachmentTooLargeError } from "../lib/api.ts";
 import { modalOpen } from "../lib/focus.ts";
+import { spaceHoldDown, spaceHoldUp, type SpaceHold } from "../lib/spaceHold.ts";
 
 export interface ComposerProps {
   connected: boolean;
@@ -108,6 +109,9 @@ export interface ComposerProps {
   cwd?: string | null;
   /** the pane's branch, beside the folder in that strip; nothing is drawn for it while absent */
   branch?: string | null;
+  /** writes raw keys to the pane (Settings → Voice → Hold Space for Claude Code voice): a Space held in the empty
+   *  box goes there as the terminal's own key repeats, and Claude Code's push-to-talk starts. None: Space types */
+  onPaneInput?: (text: string) => boolean;
   /** the workspace is a linked worktree of this repository: the strip names the repository in the folder's
    * place (the checkout folder is the branch again, with dashes) and says it is a worktree; null: not one */
   worktreeRepo?: string | null;
@@ -256,6 +260,7 @@ export function Composer({
   onSend,
   onAbort,
   onUploadImage,
+  onPaneInput,
 }: ComposerProps) {
   const t = useT();
   const activeRef = useRef(active);
@@ -338,8 +343,15 @@ export function Composer({
   // the agent's suggestion stands in the empty box as it does in its own input, until anything is typed
   const offered = connected && answerHint === null && suggestion !== null ? suggestion : null;
   const offlineSentence = t(connectedBefore ? "Reconnecting…" : "Connecting…");
+  /** Space pressed in the empty box with onPaneInput: "pending" until a repeat (a hold) or the release (a tap) tells which */
+  const spaceHold = useRef<SpaceHold>("idle");
+  /** a hold put Claude Code's transcript into its own input line: Enter in the empty box submits it there */
+  const [voiceInPane, setVoiceInPane] = useState(false);
+  // a message sent meanwhile went through Claude's input, the transcript with it or refused over it
+  useEffect(() => { if (sending) setVoiceInPane(false); }, [sending]);
   const placeholder = !connected
     ? offlineSentence
+    : voiceInPane ? t("Enter sends the transcript in {agent}'s input", { agent: agentLabel })
     : answerHint ?? offered ?? t("Message {agent}…", { agent: agentLabel });
 
   // A cancelled send the agent put back in its input box fills an empty box again — without
@@ -923,6 +935,14 @@ export function Composer({
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
       // an IME keeps its keys; WebKit can send the committing Enter after compositionend, as key code 229
       if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+      // a Space held in the empty box goes to Claude Code as its key repeats (lib/spaceHold.ts)
+      if (onPaneInput && event.key === " " && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey && textRef.current === "") {
+        event.preventDefault();
+        const next = spaceHoldDown(spaceHold.current, event.repeat);
+        spaceHold.current = next.state;
+        if (next.send > 0 && onPaneInput(" ".repeat(next.send))) setVoiceInPane(true);
+        return;
+      }
       if (menuOpen && trigger) {
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
           event.preventDefault();
@@ -967,11 +987,24 @@ export function Composer({
         : (event.metaKey || event.ctrlKey) && !event.shiftKey;
       if (!shouldSend) return;
       event.preventDefault();
+      if (voiceInPane && onPaneInput && textRef.current.trim() === "" && attachmentsRef.current.length === 0) {
+        if (onPaneInput("\r")) setVoiceInPane(false);
+        return;
+      }
       send();
     },
-    [agentStatus, choices, connected, menuDismissed, menuOpen, offered, onAbort, selectCompletion, selectedIndex, send, setTextAndCaret, settings.enterSends, trigger],
+    [agentStatus, choices, connected, menuDismissed, menuOpen, offered, onAbort, onPaneInput, selectCompletion, selectedIndex, send, setTextAndCaret, settings.enterSends, trigger, voiceInPane],
   );
 
+  const onKeyUp = useCallback((event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === " " && spaceHold.current !== "idle") {
+      const { state, tap } = spaceHoldUp(spaceHold.current);
+      spaceHold.current = state;
+      if (tap && textRef.current === "") { setTextAndCaret(" ", 1); return; }
+    }
+    setCaret(event.currentTarget.selectionStart);
+  }, [setTextAndCaret]);
+
   const onPaste = useCallback(
     (event: ClipboardEvent<HTMLTextAreaElement>) => {
       const box = event.currentTarget;
@@ -1292,7 +1325,9 @@ export function Composer({
             setCaret(event.currentTarget.selectionStart);
             setMenuDismissed(false);
           }}
-          onKeyUp={(event) => setCaret(event.currentTarget.selectionStart)}
+          onKeyUp={onKeyUp}
+          // a release that lands elsewhere must not leave the next one here waiting as a tap
+          onBlur={() => { spaceHold.current = "idle"; }}
           onChange={(event) => {
             setText(event.target.value);
             setCaret(event.target.selectionStart);

src/components/PaneTerminal.tsx

@@ -2914,6 +2914,11 @@ export function PaneTerminal({
   // a turn waiting on an approval (blocked) is still the same turn
   useEffect(() => { if (agentStatus !== "working" && agentStatus !== "blocked") hermesStopSentRef.current = false; }, [agentStatus]);
   useEffect(() => { hermesStopSentRef.current = false; hermesCtrlCAtRef.current = null; }, [paneId, agent]);
+  // Settings → Voice: a Space held in the chat's empty box reaches Claude Code as the terminal's does
+  const paneVoiceInput = useCallback((text: string): boolean => {
+    const socket = socketRef.current;
+    return paneId !== null && socket !== null && socket.connected && socket.sendInput(paneId, text);
+  }, [paneId]);
   const abortTurn = useCallback(() => {
     const term = termRef.current;
     const socket = socketRef.current;
@@ -3638,6 +3643,7 @@ export function PaneTerminal({
           onSend={composerSend}
           onAbort={abortTurn}
           onUploadImage={uploadImage}
+          onPaneInput={settings.holdSpaceVoice && agent === "claude" ? paneVoiceInput : undefined}
         />
       )}
       {/* In the terminal lens the input line and the masked input float over the grid's last rows

src/components/SettingsDialog.tsx

@@ -573,6 +573,9 @@ function VoicePage() {
             <DictationLanguageSelect />
           </SettingsRow>
         )}
+        <SettingsRow label={t("Hold Space for Claude Code voice")} description={t("In the chat's empty message box, holding Space starts Claude Code's own voice mode, as in the terminal; a tap types a space. Claude Code listens on the server PC's microphone.")}>
+          <Toggle label={t("Hold Space for Claude Code voice")} checked={settings.holdSpaceVoice} onChange={(holdSpaceVoice) => update({ holdSpaceVoice })} />
+        </SettingsRow>
       </SettingsGroup>
 
       {settings.voiceInput !== "off" && (

src/lib/i18n.ja.ts

@@ -904,6 +904,9 @@ export const JA: Record<string, string> = {
   "This browser cannot record audio": "このブラウザーでは音声を録音できません",
   "Tidy dictated text in chat": "チャットの音声入力テキストを整える",
   "Tidy dictated text in the terminal": "ターミナルの音声入力テキストを整える",
+  "Hold Space for Claude Code voice": "Space長押しでClaude Codeの音声入力",
+  "In the chat's empty message box, holding Space starts Claude Code's own voice mode, as in the terminal; a tap types a space. Claude Code listens on the server PC's microphone.": "チャットの空のメッセージ欄でSpaceを長押しすると、ターミナルと同じようにClaude Codeの音声モードが始まります。短く押すとスペースを入力します。Claude CodeはサーバーPCのマイクで聞き取ります。",
+  "Enter sends the transcript in {agent}'s input": "Enterで{agent}の入力欄の文字起こしを送信します",
   "Transcribing…": "文字起こし中…",
   "Transcription failed": "文字起こしに失敗しました",
   "Voice input": "音声入力",

src/lib/i18n.ko.ts

@@ -902,6 +902,9 @@ export const KO: Record<string, string> = {
   "This browser cannot record audio": "이 브라우저에서는 오디오를 녹음할 수 없습니다",
   "Tidy dictated text in chat": "채팅 받아쓰기 텍스트 다듬기",
   "Tidy dictated text in the terminal": "터미널 받아쓰기 텍스트 다듬기",
+  "Hold Space for Claude Code voice": "Space를 길게 눌러 Claude Code 음성 입력",
+  "In the chat's empty message box, holding Space starts Claude Code's own voice mode, as in the terminal; a tap types a space. Claude Code listens on the server PC's microphone.": "채팅의 빈 메시지 상자에서 Space를 길게 누르면 터미널처럼 Claude Code의 음성 모드가 시작됩니다. 짧게 누르면 공백을 입력합니다. Claude Code는 서버 PC의 마이크로 듣습니다.",
+  "Enter sends the transcript in {agent}'s input": "Enter를 누르면 {agent} 입력란의 받아쓴 텍스트를 보냅니다",
   "Transcribing…": "음성 변환 중…",
   "Transcription failed": "음성 변환에 실패했습니다",
   "Voice input": "음성 입력",

src/lib/i18n.zh.ts

@@ -906,6 +906,9 @@ export const ZH: Record<string, string> = {
   "This browser cannot record audio": "此浏览器无法录制音频",
   "Tidy dictated text in chat": "整理聊天中的听写文本",
   "Tidy dictated text in the terminal": "整理终端中的听写文本",
+  "Hold Space for Claude Code voice": "按住空格使用 Claude Code 语音",
+  "In the chat's empty message box, holding Space starts Claude Code's own voice mode, as in the terminal; a tap types a space. Claude Code listens on the server PC's microphone.": "在聊天的空消息框中按住空格，会像在终端中一样启动 Claude Code 自带的语音模式；轻按则输入空格。Claude Code 使用服务器电脑的麦克风收音。",
+  "Enter sends the transcript in {agent}'s input": "按 Enter 发送 {agent} 输入框中的转写文本",
   "Transcribing…": "正在转录…",
   "Transcription failed": "转录失败",
   "Voice input": "语音输入",

src/lib/settings.legacy-fixture.ts

@@ -9,7 +9,7 @@ import { CHAT_WIDTHS, DICTATION_LANGUAGES, DIFF_STYLES, MARKDOWN_WIDTHS, VOICE_B
   QUICK_REPLIES_MAX, QUICK_REPLY_MAX_CHARS, USAGE_KEYS_MAX, TERMINAL_FONT_MIN, TERMINAL_FONT_MAX,
   TERMINAL_WHEEL_SPEED_MIN, TERMINAL_WHEEL_SPEED_MAX, CHAT_FONT_MIN, CHAT_FONT_MAX,
   type Settings as CurrentSettings, type ChatWidth, type DictationLanguage, type VoiceButton } from "./settings.ts";
-type Settings = Omit<CurrentSettings, "darkTheme" | "lightTheme" | "fileOpen" | "webLinks" | "claudeLaunchMode" | "codexLaunchMode" | "followHerdrFocus" | "composerNewTabButton">;
+type Settings = Omit<CurrentSettings, "darkTheme" | "lightTheme" | "fileOpen" | "webLinks" | "claudeLaunchMode" | "codexLaunchMode" | "followHerdrFocus" | "composerNewTabButton" | "holdSpaceVoice">;
 type Palette = "amber" | "charcoal" | "catppuccin";
 const PALETTES: readonly Palette[] = ["amber", "charcoal", "catppuccin"];
 const STORAGE_KEY = "herdr-web-ui:settings";

src/lib/settings.ts

@@ -115,6 +115,9 @@ export interface Settings {
   chatWidth: ChatWidth;
   /** true: Enter sends in the composer, Shift+Enter breaks the line; false: Ctrl/Cmd+Enter sends */
   enterSends: boolean;
+  /** true: holding Space in a Claude Code pane's empty composer sends the key's repeats to the pane, which starts
+   *  Claude Code's own push-to-talk voice mode; a tap still types a space */
+  holdSpaceVoice: boolean;
   /** true: a message sent while the agent works goes by itself when the turn ends; false: it waits for Send now */
   autoSendQueued: boolean;
   /** a New tab with an agent… button in the chat's composer, in a mouse-driven window; off until chosen, so the
@@ -183,12 +186,12 @@ export type DiffStyle = (typeof DIFF_STYLES)[number];
 
 /** Raw custom text, key combinations and account keys are never copied. Requiring every other
  * Settings field in the projection makes a new field require an explicit collection decision.
- * fileOpen, webLinks, the launch modes, followHerdrFocus and composerNewTabButton are not collected: the
+ * fileOpen, webLinks, the launch modes, followHerdrFocus, composerNewTabButton and holdSpaceVoice are not collected: the
  * telemetry schema (shared/telemetry.ts) does not carry them. */
 type TelemetrySourceSettings = Omit<Settings,
   "keyBarExtras" | "keyBarItems" | "shortcutOverrides" | "terminalFontFamily" | "chatFontFamily"
   | "quickReplies" | "usageOrder" | "usageHidden" | "fileOpen" | "webLinks" | "claudeLaunchMode" | "codexLaunchMode"
-  | "followHerdrFocus" | "composerNewTabButton">;
+  | "followHerdrFocus" | "composerNewTabButton" | "holdSpaceVoice">;
 
 /** Compare structured custom settings by content against this app's built-in defaults. */
 function differsFromDefault(value: unknown, defaultValue: unknown): boolean {
@@ -268,6 +271,8 @@ export const SETTING_SCOPE = {
   // a desk that follows herdr's focus must not move a phone open on another pane
   followHerdrFocus: "device",
   chatFontSize: "device", chatFontFamily: "device", uiFontSize: "device", chatWidth: "device", enterSends: "device",
+  // Claude Code records from the PC's own microphone: only a browser on that PC has a use for it
+  holdSpaceVoice: "device",
   // a desk's composer button: a phone never shows it
   composerNewTabButton: "device",
   keepScreenOn: "device", alertsOn: "device", alertInput: "device", alertDone: "device", alertInApp: "device", alertSound: "device",
@@ -311,6 +316,7 @@ export const DEFAULT_SETTINGS: Settings = {
   uiFontSize: null,
   chatWidth: "default",
   enterSends: true,
+  holdSpaceVoice: false,
   autoSendQueued: true,
   composerNewTabButton: false,
   suggestionChip: false,
@@ -486,6 +492,7 @@ export function sanitizeSettings(raw: unknown): Settings {
     chatFontFamily: sanitizeFontFamily(record["chatFontFamily"]),
     chatWidth: CHAT_WIDTHS.includes(record["chatWidth"] as ChatWidth) ? record["chatWidth"] as ChatWidth : DEFAULT_SETTINGS.chatWidth,
     enterSends: typeof record["enterSends"] === "boolean" ? record["enterSends"] : DEFAULT_SETTINGS.enterSends,
+    holdSpaceVoice: typeof record["holdSpaceVoice"] === "boolean" ? record["holdSpaceVoice"] : DEFAULT_SETTINGS.holdSpaceVoice,
     autoSendQueued: typeof record["autoSendQueued"] === "boolean" ? record["autoSendQueued"] : DEFAULT_SETTINGS.autoSendQueued,
     composerNewTabButton: typeof record["composerNewTabButton"] === "boolean" ? record["composerNewTabButton"] : DEFAULT_SETTINGS.composerNewTabButton,
     suggestionChip: typeof record["suggestionChip"] === "boolean" ? record["suggestionChip"] : DEFAULT_SETTINGS.suggestionChip,

src/lib/spaceHold.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { spaceHoldDown, spaceHoldUp, type SpaceHold } from "./spaceHold.ts";
+
+function run(events: Array<"down" | "repeat" | "up">): { sent: number; taps: number; state: SpaceHold } {
+  let state: SpaceHold = "idle";
+  let sent = 0;
+  let taps = 0;
+  for (const event of events) {
+    if (event === "up") {
+      const next = spaceHoldUp(state);
+      state = next.state;
+      if (next.tap) taps += 1;
+    } else {
+      const next = spaceHoldDown(state, event === "repeat");
+      state = next.state;
+      sent += next.send;
+    }
+  }
+  return { sent, taps, state };
+}
+
+describe("spaceHold", () => {
+  test("a tap sends nothing to the pane and types one space", () => {
+    expect(run(["down", "up"])).toEqual({ sent: 0, taps: 1, state: "idle" });
+  });
+
+  test("a hold sends the first press and every repeat, as a terminal does", () => {
+    expect(run(["down", "repeat", "repeat", "repeat", "up"])).toEqual({ sent: 4, taps: 0, state: "idle" });
+  });
+
+  test("a repeat with no press seen (focus came mid-hold) sends the held space too", () => {
+    expect(run(["repeat", "repeat", "up"])).toEqual({ sent: 3, taps: 0, state: "idle" });
+  });
+
+  test("two taps in a row each type a space", () => {
+    expect(run(["down", "up", "down", "up"])).toEqual({ sent: 0, taps: 2, state: "idle" });
+  });
+});

src/lib/spaceHold.ts

@@ -0,0 +1,18 @@
+/**
+ * A Space held in the chat's empty box, sent to Claude Code as a terminal sends it (Settings → Voice →
+ * Hold Space for Claude Code voice). A terminal has no key release: Claude Code tells a hold by the
+ * key's repeats, and the end of them is the release. So the first press waits ("pending"); a repeat
+ * sends it and itself, and every later repeat itself; a release with no repeat was a tap.
+ */
+export type SpaceHold = "idle" | "pending" | "held";
+
+/** A Space keydown in the empty box: the next state and how many spaces go to the pane. */
+export function spaceHoldDown(state: SpaceHold, repeat: boolean): { state: SpaceHold; send: number } {
+  if (!repeat) return { state: "pending", send: 0 };
+  return { state: "held", send: state === "held" ? 1 : 2 };
+}
+
+/** A Space release: idle again, and a tap when no repeat came, which types a space in the box. */
+export function spaceHoldUp(state: SpaceHold): { state: "idle"; tap: boolean } {
+  return { state: "idle", tap: state === "pending" };
+}