@nextclaw/ui 0.12.4 → 0.12.6

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

@@ -18,8 +18,11 @@ const mocks = vi.hoisted(() => ({
   isLoading: false
 }));
 
-function createSessionItem(session: NcpSessionListItemView['session']): NcpSessionListItemView {
-  return { session };
+function createSessionItem(
+  session: NcpSessionListItemView['session'],
+  runStatus?: NcpSessionListItemView['runStatus'],
+): NcpSessionListItemView {
+  return { session, runStatus };
 }
 
 vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
@@ -28,7 +31,12 @@ vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
       createSession: mocks.createSession,
       setQuery: mocks.setQuery,
       setListMode: mocks.setListMode,
-      selectSession: mocks.selectSession
+      selectSession: mocks.selectSession,
+      markSessionRead: (sessionKey: string | null | undefined, updatedAt: string | null | undefined) =>
+        sessionKey ? useChatSessionListStore.getState().markSessionRead(sessionKey, updatedAt) : undefined,
+      hydrateReadWatermarks: (
+        entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+      ) => useChatSessionListStore.getState().hydrateReadWatermarks(entries)
     }
   })
 }));
@@ -124,10 +132,13 @@ function resetSidebarTestState() {
     }
   });
   useChatSessionListStore.setState({
+    readUpdatedAtBySessionKey: {},
+    hasHydratedReadWatermarks: false,
     snapshot: {
       ...useChatSessionListStore.getState().snapshot,
       query: '',
-      listMode: 'time-first'
+      listMode: 'time-first',
+      selectedSessionKey: null
     }
   });
 }
@@ -496,4 +507,98 @@ describe('ChatSidebar session item interactions', () => {
     expect(screen.queryByDisplayValue('Should Not Persist')).toBeNull();
     expect(screen.getByText('Cancelable Label')).not.toBeNull();
   });
+
+  it('shows an unread dot only after a non-active session finishes its newer update', () => {
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:ncp-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Current Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      }),
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:05:00.000Z',
+        label: 'Background Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      }, 'running')
+    ];
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'session:ncp-1'
+      }
+    });
+
+    const { rerender } = render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
+
+    mocks.sessionItems = [
+      mocks.sessionItems[0]!,
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:06:00.000Z',
+        label: 'Background Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      }, 'running')
+    ];
+
+    rerender(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
+
+    mocks.sessionItems = [
+      mocks.sessionItems[0]!,
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:06:00.000Z',
+        label: 'Background Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
+
+    rerender(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText('Session has unread updates')).toBeTruthy();
+
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'session:ncp-2'
+      }
+    });
+
+    rerender(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
+  });
 });

