@nextclaw/ui 0.24.2 → 0.25.0

package/dist/assets/x-DdXOqLnX.js

@@ -0,0 +1 @@
+import{t as e}from"./createLucideIcon-BNKf0_kc.js";var t=e(`X`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]);export{t};

package/dist/index.html

@@ -258,62 +258,62 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/main-Bys58GxY.js"></script>
+  <script type="module" crossorigin src="/assets/main-CQ6GUYdX.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/chunk-DF37yw5_.js">
-  <link rel="modulepreload" crossorigin href="/assets/utils-UBHTdG5Q.js">
-  <link rel="modulepreload" crossorigin href="/assets/client-B0krol7A.js">
+  <link rel="modulepreload" crossorigin href="/assets/utils-CBZPzC_b.js">
+  <link rel="modulepreload" crossorigin href="/assets/client-BtGBwLTs.js">
   <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-Bc9hOVNN.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-CEhIDAnr.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-MOCbM0Eu.js">
-  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-BTHK0Ot9.js">
-  <link rel="modulepreload" crossorigin href="/assets/chevron-down-An7Km-t4.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-CmDTqk2C.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-hkVPP1th.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-C0iaOsRW.js">
-  <link rel="modulepreload" crossorigin href="/assets/dialog-BFN_1DBH.js">
-  <link rel="modulepreload" crossorigin href="/assets/popover-XVDgjxcl.js">
-  <link rel="modulepreload" crossorigin href="/assets/tooltip-CgGbBdYf.js">
-  <link rel="modulepreload" crossorigin href="/assets/i18n-B9yXA8KO.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-Utt-xzrT.js">
-  <link rel="modulepreload" crossorigin href="/assets/search-DN-f7IIC.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-DDW_3XpM.js">
-  <link rel="modulepreload" crossorigin href="/assets/boxes-DwJeuK_h.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-BiIcnf9j.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-C5I0v8Qn.js">
+  <link rel="modulepreload" crossorigin href="/assets/es2015-cuwbYI-l.js">
+  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-BNKf0_kc.js">
+  <link rel="modulepreload" crossorigin href="/assets/chevron-down-BL-yMYcX.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-CG5YWnwe.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-czPa8xFO.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-DdXOqLnX.js">
+  <link rel="modulepreload" crossorigin href="/assets/dialog-Xe73hpQz.js">
+  <link rel="modulepreload" crossorigin href="/assets/popover-NkrFlWHp.js">
+  <link rel="modulepreload" crossorigin href="/assets/tooltip-DYcuWhuP.js">
+  <link rel="modulepreload" crossorigin href="/assets/i18n-CPjq_hQX.js">
+  <link rel="modulepreload" crossorigin href="/assets/api-Dffeij78.js">
+  <link rel="modulepreload" crossorigin href="/assets/search-CUe41wjm.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-xqEj1OLE.js">
+  <link rel="modulepreload" crossorigin href="/assets/boxes-D6uPnkGo.js">
   <link rel="modulepreload" crossorigin href="/assets/host-capabilities-B107nwS3.js">
-  <link rel="modulepreload" crossorigin href="/assets/navigation-link-kbCLRSr_.js">
-  <link rel="modulepreload" crossorigin href="/assets/plus-BHnKwuPq.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-Bw5BY7vp.js">
+  <link rel="modulepreload" crossorigin href="/assets/navigation-link-BAQjgx2F.js">
+  <link rel="modulepreload" crossorigin href="/assets/plus-LA8-jpxP.js">
+  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-h9Xq3LY3.js">
   <link rel="modulepreload" crossorigin href="/assets/middleware-0o3JF3tS.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-C4yQrKrH.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-panel-app-scroll-restoration-BekzoX6z.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-BNUxmwD6.js">
