@nextclaw/ui 0.14.1-beta.1 → 0.14.2

package/src/features/chat/components/conversation/__tests__/chat-conversation-workspace-section.test.tsx

@@ -0,0 +1,132 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { PersistStorage, StorageValue } from "zustand/middleware";
+import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import type { NcpSessionSummaryView } from "@/shared/lib/api";
+
+const mocks = vi.hoisted(() => ({
+  panelProps: vi.fn(),
+}));
+
+vi.mock("@/features/chat/features/workspace/components/chat-session-workspace-panel", () => ({
+  ChatSessionWorkspacePanel: ({
+    sessionProjectRoot,
+    sessionWorkingDir,
+  }: {
+    sessionProjectRoot: string | null;
+    sessionWorkingDir: string | null;
+  }) => {
+    mocks.panelProps({ sessionProjectRoot, sessionWorkingDir });
+    return (
+      <div
+        data-testid="workspace-panel"
+        data-project-root={sessionProjectRoot ?? ""}
+        data-working-dir={sessionWorkingDir ?? ""}
+      />
+    );
+  },
+}));
+
+vi.mock("@/features/cron", () => ({
+  useCronJobs: () => ({ data: { jobs: [] } }),
+}));
+
+class MemoryPersistStorage implements PersistStorage<unknown> {
+  private readonly values = new Map<string, StorageValue<unknown>>();
+
+  getItem = (name: string) => this.values.get(name) ?? null;
+
+  setItem = (name: string, value: StorageValue<unknown>) => {
+    this.values.set(name, value);
+  };
+
+  removeItem = (name: string) => {
+    this.values.delete(name);
+  };
+}
+
+function createSummary(
+  overrides: Partial<NcpSessionSummaryView> & Pick<NcpSessionSummaryView, "sessionId">,
+): NcpSessionSummaryView {
+  return {
+    messageCount: 1,
+    status: "idle",
+    updatedAt: "2026-06-19T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+describe("ChatConversationWorkspaceSection", () => {
+  beforeEach(() => {
+    mocks.panelProps.mockReset();
+    useChatThreadStore.persist.setOptions({
+      storage: new MemoryPersistStorage(),
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        workspacePanelParentKey: "session-1",
+        activeWorkspacePanelKind: "file",
+        workspaceFileTabs: [
+          {
+            key: "file-tab",
+            parentSessionKey: "session-1",
+            path: "docs/designs/2026-06-10-core-kernel-responsibility.design.md",
+            label: "core-kernel-responsibility",
+            viewMode: "preview",
+          },
+        ],
+        activeWorkspaceFileKey: "file-tab",
+        childSessionTabs: [],
+        activeChildSessionKey: null,
+        workspaceNavigationHistory: [],
+        workspaceNavigationHistoryIndex: 0,
+        sessionProjectRoot: null,
+        sessionWorkingDir: null,
+      },
+    });
+    useChatQueryStore.setState({
+      snapshot: {
+        sessionsQuery: {
+          data: {
+            sessions: [
+              createSummary({
+                sessionId: "session-1",
+                workingDir: "/Users/peiwang/Projects/nextbot",
+                metadata: {
+                  project_root: "/Users/peiwang/Projects/nextbot",
+                },
+              }),
+            ],
+            total: 1,
+          },
+        } as never,
+      },
+    });
+  });
+
+  it("uses selected session workingDir as the workspace file preview base path", () => {
+    render(
+      <ChatConversationWorkspaceSection
+        layoutMode="desktop"
+        sessionKey="session-1"
+      />,
+    );
+
+    const panel = screen.getByTestId("workspace-panel");
+    expect(panel.getAttribute("data-project-root")).toBe(
+      "/Users/peiwang/Projects/nextbot",
+    );
+    expect(panel.getAttribute("data-working-dir")).toBe(
+      "/Users/peiwang/Projects/nextbot",
+    );
+    expect(mocks.panelProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionProjectRoot: "/Users/peiwang/Projects/nextbot",
+        sessionWorkingDir: "/Users/peiwang/Projects/nextbot",
+      }),
+    );
+  });
+});

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

@@ -1,34 +1,41 @@
 import { useRef, type ReactNode } from "react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