package/src/components/chat/ChatSidebar.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { SessionEntryView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { BrandHeader } from '@/components/common/BrandHeader';
@@ -17,7 +17,10 @@ import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-la
 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 { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import {
+  shouldShowUnreadSessionIndicator,
+  useChatSessionListStore
+} from '@/components/chat/stores/chat-session-list.store';
 import { useAgents } from '@/hooks/agents/useAgents';
 import { getSessionProjectName } from '@/lib/session-project/session-project.utils';
 import { cn } from '@/lib/utils';
@@ -143,6 +146,50 @@ const navItems = [
   { target: '/agents', label: () => t('agentsPageTitle'), icon: Bot },
 ];
 
+function useChatSessionUnreadState(
+  items: readonly NcpSessionListItemView[],
+  selectedSessionKey: string | null,
+  markSessionRead: (sessionKey: string | null | undefined, updatedAt: string | null | undefined) => void,
+  hydrateReadWatermarks: (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) => void,
+): Record<string, string> {
+  const readUpdatedAtBySessionKey = useChatSessionListStore((state) => state.readUpdatedAtBySessionKey);
+  const hasHydratedReadWatermarks = useChatSessionListStore((state) => state.hasHydratedReadWatermarks);
+
+  useEffect(() => {
+    const syncHydratedReadWatermarks = () => {
+      if (hasHydratedReadWatermarks || items.length === 0) {
+        return;
+      }
+      hydrateReadWatermarks(
+        items.map(({ session }) => ({
+          sessionKey: session.key,
+          updatedAt: session.updatedAt
+        }))
+      );
+    };
+    syncHydratedReadWatermarks();
+  }, [hasHydratedReadWatermarks, hydrateReadWatermarks, items]);
+
+  useEffect(() => {
+    const syncSelectedSessionReadState = () => {
+      if (!selectedSessionKey) {
+        return;
+      }
+      const selectedItem = items.find(({ session }) => session.key === selectedSessionKey);
+      if (!selectedItem) {
+        return;
+      }
+      const { session: selectedSession } = selectedItem;
+      markSessionRead(selectedSession.key, selectedSession.updatedAt);
+    };
+    syncSelectedSessionReadState();
+  }, [items, markSessionRead, selectedSessionKey]);
+
+  return readUpdatedAtBySessionKey;
+}
+
 export function ChatSidebar() {
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
@@ -164,7 +211,6 @@ export function ChatSidebar() {
     () => new Map((agentsQuery.data?.agents ?? []).map((agent) => [agent.id, agent])),
     [agentsQuery.data?.agents]
   );
-
   const sortedItems = useMemo(() => sortSessionItemsByUpdatedAtDesc(items), [items]);
   const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
   const projectGroups = useMemo(() => groupSessionsByProject(sortedItems), [sortedItems]);
@@ -174,24 +220,26 @@ export function ChatSidebar() {
     [defaultSessionType, inputSnapshot.sessionTypeOptions]
   );
   const isProjectFirstView = listSnapshot.listMode === 'project-first';
-
+  const readUpdatedAtBySessionKey = useChatSessionUnreadState(
+    items,
+    listSnapshot.selectedSessionKey,
+    presenter.chatSessionListManager.markSessionRead,
+    presenter.chatSessionListManager.hydrateReadWatermarks,
+  );
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
     setLanguage(nextLang);
     window.location.reload();
   };
-
   const startEditingSessionLabel = (session: SessionEntryView) => {
     setEditingSessionKey(session.key);
     setDraftLabel(session.label?.trim() ?? '');
   };
-
   const cancelEditingSessionLabel = () => {
     setEditingSessionKey(null);
     setDraftLabel('');
     setSavingSessionKey(null);
   };
-
   const saveSessionLabel = async (session: SessionEntryView) => {
     const normalizedLabel = draftLabel.trim();
     const currentLabel = session.label?.trim() ?? '';
@@ -211,9 +259,14 @@ export function ChatSidebar() {
       setSavingSessionKey(null);
     }
   };
-
   const renderSessionItem = ({ session, runStatus }: NcpSessionListItemView) => {
     const active = listSnapshot.selectedSessionKey === session.key;
+    const showUnreadDot = shouldShowUnreadSessionIndicator({
+      active,
+      updatedAt: session.updatedAt,
+      readUpdatedAt: readUpdatedAtBySessionKey[session.key],
+      runStatus,
+    });
     const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
     const isEditing = editingSessionKey === session.key;
     const isSaving = savingSessionKey === session.key;
@@ -222,6 +275,7 @@ export function ChatSidebar() {
         key={session.key}
         session={session}
         active={active}
+        showUnreadDot={showUnreadDot}
         runStatus={runStatus}
         context={context}
         title={sessionTitle(session)}
@@ -239,7 +293,6 @@ export function ChatSidebar() {
       />
     );
   };
-
   return (
     <aside className="w-[280px] shrink-0 flex flex-col h-full bg-secondary border-r border-gray-200/60">
       <div className="px-5 pt-5 pb-3">

package/src/components/chat/adapters/chat-message-tool-agent-id.test.ts

@@ -33,19 +33,19 @@ function adapt(uiMessages: ChatMessageSource[]) {
   });
 }
 
-it("exposes agentId on spawn call cards when the invocation args include it", () => {
+it("exposes agentId on sessions_spawn call cards when the invocation args include it", () => {
   const adapted = adapt([
     {
-      id: "assistant-spawn-call",
+      id: "assistant-sessions-spawn-call",
       role: "assistant",
       parts: [
         {
           type: "tool-invocation",
           toolInvocation: {
             status: ToolInvocationStatus.PARTIAL_CALL,
-            toolCallId: "spawn-call-args-1",
-            toolName: "spawn",
-            args: '{"agentId":"planner-agent","label":"Planner","task":"Plan the rollout"}',
+            toolCallId: "sessions-spawn-call-args-1",
+            toolName: "sessions_spawn",
+            args: '{"agentId":"planner-agent","scope":"child","title":"Planner","task":"Plan the rollout","request":{"notify":"final_reply"}}',
             result: {
               kind: "nextclaw.session_request",
               requestId: "request-3",
@@ -64,7 +64,7 @@ it("exposes agentId on spawn call cards when the invocation args include it", ()
   expect(adapted[0]?.parts[0]).toMatchObject({
     type: "tool-card",
     card: {
-      toolName: "spawn",
+      toolName: "sessions_spawn",
       agentId: "planner-agent",
       statusTone: "running",
     },
@@ -74,16 +74,16 @@ it("exposes agentId on spawn call cards when the invocation args include it", ()
 it("exposes agentId on running tool call cards even before a session-request result exists", () => {
   const adapted = adapt([
     {
-      id: "assistant-spawn-call-running",
+      id: "assistant-sessions-spawn-call-running",
       role: "assistant",
       parts: [
         {
           type: "tool-invocation",
           toolInvocation: {
             status: ToolInvocationStatus.PARTIAL_CALL,
-            toolCallId: "spawn-call-running-1",
-            toolName: "spawn",
-            args: '{"agentId":"planner-agent","task":"Plan the rollout"}',
+            toolCallId: "sessions-spawn-call-running-1",
+            toolName: "sessions_spawn",
+            args: '{"agentId":"planner-agent","scope":"child","task":"Plan the rollout"}',
           },
         },
       ],
@@ -93,7 +93,7 @@ it("exposes agentId on running tool call cards even before a session-request res
   expect(adapted[0]?.parts[0]).toMatchObject({
     type: "tool-card",
     card: {
-      toolName: "spawn",
+      toolName: "sessions_spawn",
       agentId: "planner-agent",
       statusTone: "running",
       titleLabel: "Tool Call",

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

@@ -223,7 +223,7 @@ it("keeps structured terminal results as structured data instead of raw json out
   });
 });
 
-it("renders session request tool cards from structured child-session status updates", () => {
+it("renders child-session request cards for sessions_spawn when the new child starts immediately", () => {
   const adapted = adapt([
     {
       id: "assistant-subagent",
@@ -233,18 +233,21 @@ it("renders session request tool cards from structured child-session status upda
           type: "tool-invocation",
           toolInvocation: {
             status: ToolInvocationStatus.RESULT,
-            toolCallId: "spawn-call-1",
-            toolName: "spawn",
-            args: '{"label":"Verifier","task":"Verify 1+1=2"}',
+            toolCallId: "sessions-spawn-call-1",
+            toolName: "sessions_spawn",
+            args: '{"scope":"child","title":"Verifier","task":"Verify 1+1=2","request":{"notify":"final_reply"}}',
             result: {
               kind: "nextclaw.session_request",
               requestId: "request-1",
               sessionId: "child-session-1",
               agentId: "verifier-agent",
               isChildSession: true,
+              lifecycle: "persistent",
               title: "Verifier",
               task: "Verify 1+1=2",
               status: "completed",
+              notify: "final_reply",
+              spawnedByRequestId: "request-1",
               finalResponseText: "Verified 1+1=2.",
               parentSessionId: "parent-session-1",
             },
@@ -257,9 +260,17 @@ it("renders session request tool cards from structured child-session status upda
   expect(adapted[0]?.parts[0]).toMatchObject({
     type: "tool-card",
     card: {
-      toolName: "spawn",
+      toolName: "sessions_spawn",
       agentId: "verifier-agent",
       summary: "title: Verifier · session: child-session-1 · task: Verify 1+1=2",
+      input: `{
+  "scope": "child",
+  "title": "Verifier",
+  "task": "Verify 1+1=2",
+  "request": {
+    "notify": "final_reply"
+  }
+}`,
       output: [
         "Request ID: request-1",
         "",
@@ -267,6 +278,16 @@ it("renders session request tool cards from structured child-session status upda
         "",
         "Target: child",
         "",
+        "Status: completed",
+        "",
+        "Notify: final_reply",
+        "",
+        "Lifecycle: persistent",
+        "",
+        "Parent Session ID: parent-session-1",
+        "",
+        "Spawned By Request ID: request-1",
+        "",
         "Title: Verifier",
         "",
         "Task:",
@@ -302,16 +323,18 @@ it("renders regular session request tool cards with session navigation instead o
             status: ToolInvocationStatus.RESULT,
             toolCallId: "session-request-call-1",
             toolName: "sessions_request",
-            args: '{"sessionId":"session-2","task":"Summarize the latest findings"}',
+            args: '{"target":{"session_id":"session-2"},"task":"Summarize the latest findings","notify":"none","title":"Research thread"}',
             result: {
               kind: "nextclaw.session_request",
               requestId: "request-2",
               sessionId: "session-2",
               agentId: "research-agent",
               isChildSession: false,
+              lifecycle: "persistent",
               title: "Research thread",
               task: "Summarize the latest findings",
               status: "completed",
+              notify: "none",
               finalResponseText: "Here is the summary.",
             },
           },
@@ -326,6 +349,14 @@ it("renders regular session request tool cards with session navigation instead o
       toolName: "sessions_request",
       agentId: "research-agent",
       summary: "title: Research thread · session: session-2 · task: Summarize the latest findings",
+      input: `{
+  "target": {
+    "session_id": "session-2"
+  },
+  "task": "Summarize the latest findings",
+  "notify": "none",
+  "title": "Research thread"
+}`,
       output: [
         "Request ID: request-2",
         "",
@@ -333,6 +364,12 @@ it("renders regular session request tool cards with session navigation instead o
         "",
         "Target: session",
         "",
+        "Status: completed",
+        "",
+        "Notify: none",
+        "",
+        "Lifecycle: persistent",
+        "",
         "Title: Research thread",
         "",
         "Task:",