-  <link rel="modulepreload" crossorigin href="/assets/circle-alert-CDXqELuo.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-rWr5Yo0E.js">
-  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-DFt4jpN7.js">
-  <link rel="modulepreload" crossorigin href="/assets/i18n-provider-BYBJua91.js">
-  <link rel="modulepreload" crossorigin href="/assets/tag-chip-DgqKlI5D.js">
-  <link rel="modulepreload" crossorigin href="/assets/skeleton-Eh64l4T2.js">
-  <link rel="modulepreload" crossorigin href="/assets/mcp-marketplace-page-CifiVgFD.js">
-  <link rel="modulepreload" crossorigin href="/assets/puzzle-D5Dhacmb.js">
-  <link rel="modulepreload" crossorigin href="/assets/trash-2-CVOev8yc.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-data-DYXDL6X2.js">
-  <link rel="modulepreload" crossorigin href="/assets/ellipsis-BRI6ROeu.js">
-  <link rel="modulepreload" crossorigin href="/assets/eye-cnynUDGt.js">
-  <link rel="modulepreload" crossorigin href="/assets/tabs-Bk_mG7ql.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-CUA3jQsA.js">
-  <link rel="modulepreload" crossorigin href="/assets/theme-provider-CeBY2pyu.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-desktop-capabilities-B3tLU1yl.js">
-  <link rel="modulepreload" crossorigin href="/assets/logo-badge-Cr03YceJ.js">
-  <link rel="modulepreload" crossorigin href="/assets/card-IevY2nm-.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-config-b2DN67gs.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-CekJxJFm.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-panel-app-scroll-restoration-DsV1IJx-.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-Cu58uiEg.js">
+  <link rel="modulepreload" crossorigin href="/assets/circle-alert-lSa3LRvS.js">
+  <link rel="modulepreload" crossorigin href="/assets/loader-circle-K1BDdHR5.js">
+  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-ClT6iaj8.js">
+  <link rel="modulepreload" crossorigin href="/assets/i18n-provider-BYO9AhFy.js">
+  <link rel="modulepreload" crossorigin href="/assets/tag-chip-gAH1IOsZ.js">
+  <link rel="modulepreload" crossorigin href="/assets/skeleton-BL9h32W7.js">
+  <link rel="modulepreload" crossorigin href="/assets/mcp-marketplace-page-CWAxBNaS.js">
+  <link rel="modulepreload" crossorigin href="/assets/puzzle-D6gulz7u.js">
+  <link rel="modulepreload" crossorigin href="/assets/trash-2-BPPYt2NV.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-data-DzaIMy4D.js">
+  <link rel="modulepreload" crossorigin href="/assets/ellipsis-C5YXdOUx.js">
+  <link rel="modulepreload" crossorigin href="/assets/eye-C84inPcV.js">
+  <link rel="modulepreload" crossorigin href="/assets/tabs-BuE0qKMh.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-BS18drMT.js">
+  <link rel="modulepreload" crossorigin href="/assets/theme-provider-DE7m9jvf.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-desktop-capabilities-OKG96v4y.js">
+  <link rel="modulepreload" crossorigin href="/assets/logo-badge-C-5-zim6.js">
+  <link rel="modulepreload" crossorigin href="/assets/card-CS8su2Zh.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-config-Cyiw06-j.js">
   <link rel="modulepreload" crossorigin href="/assets/provider-models-5PGHb6mP.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-CLsFiXvV.js">
-  <link rel="modulepreload" crossorigin href="/assets/provider-scoped-model-input-BGZMCThn.js">
-  <link rel="modulepreload" crossorigin href="/assets/settings-2-B62YtZon.js">
-  <link rel="modulepreload" crossorigin href="/assets/pwa-ClQK56Qe.js">
-  <link rel="modulepreload" crossorigin href="/assets/login-page-CqrHhzaN.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-O2tUKKGf.js">
+  <link rel="modulepreload" crossorigin href="/assets/provider-scoped-model-input-BGdZMWWa.js">
+  <link rel="modulepreload" crossorigin href="/assets/settings-2-CE3ELQyk.js">
+  <link rel="modulepreload" crossorigin href="/assets/pwa-C3kR9mdy.js">
+  <link rel="modulepreload" crossorigin href="/assets/login-page-DBqkVTVD.js">
   <link rel="stylesheet" crossorigin href="/assets/app-presenter-provider-D3BuuOyZ.css">
