@nextclaw/ui 0.12.1 → 0.12.3

package/src/components/agents/AgentsPage.tsx

@@ -1,39 +1,31 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useCreateAgent, useDeleteAgent, useAgents } from '@/hooks/agents/useAgents';
+import { useCreateAgent, useDeleteAgent, useAgents, useUpdateAgent } from '@/hooks/agents/useAgents';
+import { useConfig, useConfigMeta } from '@/hooks/useConfig';
+import type { AgentProfileView } from '@/api/types';
+import {
+  AgentCreateDialog,
+  AgentEditDialog,
+  type AgentCreateFormState,
+  type AgentEditFormState
+} from '@/components/agents/AgentDialogs';
+import {
+  buildSessionTypeOptions,
+  normalizeSessionType,
+  resolveAgentRuntimeSessionType,
+  resolveSessionTypeLabel
+} from '@/components/chat/useChatSessionTypeState';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { AgentAvatar } from '@/components/common/AgentAvatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { useNcpChatSessionTypes } from '@/hooks/use-ncp-chat-session-types';
 import { PageLayout } from '@/components/layout/page-layout';
 import { t } from '@/lib/i18n';
+import { buildProviderModelCatalog } from '@/lib/provider-models';
 import { cn } from '@/lib/utils';
-import { Bot, House, MessageCircle, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
-
-type CreateFormState = {
-  id: string;
-  displayName: string;
-  description: string;
-  avatar: string;
-  home: string;
-};
-
-const EMPTY_FORM: CreateFormState = {
-  id: '',
-  displayName: '',
-  description: '',
-  avatar: '',
-  home: ''
-};
+import { Bot, House, MessageCircle, Pencil, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
 
 const CARD_TONES = [
   {
@@ -63,10 +55,14 @@ function resolveAgentTone(index: number, builtIn: boolean) {
 export function AgentsPage() {
   const navigate = useNavigate();
   const agentsQuery = useAgents();
+  const configQuery = useConfig();
+  const configMetaQuery = useConfigMeta();
+  const sessionTypesQuery = useNcpChatSessionTypes();
   const createAgent = useCreateAgent();
+  const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [form, setForm] = useState<CreateFormState>(EMPTY_FORM);
+  const [editingAgent, setEditingAgent] = useState<AgentProfileView | null>(null);
   const setSessionListSnapshot = useChatSessionListStore((state) => state.setSnapshot);
 
   const agents = useMemo(() => agentsQuery.data?.agents ?? [], [agentsQuery.data?.agents]);
@@ -79,26 +75,66 @@ export function AgentsPage() {
       ),
     [agents]
   );
+  const providerCatalog = useMemo(
+    () => buildProviderModelCatalog({ config: configQuery.data, meta: configMetaQuery.data, onlyConfigured: true }),
+    [configMetaQuery.data, configQuery.data]
+  );
+  const runtimeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesQuery.data?.options ?? []),
+    [sessionTypesQuery.data?.options]
+  );
+  const defaultRuntime = useMemo(
+    () => normalizeSessionType(sessionTypesQuery.data?.defaultType ?? 'native'),
+    [sessionTypesQuery.data?.defaultType]
+  );
+  const defaultRuntimeLabel = useMemo(
+    () => runtimeOptions.find((option) => option.value === defaultRuntime)?.label ?? resolveSessionTypeLabel(defaultRuntime),
+    [defaultRuntime, runtimeOptions]
+  );
 
-  const handleCreate = async () => {
+  const handleCreate = async (form: AgentCreateFormState) => {
     await createAgent.mutateAsync({
       data: {
         id: form.id,
         ...(form.displayName.trim() ? { displayName: form.displayName.trim() } : {}),
         ...(form.description.trim() ? { description: form.description.trim() } : {}),
         ...(form.avatar.trim() ? { avatar: form.avatar.trim() } : {}),
-        ...(form.home.trim() ? { home: form.home.trim() } : {})
+        ...(form.home.trim() ? { home: form.home.trim() } : {}),
+        ...(form.model.trim() ? { model: form.model.trim() } : {}),
+        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : {})
       }
     });
-    setForm(EMPTY_FORM);
     setIsCreateDialogOpen(false);
   };
 
-  const startChatWithAgent = (agentId: string) => {
+  const handleStartEdit = (agent: AgentProfileView) => {
+    setEditingAgent(agent);
+  };
+
+  const handleUpdate = async (agentId: string, form: AgentEditFormState) => {
+    await updateAgent.mutateAsync({
+      agentId,
+      data: {
+        displayName: form.displayName,
+        description: form.description,
+        avatar: form.avatar,
+        model: form.model,
+        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : { runtime: "" })
+      }
+    });
+    setEditingAgent(null);
+  };
+
+  const startChatWithAgent = (agent: AgentProfileView) => {
     setSessionListSnapshot({
-      selectedAgentId: agentId,
+      selectedAgentId: agent.id,
       selectedSessionKey: null
     });
+    useChatInputStore.getState().setSnapshot({
+      pendingSessionType: resolveAgentRuntimeSessionType(agent, defaultRuntime),
+      pendingProjectRoot: null,
+      pendingProjectRootSessionKey: null
+    });
     navigate('/chat');
   };
 
@@ -178,6 +214,11 @@ export function AgentsPage() {
         ) : (
           sortedAgents.map((agent, index) => {
             const tone = resolveAgentTone(index, Boolean(agent.builtIn));
+            const runtimeValue = agent.runtime?.trim() || agent.engine?.trim() || '';
+            const runtimeLabel = runtimeValue
+              ? runtimeOptions.find((option) => option.value === normalizeSessionType(runtimeValue))?.label ??
+                resolveSessionTypeLabel(runtimeValue)
+              : defaultRuntimeLabel;
             return (
               <Card
                 key={agent.id}
@@ -223,6 +264,16 @@ export function AgentsPage() {
                   </p>
 
                   <div className="mt-auto flex flex-col gap-4">
+                    <div>
+                      <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
+                        <Sparkles className="h-3.5 w-3.5" />
+                        {t('agentsCardRuntimeLabel')}
+                      </div>
+                      <div className="mt-1.5 text-sm leading-6 text-[#475569]">
+                        {runtimeLabel}
+                      </div>
+                    </div>
+
                     <div className="border-t border-gray-100 pt-3">
                       <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
                         <House className="h-3.5 w-3.5" />
@@ -237,11 +288,21 @@ export function AgentsPage() {
                       <Button
                         type="button"
                         className="h-9 rounded-xl bg-[#1f5c4d] px-4 text-white hover:bg-[#184d40]"
-                        onClick={() => startChatWithAgent(agent.id)}
+                        onClick={() => startChatWithAgent(agent)}
                       >
                         <MessageCircle className="mr-2 h-4 w-4" />
                         {t('agentsCardStartChat')}
                       </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="h-8 rounded-xl px-3 text-xs text-[#7b8794] hover:bg-[#f3f4f6] hover:text-[#475569]"
+                        onClick={() => handleStartEdit(agent)}
+                        disabled={updateAgent.isPending}
+                      >
+                        <Pencil className="mr-1.5 h-3.5 w-3.5" />
+                        {t('agentsEditAction')}
+                      </Button>
                       {!agent.builtIn ? (
                         <Button
                           type="button"
@@ -263,91 +324,29 @@ export function AgentsPage() {
         )}
       </div>
 
-      <Dialog
+      <AgentCreateDialog
         open={isCreateDialogOpen}
+        pending={createAgent.isPending}
+        providerCatalog={providerCatalog}
+        runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime}
+        onOpenChange={setIsCreateDialogOpen}
+        onSubmit={handleCreate}
+      />
+
+      <AgentEditDialog
+        agent={editingAgent}
+        pending={updateAgent.isPending}
+        providerCatalog={providerCatalog}
+        runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime}
         onOpenChange={(open) => {
-          setIsCreateDialogOpen(open);
-          if (!open && !createAgent.isPending) {
-            setForm(EMPTY_FORM);
+          if (!open && !updateAgent.isPending) {
+            setEditingAgent(null);
           }
         }}
-      >
-        <DialogContent className="overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-w-xl">
-          <div className="border-b border-[#f0e2c8] px-6 py-6">
-            <DialogHeader className="text-left">
-              <DialogTitle>{t('agentsCreateDialogTitle')}</DialogTitle>
-              <DialogDescription>{t('agentsCreateDialogDescription')}</DialogDescription>
-            </DialogHeader>
-          </div>
-          <div className="space-y-4 px-6 py-6">
-            <div className="grid gap-4 md:grid-cols-2">
-              <Input
-                value={form.id}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, id: event.target.value }))
-                }
-                placeholder={t('agentsFormIdPlaceholder')}
-              />
-              <Input
-                value={form.displayName}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    displayName: event.target.value
-                  }))
-                }
-                placeholder={t('agentsFormNamePlaceholder')}
-              />
-              <Input
-                value={form.description}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    description: event.target.value
-                  }))
-                }
-                placeholder={t('agentsFormDescriptionPlaceholder')}
-              />
-              <Input
-                value={form.avatar}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, avatar: event.target.value }))
-                }
-                placeholder={t('agentsFormAvatarPlaceholder')}
-              />
-              <Input
-                value={form.home}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, home: event.target.value }))
-                }
-                placeholder={t('agentsFormHomePlaceholder')}
-              />
-            </div>
-            <div className="rounded-2xl border border-[#efe3ca] bg-[#fff9ef] px-4 py-3 text-xs leading-6 text-[#7a6246]">
-              {t('agentsCreateDialogHint')}
-            </div>
-          </div>
-          <DialogFooter className="border-t border-[#f1e7d4] px-6 py-5">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => setIsCreateDialogOpen(false)}
-              disabled={createAgent.isPending}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              type="button"
-              className="rounded-2xl bg-[#1f5c4d] px-5 text-white hover:bg-[#184d40]"
-              onClick={() => void handleCreate()}
-              disabled={createAgent.isPending || form.id.trim().length === 0}
-            >
-              <Plus className="mr-2 h-4 w-4" />
-              {t('agentsCreateAction')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        onSubmit={handleUpdate}
+      />
     </PageLayout>
   );
 }

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

