@nextclaw/ui 0.11.9 → 0.11.11

package/src/components/chat/ncp/use-ncp-session-list-view.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import { adaptNcpSessionSummaries } from '@/components/chat/ncp/ncp-session-adapter';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { useNcpSessions } from '@/hooks/useConfig';
+import type { SessionRunStatus } from '@/lib/session-run-status';
+
+export type NcpSessionListItemView = {
+  session: SessionEntryView;
+  runStatus?: SessionRunStatus;
+};
+
+function filterSessionsByQuery(sessions: readonly SessionEntryView[], query: string): SessionEntryView[] {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return [...sessions];
+  }
+
+  return sessions.filter((session) => session.key.toLowerCase().includes(normalizedQuery));
+}
+
+export function useNcpSessionListView(params: { limit?: number } = {}) {
+  const query = useChatSessionListStore((state) => state.snapshot.query);
+  const sessionsQuery = useNcpSessions({ limit: params.limit ?? 200 });
+
+  const items = useMemo<NcpSessionListItemView[]>(() => {
+    const summaries = sessionsQuery.data?.sessions ?? [];
+    const sessions = adaptNcpSessionSummaries(summaries);
+    const filteredSessions = filterSessionsByQuery(sessions, query);
+    const summaryBySessionId = new Map(summaries.map((summary) => [summary.sessionId, summary]));
+
+    return filteredSessions.map((session) => ({
+      session,
+      runStatus: summaryBySessionId.get(session.key)?.status === 'running' ? 'running' : undefined
+    }));
+  }, [query, sessionsQuery.data?.sessions]);
+
+  return {
+    isLoading: sessionsQuery.isLoading,
+    items
+  };
+}

package/src/components/chat/presenter/chat-presenter-context.tsx