-  <link rel="stylesheet" crossorigin href="/assets/main-8cVkMfgE.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-CLwCjK9U.css">
 </head>
 
 <body>

package/dist/panel-standalone.html

@@ -5,23 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#ffffff" />
     <title>Panel App · NextClaw</title>
-    <script type="module" crossorigin src="/assets/panelStandalone-DMBnYyTw.js"></script>
+    <script type="module" crossorigin src="/assets/panelStandalone-BGA1s7JG.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-DF37yw5_.js">
-    <link rel="modulepreload" crossorigin href="/assets/utils-UBHTdG5Q.js">
-    <link rel="modulepreload" crossorigin href="/assets/client-B0krol7A.js">
+    <link rel="modulepreload" crossorigin href="/assets/utils-CBZPzC_b.js">
+    <link rel="modulepreload" crossorigin href="/assets/client-BtGBwLTs.js">
     <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
-    <link rel="modulepreload" crossorigin href="/assets/i18n-B9yXA8KO.js">
-    <link rel="modulepreload" crossorigin href="/assets/api-Utt-xzrT.js">
-    <link rel="modulepreload" crossorigin href="/assets/dist-Bc9hOVNN.js">
-    <link rel="modulepreload" crossorigin href="/assets/es2015-MOCbM0Eu.js">
-    <link rel="modulepreload" crossorigin href="/assets/dist-hkVPP1th.js">
-    <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-BTHK0Ot9.js">
-    <link rel="modulepreload" crossorigin href="/assets/x-C0iaOsRW.js">
-    <link rel="modulepreload" crossorigin href="/assets/dialog-BFN_1DBH.js">
-    <link rel="modulepreload" crossorigin href="/assets/boxes-DwJeuK_h.js">
-    <link rel="modulepreload" crossorigin href="/assets/use-panel-app-scroll-restoration-BekzoX6z.js">
-    <link rel="modulepreload" crossorigin href="/assets/theme-provider-CeBY2pyu.js">
-    <link rel="modulepreload" crossorigin href="/assets/i18n-provider-BYBJua91.js">
+    <link rel="modulepreload" crossorigin href="/assets/i18n-CPjq_hQX.js">
+    <link rel="modulepreload" crossorigin href="/assets/api-Dffeij78.js">
+    <link rel="modulepreload" crossorigin href="/assets/dist-BiIcnf9j.js">
+    <link rel="modulepreload" crossorigin href="/assets/es2015-cuwbYI-l.js">
+    <link rel="modulepreload" crossorigin href="/assets/dist-czPa8xFO.js">
+    <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-BNKf0_kc.js">
+    <link rel="modulepreload" crossorigin href="/assets/x-DdXOqLnX.js">
+    <link rel="modulepreload" crossorigin href="/assets/dialog-Xe73hpQz.js">
+    <link rel="modulepreload" crossorigin href="/assets/boxes-D6uPnkGo.js">
+    <link rel="modulepreload" crossorigin href="/assets/use-panel-app-scroll-restoration-DsV1IJx-.js">
+    <link rel="modulepreload" crossorigin href="/assets/theme-provider-DE7m9jvf.js">
+    <link rel="modulepreload" crossorigin href="/assets/i18n-provider-BYO9AhFy.js">
     <link rel="stylesheet" crossorigin href="/assets/panelStandalone-Y91OJkgV.css">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.24.2",
+  "version": "0.25.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -34,14 +34,14 @@
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.3.14",
-    "@nextclaw/agent-chat-ui": "0.7.2",
-    "@nextclaw/client-sdk": "0.11.2",
     "@nextclaw/ncp": "0.10.0",
+    "@nextclaw/agent-chat": "0.3.14",
     "@nextclaw/ncp-http-agent-client": "0.4.22",
-    "@nextclaw/ncp-react": "0.5.26",
-    "@nextclaw/ncp-toolkit": "0.6.23",
-    "@nextclaw/shared": "0.5.0"
+    "@nextclaw/agent-chat-ui": "0.8.0",
+    "@nextclaw/ncp-react": "0.5.27",
+    "@nextclaw/client-sdk": "0.12.1",
+    "@nextclaw/ncp-toolkit": "0.6.24",
+    "@nextclaw/shared": "0.5.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/configs/app-navigation.config.ts