@@ -1,12 +1,17 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ChatChildSessionPanel } from '@/components/chat/chat-child-session-panel';
 import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
   goToProviders: vi.fn(),
+  createSession: vi.fn(),
+  setSelectedAgentId: vi.fn(),
+  setPendingSessionType: vi.fn(),
   resolvedChildTabs: [
     {
       sessionKey: 'child-session-1',
@@ -39,7 +44,22 @@ vi.mock('@/components/chat/containers/chat-message-list.container', () => ({
 }));
 
 vi.mock('@/components/chat/ChatWelcome', () => ({
-  ChatWelcome: () => <div data-testid="chat-welcome" />
+  ChatWelcome: ({
+    onCreateSession,
+    onSelectAgent
+  }: {
+    onCreateSession: () => void;
+    onSelectAgent: (agentId: string) => void;
+  }) => (
+    <div data-testid="chat-welcome">
+      <button type="button" onClick={onCreateSession}>
+        create draft session
+      </button>
+      <button type="button" onClick={() => onSelectAgent('engineer')}>
+        switch draft agent
+      </button>
+    </div>
+  )
 }));
 
 vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
@@ -47,14 +67,18 @@ vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
         chatThreadManager: {
           deleteSession: mocks.deleteSession,
           goToProviders: mocks.goToProviders,
-          createSession: vi.fn(),
           openSessionFromToolAction: vi.fn(),
           selectChildSessionDetail: vi.fn(),
           closeChildSessionDetail: vi.fn(),
           goToParentSession: vi.fn(),
         },
     chatSessionListManager: {
-      selectSession: vi.fn()
+      selectSession: vi.fn(),
+      createSession: mocks.createSession,
+      setSelectedAgentId: mocks.setSelectedAgentId
+    },
+    chatInputManager: {
+      setPendingSessionType: mocks.setPendingSessionType
     }
   })
 }));
