@nextclaw/ui 0.12.13 → 0.12.14

package/src/features/chat/components/conversation/chat-conversation-panel.test.tsx

@@ -11,7 +11,8 @@ import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
   goToProviders: vi.fn(),
-  createSession: vi.fn(),
+  createSession: vi.fn(() => "draft-session-2"),
+  goToSession: vi.fn(),
   setSelectedAgentId: vi.fn(),
   setPendingSessionType: vi.fn(),
   stickyBottomScroll: vi.fn(() => ({
@@ -79,6 +80,9 @@ vi.mock("@/features/chat/components/chat-welcome", () => ({
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
+    chatUiManager: {
+      goToSession: mocks.goToSession,
+    },
     chatThreadManager: {
       deleteSession: mocks.deleteSession,
       goToProviders: mocks.goToProviders,
@@ -158,6 +162,8 @@ describe("ChatConversationPanel", () => {
     mocks.deleteSession.mockReset();
     mocks.goToProviders.mockReset();
     mocks.createSession.mockReset();
+    mocks.createSession.mockReturnValue("draft-session-2");
+    mocks.goToSession.mockReset();
     mocks.setSelectedAgentId.mockReset();
     mocks.setPendingSessionType.mockReset();
     mocks.stickyBottomScroll.mockClear();
@@ -233,6 +239,17 @@ describe("ChatConversationPanel", () => {
     expect(onBackToList).toHaveBeenCalledTimes(1);
   });
 
+  it("opens the new draft session immediately when mobile welcome creates a session", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationPanel layoutMode="mobile" />);
+
+    await user.click(screen.getByRole("button", { name: "create draft session" }));
+
+    expect(mocks.createSession).toHaveBeenCalledWith("native");
+    expect(mocks.goToSession).toHaveBeenCalledWith("draft-session-2");
+  });
+
   it("shows the selected session project badge and more actions trigger", () => {
     useChatThreadStore.setState({
       snapshot: {

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -272,7 +272,8 @@ export function ChatConversationPanel({
       resolveDraftAgent(snapshot.agentId ?? "main"),
       defaultSessionType,
     );
-    presenter.chatSessionListManager.createSession(sessionType);
+    const sessionKey = presenter.chatSessionListManager.createSession(sessionType);
+    if (layoutMode === "mobile") presenter.chatUiManager.goToSession(sessionKey);
   };
   const selectDraftAgent = (agentId: string) => {
     presenter.chatSessionListManager.setSelectedAgentId(agentId);

package/src/features/chat/components/layout/chat-sidebar.test.tsx

@@ -7,7 +7,8 @@ import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 
 const mocks = vi.hoisted(() => ({
-  createSession: vi.fn(),
+  createSession: vi.fn(() => 'draft-session-key'),
+  goToSession: vi.fn(),
   setQuery: vi.fn(),
   setListMode: vi.fn(),
   selectSession: vi.fn(),
@@ -28,6 +29,9 @@ function createSessionItem(
 
 vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
   usePresenter: () => ({
+    chatUiManager: {
+      goToSession: mocks.goToSession,
+    },
     chatSessionListManager: {
       createSession: mocks.createSession,
       setQuery: mocks.setQuery,
@@ -115,6 +119,8 @@ vi.mock('@/features/system-status', () => ({
 
 function resetSidebarTestState() {
   mocks.createSession.mockReset();
+  mocks.createSession.mockReturnValue('draft-session-key');
+  mocks.goToSession.mockReset();
   mocks.setQuery.mockReset();
   mocks.setListMode.mockReset();
   mocks.selectSession.mockReset();
@@ -228,6 +234,7 @@ describe('ChatSidebar create and list basics', () => {
 
     expect(mocks.setQuery).toHaveBeenCalledWith('release notes');
     expect(mocks.createSession).toHaveBeenCalledWith('codex');
+    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
   });
 
   it('creates the default session directly from the compact mobile add button when no menu is needed', () => {
@@ -248,6 +255,7 @@ describe('ChatSidebar create and list basics', () => {
     fireEvent.click(screen.getByRole('button', { name: 'New Task' }));
 
     expect(mocks.createSession).toHaveBeenCalledWith('native');
+    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
   });
 
   it('shows a session type badge for non-native sessions in the list', () => {
@@ -408,6 +416,7 @@ describe('ChatSidebar project-first mode', () => {
     fireEvent.click(screen.getByText('Codex'));
 
     expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-beta');
+    expect(mocks.goToSession).not.toHaveBeenCalled();
   });
 
   it('creates immediately when there is only one available runtime type', () => {
@@ -447,6 +456,41 @@ describe('ChatSidebar project-first mode', () => {
     fireEvent.click(screen.getByRole('button', { name: 'New Task · project-gamma' }));
 
     expect(mocks.createSession).toHaveBeenCalledWith('native', '/tmp/project-gamma');
+    expect(mocks.goToSession).not.toHaveBeenCalled();
+  });
+
+  it('opens the draft detail after creating a project-bound session on mobile', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        listMode: 'project-first'
+      }
+    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:project-mobile-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T11:05:00.000Z',
+        label: 'Grouped Mobile Task',
+        projectRoot: '/tmp/project-mobile',
+        projectName: 'project-mobile',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar variant="mobile" />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'New Task · project-mobile' }));
+    fireEvent.click(screen.getByText('Codex'));
+
+    expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-mobile');
+    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
   });
 });
 

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -8,10 +8,7 @@ import { useChatSidebarSessionLabelEditor } from '@/features/chat/hooks/use-chat
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
-import {
-  shouldShowUnreadSessionIndicator,
-  useChatSessionListStore
-} from '@/features/chat/stores/chat-session-list.store';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 import { useSystemStatus } from '@/features/system-status';
 import { useAgents } from '@/shared/hooks/use-agents';
 import { getSessionProjectName } from '@/shared/lib/session-project';
@@ -230,32 +227,33 @@ export function ChatSidebar({
     setLanguage(nextLang);
     window.location.reload();
   };
-  const renderSessionItem = (item: NcpSessionListItemView) =>
-    (
-      <ChatSidebarSessionEntry
-        key={item.session.key}
-        item={item}
-        selectedSessionKey={listSnapshot.selectedSessionKey}
-        optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
-        agentsById={agentsById}
-        childSessionsByParentKey={childSessionsByParentKey}
-        editingSessionKey={editingSessionKey}
-        draftLabel={draftLabel}
-        savingSessionKey={savingSessionKey}
-        sessionTitle={sessionTitle}
-        onSelectSession={presenter.chatSessionListManager.selectSession}
-        onOpenChildSessions={(parentSessionKey, activeChildSessionKey) =>
-          presenter.chatThreadManager.openChildSessionPanel({
-            parentSessionKey,
-            activeChildSessionKey,
-          })
-        }
-        onStartEditingSessionLabel={startEditingSessionLabel}
-        onDraftLabelChange={setDraftLabel}
-        onSaveSessionLabel={saveSessionLabel}
-        onCancelEditingSessionLabel={cancelEditingSessionLabel}
-      />
-    );
+  const renderSessionItem = (item: NcpSessionListItemView) => (
+    <ChatSidebarSessionEntry
+      key={item.session.key}
+      item={item}
+      selectedSessionKey={listSnapshot.selectedSessionKey}
+      optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
+      agentsById={agentsById}
+      childSessionsByParentKey={childSessionsByParentKey}
+      editingSessionKey={editingSessionKey}
+      draftLabel={draftLabel}
+      savingSessionKey={savingSessionKey}
+      sessionTitle={sessionTitle}
+      onSelectSession={presenter.chatSessionListManager.selectSession}
+      onOpenChildSessions={(parentSessionKey, activeChildSessionKey) => presenter.chatThreadManager.openChildSessionPanel({ parentSessionKey, activeChildSessionKey })}
+      onStartEditingSessionLabel={startEditingSessionLabel}
+      onDraftLabelChange={setDraftLabel}
+      onSaveSessionLabel={saveSessionLabel}
+      onCancelEditingSessionLabel={cancelEditingSessionLabel}
+    />
+  );
+  const createSessionAndOpenIfNeeded = (sessionType: string, projectRoot?: string | null) => {
+    const sessionKey = typeof projectRoot === "string"
+      ? presenter.chatSessionListManager.createSession(sessionType, projectRoot)
+      : presenter.chatSessionListManager.createSession(sessionType);
+    if (isMobileVariant) presenter.chatUiManager.goToSession(sessionKey);
+  };
+
   return (
     <aside
       className={cn(
@@ -282,7 +280,7 @@ export function ChatSidebar({
           nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
           isCreateMenuOpen={isCreateMenuOpen}
           onCreateMenuOpenChange={setIsCreateMenuOpen}
-          onCreateSession={presenter.chatSessionListManager.createSession}
+          onCreateSession={createSessionAndOpenIfNeeded}
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       ) : (
@@ -293,7 +291,7 @@ export function ChatSidebar({
           nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
           isCreateMenuOpen={isCreateMenuOpen}
           onCreateMenuOpenChange={setIsCreateMenuOpen}
-          onCreateSession={presenter.chatSessionListManager.createSession}
+          onCreateSession={createSessionAndOpenIfNeeded}
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       )}
@@ -301,18 +299,11 @@ export function ChatSidebar({
       {!isMobileVariant ? (
         <div className="px-3 pb-2">
           <ul className="space-y-0.5">
-            {navItems.map((item) => {
-              return (
-                <li key={item.target}>
-                  <SidebarNavLinkItem
-                    to={item.target}
-                    label={item.label()}
-                    icon={item.icon}
-                    density="compact"
-                  />
-                </li>
-              );
-            })}
+            {navItems.map((item) => (
+              <li key={item.target}>
+                <SidebarNavLinkItem to={item.target} label={item.label()} icon={item.icon} density="compact" />
+              </li>
+            ))}
           </ul>
         </div>
       ) : null}
@@ -346,7 +337,7 @@ export function ChatSidebar({
               defaultSessionType={defaultSessionType}
               sessionTypeOptions={inputSnapshot.sessionTypeOptions}
               renderSessionItem={renderSessionItem}
-              onCreateSession={presenter.chatSessionListManager.createSession}
+              onCreateSession={createSessionAndOpenIfNeeded}
             />
           )
         ) : groups.length === 0 ? (