@nextclaw/ui 0.24.3 → 0.25.0

package/src/features/chat/features/conversation/components/__tests__/session-conversation-input.streaming.test.tsx

@@ -31,6 +31,8 @@ import { useSessionConversationInputState } from '@/features/chat/features/conve
 import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 import { useChatComposerDraftStore } from '@/features/chat/stores/chat-composer-draft.store';
 import { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
+import { verifyVoiceDraftLifecycle } from './session-voice-input.test-utils';
+import { ChatVoiceInputManager } from '@/features/chat/managers/chat-voice-input.manager';
 import type { ThinkingLevel } from '@/shared/lib/api';
 
 const uploadNcpAssetsMock = vi.hoisted(() => vi.fn());
@@ -221,6 +223,7 @@ type StreamingInputControl = {
 
 const chatComposerIntentManager = new ChatComposerIntentManager();
 const presenter = {
+  chatVoiceInputManager: new ChatVoiceInputManager(),
   chatComposerIntentManager,
   chatThreadManager: {
     openSideChatDraft: vi.fn(),
@@ -270,6 +273,13 @@ function createStreamingInputSnapshot(
   };
 }
 
+it('dictation uses the latest draft and never sends; cancel discards late results', async () => {
+  await verifyVoiceDraftLifecycle((voiceManager, send) => renderInput(
+    <StreamingSessionConversationInputHarness voiceManager={voiceManager} controlRef={{ current: null }}
+      initialText='Original' controllerOverride={{ ...controller, send, sendDisabled: false }} />,
+  ));
+});
+
 function setImeDomText(textbox: HTMLElement, text: string): HTMLParagraphElement {
   const paragraph = textbox.querySelector('p');
   if (!paragraph) {
@@ -307,12 +317,14 @@ async function insertText(textbox: HTMLElement, text: string): Promise<void> {
 }
 
 function StreamingSessionConversationInputHarness({
+  voiceManager = presenter.chatVoiceInputManager,
   controllerOverride = controller,
   controlRef,
   initialText = '',
   sendError = null,
 }: {
   controllerOverride?: SessionConversationInputController;
+  voiceManager?: ChatVoiceInputManager;
   controlRef: MutableRefObject<StreamingInputControl | null>;
   initialText?: string;
   sendError?: string | null;
@@ -389,7 +401,7 @@ function StreamingSessionConversationInputHarness({
 
   return (
     <I18nProvider>
-      <ChatPresenterProvider presenter={presenter}>
+      <ChatPresenterProvider presenter={{ ...presenter, chatVoiceInputManager: voiceManager }}>
         <div data-testid="stream-chunk">{streamChunk}</div>
         <SessionConversationInput
           contextWindow={null}

package/src/features/chat/features/conversation/components/__tests__/session-voice-input.test-utils.ts

@@ -0,0 +1,52 @@
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { expect, vi } from 'vitest';
+import { ChatVoiceInputManager, type SpeechRecognitionLike } from '@/features/chat/managers/chat-voice-input.manager';
+
+/** Assembled voice/draft lifecycle check, shared with the real streaming input harness. */
+export async function verifyVoiceDraftLifecycle(
+  renderHarness: (manager: ChatVoiceInputManager, send: () => void) => { unmount: () => void },
+) {
+  const recognition: SpeechRecognitionLike = {
+    lang: '', continuous: false, interimResults: false,
+    start: vi.fn(), stop: vi.fn(), abort: vi.fn(),
+    onstart: null, onend: null, onresult: null, onerror: null,
+  };
+  const manager = new ChatVoiceInputManager(() => recognition);
+  const send = vi.fn();
+  const rendered = renderHarness(manager, send);
+  try {
+    fireEvent.click(screen.getByRole('button', { name: /^(语音输入|Voice input)$/ }));
+    act(() => { recognition.onstart?.(); });
+    const textbox = screen.getByRole('textbox');
+    const before = textbox.textContent;
+    act(() => { recognition.onresult?.({ results: [{ isFinal: false, 0: { transcript: 'speaking' } }] }); });
+    await waitFor(() => expect(textbox.textContent).toContain('speaking'));
+    expect(textbox.querySelector('[style*="underline"]')?.textContent).toBe('speaking');
+    act(() => { recognition.onresult?.({ results: [{ isFinal: false, 0: { transcript: 'speak' } }] }); });
+    await waitFor(() => expect(textbox.textContent).not.toContain('speaking'));
+    act(() => { recognition.onresult?.({ results: [{ isFinal: true, 0: { transcript: 'spoken' } }] }); });
+    fireEvent.click(screen.getAllByRole('button', { name: /结束录音|Finish recording/ })[0]);
+    act(() => { recognition.onend?.(); });
+    await waitFor(() => expect(textbox.textContent).toContain('spoken'));
+    expect(textbox.textContent).toContain(before);
+    expect(textbox.querySelector('[style*="underline"]')).toBeNull();
+    expect(send).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: /^(语音输入|Voice input)$/ }));
+    const lateResult = recognition.onresult;
+    const lateEnd = recognition.onend;
+    fireEvent.click(screen.getAllByRole('button', { name: /^(取消|Cancel)$/ })[0]);
+    act(() => {
+      lateResult?.({ results: [{ isFinal: true, 0: { transcript: 'discard' } }] }); lateEnd?.();
+    });
+    expect(textbox.textContent).not.toContain('discard');
+    fireEvent.click(screen.getByRole('button', { name: /^(语音输入|Voice input)$/ }));
+    act(() => { recognition.onstart?.(); });
+    fireEvent.click(screen.getByRole('button', { name: /^(语音快捷键|Voice shortcut)$/ }));
+    act(() => { recognition.onerror?.({ error: 'no-speech' }); });
+    await waitFor(() => expect(screen.getByRole('button', { name: /绑定按键|Bind a key/ })).toBeTruthy());
+    expect(screen.queryByRole('alert')).toBeNull();
+    expect(screen.queryByRole('button', { name: /^(重试|Retry)$/ })).toBeNull();
+  } finally {
+    rendered.unmount();
+  }
+}

package/src/features/chat/features/conversation/components/chat-voice-input-panel.tsx

@@ -0,0 +1,70 @@
+import { Mic, Square, X, LoaderCircle, Settings } from 'lucide-react';
+import { Button } from '@/shared/components/ui/button';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { t } from '@/shared/lib/i18n';
+import type { ChatVoiceInputManager, VoiceError, VoiceSnapshot } from '@/features/chat/managers/chat-voice-input.manager';
+import { ChatVoiceShortcutControl } from './chat-voice-shortcut-control';
+
+const ERROR_KEYS: Record<VoiceError, string> = {
+  unsupported: 'chatInputVoiceUnsupported', permission: 'chatInputVoicePermissionDenied',
+  network: 'chatInputVoiceNetwork', 'audio-capture': 'chatInputVoiceDevice',
+  'no-speech': 'chatInputVoiceNoSpeech', interrupted: 'chatInputVoiceInterrupted',
+  timeout: 'chatInputVoiceTimeout', failed: 'chatInputVoiceFailed',
+};
+
+export function ChatVoiceInputPanel({ manager, snapshot, onStart, desktop }: {
+  manager: ChatVoiceInputManager;
+  snapshot: VoiceSnapshot;
+  onStart: () => void;
+  desktop: boolean;
+}) {
+  const { phase, error, seconds } = snapshot;
+  if (phase === 'ready') return desktop ? <VoiceShortcutPanel onClose={manager.cancel} /> : null;
+  const busy = phase === 'starting' || phase === 'stopping';
+  const status = {
+    idle: 'chatInputVoice', ready: 'chatInputVoiceShortcut', starting: 'chatInputVoiceStarting',
+    recording: 'chatInputVoiceRecording', stopping: 'chatInputVoiceFinishing', error: 'chatInputVoiceFailed',
+  }[phase];
+  return (
+    <div role='region' aria-label={t('chatInputVoice')}
+      className={'max-h-[var(--radix-popover-content-available-height,24rem)] max-w-full overflow-y-auto border border-border bg-popover text-popover-foreground shadow-lg ' +
+        (error ? 'w-80 rounded-xl p-3' : 'rounded-full px-3 py-1.5')}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
+          event.stopPropagation(); manager.cancel();
+        }
+      }}>
+      <div className='flex items-center gap-2'>
+        {busy ? <LoaderCircle className='h-4 w-4 shrink-0 motion-safe:animate-spin text-muted-foreground' />
+          : <Mic className={'h-4 w-4 shrink-0 ' + (phase === 'recording' ? 'text-destructive' : '')} />}
+        <span role='status' className='min-w-0 flex-1 text-xs font-medium'>{t(status)}</span>
+        {phase === 'recording' ? <span className='text-xs tabular-nums text-muted-foreground'>{seconds}s</span> : null}
+        {phase === 'recording' ? <IconActionButton icon={<Square className='h-3 w-3' />}
+          label={t('chatInputVoiceFinish')} onClick={manager.finish} /> : null}
+        <IconActionButton icon={<X className='h-4 w-4' />} label={t('chatInputVoiceCancel')} onClick={manager.cancel} />
+        {desktop ? <IconActionButton icon={<Settings className='h-4 w-4' />}
+          label={t('chatInputVoiceShortcut')} disabled={busy} onClick={manager.openSettings} /> : null}
+      </div>
+      {error ? <>
+        <p role='alert' className='mt-2 text-xs leading-5 text-destructive'>{t(ERROR_KEYS[error])}</p>
+        <p className='mt-1 text-xs text-muted-foreground'>{t('chatInputVoiceReviewHint')}</p>
+        <Button className='mt-2' size='sm' disabled={error === 'unsupported'} onClick={onStart}>{t('chatInputVoiceRetry')}</Button>
+      </> : null}
+    </div>
+  );
+}
+
+function VoiceShortcutPanel({ onClose }: { onClose: () => void }) {
+  return <div role='region' aria-label={t('chatInputVoiceShortcut')}
+    className='max-h-[var(--radix-popover-content-available-height,24rem)] w-80 max-w-full overflow-y-auto rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg'
+    onKeyDown={(event) => {
+      if (event.key === 'Escape' && !event.nativeEvent.isComposing) { event.stopPropagation(); onClose(); }
+    }}>
+    <div className='flex items-center gap-2'>
+      <Settings className='h-4 w-4' />
+      <span className='flex-1 text-sm font-medium'>{t('chatInputVoiceShortcut')}</span>
+      <IconActionButton icon={<X className='h-4 w-4' />} label={t('chatInputVoiceCloseSettings')} onClick={onClose} />
+    </div>
+    <ChatVoiceShortcutControl />
+  </div>;
+}

package/src/features/chat/features/conversation/components/chat-voice-shortcut-control.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Button } from '@/shared/components/ui/button';
+import { t } from '@/shared/lib/i18n';
+import { isVoiceShortcut, useChatVoiceShortcutStore, voiceShortcutLabel } from '@/features/chat/stores/chat-voice-shortcut.store';
+
+export function ChatVoiceShortcutControl() {
+  const { shortcut, setShortcut } = useChatVoiceShortcutStore();
+  const [capturing, setCapturing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  return <div className='mt-3 border-t border-border/60 pt-3 text-xs text-muted-foreground'>
+    <div className='flex flex-wrap items-center gap-2'>
+      <Button variant='ghost' size='sm' aria-label={t('chatInputVoiceBind')}
+        onClick={() => { setCapturing(true); setError(null); }} onBlur={() => setCapturing(false)}
+        onKeyDown={(event) => {
+          if (!capturing || event.nativeEvent.isComposing) return;
+          if (event.key === 'Escape') { event.stopPropagation(); setCapturing(false); return; }
+          if (event.key === 'Tab') return;
+          event.preventDefault(); event.stopPropagation();
+          const value = { code: event.code, ctrl: event.ctrlKey, meta: event.metaKey, alt: event.altKey, shift: event.shiftKey };
+          if (!isVoiceShortcut(value)) { setError('chatInputVoiceBindInvalid'); return; }
+          try { setShortcut(value); setCapturing(false); setError(null); }
+          catch { setError('chatInputVoiceSaveFailed'); }
+        }}>
+        {capturing ? t('chatInputVoiceCapture') : shortcut ? voiceShortcutLabel(shortcut) : t('chatInputVoiceBind')}
+      </Button>
+      {shortcut ? <Button variant='ghost' size='sm' onClick={() => {
+        try { setShortcut(null); setError(null); } catch { setError('chatInputVoiceSaveFailed'); }
+      }}>{t('chatInputVoiceUnbind')}</Button> : null}
+    </div>
+    <p role={capturing ? 'status' : undefined} className='mt-1 leading-5'>{t(capturing ? 'chatInputVoiceCaptureHelp' : 'chatInputVoiceShortcutHelp')}</p>
+    {error ? <p role='alert' className='mt-1 text-destructive'>{t(error)}</p> : null}
+  </div>;
+}

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -277,8 +277,6 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     setPendingSessionType: inputActions.setPendingSessionType,
   });
   const isRuntimeBlocked = isNcpChatRuntimeBlocked(systemStatus);
-  const currentSessionRunning =
-    agent.isRunning || inputQuery.selectedSession?.status === "running";
   const runtimeError = agent.snapshot.error;
   const rawLastSendError = agent.hydrateError?.message
     ?? (runtimeError?.code === "run-interrupted" ? null : runtimeError?.message)
@@ -296,16 +294,8 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
           message: filteredLastSendError,
           status: systemStatus,
         });