@@ -3,7 +3,6 @@ import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 import type { SetStateAction } from 'react';
-import type { ChatRunStatusManager } from '@/components/chat/managers/chat-run-status.manager';
 import type { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
@@ -33,7 +32,6 @@ export type ChatInputManagerLike = {
 };
 
 export type ChatThreadManagerLike = {
-  bindActions: (patch: { refetchSessions?: () => Promise<unknown> }) => void;
   syncSnapshot: (patch: Partial<ChatThreadSnapshot>) => void;
   deleteSession: () => void;
   createSession: () => void;
@@ -45,7 +43,6 @@ export type ChatPresenterLike = {
   chatStreamActionsManager: ChatStreamActionsManager;
   chatInputManager: ChatInputManagerLike;
   chatSessionListManager: ChatSessionListManager;
-  chatRunStatusManager: ChatRunStatusManager;
   chatThreadManager: ChatThreadManagerLike;
 };
 

package/src/components/chat/stores/chat-session-list.store.ts

@@ -1,12 +1,8 @@
 import { create } from 'zustand';
-import type { SessionEntryView } from '@/api/types';
-
 export type ChatSessionListSnapshot = {
-  sessions: SessionEntryView[];
   selectedSessionKey: string | null;
   selectedAgentId: string;
   query: string;
-  isLoading: boolean;
 };
 
 type ChatSessionListStore = {
@@ -15,11 +11,9 @@ type ChatSessionListStore = {
 };
 
 const initialSnapshot: ChatSessionListSnapshot = {
-  sessions: [],
   selectedSessionKey: null,
   selectedAgentId: 'main',
-  query: '',
-  isLoading: false
+  query: ''
 };
 
 export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({

package/src/components/chat/stores/chat-thread.store.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import type { MutableRefObject } from 'react';
-import type { UiMessage } from '@nextclaw/agent-chat';
+import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 
 export type ChatThreadSnapshot = {
@@ -15,7 +15,7 @@ export type ChatThreadSnapshot = {
   isDeletePending: boolean;
   threadRef: MutableRefObject<HTMLDivElement | null> | null;
   isHistoryLoading: boolean;
-  uiMessages: UiMessage[];
+  messages: readonly NcpMessage[];
   isSending: boolean;
   isAwaitingAssistantOutput: boolean;
 };
@@ -37,7 +37,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   isDeletePending: false,
   threadRef: null,
   isHistoryLoading: false,
-  uiMessages: [],
+  messages: [],
   isSending: false,
   isAwaitingAssistantOutput: false
 };

package/src/hooks/use-realtime-query-bridge.ts

@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import { applyNcpSessionRealtimeEvent } from '@/api/ncp-session-query-cache';
 import { appClient } from '@/transport';
 import { useUiStore } from '@/stores/ui.store';
 import type { QueryClient } from '@tanstack/react-query';
@@ -30,39 +31,30 @@ function invalidateMarketplaceQueries(queryClient: QueryClient | undefined, conf
   }
 }
 
-function invalidateSessionQueries(queryClient: QueryClient | undefined, sessionKey?: string): void {
-  if (!queryClient) {
-    return;
-  }
-  queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
-  if (sessionKey && sessionKey.trim().length > 0) {
-    queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', sessionKey.trim()] });
-    return;
-  }
-  queryClient.invalidateQueries({ queryKey: ['ncp-session-messages'] });
-}
-
 function handleConfigUpdatedEvent(queryClient: QueryClient | undefined, path: string): void {
   if (queryClient && shouldInvalidateConfigQuery(path)) {
     queryClient.invalidateQueries({ queryKey: ['config'] });
   }
-  if (path.startsWith('session')) {
-    invalidateSessionQueries(queryClient);
-  }
   invalidateMarketplaceQueries(queryClient, path);
 }
 
 function handleRealtimeEvent(
   queryClient: QueryClient | undefined,
   setConnectionStatus: SetConnectionStatus,
+  shouldResyncSessionsRef: { current: boolean },
   event: Parameters<Parameters<typeof appClient.subscribe>[0]>[0]
 ): void {
   if (event.type === 'connection.open') {
     setConnectionStatus('connected');
+    if (shouldResyncSessionsRef.current) {
+      shouldResyncSessionsRef.current = false;
+      queryClient?.invalidateQueries({ queryKey: ['ncp-sessions'] });
+    }
     return;
   }
   if (event.type === 'connection.close' || event.type === 'connection.error') {
     setConnectionStatus('disconnected');
+    shouldResyncSessionsRef.current = true;
     return;
   }
   if (event.type === 'config.updated') {
@@ -70,8 +62,8 @@ function handleRealtimeEvent(
     handleConfigUpdatedEvent(queryClient, configPath);
     return;
   }
-  if (event.type === 'session.updated') {
-    invalidateSessionQueries(queryClient, event.payload.sessionKey);
+  if (event.type === 'session.summary.upsert' || event.type === 'session.summary.delete') {
+    applyNcpSessionRealtimeEvent(queryClient, event);
     return;
   }
   if (event.type === 'error') {
@@ -81,10 +73,13 @@ function handleRealtimeEvent(
 
 export function useRealtimeQueryBridge(queryClient?: QueryClient) {
   const { setConnectionStatus } = useUiStore();
+  const shouldResyncSessionsRef = useRef(false);
 
   useEffect(() => {
     setConnectionStatus('connecting');
 
-    return appClient.subscribe((event) => handleRealtimeEvent(queryClient, setConnectionStatus, event));
+    return appClient.subscribe((event) =>
+      handleRealtimeEvent(queryClient, setConnectionStatus, shouldResyncSessionsRef, event)
+    );
   }, [queryClient, setConnectionStatus]);
 }

package/src/hooks/useConfig.ts

@@ -1,4 +1,8 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  deleteNcpSessionSummaryInQueryClient,
+  upsertNcpSessionSummaryInQueryClient
+} from '@/api/ncp-session-query-cache';
 import {
   fetchAppMeta,
   fetchConfig,
@@ -230,11 +234,7 @@ export function useNcpSessions(params?: { limit?: number }) {
     queryKey: ['ncp-sessions', params?.limit ?? null],
     queryFn: () => fetchNcpSessions(params),
     staleTime: 5_000,
-    retry: false,
-    refetchInterval: (query) => {
-      const hasRunningSession = Boolean(query.state.data?.sessions.some((session) => session.status === 'running'));
-      return hasRunningSession ? 800 : false;
-    }
+    retry: false
   });
 }
 
@@ -253,9 +253,9 @@ export function useDeleteNcpSession() {
 
   return useMutation({
     mutationFn: ({ sessionId }: { sessionId: string }) => deleteNcpSession(sessionId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
-      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages'] });
+    onSuccess: (_data, variables) => {
+      deleteNcpSessionSummaryInQueryClient(queryClient, variables.sessionId);
+      queryClient.removeQueries({ queryKey: ['ncp-session-messages', variables.sessionId] });
       toast.success(t('configSavedApplied'));
     },
     onError: (error: Error) => {
@@ -270,9 +270,8 @@ export function useUpdateNcpSession() {
   return useMutation({
     mutationFn: ({ sessionId, data }: { sessionId: string; data: Parameters<typeof updateNcpSession>[1] }) =>
       updateNcpSession(sessionId, data),
-    onSuccess: (_data, variables) => {
-      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
-      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', variables.sessionId] });
+    onSuccess: (data) => {
+      upsertNcpSessionSummaryInQueryClient(queryClient, data);
       toast.success(t('configSavedApplied'));
     },
     onError: (error: Error) => {