@nextclaw/ui 0.12.2 → 0.12.4

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/chat-sidebar-list-mode-switch.tsx

@@ -0,0 +1,43 @@
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+type ChatSidebarListModeSwitchProps = {
+  isProjectFirstView: boolean;
+  onSelectMode: (mode: 'time-first' | 'project-first') => void;
+};
+
+export function ChatSidebarListModeSwitch(props: ChatSidebarListModeSwitchProps) {
+  const { isProjectFirstView, onSelectMode } = props;
+
+  return (
+    <div className="flex items-center gap-1.5 text-[11px]">
+      <button
+        type="button"
+        aria-pressed={!isProjectFirstView}
+        onClick={() => onSelectMode('time-first')}
+        className={cn(
+          'transition-colors',
+          isProjectFirstView
+            ? 'text-gray-400 hover:text-gray-600'
+            : 'font-medium text-gray-600'
+        )}
+      >
+        {t('chatSidebarViewTime')}
+      </button>
+      <span className="text-gray-300">/</span>
+      <button
+        type="button"
+        aria-pressed={isProjectFirstView}
+        onClick={() => onSelectMode('project-first')}
+        className={cn(
+          'transition-colors',
+          isProjectFirstView
+            ? 'font-medium text-gray-600'
+            : 'text-gray-400 hover:text-gray-600'
+        )}
+      >
+        {t('chatSidebarViewProject')}
+      </button>
+    </div>
+  );
+}

package/src/components/chat/chat-sidebar-project-groups.tsx

@@ -0,0 +1,152 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+export type ChatSidebarProjectGroup = {
+  projectRoot: string;
+  projectName: string;
+  items: NcpSessionListItemView[];
+  latestUpdatedAt: number;
+};
+
+type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+
+type ChatSidebarProjectGroupsProps = {
+  groups: ChatSidebarProjectGroup[];
+  defaultSessionType: string;
+  sessionTypeOptions: SessionTypeOption[];
+  renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
+  onCreateSession: (sessionType: string, projectRoot: string) => void;
+};
+
+function resolveProjectGroupDefaultSessionType(
+  defaultSessionType: string,
+  sessionTypeOptions: SessionTypeOption[]
+): string {
+  if (sessionTypeOptions.some((option) => option.value === defaultSessionType)) {
+    return defaultSessionType;
+  }
+  return sessionTypeOptions[0]?.value ?? defaultSessionType;
+}
+
+function resolveSessionTypeStatusText(option: {
+  ready?: boolean;
+  reasonMessage?: string | null;
+}): string {
+  if (option.ready === false) {
+    return option.reasonMessage?.trim() || t('statusSetup');
+  }
+  return t('statusReady');
+}
+
+export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
+  const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem, onCreateSession } = props;
+  const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
+  const preferredSessionType = useMemo(
+    () => resolveProjectGroupDefaultSessionType(defaultSessionType, sessionTypeOptions),
+    [defaultSessionType, sessionTypeOptions]
+  );
+  const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
+
+  return (
+    <div className="space-y-3">
+      {groups.map((group) => {
+        const actionLabel = `${t('chatSidebarNewTask')} · ${group.projectName}`;
+
+        return (
+          <div key={group.projectRoot}>
+            <div className="flex items-center justify-between gap-2 px-2 py-0.5">
+              <div className="flex min-w-0 items-center gap-1.5">
+                <div
+                  className="truncate text-[11px] font-medium uppercase tracking-wider text-gray-500"
+                  title={group.projectRoot}
+                >
+                  {group.projectName}
+                </div>
+                <span className="shrink-0 text-[10px] text-gray-400">
+                  {group.items.length}
+                </span>
+              </div>
+              {supportsSessionTypeChoice ? (
+                <Popover
+                  open={openProjectRoot === group.projectRoot}
+                  onOpenChange={(nextOpen) => {
+                    setOpenProjectRoot(nextOpen ? group.projectRoot : null);
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                      aria-label={actionLabel}
+                      title={actionLabel}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent align="end" className="w-64 p-2">
+                    <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+                      {t('chatSessionTypeLabel')}
+                    </div>
+                    <div className="mt-1 space-y-1">
+                      {sessionTypeOptions.map((option) => (
+                        <button
+                          key={`${group.projectRoot}:${option.value}`}
+                          type="button"
+                          onClick={() => {
+                            onCreateSession(option.value, group.projectRoot);
+                            setOpenProjectRoot(null);
+                          }}
+                          className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
+                        >
+                          <div className="flex items-center justify-between gap-3">
+                            <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
+                            <span
+                              className={cn(
+                                'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
+                                option.ready === false
+                                  ? 'bg-amber-100 text-amber-800'
+                                  : 'bg-emerald-100 text-emerald-700'
+                              )}
+                            >
+                              {option.ready === false ? t('statusSetup') : t('statusReady')}
+                            </span>
+                          </div>
+                          <div className="mt-0.5 text-[11px] text-gray-500">
+                            {resolveSessionTypeStatusText(option)}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              ) : (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                  onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
+                  aria-label={actionLabel}
+                  title={actionLabel}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+            <div className="space-y-0.5 pl-2">
+              {group.items.map(renderSessionItem)}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -9,13 +9,16 @@ describe('ChatSessionListManager', () => {
       snapshot: {
         ...useChatInputStore.getState().snapshot,
         defaultSessionType: 'native',
-        pendingSessionType: 'native'
+        pendingSessionType: 'native',
+        pendingProjectRoot: null,
+        pendingProjectRootSessionKey: null
       }
     });
     useChatSessionListStore.setState({
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
-        selectedSessionKey: 'session-1'
+        selectedSessionKey: 'session-1',
+        listMode: 'time-first'
       }
     });
   });
@@ -33,8 +36,25 @@ describe('ChatSessionListManager', () => {
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
     expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
     expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBeNull();
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
+  });
+
+  it('hydrates the draft project root when creating a session inside a project group', () => {
+    const uiManager = {
+      goToChatRoot: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.createSession('native', '/tmp/project-alpha');
+
+    expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBe('/tmp/project-alpha');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
   });
 
   it('delegates existing-session selection to routing without eagerly mutating the selected session state', () => {
@@ -51,4 +71,15 @@ describe('ChatSessionListManager', () => {
     expect(uiManager.goToSession).toHaveBeenCalledWith('session-2');
     expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
   });
+
+  it('updates the sidebar list mode without touching other session list state', () => {
+    const uiManager = {} as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {} as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.setListMode('project-first');
+
+    expect(useChatSessionListStore.getState().snapshot.listMode).toBe('project-first');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+  });
 });