-  const controllerAgent = useMemo(
-    () => ({
-      ...agent,
-      isRunning: currentSessionRunning,
-      isSending: agent.isSending,
-    }),
-    [agent, currentSessionRunning],
-  );
   const controller = useSessionConversationController({
-    agent: controllerAgent,
+    agent,
     inputSnapshot,
     inputQuery,
     isRuntimeBlocked,

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -12,11 +12,15 @@ import {
 } from '@nextclaw/agent-chat-ui';
 import { isRuntimeDefaultModelValue } from '@nextclaw/shared';
 
+import { Mic, Square } from 'lucide-react';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { ChatVoiceInputPanel } from './chat-voice-input-panel';
 import { useI18n } from '@/app/components/i18n-provider';
 import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import { type SessionSkillEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { useChatVoiceInput } from '@/features/chat/features/conversation/hooks/use-chat-voice-input';
 import {
   useChatInputSurfaceState,
 } from '@/features/chat/features/input/hooks/use-chat-input-surface-state';
@@ -288,6 +292,17 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   const persistSessionPreferences = useSessionConversationPreferencePersistence({ inputActions, selectedSessionKey: inputQuery.selectedSessionKey });
   const handleNodesChange = useSessionConversationComposerNodes(inputActions);
 
+  const voiceManager = presenter.chatVoiceInputManager;
+  const voiceContext = JSON.stringify([
+    inputQuery.selectedSessionKey, inputQuery.sessionTypeState.selectedSessionType,
+    contextReferenceProjectRoot, selectedModel, inputDisabled,
+  ]);
+  const beginVoiceDraft = useCallback(() => inputBarRef.current?.beginDictation(voiceManager.cancel) ?? null, [voiceManager]);
+  const voice = useChatVoiceInput(voiceManager, voiceContext, language, !isMobile && !inputDisabled, beginVoiceDraft);
+  const startVoice = () => voiceManager.start(language, voiceContext, beginVoiceDraft());
+  const sendWithVoiceCancelled = () => { voiceManager.acceptDraft(); return controller.send(); };
+  const steerWithVoiceCancelled = () => { voiceManager.acceptDraft(); return controller.sendSteering(); };
+
   useChatComposerReferenceIntent({
     inputBarRef,
     intentManager: presenter.chatComposerIntentManager,
@@ -416,9 +431,9 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     <ChatInputBar
       ref={inputBarRef}
       surface={useReadingTrack ? 'embedded' : surface}
-      topSlot={controller.queuedInputs.length > 0
-        ? <SessionQueuedInputRows controller={controller} />
-        : null}
+      topSlot={controller.queuedInputs.length > 0 ? <SessionQueuedInputRows controller={controller} /> : null}
+      floatingSlot={voice.phase !== 'idle' ? <ChatVoiceInputPanel manager={voiceManager} snapshot={voice}
+        desktop={!isMobile} onStart={startVoice} /> : null}
       composer={{
         nodes: composerNodes,
         placeholder: textareaPlaceholder,
@@ -441,6 +456,15 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
       })}
       toolbar={{
         addMenuLabel: t('chatInputAdd'),
+        leadingSlot: <>
+          <IconActionButton icon={voice.phase === 'recording' ? <Square className='h-4 w-4' /> : <Mic className='h-4 w-4' />}
+            label={t(voice.phase === 'recording' ? 'chatInputVoiceFinish' : 'chatInputVoice')}
+            size='lg'
+            disabled={inputDisabled || voice.phase === 'stopping'}
+            aria-pressed={voice.phase === 'recording'}
+            onClick={() => voice.phase === 'recording' ? voiceManager.finish()
+              : voice.phase === 'starting' ? voiceManager.cancel() : startVoice()} />
+        </>,
         selects: [],
         trailingSelects: toolbarSelects,
         accessories: [
@@ -465,8 +489,8 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
           sendIcon: controller.primaryAction,
           stopButtonLabel: t('chatStop'),
           contextWindow,
-          onSend: controller.send,
-          onAlternateSend: controller.sendSteering,
+          onSend: sendWithVoiceCancelled,
+          onAlternateSend: steerWithVoiceCancelled,
           onStop: controller.stop,
         },
       }}

package/src/features/chat/features/conversation/hooks/__tests__/use-chat-voice-input.test.tsx

@@ -0,0 +1,185 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatVoiceInputManager, type SpeechRecognitionLike } from '@/features/chat/managers/chat-voice-input.manager';
+import { useChatVoiceInput } from '@/features/chat/features/conversation/hooks/use-chat-voice-input';
+import { isVoiceShortcut, useChatVoiceShortcutStore } from '@/features/chat/stores/chat-voice-shortcut.store';
+import type { ChatComposerDictationSession } from '@nextclaw/agent-chat-ui';
+
+class Recognition implements SpeechRecognitionLike {
+  lang = '';
+  continuous = false;
+  interimResults = false;
+  start = vi.fn();
+  stop = vi.fn();
+  abort = vi.fn();
+  onstart: SpeechRecognitionLike['onstart'] = null;
+  onend: SpeechRecognitionLike['onend'] = null;
+  onerror: SpeechRecognitionLike['onerror'] = null;
+  onresult: SpeechRecognitionLike['onresult'] = null;
+  result = (...texts: string[]) => this.onresult?.({ results: texts.map((transcript) => ({ isFinal: true, 0: { transcript } })) });
+}
+let recognition: Recognition;
+let manager: ChatVoiceInputManager;
+let commit = vi.fn<(text?: string) => void>();
+let draft: ChatComposerDictationSession;
+const beginDraft = () => draft;
+beforeEach(() => {
+  vi.useFakeTimers();
+  recognition = new Recognition();
+  manager = new ChatVoiceInputManager(() => recognition);
+  commit = vi.fn<(text?: string) => void>();
+  draft = { commit, update: vi.fn(), cancel: vi.fn() };
+  useChatVoiceShortcutStore.getState().setShortcut(null);
+  vi.spyOn(document, 'hasFocus').mockReturnValue(true);
+});
+afterEach(() => {
+  manager.cancel();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe('dictation lifecycle', () => {
+  it('waits for the final transcript before opening settings without restarting recording', () => {
+    manager.start('zh', 'one', draft);
+    recognition.onstart?.();
+    recognition.result('first');
+    manager.openSettings();
+    expect(manager.getSnapshot().phase).toBe('stopping');
+    expect(commit).not.toHaveBeenCalled();
+    recognition.result('first', 'tail');
+    recognition.onend?.();
+    expect(commit).toHaveBeenCalledExactlyOnceWith('first tail');
+    expect(manager.getSnapshot().phase).toBe('ready');
+    manager.cancel();
+    expect(recognition.start).toHaveBeenCalledOnce();
+  });
+  it('still opens settings when finishing recognition fails', () => {
+    manager.start('en', 'one', draft);
+    recognition.onstart?.();
+    manager.openSettings();
+    recognition.onerror?.({ error: 'no-speech' });
+    expect(manager.getSnapshot()).toMatchObject({ phase: 'ready', error: null, text: '', interim: '' });
+  });
+  it('replaces cumulative results, waits for the final tail, and inserts once', () => {
+    manager.start('zh', 'one', draft);
+    expect(manager.getSnapshot().phase).toBe('starting');
+    recognition.onstart?.();
+    recognition.result('hello');
+    recognition.result('hello', 'world');
+    expect(commit).not.toHaveBeenCalled();
+    manager.finish();
+    expect(recognition.stop).toHaveBeenCalledOnce();
+    recognition.result('hello', 'world', 'again');
+    recognition.onend?.();
+    expect(commit).toHaveBeenCalledExactlyOnceWith('hello world again');
+    expect(manager.getSnapshot().phase).toBe('idle');
+  });
+  it('ignores late callbacks after cancellation and a new recording', () => {
+    manager.start('en', 'one', draft);
+    const lateEnd = recognition.onend;
+    const lateResult = recognition.onresult;
+    manager.cancel();
+    expect(recognition.abort).toHaveBeenCalledOnce();
+    recognition = new Recognition();
+    manager.start('zh', 'two', draft);
+    lateResult?.({ results: [{ isFinal: true, 0: { transcript: 'old' } }] });
+    lateEnd?.();
+    expect(commit).not.toHaveBeenCalled();
+    expect(manager.getSnapshot().text).toBe('');
+    expect(recognition.lang).toBe('zh-CN');
+  });
+  it('cancels a quick release before permission or onstart without later recording', () => {
+    manager.start('en', 'one', draft);
+    const lateStart = recognition.onstart;
+    manager.finish();
+    lateStart?.();
+    expect(recognition.abort).toHaveBeenCalledOnce();
+    expect(manager.getSnapshot().phase).toBe('idle');
+    vi.advanceTimersByTime(20000);
+    expect(manager.getSnapshot().phase).toBe('idle');
+  });
+  it.each(['not-allowed', 'network', 'audio-capture', 'no-speech'])('surfaces %s without modifying the draft', (error) => {
+    manager.start('en', 'one', draft);
+    recognition.onerror?.({ error });
+    expect(manager.getSnapshot().phase).toBe('error');
+    expect(recognition.abort).toHaveBeenCalledOnce();
+    expect(commit).not.toHaveBeenCalled();
+  });
+  it('commits confirmed text on interruption without a second insertion', () => {
+    manager.start('en', 'one', draft);
+    recognition.onstart?.();
+    recognition.result('keep this');
+    manager.interrupt();
+    expect(commit).toHaveBeenCalledExactlyOnceWith('keep this');
+    manager.cancel();
+    expect(commit).toHaveBeenCalledOnce();
+  });
+  it('times out startup and stopping and ends recording at 60 seconds', () => {
+    manager.start('en', 'one', draft);
+    vi.advanceTimersByTime(15000);
+    expect(manager.getSnapshot().error).toBe('timeout');
+    manager.start('en', 'one', draft);
+    recognition.onstart?.();
+    vi.advanceTimersByTime(60000);
+    expect(manager.getSnapshot().phase).toBe('stopping');
+    expect(recognition.stop).toHaveBeenCalledOnce();
+    vi.advanceTimersByTime(8000);
+    expect(manager.getSnapshot().error).toBe('timeout');
+  });
+  it('handles unsupported APIs and thrown starts', () => {
+    const unsupported = new ChatVoiceInputManager(() => null);
+    unsupported.start('en', 'one', draft);
+    expect(unsupported.getSnapshot().error).toBe('unsupported');
+    recognition.start.mockImplementation(() => { throw new Error('device'); });
+    manager.start('en', 'one', draft);
+    expect(manager.getSnapshot().error).toBe('failed');
+  });
+
+});
+
+describe('keyboard and page integration', () => {
+  const bind = (ctrl = false, alt = false) => useChatVoiceShortcutStore.getState().setShortcut({ code: 'KeyV', ctrl, meta: false, alt, shift: false });
+  const key = (type: string, options: KeyboardEventInit = {}) => new KeyboardEvent(type, { code: 'KeyV', bubbles: true, cancelable: true, ...options });
+  it('never steals paste, normal typing, or input-method composition', () => {
+    bind();
+    renderHook(() => useChatVoiceInput(manager, 'one', 'en', true, beginDraft));
+    const input = document.createElement('textarea'); document.body.append(input);
+    const typing = key('keydown');
+    const paste = key('keydown', { ctrlKey: true });
+    const composing = key('keydown', { isComposing: true });
+    act(() => { input.dispatchEvent(typing); input.dispatchEvent(paste); window.dispatchEvent(composing); });
+    expect(typing.defaultPrevented).toBe(false);
+    expect(paste.defaultPrevented).toBe(false);
+    expect(recognition.start).not.toHaveBeenCalled();
+    input.remove();
+  });
+  it('holds a configured combination and stops when a modifier is released', () => {
+    bind(true, true);
+    renderHook(() => useChatVoiceInput(manager, 'one', 'en', true, beginDraft));
+    act(() => { window.dispatchEvent(key('keydown', { ctrlKey: true, altKey: true })); recognition.onstart?.(); });
+    expect(recognition.start).toHaveBeenCalledOnce();
+    act(() => { window.dispatchEvent(key('keyup', { code: 'AltLeft', key: 'Alt' })); });
+    expect(recognition.stop).toHaveBeenCalledOnce();
+  });
+  it('does not register recording shortcuts in a mobile or disabled composer', () => {
+    bind();
+    renderHook(() => useChatVoiceInput(manager, 'one', 'en', false, beginDraft));
+    act(() => { window.dispatchEvent(key('keydown')); });
+    expect(recognition.start).not.toHaveBeenCalled();
+  });
+  it('cancels recording on context switch and unmount', () => {
+    const hook = renderHook(({ context }) => useChatVoiceInput(manager, context, 'en', true, beginDraft), { initialProps: { context: 'one' } });
+    act(() => { manager.start('en', 'one', draft); });
+    hook.rerender({ context: 'two' });
+    expect(recognition.abort).toHaveBeenCalledOnce();
+    expect(manager.getSnapshot().phase).toBe('idle');
+    act(() => { manager.start('en', 'two', draft); });
+    hook.unmount();
+    expect(recognition.abort).toHaveBeenCalledTimes(2);
+  });
+  it('rejects editing keys and persisted invalid shortcut definitions', () => {
+    expect(isVoiceShortcut({ code: 'KeyV', ctrl: true, meta: false, alt: false, shift: false })).toBe(false);
+    expect(isVoiceShortcut({ code: 'Enter', ctrl: false, meta: false, alt: false, shift: false })).toBe(false);
+    expect(isVoiceShortcut({ code: 'KeyV', ctrl: false, meta: false, alt: false, shift: false })).toBe(true);
+  });
+});

package/src/features/chat/features/conversation/hooks/use-chat-voice-input.ts

@@ -0,0 +1,52 @@
+import { useEffect, useSyncExternalStore } from 'react';
+import type { ChatComposerDictationSession } from '@nextclaw/agent-chat-ui';
+import type { ChatVoiceInputManager } from '@/features/chat/managers/chat-voice-input.manager';
+import { useChatVoiceShortcutStore } from '@/features/chat/stores/chat-voice-shortcut.store';
+
+export function useChatVoiceInput(manager: ChatVoiceInputManager, context: string, language: string,
+  keyboardEnabled: boolean, beginDraft: () => ChatComposerDictationSession | null) {
+  const snapshot = useSyncExternalStore(manager.subscribe, manager.getSnapshot, manager.getSnapshot);
+  const shortcut = useChatVoiceShortcutStore((state) => state.shortcut);
+  useEffect(() => {
+    if (!keyboardEnabled || !shortcut) return;
+    let held = false;
+    const keydown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.isComposing || event.repeat || event.code !== shortcut.code ||
+        event.ctrlKey !== shortcut.ctrl || event.metaKey !== shortcut.meta ||
+        event.altKey !== shortcut.alt || event.shiftKey !== shortcut.shift ||
+        !document.hasFocus()) return;
+      if (!['idle', 'ready'].includes(manager.getSnapshot().phase)) return;
+      const editable = event.target instanceof HTMLElement &&
+        (event.target.isContentEditable || event.target.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]'));
+      if (editable && !shortcut.ctrl && !shortcut.meta && !shortcut.alt) return;
+      event.preventDefault();
+      held = true;
+      manager.start(language, context, beginDraft());
+    };
+    const keyup = (event: KeyboardEvent) => {
+      if (held && (event.code === shortcut.code || ['Alt', 'Control', 'Meta', 'Shift'].includes(event.key))) {
+        held = false; manager.finish();
+      }
+    };
+    window.addEventListener('keydown', keydown);
+    window.addEventListener('keyup', keyup);
+    return () => {
+      window.removeEventListener('keydown', keydown);
+      window.removeEventListener('keyup', keyup);
+      if (held) manager.cancel();
+    };
+  }, [manager, context, language, keyboardEnabled, beginDraft, shortcut]);
+  useEffect(() => {
+    const onVisibility = () => { if (document.hidden) manager.interrupt(); };
+    window.addEventListener('blur', manager.interrupt);
+    window.addEventListener('pagehide', manager.cancel);
+    document.addEventListener('visibilitychange', onVisibility);
+    return () => {
+      window.removeEventListener('blur', manager.interrupt);
+      window.removeEventListener('pagehide', manager.cancel);
+      document.removeEventListener('visibilitychange', onVisibility);
+      manager.cancel();
+    };
+  }, [manager, context]);
+  return snapshot;
+}

package/src/features/chat/features/input/utils/__tests__/chat-input-bar.utils.test.ts

@@ -438,16 +438,22 @@ describe('buildModelToolbarSelect selection', () => {
         ]
       },
       {
-        key: 'all-models',
-        label: 'All models',
+        key: 'provider-openai',
+        label: 'OpenAI',
         options: [
           {
             value: 'openai/gpt-5',
-            label: 'OpenAI/gpt-5'
-          },
+            label: 'gpt-5'
+          }
+        ]
+      },
+      {
+        key: 'provider-minimax',
+        label: 'MiniMax',
+        options: [
           {
             value: 'minimax/MiniMax-M2.7',
-            label: 'MiniMax/MiniMax-M2.7'
+            label: 'MiniMax-M2.7'
           }
         ]
       }
@@ -487,11 +493,12 @@ describe('buildModelToolbarSelect selection', () => {
     expect(select.groups?.map((group) => group.key)).toEqual([
       'favorite-models',
       'recent-models',
-      'all-models'
+      'provider-minimax'
     ]);
     expect(select.groups?.[0]?.options.map((option) => option.value)).toEqual(['openai/gpt-5']);
     expect(select.groups?.[1]?.options.map((option) => option.value)).toEqual(['anthropic/claude-sonnet-4']);
     expect(select.groups?.[2]?.options.map((option) => option.value)).toEqual(['minimax/MiniMax-M2.7']);
+    expect(select.groups?.[2]?.label).toBe('MiniMax');
     expect(select.optionAction).toMatchObject({
       kind: 'favorite',
       activeValues: ['openai/gpt-5'],