+import type { NcpMessage } from "@nextclaw/ncp";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
-import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 
 type ChatConversationContentProps = {
+  isAwaitingAssistantOutput: boolean;
+  isHistoryLoading: boolean;
+  isSending: boolean;
+  messages: readonly NcpMessage[];
+  sessionKey: string | null;
   showWelcome: boolean;
   welcomeSlot?: ReactNode;
 };
 
 export function ChatConversationContent({
+  isAwaitingAssistantOutput,
+  isHistoryLoading,
+  isSending,
+  messages,
+  sessionKey,
   showWelcome,
   welcomeSlot,
 }: ChatConversationContentProps) {
-  const snapshot = useChatThreadStore((state) => state.snapshot);
   const threadRef = useRef<HTMLDivElement | null>(null);
   const hideEmptyHint =
-    snapshot.isHistoryLoading &&
-    snapshot.messages.length === 0 &&
-    !snapshot.isSending &&
-    !snapshot.isAwaitingAssistantOutput;
+    isHistoryLoading &&
+    messages.length === 0 &&
+    !isSending &&
+    !isAwaitingAssistantOutput;
   const { onScroll } = useStickyBottomScroll({
     scrollRef: threadRef,
-    resetKey: snapshot.sessionKey,
-    isLoading: snapshot.isHistoryLoading,
-    hasContent: snapshot.messages.length > 0,
-    contentVersion: snapshot.messages[snapshot.messages.length - 1] ?? null,
+    resetKey: sessionKey,
+    isLoading: isHistoryLoading,
+    hasContent: messages.length > 0,
+    contentVersion: messages[messages.length - 1] ?? null,
   });
-  const hasMessages = snapshot.messages.length > 0;
-  const isAwaitingAssistantOutput =
-    hasMessages && snapshot.isSending && snapshot.isAwaitingAssistantOutput;
+  const hasMessages = messages.length > 0;
 
   return (
     <div
@@ -42,8 +49,8 @@ export function ChatConversationContent({
       ) : hideEmptyHint || !hasMessages ? null : (
         <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
           <ChatMessageListContainer
-            messages={snapshot.messages}
-            isSending={isAwaitingAssistantOutput}
+            messages={messages}
+            isSending={hasMessages && isSending && isAwaitingAssistantOutput}
           />
         </div>
       )}

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -9,10 +9,10 @@ import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/us
 import { sessionDisplayName } from "@/features/chat/features/session/utils/chat-session-display.utils";
 import {
   buildSessionTypeOptions,
+  DEFAULT_SESSION_TYPE,
   normalizeSessionType,
   resolveSessionTypeLabel,
 } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
-import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
@@ -34,9 +34,8 @@ export function ChatConversationHeaderSection({
   const sessionKey = useChatSessionListStore(
     (state) => state.snapshot.selectedSessionKey,
   );
-  const effectiveSessionKey = sessionKey ?? snapshot.sessionKey;
-  const pendingSessionType = useChatInputStore(
-    (state) => state.snapshot.pendingSessionType,
+  const selectedAgentId = useChatSessionListStore(
+    (state) => state.snapshot.selectedAgentId,
   );
   const sessionTypesData = useChatQueryStore(
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
@@ -47,7 +46,7 @@ export function ChatConversationHeaderSection({
     [sessionTypesData?.options],
   );
   const sessionType = normalizeSessionType(
-    selectedSession?.sessionType ?? pendingSessionType,
+    selectedSession?.sessionType ?? sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE,
   );
   const sessionTypeOption =
     sessionTypeOptions.find((option) => option.value === sessionType) ?? null;
@@ -58,8 +57,8 @@ export function ChatConversationHeaderSection({
     selectedSession?.projectName ?? getSessionProjectName(sessionProjectRoot);
   const canDeleteSession = Boolean(selectedSession);
   const { childSessionTabs, sessionCronJobs } =
-    useChatConversationWorkspaceState(snapshot);
-  const shouldShowSessionHeader = Boolean(effectiveSessionKey || sessionTypeLabel);
+    useChatConversationWorkspaceState(snapshot, sessionKey);
+  const shouldShowSessionHeader = Boolean(sessionKey || sessionTypeLabel);
   const sessionHeaderTitle =
     (selectedSession ? sessionDisplayName(selectedSession) : undefined) ||
     (canDeleteSession && sessionKey
@@ -67,23 +66,23 @@ export function ChatConversationHeaderSection({
       : null) ||
     t("chatSidebarNewTask");
   const normalizedAgentId =
-    selectedSession?.agentId?.trim() ?? snapshot.agentId?.trim() ?? "";
+    selectedSession?.agentId?.trim() ?? selectedAgentId?.trim() ?? "";
   const shouldShowHeaderAgentAvatar =
     normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
   const openChildSessions = () => {
-    if (!effectiveSessionKey) {
+    if (!sessionKey) {
       return;
     }
     presenter.chatThreadManager.openChildSessionPanel({
-      parentSessionKey: effectiveSessionKey,
+      parentSessionKey: sessionKey,
       activeChildSessionKey: childSessionTabs[0]?.sessionKey ?? null,
     });
   };
   const openSessionCronJobs = () => {
-    if (!effectiveSessionKey || sessionCronJobs.length === 0) {
+    if (!sessionKey || sessionCronJobs.length === 0) {
       return;
     }
-    presenter.chatThreadManager.openSessionCronPanel(effectiveSessionKey);
+    presenter.chatThreadManager.openSessionCronPanel(sessionKey);
   };
 
   return (
@@ -124,7 +123,7 @@ export function ChatConversationHeaderSection({
       projectBadge={
         sessionProjectName ? (
           <ChatSessionProjectBadge
-            sessionKey={effectiveSessionKey ?? "draft"}
+            sessionKey={sessionKey ?? "draft"}
             projectName={sessionProjectName}
             projectRoot={sessionProjectRoot}
             persistToServer={canDeleteSession}
@@ -132,9 +131,9 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       actions={
-        effectiveSessionKey ? (
+        sessionKey ? (
           <ChatSessionHeaderActions
-            sessionKey={effectiveSessionKey}
+            sessionKey={sessionKey}
             canDeleteSession={canDeleteSession}
             isDeletePending={snapshot.isDeletePending}
             projectRoot={sessionProjectRoot}

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

@@ -1,14 +1,12 @@
-import { ChatInputBarContainer } from "@/features/chat/features/input/components/chat-input-bar.container";
-import { ChatConversationAlerts } from "@/features/chat/components/conversation/chat-conversation-alerts";
-import { ChatConversationContent } from "@/features/chat/components/conversation/chat-conversation-content";
+import { useCallback } from "react";
 import { ChatConversationHeaderSection } from "@/features/chat/components/conversation/chat-conversation-header-section";
 import { ChatConversationParentBanner } from "@/features/chat/components/conversation/chat-conversation-parent-banner";
 import { ChatConversationSkeleton } from "@/features/chat/components/conversation/chat-conversation-skeleton";
 import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { SessionConversationArea } from "@/features/chat/features/conversation/components/session-conversation-area";
 import { useNcpChatProviderStateResolved } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
-import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
-import { shouldShowChatWelcome } from "@/features/chat/features/welcome/utils/chat-welcome-visibility.utils";
-import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 
 type ChatConversationLayoutMode = "desktop" | "mobile";
 
@@ -19,10 +17,17 @@ export function ChatConversationPanel({
   layoutMode?: ChatConversationLayoutMode;
   onBackToList?: () => void;
 }) {
+  const presenter = usePresenter();
   const isProviderStateResolved = useNcpChatProviderStateResolved();
-  const showWelcome = useChatThreadStore((state) =>
-    shouldShowChatWelcome(state.snapshot),
+  const sessionKey = useChatSessionListStore(
+    (state) => state.snapshot.selectedSessionKey,
   );
+  const handleSessionMaterialized = useCallback((materializedSessionKey: string) => {
+    if (!presenter.chatUiManager.isAtChatRoot()) {
+      return;
+    }
+    presenter.chatUiManager.goToSession(materializedSessionKey, { replace: true });
+  }, [presenter]);
 
   if (!isProviderStateResolved) {
     return <ChatConversationSkeleton />;
@@ -36,19 +41,14 @@ export function ChatConversationPanel({
           layoutMode={layoutMode}
           onBackToList={onBackToList}
         />
-        <ChatConversationAlerts />
-        <ChatConversationContent
-          showWelcome={showWelcome}
-          welcomeSlot={
-            <ChatConversationWelcome
-              inputSlot={<ChatInputBarContainer surface="embedded" />}
-            />
-          }
+        <SessionConversationArea
+          consumeDraftIntent
+          sessionKey={sessionKey}
+          onSessionMaterialized={handleSessionMaterialized}
         />
-        {showWelcome ? null : <ChatInputBarContainer />}
       </div>
 
-      <ChatConversationWorkspaceSection layoutMode={layoutMode} />
+      <ChatConversationWorkspaceSection layoutMode={layoutMode} sessionKey={sessionKey} />
     </section>
   );
 }

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -1,21 +1,26 @@
 import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/components/chat-session-workspace-panel";
+import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 
 type ChatConversationWorkspaceSectionProps = {
   layoutMode: "desktop" | "mobile";
+  sessionKey: string | null;
 };
 
 export function ChatConversationWorkspaceSection({
   layoutMode,
+  sessionKey,
 }: ChatConversationWorkspaceSectionProps) {
   const snapshot = useChatThreadStore((state) => state.snapshot);
+  const selectedSession = useNcpChatSelectedSession(sessionKey);
   const {
     childSessionTabs,
+    activeSideChatDraft,
     workspaceFileTabs,
     sessionCronJobs,
     showWorkspacePanel,
-  } = useChatConversationWorkspaceState(snapshot);
+  } = useChatConversationWorkspaceState(snapshot, sessionKey);
 
   if (!showWorkspacePanel) {
     return null;
@@ -23,18 +28,19 @@ export function ChatConversationWorkspaceSection({
 
   return (
     <ChatSessionWorkspacePanel
-      sessionKey={snapshot.sessionKey}
+      sessionKey={sessionKey}
       childSessionTabs={childSessionTabs}
       activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
+      activeSideChatDraft={activeSideChatDraft}
       workspaceFileTabs={workspaceFileTabs}
       activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
       workspaceNavigationHistory={snapshot.workspaceNavigationHistory}
       workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
       activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
       sessionCronJobs={sessionCronJobs}
-      sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
+      sessionProjectRoot={selectedSession?.projectRoot ?? null}
       sessionWorkingDir={
-        snapshot.sessionWorkingDir ?? snapshot.sessionProjectRoot ?? null
+        selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null
       }
       displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
     />

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

@@ -1,10 +1,12 @@
-import { render, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 
 const mocks = vi.hoisted(() => ({
   sessionItems: [] as NcpSessionListItemView[],
@@ -107,6 +109,8 @@ function createRunningSessionItem(
 }
 
 function resetReadStateTestState() {
+  window.localStorage.clear();
+  viewportLayoutManager.resetForTests();
   mocks.sessionItems = [];
   useChatQueryStore.setState({
     snapshot: {
@@ -130,16 +134,36 @@ function resetReadStateTestState() {
   });
 }
 
+function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+}
+
+function createReadStateSidebarElement(queryClient: QueryClient) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+function renderReadStateSidebar(queryClient: QueryClient) {
+  return render(createReadStateSidebarElement(queryClient));
+}
+
 describe("ChatSidebar read state sync", () => {
   beforeEach(resetReadStateTestState);
 
   it("waits until the active running session is idle before persisting the read watermark", async () => {
     mocks.sessionItems = [createRunningSessionItem("running")];
-    const { rerender } = render(
-      <MemoryRouter>
-        <ChatSidebar />
-      </MemoryRouter>,
-    );
+    const queryClient = createTestQueryClient();
+    const { rerender } = renderReadStateSidebar(queryClient);
 
     await waitFor(() => {
       expect(
@@ -150,11 +174,7 @@ describe("ChatSidebar read state sync", () => {
     });
 
     mocks.sessionItems = [createRunningSessionItem()];
-    rerender(
-      <MemoryRouter>
-        <ChatSidebar />
-      </MemoryRouter>,
-    );
+    rerender(createReadStateSidebarElement(queryClient));
 
     await waitFor(() => {
       expect(
@@ -164,4 +184,25 @@ describe("ChatSidebar read state sync", () => {
       ).toBe("2026-03-19T09:05:00.000Z");
     });
   });
+
+  it("collapses the desktop sidebar into accessible icon actions", () => {
+    const { container } = renderReadStateSidebar(createTestQueryClient());
+
+    fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }));
+
+    const persistedState = JSON.parse(
+      window.localStorage.getItem("nextclaw.app.viewport-layout") ?? "{}",
+    ) as { state?: { isSidebarCollapsed?: boolean } };
+
+    expect(
+      container.querySelector("aside")?.getAttribute("data-sidebar-collapsed"),
+    ).toBe("true");
+    expect(persistedState.state?.isSidebarCollapsed).toBe(true);
+    expect(screen.getByRole("button", { name: "New Task" }).textContent).toBe(
+      "",
+    );
+    expect(screen.queryByPlaceholderText("Search conversations...")).toBeNull();
+    expect(screen.getByRole("link", { name: "Scheduled Tasks" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Settings menu" })).toBeTruthy();
+  });
 });

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

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -5,8 +6,9 @@ import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { PREFERENCE_KEYS } from "@/shared/lib/api";
 import type { ChatSessionTypeOptionView } from "@/shared/lib/api";
-
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 const mocks = vi.hoisted(() => ({
   createSession: vi.fn(() => "draft-session-key"),
   goToSession: vi.fn(),
@@ -18,6 +20,8 @@ const mocks = vi.hoisted(() => ({
   docOpen: vi.fn(),
   setLanguage: vi.fn(),
   setTheme: vi.fn(),
+  fetchPreference: vi.fn(),
+  updatePreference: vi.fn(),
   updateNcpSession: vi.fn(),
   agents: [] as Array<{
     id: string;
@@ -27,14 +31,20 @@ const mocks = vi.hoisted(() => ({
   sessionItems: [] as NcpSessionListItemView[],
   isLoading: false,
 }));
-
+vi.mock("@/shared/lib/api", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as Record<string, unknown>),
+    fetchPreference: mocks.fetchPreference,
+    updatePreference: mocks.updatePreference,
+  };
+});
 function createSessionItem(
   session: NcpSessionListItemView["session"],
   runStatus?: NcpSessionListItemView["runStatus"],
 ): NcpSessionListItemView {
   return { session, runStatus };
 }
-
 function setSessionTypes(
   options: ChatSessionTypeOptionView[],
   defaultType = "native",
@@ -51,18 +61,30 @@ function setSessionTypes(
     },
   });
 }
-
 function sidebarElement(variant?: "desktop" | "mobile") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
   return (
-    <MemoryRouter>
-      <ChatSidebar variant={variant} />
-    </MemoryRouter>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ChatSidebar variant={variant} />
+      </MemoryRouter>
+    </QueryClientProvider>
   );
 }
-
 function renderSidebar(variant?: "desktop" | "mobile") {
   return render(sidebarElement(variant));
 }
+function expectCodexSelectedInSessionTypeMenu() {
+  fireEvent.click(screen.getByLabelText("Session Type"));
+  expect(
+    screen.getByRole("button", { name: /Codex/i }).getAttribute("aria-pressed"),
+  ).toBe("true");
+}
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
@@ -166,6 +188,8 @@ vi.mock("@/features/system-status", () => ({
 }));
 
 function resetSidebarTestState() {
+  window.localStorage.clear();
+  viewportLayoutManager.resetForTests();
   mocks.createSession.mockReset();
   mocks.createSession.mockReturnValue("draft-session-key");
   mocks.goToSession.mockReset();
@@ -177,6 +201,19 @@ function resetSidebarTestState() {
   mocks.docOpen.mockReset();
   mocks.setLanguage.mockReset();
   mocks.setTheme.mockReset();
+  mocks.fetchPreference.mockReset();
+  mocks.fetchPreference.mockResolvedValue({
+    key: PREFERENCE_KEYS.chat.newSessionType,
+    value: null,
+  });
+  mocks.updatePreference.mockReset();
+  mocks.updatePreference.mockImplementation(
+    async (key: string, value: string) => ({
+      key,
+      value,
+      updatedAt: "2026-06-17T00:00:00.000Z",
+    }),
+  );
   mocks.updateNcpSession.mockReset();
   mocks.updateNcpSession.mockResolvedValue({});
   mocks.agents = [];
@@ -201,16 +238,44 @@ function resetSidebarTestState() {
 describe("ChatSidebar create and list basics", () => {
   beforeEach(resetSidebarTestState);
 
-  it("closes the create-session menu after choosing a non-default session type", async () => {
+  it("switches the desktop new-session type without creating until the left button is clicked", async () => {
     renderSidebar();
 
     fireEvent.click(screen.getByLabelText("Session Type"));
-    fireEvent.click(screen.getByText("Codex"));
+    fireEvent.click(screen.getByRole("button", { name: /Codex/i }));
+
+    expect(mocks.createSession).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(mocks.updatePreference).toHaveBeenCalledWith(
+        PREFERENCE_KEYS.chat.newSessionType,
+        "codex",
+      );
+      expect(screen.getByLabelText("Session Type").textContent).toBe("");
+    });
+    expectCodexSelectedInSessionTypeMenu();
+
+    fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
     expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+  });
+
+  it("hydrates the desktop new-session type from stored preferences", async () => {
+    mocks.fetchPreference.mockResolvedValue({
+      key: PREFERENCE_KEYS.chat.newSessionType,
+      value: "codex",
+    });
+
+    renderSidebar();
+
     await waitFor(() => {
-      expect(screen.queryByText("Codex")).toBeNull();
+      expect(screen.getByLabelText("Session Type").textContent).toBe("");
     });
+    expectCodexSelectedInSessionTypeMenu();
+    fireEvent.click(screen.getByLabelText("Session Type"));
+
+    fireEvent.click(screen.getByRole("button", { name: "New Task" }));
+
+    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
   });
 
   it("does not animate the desktop create task button width during runtime option hydration", () => {
@@ -228,7 +293,7 @@ describe("ChatSidebar create and list basics", () => {
 
     expect(
       screen.getByTestId("brand-header").parentElement?.className,
-    ).toContain("py-2.5");
+    ).toMatch(/(?:^|\s)py-2(?:\s|$)/);
   });
 
   it("shows setup required status for runtime session types that are not ready yet", () => {