@nextclaw/ui 0.24.3 → 0.25.0

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -638,5 +638,36 @@
   "chatWorkspaceExcerptCharacterCount": "{count} characters",
   "chatInputAttachmentUnsupported": "This file type is not supported in the current upload flow.",
   "chatInputAttachmentTooLarge": "Files must be {maxMb} MB or smaller.",
-  "chatInputAttachmentReadFailed": "Failed to read the file. Please try again."
+  "chatInputAttachmentReadFailed": "Failed to read the file. Please try again.",
+  "chatInputVoice": "Voice input",
+  "chatInputVoicePermissionDenied": "Microphone permission was denied. Allow it in the browser or system settings and retry.",
+  "chatInputVoiceUnsupported": "Speech input is not supported in this browser.",
+  "chatInputVoiceNoSpeech": "Could not hear you. Please try again.",
+  "chatInputVoiceFailed": "Voice input failed. Please try again.",
+  "chatInputVoicePrivacy": "Click to dictate at the cursor. Underlined words are still being recognized. Your browser may process audio online. Nothing is sent automatically.",
+  "chatInputVoiceStart": "Start recording",
+  "chatInputVoiceFinish": "Finish recording",
+  "chatInputVoiceCancel": "Cancel",
+  "chatInputVoiceStarting": "Connecting to microphone…",
+  "chatInputVoiceRecording": "Listening",
+  "chatInputVoiceFinishing": "Finishing transcription…",
+  "chatInputVoiceReview": "Recording stopped",
+  "chatInputVoiceSpeak": "Speak now. Your transcript will appear here.",
+  "chatInputVoiceReviewHint": "Confirmed words remain in your draft; provisional words were removed. Continue editing or try again.",
+  "chatInputVoiceTranscript": "Recognized text",
+  "chatInputVoiceInsert": "Keep in draft",
+  "chatInputVoiceRetry": "Retry",
+  "chatInputVoiceNetwork": "Could not connect to the speech service. Check your network and try again.",
+  "chatInputVoiceDevice": "Microphone unavailable. Check your device and system permissions.",
+  "chatInputVoiceInterrupted": "Recording stopped because the page or window lost focus.",
+  "chatInputVoiceTimeout": "The speech service timed out. Recording has stopped. Try again.",
+  "chatInputVoiceShortcut": "Voice shortcut",
+  "chatInputVoiceCloseSettings": "Close settings",
+  "chatInputVoiceBind": "Bind a key",
+  "chatInputVoiceUnbind": "Disable",
+  "chatInputVoiceCapture": "Press your shortcut…",
+  "chatInputVoiceCaptureHelp": "Use a letter, F6–F10, or Ctrl/⌘ + Alt/⌥ + a letter. Esc cancels; Tab exits. Common shortcuts such as copy and paste are reserved.",
+  "chatInputVoiceShortcutHelp": "Hold to speak; release to finish. Single keys work outside text inputs; combinations also work inside. Only active in this chat page. System shortcuts may take priority.",
+  "chatInputVoiceBindInvalid": "This key may interfere with normal controls. Choose one of the suggested keys.",
+  "chatInputVoiceSaveFailed": "Could not save the shortcut. Check browser storage permissions."
 }

package/src/shared/lib/i18n/locales/en-US/core.json

@@ -15,6 +15,8 @@
   "settingsGroupBasic": "Basic Configuration",
   "settingsGroupAdvanced": "Advanced Configuration",
   "appearance": "Appearance",
+  "keyboardShortcuts": "Keyboard shortcuts",
+  "keyboardShortcutsDesktopOnly": "Keyboard shortcuts can be configured on desktop. Use the microphone button on mobile.",
   "chatMessageLayoutTitle": "Message layout",
   "chatMessageLayoutDescription": "Choose how chat messages are displayed.",
   "chatMessageLayoutCard": "Cards",

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -638,5 +638,36 @@
   "chatWorkspaceExcerptCharacterCount": "{count} 个字符",
   "chatInputAttachmentUnsupported": "当前上传流程不支持该文件类型。",
   "chatInputAttachmentTooLarge": "文件不能超过 {maxMb} MB。",
