@nextclaw/ui 0.11.8 → 0.11.10

package/src/components/chat/ChatSidebar.test.tsx

@@ -2,8 +2,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ChatSidebar } from '@/components/chat/ChatSidebar';
+import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { useChatRunStatusStore } from '@/components/chat/stores/chat-run-status.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 
 const mocks = vi.hoisted(() => ({
@@ -11,9 +11,15 @@ const mocks = vi.hoisted(() => ({
   setQuery: vi.fn(),
   selectSession: vi.fn(),
   docOpen: vi.fn(),
-  updateNcpSession: vi.fn()
+  updateNcpSession: vi.fn(),
+  sessionItems: [] as NcpSessionListItemView[],
+  isLoading: false
 }));
 
+function createSessionItem(session: NcpSessionListItemView['session']): NcpSessionListItemView {
+  return { session };
+}
+
 vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
   usePresenter: () => ({
     chatSessionListManager: {
@@ -34,7 +40,27 @@ vi.mock('@/components/chat/chat-session-label.service', () => ({
   useChatSessionLabelService: () => async (params: {
     sessionKey: string;
     label: string | null;
-  }) => mocks.updateNcpSession(params.sessionKey, { label: params.label })
+  }) => {
+    mocks.sessionItems = mocks.sessionItems.map((item) =>
+      item.session.key === params.sessionKey
+        ? {
+            ...item,
+            session: {
+              ...item.session,
+              ...(params.label ? { label: params.label } : { label: undefined })
+            }
+          }
+        : item
+    );
+    return mocks.updateNcpSession(params.sessionKey, { label: params.label });
+  }
+}));
+
+vi.mock('@/components/chat/ncp/use-ncp-session-list-view', () => ({
+  useNcpSessionListView: () => ({
+    isLoading: mocks.isLoading,
+    items: mocks.sessionItems
+  })
 }));
 
 vi.mock('@/components/common/BrandHeader', () => ({
@@ -72,6 +98,8 @@ describe('ChatSidebar', () => {
     mocks.docOpen.mockReset();
     mocks.updateNcpSession.mockReset();
     mocks.updateNcpSession.mockResolvedValue({});
+    mocks.sessionItems = [];
+    mocks.isLoading = false;
 
     useChatInputStore.setState({
       snapshot: {
@@ -86,15 +114,7 @@ describe('ChatSidebar', () => {
     useChatSessionListStore.setState({
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
-        sessions: [],
-        query: '',
-        isLoading: false
-      }
-    });
-    useChatRunStatusStore.setState({
-      snapshot: {
-        ...useChatRunStatusStore.getState().snapshot,
-        sessionRunStatusByKey: new Map()
+        query: ''
       }
     });
   });
@@ -145,22 +165,17 @@ describe('ChatSidebar', () => {
   });
 
   it('shows a session type badge for non-native sessions in the list', () => {
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        sessions: [
-          {
-            key: 'session:codex-1',
-            createdAt: '2026-03-19T09:00:00.000Z',
-            updatedAt: '2026-03-19T09:05:00.000Z',
-            label: 'Codex Task',
-            sessionType: 'codex',
-            sessionTypeMutable: false,
-            messageCount: 2
-          }
-        ]
-      }
-    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:codex-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Codex Task',
+        sessionType: 'codex',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
 
     render(
       <MemoryRouter>
@@ -180,22 +195,17 @@ describe('ChatSidebar', () => {
         sessionTypeOptions: [{ value: 'native', label: 'Native' }]
       }
     });
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        sessions: [
-          {
-            key: 'session:workspace-agent-1',
-            createdAt: '2026-03-19T09:00:00.000Z',
-            updatedAt: '2026-03-19T09:05:00.000Z',
-            label: 'Workspace Task',
-            sessionType: 'workspace-agent',
-            sessionTypeMutable: false,
-            messageCount: 2
-          }
-        ]
-      }
-    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:workspace-agent-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Workspace Task',
+        sessionType: 'workspace-agent',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
 
     render(
       <MemoryRouter>
@@ -214,22 +224,17 @@ describe('ChatSidebar', () => {
         sessionTypeOptions: [{ value: 'native', label: 'Native' }]
       }
     });
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        sessions: [
-          {
-            key: 'session:native-1',
-            createdAt: '2026-03-19T09:00:00.000Z',
-            updatedAt: '2026-03-19T09:05:00.000Z',
-            label: 'Native Task',
-            sessionType: 'native',
-            sessionTypeMutable: false,
-            messageCount: 1
-          }
-        ]
-      }
-    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:native-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Native Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      })
+    ];
 
     render(
       <MemoryRouter>
@@ -242,22 +247,17 @@ describe('ChatSidebar', () => {
   });
 
   it('edits the session label inline and saves through the ncp session api by default', async () => {
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        sessions: [
-          {
-            key: 'session:ncp-1',
-            createdAt: '2026-03-19T09:00:00.000Z',
-            updatedAt: '2026-03-19T09:05:00.000Z',
-            label: 'Initial Label',
-            sessionType: 'native',
-            sessionTypeMutable: false,
-            messageCount: 1
-          }
-        ]
-      }
-    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:ncp-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Initial Label',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      })
+    ];
 
     render(
       <MemoryRouter>
@@ -280,22 +280,17 @@ describe('ChatSidebar', () => {
   });
 
   it('cancels inline session label editing without saving', () => {
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        sessions: [
-          {
-            key: 'session:ncp-2',
-            createdAt: '2026-03-19T09:00:00.000Z',
-            updatedAt: '2026-03-19T09:05:00.000Z',
-            label: 'Cancelable Label',
-            sessionType: 'native',
-            sessionTypeMutable: false,
-            messageCount: 1
-          }
-        ]
-      }
-    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Cancelable Label',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      })
+    ];
 
     render(
       <MemoryRouter>

package/src/components/chat/ChatSidebar.tsx

@@ -8,9 +8,9 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
 import { useChatSessionLabelService } from '@/components/chat/chat-session-label.service';
+import { useNcpSessionListView, type NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { useChatRunStatusStore } from '@/components/chat/stores/chat-run-status.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
@@ -35,38 +35,39 @@ import {
 
 type DateGroup = {
   label: string;
-  sessions: SessionEntryView[];
+  items: NcpSessionListItemView[];
 };
 
-function groupSessionsByDate(sessions: SessionEntryView[]): DateGroup[] {
+function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
   const now = new Date();
   const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
   const yesterdayStart = todayStart - 86_400_000;
   const sevenDaysStart = todayStart - 7 * 86_400_000;
 
-  const today: SessionEntryView[] = [];
-  const yesterday: SessionEntryView[] = [];
-  const previous7: SessionEntryView[] = [];
-  const older: SessionEntryView[] = [];
+  const today: NcpSessionListItemView[] = [];
+  const yesterday: NcpSessionListItemView[] = [];
+  const previous7: NcpSessionListItemView[] = [];
+  const older: NcpSessionListItemView[] = [];
 
-  for (const session of sessions) {
+  for (const item of items) {
+    const { session } = item;
     const ts = new Date(session.updatedAt).getTime();
     if (ts >= todayStart) {
-      today.push(session);
+      today.push(item);
     } else if (ts >= yesterdayStart) {
-      yesterday.push(session);
+      yesterday.push(item);
     } else if (ts >= sevenDaysStart) {
-      previous7.push(session);
+      previous7.push(item);
     } else {
-      older.push(session);
+      older.push(item);
     }
   }
 
   const groups: DateGroup[] = [];
-  if (today.length > 0) groups.push({ label: t('chatSidebarToday'), sessions: today });
-  if (yesterday.length > 0) groups.push({ label: t('chatSidebarYesterday'), sessions: yesterday });
-  if (previous7.length > 0) groups.push({ label: t('chatSidebarPrevious7Days'), sessions: previous7 });
-  if (older.length > 0) groups.push({ label: t('chatSidebarOlder'), sessions: older });
+  if (today.length > 0) groups.push({ label: t('chatSidebarToday'), items: today });
+  if (yesterday.length > 0) groups.push({ label: t('chatSidebarYesterday'), items: yesterday });
+  if (previous7.length > 0) groups.push({ label: t('chatSidebarPrevious7Days'), items: previous7 });
+  if (older.length > 0) groups.push({ label: t('chatSidebarOlder'), items: older });
   return groups;
 }
 
@@ -121,15 +122,15 @@ export function ChatSidebar() {
   const [savingSessionKey, setSavingSessionKey] = useState<string | null>(null);
   const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
-  const runSnapshot = useChatRunStatusStore((state) => state.snapshot);
   const connectionStatus = useUiStore((state) => state.connectionStatus);
+  const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const updateSessionLabel = useChatSessionLabelService();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
 
-  const groups = useMemo(() => groupSessionsByDate(listSnapshot.sessions), [listSnapshot.sessions]);
+  const groups = useMemo(() => groupSessionsByDate(items), [items]);
   const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
   const nonDefaultSessionTypeOptions = useMemo(
     () => inputSnapshot.sessionTypeOptions.filter((option) => option.value !== defaultSessionType),
@@ -142,20 +143,6 @@ export function ChatSidebar() {
     window.location.reload();
   };
 
-  const patchSessionLabelInStore = (sessionKey: string, label: string | undefined) => {
-    const { sessions } = useChatSessionListStore.getState().snapshot;
-    useChatSessionListStore.getState().setSnapshot({
-      sessions: sessions.map((session) =>
-        session.key === sessionKey
-          ? {
-              ...session,
-              ...(label ? { label } : { label: undefined })
-            }
-          : session
-      )
-    });
-  };
-
   const startEditingSessionLabel = (session: SessionEntryView) => {
     setEditingSessionKey(session.key);
     setDraftLabel(session.label?.trim() ?? '');
@@ -181,7 +168,6 @@ export function ChatSidebar() {
         sessionKey: session.key,
         label: normalizedLabel || null
       });
-      patchSessionLabelInStore(session.key, normalizedLabel || undefined);
       cancelEditingSessionLabel();
     } catch {
       setSavingSessionKey(null);
@@ -297,7 +283,7 @@ export function ChatSidebar() {
       <div className="mx-4 border-t border-gray-200/60" />
 
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
-        {listSnapshot.isLoading ? (
+        {isLoading ? (
           <div className="text-xs text-gray-500 p-3">{t('sessionsLoading')}</div>
         ) : groups.length === 0 ? (
           <div className="p-4 text-center">
@@ -312,9 +298,8 @@ export function ChatSidebar() {
                   {group.label}
                 </div>
                 <div className="space-y-0.5">
-                  {group.sessions.map((session) => {
+                  {group.items.map(({ session, runStatus }) => {
                     const active = listSnapshot.selectedSessionKey === session.key;
-                    const runStatus = runSnapshot.sessionRunStatusByKey.get(session.key);
                     const sessionTypeLabel = resolveSessionTypeLabel(session.sessionType, inputSnapshot.sessionTypeOptions);
                     const isEditing = editingSessionKey === session.key;
                     const isSaving = savingSessionKey === session.key;

package/src/components/chat/adapters/chat-message.adapter.ts

@@ -317,12 +317,16 @@ function toRenderableText(value: string): string | null {
   return visible ? trimmed : null;
 }
 
-export function adaptChatMessages(params: {
-  uiMessages: ChatMessageSource[];
+type ChatMessageAdapterParams = {
   texts: ChatMessageAdapterTexts;
   formatTimestamp: (value: string) => string;
-}): ChatMessageViewModel[] {
-  return params.uiMessages.map((message) => ({
+};
+
+export function adaptChatMessage(
+  message: ChatMessageSource,
+  params: ChatMessageAdapterParams,
+): ChatMessageViewModel {
+  return {
     id: message.id,
     role: resolveUiRole(message.role),
     roleLabel: resolveRoleLabel(message.role, params.texts.roleLabels),
@@ -421,5 +425,13 @@ export function adaptChatMessages(params: {
         };
       })
       .filter((part) => part !== null),
-  }));
+  };
+}
+
+export function adaptChatMessages(params: {
+  uiMessages: ChatMessageSource[];
+  texts: ChatMessageAdapterTexts;
+  formatTimestamp: (value: string) => string;
+}): ChatMessageViewModel[] {
+  return params.uiMessages.map((message) => adaptChatMessage(message, params));
 }

package/src/components/chat/chat-session-label.service.ts

@@ -1,5 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import { upsertNcpSessionSummaryInQueryClient } from '@/api/ncp-session-query-cache';
 import { updateNcpSession } from '@/api/ncp-session';
 import { t } from '@/lib/i18n';
 
@@ -13,9 +14,8 @@ export function useChatSessionLabelService() {
 
   return async (params: UpdateChatSessionLabelParams): Promise<void> => {
     try {
-      await updateNcpSession(params.sessionKey, { label: params.label });
-      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
-      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', params.sessionKey] });
+      const updated = await updateNcpSession(params.sessionKey, { label: params.label });
+      upsertNcpSessionSummaryInQueryClient(queryClient, updated);
       toast.success(t('configSavedApplied'));
     } catch (error) {
       toast.error(t('configSaveFailed') + ': ' + (error instanceof Error ? error.message : String(error)));

package/src/components/chat/containers/chat-message-list.container.test.tsx

@@ -0,0 +1,101 @@
+import { render } from "@testing-library/react";
+import type { NcpMessage } from "@nextclaw/ncp";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatMessageListContainer } from "./chat-message-list.container";
+
+const captures = vi.hoisted(() => ({
+  renders: [] as Array<{ messages: unknown[] }>,
+}));
+
+vi.mock("@nextclaw/agent-chat-ui", () => ({
+  ChatMessageList: (props: { messages: unknown[] }) => {
+    captures.renders.push(props);
+    return <div data-testid="chat-message-list" />;
+  },
+}));
+
+vi.mock("@/components/providers/I18nProvider", () => ({
+  useI18n: () => ({ language: "en" }),
+}));
+
+vi.mock("@/lib/i18n", () => ({
+  formatDateTime: (value: string) => `formatted:${value}`,
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  captures.renders = [];
+});
+
+it("reuses adapted message references when the source message object is unchanged", () => {
+  const message = {
+    id: "assistant-1",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "streaming",
+    timestamp: "2026-03-17T10:00:00.000Z",
+    parts: [{ type: "text", text: "hello" }],
+  } satisfies NcpMessage;
+
+  const { rerender } = render(
+    <ChatMessageListContainer messages={[message]} isSending={false} />,
+  );
+
+  const firstMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+
+  rerender(
+    <ChatMessageListContainer messages={[message]} isSending={false} />,
+  );
+
+  const secondMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+
+  expect(secondMessages[0]).toBe(firstMessages[0]);
+});
+
+it("keeps historical adapted message references stable when only the streaming message changes", () => {
+  const historicalMessage = {
+    id: "assistant-1",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-03-17T10:00:00.000Z",
+    parts: [{ type: "text", text: "history" }],
+  } satisfies NcpMessage;
+  const firstStreamingMessage = {
+    id: "assistant-2",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "streaming",
+    timestamp: "2026-03-17T10:00:01.000Z",
+    parts: [{ type: "text", text: "hello" }],
+  } satisfies NcpMessage;
+
+  const { rerender } = render(
+    <ChatMessageListContainer
+      messages={[historicalMessage, firstStreamingMessage]}
+      isSending={false}
+    />,
+  );
+
+  const firstMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  const nextStreamingMessage = {
+    ...firstStreamingMessage,
+    parts: [{ type: "text", text: "hello world" }],
+  } satisfies NcpMessage;
+
+  rerender(
+    <ChatMessageListContainer
+      messages={[historicalMessage, nextStreamingMessage]}
+      isSending={false}
+    />,
+  );
+
+  const secondMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+
+  expect(secondMessages[0]).toBe(firstMessages[0]);
+  expect(secondMessages[1]).not.toBe(firstMessages[1]);
+});