@nextclaw/ui 0.14.1 → 0.14.2

package/src/features/agents/components/__tests__/agents-page.test.tsx

@@ -1,13 +1,10 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
+import type * as ReactRouterDom from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { AgentsPage } from "@/features/agents";
-import type * as ChatFeature from "@/features/chat";
 import {
-  ChatPresenter,
-  ChatPresenterProvider,
-  useChatInputStore,
   useChatSessionListStore,
   useChatThreadStore,
 } from "@/features/chat";
@@ -17,6 +14,8 @@ const mocks = vi.hoisted(() => ({
   createAgent: vi.fn(),
   updateAgent: vi.fn(),
   deleteAgent: vi.fn(),
+  navigate: vi.fn(),
+  requestDraft: vi.fn(),
   sessionTypesQuery: {
     data: {
       defaultType: "native",
@@ -90,6 +89,35 @@ const mocks = vi.hoisted(() => ({
     },
   },
 }));
+const persistStorage = new Map<string, unknown>();
+
+function createPersistStorage() {
+  return {
+    getItem: (name: string) => persistStorage.get(name) ?? null,
+    setItem: (name: string, value: unknown) => {
+      persistStorage.set(name, value);
+    },
+    removeItem: (name: string) => {
+      persistStorage.delete(name);
+    },
+  };
+}
+
+vi.mock("react-router-dom", async (importOriginal) => {
+  const actual = await importOriginal<typeof ReactRouterDom>();
+  return {
+    ...actual,
+    useNavigate: () => mocks.navigate,
+  };
+});
+
+vi.mock("@/app/components/app-presenter-provider", () => ({
+  useAppPresenter: () => ({
+    chatDraftIntentManager: {
+      requestDraft: mocks.requestDraft,
+    },
+  }),
+}));
 
 vi.mock("@/shared/hooks/use-agents", () => ({
   useAgents: () => mocks.agentsQuery,
@@ -147,35 +175,50 @@ vi.mock("@/shared/hooks/use-config", () => ({
   }),
 }));
 
-vi.mock("@/features/chat", async (importOriginal) => {
-  const actual = await importOriginal<typeof ChatFeature>();
+vi.mock("@/features/chat", async () => {
+  const sessionListStore = await import("@/features/chat/stores/chat-session-list.store");
+  const threadStore = await import("@/features/chat/stores/chat-thread.store");
+  const sessionTypeUtils = await import("@/features/chat/features/session-type/utils/chat-session-type.utils");
   return {
-    ...actual,
+    ...sessionTypeUtils,
+    usePresenter: () => ({
+      chatSessionListManager: {
+        startAgentDraftChat: (agentId: string) => {
+          sessionListStore.useChatSessionListStore.getState().setSnapshot({
+            selectedAgentId: agentId,
+            selectedSessionKey: null,
+          });
+          threadStore.useChatThreadStore.getState().setSnapshot({
+            sessionKey: null,
+          });
+        },
+      },
+    }),
+    useChatSessionListStore: sessionListStore.useChatSessionListStore,
+    useChatThreadStore: threadStore.useChatThreadStore,
     useNcpChatSessionTypes: () => mocks.sessionTypesQuery,
   };
 });
 
 function renderAgentsPage() {
-  const presenter = new ChatPresenter({
-    docBrowserManager: {
-      open: vi.fn(),
-    },
-  } as unknown as ConstructorParameters<typeof ChatPresenter>[0]);
   return render(
     <MemoryRouter>
-      <ChatPresenterProvider presenter={presenter}>
-        <AgentsPage />
-      </ChatPresenterProvider>
+      <AgentsPage />
     </MemoryRouter>,
   );
 }
 
 describe("AgentsPage", () => {
   beforeEach(() => {
+    persistStorage.clear();
+    useChatSessionListStore.persist.setOptions({ storage: createPersistStorage() as never });
+    useChatThreadStore.persist.setOptions({ storage: createPersistStorage() as never });
     setLanguage("zh");
     mocks.createAgent.mockReset();
     mocks.updateAgent.mockReset();
     mocks.deleteAgent.mockReset();
+    mocks.navigate.mockReset();
+    mocks.requestDraft.mockReset();
     if (!HTMLElement.prototype.hasPointerCapture) {
       HTMLElement.prototype.hasPointerCapture = () => false;
     }
@@ -185,15 +228,6 @@ describe("AgentsPage", () => {
     if (!HTMLElement.prototype.releasePointerCapture) {
       HTMLElement.prototype.releasePointerCapture = () => {};
     }
-    useChatInputStore.setState({
-      snapshot: {
-        ...useChatInputStore.getState().snapshot,
-        draft: "",
-        pendingSessionType: "native",
-        pendingProjectRoot: "/tmp/demo-project",
-        pendingProjectRootSessionKey: "draft-session",
-      },
-    });
     useChatSessionListStore.setState({
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
@@ -227,13 +261,9 @@ describe("AgentsPage", () => {
 
     await user.click(screen.getByRole("button", { name: "新增 Agent" }));
 
-    expect(useChatSessionListStore.getState().snapshot.selectedAgentId).toBe(
-      "main",
-    );
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
-    expect(useChatThreadStore.getState().snapshot.sessionKey).toBeNull();
-    expect(useChatInputStore.getState().snapshot.draft).toContain(
-      "请直接创建一个默认示例 Agent，不要问我问题",
+    expect(mocks.navigate).toHaveBeenCalledWith("/chat");
+    expect(mocks.requestDraft).toHaveBeenCalledWith(
+      expect.stringContaining("请直接创建一个默认示例 Agent，不要问我问题"),
     );
     expect(mocks.createAgent).not.toHaveBeenCalled();
     expect(screen.queryByText("创建新的 Agent 身份")).toBeNull();
@@ -281,7 +311,7 @@ describe("AgentsPage", () => {
     });
   });
 
-  it("starts a draft chat with the agent runtime as the pending session type", async () => {
+  it("starts a draft chat with the agent selected through the session list owner", async () => {
     const user = userEvent.setup();
 
     renderAgentsPage();
@@ -294,12 +324,5 @@ describe("AgentsPage", () => {
     );
     expect(sessionListSnapshot.selectedSessionKey).toBeNull();
     expect(useChatThreadStore.getState().snapshot.sessionKey).toBeNull();
-    expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe(
-      "codex",
-    );
-    expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBeNull();
-    expect(
-      useChatInputStore.getState().snapshot.pendingProjectRootSessionKey,
-    ).toBeNull();
   });
 });

package/src/features/agents/components/agents-page.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import {
   useDeleteAgent,
   useAgents,
@@ -18,6 +19,7 @@ import {
   usePresenter,
   useNcpChatSessionTypes,
 } from "@/features/chat";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { AgentAvatar } from "@/shared/components/common/agent-avatar";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
@@ -235,6 +237,8 @@ function AgentListCard(props: {
 
 export function AgentsPage() {
   const presenter = usePresenter();
+  const appPresenter = useAppPresenter();
+  const navigate = useNavigate();
   const agentsQuery = useAgents();
   const configQuery = useConfig();
   const providersQuery = useProviders();
@@ -309,14 +313,16 @@ export function AgentsPage() {
       resolveAgentRuntimeSessionType(agent, defaultRuntime),
     );
   };
+  const requestAgentCreationDraft = () => {
+    navigate("/chat");
+    appPresenter.chatDraftIntentManager.requestDraft(AGENT_CREATION_PROMPT);
+  };
 
   return (
     <PageLayout className="space-y-5">
       <AgentsHero
         agentCount={agents.length}
-        onCreate={() =>
-          presenter.startAgentCreationDraft(AGENT_CREATION_PROMPT)
-        }
+        onCreate={requestAgentCreationDraft}
       />
 
       <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
@@ -342,9 +348,7 @@ export function AgentsPage() {
                 type="button"
                 variant="primary"
                 className="mt-5 rounded-2xl px-5"
-                onClick={() =>
-                  presenter.startAgentCreationDraft(AGENT_CREATION_PROMPT)
-                }
+                onClick={requestAgentCreationDraft}
               >
                 <Plus className="mr-2 h-4 w-4" />
                 {t("agentsCreateButton")}

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

@@ -0,0 +1,145 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { PersistStorage, StorageValue } from "zustand/middleware";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatConversationHeaderSection } from "@/features/chat/components/conversation/chat-conversation-header-section";
+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";
+
+const mocks = vi.hoisted(() => ({
+  deleteSession: vi.fn(),
+  openChildSessionPanel: vi.fn(),
+  openSessionCronPanel: vi.fn(),
+}));
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: {
+      deleteSession: mocks.deleteSession,
+      openChildSessionPanel: mocks.openChildSessionPanel,
+      openSessionCronPanel: mocks.openSessionCronPanel,
+    },
+  }),
+}));
+
+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-18T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function renderHeaderSection() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ChatConversationHeaderSection layoutMode="desktop" />
+    </QueryClientProvider>,
+  );
+}
+
+describe("ChatConversationHeaderSection", () => {
+  beforeEach(() => {
+    mocks.deleteSession.mockReset();
+    mocks.openChildSessionPanel.mockReset();
+    mocks.openSessionCronPanel.mockReset();
+    useChatSessionListStore.persist.setOptions({
+      storage: new MemoryPersistStorage(),
+    });
+    useChatThreadStore.persist.setOptions({
+      storage: new MemoryPersistStorage(),
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedAgentId: "main",
+        selectedSessionKey: "parent-session-1",
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: "parent-session-1",
+        childSessionTabs: [],
+        workspaceFileTabs: [],
+        workspacePanelParentKey: null,
+        activeWorkspacePanelKind: null,
+      },
+    });
+    useChatQueryStore.setState({
+      snapshot: {
+        sessionsQuery: {
+          data: {
+            sessions: [
+              createSummary({
+                sessionId: "parent-session-1",
+                metadata: {
+                  label: "Parent Task",
+                  session_type: "native",
+                },
+              }),
+              createSummary({
+                sessionId: "child-session-1",
+                agentId: "verifier",
+                metadata: {
+                  label: "Child Task",
+                  parent_session_id: "parent-session-1",
+                  session_type: "native",
+                },
+              }),
+            ],
+            total: 2,
+          },
+        } as never,
+        sessionTypesQuery: {
+          data: {
+            defaultType: "native",
+            options: [],
+          },
+        } as never,
+      },
+    });
+  });
+
+  it("shows the child-session entry from session query state before a tool card opens it", async () => {
+    const user = userEvent.setup();
+
+    renderHeaderSection();
+    await user.click(screen.getByRole("button", { name: "View child sessions" }));
+
+    expect(mocks.openChildSessionPanel).toHaveBeenCalledWith({
+      parentSessionKey: "parent-session-1",
+      activeChildSessionKey: "child-session-1",
+    });
+  });
+});