-  "chatInputAttachmentReadFailed": "读取文件失败，请重试。"
+  "chatInputAttachmentReadFailed": "读取文件失败，请重试。",
+  "chatInputVoice": "语音输入",
+  "chatInputVoicePermissionDenied": "麦克风权限被拒绝，请在浏览器或系统中允许后重试。",
+  "chatInputVoiceUnsupported": "当前浏览器不支持语音输入。",
+  "chatInputVoiceNoSpeech": "没有听清，请再试一次。",
+  "chatInputVoiceFailed": "语音输入失败，请重试。",
+  "chatInputVoicePrivacy": "点击录音，文字实时显示在光标处，下划线表示尚未确定的内容。浏览器语音服务可能联网处理声音，不会自动发送。",
+  "chatInputVoiceStart": "开始录音",
+  "chatInputVoiceFinish": "结束录音",
+  "chatInputVoiceCancel": "取消",
+  "chatInputVoiceStarting": "正在连接麦克风…",
+  "chatInputVoiceRecording": "正在聆听",
+  "chatInputVoiceFinishing": "正在完成转写…",
+  "chatInputVoiceReview": "录音已停止",
+  "chatInputVoiceSpeak": "请说话，转写会显示在这里",
+  "chatInputVoiceReviewHint": "已确认的文字保留在草稿中，未确定的片段已撤回。你可以继续编辑或重试。",
+  "chatInputVoiceTranscript": "已识别的文字",
+  "chatInputVoiceInsert": "保留到输入框",
+  "chatInputVoiceRetry": "重试",
+  "chatInputVoiceNetwork": "语音服务连接失败，请检查网络后重试。",
+  "chatInputVoiceDevice": "无法访问麦克风，请检查设备连接和系统权限。",
+  "chatInputVoiceInterrupted": "录音已因离开页面或窗口失焦而停止。",
+  "chatInputVoiceTimeout": "语音服务响应超时，录音已停止，请重试。",
+  "chatInputVoiceShortcut": "语音快捷键",
+  "chatInputVoiceCloseSettings": "关闭设置",
+  "chatInputVoiceBind": "绑定按键",
+  "chatInputVoiceUnbind": "停用",
+  "chatInputVoiceCapture": "请按下快捷键…",
+  "chatInputVoiceCaptureHelp": "支持单字母、F6–F10，或 Ctrl/⌘ + Alt/⌥ + 字母。Esc 取消，Tab 离开。复制、粘贴等常用组合键不接受。",
+  "chatInputVoiceShortcutHelp": "按住说话，松开结束。单键仅在输入框外生效；输入框内可用组合键。仅当前聊天页生效，系统已占用的键可能无法使用。",
+  "chatInputVoiceBindInvalid": "这个按键可能影响正常操作，请选择提示中的按键。",
+  "chatInputVoiceSaveFailed": "无法保存快捷键，请检查浏览器存储权限。"
 }

package/src/shared/lib/i18n/locales/zh-CN/core.json

@@ -15,6 +15,8 @@
   "settingsGroupBasic": "基础配置",
   "settingsGroupAdvanced": "高级配置",
   "appearance": "外观",
+  "keyboardShortcuts": "快捷键",
+  "keyboardShortcutsDesktopOnly": "请在桌面端配置键盘快捷键。手机可使用麦克风按钮输入。",
   "chatMessageLayoutTitle": "消息布局",
   "chatMessageLayoutDescription": "选择聊天消息的展示方式。",
   "chatMessageLayoutCard": "卡片式",

package/src/shared/lib/transport/__tests__/browser-realtime-recovery.service.test.ts

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { BrowserRealtimeRecoveryService } from '@/shared/lib/transport/browser-realtime-recovery.service';
+
+describe('BrowserRealtimeRecoveryService', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('requests recovery only when the page can actively reconnect', () => {
+    let visibilityState: DocumentVisibilityState = 'hidden';
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState);
+    const requestRecovery = vi.fn();
+    const recovery = new BrowserRealtimeRecoveryService(requestRecovery);
+
+    recovery.start();
+    window.dispatchEvent(new Event('online'));
+    expect(requestRecovery).not.toHaveBeenCalled();
+
+    visibilityState = 'visible';
+    document.dispatchEvent(new Event('visibilitychange'));
+    window.dispatchEvent(new Event('online'));
+    expect(requestRecovery).toHaveBeenCalledTimes(2);
+
+    recovery.stop();
+    document.dispatchEvent(new Event('visibilitychange'));
+    expect(requestRecovery).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps start and stop idempotent', () => {
+    vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('visible');
+    const requestRecovery = vi.fn();
+    const recovery = new BrowserRealtimeRecoveryService(requestRecovery);
+
+    recovery.start();
+    recovery.start();
+    document.dispatchEvent(new Event('visibilitychange'));
+    expect(requestRecovery).toHaveBeenCalledTimes(1);
+
+    recovery.stop();
+    recovery.stop();
+  });
+});

