@nextclaw/ui 0.12.3 → 0.12.5

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

@@ -9,6 +9,7 @@ import { useChatSessionListStore } from '@/components/chat/stores/chat-session-l
 const mocks = vi.hoisted(() => ({
   createSession: vi.fn(),
   setQuery: vi.fn(),
+  setListMode: vi.fn(),
   selectSession: vi.fn(),
   docOpen: vi.fn(),
   updateNcpSession: vi.fn(),
@@ -26,6 +27,7 @@ vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
     chatSessionListManager: {
       createSession: mocks.createSession,
       setQuery: mocks.setQuery,
+      setListMode: mocks.setListMode,
       selectSession: mocks.selectSession
     }
   })
@@ -99,35 +101,39 @@ vi.mock('@/stores/ui.store', () => ({
     selector({ connectionStatus: 'connected' })
 }));
 
-describe('ChatSidebar', () => {
-  beforeEach(() => {
-    mocks.createSession.mockReset();
-    mocks.setQuery.mockReset();
-    mocks.selectSession.mockReset();
-    mocks.docOpen.mockReset();
-    mocks.updateNcpSession.mockReset();
-    mocks.updateNcpSession.mockResolvedValue({});
-    mocks.agents = [];
-    mocks.sessionItems = [];
-    mocks.isLoading = false;
-
-    useChatInputStore.setState({
-      snapshot: {
-        ...useChatInputStore.getState().snapshot,
-        defaultSessionType: 'native',
-        sessionTypeOptions: [
-          { value: 'native', label: 'Native', ready: true },
-          { value: 'codex', label: 'Codex', ready: true }
-        ]
-      }
-    });
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        query: ''
-      }
-    });
+function resetSidebarTestState() {
+  mocks.createSession.mockReset();
+  mocks.setQuery.mockReset();
+  mocks.setListMode.mockReset();
+  mocks.selectSession.mockReset();
+  mocks.docOpen.mockReset();
+  mocks.updateNcpSession.mockReset();
+  mocks.updateNcpSession.mockResolvedValue({});
+  mocks.agents = [];
+  mocks.sessionItems = [];
+  mocks.isLoading = false;
+
+  useChatInputStore.setState({
+    snapshot: {
+      ...useChatInputStore.getState().snapshot,
+      defaultSessionType: 'native',
+      sessionTypeOptions: [
+        { value: 'native', label: 'Native', ready: true },
+        { value: 'codex', label: 'Codex', ready: true }
+      ]
+    }
+  });
+  useChatSessionListStore.setState({
+    snapshot: {
+      ...useChatSessionListStore.getState().snapshot,
+      query: '',
+      listMode: 'time-first'
+    }
   });
+}
+
+describe('ChatSidebar create and list basics', () => {
+  beforeEach(resetSidebarTestState);
 
   it('closes the create-session menu after choosing a non-default session type', async () => {
     render(
@@ -174,6 +180,19 @@ describe('ChatSidebar', () => {
     expect(screen.getByText('Configure a provider API key first.')).not.toBeNull();
   });
 
+  it('renders the lightweight list mode switch in the session header row and toggles to project view', () => {
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Sessions')).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Project' }));
+
+    expect(mocks.setListMode).toHaveBeenCalledWith('project-first');
+  });
+
   it('shows a session type badge for non-native sessions in the list', () => {
     mocks.sessionItems = [
       createSessionItem({
@@ -255,6 +274,127 @@ describe('ChatSidebar', () => {
     expect(screen.getByText('Native Task')).not.toBeNull();
     expect(screen.queryByText('Native')).toBeNull();
   });
+});
+
+describe('ChatSidebar project-first mode', () => {
+  beforeEach(resetSidebarTestState);
+
+  it('shows project groups only in project-first mode and hides sessions without a project', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        listMode: 'project-first'
+      }
+    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:project-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T11:05:00.000Z',
+        label: 'Project Alpha Task',
+        projectRoot: '/tmp/project-alpha',
+        projectName: 'project-alpha',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      }),
+      createSessionItem({
+        key: 'session:plain-1',
+        createdAt: '2026-03-19T08:00:00.000Z',
+        updatedAt: '2026-03-19T08:05:00.000Z',
+        label: 'Loose Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('project-alpha')).not.toBeNull();
+    expect(screen.getByText('Project Alpha Task')).not.toBeNull();
+    expect(screen.queryByText('Loose Task')).toBeNull();
+  });
+
+  it('lets the user choose a runtime type when creating a project-bound draft', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        listMode: 'project-first'
+      }
+    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:project-2',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T11:05:00.000Z',
+        label: 'Grouped Task',
+        projectRoot: '/tmp/project-beta',
+        projectName: 'project-beta',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'New Task · project-beta' }));
+    fireEvent.click(screen.getByText('Codex'));
+
+    expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-beta');
+  });
+
+  it('creates immediately when there is only one available runtime type', () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        defaultSessionType: 'native',
+        sessionTypeOptions: [{ value: 'native', label: 'Native', ready: true }]
+      }
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        listMode: 'project-first'
+      }
+    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:project-3',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T11:05:00.000Z',
+        label: 'Single Runtime Task',
+        projectRoot: '/tmp/project-gamma',
+        projectName: 'project-gamma',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'New Task · project-gamma' }));
+
+    expect(mocks.createSession).toHaveBeenCalledWith('native', '/tmp/project-gamma');
+  });
+});
+
+describe('ChatSidebar session item interactions', () => {
+  beforeEach(resetSidebarTestState);
 
   it('hides the sidebar agent avatar for the main agent but keeps specialist avatars', () => {
     mocks.agents = [

package/src/components/chat/ChatSidebar.tsx

@@ -7,6 +7,11 @@ import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
+import { ChatSidebarListModeSwitch } from '@/components/chat/chat-sidebar-list-mode-switch';
+import {
+  ChatSidebarProjectGroups,
+  type ChatSidebarProjectGroup
+} from '@/components/chat/chat-sidebar-project-groups';
 import { resolveSessionContextView } from '@/lib/session-context.utils';
 import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
@@ -14,6 +19,7 @@ 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 { useAgents } from '@/hooks/agents/useAgents';
+import { getSessionProjectName } from '@/lib/session-project/session-project.utils';
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
@@ -41,6 +47,14 @@ type DateGroup = {
   items: NcpSessionListItemView[];
 };
 
+function getSessionUpdatedAtTimestamp(item: NcpSessionListItemView): number {
+  return new Date(item.session.updatedAt).getTime();
+}
+
+function sortSessionItemsByUpdatedAtDesc(items: NcpSessionListItemView[]): NcpSessionListItemView[] {
+  return [...items].sort((left, right) => getSessionUpdatedAtTimestamp(right) - getSessionUpdatedAtTimestamp(left));
+}
+
 function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
   const now = new Date();
   const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
@@ -74,6 +88,37 @@ function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
   return groups;
 }
 
+function groupSessionsByProject(items: NcpSessionListItemView[]): ChatSidebarProjectGroup[] {
+  const grouped = new Map<string, ChatSidebarProjectGroup>();
+
+  for (const item of items) {
+    const projectRoot = item.session.projectRoot?.trim();
+    if (!projectRoot) {
+      continue;
+    }
+    const existingGroup = grouped.get(projectRoot);
+    const updatedAt = getSessionUpdatedAtTimestamp(item);
+    if (existingGroup) {
+      existingGroup.items.push(item);
+      existingGroup.latestUpdatedAt = Math.max(existingGroup.latestUpdatedAt, updatedAt);
+      continue;
+    }
+    grouped.set(projectRoot, {
+      projectRoot,
+      projectName: item.session.projectName?.trim() || getSessionProjectName(projectRoot) || projectRoot,
+      items: [item],
+      latestUpdatedAt: updatedAt
+    });
+  }
+
+  return [...grouped.values()]
+    .map((group) => ({
+      ...group,
+      items: sortSessionItemsByUpdatedAtDesc(group.items)
+    }))
+    .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
+}
+
 function sessionTitle(session: SessionEntryView): string {
   if (session.label && session.label.trim()) {
     return session.label.trim();
@@ -120,12 +165,15 @@ export function ChatSidebar() {
     [agentsQuery.data?.agents]
   );
 
-  const groups = useMemo(() => groupSessionsByDate(items), [items]);
+  const sortedItems = useMemo(() => sortSessionItemsByUpdatedAtDesc(items), [items]);
+  const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
+  const projectGroups = useMemo(() => groupSessionsByProject(sortedItems), [sortedItems]);
   const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
   const nonDefaultSessionTypeOptions = useMemo(
     () => inputSnapshot.sessionTypeOptions.filter((option) => option.value !== defaultSessionType),
     [defaultSessionType, inputSnapshot.sessionTypeOptions]
   );
+  const isProjectFirstView = listSnapshot.listMode === 'project-first';
 
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
@@ -164,6 +212,34 @@ export function ChatSidebar() {
     }
   };
 
+  const renderSessionItem = ({ session, runStatus }: NcpSessionListItemView) => {
+    const active = listSnapshot.selectedSessionKey === session.key;
+    const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
+    const isEditing = editingSessionKey === session.key;
+    const isSaving = savingSessionKey === session.key;
+    return (
+      <ChatSidebarSessionItem
+        key={session.key}
+        session={session}
+        active={active}
+        runStatus={runStatus}
+        context={context}
+        title={sessionTitle(session)}
+        agentId={session.agentId ?? null}
+        agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
+        agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
+        isEditing={isEditing}
+        draftLabel={draftLabel}
+        isSaving={isSaving}
+        onSelect={() => presenter.chatSessionListManager.selectSession(session.key)}
+        onStartEditing={() => startEditingSessionLabel(session)}
+        onDraftLabelChange={setDraftLabel}
+        onSave={() => saveSessionLabel(session)}
+        onCancel={cancelEditingSessionLabel}
+      />
+    );
+  };
+
   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">
@@ -272,9 +348,34 @@ export function ChatSidebar() {
 
       <div className="mx-4 border-t border-gray-200/60" />
 
+      <div className="flex items-center justify-between px-5 pb-2 pt-3">
+        <div className="text-[11px] font-medium uppercase tracking-wider text-gray-400">
+          {t('chatSidebarTaskRecords')}
+        </div>
+        <ChatSidebarListModeSwitch
+          isProjectFirstView={isProjectFirstView}
+          onSelectMode={presenter.chatSessionListManager.setListMode}
+        />
+      </div>
+
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
         {isLoading ? (
           <div className="text-xs text-gray-500 p-3">{t('sessionsLoading')}</div>
+        ) : isProjectFirstView ? (
+          projectGroups.length === 0 ? (
+            <div className="p-4 text-center">
+              <MessageSquareText className="h-6 w-6 mx-auto mb-2 text-gray-300" />
+              <div className="text-xs text-gray-500">{t('chatSidebarProjectViewEmpty')}</div>
+            </div>
+          ) : (
+            <ChatSidebarProjectGroups
+              groups={projectGroups}
+              defaultSessionType={defaultSessionType}
+              sessionTypeOptions={inputSnapshot.sessionTypeOptions}
+              renderSessionItem={renderSessionItem}
+              onCreateSession={presenter.chatSessionListManager.createSession}
+            />
+          )
         ) : groups.length === 0 ? (
           <div className="p-4 text-center">
             <MessageSquareText className="h-6 w-6 mx-auto mb-2 text-gray-300" />
@@ -288,33 +389,7 @@ export function ChatSidebar() {
                   {group.label}
                 </div>
                 <div className="space-y-0.5">
-                  {group.items.map(({ session, runStatus }) => {
-                    const active = listSnapshot.selectedSessionKey === session.key;
-                    const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
-                    const isEditing = editingSessionKey === session.key;
-                    const isSaving = savingSessionKey === session.key;
-                    return (
-                      <ChatSidebarSessionItem
-                        key={session.key}
-                        session={session}
-                        active={active}
-                        runStatus={runStatus}
-                        context={context}
-                        title={sessionTitle(session)}
-                        agentId={session.agentId ?? null}
-                        agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
-                        agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
-                        isEditing={isEditing}
-                        draftLabel={draftLabel}
-                        isSaving={isSaving}
-                        onSelect={() => presenter.chatSessionListManager.selectSession(session.key)}
-                        onStartEditing={() => startEditingSessionLabel(session)}
-                        onDraftLabelChange={setDraftLabel}
-                        onSave={() => saveSessionLabel(session)}
-                        onCancel={cancelEditingSessionLabel}
-                      />
-                    );
-                  })}
+                  {group.items.map(renderSessionItem)}
                 </div>
               </div>
             ))}

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:",