@@ -8,6 +8,7 @@ import {
   Download,
   Inbox,
   KeyRound,
+  Keyboard,
   MessageCircle,
   MessageSquare,
   MonitorCog,
@@ -35,6 +36,7 @@ export type AppNavigationSection = {
 };
 
 type SettingsNavigationOptions = {
+  includeKeyboardShortcuts?: boolean;
   includeDesktopCapabilities?: boolean;
 };
 
@@ -165,6 +167,11 @@ export function getSettingsNavItems(
       label: translate("appearance"),
       icon: Palette,
     },
+    {
+      target: "/keyboard-shortcuts",
+      label: translate("keyboardShortcuts"),
+      icon: Keyboard,
+    },
     {
       target: "/security",
       label: translate("security"),
@@ -211,9 +218,9 @@ export function getSettingsNavItems(
       icon: Wrench,
     },
   ];
-  return options.includeDesktopCapabilities === false
-    ? items.filter((item) => item.target !== "/desktop-capabilities")
-    : items;
+  return items.filter((item) =>
+    (options.includeDesktopCapabilities !== false || item.target !== "/desktop-capabilities") &&
+    (options.includeKeyboardShortcuts !== false || item.target !== "/keyboard-shortcuts"));
 }
 
 export function getSettingsNavSections(

package/src/app/index.tsx

@@ -42,6 +42,9 @@ const AppearanceSettingsPage = lazy(async () => ({
   default: (await import("@/features/settings/pages/appearance-settings-page"))
     .AppearanceSettingsPage,
 }));
+const KeyboardShortcutsSettingsPage = lazy(async () => ({
+  default: (await import("@/features/settings/pages/keyboard-shortcuts-settings-page")).KeyboardShortcutsSettingsPage,
+}));
 const SearchConfigPage = lazy(async () => ({
   default: (await import("@/features/settings/pages/search-config-page"))
     .SearchConfigPage,
@@ -157,6 +160,10 @@ const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
     path: "/appearance",
     element: createLazyElement(<AppearanceSettingsPage />),
   },
+  {
+    path: "/keyboard-shortcuts",
+    element: createLazyElement(<KeyboardShortcutsSettingsPage />),
+  },
   {
     path: "/model",
     element: createLazyElement(<ModelConfigPage />),

package/src/features/chat/components/providers/chat-presenter.provider.tsx

@@ -6,12 +6,14 @@ import type { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
 import type { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import type { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 import type { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
+import type { ChatVoiceInputManager } from '@/features/chat/managers/chat-voice-input.manager';
 
 type PublicManager<T extends object> = Pick<T, keyof T>;
 
 export type ChatThreadManagerLike = PublicManager<ChatThreadManager>;
 
 export type ChatPresenterLike = {
+  chatVoiceInputManager: ChatVoiceInputManager;
   chatUiManager: ChatUiManager;
   chatQueryManager: ChatQueryManager;
   chatSessionListManager: ChatSessionListManager;

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

@@ -309,6 +309,18 @@ describe("SessionConversationArea input boundary", () => {
     expect(params.agent.isSending).toBe(false);
   });
 
+  it("does not keep a settled run active because the session list cache is stale", () => {
+    mocks.inputQuery.selectedSession = { status: "running" };
+    mocks.agent.isRunning = false;
+    mocks.agent.isSending = false;
+    renderArea("session-1");
+    const params = mocks.controllerParamsSpy.mock.calls.at(-1)?.[0] as {
+      agent: { isRunning: boolean; isSending: boolean };
+    };
+    expect(params.agent.isRunning).toBe(false);
+    expect(params.agent.isSending).toBe(false);
+  });
+
   it("disables message recovery actions until the NCP agent is ready", () => {
     mocks.agent.isRunning = false;
     mocks.agent.isSending = false;

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,
         },
       }}