package/src/shared/lib/transport/__tests__/local-transport.service.test.ts

@@ -0,0 +1,85 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { LocalAppTransport } from '@/shared/lib/transport/local-transport.service';
+
+class MockWebSocket {
+  static readonly CONNECTING = 0;
+  static readonly OPEN = 1;
+  static readonly CLOSING = 2;
+  static readonly CLOSED = 3;
+  static instances: MockWebSocket[] = [];
+
+  readyState = MockWebSocket.CONNECTING;
+  onopen: ((event: Event) => void) | null = null;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  onerror: ((event: Event) => void) | null = null;
+  onclose: ((event: CloseEvent) => void) | null = null;
+
+  constructor(public readonly url: string) {
+    MockWebSocket.instances.push(this);
+  }
+
+  send = vi.fn();
+
+  close = vi.fn(() => {
+    this.readyState = MockWebSocket.CLOSED;
+  });
+
+  open = (): void => {
+    this.readyState = MockWebSocket.OPEN;
+    this.onopen?.({} as Event);
+  };
+
+  finishClose = (): void => {
+    this.readyState = MockWebSocket.CLOSED;
+    this.onclose?.({} as CloseEvent);
+  };
+}
+
+describe('LocalAppTransport browser connection recovery', () => {
+  beforeEach(() => {
+    MockWebSocket.instances = [];
+    vi.stubGlobal('WebSocket', MockWebSocket as unknown as typeof WebSocket);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('replaces a possibly stale open socket when a mobile page becomes visible again', () => {
+    let visibilityState: DocumentVisibilityState = 'hidden';
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState);
+
+    const transport = new LocalAppTransport({ apiBase: 'https://vps.example.com' });
+    const handler = vi.fn();
+    const unsubscribe = transport.subscribe(handler);
+    const staleSocket = MockWebSocket.instances[0];
+    staleSocket?.open();
+
+    visibilityState = 'visible';
+    document.dispatchEvent(new Event('visibilitychange'));
+    window.dispatchEvent(new Event('online'));
+
+    expect(staleSocket?.close).toHaveBeenCalledTimes(1);
+    expect(MockWebSocket.instances).toHaveLength(2);
+    expect(handler).toHaveBeenCalledWith({ type: 'connection.close', payload: {} });
+
+    const replacementSocket = MockWebSocket.instances[1];
+    replacementSocket?.open();
+    staleSocket?.finishClose();
+
+    expect(MockWebSocket.instances).toHaveLength(2);
+    expect(handler).toHaveBeenLastCalledWith({ type: 'connection.open', payload: {} });
+    window.dispatchEvent(new Event('online'));
+    const secondReplacement = MockWebSocket.instances[2];
+    secondReplacement?.open();
+    replacementSocket?.finishClose();
+    const event = { type: 'session.updated', payload: { sessionKey: 'after-second-recovery' } };
+    secondReplacement?.onmessage?.({ data: JSON.stringify(event) } as MessageEvent);
+    expect(handler).toHaveBeenLastCalledWith(event);
+    expect(MockWebSocket.instances).toHaveLength(3);
+    unsubscribe();
+    window.dispatchEvent(new Event('online'));
+    expect(MockWebSocket.instances).toHaveLength(3);
+  });
+});

package/src/shared/lib/transport/__tests__/remote.transport.test.ts

@@ -25,7 +25,6 @@ class MockWebSocket {
 
   close = (): void => {
     this.readyState = MockWebSocket.CLOSED;
-    this.onclose?.({} as CloseEvent);
   }
 
   open = (): void => {
@@ -39,6 +38,11 @@ class MockWebSocket {
     } as MessageEvent);
   }
 
+  finishClose = (): void => {
+    this.readyState = MockWebSocket.CLOSED;
+    this.onclose?.({} as CloseEvent);
+  }
+
   static reset(): void {
     MockWebSocket.instances = [];
   }
@@ -144,4 +148,53 @@ describe('RemoteSessionMultiplexTransport request path', () => {
 
     await timeoutExpectation;
   });
+
+  it('replaces a possibly stale open socket when a mobile page becomes visible again', async () => {
+    let visibilityState: DocumentVisibilityState = 'hidden';
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState);
+    const transport = new RemoteSessionMultiplexTransport({
+      mode: 'remote',
+      protocolVersion: 1,
+      wsPath: '/_remote/ws'
+    }, 'https://remote.claw.cool');
+
+    const handler = vi.fn();
+    const unsubscribe = transport.subscribe(handler);
+    const staleSocket = MockWebSocket.instances[0];
+    staleSocket?.open();
+    await Promise.resolve();
+
+    const pending = transport.request({ method: 'POST', path: '/api/ncp/agent/messages', body: { text: 'once' } });
+    const pendingFailure = expect(pending).rejects.toThrow('connection replaced');
+    await Promise.resolve();
+    expect(staleSocket?.sent).toHaveLength(1);
+
+    visibilityState = 'visible';
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(staleSocket?.readyState).toBe(MockWebSocket.CLOSED);
+    expect(MockWebSocket.instances).toHaveLength(2);
+    expect(handler).toHaveBeenCalledWith({ type: 'connection.close', payload: {} });
+
+    const replacementSocket = MockWebSocket.instances[1];
+    replacementSocket?.open();
+    staleSocket?.finishClose();
+
+    expect(MockWebSocket.instances).toHaveLength(2);
+    expect(handler).toHaveBeenLastCalledWith({ type: 'connection.open', payload: {} });
+    await pendingFailure;
+    await Promise.resolve();
+    expect(replacementSocket?.sent).toHaveLength(0);
+    window.dispatchEvent(new Event('online'));
+    const secondReplacement = MockWebSocket.instances[2];
+    secondReplacement?.open();
+    await Promise.resolve();
+    const recovered = transport.request({ method: 'GET', path: '/api/sessions' });
+    await Promise.resolve();
+    const frame = lastSentRequestFrame(secondReplacement!);
+    secondReplacement?.receive({ type: 'response', id: frame.id, status: 200, body: { ok: true, data: { total: 1 } } });
+    await expect(recovered).resolves.toEqual({ total: 1 });
+    expect(MockWebSocket.instances).toHaveLength(3);
+    unsubscribe();
+  });
 });

