@nextclaw/ui 0.14.4 → 0.15.1

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

@@ -0,0 +1,86 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { NcpMessage } from "@nextclaw/ncp";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatConversationContent } from "@/features/chat/components/conversation/chat-conversation-content";
+
+const captures = vi.hoisted(() => ({
+  isAtBottom: true,
+  onScroll: vi.fn(),
+  scrollToBottom: vi.fn(),
+}));
+
+vi.mock("@nextclaw/agent-chat-ui", () => ({
+  useStickyBottomScroll: () => ({
+    isAtBottom: captures.isAtBottom,
+    onScroll: captures.onScroll,
+    scrollToBottom: captures.scrollToBottom,
+  }),
+}));
+
+vi.mock("@/features/chat/features/message/components/chat-message-list.container", () => ({
+  ChatMessageListContainer: () => <div data-testid="chat-message-list" />,
+}));
+
+vi.mock("@/shared/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
+
+const messages = [
+  {
+    id: "message-1",
+    sessionId: "session-1",
+    role: "user",
+    status: "final",
+    timestamp: "2026-07-04T10:00:00.000Z",
+    parts: [{ type: "text", text: "hello" }],
+  },
+] as unknown as readonly NcpMessage[];
+
+function renderContent(options: { bottomSlot?: React.ReactNode } = {}) {
+  return render(
+    <ChatConversationContent
+      bottomSlot={options.bottomSlot}
+      isAwaitingAssistantOutput={false}
+      isHistoryLoading={false}
+      isSending={false}
+      messages={messages}
+      sessionKey="session-1"
+      showWelcome={false}
+    />,
+  );
+}
+
+beforeEach(() => {
+  captures.isAtBottom = true;
+  captures.onScroll.mockReset();
+  captures.scrollToBottom.mockReset();
+});
+
+it("hides the scroll-to-bottom action while the conversation is already at the bottom", () => {
+  renderContent();
+
+  expect(screen.queryByRole("button", { name: "chatScrollToBottom" })).toBeNull();
+});
+
+it("scrolls to the latest message when the user clicks the floating action", async () => {
+  const user = userEvent.setup();
+  captures.isAtBottom = false;
+
+  renderContent();
+  await user.click(screen.getByRole("button", { name: "chatScrollToBottom" }));
+
+  expect(captures.scrollToBottom).toHaveBeenCalledOnce();
+});
+
+it("renders bottom slot after the message list", () => {
+  renderContent({
+    bottomSlot: <div data-testid="conversation-bottom-slot">Run failed</div>,
+  });
+
+  const messageList = screen.getByTestId("chat-message-list");
+  const bottomSlot = screen.getByTestId("conversation-bottom-slot");
+  expect(
+    messageList.compareDocumentPosition(bottomSlot) & Node.DOCUMENT_POSITION_FOLLOWING,
+  ).toBeTruthy();
+});

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

@@ -7,12 +7,17 @@ import { ChatConversationHeaderSection } from "@/features/chat/components/conver
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
-import type { NcpSessionSummaryView } from "@/shared/lib/api";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import type { NcpSessionSummaryView, SessionEntryView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
   openChildSessionPanel: vi.fn(),
   openSessionCronPanel: vi.fn(),
+  selectSession: vi.fn(),
+  sessionItems: [] as NcpSessionListItemView[],
+  isSessionListLoading: false,
 }));
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
@@ -22,9 +27,35 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
       openChildSessionPanel: mocks.openChildSessionPanel,
       openSessionCronPanel: mocks.openSessionCronPanel,
     },
+    chatSessionListManager: {
+      selectSession: mocks.selectSession,
+    },
   }),
 }));
 
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-list-view", () => ({
+  useNcpSessionListView: (params?: { query?: string | null }) => {
+    const query = params?.query?.trim().toLowerCase() ?? "";
+    const items = query
+      ? mocks.sessionItems.filter(({ session }) =>
+          [
+            session.key,
+            session.label ?? "",
+            session.projectRoot ?? "",
+            session.projectName ?? "",
+          ]
+            .join(" ")
+            .toLowerCase()
+            .includes(query),
+        )
+      : mocks.sessionItems;
+    return {
+      isLoading: mocks.isSessionListLoading,
+      items,
+    };
+  },
+}));
+
 vi.mock("@/features/cron", () => ({
   useCronJobs: () => ({ data: { jobs: [] } }),
 }));
