@nextclaw/ui 0.24.3 → 0.25.0

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -31,6 +31,22 @@ function buildDiscoveredModelGroups(options: ChatModelRecord[]) {
   return [...groups.values()];
 }
 
+function buildRemainingModelGroups(options: ChatModelRecord[], allModelsLabel: string) {
+  const groups = new Map<string, { key: string; label: string; options: Array<{ value: string; label: string }> }>();
+  for (const option of options) {
+    const separatorIndex = option.value.indexOf('/');
+    const providerKey = separatorIndex > 0 ? option.value.slice(0, separatorIndex) : "other";
+    const group = groups.get(providerKey) ?? {
+      key: `provider-${providerKey}`,
+      label: option.providerLabel.trim() || allModelsLabel,
+      options: [],
+    };
+    group.options.push({ value: option.value, label: option.modelLabel.trim() });
+    groups.set(providerKey, group);
+  }
+  return [...groups.values()];
+}
+
 export function toChatModelRecords(snapshotModels: ChatModelOption[]): ChatModelRecord[] {
   return snapshotModels.map((model) => ({
     value: model.value,
@@ -183,8 +199,9 @@ export function buildModelToolbarSelect({
   const remainingOptions = modelOptions.filter(
     (option) => !favoriteValueSet.has(option.value) && !recentValueSet.has(option.value),
   );
-  const optionGroups = favoriteOptions.length > 0 || recentOptions.length > 0
-    ? [
+  const groups = [
+    ...(favoriteOptions.length > 0
+      ? [
           {
             key: "favorite-models",
             label: texts.favoriteModelsLabel,
@@ -193,6 +210,10 @@ export function buildModelToolbarSelect({
               label: formatModelOptionLabel(option),
             })),
           },
+        ]
+      : []),
+    ...(recentOptions.length > 0
+      ? [
           {
             key: "recent-models",
             label: texts.recentModelsLabel,
@@ -201,16 +222,11 @@ export function buildModelToolbarSelect({
               label: formatModelOptionLabel(option),
             })),
           },
-          {
-            key: "all-models",
-            label: texts.allModelsLabel,
-            options: remainingOptions.map((option) => ({
-              value: option.value,
-              label: formatModelOptionLabel(option),
-            })),
-          },
-        ].filter((group) => group.options.length > 0)
-    : undefined;
+        ]
+      : []),
+    ...buildRemainingModelGroups(remainingOptions, texts.allModelsLabel),
+  ].filter((group) => group.options.length > 0);
+  const optionGroups = groups.length > 0 ? groups : undefined;
   const discoveryOptions = discoveredModelOptions ?? [];
 
   return {

package/src/features/chat/features/message/utils/__tests__/chat-message-process-summary.utils.test.ts

@@ -1,4 +1,5 @@
-import type { NcpMessage } from "@nextclaw/ncp";
+import { NcpEventType, type NcpMessage } from "@nextclaw/ncp";
+import { DefaultNcpAgentConversationStateManager } from "@nextclaw/ncp-toolkit";
 import { describe, expect, it } from "vitest";
 import { buildChatMessageProcessSummary } from "@/features/chat/features/message/utils/chat-message-process-summary.utils";
 
@@ -29,6 +30,23 @@ const baseAssistantMessage = {
 } satisfies NcpMessage;
 
 describe("buildChatMessageProcessSummary", () => {
+  it("shows elapsed time from the real completed-message then run-finished event sequence", async () => {
+    const manager = new DefaultNcpAgentConversationStateManager();
+    await manager.dispatchBatch([
+      { type: NcpEventType.RunStarted, payload: { sessionId: "session-1", runId: "run-1" } },
+      { type: NcpEventType.MessageCompleted, payload: { sessionId: "session-1", message: baseAssistantMessage } },
+      {
+        type: NcpEventType.RunFinished,
+        payload: {
+          sessionId: "session-1", runId: "run-1", messageId: baseAssistantMessage.id,
+          startedAt: "2026-03-31T10:00:00.000Z", endedAt: "2026-03-31T10:03:51.000Z",
+        },
+      },
+    ]);
+    const message = manager.getSnapshot().messages[0]!;
+    expect(buildChatMessageProcessSummary({ message, processedLabel: "已处理" })?.label).toBe("已处理 3m 51s");
+  });
+
   it("does not invent duration when lifecycle timing is absent", () => {
     expect(
       buildChatMessageProcessSummary({

package/src/features/chat/features/message/utils/__tests__/chat-message.utils.test.ts

@@ -242,10 +242,11 @@ it("preserves full generic tool args for the expanded body while keeping the hea
 
 it("keeps structured terminal results as structured data instead of raw json output", () => {
   const terminalResult = {
-    status: "completed",
-    command: "python3 -m http.server 8765",
-    aggregated_output: "",
-    exit_code: 0,
+    ok: true,
+    command: "nextclaw --version",
+    exitCode: 0,
+    stdout: "0.48.3\n",
+    stderr: "",
   };
 
   const adapted = adapt([
@@ -259,7 +260,7 @@ it("keeps structured terminal results as structured data instead of raw json out
             status: ToolInvocationStatus.RESULT,
             toolCallId: "call-terminal-result",
             toolName: "command_execution",
-            args: '{"command":"python3 -m http.server 8765"}',
+            args: '{"command":"nextclaw --version"}',
             result: terminalResult,
           },
         },
@@ -271,7 +272,7 @@ it("keeps structured terminal results as structured data instead of raw json out
     type: "tool-card",
     card: {
       toolName: "command_execution",
-      summary: "command: python3 -m http.server 8765",
+      summary: "command: nextclaw --version",
       output: undefined,
       outputData: terminalResult,
       statusTone: "success",

package/src/features/chat/features/message/utils/chat-message-part.utils.ts

@@ -174,7 +174,10 @@ function buildToolInvocationPart(
     detail,
     inputData: fileOperationCardData ? undefined : invocation.parsedArgs ?? invocation.args,
     text: shouldShowRawResult && rawResult ? rawResult : undefined,
-    outputData: shouldShowRawResult ? invocation.result : undefined,
+    outputData:
+      shouldShowRawResult || shouldHideStructuredTerminalJson
+        ? invocation.result
+        : undefined,
     callId: invocation.toolCallId || undefined,
     toolCallId: invocation.toolCallId || undefined,
     ...(invocation.execution ? { execution: invocation.execution } : {}),

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-agent-runtime.test.tsx

@@ -513,6 +513,26 @@ describe("useNcpAgentRuntime", () => {
 });
 
 describe("useNcpAgentRuntime commands and live stream", () => {
+  it("keeps the run active after message completion and settles immediately on the terminal event", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const { result } = renderHook(() => useNcpAgentRuntime({ sessionId: "session-1", client, manager }));
+    await act(async () => {
+      await client.emit({ type: NcpEventType.RunStarted, payload: { sessionId: "session-1", runId: "run-1" } });
+      await client.emit({ type: NcpEventType.MessageCompleted, payload: {
+        sessionId: "session-1",
+        message: { id: "assistant-1", sessionId: "session-1", role: "assistant", status: "final", timestamp: now, parts: [{ type: "text", text: "Done" }] },
+      } });
+    });
+    await waitFor(() => expect(result.current.visibleMessages[0]?.status).toBe("final"));
+    expect(result.current.isRunning).toBe(true);
+    await act(async () => {
+      await client.emit({ type: NcpEventType.RunFinished, payload: { sessionId: "session-1", runId: "run-1", messageId: "assistant-1" } });
+    });
+    await waitFor(() => expect(result.current.isRunning).toBe(false));
+    expect(result.current.isSending).toBe(false);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });

package/src/features/chat/index.ts

@@ -22,3 +22,4 @@ export {
   resolveSessionTypeLabel,
   type ChatSessionTypeOption,
 } from "./features/session-type/utils/chat-session-type.utils";
+export { ChatVoiceShortcutControl } from './features/conversation/components/chat-voice-shortcut-control';

package/src/features/chat/managers/chat-voice-input.manager.ts

@@ -0,0 +1,174 @@
+import type { ChatComposerDictationSession } from '@nextclaw/agent-chat-ui';
+
+export type VoicePhase = 'idle' | 'ready' | 'starting' | 'recording' | 'stopping' | 'error';
+export type VoiceError = 'unsupported' | 'permission' | 'network' | 'audio-capture' | 'no-speech' | 'interrupted' | 'timeout' | 'failed';
+export type VoiceSnapshot = { phase: VoicePhase; text: string; interim: string; seconds: number; error: VoiceError | null };
+export type SpeechRecognitionLike = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+  onstart: (() => void) | null;
+  onresult: ((event: { results: ArrayLike<{ isFinal: boolean; 0: { transcript: string } }> }) => void) | null;
+  onend: (() => void) | null;
+  onerror: ((event: { error: string }) => void) | null;
+};
+type RecognitionConstructor = new () => SpeechRecognitionLike;
+const createBrowserRecognition = (): SpeechRecognitionLike | null => {
+  const host = window as Window & { SpeechRecognition?: RecognitionConstructor; webkitSpeechRecognition?: RecognitionConstructor };
+  const Constructor = host.SpeechRecognition ?? host.webkitSpeechRecognition;
+  return Constructor ? new Constructor() : null;
+};
+const initialSnapshot = (): VoiceSnapshot => ({ phase: 'idle', text: '', interim: '', seconds: 0, error: null });
+const isActive = (phase: VoicePhase) => ['starting', 'recording', 'stopping'].includes(phase);
+
+/** Owns one explicit dictation session; never writes to the chat draft or sends messages. */
+export class ChatVoiceInputManager {
+  private snapshot = initialSnapshot();
+  private listeners = new Set<() => void>();
+  private recognition: SpeechRecognitionLike | null = null;
+  private deadline: ReturnType<typeof setTimeout> | undefined;
+  private ticker: ReturnType<typeof setInterval> | undefined;
+  private context = '';
+  private settingsRequested = false;
+  private draft: ChatComposerDictationSession | null = null;
+
+  constructor(private readonly createRecognition = createBrowserRecognition) {}
+
+  getSnapshot = (): VoiceSnapshot => this.snapshot;
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => { this.listeners.delete(listener); };
+  };
+  private update = (patch: Partial<VoiceSnapshot>): void => {
+    this.snapshot = { ...this.snapshot, ...patch };
+    this.listeners.forEach((listener) => listener());
+  };
+  open = (context: string): void => {
+    if (this.snapshot.phase !== 'idle') return;
+    this.context = context;
+    this.update({ ...initialSnapshot(), phase: 'ready' });
+  };
+  openSettings = (): void => {
+    this.settingsRequested = true;
+    if (this.snapshot.phase === 'recording') { this.finish(); return; }
+    if (this.snapshot.phase === 'stopping') return;
+    const { context } = this;
+    this.acceptDraft();
+    this.open(context);
+  };
+  start = (language: string, context: string, draft: ChatComposerDictationSession | null): void => {
+    if (isActive(this.snapshot.phase)) return;
+    if (!draft) return;
+    this.release();
+    this.context = context;
+    this.draft = draft;
+    this.update({ ...initialSnapshot(), phase: 'starting' });
+    try {
+      const recognition = this.createRecognition();
+      if (!recognition) { this.fail('unsupported'); return; }
+      this.recognition = recognition;
+      recognition.lang = language === 'zh' ? 'zh-CN' : 'en-US';
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      this.connect(recognition);
+      this.setDeadline(15000);
+      recognition.start();
+    } catch { this.fail('failed'); }
+  };
+  private connect = (recognition: SpeechRecognitionLike): void => {
+    recognition.onstart = () => {
+      if (this.recognition !== recognition || this.snapshot.phase !== 'starting') return;
+      clearTimeout(this.deadline);
+      this.update({ phase: 'recording' });
+      const started = Date.now();
+      this.ticker = setInterval(() => {
+        const seconds = Math.floor((Date.now() - started) / 1000);
+        this.update({ seconds });
+        if (seconds >= 60) this.finish();
+      }, 1000);
+    };
+    recognition.onresult = (event) => {
+      if (this.recognition !== recognition) return;
+      const finals: string[] = [];
+      const interim: string[] = [];
+      for (let i = 0; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        const text = result[0]?.transcript?.trim();
+        if (text) (result.isFinal ? finals : interim).push(text);
+      }
+      this.update({ text: finals.join(' '), interim: interim.join(' ') });
+      this.draft?.update(this.snapshot.text, this.snapshot.interim);
+    };
+    recognition.onerror = ({ error }) => {
+      if (this.recognition !== recognition) return;
+      const reason: VoiceError = error === 'not-allowed' || error === 'service-not-allowed'
+        ? 'permission'
+        : error === 'network' || error === 'audio-capture' || error === 'no-speech' ? error : 'failed';
+      this.fail(reason);
+    };
+    recognition.onend = () => {
+      if (this.recognition !== recognition) return;
+      const text = this.snapshot.text.trim();
+      this.release(false);
+      if (!text) { this.fail('no-speech'); return; }
+      this.draft?.commit(text);
+      this.draft = null;
+      const { settingsRequested, context } = this;
+      this.cancel();
+      if (settingsRequested) this.open(context);
+    };
+  };
+  finish = (): void => {
+    if (this.snapshot.phase === 'starting') { this.cancel(); return; }
+    if (this.snapshot.phase !== 'recording' || !this.recognition) return;
+    clearInterval(this.ticker);
+    this.update({ phase: 'stopping' });
+    this.setDeadline(8000);
+    try { this.recognition.stop(); } catch { this.fail('failed'); }
+  };
+  interrupt = (): void => {
+    if (isActive(this.snapshot.phase)) this.fail('interrupted');
+  };
+  acceptDraft = (): void => {
+    this.draft?.commit();
+    this.draft = null;
+    this.cancel();
+  };
+  cancel = (): void => {
+    this.settingsRequested = false;
+    this.release();
+    this.context = '';
+    this.draft?.cancel();
+    this.draft = null;
+    this.update(initialSnapshot());
+  };
+  private fail = (error: VoiceError): void => {
+    this.release();
+    if (this.snapshot.text) this.draft?.commit(this.snapshot.text);
+    else this.draft?.cancel();
+    this.draft = null;
+    this.update(this.settingsRequested ? { ...initialSnapshot(), phase: 'ready' } : { phase: 'error', error, interim: '' });
+    this.settingsRequested = false;
+  };
+  private setDeadline = (milliseconds: number): void => {
+    clearTimeout(this.deadline);
+    this.deadline = setTimeout(() => this.fail('timeout'), milliseconds);
+  };
+  private release = (abort = true): void => {
+    clearTimeout(this.deadline);
+    clearInterval(this.ticker);
+    const { recognition } = this;
+    this.recognition = null;
+    if (!recognition) return;
+    recognition.onstart = null;
+    recognition.onend = null;
+    recognition.onerror = null;
+    recognition.onresult = null;
+    if (abort) {
+      try { recognition.abort(); } catch { /* Already released by the browser. */ }
+    }
+  };
+}

package/src/features/chat/presenters/chat.presenter.ts

@@ -4,8 +4,10 @@ import { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 import type { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
 import type { AppPresenter } from '@/app/presenters/app.presenter';
+import { ChatVoiceInputManager } from '@/features/chat/managers/chat-voice-input.manager';
 
 export class ChatPresenter {
+  readonly chatVoiceInputManager = new ChatVoiceInputManager();
   readonly chatUiManager: ChatUiManager;
   readonly chatSessionListManager: ChatSessionListManager;
   readonly chatQueryManager: ChatQueryManager;

package/src/features/chat/stores/chat-voice-shortcut.store.ts

@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export type VoiceShortcut = { code: string; ctrl: boolean; meta: boolean; alt: boolean; shift: boolean };
+export function isVoiceShortcut(value: unknown): value is VoiceShortcut {
+  if (!value || typeof value !== 'object') return false;
+  const key = value as VoiceShortcut;
+  const unmodified = key.ctrl === false && key.meta === false && key.alt === false && key.shift === false;
+  return typeof key.code === 'string' && (/^Key[A-Z]$/.test(key.code) || /^F(?:[6-9]|10)$/.test(key.code)) &&
+    typeof key.ctrl === 'boolean' && typeof key.meta === 'boolean' &&
+    typeof key.alt === 'boolean' && typeof key.shift === 'boolean' &&
+    (unmodified || (key.alt && key.ctrl !== key.meta));
+}
+
+type ShortcutState = { shortcut: VoiceShortcut | null; setShortcut: (shortcut: VoiceShortcut | null) => void };
+export const useChatVoiceShortcutStore = create<ShortcutState>()(persist(
+  (set) => ({ shortcut: null, setShortcut: (shortcut) => set({ shortcut }) }),
+  {
+    name: 'nextclaw.chat.voice-shortcut', version: 1,
+    storage: createJSONStorage(() => window.localStorage),
+    partialize: (state) => ({ shortcut: state.shortcut }),
+    merge: (persisted, current) => {
+      const value = (persisted as { shortcut?: unknown } | null)?.shortcut;
+      return { ...current, shortcut: isVoiceShortcut(value) ? value : null };
+    },
+  },
+));
+
+export function voiceShortcutLabel(shortcut: VoiceShortcut): string {
+  return [shortcut.ctrl && 'Ctrl', shortcut.meta && '⌘', shortcut.alt && 'Alt/⌥', shortcut.shift && 'Shift', shortcut.code.replace(/^Key/, '')].filter(Boolean).join(' + ');
+}

package/src/features/desktop-capabilities/index.ts

@@ -1 +1,2 @@
 export { DesktopAuthorizationDialog } from "./components/desktop-authorization-dialog";
+export { useDesktopCapabilityAvailability } from './hooks/use-desktop-capabilities';

package/src/features/settings/pages/keyboard-shortcuts-settings-page.tsx

@@ -0,0 +1,15 @@
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
+import { ChatVoiceShortcutControl } from '@/features/chat';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
+import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
+import { t } from '@/shared/lib/i18n';
+
+export function KeyboardShortcutsSettingsPage() {
+  const { isMobile } = useViewportLayout();
+  return <SettingsPage title={t('keyboardShortcuts')}>
+    {isMobile ? <p className='text-sm text-muted-foreground'>{t('keyboardShortcutsDesktopOnly')}</p> :
+      <SettingsSection><SettingsGroup>
+        <SettingRow title={t('chatInputVoice')} layout='stacked'><ChatVoiceShortcutControl /></SettingRow>
+      </SettingsGroup></SettingsSection>}
+  </SettingsPage>;
+}

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -2,11 +2,12 @@ import { NavLink } from "react-router-dom";
 import { getSettingsNavItems } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
-import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities/hooks/use-desktop-capabilities";
+import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities";
 
 export function MobileSettingsShell() {
   const desktopCapabilityAvailable = useDesktopCapabilityAvailability();
   const settingsNavItems = getSettingsNavItems(t, {
+    includeKeyboardShortcuts: false,
     includeDesktopCapabilities: desktopCapabilityAvailable,
   });
 

package/src/shared/lib/api/__tests__/ncp-session-query-cache.utils.test.ts

@@ -1,4 +1,4 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, type InfiniteData } from '@tanstack/react-query';
 import { describe, expect, it } from 'vitest';
 import {
   applyNcpSessionRealtimeEvent,
@@ -262,3 +262,111 @@ describe('ncp-session-query-cache', () => {
     expect(queryClient.getQueryData<NcpSessionsListView>(['ncp-sessions', 200, 'peer-b'])?.sessions).toEqual([]);
   });
 });
+
+describe('paginated ncp session realtime cache', () => {
+  it('updates existing paginated summaries without invalidating the session pages', () => {
+    const queryClient = new QueryClient();
+    const queryKey = ['ncp-session-pages', 1, null] as const;
+    const current = createSessionsList();
+    queryClient.setQueryData<InfiniteData<NcpSessionsListView>>(queryKey, {
+      pages: [
+        { ...current, sessions: [current.sessions[0]!], page: 1, pageSize: 1, hasMore: true },
+        { ...current, sessions: [current.sessions[1]!], page: 2, pageSize: 1, hasMore: false }
+      ],
+      pageParams: [1, 2]
+    });
+
+    applyNcpSessionRealtimeEvent(queryClient, {
+      type: 'session.summary.upsert',
+      payload: {
+        summary: {
+          ...current.sessions[1]!,
+          updatedAt: '2026-03-29T11:00:00.000Z',
+          lastMessageAt: '2026-03-29T11:00:00.000Z',
+          messageCount: 3
+        }
+      }
+    });
+
+    const updated = queryClient.getQueryData<InfiniteData<NcpSessionsListView>>(queryKey);
+    expect(updated?.pages.map((page) => page.sessions[0]?.sessionId)).toEqual(['session-2', 'session-1']);
+    expect(queryClient.getQueryState(queryKey)?.isInvalidated).toBe(false);
+  });
+
+  it('invalidates paginated session queries when an upsert changes their membership', () => {
+    const queryClient = new QueryClient();
+    const queryKey = ['ncp-session-pages', 100, null] as const;
+    queryClient.setQueryData<InfiniteData<NcpSessionsListView>>(queryKey, {
+      pages: [{ ...createSessionsList(), page: 1, pageSize: 100, hasMore: false }],
+      pageParams: [1]
+    });
+
+    applyNcpSessionRealtimeEvent(queryClient, {
+      type: 'session.summary.upsert',
+      payload: {
+        summary: {
+          sessionId: 'session-3',
+          messageCount: 1,
+          updatedAt: '2026-03-29T12:00:00.000Z',
+          status: 'idle'
+        }
+      }
+    });
+
+    expect(queryClient.getQueryState(queryKey)?.isInvalidated).toBe(true);
+  });
+
+  it('patches paginated run status without invalidating the session pages', () => {
+    const queryClient = new QueryClient();
+    const queryKey = ['ncp-session-pages', 100, null] as const;
+    queryClient.setQueryData<InfiniteData<NcpSessionsListView>>(queryKey, {
+      pages: [{ ...createSessionsList(), page: 1, pageSize: 100, hasMore: false }],
+      pageParams: [1]
+    });
+
+    applyNcpSessionRealtimeEvent(queryClient, {
+      type: 'session.run-status',
+      payload: { sessionKey: 'session-2', status: 'running' }
+    });
+
+    const updated = queryClient.getQueryData<InfiniteData<NcpSessionsListView>>(queryKey);
+    expect(updated?.pages[0]?.sessions[1]).toMatchObject({
+      sessionId: 'session-2',
+      messageCount: 2,
+      status: 'running'
+    });
+    expect(queryClient.getQueryState(queryKey)?.isInvalidated).toBe(false);
+  });
+
+  it('invalidates filtered paginated queries when an upsert may change search membership', () => {
+    const queryClient = new QueryClient();
+    const queryKey = ['ncp-session-pages', 100, 'journal'] as const;
+    queryClient.setQueryData<InfiniteData<NcpSessionsListView>>(queryKey, {
+      pages: [{ ...createSessionsList(), page: 1, pageSize: 100, hasMore: false }],
+      pageParams: [1]
+    });
+
+    applyNcpSessionRealtimeEvent(queryClient, {
+      type: 'session.summary.upsert',
+      payload: { summary: { ...createSessionsList().sessions[0]!, metadata: { label: 'Journal' } } }
+    });
+
+    expect(queryClient.getQueryState(queryKey)?.isInvalidated).toBe(true);
+  });
+
+  it('invalidates paginated queries after deletion changes their membership', () => {
+    const queryClient = new QueryClient();
+    const queryKey = ['ncp-session-pages', 100, null] as const;
+    queryClient.setQueryData<InfiniteData<NcpSessionsListView>>(queryKey, {
+      pages: [{ ...createSessionsList(), page: 1, pageSize: 100, hasMore: false }],
+      pageParams: [1]
+    });
+
+    applyNcpSessionRealtimeEvent(queryClient, {
+      type: 'session.summary.delete',
+      payload: { sessionKey: 'session-1' }
+    });
+
+    expect(queryClient.getQueryState(queryKey)?.isInvalidated).toBe(true);
+  });
+});

package/src/shared/lib/api/ncp-session-query-cache.utils.ts

@@ -1,4 +1,4 @@
-import type { QueryClient } from '@tanstack/react-query';
+import type { InfiniteData, QueryClient } from '@tanstack/react-query';
 import type { NcpSessionSummaryView, NcpSessionsListView, WsEvent } from '@/shared/lib/api';
 
 function readSessionActivityAt(summary: NcpSessionSummaryView): string {
@@ -26,6 +26,73 @@ function queryKeyAcceptsSessionSummary(queryKey: readonly unknown[], summary: Nc
   return !peerId || summary.peerId === peerId;
 }
 
+function updateSessionPages(
+  current: InfiniteData<NcpSessionsListView> | undefined,
+  update: (sessions: NcpSessionsListView) => NcpSessionsListView | undefined
+): InfiniteData<NcpSessionsListView> | undefined {
+  if (!current) return current;
+  const pageLengths = current.pages.map((page) => page.sessions.length);
+  const sessions = current.pages.flatMap((page) => page.sessions);
+  const updated = update({
+    sessions,
+    total: current.pages[0]?.total ?? sessions.length
+  });
+  if (!updated) return current;
+  let offset = 0;
+  return {
+    ...current,
+    pages: current.pages.map((page, index) => {
+      const nextOffset = offset + (pageLengths[index] ?? 0);
+      const nextPage = {
+        ...page,
+        sessions: updated.sessions.slice(offset, nextOffset)
+      };
+      offset = nextOffset;
+      return nextPage;
+    })
+  };
+}
+
+function updateExistingNcpSessionSummaryPages(
+  queryClient: QueryClient | undefined,
+  summary: NcpSessionSummaryView
+): void {
+  if (!queryClient) return;
+  const entries = queryClient.getQueriesData<InfiniteData<NcpSessionsListView>>({
+    queryKey: ['ncp-session-pages']
+  });
+  for (const [queryKey, current] of entries) {
+    const query = typeof queryKey[2] === 'string' ? queryKey[2].trim() : '';
+    const containsSession = current?.pages.some((page) =>
+      page.sessions.some((session) => session.sessionId === summary.sessionId)
+    );
+    if (query || !containsSession) {
+      void queryClient.invalidateQueries({ queryKey, exact: true });
+      continue;
+    }
+    queryClient.setQueryData<InfiniteData<NcpSessionsListView>>(
+      queryKey,
+      (value) => updateSessionPages(
+        value,
+        (sessions) => upsertNcpSessionSummaryList(sessions, summary)
+      )
+    );
+  }
+}
+
+function updateNcpSessionRunStatusPages(
+  queryClient: QueryClient | undefined,
+  payload: { sessionKey: string; status: 'running' | 'idle' }
+): void {
+  queryClient?.setQueriesData<InfiniteData<NcpSessionsListView>>(
+    { queryKey: ['ncp-session-pages'] },
+    (current) => updateSessionPages(
+      current,
+      (sessions) => updateNcpSessionRunStatusList(sessions, payload)
+    )
+  );
+}
+
 export function upsertNcpSessionSummaryList(
   current: NcpSessionsListView | undefined,
   summary: NcpSessionSummaryView
@@ -149,13 +216,14 @@ export function applyNcpSessionRealtimeEvent(
   queryClient: QueryClient | undefined,
   event: Extract<WsEvent, { type: 'session.run-status' | 'session.summary.upsert' | 'session.summary.delete' }>
 ): void {
-  void queryClient?.invalidateQueries({ queryKey: ['ncp-session-pages'] });
   if (event.type === 'session.run-status') {
     updateNcpSessionRunStatusInQueryClient(queryClient, event.payload);
+    updateNcpSessionRunStatusPages(queryClient, event.payload);
     return;
   }
   if (event.type === 'session.summary.upsert') {
     upsertNcpSessionSummaryInQueryClient(queryClient, event.payload.summary);
+    updateExistingNcpSessionSummaryPages(queryClient, event.payload.summary);
     void queryClient?.invalidateQueries({
       queryKey: ['ncp-session-token-usage', event.payload.summary.sessionId],
       exact: true,
@@ -164,4 +232,5 @@ export function applyNcpSessionRealtimeEvent(
   }
 
   deleteNcpSessionSummaryInQueryClient(queryClient, event.payload.sessionKey);
+  void queryClient?.invalidateQueries({ queryKey: ['ncp-session-pages'] });
 }