package/src/shared/lib/transport/browser-realtime-recovery.service.ts

@@ -0,0 +1,35 @@
+export class BrowserRealtimeRecoveryService {
+  private started = false;
+
+  constructor(private readonly requestRecovery: () => void) {}
+
+  start = (): void => {
+    if (this.started) {
+      return;
+    }
+    this.started = true;
+    document.addEventListener('visibilitychange', this.handleVisibilityChange);
+    window.addEventListener('online', this.handleOnline);
+  };
+
+  stop = (): void => {
+    if (!this.started) {
+      return;
+    }
+    this.started = false;
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+    window.removeEventListener('online', this.handleOnline);
+  };
+
+  private readonly handleVisibilityChange = (): void => {
+    if (document.visibilityState === 'visible') {
+      this.requestRecovery();
+    }
+  };
+
+  private readonly handleOnline = (): void => {
+    if (document.visibilityState === 'visible') {
+      this.requestRecovery();
+    }
+  };
+}

package/src/shared/lib/transport/local-transport.service.ts

@@ -1,5 +1,6 @@
 import { systemStatusManager } from '@/features/system-status';
 import type { AppEvent, AppTransport, RequestInput, StreamInput, StreamSession } from './transport.types';
+import { BrowserRealtimeRecoveryService } from './browser-realtime-recovery.service';
 import { requestRawApiResponse } from './request-raw-api-response.utils';
 import { readSseStreamResult } from './sse-stream.utils';
 import { resolveTransportWebSocketUrl } from './transport-websocket-url.utils';