@@ -54,6 +85,24 @@ function createSummary(
   };
 }
 
+function createSessionListItem(
+  overrides: Partial<SessionEntryView> & Pick<SessionEntryView, "key">,
+): NcpSessionListItemView {
+  return {
+    session: {
+      createdAt: "2026-06-18T00:00:00.000Z",
+      updatedAt: "2026-06-18T00:00:00.000Z",
+      lastMessageAt: "2026-06-18T00:00:00.000Z",
+      readAt: "2026-06-18T00:00:00.000Z",
+      sessionType: "native",
+      sessionTypeMutable: false,
+      messageCount: 1,
+      ...overrides,
+    },
+    runStatus: overrides.status === "running" ? "running" : undefined,
+  };
+}
+
 function renderHeaderSection() {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -73,6 +122,9 @@ describe("ChatConversationHeaderSection", () => {
     mocks.deleteSession.mockReset();
     mocks.openChildSessionPanel.mockReset();
     mocks.openSessionCronPanel.mockReset();
+    mocks.selectSession.mockReset();
+    mocks.isSessionListLoading = false;
+    viewportLayoutManager.resetForTests();
     useChatSessionListStore.persist.setOptions({
       storage: new MemoryPersistStorage(),
     });
@@ -129,6 +181,18 @@ describe("ChatConversationHeaderSection", () => {
         } as never,
       },
     });
+    mocks.sessionItems = [
+      createSessionListItem({
+        key: "parent-session-1",
+        label: "Parent Task",
+      }),
+      createSessionListItem({
+        key: "session:ncp-2",
+        label: "Background Task",
+        lastMessageAt: "2026-06-18T01:00:00.000Z",
+        readAt: "2026-06-18T01:00:00.000Z",
+      }),
+    ];
   });
 
   it("shows the child-session entry from session query state before a tool card opens it", async () => {
@@ -142,4 +206,71 @@ describe("ChatConversationHeaderSection", () => {
       activeChildSessionKey: "child-session-1",
     });
   });
+
+  it("uses the collapsed desktop title as a session switcher", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+
+    renderHeaderSection();
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.click(screen.getByRole("button", { name: /Background Task/ }));
+
+    expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
+  });
+
+  it("keeps the desktop title plain while the sidebar is expanded", () => {
+    renderHeaderSection();
+
+    expect(screen.queryByRole("button", { name: /Switch session/ })).toBeNull();
+    expect(screen.getByText("Parent Task")).toBeTruthy();
+  });
+
+  it("keeps session switching available from a collapsed new-session header", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: null,
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: null,
+      },
+    });
+
+    renderHeaderSection();
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.click(screen.getByRole("button", { name: /Background Task/ }));
+
+    expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
+  });
+
+  it("filters the collapsed title switcher with a local search query", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+
+    renderHeaderSection();
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    const searchInput = screen.getByRole("textbox", {
+      name: "Search session key / label",
+    });
+    await user.type(searchInput, "Background");
+    await user.click(screen.getByRole("button", { name: /Background Task/ }));
+
+    expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.type(
+      screen.getByRole("textbox", { name: "Search session key / label" }),
+      "missing",
+    );
+
+    expect(screen.getByText("No matching sessions")).toBeTruthy();
+  });
 });

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

@@ -1,9 +1,13 @@
 import { useRef, type ReactNode } from "react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import type { NcpMessage } from "@nextclaw/ncp";