@@ -96,6 +120,15 @@ describe('ChatConversationPanel', () => {
   beforeEach(() => {
     mocks.deleteSession.mockReset();
     mocks.goToProviders.mockReset();
+    mocks.createSession.mockReset();
+    mocks.setSelectedAgentId.mockReset();
+    mocks.setPendingSessionType.mockReset();
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        defaultSessionType: 'native'
+      }
+    });
     useChatThreadStore.setState({
       snapshot: {
         ...useChatThreadStore.getState().snapshot,
@@ -116,6 +149,10 @@ describe('ChatConversationPanel', () => {
         isAwaitingAssistantOutput: false,
         parentSessionKey: null,
         parentSessionLabel: null,
+        availableAgents: [
+          { id: 'main', displayName: 'Main', runtime: 'native' },
+          { id: 'engineer', displayName: 'Engineer', runtime: 'codex' }
+        ],
         childSessionTabs: [],
         activeChildSessionKey: null,
       }
@@ -177,6 +214,35 @@ describe('ChatConversationPanel', () => {
     expect(screen.getByTestId('agent-avatar').textContent).toBe('engineer');
     expect(screen.queryByText('Engineer')).toBeNull();
   });
+
+  it('creates a draft session with the selected draft agent runtime', async () => {
+    const user = userEvent.setup();
+
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        agentId: 'engineer',
+        agentDisplayName: 'Engineer'
+      }
+    });
+
+    render(<ChatConversationPanel />);
+
+    await user.click(screen.getByRole('button', { name: 'create draft session' }));
+
+    expect(mocks.createSession).toHaveBeenCalledWith('codex');
+  });
+
+  it('syncs the pending session type when switching the draft agent', async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationPanel />);
+
+    await user.click(screen.getByRole('button', { name: 'switch draft agent' }));
+
+    expect(mocks.setSelectedAgentId).toHaveBeenCalledWith('engineer');
+    expect(mocks.setPendingSessionType).toHaveBeenCalledWith('codex');
+  });
 });
 
 describe('ChatChildSessionPanel', () => {

package/src/components/chat/ChatConversationPanel.tsx

@@ -11,7 +11,9 @@ import { AgentAvatar } from "@/components/common/AgentAvatar";
 import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
 import { ChatSessionHeaderActions } from "@/components/chat/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/components/chat/session-header/chat-session-project-badge";
+import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
 import { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
+import { resolveAgentRuntimeSessionType } from "@/components/chat/useChatSessionTypeState";
 import { t } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
@@ -45,6 +47,9 @@ function ChatConversationSkeleton() {
 
 export function ChatConversationPanel() {
   const presenter = usePresenter();
+  const defaultSessionType = useChatInputStore(
+    (state) => state.snapshot.defaultSessionType,
+  );
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
   const threadRef = snapshot.threadRef ?? fallbackThreadRef;
@@ -80,6 +85,22 @@ export function ChatConversationPanel() {
     snapshot.messages.length === 0 &&
     !snapshot.isSending &&
     !snapshot.isAwaitingAssistantOutput;
+  const availableAgents = snapshot.availableAgents ?? [];
+  const resolveDraftAgent = (agentId: string) =>
+    availableAgents.find((agent) => agent.id === agentId) ?? null;
+  const createDraftSessionForAgent = () => {
+    const sessionType = resolveAgentRuntimeSessionType(
+      resolveDraftAgent(snapshot.agentId ?? "main"),
+      defaultSessionType,
+    );
+    presenter.chatSessionListManager.createSession(sessionType);
+  };
+  const selectDraftAgent = (agentId: string) => {
+    presenter.chatSessionListManager.setSelectedAgentId(agentId);
+    presenter.chatInputManager.setPendingSessionType(
+      resolveAgentRuntimeSessionType(resolveDraftAgent(agentId), defaultSessionType),
+    );
+  };
 
   const { onScroll: handleScroll } = useStickyBottomScroll({
     scrollRef: threadRef,
@@ -192,10 +213,10 @@ export function ChatConversationPanel() {
         >
           {showWelcome ? (
             <ChatWelcome
-              onCreateSession={presenter.chatThreadManager.createSession}
-              agents={snapshot.availableAgents ?? []}
+              onCreateSession={createDraftSessionForAgent}
+              agents={availableAgents}
               selectedAgentId={snapshot.agentId ?? "main"}
-              onSelectAgent={presenter.chatSessionListManager.setSelectedAgentId}
+              onSelectAgent={selectDraftAgent}
             />
           ) : hideEmptyHint ? (
             <div className="h-full" />

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'
       }
     });
   });
@@ -28,13 +31,30 @@ describe('ChatSessionListManager', () => {
       resetStreamState: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
 
-    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager, () => 'draft-session-1');
     manager.createSession('codex');
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
     expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
     expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
     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, () => 'draft-session-9');
+    manager.createSession('native', '/tmp/project-alpha');
+
+    expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBe('/tmp/project-alpha');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-session-9');
   });
 
   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');
+  });
 });

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