@@ -53,13 +54,18 @@ class LocalRealtimeGateway {
   private socket: WebSocket | null = null;
   private reconnectTimer: number | null = null;
   private manualClose = false;
+  private replacingAfterBrowserRecovery = false;
   private subscribers = new Set<EventHandler>();
+  private readonly browserRecovery = new BrowserRealtimeRecoveryService(() => {
+    this.replaceSocket();
+  });
 
   constructor(private readonly wsUrl: string) {}
 
   subscribe = (handler: EventHandler): () => void => {
     this.subscribers.add(handler);
     if (this.subscribers.size === 1) {
+      this.browserRecovery.start();
       this.connect();
     } else if (this.socket?.readyState === WebSocket.OPEN) {
       handler({ type: 'connection.open', payload: {} });
@@ -68,6 +74,7 @@ class LocalRealtimeGateway {
     return () => {
       this.subscribers.delete(handler);
       if (this.subscribers.size === 0) {
+        this.browserRecovery.stop();
         this.disconnect();
       }
     };
@@ -88,6 +95,7 @@ class LocalRealtimeGateway {
     this.socket = socket;
 
     socket.onopen = () => {
+      this.replacingAfterBrowserRecovery = false;
       this.emit({ type: 'connection.open', payload: {} });
     };
 
@@ -105,6 +113,7 @@ class LocalRealtimeGateway {
     };
 
     socket.onclose = () => {
+      this.replacingAfterBrowserRecovery = false;
       this.emit({ type: 'connection.close', payload: {} });
       this.socket = null;
       if (!this.manualClose && this.subscribers.size > 0) {
@@ -123,8 +132,31 @@ class LocalRealtimeGateway {
     }, 3_000);
   };
 
+  private replaceSocket = (): void => {
+    if (this.subscribers.size === 0 || this.replacingAfterBrowserRecovery) {
+      return;
+    }
+    this.replacingAfterBrowserRecovery = true;
+    if (this.reconnectTimer !== null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    const staleSocket = this.socket;
+    this.socket = null;
+    if (staleSocket) {
+      staleSocket.onopen = null;
+      staleSocket.onmessage = null;
+      staleSocket.onerror = null;
+      staleSocket.onclose = null;
+      staleSocket.close();
+      this.emit({ type: 'connection.close', payload: {} });
+    }
+    this.connect();
+  };
+
   private disconnect = (): void => {
     this.manualClose = true;
+    this.replacingAfterBrowserRecovery = false;
     if (this.reconnectTimer !== null) {
       window.clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;

package/src/shared/lib/transport/remote-transport.service.ts

@@ -1,5 +1,6 @@
 import type { ApiError } from '@nextclaw/client-sdk';
 import type { AppEvent, AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
+import { BrowserRealtimeRecoveryService } from './browser-realtime-recovery.service';
 import { resolveTransportWebSocketUrl } from './transport-websocket-url.utils';
 
 type RemoteTarget = {
@@ -95,6 +96,9 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
   private subscribers = new Set<(event: AppEvent) => void>();
   private pendingRequests = new Map<string, PendingRequest>();
   private pendingStreams = new Map<string, PendingStream>();
+  private readonly browserRecovery = new BrowserRealtimeRecoveryService(() => {
+    this.replaceSocket();
+  });
 
   constructor(
     private readonly runtime: RemoteRuntimeInfo,
@@ -215,6 +219,7 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
 
   subscribe = (handler: (event: AppEvent) => void): () => void => {
     this.subscribers.add(handler);
+    this.browserRecovery.start();
     void this.ensureSocket().catch((error) => {
       handler({
         type: 'connection.error',
@@ -223,6 +228,9 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
     });
     return () => {
       this.subscribers.delete(handler);
+      if (this.subscribers.size === 0) {
+        this.browserRecovery.stop();
+      }
     };
   }
 
@@ -321,6 +329,28 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
     }, 3_000);
   }
 
+  private replaceSocket = (): void => {
+    if (this.subscribers.size === 0 || this.connectPromise !== null) {
+      return;
+    }
+    if (this.reconnectTimer !== null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    const staleSocket = this.socket;
+    this.socket = null;
+    if (staleSocket) {
+      staleSocket.onopen = null;
+      staleSocket.onmessage = null;
+      staleSocket.onerror = null;
+      staleSocket.onclose = null;
+      staleSocket.close();
+      this.failPendingWork(new Error('Remote transport connection replaced after browser recovery.'));
+      this.emit({ type: 'connection.close', payload: {} });
+    }
+    void this.ensureSocket().catch(() => undefined);
+  }
+
   private failPendingWork = (error: Error): void => {
     for (const pending of this.pendingRequests.values()) {
       window.clearTimeout(pending.timeoutId);