@nextclaw/ui 0.15.21 → 0.15.23

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

@@ -7,6 +7,7 @@ import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-l
 
 const captures = vi.hoisted(() => ({
   isAtBottom: true,
+  messageListIsSending: [] as boolean[],
   messageListSessionKeys: [] as Array<string | null>,
   onScroll: vi.fn(),
   scrollToBottom: vi.fn(),
@@ -24,10 +25,13 @@ vi.mock(
   "@/features/chat/features/message/components/chat-message-list.container",
   () => ({
     ChatMessageListContainer: ({
+      isSending,
       sessionKey,
     }: {
+      isSending: boolean;
       sessionKey: string | null;
     }) => {
+      captures.messageListIsSending.push(isSending);
       captures.messageListSessionKeys.push(sessionKey);
       return <div data-testid="chat-message-list" />;
     },
@@ -59,7 +63,10 @@ function renderContent(
     historyError?: Error | null;
     isContextCompacting?: boolean;
     isLoadingPreviousMessages?: boolean;
+    isSending?: boolean;
+    messages?: readonly NcpMessage[];
     onLoadPreviousMessages?: () => Promise<void>;
+    showWelcome?: boolean;
   } = {},
 ) {
   return render(
@@ -67,15 +74,15 @@ function renderContent(
       bottomSlot={options.bottomSlot}
       hasPreviousMessages={options.hasPreviousMessages ?? false}
       historyError={options.historyError ?? null}
-      isAwaitingAssistantOutput={false}
       isHistoryLoading={false}
       isContextCompacting={options.isContextCompacting}
       isLoadingPreviousMessages={options.isLoadingPreviousMessages ?? false}
-      isSending={false}
-      messages={messages}
+      isSending={options.isSending ?? false}
+      messages={options.messages ?? messages}
       sessionKey="session-1"
-      showWelcome={false}
+      showWelcome={options.showWelcome ?? false}
       onLoadPreviousMessages={options.onLoadPreviousMessages ?? vi.fn()}
+      welcomeSlot={<div data-testid="conversation-welcome" />}
     />,
   );
 }
@@ -83,17 +90,52 @@ function renderContent(
 beforeEach(() => {
   useChatMessageLayoutStore.getState().setLayout("card");
   captures.isAtBottom = true;
+  captures.messageListIsSending = [];
   captures.messageListSessionKeys = [];
   captures.onScroll.mockReset();
   captures.scrollToBottom.mockReset();
 });
 
+it("shows the local optimistic loading state before backend running confirmation", () => {
+  renderContent({
+    isSending: true,
+  });
+
+  expect(captures.messageListIsSending).toEqual([true]);
+});
+
+it("mounts the optimistic loading surface before a new session has messages", () => {
+  renderContent({
+    isSending: true,
+    messages: [],
+  });
+
+  expect(screen.getByTestId("chat-message-list")).toBeTruthy();
+  expect(captures.messageListIsSending).toEqual([true]);
+});
+
 it("renders manual context compaction feedback after the message list", () => {
   renderContent({ isContextCompacting: true });
 
   expect(screen.getByTestId("context-compaction-pending")).toBeTruthy();
 });
 
+it("fades the conversation into the docked input without obscuring the final message", () => {
+  const { container } = renderContent();
+  const scrollContainer = container.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  expect(scrollContainer?.className).toContain("[mask-image:linear-gradient");
+  expect(scrollContainer?.className).toContain("[-webkit-mask-image:linear-gradient");
+  expect(scrollContainer?.firstElementChild?.className).toContain("pb-7");
+
+  const { container: welcomeContainer } = renderContent({ showWelcome: true });
+  const welcomeScrollContainer = welcomeContainer.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  expect(welcomeScrollContainer?.className).not.toContain("[mask-image:linear-gradient");
+});
+
 it("uses the centered reading track in flat message layout", () => {
   useChatMessageLayoutStore.getState().setLayout("flat");
 

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

@@ -279,7 +279,7 @@ describe("ChatConversationHeaderSection", () => {
     renderHeaderSection("mobile");
     await user.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex");
+    expect(mocks.createSession).toHaveBeenCalledWith({ sessionType: "codex" });
   });
 
   it("keeps the new-session shortcut mobile-only", () => {
@@ -421,6 +421,22 @@ describe("ChatConversationHeaderSection", () => {
     expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
   });
 
+  it("opens project files from a new-session header before materialization", async () => {
+    const user = userEvent.setup();
+    useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
+    useChatThreadStore.getState().setSnapshot({
+      sessionKey: null,
+      draftProjectRoot: "/workspace/draft",
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: null,
+    });
+
+    renderHeaderSection();
+    await user.click(screen.getByRole("button", { name: "Open session workspace" }));
+
+    expect(mocks.toggleWorkspacePanel).toHaveBeenCalledWith(null);
+  });
+
   it("filters the collapsed title switcher with a local search query", async () => {
     const user = userEvent.setup();
     viewportLayoutManager.setSidebarCollapsed(true);

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

@@ -5,8 +5,7 @@ import { ChatConversationPanel } from "@/features/chat/components/conversation/c
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 
 const mocks = vi.hoisted(() => ({
-  goToSession: vi.fn(),
-  isAtChatRoot: vi.fn(() => true),
+  materializeRootDraftSession: vi.fn(),
 }));
 const persistStorage = new Map<string, unknown>();
 
@@ -24,9 +23,8 @@ function createPersistStorage() {
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
-    chatUiManager: {
-      goToSession: mocks.goToSession,
-      isAtChatRoot: mocks.isAtChatRoot,
+    chatThreadManager: {
+      materializeRootDraftSession: mocks.materializeRootDraftSession,
     },
   }),
 }));
@@ -71,9 +69,7 @@ describe("ChatConversationPanel", () => {
   beforeEach(() => {
     persistStorage.clear();
     useChatSessionListStore.persist.setOptions({ storage: createPersistStorage() as never });
-    mocks.goToSession.mockReset();
-    mocks.isAtChatRoot.mockReset();
-    mocks.isAtChatRoot.mockReturnValue(true);
+    mocks.materializeRootDraftSession.mockReset();
     useChatSessionListStore.setState({
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
@@ -100,24 +96,14 @@ describe("ChatConversationPanel", () => {
     expect(screen.getByTestId("workspace-section").dataset.sessionKey).toBe("session-1");
   });
 
-  it("materializes root draft sessions through the UI manager route owner", async () => {
+  it("delegates root draft materialization to the thread owner", async () => {
     const user = userEvent.setup();
 
     render(<ChatConversationPanel />);
     await user.click(screen.getByTestId("session-conversation-area"));
 
-    expect(mocks.goToSession).toHaveBeenCalledWith("materialized-session", {
-      replace: true,
-    });
-  });
-
-  it("does not materialize through the root route callback outside chat root", async () => {
-    const user = userEvent.setup();
-    mocks.isAtChatRoot.mockReturnValue(false);
-
-    render(<ChatConversationPanel />);
-    await user.click(screen.getByTestId("session-conversation-area"));
-
-    expect(mocks.goToSession).not.toHaveBeenCalled();
+    expect(mocks.materializeRootDraftSession).toHaveBeenCalledWith(
+      "materialized-session",
+    );
   });
 });

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

@@ -1,7 +1,10 @@
-import { render, screen } from "@testing-library/react";
+import { act, 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 { ChatSessionListManager } from "@/features/chat/managers/chat-session-list.manager";
+import { ChatThreadManager } from "@/features/chat/managers/chat-thread.manager";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 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";
@@ -90,8 +93,7 @@ describe("ChatConversationWorkspaceSection", () => {
         activeChildSessionKey: null,
         workspaceNavigationHistory: [],
         workspaceNavigationHistoryIndex: 0,
-        sessionProjectRoot: null,
-        sessionWorkingDir: null,
+        draftProjectRoot: null,
         workspacePanelWidth: 620,
       },
     });
@@ -156,4 +158,68 @@ describe("ChatConversationWorkspaceSection", () => {
 
     expect(screen.getByTestId("workspace-panel")).toBeTruthy();
   });
+
+  it("uses the selected draft project before the first message creates a session", () => {
+    useChatThreadStore.getState().setSnapshot({
+      draftProjectRoot: "/Users/peiwang/Projects/draft-project",
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: "project-files",
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+    });
+
+    render(
+      <ChatConversationWorkspaceSection
+        layoutMode="desktop"
+        sessionKey={null}
+      />,
+    );
+
+    expect(mocks.panelProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionProjectRoot: "/Users/peiwang/Projects/draft-project",
+        sessionWorkingDir: "/Users/peiwang/Projects/draft-project",
+      }),
+    );
+  });
+
+  it("keeps the workspace panel mounted while a root draft materializes", () => {
+    useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
+    useChatThreadStore.getState().setSnapshot({
+      draftProjectRoot: "/Users/peiwang/Projects/nextbot",
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: "project-files",
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+    });
+    const uiManager = {
+      goToSession: vi.fn(),
+      isAtChatRoot: vi.fn(() => true),
+    } as unknown as ConstructorParameters<typeof ChatThreadManager>[0];
+    const manager = new ChatThreadManager(
+      uiManager,
+      new ChatSessionListManager(uiManager),
+    );
+    function WorkspaceHarness() {
+      const sessionKey = useChatSessionListStore(
+        (state) => state.snapshot.selectedSessionKey,
+      );
+      return (
+        <ChatConversationWorkspaceSection
+          layoutMode="desktop"
+          sessionKey={sessionKey}
+        />
+      );
+    }
+
+    render(<WorkspaceHarness />);
+    const draftPanel = screen.getByTestId("workspace-panel");
+
+    act(() => manager.materializeRootDraftSession("session-1"));
+
+    expect(screen.getByTestId("workspace-panel")).toBe(draftPanel);
+    expect(uiManager.goToSession).toHaveBeenCalledWith("session-1", {
+      replace: true,
+    });
+  });
 });

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

@@ -13,48 +13,59 @@ import {
 } from "@/features/chat/features/message/components/chat-message-list.container";
 import { ChatConversationTrack } from "@/features/chat/components/conversation/chat-conversation-track";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { t } from "@/shared/lib/i18n";
 
 type ChatConversationContentProps = {
   bottomSlot?: ReactNode;
-  isAwaitingAssistantOutput: boolean;
+  canContinue?: boolean;
   isHistoryLoading: boolean;
   hasPreviousMessages: boolean;
   historyError: Error | null;
   isLoadingPreviousMessages: boolean;
   isContextCompacting?: boolean;
   isSending: boolean;
+  messageActionsDisabled?: boolean;
   messages: readonly NcpMessage[];
   sessionKey: string | null;
   showWelcome: boolean;
   onLoadPreviousMessages: () => Promise<void>;
+  onContinueRun?: () => Promise<void> | void;
+  onEditMessage?: (payload: {
+    readonly message: NcpMessage;
+    readonly messageId: string;
+  }) => Promise<void> | void;
   welcomeSlot?: ReactNode;
 };
 
 export function ChatConversationContent({
   bottomSlot,
-  isAwaitingAssistantOutput,
+  canContinue = false,
   isHistoryLoading,
   hasPreviousMessages,
   historyError,
   isLoadingPreviousMessages,
   isContextCompacting = false,
   isSending,
+  messageActionsDisabled = false,
   messages,
   sessionKey,
   showWelcome,
   onLoadPreviousMessages,
+  onContinueRun,
+  onEditMessage,
   welcomeSlot,
 }: ChatConversationContentProps) {
   const threadRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const hasConversationContent = messages.length > 0 || isSending;
   const { isAtBottom, onScroll, scrollToBottom } = useStickyBottomScroll({
     contentRef,
     scrollRef: threadRef,
     resetKey: sessionKey,
     isLoading: isHistoryLoading,
-    hasContent: messages.length > 0,
-    contentVersion: messages[messages.length - 1] ?? null,
+    hasContent: hasConversationContent,
+    contentVersion: messages[messages.length - 1] ?? isSending,
   });
   const hasMessages = messages.length > 0;
   const handleScroll = useCallback(
@@ -81,14 +92,14 @@ export function ChatConversationContent({
         ref={threadRef}
         onScroll={handleScroll}
         data-chat-scroll-container="true"
-        className="h-full overflow-y-auto custom-scrollbar"
+        className={showWelcome ? "h-full overflow-y-auto custom-scrollbar" : `h-full overflow-y-auto custom-scrollbar ${SCROLL_BOTTOM_EDGE_FADE_CLASS}`}
         style={{ overflowAnchor: "none" }}
       >
         {showWelcome ? (
           (welcomeSlot ?? null)
         ) : (
-          <div ref={contentRef}>
-            {hasMessages ? (
+          <div ref={contentRef} className="pb-7">
+            {hasConversationContent ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
                 {historyError ? (
                   <div role="alert" className="flex h-8 justify-center">
@@ -108,10 +119,12 @@ export function ChatConversationContent({
                   />
                 ) : null}
                 <ChatMessageListContainer
+                  canContinue={canContinue}
                   messages={messages}
-                  isSending={
-                    hasMessages && isSending && isAwaitingAssistantOutput
-                  }
+                  isSending={isSending}
+                  messageActionsDisabled={messageActionsDisabled}
+                  onContinueRun={onContinueRun}
+                  onEditMessage={onEditMessage}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
                 />
@@ -132,7 +145,7 @@ export function ChatConversationContent({
           label={t("chatScrollToBottom")}
           onClick={scrollToBottom}
           tooltipSide="top"
-          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-accent hover:text-accent-foreground"
+          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         />
       ) : null}
     </div>

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

@@ -89,14 +89,10 @@ export function ChatConversationHeaderSection({
   const shouldShowHeaderAgentAvatar =
     normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
   const isWorkspaceOpen = Boolean(
-    sessionKey &&
-      snapshot.workspacePanelParentKey === sessionKey &&
+    snapshot.workspacePanelParentKey === sessionKey &&
       snapshot.activeWorkspacePanelKind,
   );
   const toggleWorkspace = () => {
-    if (!sessionKey) {
-      return;
-    }
     presenter.chatThreadManager.toggleWorkspacePanel(sessionKey);
   };
 
@@ -154,33 +150,36 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       actions={
-        sessionKey ? (
-          <div className="flex shrink-0 items-center gap-1.5">
-            {layoutMode === "mobile" ? (
-              <IconActionButton
-                icon={<SquarePen className="h-4 w-4" />}
-                label={t("chatSidebarNewTask")}
-                tooltip={false}
-                onClick={() =>
-                  presenter.chatSessionListManager.createSession({
-                    sessionType: newSessionTypePreference.selectedSessionType,
-                  })
-                }
-              />
-            ) : null}
-            <ChatSessionHeaderActions
-              sessionKey={sessionKey}
-              canDeleteSession={canDeleteSession}
-              isDeletePending={snapshot.isDeletePending}
-              currentPath={sessionProjectRoot ?? selectedSession?.workingDir ?? null}
-              defaultWorkspacePath={defaultWorkspacePath}
-              metadata={selectedSession?.metadata ?? null}
-              isWorkspaceOpen={isWorkspaceOpen}
-              onToggleWorkspace={toggleWorkspace}
-              onDeleteSession={presenter.chatThreadManager.deleteSession}
+        <div className="flex shrink-0 items-center gap-1.5">
+          {layoutMode === "mobile" && sessionKey ? (
+            <IconActionButton
+              icon={<SquarePen className="h-4 w-4" />}
+              label={t("chatSidebarNewTask")}
+              tooltip={false}
+              onClick={() =>
+                presenter.chatSessionListManager.createSession({
+                  sessionType: newSessionTypePreference.selectedSessionType,
+                })
+              }
             />
-          </div>
-        ) : null
+          ) : null}
+          <ChatSessionHeaderActions
+            sessionKey={sessionKey}
+            canDeleteSession={canDeleteSession}
+            isDeletePending={snapshot.isDeletePending}
+            currentPath={
+              sessionProjectRoot ??
+              selectedSession?.workingDir ??
+              snapshot.draftProjectRoot ??
+              defaultWorkspacePath
+            }
+            defaultWorkspacePath={defaultWorkspacePath}
+            metadata={selectedSession?.metadata ?? null}
+            isWorkspaceOpen={isWorkspaceOpen}
+            onToggleWorkspace={toggleWorkspace}
+            onDeleteSession={presenter.chatThreadManager.deleteSession}
+          />
+        </div>
       }
     />
   );

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

@@ -76,7 +76,7 @@ export function ChatConversationHeader({
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
           />
         ) : null}
         {leading}

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

@@ -1,4 +1,3 @@
-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 { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
@@ -19,12 +18,6 @@ export function ChatConversationPanel({
   const sessionKey = useChatSessionListStore(
     (state) => state.snapshot.selectedSessionKey,
   );
-  const handleSessionMaterialized = useCallback((materializedSessionKey: string) => {
-    if (!presenter.chatUiManager.isAtChatRoot()) {
-      return;
-    }
-    presenter.chatUiManager.goToSession(materializedSessionKey, { replace: true });
-  }, [presenter]);
 
   return (
     <section className="relative flex-1 min-h-0 flex overflow-hidden bg-background">
@@ -37,7 +30,7 @@ export function ChatConversationPanel({
         <SessionConversationArea
           consumeDraftIntent
           sessionKey={sessionKey}
-          onSessionMaterialized={handleSessionMaterialized}
+          onSessionMaterialized={presenter.chatThreadManager.materializeRootDraftSession}
         />
       </div>
 

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

@@ -2,6 +2,8 @@ import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/co
 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";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
 type ChatConversationWorkspaceSectionProps = {
   layoutMode: "desktop" | "mobile";
@@ -13,7 +15,15 @@ export function ChatConversationWorkspaceSection({
   sessionKey,
 }: ChatConversationWorkspaceSectionProps) {
   const snapshot = useChatThreadStore((state) => state.snapshot);
+  const defaultWorkspacePath = useChatQueryStore((state) =>
+    normalizeSessionProjectRootValue(
+      state.snapshot.configQuery?.data?.agents.defaults.workspace,
+    ),
+  );
   const selectedSession = useNcpChatSelectedSession(sessionKey);
+  const draftProjectRoot = sessionKey
+    ? null
+    : snapshot.draftProjectRoot ?? defaultWorkspacePath;
   const {
     childSessionTabs,
     activeSideChatDraft,
@@ -29,7 +39,7 @@ export function ChatConversationWorkspaceSection({
   return (
     <ChatSessionWorkspacePanel
       sessionKey={sessionKey}
-      childSessionTabs={childSessionTabs}
+      childSessionTabs={sessionKey ? childSessionTabs : []}
       activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
       activeSideChatDraft={activeSideChatDraft}
       workspaceFileTabs={workspaceFileTabs}
@@ -38,10 +48,12 @@ export function ChatConversationWorkspaceSection({
       workspaceNavigationHistory={snapshot.workspaceNavigationHistory}
       workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
       activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
-      sessionCronJobs={sessionCronJobs}
-      sessionProjectRoot={selectedSession?.projectRoot ?? null}
+      sessionCronJobs={sessionKey ? sessionCronJobs : []}
+      sessionProjectRoot={selectedSession?.projectRoot ?? draftProjectRoot}
       sessionWorkingDir={
-        selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null
+        selectedSession?.workingDir ??
+        selectedSession?.projectRoot ??
+        draftProjectRoot
       }
       workspacePanelWidth={snapshot.workspacePanelWidth}
       displayMode={layoutMode === "mobile" ? "overlay" : "docked"}

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

@@ -39,6 +39,29 @@ vi.mock("@/features/marketplace", () => ({
 }));
 
 describe("ChatPageLayout", () => {
+  it("uses the same canvas width for management pages", () => {
+    const agentsView = render(
+      <ChatPageLayout view="agents" confirmDialog={<div />} />,
+    );
+    const agentsCanvas = screen.getByText("Agents").parentElement;
+
+    expect(agentsCanvas?.className).toContain("max-w-[min(1180px,100%)]");
+    agentsView.unmount();
+
+    const cronView = render(
+      <ChatPageLayout view="cron" confirmDialog={<div />} />,
+    );
+    const cronCanvas = screen.getByText("Cron").parentElement;
+
+    expect(cronCanvas?.className).toContain("max-w-[min(1180px,100%)]");
+    cronView.unmount();
+
+    render(<ChatPageLayout view="skills" confirmDialog={<div />} />);
+    const skillsCanvas = screen.getByText("Marketplace").parentElement;
+
+    expect(skillsCanvas?.className).toContain("max-w-[min(1180px,100%)]");
+  });
+
   it("uses the dedicated mobile chat shell instead of the desktop split layout", () => {
     useViewportLayoutMock.mockReturnValue({
       mode: "mobile",

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

@@ -189,7 +189,7 @@ describe("ChatSidebar read state sync", () => {
     const { container } = renderReadStateSidebar(createTestQueryClient());
 
     expect(
-      screen.getByText("Sessions").parentElement?.nextElementSibling?.className,
+      container.querySelector(".custom-scrollbar")?.className,
     ).toContain("[mask-image:linear-gradient");
     expect(
       screen.getByRole("button", { name: "Settings menu" }).parentElement

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

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSidebarSessionArea } from "@/features/chat/components/layout/chat-sidebar-desktop-layout";
+
+function renderSessionArea(isProjectFirstView: boolean) {
+  const onAddProject = vi.fn();
+  const onSelectMode = vi.fn();
+
+  render(
+    <ChatSidebarSessionArea
+      defaultSessionType="native"
+      groups={[]}
+      isCollapsed={false}
+      isLoading={false}
+      isProjectFirstView={isProjectFirstView}
+      onAddProject={onAddProject}
+      onSelectMode={onSelectMode}
+      projectGroups={[]}
+      renderSessionItem={() => <></>}
+      sessionTypeOptions={[]}
+    />,
+  );
+
+  return { onAddProject, onSelectMode };
+}
+
+describe("ChatSidebarSessionArea", () => {
+  it("reserves the action-row height while switching list modes", () => {
+    const { onSelectMode } = renderSessionArea(false);
+
+    expect(
+      screen.getByRole("button", { name: "Time" }).parentElement?.parentElement?.className,
+    ).toContain("h-7");
+    fireEvent.click(screen.getByRole("button", { name: "Project" }));
+
+    expect(onSelectMode).toHaveBeenCalledWith("project-first");
+  });
+
+  it("uses a folder-plus icon for the add-project action", () => {
+    const { onAddProject } = renderSessionArea(true);
+    const addProjectButton = screen.getByRole("button", { name: "Add Project" });
+
+    expect(
+      addProjectButton
+        .querySelector("svg")
+        ?.classList.contains("lucide-folder-plus"),
+    ).toBe(true);
+    fireEvent.click(addProjectButton);
+
+    expect(onAddProject).toHaveBeenCalledOnce();
+  });
+});