@nextclaw/ui 0.14.1 → 0.14.3

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 (
@@ -104,7 +103,7 @@ export function ChatConversationHeaderSection({
       }
       sessionTypeBadge={
         sessionTypeLabel ? (
-          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
             {sessionTypeOption?.icon?.src ? (
               <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
                 <SessionContextIconNode
@@ -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-header.tsx

@@ -16,11 +16,11 @@ export function ChatParentSessionBanner({
   }
   const trimmedLabel = parentSessionLabel.trim();
   return (
-    <div className="border-b border-gray-200/60 bg-white/75 px-4 py-2 backdrop-blur-sm sm:px-5">
+    <div className="bg-background/75 px-4 py-2 backdrop-blur-sm sm:px-5">
       <button
         type="button"
         onClick={onGoToParentSession}
-        className="inline-flex items-center gap-2 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900"
+        className="inline-flex items-center gap-2 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
         <span>
@@ -55,10 +55,11 @@ export function ChatConversationHeader({
 
   return (
     <div
+      data-testid="chat-conversation-header"
       className={cn(
-        "border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
+        "bg-background/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
-        shouldShow ? "opacity-100" : "h-0 py-0 opacity-0 border-b-0",
+        shouldShow ? "opacity-100" : "h-0 py-0 opacity-0",
         shouldShow && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
       )}
       style={
@@ -73,11 +74,11 @@ 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-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            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"
           />
         ) : null}
         {leading}
-        <span className="text-sm font-medium text-gray-700 truncate">
+        <span className="text-sm font-medium text-foreground truncate">
           {title}
         </span>
         {sessionTypeBadge}

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,36 +17,38 @@ 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 />;
   }
 
   return (
-    <section className="flex-1 min-h-0 flex overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+    <section className="flex-1 min-h-0 flex overflow-hidden bg-background">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <ChatConversationParentBanner />
         <ChatConversationHeaderSection
           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-skeleton.tsx

@@ -28,13 +28,13 @@ export function ChatConversationSkeleton() {
   return (
     <section
       data-testid="chat-conversation-skeleton"
-      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white"
+      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-background"
     >
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
         <div className="mx-auto flex min-h-full w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
           <div className="flex flex-1 flex-col gap-8">
             <div className="space-y-6">
-              <Skeleton className="h-6 w-52 rounded-lg bg-gray-200/90" />
+              <Skeleton className="h-6 w-52 rounded-lg bg-muted" />
               <div className="space-y-5">
                 {CHAT_CONVERSATION_SKELETON_BUBBLES.map((bubble) => (
                   <div
@@ -44,7 +44,7 @@ export function ChatConversationSkeleton() {
                     <Skeleton
                       data-testid="chat-conversation-skeleton-bubble"
                       className={cn(
-                        "w-full bg-gray-200/80",
+                        "w-full bg-muted",
                         bubble.bubbleClassName,
                       )}
                     />
@@ -54,29 +54,29 @@ export function ChatConversationSkeleton() {
             </div>
             <div className="mt-auto grid gap-4 pb-2 sm:grid-cols-[minmax(0,1fr)_minmax(180px,240px)] sm:items-end">
               <div className="space-y-3">
-                <Skeleton className="h-4 w-40 rounded-full bg-gray-200/70" />
-                <Skeleton className="h-[112px] w-full rounded-[30px] bg-gray-200/70" />
+                <Skeleton className="h-4 w-40 rounded-full bg-muted" />
+                <Skeleton className="h-[112px] w-full rounded-[30px] bg-muted" />
               </div>
               <div className="hidden justify-end sm:flex">
-                <Skeleton className="h-10 w-36 rounded-full bg-gray-200/75" />
+                <Skeleton className="h-10 w-36 rounded-full bg-muted" />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div className="border-t border-gray-200/80 bg-white p-4">
+      <div className="bg-background p-4">
         <div className="mx-auto w-full max-w-[min(1120px,100%)]">
-          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card">
+          <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-card">
             <div className="px-4 py-2.5">
-              <Skeleton className="h-[84px] w-full rounded-[28px] bg-gray-200/80" />
+              <Skeleton className="h-[84px] w-full rounded-[28px] bg-muted" />
             </div>
             <div className="flex items-center justify-between gap-3 px-3 pb-3">
               <div className="flex items-center gap-2">
-                <Skeleton className="h-8 w-20 rounded-full bg-gray-200/75" />
-                <Skeleton className="h-8 w-28 rounded-full bg-gray-200/75" />
-                <Skeleton className="hidden h-8 w-24 rounded-full bg-gray-200/70 sm:block" />
+                <Skeleton className="h-8 w-20 rounded-full bg-muted" />
+                <Skeleton className="h-8 w-28 rounded-full bg-muted" />
+                <Skeleton className="hidden h-8 w-24 rounded-full bg-muted sm:block" />
               </div>
-              <Skeleton className="h-8 w-8 rounded-full bg-gray-200/85" />
+              <Skeleton className="h-8 w-8 rounded-full bg-muted" />
             </div>
           </div>
         </div>

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();
+  });
 });