+import { ArrowDown } from "lucide-react";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { t } from "@/shared/lib/i18n";
 
 type ChatConversationContentProps = {
+  bottomSlot?: ReactNode;
   isAwaitingAssistantOutput: boolean;
   isHistoryLoading: boolean;
   isSending: boolean;
@@ -14,6 +18,7 @@ type ChatConversationContentProps = {
 };
 
 export function ChatConversationContent({
+  bottomSlot,
   isAwaitingAssistantOutput,
   isHistoryLoading,
   isSending,
@@ -28,7 +33,11 @@ export function ChatConversationContent({
     messages.length === 0 &&
     !isSending &&
     !isAwaitingAssistantOutput;
-  const { onScroll } = useStickyBottomScroll({
+  const {
+    isAtBottom,
+    onScroll,
+    scrollToBottom,
+  } = useStickyBottomScroll({
     scrollRef: threadRef,
     resetKey: sessionKey,
     isLoading: isHistoryLoading,
@@ -36,24 +45,45 @@ export function ChatConversationContent({
     contentVersion: messages[messages.length - 1] ?? null,
   });
   const hasMessages = messages.length > 0;
+  const showScrollToBottom = hasMessages && !showWelcome && !isAtBottom;
 
   return (
-    <div
-      ref={threadRef}
-      onScroll={onScroll}
-      data-chat-scroll-container="true"
-      className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
-    >
-      {showWelcome ? (
-        welcomeSlot ?? null
-      ) : 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={messages}
-            isSending={hasMessages && isSending && isAwaitingAssistantOutput}
-          />
-        </div>
-      )}
+    <div className="relative min-h-0 flex-1">
+      <div
+        ref={threadRef}
+        onScroll={onScroll}
+        data-chat-scroll-container="true"
+        className="h-full overflow-y-auto custom-scrollbar"
+      >
+        {showWelcome ? (
+          welcomeSlot ?? null
+        ) : (
+          <>
+            {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={messages}
+                  isSending={hasMessages && isSending && isAwaitingAssistantOutput}
+                />
+              </div>
+            )}
+            {bottomSlot ? (
+              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 pb-4 sm:px-6 sm:pb-5">
+                {bottomSlot}
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+      {showScrollToBottom ? (
+        <IconActionButton
+          icon={<ArrowDown className="h-4 w-4" />}
+          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"
+        />
+      ) : null}
     </div>
   );
 }

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

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { ChatConversationHeader } from "@/features/chat/components/conversation/chat-conversation-header";
 import { ChatSessionHeaderActions } from "@/features/chat/features/session/components/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/features/chat/features/session/components/session-header/chat-session-project-badge";
+import { ChatSessionTitleSwitcher } from "@/features/chat/features/session/components/session-header/chat-session-title-switcher";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
@@ -89,6 +90,13 @@ export function ChatConversationHeaderSection({
     <ChatConversationHeader
       layoutMode={layoutMode}
       title={sessionHeaderTitle}
+      titleContent={
+        <ChatSessionTitleSwitcher
+          layoutMode={layoutMode}
+          selectedSessionKey={sessionKey}
+          title={sessionHeaderTitle}
+        />
+      }
       shouldShow={shouldShowSessionHeader}
       onBackToList={onBackToList}
       leading={

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

@@ -41,6 +41,7 @@ export function ChatConversationHeader({
   sessionTypeBadge,
   shouldShow,
   title,
+  titleContent,
 }: {
   layoutMode: "desktop" | "mobile";
   actions?: ReactNode;
@@ -50,6 +51,7 @@ export function ChatConversationHeader({
   sessionTypeBadge?: ReactNode;
   shouldShow: boolean;
   title: string;
+  titleContent?: ReactNode;
 }) {
   const isMobileLayout = layoutMode === "mobile";
 
@@ -78,9 +80,11 @@ export function ChatConversationHeader({
           />
         ) : null}
         {leading}
-        <span className="text-sm font-medium text-foreground truncate">
-          {title}
-        </span>
+        {titleContent ?? (
+          <span className="text-sm font-medium text-foreground truncate">
+            {title}
+          </span>
+        )}
         {sessionTypeBadge}
         {projectBadge}
       </div>

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

@@ -188,6 +188,13 @@ describe("ChatSidebar read state sync", () => {
   it("collapses the desktop sidebar into accessible icon actions", () => {
     const { container } = renderReadStateSidebar(createTestQueryClient());
 
+    expect(
+      screen.getByText("Sessions").parentElement?.nextElementSibling?.className,
+    ).toContain("[mask-image:linear-gradient");
+    expect(
+      screen.getByRole("button", { name: "Settings menu" }).parentElement
+        ?.className,
+    ).not.toContain("border-t");
     fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }));
 
     const persistedState = JSON.parse(

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

@@ -29,6 +29,7 @@ import {
   SIDEBAR_RAIL_PADDING_X_CLASS,
   SIDEBAR_RAIL_STACK_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
+  SIDEBAR_SCROLL_EDGE_FADE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 const navItems = [
@@ -67,9 +68,7 @@ export function ChatSidebarDesktopHeader({
   isCollapsed: boolean;
 }) {
   const isWindowsHost = isWindowsDesktopHost();
-  const shouldReserveMacWindowControls =
-    typeof window !== "undefined" &&
-    window.nextclawDesktop?.platform === "darwin";
+  const shouldReserveMacWindowControls = typeof window !== "undefined" && window.nextclawDesktop?.platform === "darwin";
 
   return (
     <div
@@ -170,7 +169,12 @@ export function ChatSidebarSessionArea({
         />
       </div>
 
-      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
+      <div
+        className={cn(
+          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-7 pt-2",
+          SIDEBAR_SCROLL_EDGE_FADE_CLASS,
+        )}
+      >
         <ChatSidebarSessionList
           isLoading={isLoading}
           isProjectFirstView={isProjectFirstView}
@@ -221,7 +225,7 @@ export function ChatSidebarDesktopFooter({
   return (
     <div
       className={cn(
-        "border-t border-border/70 py-3",
+        "py-3",
         isCollapsed
           ? cn("flex justify-center", SIDEBAR_RAIL_PADDING_X_CLASS)
           : "px-3",

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

@@ -115,7 +115,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             aria-label={t("settingsMenu")}
-            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-all duration-base hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
           >
             <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
@@ -134,7 +134,7 @@ export function ChatSidebarUtilityMenu({
           <NavLink
             to="/settings"
             onClick={() => onOpenChange(false)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
           >
             <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
@@ -142,7 +142,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             onClick={handleOpenDocs}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
           >
             <BookOpen className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("docBrowserHelp")}</span>
@@ -150,7 +150,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             onClick={handleOpenApps}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
           >
             <Boxes className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("appsTitle")}</span>
@@ -212,7 +212,7 @@ function ChatSidebarUtilitySelect<Value extends string>({
     >
       <SelectTrigger
         aria-label={label}
-        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0"
+        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0"
         indicator={<ChevronRight className="h-4 w-4 text-muted-foreground/70" />}
       >
         <div className="flex min-w-0 items-center gap-2.5">

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

@@ -7,6 +7,7 @@ import { SessionConversationArea } from '@/features/chat/features/conversation/c
 
 const mocks = vi.hoisted(() => {
   const inputRenderSpy = vi.fn();
+  const controllerParamsSpy = vi.fn();
   const inputActions = {
     update: vi.fn(),
     syncComposer: vi.fn(),
@@ -47,7 +48,14 @@ const mocks = vi.hoisted(() => {
     isProviderStateResolved: true,
     isSkillsLoading: false,
     modelOptions: [],
-    selectedSession: null,
+    selectedSession: null as null | {
+      activityPreview?: {
+        state: 'running' | 'completed' | 'failed' | 'cancelled' | 'idle';
+        statusText?: string;
+        replyText?: string;
+      };
+      status?: string;
+    },
     selectedSessionKey: null,
     sessionTypeState: {
       sessionTypeOptions: [],
@@ -62,8 +70,11 @@ const mocks = vi.hoisted(() => {
   };
   const controller = {
     canStopGeneration: true,
+    deleteQueuedInput: vi.fn(),
+    editQueuedInput: vi.fn(),
     hasSendableDraft: true,
     isSending: true,
+    queuedInputs: [],
     send: vi.fn(),
     sendDisabled: true,
     stop: vi.fn(),
@@ -87,6 +98,7 @@ const mocks = vi.hoisted(() => {
   return {
     agent,
     controller,
+    controllerParamsSpy,
     inputActions,
     inputQuery,
     inputRenderSpy,
@@ -120,16 +132,19 @@ vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
 
 vi.mock('@/features/chat/components/conversation/chat-conversation-content', () => ({
   ChatConversationContent: ({
+    bottomSlot,
     messages,
     showWelcome,
     welcomeSlot,
   }: {
+    bottomSlot?: ReactNode;
     messages: readonly unknown[];
     showWelcome: boolean;
     welcomeSlot?: ReactNode;
   }) => (
     <div data-testid="conversation-content" data-show-welcome={String(showWelcome)}>
       {showWelcome ? welcomeSlot : <div data-testid="message-count">{messages.length}</div>}
+      {bottomSlot ? <div data-testid="conversation-bottom-slot">{bottomSlot}</div> : null}
     </div>
   ),
 }));
@@ -162,7 +177,10 @@ vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-in
 }));
 
 vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-controller', () => ({
-  useSessionConversationController: () => mocks.controller,
+  useSessionConversationController: (params: unknown) => {
+    mocks.controllerParamsSpy(params);
+    return mocks.controller;
+  },
 }));
 
 vi.mock('@/features/chat/stores/chat-session-list.store', () => ({
@@ -197,6 +215,21 @@ describe('SessionConversationArea input boundary', () => {
     mocks.agent.isRunning = true;
     mocks.agent.isSending = true;
     mocks.agent.snapshot.contextWindow = null;
+    mocks.inputQuery.selectedSession = null;
+  });
+
+  it('passes running state without treating an active run as a send request in flight', () => {
+    mocks.agent.isRunning = true;
+    mocks.agent.isSending = false;
+
+    renderArea('session-1');
+
+    expect(mocks.controllerParamsSpy).toHaveBeenCalled();
+    const params = mocks.controllerParamsSpy.mock.calls[0]?.[0] as {
+      agent: { isRunning: boolean; isSending: boolean };
+    };
+    expect(params.agent.isRunning).toBe(true);
+    expect(params.agent.isSending).toBe(false);
   });
 
   it('keeps the composer input subtree stable when only streamed messages change', () => {
@@ -222,4 +255,35 @@ describe('SessionConversationArea input boundary', () => {
     expect(screen.getByTestId('welcome')).toBeTruthy();
     expect(screen.getByTestId('conversation-input')).toBeTruthy();
   });
+
+  it('surfaces selected-session failure previews at the conversation bottom', () => {
+    mocks.inputQuery.selectedSession = {
+      activityPreview: {
+        state: 'failed',
+        statusText: 'Run failed: Invalid API Key',
+      },
+      status: 'idle',
+    };
+
+    renderArea('session-1');
+
+    expect(screen.getByTestId('conversation-bottom-slot')).toBeTruthy();
+    expect(screen.getByText(/出错了|Something went wrong/)).toBeTruthy();
+    expect(screen.getByText('Run failed: Invalid API Key')).toBeTruthy();
+  });
+
+  it('does not surface user-cancelled previews as conversation errors', () => {
+    mocks.inputQuery.selectedSession = {
+      activityPreview: {
+        state: 'cancelled',
+        statusText: 'Run interrupted: User stopped the current run.',
+      },
+      status: 'idle',
+    };
+
+    renderArea('session-1');
+
+    expect(screen.queryByTestId('conversation-bottom-slot')).toBeNull();
+    expect(screen.queryByText(/出错了|Something went wrong/)).toBeNull();
+  });
 });