@nextclaw/ui 0.25.2 → 0.25.4

package/src/app/hooks/use-app-event-consumers.ts

@@ -3,6 +3,7 @@ import { eventKeys } from '@nextclaw/shared';
 import { applyNcpSessionRealtimeEvent, nextclawClient } from '@/shared/lib/api';
 import { runtimeUpdateManager, systemStatusManager } from '@/features/system-status';
 import type { QueryClient } from '@tanstack/react-query';
+import { useChatSessionListStore } from '@/features/chat';
 
 function shouldInvalidateConfigQuery(configPath: string) {
   const normalized = configPath.trim().toLowerCase();
@@ -55,7 +56,9 @@ export function useAppEventConsumers(queryClient?: QueryClient) {
       void runtimeUpdateManager.refreshAfterRealtimeReconnect();
       if (shouldResyncSessionsRef.current) {
         shouldResyncSessionsRef.current = false;
+        useChatSessionListStore.getState().clearSessionRunStatuses();
         queryClient?.invalidateQueries({ queryKey: ['ncp-sessions'] });
+        queryClient?.invalidateQueries({ queryKey: ['ncp-session-pages'] });
       }
     });
     const unsubscribeConnectionClose = nextclawClient.eventBus.on(eventKeys.connectionClose, () => {
@@ -77,12 +80,14 @@ export function useAppEventConsumers(queryClient?: QueryClient) {
       runtimeUpdateManager.reportSnapshot(snapshot);
     });
     const unsubscribeSessionRunStatus = nextclawClient.eventBus.on(eventKeys.sessionRunStatus, (payload) => {
+      useChatSessionListStore.getState().setSessionRunStatus(payload.sessionKey, payload.status);
       applyNcpSessionRealtimeEvent(queryClient, { type: 'session.run-status', payload });
     });
     const unsubscribeSessionSummaryUpsert = nextclawClient.eventBus.on(eventKeys.sessionSummaryUpsert, (payload) => {
       applyNcpSessionRealtimeEvent(queryClient, { type: 'session.summary.upsert', payload });
     });
     const unsubscribeSessionSummaryDelete = nextclawClient.eventBus.on(eventKeys.sessionSummaryDelete, (payload) => {
+      useChatSessionListStore.getState().setSessionRunStatus(payload.sessionKey, 'idle');
       applyNcpSessionRealtimeEvent(queryClient, { type: 'session.summary.delete', payload });
     });
     const unsubscribeError = nextclawClient.eventBus.on(eventKeys.error, (payload) => {

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-session-list-view.test.tsx

@@ -1,5 +1,6 @@
-import { renderHook } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useNcpChildSessionTabsView } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 import { useNcpSessionListView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import type { NcpSessionSummaryView } from "@/shared/lib/api";
@@ -9,6 +10,11 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-queries", () => ({
+  useNcpSessions: () => ({
+    data: {
+      sessions: mocks.sessions,
+    },
+  }),
   useInfiniteNcpSessions: () => ({
     data: {
       pages: [{
@@ -50,6 +56,7 @@ describe("useNcpSessionListView", () => {
       createSummary("session:beta", "Beta Task"),
     ];
     useChatSessionListStore.setState({
+      runningSessionKeys: [],
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
         query: "",
@@ -100,4 +107,40 @@ describe("useNcpSessionListView", () => {
       "session:alpha:child",
     ]);
   });
+
+  it("keeps a realtime running overlay when the persisted summary is still idle", () => {
+    useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "running");
+
+    const { result } = renderHook(() => useNcpSessionListView());
+
+    expect(result.current.items[0]).toMatchObject({
+      session: { key: "session:alpha", status: "idle" },
+      runStatus: "running",
+    });
+  });
+
+  it("clears the realtime running overlay when the session becomes idle", () => {
+    useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "running");
+    const { result } = renderHook(() => useNcpSessionListView());
+
+    act(() => {
+      useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "idle");
+    });
+
+    expect(result.current.items[0]?.runStatus).toBeUndefined();
+  });
+
+  it("projects the same realtime running overlay into child session tabs", () => {
+    useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "running");
+
+    const { result } = renderHook(() => useNcpChildSessionTabsView([{
+      sessionKey: "session:alpha",
+      parentSessionKey: "session:parent",
+    }]));
+
+    expect(result.current[0]).toMatchObject({
+      sessionKey: "session:alpha",
+      runStatus: "running",
+    });
+  });
 });

package/src/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view.ts

@@ -5,6 +5,7 @@ import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils
 import { resolveSessionTypeLabel } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { ChatChildSessionTab } from "@/features/chat/stores/chat-thread.store";
 import { useNcpSessions } from "@/features/chat/features/ncp/hooks/use-ncp-session-queries";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
 
 export type ResolvedChildSessionTab = {
@@ -39,6 +40,7 @@ export function useNcpChildSessionTabsView(
   tabs: readonly ChatChildSessionTab[],
 ): ResolvedChildSessionTab[] {
   const sessionsQuery = useNcpSessions({ limit: 200 });
+  const runningSessionKeys = useChatSessionListStore((state) => state.runningSessionKeys);
   const summaries = useMemo(
     () => sessionsQuery.data?.sessions ?? [],
     [sessionsQuery.data?.sessions],
@@ -48,6 +50,10 @@ export function useNcpChildSessionTabsView(
     const sessions = adaptNcpSessionSummaries(summaries);
     return new Map(sessions.map((session) => [session.key, session]));
   }, [summaries]);
+  const runningSessionKeySet = useMemo(
+    () => new Set(runningSessionKeys),
+    [runningSessionKeys],
+  );
 
   return useMemo(
     () =>
@@ -62,7 +68,9 @@ export function useNcpChildSessionTabsView(
           updatedAt: session?.updatedAt ?? null,
           lastMessageAt: session?.lastMessageAt ?? null,
           readAt: session?.readAt ?? null,
-          runStatus: session?.status === "running" ? "running" : undefined,
+          runStatus: runningSessionKeySet.has(tab.sessionKey) || session?.status === "running"
+            ? "running"
+            : undefined,
           sessionTypeLabel: session?.sessionType
             ? resolveSessionTypeLabel(session.sessionType)
             : null,
@@ -71,6 +79,6 @@ export function useNcpChildSessionTabsView(
           projectRoot: session?.projectRoot?.trim() || null,
         };
       }),
-    [sessionByKey, tabs],
+    [runningSessionKeySet, sessionByKey, tabs],
   );
 }

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

@@ -29,6 +29,7 @@ export function useNcpSessionListView(
   params: { limit?: number; query?: string | null } = {},
 ) {
   const storedQuery = useChatSessionListStore((state) => state.snapshot.query);
+  const runningSessionKeys = useChatSessionListStore((state) => state.runningSessionKeys);
   const query = params.query ?? storedQuery;
   const deferredQuery = useDeferredValue(query);
   const sessionsQuery = useInfiniteNcpSessions({
@@ -38,11 +39,14 @@ export function useNcpSessionListView(
 
   const allItems = useMemo<NcpSessionListItemView[]>(() => {
     const summaries = sessionsQuery.data?.pages.flatMap((page) => page.sessions) ?? [];
+    const runningSessionKeySet = new Set(runningSessionKeys);
     return adaptNcpSessionSummaries(summaries).map((session) => ({
       session,
-      runStatus: session.status === "running" ? "running" : undefined,
+      runStatus: runningSessionKeySet.has(session.key) || session.status === "running"
+        ? "running"
+        : undefined,
     }));
-  }, [sessionsQuery.data?.pages]);
+  }, [runningSessionKeys, sessionsQuery.data?.pages]);
   const items = useMemo<NcpSessionListItemView[]>(() => {
     const visibleItems = allItems.filter(({ session }) =>
       shouldShowSessionInSidebar(session),

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

@@ -78,8 +78,11 @@ export function shouldShowUnreadSessionIndicator(params: {
 type ChatSessionListStore = {
   snapshot: ChatSessionListSnapshot;
   optimisticReadAtBySessionKey: Record<string, string>;
+  runningSessionKeys: string[];
   setSnapshot: (patch: Partial<ChatSessionListSnapshot>) => void;
   markSessionRead: (sessionKey: string, readAt: string | null | undefined) => void;
+  setSessionRunStatus: (sessionKey: string, status: 'running' | 'idle') => void;
+  clearSessionRunStatuses: () => void;
 };
 
 type ChatSessionListStoreSet = Parameters<StateCreator<ChatSessionListStore>>[0];
@@ -126,13 +129,36 @@ function createMarkSessionReadAction(set: ChatSessionListStoreSet) {
     });
 }
 
+function createSetSessionRunStatusAction(set: ChatSessionListStoreSet) {
+  return (sessionKey: string, status: 'running' | 'idle') =>
+    set((state) => {
+      const normalizedSessionKey = sessionKey.trim();
+      if (!normalizedSessionKey) {
+        return state;
+      }
+      const isRunning = state.runningSessionKeys.includes(normalizedSessionKey);
+      if ((status === 'running') === isRunning) {
+        return state;
+      }
+      return {
+        ...state,
+        runningSessionKeys: status === 'running'
+          ? [...state.runningSessionKeys, normalizedSessionKey]
+          : state.runningSessionKeys.filter((key) => key !== normalizedSessionKey),
+      };
+    });
+}
+
 export const useChatSessionListStore = create<ChatSessionListStore>()(
   persist(
     (set) => ({
       snapshot: initialSnapshot,
       optimisticReadAtBySessionKey: {},
+      runningSessionKeys: [],
       setSnapshot: createSetSnapshotAction(set),
-      markSessionRead: createMarkSessionReadAction(set)
+      markSessionRead: createMarkSessionReadAction(set),
+      setSessionRunStatus: createSetSessionRunStatusAction(set),
+      clearSessionRunStatuses: () => set({ runningSessionKeys: [] }),
     }),
     {
       name: CHAT_SESSION_LIST_MODE_STORAGE_KEY,