@nextclaw/ui 0.15.0 → 0.15.1

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-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/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -50,7 +50,7 @@ const mocks = vi.hoisted(() => {
     modelOptions: [],
     selectedSession: null as null | {
       activityPreview?: {
-        state: 'running' | 'completed' | 'failed' | 'idle';
+        state: 'running' | 'completed' | 'failed' | 'cancelled' | 'idle';
         statusText?: string;
         replyText?: string;
       };
@@ -260,7 +260,7 @@ describe('SessionConversationArea input boundary', () => {
     mocks.inputQuery.selectedSession = {
       activityPreview: {
         state: 'failed',
-        statusText: '运行出错：Invalid API Key',
+        statusText: 'Run failed: Invalid API Key',
       },
       status: 'idle',
     };
@@ -269,6 +269,21 @@ describe('SessionConversationArea input boundary', () => {
 
     expect(screen.getByTestId('conversation-bottom-slot')).toBeTruthy();
     expect(screen.getByText(/出错了|Something went wrong/)).toBeTruthy();
-    expect(screen.getByText('运行出错：Invalid API Key')).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();
   });
 });

package/src/features/chat/features/message/components/__tests__/chat-message-list.container.test.tsx

@@ -497,7 +497,7 @@ it("renders context compaction as an in-flow divider instead of a chat message",
         updatedAt: "2026-05-05T12:00:00.000Z",
       },
     },
-    parts: [{ type: "text", text: "较早上下文已自动压缩" }],
+    parts: [{ type: "text", text: "Earlier context was auto-compacted" }],
   } satisfies NcpMessage;
 
   const { getByText } = render(

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-agent-runtime.test.tsx

@@ -217,7 +217,15 @@ describe("useNcpAgentRuntime", () => {
       await result.current.abort();
     });
 
-    expect(client.abort).toHaveBeenCalledWith({ sessionId: "session-running" });
+    expect(client.abort).toHaveBeenCalledWith({
+      sessionId: "session-running",
+      runId: undefined,
+      reason: {
+        code: "abort-error",
+        message: "User stopped the current run.",
+        details: { source: "chat-ui" },
+      },
+    });
   });
 
   it("clears the local running state when the live stream publishes message.abort", async () => {
@@ -243,6 +251,20 @@ describe("useNcpAgentRuntime", () => {
       expect(result.current.activeRunId).toBe("run-1");
     });
 
+    await act(async () => {
+      await result.current.abort();
+    });
+
+    expect(client.abort).toHaveBeenCalledWith({
+      sessionId: "session-running",
+      runId: "run-1",
+      reason: {
+        code: "abort-error",
+        message: "User stopped the current run.",
+        details: { source: "chat-ui" },
+      },
+    });
+
     await act(async () => {
       await client.emit({
         type: NcpEventType.MessageAbort,

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-session-list-view.test.tsx

@@ -0,0 +1,74 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useNcpSessionListView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import type { NcpSessionSummaryView } from "@/shared/lib/api";
+
+const mocks = vi.hoisted(() => ({
+  sessions: [] as NcpSessionSummaryView[],
+}));
+
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-queries", () => ({
+  useNcpSessions: () => ({
+    data: {
+      sessions: mocks.sessions,
+      total: mocks.sessions.length,
+    },
+    isLoading: false,
+  }),
+}));
+
+function createSummary(
+  sessionId: string,
+  label: string,
+): NcpSessionSummaryView {
+  return {
+    sessionId,
+    status: "idle",
+    updatedAt: "2026-06-18T00:00:00.000Z",
+    lastMessageAt: "2026-06-18T00:00:00.000Z",
+    messageCount: 1,
+    metadata: {
+      label,
+      session_type: "native",
+    },
+  };
+}
+
+describe("useNcpSessionListView", () => {
+  beforeEach(() => {
+    mocks.sessions = [
+      createSummary("session:alpha", "Alpha Task"),
+      createSummary("session:beta", "Beta Task"),
+    ];
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        query: "",
+      },
+    });
+  });
+
+  it("uses the sidebar query by default", () => {
+    useChatSessionListStore.getState().setSnapshot({ query: "Alpha" });
+
+    const { result } = renderHook(() => useNcpSessionListView());
+
+    expect(result.current.items.map((item) => item.session.key)).toEqual([
+      "session:alpha",
+    ]);
+  });
+
+  it("can override the hidden sidebar query for header switching", () => {
+    useChatSessionListStore.getState().setSnapshot({ query: "Alpha" });
+
+    const { result } = renderHook(() =>
+      useNcpSessionListView({ query: "" }),
+    );
+
+    expect(result.current.items.map((item) => item.session.key)).toEqual([
+      "session:alpha",
+      "session:beta",
+    ]);
+  });
+});

package/src/features/chat/features/ncp/hooks/use-ncp-session-list-view.ts

@@ -22,8 +22,9 @@ function shouldShowSessionInSidebar(session: SessionEntryView): boolean {
   return session.isPromotedChildSession === true;
 }
 
-export function useNcpSessionListView(params: { limit?: number } = {}) {
-  const query = useChatSessionListStore((state) => state.snapshot.query);
+export function useNcpSessionListView(params: { limit?: number; query?: string | null } = {}) {
+  const storedQuery = useChatSessionListStore((state) => state.snapshot.query);
+  const query = params.query ?? storedQuery;
   const sessionsQuery = useNcpSessions({ limit: params.limit ?? 200 });
 
   const items = useMemo<NcpSessionListItemView[]>(() => {