@@ -3,11 +3,13 @@ import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import type { SetStateAction } from 'react';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
+import { normalizeSessionProjectRootValue } from '@/lib/session-project/session-project.utils';
 
 export class ChatSessionListManager {
   constructor(
     private uiManager: ChatUiManager,
-    private streamActionsManager: ChatStreamActionsManager
+    private streamActionsManager: ChatStreamActionsManager,
+    private getDraftSessionId: () => string = () => ''
   ) {}
 
   private resolveUpdateValue = <T>(prev: T, next: SetStateAction<T>): T => {
@@ -35,7 +37,16 @@ export class ChatSessionListManager {
     useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: value });
   };
 
-  createSession = (sessionType?: string) => {
+  setListMode = (next: SetStateAction<'time-first' | 'project-first'>) => {
+    const prev = useChatSessionListStore.getState().snapshot.listMode;
+    const value = this.resolveUpdateValue(prev, next);
+    if (value === prev) {
+      return;
+    }
+    useChatSessionListStore.getState().setSnapshot({ listMode: value });
+  };
+
+  createSession = (sessionType?: string, projectRoot?: string | null) => {
     const { snapshot } = useChatInputStore.getState();
     const { defaultSessionType: configuredDefaultSessionType } = snapshot;
     const defaultSessionType = configuredDefaultSessionType || 'native';
@@ -43,11 +54,13 @@ export class ChatSessionListManager {
       typeof sessionType === 'string' && sessionType.trim().length > 0
         ? sessionType.trim()
         : defaultSessionType;
+    const normalizedProjectRoot = normalizeSessionProjectRootValue(projectRoot);
+    const draftSessionId = normalizedProjectRoot ? this.getDraftSessionId() : null;
     this.streamActionsManager.resetStreamState();
     useChatInputStore.getState().setSnapshot({
       pendingSessionType: nextSessionType,
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
+      pendingProjectRoot: normalizedProjectRoot,
+      pendingProjectRootSessionKey: draftSessionId
     });
     this.uiManager.goToChatRoot();
   };

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -57,6 +57,7 @@ export function buildNcpSendMetadata(payload: {
   }
   if (payload.sessionType?.trim()) {
     metadata.session_type = payload.sessionType.trim();
+    metadata.runtime = payload.sessionType.trim();
   }
   if (payload.agentId?.trim()) {
     metadata.agent_id = payload.agentId.trim();

package/src/components/chat/ncp/ncp-chat.presenter.ts

@@ -7,7 +7,11 @@ import { NcpChatThreadManager } from '@/components/chat/ncp/ncp-chat-thread.mana
 export class NcpChatPresenter {
   chatUiManager = new ChatUiManager();
   chatStreamActionsManager = new ChatStreamActionsManager();
-  chatSessionListManager = new ChatSessionListManager(this.chatUiManager, this.chatStreamActionsManager);
+  chatSessionListManager = new ChatSessionListManager(
+    this.chatUiManager,
+    this.chatStreamActionsManager,
+    () => this.getDraftSessionId()
+  );
   chatInputManager = new NcpChatInputManager(
     this.chatUiManager,
     this.chatStreamActionsManager,

package/src/components/chat/ncp/ncp-session-adapter.ts

@@ -85,7 +85,12 @@ function readNcpSessionType(summary: NcpSessionSummaryView): string {
   if (!metadata) {
     return 'native';
   }
-  return readOptionalString(metadata.session_type) ?? readOptionalString(metadata.sessionType) ?? 'native';
+  return (
+    readOptionalString(metadata.runtime) ??
+    readOptionalString(metadata.session_type) ??
+    readOptionalString(metadata.sessionType) ??
+    'native'
+  );
 }
 
 function readNcpParentSessionId(summary: NcpSessionSummaryView): string | null {

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

@@ -1,8 +1,12 @@
 import { create } from 'zustand';
+
+export type ChatSessionListMode = 'time-first' | 'project-first';
+
 export type ChatSessionListSnapshot = {
   selectedSessionKey: string | null;
   selectedAgentId: string;
   query: string;
+  listMode: ChatSessionListMode;
 };
 
 type ChatSessionListStore = {
@@ -13,7 +17,8 @@ type ChatSessionListStore = {
 const initialSnapshot: ChatSessionListSnapshot = {
   selectedSessionKey: null,
   selectedAgentId: 'main',
-  query: ''
+  query: '',
+  listMode: 'time-first'
 };
 
 export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({