@nextclaw/ui 0.11.8 → 0.11.10

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) => {